@hanzo/ui 8.0.45 → 8.0.47

package/dist/core/index.cjs

@@ -2,7 +2,13 @@
 // @hanzo/ui — design core.
 //
 // Backend-agnostic foundation every backend draws from: the class-name composer,
-// the design tokens (from @hanzo/tokens), and the Geist typography variables.
+// the design tokens (from @hanzo/design), and the Geist typography variables.
+//
+// ESM-ONLY, and so is `@hanzo/ui/tokens`: @hanzo/design is `"type": "module"`
+// with no `require` condition, so a CJS build of this subpath cannot load it.
+// The `require` condition is removed from both subpaths in package.json rather
+// than left to crash deep inside design at run time. The MAIN barrel is
+// unaffected — it pulls `./core/cn` directly, not this file.
 // The visual identity these describe is emitted as CSS by `theme.css`.
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACjF,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACjF,cAAc,UAAU,CAAA"}

package/dist/core/index.js

@@ -1,7 +1,13 @@
 // @hanzo/ui — design core.
 //
 // Backend-agnostic foundation every backend draws from: the class-name composer,
-// the design tokens (from @hanzo/tokens), and the Geist typography variables.
+// the design tokens (from @hanzo/design), and the Geist typography variables.
+//
+// ESM-ONLY, and so is `@hanzo/ui/tokens`: @hanzo/design is `"type": "module"`
+// with no `require` condition, so a CJS build of this subpath cannot load it.
+// The `require` condition is removed from both subpaths in package.json rather
+// than left to crash deep inside design at run time. The MAIN barrel is
+// unaffected — it pulls `./core/cn` directly, not this file.
 // The visual identity these describe is emitted as CSS by `theme.css`.
 export { cn } from './cn.js';
 export { fonts, fontSans, fontMono, FONT_SANS_VAR, FONT_MONO_VAR } from './fonts.js';

package/dist/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,EAAE;AACF,iFAAiF;AACjF,8EAA8E;AAC9E,uEAAuE;AAEvE,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACjF,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,EAAE;AACF,iFAAiF;AACjF,8EAA8E;AAC9E,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,+EAA+E;AAC/E,wEAAwE;AACxE,6DAA6D;AAC7D,uEAAuE;AAEvE,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACjF,cAAc,UAAU,CAAA"}

package/dist/core/tokens.cjs

@@ -1,35 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.themes = exports.light = exports.dark = exports.letterSpacing = exports.lineHeight = exports.fontWeight = exports.fontSizePx = exports.fontSize = exports.fontFamily = exports.radiiPx = exports.radii = exports.spacingPx = exports.spacing = exports.hsl = exports.oklch = exports.zinc = exports.colors = void 0;
+exports.tokenValue = exports.cssVar = exports.cssVars = exports.fonts = exports.zIndex = exports.motion = exports.elevation = exports.radius = exports.grid = exports.spacing = exports.typography = exports.colors = void 0;
 /**
- * Design tokens — re-exported from `@hanzo/tokens`, the single source of truth.
+ * Design tokens — re-exported from `@hanzo/design`, the single source of truth.
  *
- * `@hanzo/ui` is BUILT ON `@hanzo/tokens`: the color scale, the dark/light theme
- * token sets (the exact values `theme.css` emits as CSS variables), the radii,
- * the spacing, and the typography scale all originate there. Surfacing them here
- * lets a consumer read the same tokens programmatically —
- * `import { themes, colors } from '@hanzo/ui/tokens'` — that the stylesheet and
- * the components render against, so runtime and CSS can never drift.
+ * This used to read `@hanzo/tokens`, a workspace package last touched
+ * 2026-03-22, while the design lane and several surfaces had already moved to
+ * `@hanzo/design`. One fact, two homes: store/billing/hanzo.industries followed
+ * design, the convergence branches followed the stale package, and pushing
+ * either over the other reverted real work. `@hanzo/design` wins — it IS the
+ * design system, it publishes the finished values, and it is what the rest of
+ * the estate already consumes.
+ *
+ * The token layer this exposes to code is the SAME layer `theme.css` ships as
+ * CSS — composed from @hanzo/design at build time by scripts/compose-theme.mjs
+ * — so runtime and stylesheet cannot drift.
+ *
+ * `cssVar` is how code should reach a token: it returns `var(--name, <literal>)`
+ * so the value resolves through the live cascade and honours the viewer's theme
+ * instead of baking one theme's number into a component.
  *
  * NOTE: the root barrel's `tokens` export (the gui/product theme object from
  * `@hanzo/data`) is a DIFFERENT, complementary thing; these are named exports
- * (`colors`, `themes`, `dark`, `light`, `radii`, …) and never collide with it.
+ * and never collide with it.
  */
-var tokens_1 = require("@hanzo/tokens");
-Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return tokens_1.colors; } });
-Object.defineProperty(exports, "zinc", { enumerable: true, get: function () { return tokens_1.zinc; } });
-Object.defineProperty(exports, "oklch", { enumerable: true, get: function () { return tokens_1.oklch; } });
-Object.defineProperty(exports, "hsl", { enumerable: true, get: function () { return tokens_1.hsl; } });
-Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
-Object.defineProperty(exports, "spacingPx", { enumerable: true, get: function () { return tokens_1.spacingPx; } });
-Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return tokens_1.radii; } });
-Object.defineProperty(exports, "radiiPx", { enumerable: true, get: function () { return tokens_1.radiiPx; } });
-Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return tokens_1.fontFamily; } });
-Object.defineProperty(exports, "fontSize", { enumerable: true, get: function () { return tokens_1.fontSize; } });
-Object.defineProperty(exports, "fontSizePx", { enumerable: true, get: function () { return tokens_1.fontSizePx; } });
-Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return tokens_1.fontWeight; } });
-Object.defineProperty(exports, "lineHeight", { enumerable: true, get: function () { return tokens_1.lineHeight; } });
-Object.defineProperty(exports, "letterSpacing", { enumerable: true, get: function () { return tokens_1.letterSpacing; } });
-Object.defineProperty(exports, "dark", { enumerable: true, get: function () { return tokens_1.dark; } });
-Object.defineProperty(exports, "light", { enumerable: true, get: function () { return tokens_1.light; } });
-Object.defineProperty(exports, "themes", { enumerable: true, get: function () { return tokens_1.themes; } });
+var design_1 = require("@hanzo/design");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return design_1.colors; } });
+Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return design_1.typography; } });
+Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return design_1.spacing; } });
+Object.defineProperty(exports, "grid", { enumerable: true, get: function () { return design_1.grid; } });
+Object.defineProperty(exports, "radius", { enumerable: true, get: function () { return design_1.radius; } });
+Object.defineProperty(exports, "elevation", { enumerable: true, get: function () { return design_1.elevation; } });
+Object.defineProperty(exports, "motion", { enumerable: true, get: function () { return design_1.motion; } });
+Object.defineProperty(exports, "zIndex", { enumerable: true, get: function () { return design_1.zIndex; } });
+Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return design_1.fonts; } });
+Object.defineProperty(exports, "cssVars", { enumerable: true, get: function () { return design_1.cssVars; } });
+Object.defineProperty(exports, "cssVar", { enumerable: true, get: function () { return design_1.cssVar; } });
+Object.defineProperty(exports, "tokenValue", { enumerable: true, get: function () { return design_1.tokenValue; } });

package/dist/core/tokens.d.ts

@@ -1,17 +1,26 @@
 /**
- * Design tokens — re-exported from `@hanzo/tokens`, the single source of truth.
+ * Design tokens — re-exported from `@hanzo/design`, the single source of truth.
  *
- * `@hanzo/ui` is BUILT ON `@hanzo/tokens`: the color scale, the dark/light theme
- * token sets (the exact values `theme.css` emits as CSS variables), the radii,
- * the spacing, and the typography scale all originate there. Surfacing them here
- * lets a consumer read the same tokens programmatically —
- * `import { themes, colors } from '@hanzo/ui/tokens'` — that the stylesheet and
- * the components render against, so runtime and CSS can never drift.
+ * This used to read `@hanzo/tokens`, a workspace package last touched
+ * 2026-03-22, while the design lane and several surfaces had already moved to
+ * `@hanzo/design`. One fact, two homes: store/billing/hanzo.industries followed
+ * design, the convergence branches followed the stale package, and pushing
+ * either over the other reverted real work. `@hanzo/design` wins — it IS the
+ * design system, it publishes the finished values, and it is what the rest of
+ * the estate already consumes.
+ *
+ * The token layer this exposes to code is the SAME layer `theme.css` ships as
+ * CSS — composed from @hanzo/design at build time by scripts/compose-theme.mjs
+ * — so runtime and stylesheet cannot drift.
+ *
+ * `cssVar` is how code should reach a token: it returns `var(--name, <literal>)`
+ * so the value resolves through the live cascade and honours the viewer's theme
+ * instead of baking one theme's number into a component.
  *
  * NOTE: the root barrel's `tokens` export (the gui/product theme object from
  * `@hanzo/data`) is a DIFFERENT, complementary thing; these are named exports
- * (`colors`, `themes`, `dark`, `light`, `radii`, …) and never collide with it.
+ * and never collide with it.
  */
-export { colors, zinc, oklch, hsl, spacing, spacingPx, radii, radiiPx, fontFamily, fontSize, fontSizePx, fontWeight, lineHeight, letterSpacing, dark, light, themes, } from '@hanzo/tokens';
-export type { ColorToken, ZincStep, SpacingStep, RadiusToken, FontSizeToken, FontWeightToken, ThemeTokens, } from '@hanzo/tokens';
+export { colors, typography, spacing, grid, radius, elevation, motion, zIndex, fonts, cssVars, cssVar, tokenValue, } from '@hanzo/design';
+export type { CssVarName, TokenName } from '@hanzo/design';
 //# sourceMappingURL=tokens.d.ts.map

package/dist/core/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/core/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,GAAG,EACH,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,IAAI,EACJ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAA;AAEtB,YAAY,EACV,UAAU,EACV,QAAQ,EACR,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,EACf,WAAW,GACZ,MAAM,eAAe,CAAA"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/core/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,EACN,UAAU,GACX,MAAM,eAAe,CAAA;AAEtB,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA"}

package/dist/core/tokens.js

@@ -1,16 +1,25 @@
 /**
- * Design tokens — re-exported from `@hanzo/tokens`, the single source of truth.
+ * Design tokens — re-exported from `@hanzo/design`, the single source of truth.
  *
- * `@hanzo/ui` is BUILT ON `@hanzo/tokens`: the color scale, the dark/light theme
- * token sets (the exact values `theme.css` emits as CSS variables), the radii,
- * the spacing, and the typography scale all originate there. Surfacing them here
- * lets a consumer read the same tokens programmatically —
- * `import { themes, colors } from '@hanzo/ui/tokens'` — that the stylesheet and
- * the components render against, so runtime and CSS can never drift.
+ * This used to read `@hanzo/tokens`, a workspace package last touched
+ * 2026-03-22, while the design lane and several surfaces had already moved to
+ * `@hanzo/design`. One fact, two homes: store/billing/hanzo.industries followed
+ * design, the convergence branches followed the stale package, and pushing
+ * either over the other reverted real work. `@hanzo/design` wins — it IS the
+ * design system, it publishes the finished values, and it is what the rest of
+ * the estate already consumes.
+ *
+ * The token layer this exposes to code is the SAME layer `theme.css` ships as
+ * CSS — composed from @hanzo/design at build time by scripts/compose-theme.mjs
+ * — so runtime and stylesheet cannot drift.
+ *
+ * `cssVar` is how code should reach a token: it returns `var(--name, <literal>)`
+ * so the value resolves through the live cascade and honours the viewer's theme
+ * instead of baking one theme's number into a component.
  *
  * NOTE: the root barrel's `tokens` export (the gui/product theme object from
  * `@hanzo/data`) is a DIFFERENT, complementary thing; these are named exports
- * (`colors`, `themes`, `dark`, `light`, `radii`, …) and never collide with it.
+ * and never collide with it.
  */
-export { colors, zinc, oklch, hsl, spacing, spacingPx, radii, radiiPx, fontFamily, fontSize, fontSizePx, fontWeight, lineHeight, letterSpacing, dark, light, themes, } from '@hanzo/tokens';
+export { colors, typography, spacing, grid, radius, elevation, motion, zIndex, fonts, cssVars, cssVar, tokenValue, } from '@hanzo/design';
 //# sourceMappingURL=tokens.js.map

package/dist/core/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/core/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,GAAG,EACH,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,IAAI,EACJ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAA"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/core/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,EACN,UAAU,GACX,MAAM,eAAe,CAAA"}

package/dist/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = exports.DropdownMenuSub = exports.DropdownMenuShortcut = exports.DropdownMenuSeparator = exports.DropdownMenuRadioItem = exports.DropdownMenuRadioGroup = exports.DropdownMenuPortal = exports.DropdownMenuLabel = exports.DropdownMenuItem = exports.DropdownMenuGroup = exports.DropdownMenuContent = exports.DropdownMenuCheckboxItem = exports.DropdownMenu = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = exports.CommandShortcut = exports.CommandSeparator = exports.CommandList = exports.CommandItem = exports.CommandInput = exports.CommandGroup = exports.CommandEmpty = exports.CommandDialog = exports.Command = exports.CollapsibleTrigger = exports.CollapsibleContent = exports.Collapsible = exports.Checkbox = exports.CardTitle = exports.CardHeader = exports.CardFooter = exports.CardDescription = exports.CardContent = exports.CardAction = exports.Card = exports.Button = exports.Badge = exports.AvatarImage = exports.AvatarFallback = exports.Avatar = exports.AspectRatio = void 0;
 exports.cn = exports.Hanzo = exports.toast = exports.buttonVariants = exports.badgeVariants = exports.TooltipTrigger = exports.TooltipProvider = exports.TooltipContent = exports.Tooltip = exports.Toaster = exports.Textarea = exports.TabsTrigger = exports.TabsList = exports.TabsContent = exports.Tabs = exports.Switch = exports.Slider = exports.Separator = exports.SelectValue = exports.SelectTrigger = exports.SelectSeparator = exports.SelectScrollUpButton = exports.SelectScrollDownButton = exports.SelectLabel = exports.SelectItem = exports.SelectGroup = exports.SelectContent = exports.Select = exports.ScrollBar = exports.ScrollArea = exports.ResizablePanelGroup = exports.ResizablePanel = exports.ResizableHandle = exports.Progress = exports.PopoverTrigger = exports.PopoverContent = exports.PopoverClose = exports.PopoverAnchor = exports.Popover = exports.Label = exports.Input = exports.DropdownMenuTrigger = void 0;
-// @hanzo/ui — the one Hanzo component library, on @hanzo/gui + @hanzo/tokens.
+// @hanzo/ui — the one Hanzo component library, on @hanzo/gui + @hanzo/design.
 //
 // ONE substrate: every component renders through @hanzo/gui primitives, so the
 // same import works on web, native (expo) and desktop (Tauri). The ROOT barrel is

package/dist/index.js

@@ -1,4 +1,4 @@
-// @hanzo/ui — the one Hanzo component library, on @hanzo/gui + @hanzo/tokens.
+// @hanzo/ui — the one Hanzo component library, on @hanzo/gui + @hanzo/design.
 //
 // ONE substrate: every component renders through @hanzo/gui primitives, so the
 // same import works on web, native (expo) and desktop (Tauri). The ROOT barrel is