@hanzo/ui 8.9.3 → 8.10.1

package/dist/backends/gui/input-otp.cjs

@@ -0,0 +1,101 @@
+'use client';"use strict";
+'use client';
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * InputOTP — a one-time code, shown as separate boxes.
+ *
+ * ONE real `<input>` lies invisibly over the whole control and holds the entire
+ * value; the boxes are drawn from it. That is what makes paste, autofill,
+ * backspace-across-boxes, and the phone keyboard's "from Messages" suggestion
+ * work — all four break the moment the code is six separate inputs that hop
+ * focus between themselves, which is how this is usually built.
+ *
+ * It also means the caller's `onInput`/`onChange` see a normal input event with
+ * the whole code on it, which is what a form expects.
+ *
+ * `render` draws the boxes, because their GROUPING is a design decision — three
+ * and three, four and four, one run of six — and it is the caller's.
+ */
+const React = __importStar(require("react"));
+const box_1 = require("../../box.cjs");
+const cn_1 = require("../../core/cn.cjs");
+const InputOTP = ({ maxLength, render, className, value: controlled, onChange, onFocus, onBlur, ...props }) => {
+    const [held, setHeld] = React.useState('');
+    const value = String(controlled ?? held).slice(0, maxLength);
+    const [focused, setFocused] = React.useState(false);
+    const slots = Array.from({ length: maxLength }, (_, i) => ({
+        char: value[i] ?? null,
+        isActive: focused && i === Math.min(value.length, maxLength - 1),
+        hasFakeCaret: focused && i === value.length && i < maxLength,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, { className: (0, cn_1.cn)('relative grid grid-flow-col auto-cols-max items-center', className), children: [render({ slots }), (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "input", 
+                // The phone keyboard's one-time-code suggestion is worth more than any
+                // amount of styling here, and it turns on these three attributes alone.
+                inputMode: "numeric", autoComplete: "one-time-code", maxLength: maxLength, ...props, value: value, onChange: (e) => {
+                    if (controlled === undefined)
+                        setHeld(e.target.value.slice(0, maxLength));
+                    onChange?.(e);
+                }, onFocus: (e) => {
+                    setFocused(true);
+                    onFocus?.(e);
+                }, onBlur: (e) => {
+                    setFocused(false);
+                    onBlur?.(e);
+                }, style: {
+                    // Over the boxes and transparent — so a click anywhere on the control
+                    // focuses the thing that actually takes the keystrokes.
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    opacity: 0,
+                    // The real caret would sit at the left edge of an invisible field,
+                    // nowhere near the box it belongs to. The drawn one is in the slot.
+                    caretColor: 'transparent',
+                } })] }));
+};
+exports.InputOTP = InputOTP;
+const InputOTPGroup = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { className: (0, cn_1.cn)('grid grid-flow-col auto-cols-max items-center', className), ...props }));
+exports.InputOTPGroup = InputOTPGroup;
+const InputOTPSlot = ({ char, isActive, hasFakeCaret, className, ...props }) => ((0, jsx_runtime_1.jsxs)(box_1.Box
+// Not focusable and not announced: the real input holds the value and the
+// focus, and six boxes in the tab order would be six stops for one field.
+, { "aria-hidden": "true", className: (0, cn_1.cn)('relative grid place-items-center w-10 h-10 border text-sm', isActive && 'border-foreground z-10', className), ...props, children: [char, hasFakeCaret && (0, jsx_runtime_1.jsx)(box_1.Box, { className: "hz-caret absolute", style: { width: 1, height: '1em' } })] }));
+exports.InputOTPSlot = InputOTPSlot;
+const InputOTPSeparator = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { role: "separator", "aria-hidden": "true", ...props, children: children ?? '-' }));
+exports.InputOTPSeparator = InputOTPSeparator;

package/dist/backends/gui/input-otp.d.ts

@@ -0,0 +1,37 @@
+/**
+ * InputOTP — a one-time code, shown as separate boxes.
+ *
+ * ONE real `<input>` lies invisibly over the whole control and holds the entire
+ * value; the boxes are drawn from it. That is what makes paste, autofill,
+ * backspace-across-boxes, and the phone keyboard's "from Messages" suggestion
+ * work — all four break the moment the code is six separate inputs that hop
+ * focus between themselves, which is how this is usually built.
+ *
+ * It also means the caller's `onInput`/`onChange` see a normal input event with
+ * the whole code on it, which is what a form expects.
+ *
+ * `render` draws the boxes, because their GROUPING is a design decision — three
+ * and three, four and four, one run of six — and it is the caller's.
+ */
+import * as React from 'react';
+import { Box, type BoxProps } from '../../box.js';
+/** One box's worth of state. */
+export type OTPSlot = {
+    char: string | null;
+    /** The box the next keystroke lands in. */
+    isActive: boolean;
+    /** Draw a caret here — the real one is hidden with the real input. */
+    hasFakeCaret: boolean;
+};
+export type InputOTPProps = Omit<React.ComponentProps<'input'>, 'render' | 'children' | 'size'> & {
+    maxLength: number;
+    render: (props: {
+        slots: OTPSlot[];
+    }) => React.ReactNode;
+    className?: string;
+};
+export declare const InputOTP: ({ maxLength, render, className, value: controlled, onChange, onFocus, onBlur, ...props }: InputOTPProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputOTPGroup: ({ className, ...props }: React.ComponentProps<typeof Box>) => import("react/jsx-runtime").JSX.Element;
+export declare const InputOTPSlot: ({ char, isActive, hasFakeCaret, className, ...props }: BoxProps & OTPSlot) => import("react/jsx-runtime").JSX.Element;
+export declare const InputOTPSeparator: ({ children, ...props }: React.ComponentProps<typeof Box>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-otp.d.ts.map

package/dist/backends/gui/input-otp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input-otp.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAA;AAG9C,gCAAgC;AAChC,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,2CAA2C;IAC3C,QAAQ,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,YAAY,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC,GAAG;IAChG,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,OAAO,EAAE,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,QAAQ,6FASlB,aAAa,4CAqDf,CAAA;AAED,eAAO,MAAM,aAAa,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAEtF,CAAA;AAED,eAAO,MAAM,YAAY,0DAMtB,QAAQ,GAAG,OAAO,4CAepB,CAAA;AAED,eAAO,MAAM,iBAAiB,2BAA4B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAIzF,CAAA"}

package/dist/backends/gui/input-otp.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InputOTP — a one-time code, shown as separate boxes.
+ *
+ * ONE real `<input>` lies invisibly over the whole control and holds the entire
+ * value; the boxes are drawn from it. That is what makes paste, autofill,
+ * backspace-across-boxes, and the phone keyboard's "from Messages" suggestion
+ * work — all four break the moment the code is six separate inputs that hop
+ * focus between themselves, which is how this is usually built.
+ *
+ * It also means the caller's `onInput`/`onChange` see a normal input event with
+ * the whole code on it, which is what a form expects.
+ *
+ * `render` draws the boxes, because their GROUPING is a design decision — three
+ * and three, four and four, one run of six — and it is the caller's.
+ */
+import * as React from 'react';
+import { Box } from '../../box.js';
+import { cn } from '../../core/cn.js';
+export const InputOTP = ({ maxLength, render, className, value: controlled, onChange, onFocus, onBlur, ...props }) => {
+    const [held, setHeld] = React.useState('');
+    const value = String(controlled ?? held).slice(0, maxLength);
+    const [focused, setFocused] = React.useState(false);
+    const slots = Array.from({ length: maxLength }, (_, i) => ({
+        char: value[i] ?? null,
+        isActive: focused && i === Math.min(value.length, maxLength - 1),
+        hasFakeCaret: focused && i === value.length && i < maxLength,
+    }));
+    return (_jsxs(Box, { className: cn('relative grid grid-flow-col auto-cols-max items-center', className), children: [render({ slots }), _jsx(Box, { tag: "input", 
+                // The phone keyboard's one-time-code suggestion is worth more than any
+                // amount of styling here, and it turns on these three attributes alone.
+                inputMode: "numeric", autoComplete: "one-time-code", maxLength: maxLength, ...props, value: value, onChange: (e) => {
+                    if (controlled === undefined)
+                        setHeld(e.target.value.slice(0, maxLength));
+                    onChange?.(e);
+                }, onFocus: (e) => {
+                    setFocused(true);
+                    onFocus?.(e);
+                }, onBlur: (e) => {
+                    setFocused(false);
+                    onBlur?.(e);
+                }, style: {
+                    // Over the boxes and transparent — so a click anywhere on the control
+                    // focuses the thing that actually takes the keystrokes.
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    opacity: 0,
+                    // The real caret would sit at the left edge of an invisible field,
+                    // nowhere near the box it belongs to. The drawn one is in the slot.
+                    caretColor: 'transparent',
+                } })] }));
+};
+export const InputOTPGroup = ({ className, ...props }) => (_jsx(Box, { className: cn('grid grid-flow-col auto-cols-max items-center', className), ...props }));
+export const InputOTPSlot = ({ char, isActive, hasFakeCaret, className, ...props }) => (_jsxs(Box
+// Not focusable and not announced: the real input holds the value and the
+// focus, and six boxes in the tab order would be six stops for one field.
+, { "aria-hidden": "true", className: cn('relative grid place-items-center w-10 h-10 border text-sm', isActive && 'border-foreground z-10', className), ...props, children: [char, hasFakeCaret && _jsx(Box, { className: "hz-caret absolute", style: { width: 1, height: '1em' } })] }));
+export const InputOTPSeparator = ({ children, ...props }) => (_jsx(Box, { role: "separator", "aria-hidden": "true", ...props, children: children ?? '-' }));
+//# sourceMappingURL=input-otp.js.map

package/dist/backends/gui/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","sourceRoot":"","sources":["../../../src/backends/gui/input-otp.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/link.cjs

@@ -91,10 +91,12 @@ exports.MDXLink = MDXLink;
 const LinkElement = ({ def, 
 // No defaults on anything that also appears in `def` — a default here would
 // outrank the def it is supposed to fall back to.
-onClick, size, variant, icon, iconAfter, className, style, children, }) => {
+onClick, size, variant, icon, iconAfter, className, style, children, 'aria-current': current, }) => {
     const Comp = (0, exports.useLink)();
     const { href, newTab, title } = def;
     const nav = {};
+    if (current)
+        nav['aria-current'] = current;
     if (external(href)) {
         nav.rel = 'noreferrer noopener';
         // An external link opens in a new tab unless the def says otherwise.

package/dist/backends/gui/link.d.ts

@@ -54,6 +54,12 @@ export type LinkElementProps = React.PropsWithChildren<{
      */
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * `page` on the link to where you already are. It is how a screen reader
+     * says "this one" in a navigation list — the colour that marks it visually
+     * says nothing at all.
+     */
+    'aria-current'?: 'page' | 'true' | false;
 }>;
 /**
  * A link wearing a button's clothes, described by a {@link LinkDef}.
@@ -61,5 +67,5 @@ export type LinkElementProps = React.PropsWithChildren<{
  * Given children, they replace the whole label — `title`, `icon` and
  * `iconAfter` are then ignored, since the caller has said what to render.
  */
-export declare const LinkElement: ({ def, onClick, size, variant, icon, iconAfter, className, style, children, }: LinkElementProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LinkElement: ({ def, onClick, size, variant, icon, iconAfter, className, style, children, 'aria-current': current, }: LinkElementProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=link.d.ts.map

package/dist/backends/gui/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/link.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAkB,MAAM,UAAU,CAAA;AAE9E,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAA;AAE7C;;;GAGG;AACH,eAAO,MAAM,IAAI,8BAA0D,CAAA;AAE3E,eAAO,MAAM,OAAO,QAAO,aAAuC,CAAA;AAKlE;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,gCAIjB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,4CAc/C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,GAAG,EAAE,OAAO,CAAA;IACZ,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,uBAAuB;IACvB,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,uBAAuB;IACvB,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,uBAAuB;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,kFAYrB,gBAAgB,4CAiDlB,CAAA"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/link.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAkB,MAAM,UAAU,CAAA;AAE9E,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAA;AAE7C;;;GAGG;AACH,eAAO,MAAM,IAAI,8BAA0D,CAAA;AAE3E,eAAO,MAAM,OAAO,QAAO,aAAuC,CAAA;AAKlE;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,gCAIjB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,4CAc/C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,GAAG,EAAE,OAAO,CAAA;IACZ,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,uBAAuB;IACvB,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,uBAAuB;IACvB,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,uBAAuB;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;CACzC,CAAC,CAAA;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,2GAarB,gBAAgB,4CAkDlB,CAAA"}

package/dist/backends/gui/link.js

@@ -53,10 +53,12 @@ export const MDXLink = ({ href, children, ...rest }) => {
 export const LinkElement = ({ def, 
 // No defaults on anything that also appears in `def` — a default here would
 // outrank the def it is supposed to fall back to.
-onClick, size, variant, icon, iconAfter, className, style, children, }) => {
+onClick, size, variant, icon, iconAfter, className, style, children, 'aria-current': current, }) => {
     const Comp = useLink();
     const { href, newTab, title } = def;
     const nav = {};
+    if (current)
+        nav['aria-current'] = current;
     if (external(href)) {
         nav.rel = 'noreferrer noopener';
         // An external link opens in a new tab unless the def says otherwise.

package/dist/backends/gui/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/backends/gui/link.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/backends/gui/link.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/nav-items.cjs

@@ -0,0 +1,13 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const box_1 = require("../../box.cjs");
+const cn_1 = require("../../core/cn.cjs");
+const link_1 = require("./link.cjs");
+const NavItems = ({ items, currentAs, as = 'nav', className, itemClx, onNavigate, }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: as, "aria-label": as === 'nav' ? 'Navigation' : undefined, className: (0, cn_1.cn)('grid grid-flow-col auto-cols-max items-center', className), children: items.map((def, i) => {
+        const current = !!currentAs && def.href === currentAs;
+        return ((0, jsx_runtime_1.jsx)(link_1.LinkElement, { def: def, onClick: onNavigate, "aria-current": current ? 'page' : false, className: (0, cn_1.cn)(typeof itemClx === 'function' ? itemClx(def) : itemClx) }, def.href || i));
+    }) }));
+exports.NavItems = NavItems;

package/dist/backends/gui/nav-items.d.ts

@@ -0,0 +1,22 @@
+import { type ClassValue } from '../../core/cn.js';
+import type { LinkDef } from '../../types.js';
+export type NavItemsProps = {
+    items: LinkDef[];
+    /**
+     * The path you are on. The item whose href matches it is the current one.
+     * Absent, nothing is current — which is right for a footer.
+     */
+    currentAs?: string;
+    /** The element holding the list. `nav` unless it is not a navigation. */
+    as?: 'nav' | 'div' | 'ul';
+    className?: ClassValue;
+    /**
+     * A class for every item, or one worked out per item — a menu whose featured
+     * entries read differently from its ordinary ones needs the second.
+     */
+    itemClx?: string | ((def: LinkDef) => string);
+    /** Fires alongside the navigation — e.g. to close the menu it sits in. */
+    onNavigate?: () => void;
+};
+export declare const NavItems: ({ items, currentAs, as, className, itemClx, onNavigate, }: NavItemsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=nav-items.d.ts.map

package/dist/backends/gui/nav-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-items.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/nav-items.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAM,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAG1C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,EAAE,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC,CAAA;IAC7C,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,QAAQ,8DAOlB,aAAa,4CAqBf,CAAA"}

package/dist/backends/gui/nav-items.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../box.js';
+import { cn } from '../../core/cn.js';
+import { LinkElement } from './link.js';
+export const NavItems = ({ items, currentAs, as = 'nav', className, itemClx, onNavigate, }) => (_jsx(Box, { tag: as, "aria-label": as === 'nav' ? 'Navigation' : undefined, className: cn('grid grid-flow-col auto-cols-max items-center', className), children: items.map((def, i) => {
+        const current = !!currentAs && def.href === currentAs;
+        return (_jsx(LinkElement, { def: def, onClick: onNavigate, "aria-current": current ? 'page' : false, className: cn(typeof itemClx === 'function' ? itemClx(def) : itemClx) }, def.href || i));
+    }) }));
+//# sourceMappingURL=nav-items.js.map

package/dist/backends/gui/nav-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-items.js","sourceRoot":"","sources":["../../../src/backends/gui/nav-items.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAcZ,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAmB,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAqBpC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,SAAS,EACT,EAAE,GAAG,KAAK,EACV,SAAS,EACT,OAAO,EACP,UAAU,GACI,EAAE,EAAE,CAAC,CACnB,KAAC,GAAG,IACF,GAAG,EAAE,EAAE,gBAGK,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACnD,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,YAExE,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;QACpB,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS,CAAA;QACrD,OAAO,CACL,KAAC,WAAW,IAEV,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,kBACL,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACtC,SAAS,EAAE,EAAE,CAAC,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAJhE,GAAG,CAAC,IAAI,IAAI,CAAC,CAKlB,CACH,CAAA;IACH,CAAC,CAAC,GACE,CACP,CAAA"}

package/dist/backends/gui/navigation-menu.cjs

@@ -0,0 +1,97 @@
+'use client';"use strict";
+'use client';
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationMenuLink = exports.NavigationMenuContent = exports.NavigationMenuTrigger = exports.navigationMenuTriggerStyle = exports.NavigationMenuItem = exports.NavigationMenuList = exports.NavigationMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * NavigationMenu — a site menu whose entries can open a panel.
+ *
+ * Each item owns its own open state and opens on hover OR focus, closing on
+ * leave or blur. Focus is not decoration here: a menu that opens only on hover
+ * is a menu a keyboard cannot reach, and the panel behind it is unreachable
+ * content rather than hidden content.
+ *
+ * A caller's own pointer handlers still run — several sites drive a shared
+ * backdrop from the same events — so they are chained, never replaced.
+ */
+const React = __importStar(require("react"));
+const box_1 = require("../../box.cjs");
+const cn_1 = require("../../core/cn.cjs");
+const Item = /* @__PURE__ */ React.createContext(null);
+const useItem = () => React.useContext(Item);
+/** Run the caller's handler after ours, never instead of it. */
+const both = (ours, theirs) => (e) => {
+    ours(e);
+    theirs?.(e);
+};
+const NavigationMenu = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "nav", "aria-label": "Main", className: (0, cn_1.cn)('relative grid justify-center', className), ...props }));
+exports.NavigationMenu = NavigationMenu;
+const NavigationMenuList = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "ul", className: (0, cn_1.cn)('grid grid-flow-col auto-cols-max items-center gap-1', className), ...props }));
+exports.NavigationMenuList = NavigationMenuList;
+const NavigationMenuItem = ({ className, children, ...props }) => {
+    const [open, setOpen] = React.useState(false);
+    const id = React.useId();
+    return ((0, jsx_runtime_1.jsx)(Item.Provider, { value: { open, setOpen, id }, children: (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "li", className: (0, cn_1.cn)('relative', className), 
+            // On the ITEM, not the trigger: the panel is a child of the item, so
+            // the pointer can travel from the trigger into the panel without ever
+            // leaving the item — which is what stops the menu closing under a
+            // cursor moving towards it.
+            onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), ...props, children: children }) }));
+};
+exports.NavigationMenuItem = NavigationMenuItem;
+/**
+ * A stable class handle for hosts that hook menu triggers from CSS. Styling
+ * lives in the tokens; this only names the part.
+ */
+const navigationMenuTriggerStyle = () => 'nav-menu-trigger';
+exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
+const NavigationMenuTrigger = ({ className, children, onFocus, onBlur, onClick, ...props }) => {
+    const item = useItem();
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "button", type: "button", "aria-haspopup": "true", "aria-expanded": item?.open ?? false, "aria-controls": item?.id, className: (0, cn_1.cn)((0, exports.navigationMenuTriggerStyle)(), 'grid grid-flow-col auto-cols-max items-center gap-1', className), onFocus: both(() => item?.setOpen(true), onFocus), onBlur: both(() => item?.setOpen(false), onBlur), 
+        // Touch has no hover. Without this the panel is unreachable on a phone —
+        // which is where most of these menus are actually read.
+        onClick: both(() => item?.setOpen(!item.open), onClick), ...props, children: children }));
+};
+exports.NavigationMenuTrigger = NavigationMenuTrigger;
+const NavigationMenuContent = ({ className, children, ...props }) => {
+    const item = useItem();
+    if (item && !item.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, { id: item?.id, className: (0, cn_1.cn)('absolute top-full left-0', className), ...props, children: children }));
+};
+exports.NavigationMenuContent = NavigationMenuContent;
+const NavigationMenuLink = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "a", className: className, ...props }));
+exports.NavigationMenuLink = NavigationMenuLink;

package/dist/backends/gui/navigation-menu.d.ts

@@ -0,0 +1,25 @@
+/**
+ * NavigationMenu — a site menu whose entries can open a panel.
+ *
+ * Each item owns its own open state and opens on hover OR focus, closing on
+ * leave or blur. Focus is not decoration here: a menu that opens only on hover
+ * is a menu a keyboard cannot reach, and the panel behind it is unreachable
+ * content rather than hidden content.
+ *
+ * A caller's own pointer handlers still run — several sites drive a shared
+ * backdrop from the same events — so they are chained, never replaced.
+ */
+import * as React from 'react';
+import { Box, type BoxProps } from '../../box.js';
+export declare const NavigationMenu: ({ className, ...props }: React.ComponentProps<typeof Box>) => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationMenuList: ({ className, ...props }: React.ComponentProps<typeof Box>) => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationMenuItem: ({ className, children, ...props }: React.ComponentProps<typeof Box>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A stable class handle for hosts that hook menu triggers from CSS. Styling
+ * lives in the tokens; this only names the part.
+ */
+export declare const navigationMenuTriggerStyle: () => string;
+export declare const NavigationMenuTrigger: ({ className, children, onFocus, onBlur, onClick, ...props }: BoxProps<'button'>) => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationMenuContent: ({ className, children, ...props }: React.ComponentProps<typeof Box>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const NavigationMenuLink: ({ className, ...props }: BoxProps<'a'>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/backends/gui/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/navigation-menu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAA;AAqB9C,eAAO,MAAM,cAAc,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAOvF,CAAA;AAED,eAAO,MAAM,kBAAkB,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAM3F,CAAA;AAED,eAAO,MAAM,kBAAkB,sCAAuC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAoBrG,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,0BAA0B,cAA2B,CAAA;AAElE,eAAO,MAAM,qBAAqB,gEAO/B,QAAQ,CAAC,QAAQ,CAAC,4CAoBpB,CAAA;AAED,eAAO,MAAM,qBAAqB,sCAAuC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,mDAQxG,CAAA;AAED,eAAO,MAAM,kBAAkB,4BAA6B,QAAQ,CAAC,GAAG,CAAC,4CAExE,CAAA"}

package/dist/backends/gui/navigation-menu.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * NavigationMenu — a site menu whose entries can open a panel.
+ *
+ * Each item owns its own open state and opens on hover OR focus, closing on
+ * leave or blur. Focus is not decoration here: a menu that opens only on hover
+ * is a menu a keyboard cannot reach, and the panel behind it is unreachable
+ * content rather than hidden content.
+ *
+ * A caller's own pointer handlers still run — several sites drive a shared
+ * backdrop from the same events — so they are chained, never replaced.
+ */
+import * as React from 'react';
+import { Box } from '../../box.js';
+import { cn } from '../../core/cn.js';
+const Item = /* @__PURE__ */ React.createContext(null);
+const useItem = () => React.useContext(Item);
+/** Run the caller's handler after ours, never instead of it. */
+const both = (ours, theirs) => (e) => {
+    ours(e);
+    theirs?.(e);
+};
+export const NavigationMenu = ({ className, ...props }) => (_jsx(Box, { tag: "nav", "aria-label": "Main", className: cn('relative grid justify-center', className), ...props }));
+export const NavigationMenuList = ({ className, ...props }) => (_jsx(Box, { tag: "ul", className: cn('grid grid-flow-col auto-cols-max items-center gap-1', className), ...props }));
+export const NavigationMenuItem = ({ className, children, ...props }) => {
+    const [open, setOpen] = React.useState(false);
+    const id = React.useId();
+    return (_jsx(Item.Provider, { value: { open, setOpen, id }, children: _jsx(Box, { tag: "li", className: cn('relative', className), 
+            // On the ITEM, not the trigger: the panel is a child of the item, so
+            // the pointer can travel from the trigger into the panel without ever
+            // leaving the item — which is what stops the menu closing under a
+            // cursor moving towards it.
+            onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), ...props, children: children }) }));
+};
+/**
+ * A stable class handle for hosts that hook menu triggers from CSS. Styling
+ * lives in the tokens; this only names the part.
+ */
+export const navigationMenuTriggerStyle = () => 'nav-menu-trigger';
+export const NavigationMenuTrigger = ({ className, children, onFocus, onBlur, onClick, ...props }) => {
+    const item = useItem();
+    return (_jsx(Box, { tag: "button", type: "button", "aria-haspopup": "true", "aria-expanded": item?.open ?? false, "aria-controls": item?.id, className: cn(navigationMenuTriggerStyle(), 'grid grid-flow-col auto-cols-max items-center gap-1', className), onFocus: both(() => item?.setOpen(true), onFocus), onBlur: both(() => item?.setOpen(false), onBlur), 
+        // Touch has no hover. Without this the panel is unreachable on a phone —
+        // which is where most of these menus are actually read.
+        onClick: both(() => item?.setOpen(!item.open), onClick), ...props, children: children }));
+};
+export const NavigationMenuContent = ({ className, children, ...props }) => {
+    const item = useItem();
+    if (item && !item.open)
+        return null;
+    return (_jsx(Box, { id: item?.id, className: cn('absolute top-full left-0', className), ...props, children: children }));
+};
+export const NavigationMenuLink = ({ className, ...props }) => (_jsx(Box, { tag: "a", className: className, ...props }));
+//# sourceMappingURL=navigation-menu.js.map

package/dist/backends/gui/navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.js","sourceRoot":"","sources":["../../../src/backends/gui/navigation-menu.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/step-indicator.cjs

@@ -0,0 +1,23 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const box_1 = require("../../box.cjs");
+const cn_1 = require("../../core/cn.cjs");
+const StepIndicator = ({ steps, currentStep, dotSizeRem = 1, className, ...props }) => {
+    const dot = `${dotSizeRem}rem`;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": steps.length - 1, "aria-valuenow": currentStep, "aria-valuetext": steps[currentStep], className: (0, cn_1.cn)('grid items-start', className), 
+        // One column per step, each an equal share. A count is data, and data
+        // cannot be a class name.
+        style: { gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))` }, ...props, children: steps.map((name, i) => {
+            const done = i <= currentStep;
+            return ((0, jsx_runtime_1.jsxs)(box_1.Box, { className: "grid justify-items-center gap-1 relative", children: [i < steps.length - 1 && ((0, jsx_runtime_1.jsx)(box_1.Box, { "aria-hidden": "true", className: (0, cn_1.cn)('absolute', i < currentStep ? 'bg-foreground' : 'bg-muted'), style: {
+                            height: 2,
+                            top: `calc(${dot} / 2 - 1px)`,
+                            left: '50%',
+                            right: '-50%',
+                        } })), (0, jsx_runtime_1.jsx)(box_1.Box, { "aria-hidden": "true", className: (0, cn_1.cn)('rounded-full relative', done ? 'bg-foreground' : 'bg-muted'), style: { width: dot, height: dot } }), (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "span", className: done ? 'text-foreground' : 'text-muted-foreground', children: name })] }, name));
+        }) }));
+};
+exports.StepIndicator = StepIndicator;

package/dist/backends/gui/step-indicator.d.ts

@@ -0,0 +1,22 @@
+/**
+ * StepIndicator — how far along a sequence you are.
+ *
+ * A dot per step joined by a rule, the ones behind you filled. It is a
+ * PROGRESSBAR, not a list of buttons: the steps are not reachable from here,
+ * and announcing them as controls invites a keyboard user to try.
+ *
+ * The dot size is a caller's number in rem, because this sits inside a checkout
+ * header whose height the caller owns — and because a dot that scales with the
+ * text is a dot that changes size when someone changes their type size.
+ */
+import * as React from 'react';
+import { Box } from '../../box.js';
+export type StepIndicatorProps = Omit<React.ComponentProps<typeof Box>, 'children'> & {
+    steps: string[];
+    /** Zero-based. Steps before it are done; this one is current. */
+    currentStep: number;
+    /** Diameter, in rem. */
+    dotSizeRem?: number;
+};
+export declare const StepIndicator: ({ steps, currentStep, dotSizeRem, className, ...props }: StepIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=step-indicator.d.ts.map

package/dist/backends/gui/step-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/step-indicator.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAG/B,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAA;IACnB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,aAAa,4DAMvB,kBAAkB,4CA8CpB,CAAA"}

package/dist/backends/gui/step-indicator.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../box.js';
+import { cn } from '../../core/cn.js';
+export const StepIndicator = ({ steps, currentStep, dotSizeRem = 1, className, ...props }) => {
+    const dot = `${dotSizeRem}rem`;
+    return (_jsx(Box, { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": steps.length - 1, "aria-valuenow": currentStep, "aria-valuetext": steps[currentStep], className: cn('grid items-start', className), 
+        // One column per step, each an equal share. A count is data, and data
+        // cannot be a class name.
+        style: { gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))` }, ...props, children: steps.map((name, i) => {
+            const done = i <= currentStep;
+            return (_jsxs(Box, { className: "grid justify-items-center gap-1 relative", children: [i < steps.length - 1 && (_jsx(Box, { "aria-hidden": "true", className: cn('absolute', i < currentStep ? 'bg-foreground' : 'bg-muted'), style: {
+                            height: 2,
+                            top: `calc(${dot} / 2 - 1px)`,
+                            left: '50%',
+                            right: '-50%',
+                        } })), _jsx(Box, { "aria-hidden": "true", className: cn('rounded-full relative', done ? 'bg-foreground' : 'bg-muted'), style: { width: dot, height: dot } }), _jsx(Box, { tag: "span", className: done ? 'text-foreground' : 'text-muted-foreground', children: name })] }, name));
+        }) }));
+};
+//# sourceMappingURL=step-indicator.js.map