{"_id":"@alansynn/design","_rev":"3-336a9ac41e5e96b11a02b866364838ba","name":"@alansynn/design","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.1":{"name":"@alansynn/design","version":"0.2.1","keywords":["design-system","ui","components","react","tailwind","tailwindcss","design-tokens","theming","accessibility","motus"],"author":{"name":"Alan Synn"},"license":"MIT","_id":"@alansynn/design@0.2.1","maintainers":[{"name":"alansynn","email":"alan@alansynn.com"}],"homepage":"https://github.com/AlanSynn/design-system/tree/main/packages/ui#readme","bugs":{"url":"https://github.com/AlanSynn/design-system/issues"},"dist":{"shasum":"25080781a63aee726fa5e2a82ccb52b66e7ab759","tarball":"https://registry.npmjs.org/@alansynn/design/-/design-0.2.1.tgz","fileCount":80,"integrity":"sha512-ASXWrNKNW7VKYTeARV65FZK7rgmPbgyraKd0EFGwV+SdCvTMf44fHVggpMS2dbFMJMYhjmArnznuYp0BD3v6Lw==","signatures":[{"sig":"MEUCICtdOOhxin+RT7sfIfcIJ2MPoi6ReXTzzHi9XtFGPKpFAiEA3IAjYeuW8yOv/DbFxDqmUOdb8vq1ZAbvBuoN+0Op68c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":173720},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./index.d.ts","import":"./index.js"},"./utils":{"types":"./lib/utils.d.ts","import":"./lib/utils.js"},"./styles.css":"./styles/index.css","./tokens.css":"./styles/tokens.css","./package.json":"./package.json"},"gitHead":"c09724e99a522cd64340f0250e7c0a1f05edd1f9","_npmUser":{"name":"alansynn","email":"alan@alansynn.com"},"repository":{"url":"git+https://github.com/AlanSynn/design-system.git","type":"git","directory":"packages/ui"},"_npmVersion":"11.17.0","description":"Motus design system — tokens, primitives, components, and theme. Light-first, engine-agnostic, Tailwind v4.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"26.5.0","dependencies":{"clsx":"^2.1.1","motion":"^11.15.0","lucide-react":"^0.469.0","tailwind-merge":"^2.6.0","@radix-ui/react-slot":"^1.1.1","@radix-ui/react-tabs":"^1.1.2","@radix-ui/react-dialog":"^1.1.4","@radix-ui/react-slider":"^1.2.2","@radix-ui/react-switch":"^1.1.2","@radix-ui/react-popover":"^1.1.4","@radix-ui/react-tooltip":"^1.1.6","class-variance-authority":"^0.7.1","@radix-ui/react-dropdown-menu":"^2.1.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design_0.2.1_1784574608011_0.892161966136324","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@alansynn/design","version":"0.2.2","keywords":["design-system","ui","components","react","tailwind","tailwindcss","design-tokens","theming","accessibility","motus"],"author":{"name":"Alan Synn"},"license":"MIT","_id":"@alansynn/design@0.2.2","maintainers":[{"name":"alansynn","email":"alan@alansynn.com"}],"homepage":"https://github.com/AlanSynn/design-system/tree/main/packages/ui#readme","bugs":{"url":"https://github.com/AlanSynn/design-system/issues"},"dist":{"shasum":"188f11678202e057e5e8d543c791b17ecf374f2e","tarball":"https://registry.npmjs.org/@alansynn/design/-/design-0.2.2.tgz","fileCount":80,"integrity":"sha512-A7FqvsLiMJcgayZIYiK+pF/Qe9IJr04kL0IxhlzWyKD5OgnV2/h81l82LJ0gfZDQaQzUA85k6vx53fX1XPT9EA==","signatures":[{"sig":"MEYCIQDxN/nPf4Utek9SXlpc67gPTk49aLym7eVl7Jark7RzNwIhAK+nY1AraveEW4GiWpwhOrTEm9aKtyKySMLYSjyI2/FB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":175051},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./index.d.ts","import":"./index.js"},"./utils":{"types":"./lib/utils.d.ts","import":"./lib/utils.js"},"./styles.css":"./styles/index.css","./tokens.css":"./styles/tokens.css","./package.json":"./package.json"},"gitHead":"5395f7acb55c8ea6c3980c0c70b3bdbb24d827b8","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9228dcc7-b62a-4e3a-8f62-fb8a2a40572c"}},"repository":{"url":"git+https://github.com/AlanSynn/design-system.git","type":"git","directory":"packages/ui"},"_npmVersion":"12.0.1","description":"Motus design system — tokens, primitives, components, and theme. Light-first, engine-agnostic, Tailwind v4.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.18.0","dependencies":{"clsx":"^2.1.1","motion":"^11.15.0","lucide-react":"^0.469.0","tailwind-merge":"^2.6.0","@radix-ui/react-slot":"^1.1.1","@radix-ui/react-tabs":"^1.1.2","@radix-ui/react-dialog":"^1.1.4","@radix-ui/react-slider":"^1.2.2","@radix-ui/react-switch":"^1.1.2","@radix-ui/react-popover":"^1.1.4","@radix-ui/react-tooltip":"^1.1.6","class-variance-authority":"^0.7.1","@radix-ui/react-dropdown-menu":"^2.1.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design_0.2.2_1784590145661_0.6451655505927325","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@alansynn/design","version":"0.2.3","description":"Motus design system — tokens, primitives, components, and theme. Light-first, engine-agnostic, Tailwind v4.","type":"module","license":"MIT","author":{"name":"Alan Synn"},"sideEffects":["**/*.css"],"main":"./index.js","module":"./index.js","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./index.js"},"./styles.css":"./styles/index.css","./tokens.css":"./styles/tokens.css","./utils":{"types":"./lib/utils.d.ts","import":"./lib/utils.js"},"./package.json":"./package.json"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@radix-ui/react-dialog":"^1.1.4","@radix-ui/react-dropdown-menu":"^2.1.4","@radix-ui/react-popover":"^1.1.4","@radix-ui/react-slider":"^1.2.2","@radix-ui/react-slot":"^1.1.1","@radix-ui/react-switch":"^1.1.2","@radix-ui/react-tabs":"^1.1.2","@radix-ui/react-tooltip":"^1.1.6","class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^0.469.0","motion":"^11.15.0","tailwind-merge":"^2.6.0"},"repository":{"type":"git","url":"git+https://github.com/AlanSynn/design.git","directory":"packages/ui"},"homepage":"https://github.com/AlanSynn/design/tree/main/packages/ui#readme","bugs":{"url":"https://github.com/AlanSynn/design/issues"},"keywords":["design-system","ui","components","react","tailwind","tailwindcss","design-tokens","theming","accessibility","motus"],"publishConfig":{"access":"public"},"engines":{"node":">=18.0.0"},"gitHead":"7456e897808edd528f80467bd30806c0a8f9b232","_id":"@alansynn/design@0.2.3","_nodeVersion":"24.18.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-Ac6XoQ016tto7+5+QeRgG7IdOxwIBpnJNdxKvLPPcecCK86Ym+YHisc8XkBlQNaxWp3Sw6ArVL6jx3zI18oiWQ==","shasum":"1bc9c380e5bc6e527dc1b99bd04763b151305395","tarball":"https://registry.npmjs.org/@alansynn/design/-/design-0.2.3.tgz","fileCount":79,"unpackedSize":169525,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEsA0mvHm676pEI5gH9HzolqeySy/ot0K3AXk2ZjS2YiAiEAqFBiem8mJHyDw175+p9ADs+9T1BcZmXrv/s16Z1ZpZs="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:41e7a457-e3b7-429a-8234-7be58426a27a"}},"directories":{},"maintainers":[{"name":"alansynn","email":"alan@alansynn.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design_0.2.3_1784596668775_0.691412783019187"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-20T19:10:07.912Z","modified":"2026-07-21T01:17:49.043Z","0.2.1":"2026-07-20T19:10:08.229Z","0.2.2":"2026-07-20T23:29:05.804Z","0.2.3":"2026-07-21T01:17:48.913Z"},"bugs":{"url":"https://github.com/AlanSynn/design/issues"},"author":{"name":"Alan Synn"},"license":"MIT","homepage":"https://github.com/AlanSynn/design/tree/main/packages/ui#readme","keywords":["design-system","ui","components","react","tailwind","tailwindcss","design-tokens","theming","accessibility","motus"],"repository":{"type":"git","url":"git+https://github.com/AlanSynn/design.git","directory":"packages/ui"},"description":"Motus design system — tokens, primitives, components, and theme. Light-first, engine-agnostic, Tailwind v4.","maintainers":[{"name":"alansynn","email":"alan@alansynn.com"}],"readme":"# @alansynn/design\n\nThe **Motus** design system — tokens, primitives, components, and theme. Light-first with first-class dark mode, sub-brand theming via `[data-accent]`, and a 3-layer token architecture on Tailwind v4. Engine-agnostic: zero render-engine imports (no `three` / `react-three-fiber`), so the same components drive a DOM app or a 3D scene.\n\n- **React 19** · **Tailwind v4** (`@theme inline`) · **Radix UI** · **motion v11** · **TypeScript**\n- ~30 primitives: Button, IconButton, Card, Panel, Slider, SegmentedControl, Switch, Checkbox, RadioGroup, TextField, TextArea, NumberField, Select, Tabs, Modal, Tooltip, Badge, Toast, ProgressBar, Skeleton, Spinner, StatusMessage, EmptyState\n- A11y helpers: `FocusTrap`, `SkipLink`, `LiveRegion`, `VisuallyHidden`\n- Theme: `ThemeProvider` + `useTheme()` (theme + accent), persisted, honors `prefers-color-scheme`\n- `[data-accent]` sub-brand ramp: `violet` (default) · `iris` · `emerald` · `rose` · `amber` · `cyan` — all WCAG-AA tuned\n\n## Install\n\n```bash\n# npm\nnpm install @alansynn/design\n\n# bun\nbun add @alansynn/design\n\n# pnpm / yarn work the same\n```\n\nReact 19 is a peer dependency.\n\n## Styles (Tailwind v4)\n\nThis package ships its **Tailwind v4 source** (tokens, `@theme inline`, `@utility`, base). Import it as your **single** Tailwind entry — do not also `@import \"tailwindcss\"` separately, the package already does:\n\n```css\n/* app.css — your one Tailwind entry */\n@import \"@alansynn/design/styles.css\";\n```\n\nThat brings in Tailwind v4 + the full Motus token layer + base + component utilities. Compile it with your usual Tailwind v4 build (`@tailwindcss/cli`, the Vite plugin, or PostCSS).\n\n> Just want the tokens without the Tailwind primitives? `@import \"@alansynn/design/tokens.css\";` gives the raw + semantic token layer only.\n\n## Usage\n\n```tsx\nimport \"@alansynn/design/styles.css\";\nimport {\n  ThemeProvider,\n  Button,\n  Card,\n  CardBody,\n  useTheme,\n} from \"@alansynn/design\";\n\nexport default function App() {\n  return (\n    <ThemeProvider defaultTheme=\"light\">\n      <Card>\n        <CardBody>\n          <Button variant=\"primary\">Ship the design</Button>\n        </CardBody>\n      </Card>\n    </ThemeProvider>\n  );\n}\n```\n\n### Theming\n\n`ThemeProvider` reads `prefers-color-scheme` on first paint, persists the choice, and exposes `useTheme()`:\n\n```tsx\nconst { theme, setTheme, accent, setAccent } = useTheme();\n\nsetAccent(\"emerald\"); // flips --primary across the whole app\n```\n\nAccent is applied as a scoped `[data-accent]` attribute; `violet` is the default (no attribute). Soft / ring / glow variants derive via `color-mix`, so a single `--primary` swap re-skins the entire product.\n\n## 3-layer tokens\n\n```\nraw (:root)              → semantic ([data-theme])   → @theme inline (Tailwind utilities)\nviolet-500: #7c5cf6         --primary: violet-500        bg-primary, text-primary-fg, …\n```\n\nAdd a token in `tokens.css` (semantic block for **both** themes + an `@theme inline` mapping). Never inline a literal value in component chrome — the token layer is the source of truth.\n\n## Engine-flexibility\n\n`@alansynn/design` contains **zero** render-engine imports — verified by the empty result of:\n\n```bash\ngrep -rn \"@react-three\\|react-three\\|from ['\\\"]three['\\\"]\" packages/ui/src\n```\n\nThat emptiness *is* the contract: swap the engine (r3f → viser → canvas2d) and the design system survives unchanged. Only the demos re-implement.\n\n## License\n\n[MIT](./LICENSE) © Alan Synn\n","readmeFilename":"README.md"}