@hanzo/ui 8.4.4 → 8.4.5

package/dist/box.cjs

@@ -21,6 +21,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * 77 of 225 elements on one page into flex containers that were never asked to
  * be: an inline run became a column, a heading's width collapsed to its text,
  * and a page grew 8% taller.
+ *
+ * `tag` renders the element Box is standing in for, and it is what makes the
+ * migration reach past `<div>`. Divs are about a third of what carries a
+ * className in these apps; the rest are `p`, `span`, `li`, `h2`, `section`, `a`.
+ * Converting those to a div-only Box would read as a rename and would in fact
+ * strip the document of its headings, lists and paragraphs — every one of them a
+ * thing a screen reader navigates by.
+ *
+ * It goes through `asChild` because gui does NOT honour a `tag` prop: asked for
+ * one it renders its own element anyway AND passes `tag` through to the DOM,
+ * where it is an invalid attribute. `asChild` is the supported way to say "style
+ * this element instead of yours", so the semantics come from the element and the
+ * styling still comes from gui — one substrate, not a second styling path for
+ * everything that is not a div.
  */
 const react_1 = require("react");
 const gui_1 = require("@hanzo/gui");
@@ -29,7 +43,7 @@ const tw_1 = require("./tw.cjs");
 const TEXT_PROPS = ['fontSize', 'lineHeight', 'fontWeight', 'letterSpacing',
     'textTransform', 'fontFamily', 'fontStyle', 'textAlign', 'color',
     'textDecorationLine', 'whiteSpace'];
-exports.Box = (0, react_1.forwardRef)(function Box({ className, children, 'aria-hidden': hidden, ...rest }, ref) {
+exports.Box = (0, react_1.forwardRef)(function Box({ className, children, 'aria-hidden': hidden, tag, ...rest }, ref) {
     const { props, rest: unread } = (0, tw_1.tw)(className);
     // A View pins `min-height: 0`; a div's is `auto`, and auto is what gives a
     // flex or grid child its automatic minimum size. Pinned, a converted child of
@@ -52,15 +66,21 @@ exports.Box = (0, react_1.forwardRef)(function Box({ className, children, 'aria-
     // class said otherwise, so `leading-relaxed` still wins.
     if (!('lineHeight' in text))
         text.lineHeight = 'inherit';
+    const style = Object.keys(text).length
+        ? { ...text, ...rest.style }
+        : rest.style;
     // Explicit props win: a caller who states a value directly means it, and the
     // classes are what they are migrating away from.
-    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ref: ref, display: "block", 
+    const frame = ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ref: tag ? undefined : ref, asChild: tag ? true : undefined, display: "block", 
         // A View does not shrink; a div does. Left at the View's default, every
         // converted flex child held its full basis and overflowed its row instead
         // of sharing it — two half-width columns came out 608px each in a 1216px
         // row with a 32px gap, where the divs they replaced sat at 592.
         // `shrink`, not `flexShrink`: gui types the shorthand and compiles both to
         // the same `_shrink-1`, and the DOM spelling is the one it does not carry.
-        shrink: 1, "aria-hidden": hidden === undefined ? undefined : hidden !== 'false' && hidden !== false, ...props, ...rest, className: unread || undefined, style: Object.keys(text).length ? { ...text, ...rest.style } : rest.style, children: children }));
+        shrink: 1, "aria-hidden": hidden === undefined ? undefined : hidden !== 'false' && hidden !== false, ...props, ...rest, className: tag ? undefined : unread || undefined, style: tag ? undefined : style, children: tag
+            ? (0, react_1.createElement)(tag, { ref, className: unread || undefined, style }, children)
+            : children }));
+    return frame;
 });
 exports.default = exports.Box;

package/dist/box.d.ts

@@ -16,6 +16,20 @@
  * 77 of 225 elements on one page into flex containers that were never asked to
  * be: an inline run became a column, a heading's width collapsed to its text,
  * and a page grew 8% taller.
+ *
+ * `tag` renders the element Box is standing in for, and it is what makes the
+ * migration reach past `<div>`. Divs are about a third of what carries a
+ * className in these apps; the rest are `p`, `span`, `li`, `h2`, `section`, `a`.
+ * Converting those to a div-only Box would read as a rename and would in fact
+ * strip the document of its headings, lists and paragraphs — every one of them a
+ * thing a screen reader navigates by.
+ *
+ * It goes through `asChild` because gui does NOT honour a `tag` prop: asked for
+ * one it renders its own element anyway AND passes `tag` through to the DOM,
+ * where it is an invalid attribute. `asChild` is the supported way to say "style
+ * this element instead of yours", so the semantics come from the element and the
+ * styling still comes from gui — one substrate, not a second styling path for
+ * everything that is not a div.
  */
 import { type ReactNode } from 'react';
 import { YStack } from '@hanzo/gui';
@@ -23,6 +37,10 @@ import { type ClassValue } from './tw.js';
 export type BoxProps = Omit<React.ComponentProps<typeof YStack>, 'aria-hidden'> & {
     className?: ClassValue;
     children?: ReactNode;
+    /**
+     * The element to render. Omitted, Box is the `<div>` it has always been.
+     */
+    tag?: keyof React.JSX.IntrinsicElements;
     /**
      * ARIA states are strings in markup and gui types this one as a boolean, so
      * both spellings are taken and normalised. Rejecting `"true"` would make a

package/dist/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../src/box.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAM,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAO1C,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG;IAChF,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;CAC3C,CAAA;AAED,eAAO,MAAM,GAAG,uGA0Cd,CAAA;eAEa,GAAG"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../src/box.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAM,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAO1C,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG;IAChF,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAA;IACvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;CAC3C,CAAA;AAED,eAAO,MAAM,GAAG,uGAqDd,CAAA;eAEa,GAAG"}

package/dist/box.js

@@ -18,15 +18,29 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * 77 of 225 elements on one page into flex containers that were never asked to
  * be: an inline run became a column, a heading's width collapsed to its text,
  * and a page grew 8% taller.
+ *
+ * `tag` renders the element Box is standing in for, and it is what makes the
+ * migration reach past `<div>`. Divs are about a third of what carries a
+ * className in these apps; the rest are `p`, `span`, `li`, `h2`, `section`, `a`.
+ * Converting those to a div-only Box would read as a rename and would in fact
+ * strip the document of its headings, lists and paragraphs — every one of them a
+ * thing a screen reader navigates by.
+ *
+ * It goes through `asChild` because gui does NOT honour a `tag` prop: asked for
+ * one it renders its own element anyway AND passes `tag` through to the DOM,
+ * where it is an invalid attribute. `asChild` is the supported way to say "style
+ * this element instead of yours", so the semantics come from the element and the
+ * styling still comes from gui — one substrate, not a second styling path for
+ * everything that is not a div.
  */
-import { forwardRef } from 'react';
+import { createElement, forwardRef } from 'react';
 import { YStack } from '@hanzo/gui';
 import { tw } from './tw.js';
 /** Properties a frame ignores and a DOM element passes to its children. */
 const TEXT_PROPS = ['fontSize', 'lineHeight', 'fontWeight', 'letterSpacing',
     'textTransform', 'fontFamily', 'fontStyle', 'textAlign', 'color',
     'textDecorationLine', 'whiteSpace'];
-export const Box = forwardRef(function Box({ className, children, 'aria-hidden': hidden, ...rest }, ref) {
+export const Box = forwardRef(function Box({ className, children, 'aria-hidden': hidden, tag, ...rest }, ref) {
     const { props, rest: unread } = tw(className);
     // A View pins `min-height: 0`; a div's is `auto`, and auto is what gives a
     // flex or grid child its automatic minimum size. Pinned, a converted child of
@@ -49,16 +63,22 @@ export const Box = forwardRef(function Box({ className, children, 'aria-hidden':
     // class said otherwise, so `leading-relaxed` still wins.
     if (!('lineHeight' in text))
         text.lineHeight = 'inherit';
+    const style = Object.keys(text).length
+        ? { ...text, ...rest.style }
+        : rest.style;
     // Explicit props win: a caller who states a value directly means it, and the
     // classes are what they are migrating away from.
-    return (_jsx(YStack, { ref: ref, display: "block", 
+    const frame = (_jsx(YStack, { ref: tag ? undefined : ref, asChild: tag ? true : undefined, display: "block", 
         // A View does not shrink; a div does. Left at the View's default, every
         // converted flex child held its full basis and overflowed its row instead
         // of sharing it — two half-width columns came out 608px each in a 1216px
         // row with a 32px gap, where the divs they replaced sat at 592.
         // `shrink`, not `flexShrink`: gui types the shorthand and compiles both to
         // the same `_shrink-1`, and the DOM spelling is the one it does not carry.
-        shrink: 1, "aria-hidden": hidden === undefined ? undefined : hidden !== 'false' && hidden !== false, ...props, ...rest, className: unread || undefined, style: Object.keys(text).length ? { ...text, ...rest.style } : rest.style, children: children }));
+        shrink: 1, "aria-hidden": hidden === undefined ? undefined : hidden !== 'false' && hidden !== false, ...props, ...rest, className: tag ? undefined : unread || undefined, style: tag ? undefined : style, children: tag
+            ? createElement(tag, { ref, className: unread || undefined, style }, children)
+            : children }));
+    return frame;
 });
 export default Box;
 //# sourceMappingURL=box.js.map

package/dist/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sourceRoot":"","sources":["../src/box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,EAAE,EAAmB,MAAM,MAAM,CAAA;AAE1C,2EAA2E;AAC3E,MAAM,UAAU,GAAG,CAAC,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe;IACzE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO;IAChE,oBAAoB,EAAE,YAAY,CAAU,CAAA;AAa9C,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAgB,SAAS,GAAG,CACvD,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EACvD,GAAG;IAEH,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAA;IAC7C,2EAA2E;IAC3E,8EAA8E;IAC9E,oEAAoE;IACpE,IAAI,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC;QAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;IACrD,6EAA6E;IAC7E,0EAA0E;IAC1E,8EAA8E;IAC9E,0EAA0E;IAC1E,yBAAyB;IACzB,MAAM,IAAI,GAA4B,EAAE,CAAA;IACxC,KAAK,MAAM,CAAC,IAAI,UAAU;QAAE,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;YAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAA;QAAC,CAAC;IACnF,6EAA6E;IAC7E,0EAA0E;IAC1E,yDAAyD;IACzD,IAAI,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC;QAAE,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;IACxD,6EAA6E;IAC7E,iDAAiD;IACjD,OAAO,CACL,KAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,OAAO;QACf,wEAAwE;QACxE,0EAA0E;QAC1E,yEAAyE;QACzE,gEAAgE;QAChE,2EAA2E;QAC3E,2EAA2E;QAC3E,MAAM,EAAE,CAAC,iBACI,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,KAAK,KACjF,KAAgB,KACjB,IAAI,EACR,SAAS,EAAE,MAAM,IAAI,SAAS,EAC9B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAI,IAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAE,IAAY,CAAC,KAAK,YAE1F,QAAQ,GACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,GAAG,CAAA"}
+{"version":3,"file":"box.js","sourceRoot":"","sources":["../src/box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,EAAE,EAAmB,MAAM,MAAM,CAAA;AAE1C,2EAA2E;AAC3E,MAAM,UAAU,GAAG,CAAC,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe;IACzE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO;IAChE,oBAAoB,EAAE,YAAY,CAAU,CAAA;AAiB9C,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAgB,SAAS,GAAG,CACvD,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAC5D,GAAG;IAEH,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAA;IAC7C,2EAA2E;IAC3E,8EAA8E;IAC9E,oEAAoE;IACpE,IAAI,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC;QAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;IACrD,6EAA6E;IAC7E,0EAA0E;IAC1E,8EAA8E;IAC9E,0EAA0E;IAC1E,yBAAyB;IACzB,MAAM,IAAI,GAA4B,EAAE,CAAA;IACxC,KAAK,MAAM,CAAC,IAAI,UAAU;QAAE,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;YAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAA;QAAC,CAAC;IACnF,6EAA6E;IAC7E,0EAA0E;IAC1E,yDAAyD;IACzD,IAAI,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC;QAAE,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;IACxD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM;QACpC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAI,IAAY,CAAC,KAAK,EAAE;QACrC,CAAC,CAAE,IAAY,CAAC,KAAK,CAAA;IACvB,6EAA6E;IAC7E,iDAAiD;IACjD,MAAM,KAAK,GAAG,CACZ,KAAC,MAAM,IACL,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAC1B,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC/B,OAAO,EAAC,OAAO;QACf,wEAAwE;QACxE,0EAA0E;QAC1E,yEAAyE;QACzE,gEAAgE;QAChE,2EAA2E;QAC3E,2EAA2E;QAC3E,MAAM,EAAE,CAAC,iBACI,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,KAAK,KACjF,KAAgB,KACjB,IAAI,EACR,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,IAAI,SAAS,EAChD,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,YAK7B,GAAG;YACF,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,IAAI,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC;YAC9E,CAAC,CAAC,QAAQ,GACL,CACV,CAAA;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAC,CAAA;AAEF,eAAe,GAAG,CAAA"}

package/dist/gallery.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.4.4</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
+<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.4.5</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
 :root { --hanzo-ui-styles: 1; }
 /* Hanzo Design System — the entry point. Import THIS one file.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.4.4",
+  "version": "8.4.5",
   "type": "module",
   "description": "Hanzo UI — the one canonical 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). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {