@hanzo/ui 8.27.91 → 8.28.0

package/dist/backends/gui/progress-ring.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ProgressRing — a small circular progress, for a row that has no room for a
+ * bar: the context left in a composer, a sync that is 40% through, a metric.
+ *
+ * After twenty-ui's ProgressRing (MIT, NOTICE): 14px (`sm`) or 16px (`md`), a
+ * 2px stroke starting at 12 o'clock, the track on the strong edge rung and the
+ * indicator on the accent (`--primary`, monochrome until an org picks one).
+ * The indicator's dash eases over 300ms with round caps (square at 0%, where a
+ * round cap would draw a dot). `value={null}` shows a quarter and turns once
+ * every 1.5s (`data-motion="orbit"`, still under reduced motion).
+ *
+ * Children are a label drawn to the LEFT of the ring, 8px from it — a value
+ * ("40%") or a name — and also name the progressbar for assistive technology
+ * unless `aria-label` says otherwise.
+ *
+ * A plain <svg>, as Donut and the grid patterns are: the ring is drawn, not
+ * laid out, and gui tokens reach it as the custom properties gui emits.
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+declare const SIZE: {
+    readonly sm: 14;
+    readonly md: 16;
+};
+export type ProgressRingProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
+    /** 0–100, or `null` for indeterminate. */
+    value: number | null;
+    size?: keyof typeof SIZE;
+    /** The indicator's colour, any CSS colour or custom property. */
+    barColor?: string;
+    /** A label drawn left of the ring; names it unless `aria-label` is given. */
+    children?: ReactNode;
+    'aria-label'?: string;
+};
+export declare function ProgressRing({ value, size, barColor, children, 'aria-label': label, ...props }: ProgressRingProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=progress-ring.d.ts.map

package/dist/backends/gui/progress-ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-ring.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/progress-ring.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAe,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlE,QAAA,MAAM,IAAI;aAAK,EAAE,EAAE,EAAE;aAAE,EAAE,EAAE,EAAE;CAAW,CAAA;AAGxC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,0CAA0C;IAC1C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,IAAI,CAAA;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAW,EACX,QAA2B,EAC3B,QAAQ,EACR,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAoDnB"}

package/dist/backends/gui/progress-ring.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ProgressRing — a small circular progress, for a row that has no room for a
+ * bar: the context left in a composer, a sync that is 40% through, a metric.
+ *
+ * After twenty-ui's ProgressRing (MIT, NOTICE): 14px (`sm`) or 16px (`md`), a
+ * 2px stroke starting at 12 o'clock, the track on the strong edge rung and the
+ * indicator on the accent (`--primary`, monochrome until an org picks one).
+ * The indicator's dash eases over 300ms with round caps (square at 0%, where a
+ * round cap would draw a dot). `value={null}` shows a quarter and turns once
+ * every 1.5s (`data-motion="orbit"`, still under reduced motion).
+ *
+ * Children are a label drawn to the LEFT of the ring, 8px from it — a value
+ * ("40%") or a name — and also name the progressbar for assistive technology
+ * unless `aria-label` says otherwise.
+ *
+ * A plain <svg>, as Donut and the grid patterns are: the ring is drawn, not
+ * laid out, and gui tokens reach it as the custom properties gui emits.
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { useId } from 'react';
+import { slot } from './slot.js';
+const SIZE = { sm: 14, md: 16 };
+const STROKE = 2;
+export function ProgressRing({ value, size = 'md', barColor = 'var(--primary)', children, 'aria-label': label, ...props }) {
+    const id = useId();
+    const d = SIZE[size];
+    const r = (d - STROKE) / 2;
+    const circ = 2 * Math.PI * r;
+    const indeterminate = value === null;
+    const v = indeterminate ? 25 : Math.max(0, Math.min(100, value));
+    const offset = circ * (1 - v / 100);
+    return (_jsxs(XStack, { ...slot('progress-ring'), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? undefined : v, "aria-label": label, "aria-labelledby": label || !children ? undefined : `${id}-label`, display: "inline-flex", items: "center", gap: "$2", shrink: 0, ...props, children: [children ? (_jsx(SizableText, { id: `${id}-label`, size: "$1", color: "$ink", numberOfLines: 1, textAlign: "right", children: children })) : null, _jsxs("svg", { width: d, height: d, viewBox: `0 0 ${d} ${d}`, "aria-hidden": true, "data-motion": indeterminate ? 'orbit' : undefined, style: { flexShrink: 0, transform: 'rotate(-90deg)', transformOrigin: 'center' }, children: [_jsx("circle", { cx: d / 2, cy: d / 2, r: r, fill: "none", stroke: "var(--rim)", strokeWidth: STROKE }), _jsx("circle", { cx: d / 2, cy: d / 2, r: r, fill: "none", stroke: barColor, strokeWidth: STROKE, strokeDasharray: circ, strokeDashoffset: offset, strokeLinecap: v > 0 ? 'round' : 'butt', style: { transition: 'stroke-dashoffset 300ms ease' } })] })] }));
+}
+//# sourceMappingURL=progress-ring.js.map

package/dist/backends/gui/progress-ring.js.map

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

package/dist/backends/gui/progress.cjs

@@ -3,14 +3,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Progress = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/** Progress — determinate bar; `value` is 0–100. */
+/**
+ * Progress — a horizontal bar; `value` is 0–100, or `null` for "working, how
+ * far unknown".
+ *
+ * Two shapes. `pill` (the default, unchanged) is a rounded bar on the edge
+ * track. `line` is the record kit's (twenty-ui's ProgressBar, MIT — NOTICE): no
+ * track unless asked, square ends unless `ends="round"`, the ink as the fill, and a
+ * minimum fill of min(12px, 50%) for any value strictly between 0 and 100 — a
+ * job 1% done is visibly started, which a 3px sliver is not. Its width eases
+ * over 300ms.
+ *
+ * `value={null}` on either draws the indeterminate sweep: a quarter-width bar
+ * crossing the track every 1.5s (`data-motion="sweep"`, stopped under reduced
+ * motion). `size` is the thickness, `md` 8 (both shapes' default) or `sm` 6.
+ */
 const gui_1 = require("@hanzo/gui");
 const sx_1 = require("../../sx.cjs");
 const slot_1 = require("./slot.cjs");
-const Progress = ({ value, indicatorClassName, indicatorColor, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Progress, { ...(0, slot_1.slot)('progress'), value: value ?? 0, height: 8, width: "100%", bg: "$edge", rounded: "$10", overflow: "hidden", ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Progress.Indicator, { ...(0, slot_1.slot)('progress-indicator'), 
-        // Same reason as the slider's fill: `$ink` is the foreground rung, and
-        // a type colour stretched across a bar is a lit slab. 6.93:1 over the
-        // track against WCAG 1.4.11's 3:1 — legible with room to spare, and no
-        // longer competing with the text beside it for attention.
-        bg: indicatorColor ?? '$soft', ...(0, sx_1.sx)(indicatorClassName) }) }));
+const HEIGHT = { sm: 6, md: 8 };
+const Progress = ({ value, indicatorClassName, indicatorColor, variant = 'pill', size = 'md', ends = 'square', track = false, ...props }) => {
+    const indeterminate = value === null;
+    const line = variant === 'line';
+    const v = Math.max(0, Math.min(100, value ?? 0));
+    const rounded = ends === 'round';
+    return ((0, jsx_runtime_1.jsx)(gui_1.Progress, { ...(0, slot_1.slot)('progress'), "data-variant": variant, value: indeterminate ? null : v, height: HEIGHT[size], width: "100%", bg: line ? (track ? '$edge' : 'transparent') : '$edge', rounded: line && !rounded ? 0 : '$10', overflow: "hidden", ...props, children: indeterminate ? ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.slot)('progress-indicator'), "data-motion": "sweep", width: "25%", height: "100%", rounded: line && !rounded ? 0 : '$10', bg: indicatorColor ?? (line ? '$ink' : '$soft'), ...(0, sx_1.sx)(indicatorClassName) })) : line ? ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.slot)('progress-indicator'), height: "100%", minW: v > 0 && v < 100 ? 'min(12px, 50%)' : 0, rounded: rounded ? '$10' : 0, bg: indicatorColor ?? '$ink', 
+            // Inline, as Textarea's grown height is: a style prop would mint an
+            // atomic class per value, and no sheet can ship a hundred of them.
+            style: { width: `${v}%`, transition: 'width 300ms linear' }, ...(0, sx_1.sx)(indicatorClassName) })) : ((0, jsx_runtime_1.jsx)(gui_1.Progress.Indicator, { ...(0, slot_1.slot)('progress-indicator'), 
+            // Same reason as the slider's fill: `$ink` is the foreground rung, and
+            // a type colour stretched across a bar is a lit slab. 6.93:1 over the
+            // track against WCAG 1.4.11's 3:1 — legible with room to spare, and no
+            // longer competing with the text beside it for attention.
+            bg: indicatorColor ?? '$soft', ...(0, sx_1.sx)(indicatorClassName) })) }));
+};
 exports.Progress = Progress;

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

@@ -1,7 +1,21 @@
-/** Progress — determinate bar; `value` is 0–100. */
+/**
+ * Progress — a horizontal bar; `value` is 0–100, or `null` for "working, how
+ * far unknown".
+ *
+ * Two shapes. `pill` (the default, unchanged) is a rounded bar on the edge
+ * track. `line` is the record kit's (twenty-ui's ProgressBar, MIT — NOTICE): no
+ * track unless asked, square ends unless `ends="round"`, the ink as the fill, and a
+ * minimum fill of min(12px, 50%) for any value strictly between 0 and 100 — a
+ * job 1% done is visibly started, which a 3px sliver is not. Its width eases
+ * over 300ms.
+ *
+ * `value={null}` on either draws the indeterminate sweep: a quarter-width bar
+ * crossing the track every 1.5s (`data-motion="sweep"`, stopped under reduced
+ * motion). `size` is the thickness, `md` 8 (both shapes' default) or `sm` 6.
+ */
 import { Progress as GuiProgress } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
-export type ProgressProps = ComponentProps<typeof GuiProgress> & {
+export type ProgressProps = Omit<ComponentProps<typeof GuiProgress>, 'size'> & {
     /**
      * Class for the moving bar, not the track. Callers colour the bar by
      * threshold (green/amber/red), which the track's own className cannot express
@@ -11,7 +25,15 @@ export type ProgressProps = ComponentProps<typeof GuiProgress> & {
     indicatorClassName?: string;
     /** The moving bar's colour, a theme token: a status rung where the value is a state. */
     indicatorColor?: ComponentProps<typeof GuiProgress.Indicator>['bg'];
+    /** `pill` (default) or the record kit's `line`. */
+    variant?: 'pill' | 'line';
+    /** Thickness: `md` 8 (default) or `sm` 6. */
+    size?: 'sm' | 'md';
+    /** `line` only: `square` ends (default) or `round`. A name of its own, since `rounded` is gui's corner style. */
+    ends?: 'square' | 'round';
+    /** `line` only: draw the track under the bar. */
+    track?: boolean;
 };
-declare const Progress: ({ value, indicatorClassName, indicatorColor, ...props }: ProgressProps) => import("react").JSX.Element;
+declare const Progress: ({ value, indicatorClassName, indicatorColor, variant, size, ends, track, ...props }: ProgressProps) => import("react").JSX.Element;
 export { Progress };
 //# sourceMappingURL=progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/progress.tsx"],"names":[],"mappings":"AAEA,oDAAoD;AACpD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,YAAY,CAAA;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IAC/D;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wFAAwF;IACxF,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAA;CACpE,CAAA;AAED,QAAA,MAAM,QAAQ,4DAA6D,aAAa,gCAqBvF,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/progress.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAQ,MAAM,YAAY,CAAA;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG;IAC7E;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wFAAwF;IACxF,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAA;IACnE,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,iHAAiH;IACjH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,QAAA,MAAM,QAAQ,wFASX,aAAa,gCAoDf,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/backends/gui/progress.js

@@ -1,14 +1,38 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-/** Progress — determinate bar; `value` is 0–100. */
-import { Progress as GuiProgress } from '@hanzo/gui';
+/**
+ * Progress — a horizontal bar; `value` is 0–100, or `null` for "working, how
+ * far unknown".
+ *
+ * Two shapes. `pill` (the default, unchanged) is a rounded bar on the edge
+ * track. `line` is the record kit's (twenty-ui's ProgressBar, MIT — NOTICE): no
+ * track unless asked, square ends unless `ends="round"`, the ink as the fill, and a
+ * minimum fill of min(12px, 50%) for any value strictly between 0 and 100 — a
+ * job 1% done is visibly started, which a 3px sliver is not. Its width eases
+ * over 300ms.
+ *
+ * `value={null}` on either draws the indeterminate sweep: a quarter-width bar
+ * crossing the track every 1.5s (`data-motion="sweep"`, stopped under reduced
+ * motion). `size` is the thickness, `md` 8 (both shapes' default) or `sm` 6.
+ */
+import { Progress as GuiProgress, View } from '@hanzo/gui';
 import { sx } from '../../sx.js';
 import { slot } from './slot.js';
-const Progress = ({ value, indicatorClassName, indicatorColor, ...props }) => (_jsx(GuiProgress, { ...slot('progress'), value: value ?? 0, height: 8, width: "100%", bg: "$edge", rounded: "$10", overflow: "hidden", ...props, children: _jsx(GuiProgress.Indicator, { ...slot('progress-indicator'), 
-        // Same reason as the slider's fill: `$ink` is the foreground rung, and
-        // a type colour stretched across a bar is a lit slab. 6.93:1 over the
-        // track against WCAG 1.4.11's 3:1 — legible with room to spare, and no
-        // longer competing with the text beside it for attention.
-        bg: indicatorColor ?? '$soft', ...sx(indicatorClassName) }) }));
+const HEIGHT = { sm: 6, md: 8 };
+const Progress = ({ value, indicatorClassName, indicatorColor, variant = 'pill', size = 'md', ends = 'square', track = false, ...props }) => {
+    const indeterminate = value === null;
+    const line = variant === 'line';
+    const v = Math.max(0, Math.min(100, value ?? 0));
+    const rounded = ends === 'round';
+    return (_jsx(GuiProgress, { ...slot('progress'), "data-variant": variant, value: indeterminate ? null : v, height: HEIGHT[size], width: "100%", bg: line ? (track ? '$edge' : 'transparent') : '$edge', rounded: line && !rounded ? 0 : '$10', overflow: "hidden", ...props, children: indeterminate ? (_jsx(View, { ...slot('progress-indicator'), "data-motion": "sweep", width: "25%", height: "100%", rounded: line && !rounded ? 0 : '$10', bg: indicatorColor ?? (line ? '$ink' : '$soft'), ...sx(indicatorClassName) })) : line ? (_jsx(View, { ...slot('progress-indicator'), height: "100%", minW: v > 0 && v < 100 ? 'min(12px, 50%)' : 0, rounded: rounded ? '$10' : 0, bg: indicatorColor ?? '$ink', 
+            // Inline, as Textarea's grown height is: a style prop would mint an
+            // atomic class per value, and no sheet can ship a hundred of them.
+            style: { width: `${v}%`, transition: 'width 300ms linear' }, ...sx(indicatorClassName) })) : (_jsx(GuiProgress.Indicator, { ...slot('progress-indicator'), 
+            // Same reason as the slider's fill: `$ink` is the foreground rung, and
+            // a type colour stretched across a bar is a lit slab. 6.93:1 over the
+            // track against WCAG 1.4.11's 3:1 — legible with room to spare, and no
+            // longer competing with the text beside it for attention.
+            bg: indicatorColor ?? '$soft', ...sx(indicatorClassName) })) }));
+};
 export { Progress };
 //# sourceMappingURL=progress.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/backends/gui/progress.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,oDAAoD;AACpD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,YAAY,CAAA;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAc7B,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CAAC,CAC3F,KAAC,WAAW,OACN,IAAI,CAAC,UAAU,CAAC,EACpB,KAAK,EAAE,KAAK,IAAI,CAAC,EACjB,MAAM,EAAE,CAAC,EACT,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,OAAO,EACV,OAAO,EAAC,KAAK,EACb,QAAQ,EAAC,QAAQ,KACb,KAAK,YAET,KAAC,WAAW,CAAC,SAAS,OAChB,IAAI,CAAC,oBAAoB,CAAC;QAC9B,uEAAuE;QACvE,sEAAsE;QACtE,uEAAuE;QACvE,0DAA0D;QAC1D,EAAE,EAAE,cAAc,IAAI,OAAO,KACzB,EAAE,CAAC,kBAAkB,CAAC,GAC1B,GACU,CACf,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/backends/gui/progress.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/radio-group.cjs

@@ -30,16 +30,43 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * `orientation` for those two and never forwards it, so the frame's own
  * `orientation` variant never runs and the group stays a COLUMN while
  * announcing itself a row. The direction is restored here, from the same prop.
+ *
+ * Two looks. With no `size`, an item is the 16px ring and `$ink` dot it has
+ * always been. Naming `size` (sm 16 | md 18), or a `<Density value="compact">`
+ * around it, draws twenty-ui's radio (MIT, NOTICE): a quiet ring at rest that
+ * FILLS when checked — the monochrome accent (`--primary`, which an org's accent
+ * restates) round a dot in its foreground — a 4px hover halo, and the 32%
+ * register of a disabled option.
  */
 const gui_1 = require("@hanzo/gui");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
+const density_1 = require("./density.cjs");
 /** 16px control, 8px dot — the Checkbox's box, made round. */
 const BOX = 16;
 const DOT = 8;
+/** The record radio per size: the ring with its edge, and the dot inside a checked one. */
+const RECORD = { sm: { ring: 16, dot: 6 }, md: { ring: 18, dot: 8 } };
 const RadioGroup = ({ orientation = 'vertical', ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.RadioGroup, { ...(0, slot_1.slot)('radio-group'), orientation: orientation, flexDirection: orientation === 'horizontal' ? 'row' : 'column', gap: "$2", ...props }));
 exports.RadioGroup = RadioGroup;
-const RadioGroupItem = ({ disabled, children, ...props }) => ((0, jsx_runtime_1.jsxs)(gui_1.RadioGroup.Item, { ...(0, slot_1.slot)('radio-group-item'), width: BOX, height: BOX, flexShrink: 0, borderRadius: 1000, borderWidth: 1, 
+const RadioGroupItem = ({ size, ...props }) => {
+    const compact = (0, density_1.useDensity)() === 'compact';
+    const record = size ?? (compact ? 'sm' : undefined);
+    return record ? (0, jsx_runtime_1.jsx)(RecordItem, { size: record, ...props }) : (0, jsx_runtime_1.jsx)(PlainItem, { ...props });
+};
+exports.RadioGroupItem = RadioGroupItem;
+/**
+ * The record radio. The fill is the INDICATOR, laid over the ring edge to
+ * edge: it mounts only while checked, so presence is the state here too, and
+ * no part of the item has to know which state it is in to be drawn.
+ */
+const RecordItem = ({ size, disabled, children, ...props }) => {
+    const dim = RECORD[size];
+    return ((0, jsx_runtime_1.jsxs)(gui_1.RadioGroup.Item, { ...(0, slot_1.slot)('radio-group-item'), "data-size": size, width: dim.ring, height: dim.ring, flexShrink: 0, padding: 0, borderRadius: 1000, borderWidth: 1, borderColor: "$aside", backgroundColor: "transparent", scale: 0.95, disabled: disabled, opacity: disabled ? 0.32 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(disabled ? null : { hoverStyle: { bg: '$hover', boxShadow: '0 0 0 4px var(--hover)' } }), ...(0, gesture_1.touch)(dim.ring), ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.RadioGroup.Indicator, { ...(0, slot_1.slot)('radio-group-indicator'), position: "absolute", t: -1, l: -1, width: dim.ring, height: dim.ring, borderRadius: 1000, backgroundColor: "var(--primary)", items: "center", justify: "center", 
+                // 1.05 at the item's 0.95, as twenty-ui grows a checked radio.
+                scale: 1.1, children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { width: dim.dot, height: dim.dot, rounded: 1000, bg: "var(--primary-foreground)" }) }), children] }));
+};
+const PlainItem = ({ disabled, children, ...props }) => ((0, jsx_runtime_1.jsxs)(gui_1.RadioGroup.Item, { ...(0, slot_1.slot)('radio-group-item'), width: BOX, height: BOX, flexShrink: 0, borderRadius: 1000, borderWidth: 1, 
     // A CONTROL boundary, not a surface hairline. `$borderColor` is 10% white —
     // right for a card edge sitting on its own fill, and 1.26:1 against the
     // ground, where WCAG 1.4.11 asks 3:1 for the visible boundary of a control.
@@ -50,4 +77,3 @@ const RadioGroupItem = ({ disabled, children, ...props }) => ((0, jsx_runtime_1.
     // pointer events without dimming: a dead control that looks live invites a
     // click that does nothing. Same treatment as Switch.
     disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(BOX), ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.RadioGroup.Indicator, { ...(0, slot_1.slot)('radio-group-indicator'), width: DOT, height: DOT, borderRadius: 1000, backgroundColor: "$ink" }), children] }));
-exports.RadioGroupItem = RadioGroupItem;

package/dist/backends/gui/radio-group.d.ts

@@ -25,12 +25,30 @@
  * `orientation` for those two and never forwards it, so the frame's own
  * `orientation` variant never runs and the group stays a COLUMN while
  * announcing itself a row. The direction is restored here, from the same prop.
+ *
+ * Two looks. With no `size`, an item is the 16px ring and `$ink` dot it has
+ * always been. Naming `size` (sm 16 | md 18), or a `<Density value="compact">`
+ * around it, draws twenty-ui's radio (MIT, NOTICE): a quiet ring at rest that
+ * FILLS when checked — the monochrome accent (`--primary`, which an org's accent
+ * restates) round a dot in its foreground — a 4px hover halo, and the 32%
+ * register of a disabled option.
  */
 import { RadioGroup as GuiRadioGroup } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
+export type RadioSize = 'sm' | 'md';
 export type RadioGroupProps = ComponentProps<typeof GuiRadioGroup>;
-export type RadioGroupItemProps = ComponentProps<typeof GuiRadioGroup.Item>;
+type GuiItemProps = ComponentProps<typeof GuiRadioGroup.Item>;
+/**
+ * gui's item props with its `size` (a gui size token) replaced by the record
+ * size. `Omit` over gui's props loses `value` from the union it is built from,
+ * so `value` is restated — it is the one prop an item cannot do without.
+ */
+export type RadioGroupItemProps = Omit<GuiItemProps, 'size' | 'value'> & {
+    value: string;
+    /** The record radio: `sm` a 16px ring (the default under compact) or `md` 18px. */
+    size?: RadioSize;
+};
 declare const RadioGroup: ({ orientation, ...props }: RadioGroupProps) => import("react").JSX.Element;
-declare const RadioGroupItem: ({ disabled, children, ...props }: RadioGroupItemProps) => import("react").JSX.Element;
+declare const RadioGroupItem: ({ size, ...props }: RadioGroupItemProps) => import("react").JSX.Element;
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/backends/gui/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/radio-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAQ3C,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAA;AAClE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAE3E,QAAA,MAAM,UAAU,8BAA4C,eAAe,gCAQ1E,CAAA;AAED,QAAA,MAAM,cAAc,qCAAsC,mBAAmB,gCAqC5E,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/radio-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,UAAU,IAAI,aAAa,EAAU,MAAM,YAAY,CAAA;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAS3C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAA;AAClE,KAAK,YAAY,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAE7D;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAKD,QAAA,MAAM,UAAU,8BAA4C,eAAe,gCAQ1E,CAAA;AAED,QAAA,MAAM,cAAc,uBAAwB,mBAAmB,gCAI9D,CAAA;AAyFD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}

package/dist/backends/gui/radio-group.js

@@ -27,15 +27,41 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `orientation` for those two and never forwards it, so the frame's own
  * `orientation` variant never runs and the group stays a COLUMN while
  * announcing itself a row. The direction is restored here, from the same prop.
+ *
+ * Two looks. With no `size`, an item is the 16px ring and `$ink` dot it has
+ * always been. Naming `size` (sm 16 | md 18), or a `<Density value="compact">`
+ * around it, draws twenty-ui's radio (MIT, NOTICE): a quiet ring at rest that
+ * FILLS when checked — the monochrome accent (`--primary`, which an org's accent
+ * restates) round a dot in its foreground — a 4px hover halo, and the 32%
+ * register of a disabled option.
  */
-import { RadioGroup as GuiRadioGroup } from '@hanzo/gui';
+import { RadioGroup as GuiRadioGroup, XStack } from '@hanzo/gui';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
+import { useDensity } from './density.js';
 /** 16px control, 8px dot — the Checkbox's box, made round. */
 const BOX = 16;
 const DOT = 8;
+/** The record radio per size: the ring with its edge, and the dot inside a checked one. */
+const RECORD = { sm: { ring: 16, dot: 6 }, md: { ring: 18, dot: 8 } };
 const RadioGroup = ({ orientation = 'vertical', ...props }) => (_jsx(GuiRadioGroup, { ...slot('radio-group'), orientation: orientation, flexDirection: orientation === 'horizontal' ? 'row' : 'column', gap: "$2", ...props }));
-const RadioGroupItem = ({ disabled, children, ...props }) => (_jsxs(GuiRadioGroup.Item, { ...slot('radio-group-item'), width: BOX, height: BOX, flexShrink: 0, borderRadius: 1000, borderWidth: 1, 
+const RadioGroupItem = ({ size, ...props }) => {
+    const compact = useDensity() === 'compact';
+    const record = size ?? (compact ? 'sm' : undefined);
+    return record ? _jsx(RecordItem, { size: record, ...props }) : _jsx(PlainItem, { ...props });
+};
+/**
+ * The record radio. The fill is the INDICATOR, laid over the ring edge to
+ * edge: it mounts only while checked, so presence is the state here too, and
+ * no part of the item has to know which state it is in to be drawn.
+ */
+const RecordItem = ({ size, disabled, children, ...props }) => {
+    const dim = RECORD[size];
+    return (_jsxs(GuiRadioGroup.Item, { ...slot('radio-group-item'), "data-size": size, width: dim.ring, height: dim.ring, flexShrink: 0, padding: 0, borderRadius: 1000, borderWidth: 1, borderColor: "$aside", backgroundColor: "transparent", scale: 0.95, disabled: disabled, opacity: disabled ? 0.32 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(disabled ? null : { hoverStyle: { bg: '$hover', boxShadow: '0 0 0 4px var(--hover)' } }), ...touch(dim.ring), ...props, children: [_jsx(GuiRadioGroup.Indicator, { ...slot('radio-group-indicator'), position: "absolute", t: -1, l: -1, width: dim.ring, height: dim.ring, borderRadius: 1000, backgroundColor: "var(--primary)", items: "center", justify: "center", 
+                // 1.05 at the item's 0.95, as twenty-ui grows a checked radio.
+                scale: 1.1, children: _jsx(XStack, { width: dim.dot, height: dim.dot, rounded: 1000, bg: "var(--primary-foreground)" }) }), children] }));
+};
+const PlainItem = ({ disabled, children, ...props }) => (_jsxs(GuiRadioGroup.Item, { ...slot('radio-group-item'), width: BOX, height: BOX, flexShrink: 0, borderRadius: 1000, borderWidth: 1, 
     // A CONTROL boundary, not a surface hairline. `$borderColor` is 10% white —
     // right for a card edge sitting on its own fill, and 1.26:1 against the
     // ground, where WCAG 1.4.11 asks 3:1 for the visible boundary of a control.

package/dist/backends/gui/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/backends/gui/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,8DAA8D;AAC9D,MAAM,GAAG,GAAG,EAAE,CAAA;AACd,MAAM,GAAG,GAAG,CAAC,CAAA;AAKb,MAAM,UAAU,GAAG,CAAC,EAAE,WAAW,GAAG,UAAU,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE,CAAC,CAC9E,KAAC,aAAa,OACR,IAAI,CAAC,aAAa,CAAC,EACvB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAC9D,GAAG,EAAC,IAAI,KACJ,KAAK,GACT,CACH,CAAA;AAED,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE,CAAC,CAChF,MAAC,aAAa,CAAC,IAAI,OACb,IAAI,CAAC,kBAAkB,CAAC,EAC5B,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,IAAI,EAClB,WAAW,EAAE,CAAC;IACd,4EAA4E;IAC5E,wEAAwE;IACxE,4EAA4E;IAC5E,uEAAuE;IACvE,4EAA4E;IAC5E,WAAW,EAAC,QAAQ,EACpB,eAAe,EAAC,aAAa;IAC7B,uEAAuE;IACvE,2EAA2E;IAC3E,qDAAqD;IACrD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,CAAC,GAAG,CAAC,KACV,KAAK,aAMT,KAAC,aAAa,CAAC,SAAS,OAClB,IAAI,CAAC,uBAAuB,CAAC,EACjC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,YAAY,EAAE,IAAI,EAClB,eAAe,EAAC,MAAM,GACtB,EACD,QAAQ,IACU,CACtB,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/backends/gui/radio-group.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/search-list.cjs

@@ -0,0 +1,62 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Segment = exports.useOpen = void 0;
+exports.SearchList = SearchList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * SearchList — the searchable list the record kit's pickers open: a currency, a
+ * calling code, a country.
+ *
+ * Composition, as `Combobox` is: `Popover` owns the open state and the panel,
+ * `Command` owns the search and the cursor — typed text filters the rows, the
+ * arrows move, Enter picks, Escape closes. A row is matched on its label and on
+ * its keywords, so "usd", "dollar" and "$" all find the US dollar.
+ *
+ * The panel is portalled, and a portal does not carry React context across, so
+ * the density the trigger sits in is read here and given again inside, as
+ * `PortalTheme` does for the theme. Rows are the record row: 32px, 4px corners.
+ * After twenty-ui's searchable picker dropdown (MIT, NOTICE).
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const command_1 = require("./command.cjs");
+const control_1 = require("./control.cjs");
+const density_1 = require("./density.cjs");
+const gesture_1 = require("./gesture.cjs");
+const input_group_1 = require("./input-group.cjs");
+const popover_1 = require("./popover.cjs");
+const press_1 = require("./press.cjs");
+const slot_1 = require("./slot.cjs");
+/** Open state, controlled or not: `open` wins when given, `onOpenChange` hears every change. */
+const useOpen = (open, defaultOpen = false, onOpenChange) => {
+    const [own, setOwn] = (0, react_1.useState)(defaultOpen);
+    const shown = open ?? own;
+    const set = (next) => {
+        if (open === undefined)
+            setOwn(next);
+        onOpenChange?.(next);
+    };
+    return [shown, set];
+};
+exports.useOpen = useOpen;
+/**
+ * The start segment of an `InputGroup`: a picker trigger that is part of the
+ * field rather than a box beside it. Transparent, as tall as the group's inside,
+ * flush with its start edge (it takes back the group's gutter), with a hairline
+ * divider on its end side and the group's start corners. A real `<button>`, so
+ * Enter and Space open it with no key handling of ours; its focus ring is drawn
+ * inside, where the group's edge would otherwise cover it.
+ */
+exports.Segment = (0, react_1.forwardRef)(function Segment({ disabled, open, label, children, ...props }, ref) {
+    const group = (0, react_1.useContext)(input_group_1.GroupContext);
+    const density = (0, density_1.useDensity)();
+    const box = control_1.BOX[group?.size ?? (0, density_1.fieldSize)(undefined, density)];
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: ref, ...(0, slot_1.slot)('field-segment'), render: "button", ...{ type: 'button', disabled, 'aria-expanded': !!open, ...(label ? { 'aria-label': label } : null) }, height: box.h - 2, ml: group ? -box.gutter : 0, shrink: 0, items: "center", gap: "$1", px: "$2", bg: "transparent", borderWidth: 0, borderRightWidth: 1, borderColor: "$borderColor", borderTopLeftRadius: "$3", borderBottomLeftRadius: "$3", cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { ...press_1.RING, outlineOffset: -2 }, ...props, children: children }));
+});
+const ROW = 32;
+function SearchList({ trigger, open, onOpenChange, options, value, onPick, searchLabel = 'Search', emptyLabel = 'No results', width = 240, }) {
+    const density = (0, density_1.useDensity)();
+    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: onOpenChange, placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: trigger }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { "data-slot": "search-list", p: 0, width: width, sideOffset: 8, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(density_1.Density, { value: density, children: (0, jsx_runtime_1.jsxs)(command_1.Command, { value: value ?? undefined, children: [(0, jsx_runtime_1.jsx)(command_1.CommandInput, { placeholder: searchLabel, "aria-label": searchLabel, autoFocus: true }), (0, jsx_runtime_1.jsxs)(command_1.CommandList, { p: "$1", children: [(0, jsx_runtime_1.jsx)(command_1.CommandEmpty, { children: emptyLabel }), options.map((o) => ((0, jsx_runtime_1.jsxs)(command_1.CommandItem, { value: o.value, keywords: [o.label, ...(o.keywords ?? [])], disabled: o.disabled, minH: ROW, px: "$1", rounded: "$xs", ...(0, gesture_1.touch)(ROW, 44, 'y'), onSelect: (picked) => onPick(picked), ...{ 'aria-selected': o.value === value }, children: [o.start ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, items: "center", children: o.start })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, numberOfLines: 1, children: o.label }), o.end != null ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$hint", shrink: 0, children: o.end })) : null, (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, opacity: o.value === value ? 1 : 0, shrink: 0 })] }, o.value)))] })] }) }) })] }));
+}

package/dist/backends/gui/search-list.d.ts

@@ -0,0 +1,65 @@
+/**
+ * SearchList — the searchable list the record kit's pickers open: a currency, a
+ * calling code, a country.
+ *
+ * Composition, as `Combobox` is: `Popover` owns the open state and the panel,
+ * `Command` owns the search and the cursor — typed text filters the rows, the
+ * arrows move, Enter picks, Escape closes. A row is matched on its label and on
+ * its keywords, so "usd", "dollar" and "$" all find the US dollar.
+ *
+ * The panel is portalled, and a portal does not carry React context across, so
+ * the density the trigger sits in is read here and given again inside, as
+ * `PortalTheme` does for the theme. Rows are the record row: 32px, 4px corners.
+ * After twenty-ui's searchable picker dropdown (MIT, NOTICE).
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+/** Open state, controlled or not: `open` wins when given, `onOpenChange` hears every change. */
+export declare const useOpen: (open?: boolean, defaultOpen?: boolean, onOpenChange?: (open: boolean) => void) => readonly [boolean, (next: boolean) => void];
+export type SegmentProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
+    disabled?: boolean;
+    /** Whether the list it opens is open. */
+    open?: boolean;
+    /**
+     * Its name to assistive technology: what it picks and what is picked. Omit it
+     * when the segment's own (visually hidden) text names it.
+     */
+    label?: string;
+    children?: ReactNode;
+};
+/**
+ * The start segment of an `InputGroup`: a picker trigger that is part of the
+ * field rather than a box beside it. Transparent, as tall as the group's inside,
+ * flush with its start edge (it takes back the group's gutter), with a hairline
+ * divider on its end side and the group's start corners. A real `<button>`, so
+ * Enter and Space open it with no key handling of ours; its focus ring is drawn
+ * inside, where the group's edge would otherwise cover it.
+ */
+export declare const Segment: import("react").ForwardRefExoticComponent<Omit<SegmentProps, "ref"> & import("react").RefAttributes<any>>;
+export type SearchOption = {
+    value: string;
+    label: string;
+    /** More text the search matches: a code, a symbol, a calling code. */
+    keywords?: string[];
+    disabled?: boolean;
+    /** Before the label: a flag, an icon. */
+    start?: ReactNode;
+    /** After the label, dimmed: a code, a calling code. */
+    end?: ReactNode;
+};
+export type SearchListProps = {
+    /** The element that opens the list. It receives the press and the ref. */
+    trigger: ReactElement;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    options: SearchOption[];
+    /** The chosen value, marked with a check and highlighted on open. */
+    value?: string | null;
+    onPick: (value: string) => void;
+    searchLabel?: string;
+    emptyLabel?: string;
+    /** The panel's width; 240 by default. */
+    width?: number;
+};
+export declare function SearchList({ trigger, open, onOpenChange, options, value, onPick, searchLabel, emptyLabel, width, }: SearchListProps): import("react").JSX.Element;
+//# sourceMappingURL=search-list.d.ts.map

package/dist/backends/gui/search-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-list.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/search-list.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAe,MAAM,EAAmB,MAAM,YAAY,CAAA;AAEjE,OAAO,EAAoC,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUhH,gGAAgG;AAChG,eAAO,MAAM,OAAO,UAAW,OAAO,wCAAsC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,+BAG9E,OAAO,UAK3B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,2GAoClB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,GAAG,CAAC,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,0EAA0E;IAC1E,OAAO,EAAE,YAAY,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAID,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,KAAK,EACL,MAAM,EACN,WAAsB,EACtB,UAAyB,EACzB,KAAW,GACZ,EAAE,eAAe,+BA8CjB"}

package/dist/backends/gui/search-list.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SearchList — the searchable list the record kit's pickers open: a currency, a
+ * calling code, a country.
+ *
+ * Composition, as `Combobox` is: `Popover` owns the open state and the panel,
+ * `Command` owns the search and the cursor — typed text filters the rows, the
+ * arrows move, Enter picks, Escape closes. A row is matched on its label and on
+ * its keywords, so "usd", "dollar" and "$" all find the US dollar.
+ *
+ * The panel is portalled, and a portal does not carry React context across, so
+ * the density the trigger sits in is read here and given again inside, as
+ * `PortalTheme` does for the theme. Rows are the record row: 32px, 4px corners.
+ * After twenty-ui's searchable picker dropdown (MIT, NOTICE).
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { Check } from '@hanzogui/lucide-icons-2';
+import { forwardRef, useContext, useState } from 'react';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from './command.js';
+import { BOX } from './control.js';
+import { Density, fieldSize, useDensity } from './density.js';
+import { touch } from './gesture.js';
+import { GroupContext } from './input-group.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { RING } from './press.js';
+import { slot } from './slot.js';
+/** Open state, controlled or not: `open` wins when given, `onOpenChange` hears every change. */
+export const useOpen = (open, defaultOpen = false, onOpenChange) => {
+    const [own, setOwn] = useState(defaultOpen);
+    const shown = open ?? own;
+    const set = (next) => {
+        if (open === undefined)
+            setOwn(next);
+        onOpenChange?.(next);
+    };
+    return [shown, set];
+};
+/**
+ * The start segment of an `InputGroup`: a picker trigger that is part of the
+ * field rather than a box beside it. Transparent, as tall as the group's inside,
+ * flush with its start edge (it takes back the group's gutter), with a hairline
+ * divider on its end side and the group's start corners. A real `<button>`, so
+ * Enter and Space open it with no key handling of ours; its focus ring is drawn
+ * inside, where the group's edge would otherwise cover it.
+ */
+export const Segment = /* @__PURE__ */ forwardRef(function Segment({ disabled, open, label, children, ...props }, ref) {
+    const group = useContext(GroupContext);
+    const density = useDensity();
+    const box = BOX[group?.size ?? fieldSize(undefined, density)];
+    return (_jsx(XStack, { ref: ref, ...slot('field-segment'), render: "button", ...{ type: 'button', disabled, 'aria-expanded': !!open, ...(label ? { 'aria-label': label } : null) }, height: box.h - 2, ml: group ? -box.gutter : 0, shrink: 0, items: "center", gap: "$1", px: "$2", bg: "transparent", borderWidth: 0, borderRightWidth: 1, borderColor: "$borderColor", borderTopLeftRadius: "$3", borderBottomLeftRadius: "$3", cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { ...RING, outlineOffset: -2 }, ...props, children: children }));
+});
+const ROW = 32;
+export function SearchList({ trigger, open, onOpenChange, options, value, onPick, searchLabel = 'Search', emptyLabel = 'No results', width = 240, }) {
+    const density = useDensity();
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, placement: "bottom-start", children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { "data-slot": "search-list", p: 0, width: width, sideOffset: 8, overflow: "hidden", children: _jsx(Density, { value: density, children: _jsxs(Command, { value: value ?? undefined, children: [_jsx(CommandInput, { placeholder: searchLabel, "aria-label": searchLabel, autoFocus: true }), _jsxs(CommandList, { p: "$1", children: [_jsx(CommandEmpty, { children: emptyLabel }), options.map((o) => (_jsxs(CommandItem, { value: o.value, keywords: [o.label, ...(o.keywords ?? [])], disabled: o.disabled, minH: ROW, px: "$1", rounded: "$xs", ...touch(ROW, 44, 'y'), onSelect: (picked) => onPick(picked), ...{ 'aria-selected': o.value === value }, children: [o.start ? (_jsx(XStack, { shrink: 0, items: "center", children: o.start })) : null, _jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, numberOfLines: 1, children: o.label }), o.end != null ? (_jsx(SizableText, { size: "$2", color: "$hint", shrink: 0, children: o.end })) : null, _jsx(Check, { size: 16, opacity: o.value === value ? 1 : 0, shrink: 0 })] }, o.value)))] })] }) }) })] }));
+}
+//# sourceMappingURL=search-list.js.map

package/dist/backends/gui/search-list.js.map

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