@dybo-ai/design 1.0.1 → 1.1.0

package/CLAUDE.md

@@ -12,13 +12,13 @@ This `CLAUDE.md` is itself shipped to consumers (it's in `package.json`'s `files
 
 `tokens.json` is canonical (values + original Figma variable names). Every other token surface is a **manually maintained mirror** of it — there is no code generation:
 
-| File | Mirrors tokens.json as... |
-|---|---|
-| `tokens.mjs` | ESM flat exports (`color`, `space`, `radius`, etc.) |
-| `tokens.cjs` | CommonJS mirror of `tokens.mjs` |
-| `theme.css` | CSS custom properties + `.dybo-*` helper classes (`.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`) |
-| `tailwind-preset.cjs` | Tailwind theme extension (`dybo-*` utilities) |
-| `react/index.jsx` | Thin React wrappers (`Button`, `Card`, `Input`, `Badge`) over the `theme.css` classes — requires the consumer to import `theme.css` separately |
+| File                  | Mirrors tokens.json as...                                                                                                                      |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tokens.mjs`          | ESM flat exports (`color`, `space`, `radius`, etc.)                                                                                            |
+| `tokens.cjs`          | CommonJS mirror of `tokens.mjs`                                                                                                                |
+| `theme.css`           | CSS custom properties + `.dybo-*` helper classes (`.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`)                                    |
+| `tailwind-preset.cjs` | Tailwind theme extension (`dybo-*` utilities)                                                                                                  |
+| `react/index.jsx`     | Thin React wrappers (`Button`, `Card`, `Input`, `Badge`) over the `theme.css` classes — requires the consumer to import `theme.css` separately |
 
 **When changing a token value or adding a new one, update all five in the same change.** There's no automated check that catches drift between them (a Style Dictionary generation pipeline is proposed but not implemented — see `docs/SETUP.md` Part E).
 
@@ -31,11 +31,13 @@ This `CLAUDE.md` is itself shipped to consumers (it's in `package.json`'s `files
 There is no build, lint, or test tooling in this repo — don't invent npm scripts that don't exist (`package.json` has no `scripts` field).
 
 Publishing (manual, no CI):
+
 ```bash
 npm version patch   # or minor / major — see docs/SETUP.md Part D for the semver rule
 npm publish
 git push --follow-tags
 ```
+
 `npm publish --dry-run` is useful to confirm the packed file list matches `package.json`'s `files` array before actually publishing. Publishing requires a `.npmrc` (git-ignored, copy from `.npmrc.example`) with a `GITHUB_TOKEN` that has `write:packages`.
 
 ## Design system rules for consuming apps
@@ -49,9 +51,10 @@ When building UI in a DYBO app, use `@dybo-ai/design`. Do not hard-code hex valu
 - **Radius:** 12 (buttons/inputs), 20 (cards), 999 (pills).
 
 How to consume (pick per app):
-- Tailwind app → `presets: [require("@dybo-ai/design/tailwind")]`, use `dybo-*` utilities.
+
+- Tailwind app → `@import "@dybo-ai/design/theme.css"` in CSS, use `dybo-*` utilities.
 - Non-Tailwind → `import "@dybo-ai/design/theme.css"` and use `.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`.
-- React → `import { Button, Card, Input, Badge } from "@dybo-ai/design/react"` (also import the CSS).
-- Programmatic values → `import { color, space, radius } from "@dybo-ai/design"`.
+- React → `import { Button, Card, Input, Badge } from "@dybo-ai/design"` (also import the CSS).
+- Programmatic values → `import { color, space, radius } from "@dybo-ai/design/tokens"`.
 
 Reference `tokens.json` for the full token list and `docs/design-system.md` for rationale. Semantic "danger" is red `#a21a17` — ignore Figma's mislabeled orange "Feedback/Error".

package/README.md

@@ -55,7 +55,7 @@ import "@dybo-ai/design/theme.css";
 
 ```tsx
 import "@dybo-ai/design/theme.css";
-import { Button, Card, Input, Badge } from "@dybo-ai/design/react";
+import { Button, Card, Input, Badge } from "@dybo-ai/design";
 ```
 
 All components are TypeScript with `I`-prefixed interfaces.
@@ -87,7 +87,7 @@ import {
   TopBar,
   NavItem,
   NavSection,
-} from "@dybo-ai/design/react";
+} from "@dybo-ai/design";
 
 function MyApp() {
   return (
@@ -116,7 +116,7 @@ function MyApp() {
 ### Glassmorphism card
 
 ```tsx
-import { Card, Button, Input } from "@dybo-ai/design/react";
+import { Card, Button, Input } from "@dybo-ai/design";
 
 <Card>
   <Input label="Name" placeholder="Enter your name" />
@@ -129,8 +129,8 @@ import { Card, Button, Input } from "@dybo-ai/design/react";
 ### DataTable
 
 ```tsx
-import { DataTable } from "@dybo-ai/design/react";
-import type { IColumn } from "@dybo-ai/design/react";
+import { DataTable } from "@dybo-ai/design";
+import type { IColumn } from "@dybo-ai/design";
 
 interface IUser {
   id: number;
@@ -161,7 +161,7 @@ const columns: IColumn<IUser>[] = [
 
 ```tsx
 import { useState } from "react";
-import { Tabs } from "@dybo-ai/design/react";
+import { Tabs } from "@dybo-ai/design";
 
 const TABS = [
   { key: "federal", label: "Federal (IRS)" },
@@ -185,7 +185,7 @@ function ProjectDetail() {
 ### Overview grid
 
 ```tsx
-import { OverviewGrid } from "@dybo-ai/design/react";
+import { OverviewGrid } from "@dybo-ai/design";
 
 <OverviewGrid
   fields={[
@@ -200,7 +200,7 @@ import { OverviewGrid } from "@dybo-ai/design/react";
 ### Alert
 
 ```tsx
-import { Alert } from "@dybo-ai/design/react";
+import { Alert } from "@dybo-ai/design";
 
 <Alert variant="danger" onClose={() => setError(null)}>
   Failed to save. Please check the data and try again.
@@ -211,7 +211,7 @@ import { Alert } from "@dybo-ai/design/react";
 
 ```tsx
 import { useState } from "react";
-import { Modal, Button } from "@dybo-ai/design/react";
+import { Modal, Button } from "@dybo-ai/design";
 
 function ConfirmDelete() {
   const [open, setOpen] = useState(false);
@@ -245,7 +245,7 @@ function ConfirmDelete() {
 ### Login card
 
 ```tsx
-import { LoginCard, Input, Button } from "@dybo-ai/design/react";
+import { LoginCard, Input, Button } from "@dybo-ai/design";
 
 <LoginCard
   logo={<img src="/logo.png" alt="DYBO" height={44} />}
@@ -273,7 +273,7 @@ import { LoginCard, Input, Button } from "@dybo-ai/design/react";
 ### Select
 
 ```tsx
-import { Select } from "@dybo-ai/design/react";
+import { Select } from "@dybo-ai/design";
 
 <Select
   label="State"
@@ -292,7 +292,7 @@ import { Select } from "@dybo-ai/design/react";
 ## Tokens in JS/TS
 
 ```ts
-import { color, space, radius } from "@dybo-ai/design";
+import { color, space, radius } from "@dybo-ai/design/tokens";
 
 color.brand.blue; // "#5878a7"
 color.semantic.danger.solid; // "#a21a17"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dybo-ai/design",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "DYBO design system — tokens, Tailwind V4 theme, theme CSS, and React components.",
   "license": "UNLICENSED",
   "private": false,
@@ -10,16 +10,16 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tokens": {
       "import": "./tokens.mjs",
       "require": "./tokens.cjs"
     },
     "./tokens.json": "./tokens.json",
     "./theme.css": "./theme.css",
-    "./react": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
     "./assets/*": "./assets/*"
   },
   "main": "./tokens.cjs",