{"_id":"@emilioc/helix-ds","_rev":"3-a65ef26e4c3d5fc17e76bb0c1aaaf6b9","name":"@emilioc/helix-ds","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@emilioc/helix-ds","version":"0.1.0","keywords":["design-system","helix","praxys","react","tokens","figma-make-kit","healthcare","ui"],"author":{"name":"Praxys","email":"Emilio.Carrozzino@praxys.com.ar"},"license":"UNLICENSED","_id":"@emilioc/helix-ds@0.1.0","maintainers":[{"name":"emilioc","email":"ec36415@praxys.com.ar"}],"homepage":"https://github.com/praxys/helix-ds#readme","bugs":{"url":"https://github.com/praxys/helix-ds/issues"},"dist":{"shasum":"9b30600eca15d1a98130338d0fae7949cf1ae262","tarball":"https://registry.npmjs.org/@emilioc/helix-ds/-/helix-ds-0.1.0.tgz","fileCount":502,"integrity":"sha512-ovhR6/fz3y9leaxNClR4DPol5DihMaTH7MmXebkJ1vF2SXDUbcYEsaB/W1MBWz0xeCUK4ZDxQoX+mhK20jupLw==","signatures":[{"sig":"MEYCIQCzQzJUneUR7e/gdhQV2vdrOLqnaX2Vv8E8ihuifH/OXgIhAP6TUdwvIfaXN/1LYXo63p1L22PSQML8V24ADXdzI5gM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":647089},"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.js"},"./tokens":{"types":"./dist/tokens/index.d.ts","require":"./dist/tokens/index.js"}},"scripts":{"build":"tsc --project tsconfig.json","type-check":"tsc --noEmit","build:watch":"tsc --project tsconfig.json --watch","prepublishOnly":"npm run build"},"_npmUser":{"name":"emilioc","email":"ec36415@praxys.com.ar"},"repository":{"url":"git+https://github.com/praxys/helix-ds.git","type":"git"},"_npmVersion":"11.12.1","description":"Helix Design System — React component library and token kit for Praxys products","directories":{},"_nodeVersion":"24.15.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/helix-ds_0.1.0_1780682188895_0.7070070997410085","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@emilioc/helix-ds","version":"0.1.1","keywords":["design-system","helix","praxys","react","tokens","figma-make-kit","healthcare","ui"],"author":{"name":"Praxys","email":"Emilio.Carrozzino@praxys.com.ar"},"license":"UNLICENSED","_id":"@emilioc/helix-ds@0.1.1","maintainers":[{"name":"emilioc","email":"ec36415@praxys.com.ar"}],"homepage":"https://github.com/praxys/helix-ds#readme","bugs":{"url":"https://github.com/praxys/helix-ds/issues"},"dist":{"shasum":"fb34c7316cb9c60f64672e268d4b2dfa0dfec866","tarball":"https://registry.npmjs.org/@emilioc/helix-ds/-/helix-ds-0.1.1.tgz","fileCount":502,"integrity":"sha512-yNSxhDWejvIG8Pr1FX2EFbP0K7rmJyB4iP5Ekl7aRKgyxNZwgBx5tBXTFPdhtvLjnJ+kiZIMSu+UVXoGZT7c7A==","signatures":[{"sig":"MEUCIC54Sc16wluaznJaF2e+GOr3wVU0UaX4ZGiykYq8YGTYAiEA7rfkTjwr7AZUWhZwN5VkVYvPUI7WJjMi0fu/Tu727nE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":647247},"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js","require":"./dist/index.js"},"./tokens":{"types":"./dist/tokens/index.d.ts","import":"./dist/tokens/index.js","default":"./dist/tokens/index.js","require":"./dist/tokens/index.js"}},"scripts":{"build":"tsc --project tsconfig.json","type-check":"tsc --noEmit","build:watch":"tsc --project tsconfig.json --watch","prepublishOnly":"npm run build"},"_npmUser":{"name":"emilioc","email":"ec36415@praxys.com.ar"},"repository":{"url":"git+https://github.com/praxys/helix-ds.git","type":"git"},"_npmVersion":"11.12.1","description":"Helix Design System — React component library and token kit for Praxys products","directories":{},"_nodeVersion":"24.15.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/helix-ds_0.1.1_1780683471659_0.26561296676610313","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@emilioc/helix-ds","version":"0.1.2","description":"Helix Design System — React component library and token kit for Praxys products","keywords":["design-system","helix","praxys","react","tokens","figma-make-kit","healthcare","ui"],"license":"UNLICENSED","author":{"name":"Praxys","email":"Emilio.Carrozzino@praxys.com.ar"},"repository":{"type":"git","url":"git+https://github.com/praxys/helix-ds.git"},"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js","default":"./dist/index.js","types":"./dist/index.d.ts"},"./tokens":{"import":"./dist/tokens/index.js","require":"./dist/tokens/index.js","default":"./dist/tokens/index.js","types":"./dist/tokens/index.d.ts"}},"scripts":{"build":"tsc --project tsconfig.json","build:watch":"tsc --project tsconfig.json --watch","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=17","react-dom":">=17"},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","typescript":"^5.3.0"},"_id":"@emilioc/helix-ds@0.1.2","bugs":{"url":"https://github.com/praxys/helix-ds/issues"},"homepage":"https://github.com/praxys/helix-ds#readme","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-VumNZcVE7Y/cDa0zvXusolPrc3vfVDb5gc9HAmrYN7siypIZnUNyDuwLxUH3qLC9hxb8DB4+IMYl5FBT0XBlvg==","shasum":"9963b81a7136fedfbce042970b0eed5aa3176c25","tarball":"https://registry.npmjs.org/@emilioc/helix-ds/-/helix-ds-0.1.2.tgz","fileCount":502,"unpackedSize":634055,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDJ437KoVhYnGoVkyUHAgGWQE7bG0RDbAgQ59NZbVrLaAIhAMEU2lOyUZIIOoRJAUtzicS0yBNSfuG0WIAk5Aga8LTW"}]},"_npmUser":{"name":"emilioc","email":"ec36415@praxys.com.ar"},"directories":{},"maintainers":[{"name":"emilioc","email":"ec36415@praxys.com.ar"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/helix-ds_0.1.2_1780685391433_0.21047597191932743"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-05T17:56:28.698Z","modified":"2026-06-05T18:49:51.720Z","0.1.0":"2026-06-05T17:56:29.062Z","0.1.1":"2026-06-05T18:17:51.829Z","0.1.2":"2026-06-05T18:49:51.616Z"},"bugs":{"url":"https://github.com/praxys/helix-ds/issues"},"author":{"name":"Praxys","email":"Emilio.Carrozzino@praxys.com.ar"},"license":"UNLICENSED","homepage":"https://github.com/praxys/helix-ds#readme","keywords":["design-system","helix","praxys","react","tokens","figma-make-kit","healthcare","ui"],"repository":{"type":"git","url":"git+https://github.com/praxys/helix-ds.git"},"description":"Helix Design System — React component library and token kit for Praxys products","maintainers":[{"name":"emilioc","email":"ec36415@praxys.com.ar"}],"readme":"# @emilioc/helix-ds\r\n\r\nHelix Design System — React component library and token kit for Praxys products.\r\n\r\n## Overview\r\n\r\nHelix is the cross-product design system for the Praxys pharma ecosystem. This npm package provides:\r\n\r\n- **Semantic design tokens** converted from the Flutter token source (`helix_tokens.dart v2.2`) — 184 tokens across colors, spacing, radius, size, typography, shadows, motion, and border widths.\r\n- **React components** built with zero external dependencies (besides React itself), consuming only Helix tokens — no hardcoded values anywhere.\r\n- **AI guidelines** in `guidelines/` for use with Figma Make and LLM-assisted UI generation.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @emilioc/helix-ds\r\n# peer dependencies\r\nnpm install react react-dom\r\n```\r\n\r\n## Font setup\r\n\r\nHelix uses **Figtree** as its only font family. Load it before using any component:\r\n\r\n```html\r\n<!-- In your HTML <head> -->\r\n<link\r\n  href=\"https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap\"\r\n  rel=\"stylesheet\"\r\n/>\r\n```\r\n\r\n## Usage\r\n\r\n### Components\r\n\r\n```tsx\r\nimport { Button, Badge, Input, Text } from '@emilioc/helix-ds';\r\n\r\n// Primary call-to-action\r\n<Button variant=\"primary\" size=\"md\" onClick={handleSave}>\r\n  Save\r\n</Button>\r\n\r\n// Destructive action\r\n<Button variant=\"destructive\" size=\"md\" onClick={handleDelete}>\r\n  Delete\r\n</Button>\r\n\r\n// Loading state — blocks interaction, shows spinner\r\n<Button variant=\"primary\" loading>\r\n  Saving…\r\n</Button>\r\n\r\n// Subtle secondary action\r\n<Button variant=\"subtle\" size=\"sm\">\r\n  Cancel\r\n</Button>\r\n\r\n// Status badges\r\n<Badge status=\"success\">Active</Badge>\r\n<Badge status=\"error\">Error</Badge>\r\n<Badge status=\"warning\">Pending</Badge>\r\n<Badge status=\"info\">Info</Badge>\r\n<Badge status=\"neutral\">Draft</Badge>\r\n\r\n// Input — standard appearance with focus ring\r\n<Input\r\n  label=\"Patient name\"\r\n  placeholder=\"Enter full name\"\r\n  helperText=\"As it appears on the prescription\"\r\n/>\r\n\r\n// Input — error state\r\n<Input\r\n  label=\"Email\"\r\n  value={email}\r\n  onChange={e => setEmail(e.target.value)}\r\n  error=\"Enter a valid email address\"\r\n/>\r\n\r\n// Input — flat appearance (no border, only bottom line)\r\n<Input\r\n  appearance=\"flat\"\r\n  label=\"Search\"\r\n  placeholder=\"Search records…\"\r\n/>\r\n\r\n// Typography\r\n<Text variant=\"headingLg\">Patient records</Text>\r\n<Text variant=\"bodyMd\" color={HelixColors.text.secondary}>\r\n  Last updated 5 minutes ago\r\n</Text>\r\n<Text variant=\"labelSm\" as=\"label\" htmlFor=\"input-id\">\r\n  Prescription number\r\n</Text>\r\n```\r\n\r\n### Tokens\r\n\r\n```ts\r\nimport {\r\n  HelixColors,\r\n  HelixSpacing,\r\n  HelixRadius,\r\n  HelixMotion,\r\n  HelixTypography,\r\n  HelixShadow,\r\n} from '@emilioc/helix-ds';\r\n\r\n// Color tokens\r\nconst primaryBlue = HelixColors.action.primary.default; // '#157BB5'\r\nconst errorRed    = HelixColors.fill.errorDefault;      // '#DC2837'\r\n\r\n// Spacing\r\nconst paddingMd = HelixSpacing.paddingComponent.md; // 12 (px)\r\n\r\n// Motion\r\nconst hoverTransition = HelixMotion.micro.transition('background-color');\r\n// → 'background-color 100ms cubic-bezier(0.4, 0.0, 0.2, 1.0)'\r\n\r\n// Shadow\r\nconst cardShadow = HelixShadow.md;\r\n// → '0px 4px 6px -2px rgba(18,18,23,0.051)'\r\n\r\n// Typography styles\r\nconst heading = HelixTypography.headingLg;\r\n// → { fontFamily: 'Figtree, sans-serif', fontSize: 24, fontWeight: 600, lineHeight: 1.3333 }\r\n```\r\n\r\n## Token architecture\r\n\r\nHelix follows a 3-layer token model:\r\n\r\n```\r\nLayer 1: Primitive  → raw values  (primary/500: #157BB5)\r\nLayer 2: Semantic   → usage role  (action.primary.default → primary/500)\r\nLayer 3: Component  → in progress (button-bg-primary → action.primary.default)\r\n```\r\n\r\n**Rule:** always consume semantic tokens. Never use primitive values or hex literals directly in component code.\r\n\r\n## Components reference\r\n\r\n| Component | Variants | States |\r\n|-----------|----------|--------|\r\n| `Button`  | primary, destructive, featured, subtle | default, hover, pressed, focus, disabled, loading |\r\n| `Badge`   | success, warning, error, info, neutral | static (display only) |\r\n| `Input`   | standard, flat | default, focus, error, disabled |\r\n| `Text`    | 20 type-scale variants | — |\r\n\r\n## Guidelines for AI / Figma Make\r\n\r\nSee `guidelines/` directory:\r\n\r\n- `SYSTEM.md` — design system rules for AI-assisted generation\r\n- `TOKENS.md` — token semantics, when to use subtle/default/strong\r\n- `COMPONENTS.md` — per-component usage, variants × states table, code examples\r\n- `MOTION.md` — motion tiers, enter/exit rules, implementation patterns\r\n\r\n## Healthtech note\r\n\r\nHelix is built for the pharma ecosystem. Error states in inputs have clinical consequences — they must be precise, never silent. Touch targets are minimum 32px. Accessibility (WCAG contrast, visible focus, correct ARIA) is mandatory, not optional.\r\n\r\n## Maintainer\r\n\r\nEmilio Carrozzino — Emilio.Carrozzino@praxys.com.ar\r\n","readmeFilename":"README.md"}