{"_id":"@dybo-ai/design","_rev":"5-fa422408efade7be77ac5f84c40d2d5e","name":"@dybo-ai/design","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.1":{"name":"@dybo-ai/design","version":"1.0.1","keywords":["dybo","design-system","design-tokens","tailwind","tailwind-v4","glassmorphism","react-components"],"license":"UNLICENSED","_id":"@dybo-ai/design@1.0.1","maintainers":[{"name":"lukavieira1","email":"lukavieira14@gmail.com"},{"name":"tony-mussoi","email":"amussoi@mydybo.com"}],"homepage":"https://github.com/dybo-ai/dybo-design#readme","bugs":{"url":"https://github.com/dybo-ai/dybo-design/issues"},"dist":{"shasum":"442f893dc7dcdb504e0abda24df627d0d62a1e32","tarball":"https://registry.npmjs.org/@dybo-ai/design/-/design-1.0.1.tgz","fileCount":16,"integrity":"sha512-SjmbDNGARP++pyZldQQhfcZcNUta4vKR1PWmUeMCNsX50wX/c3UhAuGAe1c5u+uk/4NWrvbxyZh/6eYAAAoA5Q==","signatures":[{"sig":"MEUCIQDkdoqhBG4Z+C/3v6gcxgAc81HS//B43OXKnBzSwc9fGQIgZZlOI5FYGlKhZ4yYRcX5rPhgPjiekmmhdb1sbB7mdR8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":245090},"main":"./tokens.cjs","type":"module","types":"./dist/index.d.ts","module":"./tokens.mjs","exports":{".":{"import":"./tokens.mjs","require":"./tokens.cjs"},"./react":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./assets/*":"./assets/*","./theme.css":"./theme.css","./tokens.json":"./tokens.json"},"gitHead":"1d8cf778aef63bf4b395dcb3f0340fa63553fb44","private":false,"scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"lukavieira1","email":"lukavieira14@gmail.com"},"repository":{"url":"git+https://github.com/dybo-ai/dybo-design.git","type":"git"},"_npmVersion":"10.8.2","description":"DYBO design system — tokens, Tailwind V4 theme, theme CSS, and React components.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"20.20.2","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design_1.0.1_1786455218077_0.19402524099654395","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@dybo-ai/design","version":"1.1.0","keywords":["dybo","design-system","design-tokens","tailwind","tailwind-v4","glassmorphism","react-components"],"license":"UNLICENSED","_id":"@dybo-ai/design@1.1.0","maintainers":[{"name":"lukavieira1","email":"lukavieira14@gmail.com"},{"name":"tony-mussoi","email":"amussoi@mydybo.com"}],"homepage":"https://github.com/dybo-ai/dybo-design#readme","bugs":{"url":"https://github.com/dybo-ai/dybo-design/issues"},"dist":{"shasum":"06702a8c3c6825e6adcd0612c08503d39b16704a","tarball":"https://registry.npmjs.org/@dybo-ai/design/-/design-1.1.0.tgz","fileCount":16,"integrity":"sha512-iEygeqS7OxjLdPmBJXtOdaEqItP+jax+YjWJGECxpY+xUkyiBZpnMwENxog99jJJwhAc4MVhOaLV9ylIopxfug==","signatures":[{"sig":"MEUCIFdqxgTRxz3bVY78t7NOLH/Bx9YCw9cXONpO3hQPLP4RAiEAii+xGNE6ECUC1YdwfD+WC8uVzNa/EujquLGJ4TT5OpA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":245693},"main":"./tokens.cjs","type":"module","types":"./dist/index.d.ts","module":"./tokens.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./tokens":{"import":"./tokens.mjs","require":"./tokens.cjs"},"./assets/*":"./assets/*","./theme.css":"./theme.css","./tokens.json":"./tokens.json"},"gitHead":"ac97f236320ed9df2e9c59929d37e991bc2ae054","private":false,"scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"lukavieira1","email":"lukavieira14@gmail.com"},"repository":{"url":"git+https://github.com/dybo-ai/dybo-design.git","type":"git"},"_npmVersion":"10.8.2","description":"DYBO design system — tokens, Tailwind V4 theme, theme CSS, and React components.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"20.20.2","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design_1.1.0_1786470828901_0.1803970769018859","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@dybo-ai/design","version":"1.2.0","keywords":["dybo","design-system","design-tokens","tailwind","tailwind-v4","glassmorphism","react-components"],"license":"UNLICENSED","_id":"@dybo-ai/design@1.2.0","maintainers":[{"name":"lukavieira1","email":"lukavieira14@gmail.com"},{"name":"tony-mussoi","email":"amussoi@mydybo.com"}],"homepage":"https://github.com/dybo-ai/dybo-design#readme","bugs":{"url":"https://github.com/dybo-ai/dybo-design/issues"},"dist":{"shasum":"7a69b599025bcbd2b61ea425677aa01789a85dba","tarball":"https://registry.npmjs.org/@dybo-ai/design/-/design-1.2.0.tgz","fileCount":17,"integrity":"sha512-Sv0UiLDt4BJxjT2mu2Q6PL+5CouL1XFeTJRC8wBtqu69X50ctOQsbZ2RRay2/Kp2P3LUBq1pPK8ZsvNUAlDrBg==","signatures":[{"sig":"MEUCIQDQ4YzEo39kmteaCDfPvcSY24cjeM7WQkaeqr/e1FMwhQIgZjhetcDWk+tNkydDSI2ocVI6xHa21hW+XuipGSGSWqE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":296577},"main":"./tokens.cjs","type":"module","types":"./dist/index.d.ts","module":"./tokens.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./tokens":{"import":"./tokens.mjs","require":"./tokens.cjs"},"./assets/*":"./assets/*","./theme.css":"./theme.css","./tokens.json":"./tokens.json","./portal-tokens.css":"./portal-tokens.css"},"gitHead":"7ba7fc85c48b3e0275536a972b8ee7ff8f87e346","private":false,"scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"lukavieira1","email":"lukavieira14@gmail.com"},"repository":{"url":"git+https://github.com/dybo-ai/dybo-design.git","type":"git"},"_npmVersion":"10.8.2","description":"DYBO design system — tokens, Tailwind V4 theme, theme CSS, and React components.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"20.20.2","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design_1.2.0_1788433279370_0.7595146903421821","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@dybo-ai/design","version":"1.3.0","keywords":["dybo","design-system","design-tokens","tailwind","tailwind-v4","glassmorphism","react-components"],"license":"UNLICENSED","_id":"@dybo-ai/design@1.3.0","maintainers":[{"name":"lukavieira1","email":"lukavieira14@gmail.com"},{"name":"tony-mussoi","email":"amussoi@mydybo.com"}],"homepage":"https://github.com/dybo-ai/dybo-design#readme","bugs":{"url":"https://github.com/dybo-ai/dybo-design/issues"},"dist":{"shasum":"4890bfafdbaa8d50399cbb459b3b6ebc0b8d0879","tarball":"https://registry.npmjs.org/@dybo-ai/design/-/design-1.3.0.tgz","fileCount":17,"integrity":"sha512-faAatc7NBfQQvRlgYm9zbBrR4ht5HoxQtL/1BLa7RiB9YlFHzDgvGc1f1grE9kEKsbeE0uSiZFPWoTKMqYywLQ==","signatures":[{"sig":"MEUCICz68FslZXBq2pyPpKVRQVy7wfRl0KdCooTSlPfJeHVuAiEAprql+1LLIeU9QYaHAhEx3wGvG5fl4gdAoYTqwHJPPEM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":314219},"main":"./tokens.cjs","type":"module","types":"./dist/index.d.ts","module":"./tokens.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./tokens":{"import":"./tokens.mjs","require":"./tokens.cjs"},"./assets/*":"./assets/*","./theme.css":"./theme.css","./tokens.json":"./tokens.json","./portal-tokens.css":"./portal-tokens.css"},"gitHead":"b07f8e1d1da74a500be8c47b0951abc7965d79e2","private":false,"scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"lukavieira1","email":"lukavieira14@gmail.com"},"repository":{"url":"git+https://github.com/dybo-ai/dybo-design.git","type":"git"},"_npmVersion":"10.8.2","description":"DYBO design system — tokens, Tailwind V4 theme, theme CSS, and React components.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"20.20.2","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design_1.3.0_1788481163125_0.3313092693333688","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"_id":"@dybo-ai/design@2.0.0","bugs":{"url":"https://github.com/dybo-ai/dybo-design/issues"},"dist":{"shasum":"3fa53e777c4d2cd5227148560b6ac51856d1bf99","tarball":"https://registry.npmjs.org/@dybo-ai/design/-/design-2.0.0.tgz","fileCount":18,"integrity":"sha512-dhGYi/LdP4nK+/ml+4Wz4/bPyzPNhTKEF/mOdil6yj3lfG9aPC9gIA1cut7gb4TiTgh4WksFr8TDNBn60InBSg==","signatures":[{"sig":"MEUCIQD2C6dOsWgzK1JmdGWW70l0gPDQhWWWHWCMmF6wKy6bKgIgMdJ2mxk6XwlUEqbOj1v8o6RQ90D7o0nlIXDUkaezpBs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEcFfm0NtpnEA2UXVAd8gEU6zDCOMuDvHBtSGeqGrsXYAiEAle2oBnwAhUyiSqYIj280mW3F2h55Yzg1Z7a9PGJSgJE="}],"unpackedSize":696568},"main":"./tokens.cjs","name":"@dybo-ai/design","type":"module","types":"./dist/index.d.ts","module":"./tokens.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./tokens":{"import":"./tokens.mjs","require":"./tokens.cjs"},"./assets/*":"./assets/*","./theme.css":"./theme.css","./tokens.json":"./tokens.json","./legacy-theme.css":"./legacy-theme.css","./portal-tokens.css":"./portal-tokens.css"},"gitHead":"72d9fddcf0919f17721dbf4fe73e8218de749dc4","license":"UNLICENSED","private":false,"scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"version":"2.0.0","_npmUser":{"name":"lukavieira1","email":"lukavieira14@gmail.com"},"homepage":"https://github.com/dybo-ai/dybo-design#readme","keywords":["dybo","design-system","design-tokens","tailwind","tailwind-v4","glassmorphism","react-components"],"repository":{"url":"git+https://github.com/dybo-ai/dybo-design.git","type":"git"},"_npmVersion":"10.8.2","description":"DYBO design system — tokens, Tailwind V4 theme, theme CSS, and React components.","directories":{},"maintainers":[{"name":"lukavieira1","email":"lukavieira14@gmail.com"},{"name":"tony-mussoi","email":"amussoi@mydybo.com"}],"sideEffects":["*.css"],"_nodeVersion":"20.20.2","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":true}},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design_2.0.0_1789416467562_0.17971409648396808"}}},"time":{"created":"2026-08-11T13:33:37.932Z","modified":"2026-09-14T20:07:47.917Z","1.0.1":"2026-08-11T13:33:38.232Z","1.1.0":"2026-08-11T17:53:49.158Z","1.2.0":"2026-09-03T11:01:19.542Z","1.3.0":"2026-09-04T00:19:23.341Z","2.0.0":"2026-09-14T20:07:47.724Z"},"bugs":{"url":"https://github.com/dybo-ai/dybo-design/issues"},"license":"UNLICENSED","homepage":"https://github.com/dybo-ai/dybo-design#readme","keywords":["dybo","design-system","design-tokens","tailwind","tailwind-v4","glassmorphism","react-components"],"repository":{"url":"git+https://github.com/dybo-ai/dybo-design.git","type":"git"},"description":"DYBO design system — tokens, Tailwind V4 theme, theme CSS, and React components.","maintainers":[{"name":"lukavieira1","email":"lukavieira14@gmail.com"},{"name":"tony-mussoi","email":"amussoi@mydybo.com"}],"readme":"# @dybo-ai/design\n\nDYBO design system — tokens, CSS theme, Tailwind V4 support, and React components with TypeScript.  \nStyle: **glassmorphism** · Font: **Urbanist** · Published on [npmjs.com](https://www.npmjs.com).\n\n---\n\n## Installation\n\n```bash\nnpm install @dybo-ai/design\n```\n\nLoad the Urbanist font once in your HTML (or via `@fontsource/urbanist`):\n\n```html\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap\"\n  rel=\"stylesheet\"\n/>\n```\n\n---\n\n## Tailwind V4\n\nAdd one line to your app's main CSS file:\n\n```css\n/* app.css */\n@import \"tailwindcss\";\n@import \"@dybo-ai/design/theme.css\";\n```\n\nThis automatically registers DYBO's semantic utilities via `@theme` — the same names Tailwind's own config uses across every DYBO prototype, so a class here is a class there:\n\n| Utility           | Example                                                        |\n| ----------------- | --------------------------------------------------------------- |\n| `bg-*`/`text-*`   | `bg-background`, `bg-card`, `bg-primary`, `text-foreground`, `text-muted-foreground` |\n| `border-*`        | `border-border`                                                |\n| `bg-brand-*`      | `bg-brand-dark-orb`, `bg-brand-indigo`, `bg-brand-cultured`    |\n| `rounded-*`       | `rounded-sm` (12px), `rounded-md`/`rounded-lg` (20px), `rounded-full` |\n| `shadow-level-*`  | `shadow-level-1`, `shadow-level-2`                             |\n\nNeed the pre-2.0 utility names (`bg-dybo-*`, `shadow-dybo-card`, …)? Import `@dybo-ai/design/legacy-theme.css` instead — see \"Legacy system\" below.\n\n**No Tailwind?** Import only the CSS — all variables and `.dybo-*` classes work in any framework:\n\n```js\nimport \"@dybo-ai/design/theme.css\";\n```\n\n---\n\n## React Components\n\n```tsx\nimport \"@dybo-ai/design/theme.css\";\nimport { Button, Card, Input, Badge } from \"@dybo-ai/design\";\n```\n\nAll components are TypeScript with `I`-prefixed interfaces.\n\n### Available components\n\n| Category           | Components                                                                                           |\n| ------------------- | ----------------------------------------------------------------------------------------------------- |\n| **Base**            | `Button`, `Card`, `Input`, `Select`, `Badge`                                                          |\n| **Layout**          | `AppShell`, `Sidebar`, `TopBar`, `IconRail`, `IconRailItem`                                            |\n| **Navigation**      | `NavItem`, `NavSection`, `NavTabs`, `Tabs`, `UnderlineTabs`, `FilterPills`, `ScopeTabs`, `OrgEntitySelector`, `ThemeToggle`, `PlatformSwitcher` |\n| **Data**            | `DataTable`, `OverviewGrid`, `OverviewField`, `Pagination`                                            |\n| **KPIs**            | `KpiCard`, `KpiGrid`, `KpiStrip`, `MetadataBadge`                                                     |\n| **Forms**           | `SearchField`, `DateRangeTrigger`, `UploadDropzone`, `StepNavigator`, `DocumentTypeGrid`, `ReadOnlyField` |\n| **Feedback**        | `Alert`, `Banner`, `Toast`, `EmptyState`, `Accordion`                                                 |\n| **Overlay**         | `Modal`, `Drawer`                                                                                     |\n| **Status badges**   | `PriorityBadge`, `TicketStatusBadge`, `QueueStatusBadge`, `ChannelBadge`, `SignalBadge`, `CategoryLabel`, `LinkedAppIndicator` |\n| **Files**           | `FilePreviewCard`, `FileReviewRow`, `RejectionReasonPanel`                                            |\n| **Ticket / chat**   | `TicketCard`, `ChatThread`, `ChatMessage`, `InternalNoteCard`                                          |\n| **Identity**        | `Avatar`, `NotificationsButton`                                                                       |\n| **Auth**            | `LoginCard`                                                                                           |\n| **Misc**            | `ViewToggle`                                                                                          |\n\n---\n\n## Examples\n\n### Full app shell\n\n```tsx\nimport \"@dybo-ai/design/theme.css\";\nimport {\n  AppShell,\n  Sidebar,\n  TopBar,\n  NavItem,\n  NavSection,\n} from \"@dybo-ai/design\";\n\nfunction MyApp() {\n  return (\n    <AppShell\n      sidebar={\n        <Sidebar\n          brand={<img src=\"/logo.png\" alt=\"DYBO\" height={36} />}\n          user={{ name: \"Jane Smith\", email: \"jane@dybo.ai\" }}\n          onLogout={() => logout()}\n        >\n          <NavSection label=\"Dashboard\" />\n          <NavItem label=\"Overview\" href=\"/\" active />\n          <NavItem label=\"Projects\" href=\"/projects\" />\n          <NavSection label=\"Settings\" />\n          <NavItem label=\"Parameters\" href=\"/settings\" />\n        </Sidebar>\n      }\n      topBar={<TopBar title=\"Tax Calculator 2026\" />}\n    >\n      {/* page content */}\n    </AppShell>\n  );\n}\n```\n\n### Glassmorphism card\n\n```tsx\nimport { Card, Button, Input } from \"@dybo-ai/design\";\n\n<Card>\n  <Input label=\"Name\" placeholder=\"Enter your name\" />\n  <Button variant=\"primary\" style={{ marginTop: 16 }}>\n    Save\n  </Button>\n</Card>;\n```\n\n### DataTable\n\n```tsx\nimport { DataTable } from \"@dybo-ai/design\";\nimport type { IColumn } from \"@dybo-ai/design\";\n\ninterface IUser {\n  id: number;\n  name: string;\n  email: string;\n  status: string;\n}\n\nconst columns: IColumn<IUser>[] = [\n  { key: \"name\", label: \"Name\", align: \"left\" },\n  { key: \"email\", label: \"Email\", align: \"left\" },\n  {\n    key: \"status\",\n    label: \"Status\",\n    format: (v) => <Badge status=\"success\">{String(v)}</Badge>,\n  },\n];\n\n<DataTable\n  columns={columns}\n  rows={users}\n  rowKey=\"id\"\n  onRowClick={(user) => navigate(`/users/${user.id}`)}\n/>;\n```\n\n### Tabs\n\n```tsx\nimport { useState } from \"react\";\nimport { Tabs } from \"@dybo-ai/design\";\n\nconst TABS = [\n  { key: \"federal\", label: \"Federal (IRS)\" },\n  { key: \"state\", label: \"State\" },\n  { key: \"annual\", label: \"Annual Inputs\" },\n];\n\nfunction ProjectDetail() {\n  const [tab, setTab] = useState(\"federal\");\n  return (\n    <>\n      <Tabs tabs={TABS} active={tab} onChange={setTab} />\n      {tab === \"federal\" && <FederalView />}\n      {tab === \"state\" && <StateView />}\n      {tab === \"annual\" && <AnnualInputs />}\n    </>\n  );\n}\n```\n\n### Overview grid\n\n```tsx\nimport { OverviewGrid } from \"@dybo-ai/design\";\n\n<OverviewGrid\n  fields={[\n    { label: \"Entity\", value: \"Jestor Holdings Inc\" },\n    { label: \"State\", value: \"DE\" },\n    { label: \"Federal Tax\", value: \"$1,432.00\" },\n    { label: \"State Tax\", value: \"$312.00\" },\n  ]}\n/>;\n```\n\n### Alert\n\n```tsx\nimport { Alert } from \"@dybo-ai/design\";\n\n<Alert variant=\"danger\" onClose={() => setError(null)}>\n  Failed to save. Please check the data and try again.\n</Alert>;\n```\n\n### Modal\n\n```tsx\nimport { useState } from \"react\";\nimport { Modal, Button } from \"@dybo-ai/design\";\n\nfunction ConfirmDelete() {\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button variant=\"danger\" onClick={() => setOpen(true)}>\n        Delete\n      </Button>\n      <Modal\n        open={open}\n        onClose={() => setOpen(false)}\n        title=\"Confirm deletion\"\n        footer={\n          <>\n            <Button variant=\"ghost\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button variant=\"danger\" onClick={handleDelete}>\n              Delete\n            </Button>\n          </>\n        }\n      >\n        <p>This action cannot be undone. Do you want to continue?</p>\n      </Modal>\n    </>\n  );\n}\n```\n\n### Login card\n\n```tsx\nimport { LoginCard, Input, Button } from \"@dybo-ai/design\";\n\n<LoginCard\n  logo={<img src=\"/logo.png\" alt=\"DYBO\" height={44} />}\n  subtitle=\"Sign in to your account\"\n>\n  <form onSubmit={handleSubmit}>\n    <Input label=\"Email\" type=\"email\" name=\"email\" />\n    <Input\n      label=\"Password\"\n      type=\"password\"\n      name=\"password\"\n      style={{ marginTop: 14 }}\n    />\n    <Button\n      variant=\"primary\"\n      type=\"submit\"\n      style={{ width: \"100%\", marginTop: 20 }}\n    >\n      Sign in\n    </Button>\n  </form>\n</LoginCard>;\n```\n\n### Select\n\n```tsx\nimport { Select } from \"@dybo-ai/design\";\n\n<Select\n  label=\"State\"\n  placeholder=\"Select…\"\n  options={[\n    { value: \"CA\", label: \"California\" },\n    { value: \"DE\", label: \"Delaware\" },\n    { value: \"NY\", label: \"New York\" },\n  ]}\n  onChange={(e) => setState(e.target.value)}\n/>;\n```\n\n---\n\n## Tokens in JS/TS\n\n```ts\nimport { color, priority, space, radius } from \"@dybo-ai/design/tokens\";\n\ncolor.light.background; // \"216 25% 92%\" — HSL triplet, no hsl() wrapper\ncolor.dark.background; // \"218 56% 9%\"\npriority.urgent.fg; // \"355 74% 45%\"\nspace[\"200\"]; // 16\nradius.medium; // 20\n```\n\nNeed the pre-2.0 shape (`color.brand.blue`, `color.semantic.danger.solid`, …)? It's under `legacy`:\n\n```ts\nimport { legacy } from \"@dybo-ai/design/tokens\";\n\nlegacy.color.brand.blue; // \"#5878a7\"\nlegacy.color.semantic.danger.solid; // \"#a21a17\"\n```\n\n---\n\n## Assets\n\n```ts\nimport logo from \"@dybo-ai/design/assets/logo-dybo-01.jpeg\"; // opaque JPEG\nimport logoLight from \"@dybo-ai/design/assets/logo-dybo-01.png\"; // PNG transparent background, navy ink (light surfaces)\nimport logoDark from \"@dybo-ai/design/assets/logo-dybo-01-dark.png\"; // PNG transparent background, light ink (dark surfaces)\n```\n\n---\n\n## Customization via CSS variables\n\nAll tokens are CSS custom properties. To override selectively:\n\n```css\n/* Global override */\n:root {\n  --primary: 220 60% 15%; /* your ink shade, as an HSL triplet */\n}\n\n/* Dark mode override */\n.dark {\n  --card: 220 30% 10%;\n}\n```\n\n---\n\n## Legacy system (pre-2.0)\n\nIf an app still needs the visual system this package shipped before `2.0.0` (built independently of DYBO's real product screens), import `legacy-theme.css` instead of `theme.css` — same `.dybo-*` class names, old values, no other code changes needed:\n\n```js\nimport \"@dybo-ai/design/legacy-theme.css\";\n```\n\nProgrammatic legacy values are under `legacy` in `@dybo-ai/design/tokens` (see \"Tokens in JS/TS\" above). This path is frozen and will be removed in `3.0` — new work should use the default `theme.css`.\n\n---\n\n## Publishing guide\n\nFor maintainers (how to publish a new version): see [`docs/PUBLISHING.md`](./docs/PUBLISHING.md).\n\n---\n\n## Token reference\n\n`tokens.json` contains all values with the original Figma names.  \n`docs/design-system.md` contains the design rationale extracted from Figma.\n\n> **Semantic note**: The system's \"danger\" is red `#a21a17` (`Brand/Danger/700`).  \n> Figma has a color called \"Feedback Colors/Error\" that is orange — that's `warning`, not `danger`.\n","readmeFilename":"README.md"}