@hanzo/ui 8.0.27 → 8.0.28

package/dist/theme.css

@@ -16,53 +16,11 @@
  * (next/font, @fontsource, CDN) binds those variables and everything inherits
  * it. No Inter, no system-stack default anywhere.
  *
- * When imported INTO a Tailwind v4 pipeline the `@theme inline` block maps the
- * tokens onto utilities (`bg-popover`, `border-border`, `font-sans` → Geist …).
- * When loaded as plain CSS the `:root`/`.dark` variables and the base font still
- * apply (the `@theme` at-rule is inert in the browser).
+ * Plain CSS, nothing else: `:root`/`.dark` custom properties plus the base font
+ * and the touch/elevation rules the components name. The Tailwind v4 `@theme
+ * inline` block that used to map these onto utilities is gone with Tailwind.
  */
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-geist-sans), sans-serif;
-  --font-mono: var(--font-geist-mono), monospace;
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
 
 /* Geist family fallbacks — a host that binds --font-geist-sans/-mono (e.g. via
    next/font) overrides these; otherwise the named Geist families are used if
@@ -158,3 +116,70 @@
 :where(code, kbd, samp, pre) {
   font-family: var(--font-geist-mono), monospace;
 }
+
+/* ── Touch targets ────────────────────────────────────────────────────────────
+   The 44px floor on web/Tauri. gui drops `hitSlop` on web (it is a native-only
+   prop), so `touch()` in the gui backend emits data-touch-x / data-touch-y and
+   these rules expand the hit box with a transparent ::after overlay — no layout
+   shift, no padding hack. Native takes hitSlop instead and ignores all of this. */
+[data-touch-x]::after,
+[data-touch-y]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+}
+[data-touch-x="1"]::after { left: -1px; right: -1px; }
+[data-touch-x="2"]::after { left: -2px; right: -2px; }
+[data-touch-x="3"]::after { left: -3px; right: -3px; }
+[data-touch-x="4"]::after { left: -4px; right: -4px; }
+[data-touch-x="5"]::after { left: -5px; right: -5px; }
+[data-touch-x="6"]::after { left: -6px; right: -6px; }
+[data-touch-x="7"]::after { left: -7px; right: -7px; }
+[data-touch-x="8"]::after { left: -8px; right: -8px; }
+[data-touch-x="9"]::after { left: -9px; right: -9px; }
+[data-touch-x="10"]::after { left: -10px; right: -10px; }
+[data-touch-x="11"]::after { left: -11px; right: -11px; }
+[data-touch-x="12"]::after { left: -12px; right: -12px; }
+[data-touch-x="13"]::after { left: -13px; right: -13px; }
+[data-touch-x="14"]::after { left: -14px; right: -14px; }
+[data-touch-x="15"]::after { left: -15px; right: -15px; }
+[data-touch-x="16"]::after { left: -16px; right: -16px; }
+[data-touch-x="17"]::after { left: -17px; right: -17px; }
+[data-touch-x="18"]::after { left: -18px; right: -18px; }
+[data-touch-x="19"]::after { left: -19px; right: -19px; }
+[data-touch-x="20"]::after { left: -20px; right: -20px; }
+[data-touch-x="21"]::after { left: -21px; right: -21px; }
+[data-touch-x="22"]::after { left: -22px; right: -22px; }
+[data-touch-x="23"]::after { left: -23px; right: -23px; }
+[data-touch-x="24"]::after { left: -24px; right: -24px; }
+[data-touch-y="1"]::after { top: -1px; bottom: -1px; }
+[data-touch-y="2"]::after { top: -2px; bottom: -2px; }
+[data-touch-y="3"]::after { top: -3px; bottom: -3px; }
+[data-touch-y="4"]::after { top: -4px; bottom: -4px; }
+[data-touch-y="5"]::after { top: -5px; bottom: -5px; }
+[data-touch-y="6"]::after { top: -6px; bottom: -6px; }
+[data-touch-y="7"]::after { top: -7px; bottom: -7px; }
+[data-touch-y="8"]::after { top: -8px; bottom: -8px; }
+[data-touch-y="9"]::after { top: -9px; bottom: -9px; }
+[data-touch-y="10"]::after { top: -10px; bottom: -10px; }
+[data-touch-y="11"]::after { top: -11px; bottom: -11px; }
+[data-touch-y="12"]::after { top: -12px; bottom: -12px; }
+[data-touch-y="13"]::after { top: -13px; bottom: -13px; }
+[data-touch-y="14"]::after { top: -14px; bottom: -14px; }
+[data-touch-y="15"]::after { top: -15px; bottom: -15px; }
+[data-touch-y="16"]::after { top: -16px; bottom: -16px; }
+[data-touch-y="17"]::after { top: -17px; bottom: -17px; }
+[data-touch-y="18"]::after { top: -18px; bottom: -18px; }
+[data-touch-y="19"]::after { top: -19px; bottom: -19px; }
+[data-touch-y="20"]::after { top: -20px; bottom: -20px; }
+[data-touch-y="21"]::after { top: -21px; bottom: -21px; }
+[data-touch-y="22"]::after { top: -22px; bottom: -22px; }
+[data-touch-y="23"]::after { top: -23px; bottom: -23px; }
+[data-touch-y="24"]::after { top: -24px; bottom: -24px; }
+
+/* Elevation ladder — the shadow steps components name by class. */
+.hz-elevation-1 { box-shadow: var(--hz-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.16)); }
+.hz-elevation-2 { box-shadow: var(--hz-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.24)); }
+.hz-elevation-3 { box-shadow: var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36)); }
+.hz-elevation-4 { box-shadow: var(--hz-elevation-4, 0 16px 48px rgba(0, 0, 0, 0.44)); }

package/dist/usage.cjs

@@ -1,15 +1,24 @@
-'use client';
-'use strict';
-
-var usage = require('@hanzo/usage');
-
-
-
-Object.keys(usage).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return usage[k]; }
-	});
-});
-//# sourceMappingURL=usage.cjs.map
-//# sourceMappingURL=usage.cjs.map
+'use client';"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @hanzo/ui/usage — the shared AI-usage surface (the meter bar → provider card →
+// dashboard progression), re-exported from its home package @hanzo/usage. Thin
+// subpath so every console shows the same quota UI:
+//
+//   import { UsageMeter, UsageProviderCard, UsageDashboard } from '@hanzo/ui/usage'
+//
+// Optional peer — only pulled when the subpath is used.
+__exportStar(require("@hanzo/usage"), exports);

package/dist/usage.d.ts

@@ -1 +1,2 @@
 export * from '@hanzo/usage';
+//# sourceMappingURL=usage.d.ts.map

package/dist/usage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usage.d.ts","sourceRoot":"","sources":["../src/usage.ts"],"names":[],"mappings":"AAOA,cAAc,cAAc,CAAA"}

package/dist/usage.js

@@ -1,4 +1,9 @@
-'use client';
+'use client';// @hanzo/ui/usage — the shared AI-usage surface (the meter bar → provider card →
+// dashboard progression), re-exported from its home package @hanzo/usage. Thin
+// subpath so every console shows the same quota UI:
+//
+//   import { UsageMeter, UsageProviderCard, UsageDashboard } from '@hanzo/ui/usage'
+//
+// Optional peer — only pulled when the subpath is used.
 export * from '@hanzo/usage';
-//# sourceMappingURL=usage.js.map
 //# sourceMappingURL=usage.js.map

package/dist/usage.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"usage.js","sourcesContent":[]}
+{"version":3,"file":"usage.js","sourceRoot":"","sources":["../src/usage.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,+EAA+E;AAC/E,oDAAoD;AACpD,EAAE;AACF,oFAAoF;AACpF,EAAE;AACF,wDAAwD;AACxD,cAAc,cAAc,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.27",
+  "version": "8.0.28",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/tokens. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {
@@ -10,12 +10,6 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
-    "./components": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
-    },
     "./models": {
       "types": "./dist/models/index.d.ts",
       "import": "./dist/models/index.js",
@@ -163,7 +157,8 @@
     "@hanzogui/next-theme": ">=7.3.0",
     "next-themes": ">=0.2.1",
     "react": ">=19",
-    "react-dom": ">=19"
+    "react-dom": ">=19",
+    "react-native-web": ">=0.21"
   },
   "peerDependenciesMeta": {
     "@hanzo/canvas": {
@@ -183,6 +178,9 @@
     },
     "next-themes": {
       "optional": true
+    },
+    "react-native-web": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -198,10 +196,9 @@
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "typescript": "^5.7.2",
-    "vitest": "^4.1.8",
     "react-native-web": "^0.21.2",
-    "tsup": "^8.5.1"
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.8"
   },
   "publishConfig": {
     "access": "public"
@@ -209,8 +206,8 @@
   "license": "BSD-3-Clause",
   "author": "Hanzo AI <dev@hanzo.ai>",
   "scripts": {
-    "build": "tsup && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/theme.css dist/theme.css && cp src/styles/hanzo-motion.css dist/styles/hanzo-motion.css && node scripts/add-use-client.mjs",
-    "clean": "rm -rf dist types",
+    "build": "rm -rf dist dist-cjs && tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json --noCheck && mkdir -p dist/styles && cp src/theme.css dist/theme.css && cp src/styles/hanzo-motion.css dist/styles/hanzo-motion.css && node scripts/postbuild.mjs",
+    "clean": "rm -rf dist dist-cjs types",
     "gen:primitives": "node scripts/gen-primitives.mjs",
     "tc": "tsc --noEmit",
     "typecheck": "tsc --noEmit",

package/dist/ThemeToggleNext-AEDLHX5X.js

@@ -1,5 +0,0 @@
-'use client';
-export { ThemeToggleNext, ThemeToggleNext_default as default } from './chunk-77AMCLN4.js';
-import './chunk-FVQXROBK.js';
-//# sourceMappingURL=ThemeToggleNext-AEDLHX5X.js.map
-//# sourceMappingURL=ThemeToggleNext-AEDLHX5X.js.map

package/dist/ThemeToggleNext-AEDLHX5X.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"ThemeToggleNext-AEDLHX5X.js"}

package/dist/ThemeToggleNext-N6ASYJ6J.cjs

@@ -1,20 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var chunkARV3P4CE_cjs = require('./chunk-ARV3P4CE.cjs');
-require('./chunk-7XDEUEWI.cjs');
-
-
-
-Object.defineProperty(exports, "ThemeToggleNext", {
-  enumerable: true,
-  get: function () { return chunkARV3P4CE_cjs.ThemeToggleNext; }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () { return chunkARV3P4CE_cjs.ThemeToggleNext_default; }
-});
-//# sourceMappingURL=ThemeToggleNext-N6ASYJ6J.cjs.map
-//# sourceMappingURL=ThemeToggleNext-N6ASYJ6J.cjs.map

package/dist/ThemeToggleNext-N6ASYJ6J.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"ThemeToggleNext-N6ASYJ6J.cjs"}

package/dist/canvas.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"canvas.cjs","sourcesContent":[]}

package/dist/chunk-2U3MNE4I.js

@@ -1,4 +0,0 @@
-'use client';
-export { colors, dark, fontFamily, fontSize, fontSizePx, fontWeight, hsl, letterSpacing, light, lineHeight, oklch, radii, radiiPx, spacing, spacingPx, themes, zinc } from '@hanzo/tokens';
-//# sourceMappingURL=chunk-2U3MNE4I.js.map
-//# sourceMappingURL=chunk-2U3MNE4I.js.map

package/dist/chunk-2U3MNE4I.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-2U3MNE4I.js","sourcesContent":[]}