{"_id":"@alluxi/design-system","_rev":"2-fee09b246d77a24ec6080e351bf2b50a","name":"@alluxi/design-system","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@alluxi/design-system","version":"0.1.0","license":"MIT","_id":"@alluxi/design-system@0.1.0","maintainers":[{"name":"gusreyes01","email":"gustavo@alluxi.com"}],"homepage":"https://www.alluxi.com","dist":{"shasum":"baf2cac0088be17bf32eb830d420537eec2be387","tarball":"https://registry.npmjs.org/@alluxi/design-system/-/design-system-0.1.0.tgz","fileCount":8,"integrity":"sha512-K2pY0zN/TKbgBqkybyfMNCdflYHOr0rW+BGv345iEj6QfHdwkHjZg4YIYsXBKm/D9FQavgwieOIlvzeHkGjfWA==","signatures":[{"sig":"MEQCIEfaH9dl3PazX0yJXB8PdV2QmUHscu+y1ZAXExs622vbAiAeJwdV49yRWEdOX9QZy4WBQUam2B2VrDz3g/MJ32lofg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96993},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./theme.css":"./src/styles/theme.css","./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch","build":"npm run build:js && npm run build:css","build:js":"tsup","build:css":"tailwindcss -i ./src/styles/index.css -o ./dist/styles.css","typecheck":"tsc --noEmit"},"_npmUser":{"name":"gusreyes01","email":"gustavo@alluxi.com"},"_npmVersion":"11.6.2","description":"Alluxi/Axionix shared design system — brand tokens and React primitives","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.14.0","dependencies":{"lucide-react":"^0.477.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8","react":"^19","react-dom":"^19","typescript":"^5","tailwindcss":"^4","@types/react":"^19","@tailwindcss/cli":"^4","@types/react-dom":"^19"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.0_1781891288344_0.873498618777089","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alluxi/design-system","version":"0.1.1","description":"Alluxi/Axionix shared design system — brand tokens and React primitives","license":"MIT","homepage":"https://github.com/alluximx/design-system#readme","repository":{"type":"git","url":"git+https://github.com/alluximx/design-system.git"},"bugs":{"url":"https://github.com/alluximx/design-system/issues"},"keywords":["alluxi","axionix","design-system","react","tailwindcss","ui","components"],"type":"module","sideEffects":["*.css"],"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./theme.css":"./src/styles/theme.css"},"scripts":{"build:js":"tsup","build:css":"tailwindcss -i ./src/styles/index.css -o ./dist/styles.css","build":"npm run build:js && npm run build:css","dev":"tsup --watch","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"lucide-react":"^0.477.0"},"devDependencies":{"@tailwindcss/cli":"^4","@types/react":"^19","@types/react-dom":"^19","react":"^19","react-dom":"^19","tailwindcss":"^4","tsup":"^8","typescript":"^5"},"gitHead":"a45992ce86230ee1c20100624163138381175108","_id":"@alluxi/design-system@0.1.1","_nodeVersion":"22.14.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-P5z/58pKfQ3e1swpYbMl+jPti+YVwVvGWlWvjIJRgQyHydP0AMM4kZ1eTuIOTdF7bTQSusOHyWM3uJmVKggx8Q==","shasum":"e72d9296c68bfcefbd7bad3f62daa5154adcfef8","tarball":"https://registry.npmjs.org/@alluxi/design-system/-/design-system-0.1.1.tgz","fileCount":9,"unpackedSize":102043,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDhs8a0L/Bq7ICK8KejZsknGEjoVZ0k2932FknT9+g0RAiEAs5Cz8uun7C39cD6prV8HsBZrsR5uaKGWGiCFqIlb3IQ="}]},"_npmUser":{"name":"gusreyes01","email":"gustavo@alluxi.com"},"directories":{},"maintainers":[{"name":"gusreyes01","email":"gustavo@alluxi.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.1.1_1781973470170_0.8127766399782923"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-19T17:48:08.170Z","modified":"2026-06-20T16:37:50.450Z","0.1.0":"2026-06-19T17:48:08.496Z","0.1.1":"2026-06-20T16:37:50.319Z"},"license":"MIT","homepage":"https://github.com/alluximx/design-system#readme","description":"Alluxi/Axionix shared design system — brand tokens and React primitives","maintainers":[{"name":"gusreyes01","email":"gustavo@alluxi.com"}],"readme":"# @alluxi/design-system\n\n[![npm version](https://img.shields.io/npm/v/@alluxi/design-system?color=cb3837&logo=npm)](https://www.npmjs.com/package/@alluxi/design-system)\n[![license](https://img.shields.io/npm/l/@alluxi/design-system?color=3973e7)](./LICENSE)\n\nShared design system for the Alluxi / Axionix suite — the canonical brand tokens\nand a small set of React primitives that every app (and the marketing site)\nbuilds on. It is the single source of truth for the Alluxi palette, type scale,\nand the `.alluxi-*` component idioms.\n\n- **Tokens** — the full brand vocabulary (colors, surfaces, borders, status\n  tones, fonts) as CSS custom properties, mapped into Tailwind v4 with light and\n  dark variants.\n- **Components** — accessible, ref-forwarding React primitives styled with those\n  tokens: buttons, cards, form controls, tables, badges, avatars, dialogs and a\n  theme provider.\n\n## Install\n\n```sh\nnpm install @alluxi/design-system\n```\n\nReact 18 or 19 is a peer dependency:\n\n```sh\nnpm install react react-dom\n```\n\n## Usage\n\n### 1. Wire up the styles\n\nThere are two entry points depending on how you render.\n\n**Apps (Tailwind v4)** — import the source `theme.css` through your own Tailwind\nentry so you only ship the utilities you actually use. Point Tailwind at the\npackage's compiled components so their classes are emitted:\n\n```css\n/* app/globals.css */\n@import \"tailwindcss\";\n@import \"@alluxi/design-system/theme.css\";\n@source \"../../node_modules/@alluxi/design-system/dist\";\n```\n\n`theme.css` deliberately does **not** pull in `@import \"tailwindcss\"` or load\nfonts — your app owns those. With `next/font`, set `--font-open-sans` and\n`--font-manrope`; the tokens defer to them.\n\n**Standalone (no Tailwind build)** — for isolated rendering (previews, docs,\n[claude.ai/design](https://claude.ai/design)), import the prebuilt stylesheet,\nwhich carries the full token vocabulary and the fonts:\n\n```ts\nimport \"@alluxi/design-system/styles.css\";\n```\n\n### 2. Use the components\n\n```tsx\nimport { Button, Card, Heading, Text, Badge } from \"@alluxi/design-system\";\n\nexport function Example() {\n  return (\n    <Card>\n      <Heading level={2}>Invoices</Heading>\n      <Text>Everything billed this period.</Text>\n      <Badge variant=\"success\">Paid</Badge>\n      <Button variant=\"primary\">New invoice</Button>\n    </Card>\n  );\n}\n```\n\n### 3. Dark mode\n\n`ThemeProvider` toggles the `.dark` class on `<html>` and shares the current\ntheme through context. Persistence is intentionally not built in — bring your\nown via `onThemeChange` so the provider stays framework-agnostic:\n\n```tsx\nimport { ThemeProvider, useTheme } from \"@alluxi/design-system\";\n\nfunction App({ children }) {\n  return (\n    <ThemeProvider\n      initialTheme=\"light\"\n      onThemeChange={(theme) => document.cookie = `theme=${theme}; path=/`}\n    >\n      {children}\n    </ThemeProvider>\n  );\n}\n\nfunction ThemeToggle() {\n  const { theme, toggleTheme } = useTheme();\n  return <Button onClick={toggleTheme}>{theme === \"dark\" ? \"Light\" : \"Dark\"}</Button>;\n}\n```\n\n## Components\n\n| Export | Description |\n| --- | --- |\n| `Button` | Brand button — `primary` (filled navy) or `secondary` (bordered surface). |\n| `Card` | Surface container with the brand border, radius, padding and shadow. |\n| `Input` / `Textarea` / `Select` | Form controls on the `.alluxi-form-input` idiom (the brand chevron replaces the native `Select` arrow). |\n| `SearchableSelect` | Type-to-filter single select with keyboard navigation. |\n| `Heading` | Section heading in the brand type scale (`level` 1–3). |\n| `CoverTitle` / `CoverSubtitle` | Large Manrope hero/report headers. |\n| `Text` | Body copy in the brand secondary color and size. |\n| `Table` / `TotalRow` | Brand data table (navy header, zebra rows) with an emphasized summary row. |\n| `Badge` | Status pill — `neutral`, `success`, `warning`, `danger`. |\n| `Avatar` / `UnassignedAvatar` | Round avatar with image fallback to stable colored initials. |\n| `ConfirmDialog` | Modal confirmation with `danger` / `warning` treatment; self-managed focus and Escape. |\n| `ThemeProvider` / `useTheme` | Light/dark theme context (bring your own persistence). |\n\nEvery component forwards its native props (and `className`), so you can extend\nany of them with Tailwind utilities or standard attributes.\n\n## Develop\n\n```sh\nnpm run build      # build JS (tsup) + CSS (tailwind) into dist/\nnpm run dev        # tsup in watch mode\nnpm run typecheck  # tsc --noEmit\n```\n\nSource lives in `src/components` (primitives) and `src/styles` (`theme.css`\ntokens + idioms, `index.css` standalone entry). The published package ships\n`dist/` plus the source `src/styles`.\n\n## License\n\nMIT © [Alluxi](https://www.alluxi.com)\n","readmeFilename":"README.md","keywords":["alluxi","axionix","design-system","react","tailwindcss","ui","components"],"repository":{"type":"git","url":"git+https://github.com/alluximx/design-system.git"},"bugs":{"url":"https://github.com/alluximx/design-system/issues"}}