@hanzo/ui 8.27.91 → 8.28.0

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

@@ -0,0 +1,79 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fit = fit;
+exports.OverflowingList = OverflowingList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * OverflowingList — one line of chips, tags or avatars: as many as fit, a "+N"
+ * for the rest, and every item in a popup.
+ *
+ * A multi-value cell (tags, emails, links, phones, relations, attendees) has a
+ * fixed width and an unbounded list. Wrapping breaks the row height a table
+ * depends on, and clipping hides values without saying so. This measures each
+ * item at its natural width in an invisible copy of the row, fits as many as
+ * the row holds (and no more than `maxInlineCount`), lets the last visible one
+ * shrink, and keeps room for the count. Measurement rides `onLayout`, which gui
+ * gives on web and native alike, so the same list works on both.
+ *
+ * Re-expressed from twenty-ui's OverflowingList (MIT, see NOTICE): a 4px gap, a
+ * 24px-minimum count on the 12px rung, shown on hover, focus or while open by
+ * default; the popup is the package Popover, items wrapping, as wide as the list
+ * and at least 220.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const popover_1 = require("./popover.cjs");
+const press_1 = require("./press.cjs");
+const slot_1 = require("./slot.cjs");
+const GAP = 4;
+const COUNT_MIN = 24;
+const POPUP_MIN = 220;
+/**
+ * How many of `widths` fit in `avail`, keeping room for a count when not all
+ * do. At least one shows (it may shrink); never more than `max`.
+ */
+function fit(widths, avail, max = Infinity, gap = GAP, count = COUNT_MIN) {
+    const n = Math.min(widths.length, max);
+    if (n === 0)
+        return 0;
+    let used = 0;
+    for (let i = 0; i < n; i++) {
+        const next = used + (i > 0 ? gap : 0) + widths[i];
+        const rest = i + 1 < widths.length;
+        if (next + (rest ? gap + count : 0) > avail)
+            return Math.max(1, i);
+        used = next;
+    }
+    return n;
+}
+function OverflowingList({ children, maxInlineCount, showOverflowCount = 'hover', overflowLabel = 'Show all items', open, defaultOpen = false, onOpenChange, popupProps, ...props }) {
+    const items = (0, react_1.useMemo)(() => react_1.Children.toArray(children).filter(react_1.isValidElement), [children]);
+    const [widths, setWidths] = (0, react_1.useState)([]);
+    const [avail, setAvail] = (0, react_1.useState)(null);
+    const [hot, setHot] = (0, react_1.useState)(false);
+    const [own, setOwn] = (0, react_1.useState)(defaultOpen);
+    const shown = open ?? own;
+    const setOpen = (0, react_1.useCallback)((next) => {
+        if (open === undefined)
+            setOwn(next);
+        onOpenChange?.(next);
+    }, [open, onOpenChange]);
+    const measured = avail != null && widths.filter((w) => w != null).length === items.length;
+    const visible = measured ? fit(widths, avail, maxInlineCount) : Math.min(items.length, maxInlineCount ?? items.length);
+    const hidden = items.length - visible;
+    const countShown = hidden > 0 && (showOverflowCount === 'always' || (showOverflowCount === 'hover' && (hot || shown)));
+    const measure = (i) => (e) => {
+        const w = e?.nativeEvent?.layout?.width;
+        if (typeof w !== 'number')
+            return;
+        setWidths((prev) => {
+            if (prev[i] === w)
+                return prev;
+            const next = prev.slice();
+            next[i] = w;
+            return next;
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('overflowing-list'), position: "relative", width: "100%", minW: 0, items: "center", gap: GAP, overflow: "hidden", onLayout: (e) => setAvail(e.nativeEvent.layout.width), onPointerEnter: () => setHot(true), onPointerLeave: () => setHot(false), onFocus: () => setHot(true), onBlur: () => setHot(false), ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { "aria-hidden": true, position: "absolute", t: 0, l: 0, opacity: 0, pointerEvents: "none", gap: GAP, ...{ inert: true }, children: items.map((item, i) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, onLayout: measure(i), children: item }, item.key ?? i))) }), items.slice(0, visible).map((item, i) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(i === visible - 1 ? { shrink: 1, minW: 0 } : { shrink: 0 }), children: item }, item.key ?? i))), hidden > 0 && showOverflowCount !== 'never' ? ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: shown, onOpenChange: setOpen, placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('overflowing-list-count'), ...(0, press_1.press)(() => setOpen(!shown)), "aria-label": `${overflowLabel} (${items.length})`, "aria-expanded": shown, shrink: 0, minW: COUNT_MIN, height: 20, px: "$1", items: "center", justify: "center", rounded: "$xs", cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: press_1.RING, opacity: countShown ? 1 : 0, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$ink", children: `+${hidden}` }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { p: "$2", minW: POPUP_MIN, style: { width: Math.max(POPUP_MIN, Math.round(avail ?? 0)) }, ...popupProps, children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('overflowing-list-popup'), maxH: 320, overflow: "scroll", children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { flexWrap: "wrap", gap: GAP, children: items }) }) })] })) : null] }));
+}

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

@@ -0,0 +1,42 @@
+/**
+ * OverflowingList — one line of chips, tags or avatars: as many as fit, a "+N"
+ * for the rest, and every item in a popup.
+ *
+ * A multi-value cell (tags, emails, links, phones, relations, attendees) has a
+ * fixed width and an unbounded list. Wrapping breaks the row height a table
+ * depends on, and clipping hides values without saying so. This measures each
+ * item at its natural width in an invisible copy of the row, fits as many as
+ * the row holds (and no more than `maxInlineCount`), lets the last visible one
+ * shrink, and keeps room for the count. Measurement rides `onLayout`, which gui
+ * gives on web and native alike, so the same list works on both.
+ *
+ * Re-expressed from twenty-ui's OverflowingList (MIT, see NOTICE): a 4px gap, a
+ * 24px-minimum count on the 12px rung, shown on hover, focus or while open by
+ * default; the popup is the package Popover, items wrapping, as wide as the list
+ * and at least 220.
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+import { PopoverContent } from './popover.js';
+/**
+ * How many of `widths` fit in `avail`, keeping room for a count when not all
+ * do. At least one shows (it may shrink); never more than `max`.
+ */
+export declare function fit(widths: readonly number[], avail: number, max?: number, gap?: number, count?: number): number;
+export type OverflowingListProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
+    /** The whole ordered list, each with a stable key. */
+    children: ReactNode;
+    /** Never more inline than this, however many would fit. */
+    maxInlineCount?: number;
+    /** `hover`: the count shows on hover, focus or while open. `always` / `never` say themselves. */
+    showOverflowCount?: 'hover' | 'always' | 'never';
+    /** The count button's accessible name. */
+    overflowLabel?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Passed to the popup. */
+    popupProps?: Partial<ComponentProps<typeof PopoverContent>>;
+};
+export declare function OverflowingList({ children, maxInlineCount, showOverflowCount, overflowLabel, open, defaultOpen, onOpenChange, popupProps, ...props }: OverflowingListProps): import("react").JSX.Element;
+//# sourceMappingURL=overflowing-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overflowing-list.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/overflowing-list.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAe,MAAM,EAAU,MAAM,YAAY,CAAA;AACxD,OAAO,EAA4D,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACrH,OAAO,EAAW,cAAc,EAAkB,MAAM,WAAW,CAAA;AAQnE;;;GAGG;AACH,wBAAgB,GAAG,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAW,EAAE,GAAG,SAAM,EAAE,KAAK,SAAY,GAAG,MAAM,CAWlH;AAID,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAChD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC,CAAA;CAC5D,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,cAAc,EACd,iBAA2B,EAC3B,aAAgC,EAChC,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,UAAU,EACV,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAwGtB"}

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

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * OverflowingList — one line of chips, tags or avatars: as many as fit, a "+N"
+ * for the rest, and every item in a popup.
+ *
+ * A multi-value cell (tags, emails, links, phones, relations, attendees) has a
+ * fixed width and an unbounded list. Wrapping breaks the row height a table
+ * depends on, and clipping hides values without saying so. This measures each
+ * item at its natural width in an invisible copy of the row, fits as many as
+ * the row holds (and no more than `maxInlineCount`), lets the last visible one
+ * shrink, and keeps room for the count. Measurement rides `onLayout`, which gui
+ * gives on web and native alike, so the same list works on both.
+ *
+ * Re-expressed from twenty-ui's OverflowingList (MIT, see NOTICE): a 4px gap, a
+ * 24px-minimum count on the 12px rung, shown on hover, focus or while open by
+ * default; the popup is the package Popover, items wrapping, as wide as the list
+ * and at least 220.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Children, isValidElement, useCallback, useMemo, useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { press, RING } from './press.js';
+import { slot } from './slot.js';
+const GAP = 4;
+const COUNT_MIN = 24;
+const POPUP_MIN = 220;
+/**
+ * How many of `widths` fit in `avail`, keeping room for a count when not all
+ * do. At least one shows (it may shrink); never more than `max`.
+ */
+export function fit(widths, avail, max = Infinity, gap = GAP, count = COUNT_MIN) {
+    const n = Math.min(widths.length, max);
+    if (n === 0)
+        return 0;
+    let used = 0;
+    for (let i = 0; i < n; i++) {
+        const next = used + (i > 0 ? gap : 0) + widths[i];
+        const rest = i + 1 < widths.length;
+        if (next + (rest ? gap + count : 0) > avail)
+            return Math.max(1, i);
+        used = next;
+    }
+    return n;
+}
+export function OverflowingList({ children, maxInlineCount, showOverflowCount = 'hover', overflowLabel = 'Show all items', open, defaultOpen = false, onOpenChange, popupProps, ...props }) {
+    const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
+    const [widths, setWidths] = useState([]);
+    const [avail, setAvail] = useState(null);
+    const [hot, setHot] = useState(false);
+    const [own, setOwn] = useState(defaultOpen);
+    const shown = open ?? own;
+    const setOpen = useCallback((next) => {
+        if (open === undefined)
+            setOwn(next);
+        onOpenChange?.(next);
+    }, [open, onOpenChange]);
+    const measured = avail != null && widths.filter((w) => w != null).length === items.length;
+    const visible = measured ? fit(widths, avail, maxInlineCount) : Math.min(items.length, maxInlineCount ?? items.length);
+    const hidden = items.length - visible;
+    const countShown = hidden > 0 && (showOverflowCount === 'always' || (showOverflowCount === 'hover' && (hot || shown)));
+    const measure = (i) => (e) => {
+        const w = e?.nativeEvent?.layout?.width;
+        if (typeof w !== 'number')
+            return;
+        setWidths((prev) => {
+            if (prev[i] === w)
+                return prev;
+            const next = prev.slice();
+            next[i] = w;
+            return next;
+        });
+    };
+    return (_jsxs(XStack, { ...slot('overflowing-list'), position: "relative", width: "100%", minW: 0, items: "center", gap: GAP, overflow: "hidden", onLayout: (e) => setAvail(e.nativeEvent.layout.width), onPointerEnter: () => setHot(true), onPointerLeave: () => setHot(false), onFocus: () => setHot(true), onBlur: () => setHot(false), ...props, children: [_jsx(XStack, { "aria-hidden": true, position: "absolute", t: 0, l: 0, opacity: 0, pointerEvents: "none", gap: GAP, ...{ inert: true }, children: items.map((item, i) => (_jsx(XStack, { shrink: 0, onLayout: measure(i), children: item }, item.key ?? i))) }), items.slice(0, visible).map((item, i) => (_jsx(XStack, { ...(i === visible - 1 ? { shrink: 1, minW: 0 } : { shrink: 0 }), children: item }, item.key ?? i))), hidden > 0 && showOverflowCount !== 'never' ? (_jsxs(Popover, { open: shown, onOpenChange: setOpen, placement: "bottom-start", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { ...slot('overflowing-list-count'), ...press(() => setOpen(!shown)), "aria-label": `${overflowLabel} (${items.length})`, "aria-expanded": shown, shrink: 0, minW: COUNT_MIN, height: 20, px: "$1", items: "center", justify: "center", rounded: "$xs", cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: RING, opacity: countShown ? 1 : 0, children: _jsx(SizableText, { size: "$1", color: "$ink", children: `+${hidden}` }) }) }), _jsx(PopoverContent, { p: "$2", minW: POPUP_MIN, style: { width: Math.max(POPUP_MIN, Math.round(avail ?? 0)) }, ...popupProps, children: _jsx(YStack, { ...slot('overflowing-list-popup'), maxH: 320, overflow: "scroll", children: _jsx(XStack, { flexWrap: "wrap", gap: GAP, children: items }) }) })] })) : null] }));
+}
+//# sourceMappingURL=overflowing-list.js.map

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

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

package/dist/backends/gui/phone-country-picker.cjs

@@ -0,0 +1,60 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flag = Flag;
+exports.PhoneCountryPicker = PhoneCountryPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * PhoneCountryPicker — the calling code at the start of a phone field.
+ *
+ *   <InputGroup>
+ *     <PhoneCountryPicker countries={list} value={iso} onValueChange={setIso} />
+ *     <Input value={number} onChangeText={setNumber} inputMode="tel" />
+ *   </InputGroup>
+ *
+ * A segment of the field (`Segment`) showing the country's flag and a chevron;
+ * the list it opens is found by country name, ISO code and calling code, with
+ * or without the "+". The picked country is named in a visually hidden label,
+ * since a flag alone says nothing to a screen reader. Parsing and validating the
+ * number belong to the field layer, not here. Data-free: the caller passes the
+ * countries and their calling codes.
+ *
+ * Flags are regional-indicator text (`flag`), drawn by the platform. Anatomy
+ * after twenty-ui's PhoneCountryPicker (MIT, NOTICE): 8px before the flag and 4
+ * after the chevron, a 16×12 flag with 2px corners, a globe when none.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const flag_1 = require("./flag.cjs");
+const search_list_1 = require("./search-list.cjs");
+/** The 16×12 flag box, 2px corners; a globe when there is no country. */
+function Flag({ iso, override }) {
+    const glyph = override ?? (0, flag_1.flag)(iso);
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 16, height: 12, rounded: "$2xs", overflow: "hidden", items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: glyph == null ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Globe, { size: 14, color: "$hint" })) : typeof glyph === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", lineHeight: 12, children: glyph })) : (glyph) }));
+}
+function PhoneCountryPicker({ countries, value, defaultValue = null, onValueChange, closeOnSelect = true, open, defaultOpen, onOpenChange, disabled = false, label: name = 'Country calling code', searchLabel = 'Search countries', emptyLabel = 'No country found', }) {
+    const [own, setOwn] = (0, react_1.useState)(defaultValue);
+    const iso = value !== undefined ? value : own;
+    const [shown, setShown] = (0, search_list_1.useOpen)(open, defaultOpen, onOpenChange);
+    const picked = countries.find((c) => c.value === iso);
+    const options = countries.map((c) => ({
+        value: c.value,
+        label: c.label,
+        keywords: [c.value, c.callingCode, `+${c.callingCode}`],
+        disabled: c.disabled,
+        start: ((0, jsx_runtime_1.jsx)(gui_1.XStack, { pr: "$1", children: (0, jsx_runtime_1.jsx)(Flag, { iso: c.value, override: c.flag }) })),
+        end: `+${c.callingCode}`,
+    }));
+    return ((0, jsx_runtime_1.jsx)(search_list_1.SearchList, { open: shown && !disabled, onOpenChange: (next) => setShown(disabled ? false : next), options: options, value: iso, searchLabel: searchLabel, emptyLabel: emptyLabel, width: 280, onPick: (next) => {
+            if (value === undefined)
+                setOwn(next);
+            if (next !== iso)
+                onValueChange?.(next);
+            if (closeOnSelect)
+                setShown(false);
+        }, trigger: (0, jsx_runtime_1.jsxs)(search_list_1.Segment, { ...{ 'data-slot': 'phone-country-picker' }, disabled: disabled, open: shown, 
+            // Named by its hidden text, not an aria-label: the flag says nothing to
+            // a screen reader, and the words are the ones a translator sees.
+            gap: "$0.5", pl: "$2", pr: "$1", children: [(0, jsx_runtime_1.jsx)(Flag, { iso: picked?.value, override: picked?.flag }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14, color: "$hint" }), (0, jsx_runtime_1.jsx)(gui_1.VisuallyHidden, { children: picked ? `${name}: ${picked.label} +${picked.callingCode}` : name })] }) }));
+}

package/dist/backends/gui/phone-country-picker.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+export type PhoneCountry = {
+    /** ISO 3166-1 alpha-2, e.g. "FR". */
+    value: string;
+    /** The country's name in the reader's language. */
+    label: string;
+    /** Without the "+", e.g. "33". */
+    callingCode: string;
+    /** Overrides the regional-indicator flag. */
+    flag?: ReactNode;
+    disabled?: boolean;
+};
+export type PhoneCountryPickerProps = {
+    countries: PhoneCountry[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (iso: string | null) => void;
+    closeOnSelect?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** The segment's name to assistive technology, before the picked country. */
+    label?: string;
+    searchLabel?: string;
+    emptyLabel?: string;
+};
+/** The 16×12 flag box, 2px corners; a globe when there is no country. */
+export declare function Flag({ iso, override }: {
+    iso?: string | null;
+    override?: ReactNode;
+}): import("react").JSX.Element;
+export declare function PhoneCountryPicker({ countries, value, defaultValue, onValueChange, closeOnSelect, open, defaultOpen, onOpenChange, disabled, label: name, searchLabel, emptyLabel, }: PhoneCountryPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=phone-country-picker.d.ts.map

package/dist/backends/gui/phone-country-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-country-picker.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/phone-country-picker.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhD,MAAM,MAAM,YAAY,GAAG;IACzB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,YAAY,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,yEAAyE;AACzE,wBAAgB,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAepF;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,aAAoB,EACpB,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAgB,EAChB,KAAK,EAAE,IAA6B,EACpC,WAAgC,EAChC,UAA+B,GAChC,EAAE,uBAAuB,+BAmDzB"}

package/dist/backends/gui/phone-country-picker.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PhoneCountryPicker — the calling code at the start of a phone field.
+ *
+ *   <InputGroup>
+ *     <PhoneCountryPicker countries={list} value={iso} onValueChange={setIso} />
+ *     <Input value={number} onChangeText={setNumber} inputMode="tel" />
+ *   </InputGroup>
+ *
+ * A segment of the field (`Segment`) showing the country's flag and a chevron;
+ * the list it opens is found by country name, ISO code and calling code, with
+ * or without the "+". The picked country is named in a visually hidden label,
+ * since a flag alone says nothing to a screen reader. Parsing and validating the
+ * number belong to the field layer, not here. Data-free: the caller passes the
+ * countries and their calling codes.
+ *
+ * Flags are regional-indicator text (`flag`), drawn by the platform. Anatomy
+ * after twenty-ui's PhoneCountryPicker (MIT, NOTICE): 8px before the flag and 4
+ * after the chevron, a 16×12 flag with 2px corners, a globe when none.
+ */
+import { SizableText, VisuallyHidden, XStack } from '@hanzo/gui';
+import { ChevronDown, Globe } from '@hanzogui/lucide-icons-2';
+import { useState } from 'react';
+import { flag } from './flag.js';
+import { SearchList, Segment, useOpen } from './search-list.js';
+/** The 16×12 flag box, 2px corners; a globe when there is no country. */
+export function Flag({ iso, override }) {
+    const glyph = override ?? flag(iso);
+    return (_jsx(XStack, { width: 16, height: 12, rounded: "$2xs", overflow: "hidden", items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: glyph == null ? (_jsx(Globe, { size: 14, color: "$hint" })) : typeof glyph === 'string' ? (_jsx(SizableText, { size: "$2", lineHeight: 12, children: glyph })) : (glyph) }));
+}
+export function PhoneCountryPicker({ countries, value, defaultValue = null, onValueChange, closeOnSelect = true, open, defaultOpen, onOpenChange, disabled = false, label: name = 'Country calling code', searchLabel = 'Search countries', emptyLabel = 'No country found', }) {
+    const [own, setOwn] = useState(defaultValue);
+    const iso = value !== undefined ? value : own;
+    const [shown, setShown] = useOpen(open, defaultOpen, onOpenChange);
+    const picked = countries.find((c) => c.value === iso);
+    const options = countries.map((c) => ({
+        value: c.value,
+        label: c.label,
+        keywords: [c.value, c.callingCode, `+${c.callingCode}`],
+        disabled: c.disabled,
+        start: (_jsx(XStack, { pr: "$1", children: _jsx(Flag, { iso: c.value, override: c.flag }) })),
+        end: `+${c.callingCode}`,
+    }));
+    return (_jsx(SearchList, { open: shown && !disabled, onOpenChange: (next) => setShown(disabled ? false : next), options: options, value: iso, searchLabel: searchLabel, emptyLabel: emptyLabel, width: 280, onPick: (next) => {
+            if (value === undefined)
+                setOwn(next);
+            if (next !== iso)
+                onValueChange?.(next);
+            if (closeOnSelect)
+                setShown(false);
+        }, trigger: _jsxs(Segment, { ...{ 'data-slot': 'phone-country-picker' }, disabled: disabled, open: shown, 
+            // Named by its hidden text, not an aria-label: the flag says nothing to
+            // a screen reader, and the words are the ones a translator sees.
+            gap: "$0.5", pl: "$2", pr: "$1", children: [_jsx(Flag, { iso: picked?.value, override: picked?.flag }), _jsx(ChevronDown, { size: 14, color: "$hint" }), _jsx(VisuallyHidden, { children: picked ? `${name}: ${picked.label} +${picked.callingCode}` : name })] }) }));
+}
+//# sourceMappingURL=phone-country-picker.js.map

package/dist/backends/gui/phone-country-picker.js.map

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

package/dist/backends/gui/popover.cjs

@@ -14,8 +14,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
  * — while the compound API spells them on Content, as `sideOffset` and `align`.
  * One value, one owner: the root holds them, Content publishes into it.
+ *
+ * `size="sm"` is the record panel (twenty-ui's Popover, MIT, NOTICE): an 8px
+ * inset, sized to its content up to the room there is, 8px clear of its anchor.
+ * A `<Density value="compact">` makes it the default for a panel that names no
+ * size. The default stays the 16px-inset, 288-wide panel every surface has. The
+ * fill stays Hanzo's near-opaque panel — not twenty-ui's translucent glass.
+ * `arrow` adds a 12×6 pointer in the panel's own fill and edge.
  */
 const gui_1 = require("@hanzo/gui");
+const density_1 = require("./density.cjs");
 const react_1 = require("react");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
 const place_1 = require("./place.cjs");
@@ -26,7 +34,9 @@ const Publish = /* @__PURE__ */ (0, react_1.createContext)(null);
 /** Whether the panel this one opened from is solid. A list opened inside a solid
  *  panel stands on the same ground, so the pair reads as one surface. */
 const Solid = /* @__PURE__ */ (0, react_1.createContext)(false);
-function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
+function Popover({ offset, placement, ...props }) {
+    const density = (0, density_1.useDensity)();
+    offset ??= density === 'compact' ? 8 : DEFAULT_OFFSET;
     const [placed, setPlaced] = (0, react_1.useState)({});
     const publish = (0, react_1.useCallback)((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
     return ((0, jsx_runtime_1.jsx)(Publish.Provider, { value: publish, children: (0, jsx_runtime_1.jsx)(gui_1.Popover, { offset: placed.offset ?? offset, placement: (0, place_1.place)(placement ?? DEFAULT_SIDE, placed.align), ...props }) }));
@@ -37,12 +47,18 @@ const PopoverAnchor = gui_1.Popover.Anchor;
 exports.PopoverAnchor = PopoverAnchor;
 const PopoverClose = gui_1.Popover.Close;
 exports.PopoverClose = PopoverClose;
-const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, solid, ...props }) => {
+const PopoverContent = ({ sideOffset, align, solid, size, arrow = false, children, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
+    const density = (0, density_1.useDensity)();
     const publish = (0, react_1.useContext)(Publish);
     const inherited = (0, react_1.useContext)(Solid);
     const opaque = solid ?? inherited;
-    (0, react_1.useEffect)(() => publish?.({ offset: sideOffset, align }), [publish, sideOffset, align]);
-    return ((0, jsx_runtime_1.jsx)(Solid.Provider, { value: opaque, children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { ...(0, slot_1.slot)('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), bg: opaque ? 'var(--popover)' : '$panel', borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }) }));
+    const small = (size ?? (density === 'compact' ? 'sm' : 'default')) === 'sm';
+    const offset = sideOffset ?? (density === 'compact' ? 8 : DEFAULT_OFFSET);
+    (0, react_1.useEffect)(() => publish?.({ offset, align }), [publish, offset, align]);
+    const ground = opaque ? 'var(--popover)' : '$panel';
+    return ((0, jsx_runtime_1.jsx)(Solid.Provider, { value: opaque, children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(density_1.Density, { value: density, children: (0, jsx_runtime_1.jsxs)(gui_1.Popover.Content, { ...(0, slot_1.slot)('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), ...(small ? { 'data-size': 'sm' } : null), bg: ground, borderWidth: 1, borderColor: "$borderColor", rounded: "$4", ...(small
+                        ? { p: '$2', gap: '$1', maxW: 'var(--hanzogui-popper-available-width, 100vw)' }
+                        : { p: '$4', width: 288 }), ...props, children: [arrow ? (0, jsx_runtime_1.jsx)(gui_1.Popover.Arrow, { ...(0, slot_1.slot)('popover-arrow'), size: 8.5, bg: ground, borderWidth: 1, borderColor: "$borderColor" }) : null, children] }) }) }) }));
 };
 exports.PopoverContent = PopoverContent;

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

@@ -8,6 +8,13 @@
  * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
  * — while the compound API spells them on Content, as `sideOffset` and `align`.
  * One value, one owner: the root holds them, Content publishes into it.
+ *
+ * `size="sm"` is the record panel (twenty-ui's Popover, MIT, NOTICE): an 8px
+ * inset, sized to its content up to the room there is, 8px clear of its anchor.
+ * A `<Density value="compact">` makes it the default for a panel that names no
+ * size. The default stays the 16px-inset, 288-wide panel every surface has. The
+ * fill stays Hanzo's near-opaque panel — not twenty-ui's translucent glass.
+ * `arrow` adds a 12×6 pointer in the panel's own fill and edge.
  */
 import { Popover as GuiPopover } from '@hanzo/gui';
 import { type ComponentProps } from 'react';
@@ -30,7 +37,11 @@ export type PopoverContentProps = ComponentProps<typeof GuiPopover.Content> & {
      * lit edge, and any popover opened from inside it is solid too.
      */
     solid?: boolean;
+    /** `sm`: an 8px inset, content-sized up to the room there is. Unset, the nearest `<Density>` decides. */
+    size?: 'default' | 'sm';
+    /** A 12×6 pointer toward the anchor, in the panel's fill (gui's arrow is a turned square: 8.5 across is 12 wide, 6 out). */
+    arrow?: boolean;
 };
-declare const PopoverContent: ({ sideOffset, align, solid, ...props }: PopoverContentProps) => import("react").JSX.Element;
+declare const PopoverContent: ({ sideOffset, align, solid, size, arrow, children, ...props }: PopoverContentProps) => import("react").JSX.Element;
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
 //# sourceMappingURL=popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAEd,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAM3C,YAAY,EAAE,KAAK,EAAE,CAAA;AAWrB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElG,iBAAS,OAAO,CAAC,EAAE,MAAuB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAY9E;AAED,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,aAAa,EAAE,OAAO,UAAU,CAAC,MAA0B,CAAA;AACjE,QAAA,MAAM,YAAY,EAAE,OAAO,UAAU,CAAC,KAAwB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,cAAc,2CAA6D,mBAAmB,gCAuBnG,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAEd,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAM3C,YAAY,EAAE,KAAK,EAAE,CAAA;AAWrB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElG,iBAAS,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAc7D;AAED,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,aAAa,EAAE,OAAO,UAAU,CAAC,MAA0B,CAAA;AACjE,QAAA,MAAM,YAAY,EAAE,OAAO,UAAU,CAAC,KAAwB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,yGAAyG;IACzG,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,cAAc,kEAA2E,mBAAmB,gCAkCjH,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

package/dist/backends/gui/popover.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Popover — floating panel anchored to a trigger.
  *
@@ -10,8 +10,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
  * — while the compound API spells them on Content, as `sideOffset` and `align`.
  * One value, one owner: the root holds them, Content publishes into it.
+ *
+ * `size="sm"` is the record panel (twenty-ui's Popover, MIT, NOTICE): an 8px
+ * inset, sized to its content up to the room there is, 8px clear of its anchor.
+ * A `<Density value="compact">` makes it the default for a panel that names no
+ * size. The default stays the 16px-inset, 288-wide panel every surface has. The
+ * fill stays Hanzo's near-opaque panel — not twenty-ui's translucent glass.
+ * `arrow` adds a 12×6 pointer in the panel's own fill and edge.
  */
 import { Popover as GuiPopover } from '@hanzo/gui';
+import { Density, useDensity } from './density.js';
 import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
 import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
 import { place } from './place.js';
@@ -22,7 +30,9 @@ const Publish = /* @__PURE__ */ createContext(null);
 /** Whether the panel this one opened from is solid. A list opened inside a solid
  *  panel stands on the same ground, so the pair reads as one surface. */
 const Solid = /* @__PURE__ */ createContext(false);
-function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
+function Popover({ offset, placement, ...props }) {
+    const density = useDensity();
+    offset ??= density === 'compact' ? 8 : DEFAULT_OFFSET;
     const [placed, setPlaced] = useState({});
     const publish = useCallback((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
     return (_jsx(Publish.Provider, { value: publish, children: _jsx(GuiPopover, { offset: placed.offset ?? offset, placement: place(placement ?? DEFAULT_SIDE, placed.align), ...props }) }));
@@ -30,13 +40,19 @@ function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
 const PopoverTrigger = GuiPopover.Trigger;
 const PopoverAnchor = GuiPopover.Anchor;
 const PopoverClose = GuiPopover.Close;
-const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, solid, ...props }) => {
+const PopoverContent = ({ sideOffset, align, solid, size, arrow = false, children, ...props }) => {
     const themeName = useThemeName();
+    const density = useDensity();
     const publish = useContext(Publish);
     const inherited = useContext(Solid);
     const opaque = solid ?? inherited;
-    useEffect(() => publish?.({ offset: sideOffset, align }), [publish, sideOffset, align]);
-    return (_jsx(Solid.Provider, { value: opaque, children: _jsx(PortalTheme, { name: themeName, children: _jsx(GuiPopover.Content, { ...slot('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), bg: opaque ? 'var(--popover)' : '$panel', borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }) }));
+    const small = (size ?? (density === 'compact' ? 'sm' : 'default')) === 'sm';
+    const offset = sideOffset ?? (density === 'compact' ? 8 : DEFAULT_OFFSET);
+    useEffect(() => publish?.({ offset, align }), [publish, offset, align]);
+    const ground = opaque ? 'var(--popover)' : '$panel';
+    return (_jsx(Solid.Provider, { value: opaque, children: _jsx(PortalTheme, { name: themeName, children: _jsx(Density, { value: density, children: _jsxs(GuiPopover.Content, { ...slot('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), ...(small ? { 'data-size': 'sm' } : null), bg: ground, borderWidth: 1, borderColor: "$borderColor", rounded: "$4", ...(small
+                        ? { p: '$2', gap: '$1', maxW: 'var(--hanzogui-popper-available-width, 100vw)' }
+                        : { p: '$4', width: 288 }), ...props, children: [arrow ? _jsx(GuiPopover.Arrow, { ...slot('popover-arrow'), size: 8.5, bg: ground, borderWidth: 1, borderColor: "$borderColor" }) : null, children] }) }) }) }));
 };
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
 //# sourceMappingURL=popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAC/C,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,GAET,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,cAAc,GAAG,CAAC,CAAA;AACxB,MAAM,YAAY,GAAG,QAAQ,CAAA;AAO7B,MAAM,OAAO,GAAG,eAAe,CAAC,aAAa,CAA+B,IAAI,CAAC,CAAA;AAEjF;yEACyE;AACzE,MAAM,KAAK,GAAG,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAIlD,SAAS,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB;IAC5D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,KAAK,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAA;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACxF,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAC9B,KAAC,UAAU,IACT,MAAM,EAAE,MAAM,CAAC,MAAM,IAAI,MAAM,EAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,YAAY,EAAE,MAAM,CAAC,KAAK,CAAqB,KACzE,KAAK,GACT,GACe,CACpB,CAAA;AACH,CAAC;AAED,MAAM,cAAc,GAA8B,UAAU,CAAC,OAAO,CAAA;AACpE,MAAM,aAAa,GAA6B,UAAU,CAAC,MAAM,CAAA;AACjE,MAAM,YAAY,GAA4B,UAAU,CAAC,KAAK,CAAA;AAkB9D,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE;IACpH,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACnC,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IACnC,MAAM,MAAM,GAAG,KAAK,IAAI,SAAS,CAAA;IACjC,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,IAAI,CAAA;IAC3E,MAAM,MAAM,GAAG,UAAU,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;IACzE,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAA;IACnD,OAAO,CACL,KAAC,KAAK,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAC3B,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,YAC1B,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,YACrB,MAAC,UAAU,CAAC,OAAO,OACb,IAAI,CAAC,iBAAiB,CAAC,KACvB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAC9C,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAC1C,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,IAAI,KACR,CAAC,KAAK;wBACR,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,+CAAwD,EAAE;wBACxF,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,KACxB,KAAK,aAER,KAAK,CAAC,CAAC,CAAC,KAAC,UAAU,CAAC,KAAK,OAAK,IAAI,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAC,cAAc,GAAG,CAAC,CAAC,CAAC,IAAI,EAChI,QAAQ,IACU,GACb,GACE,GACC,CAClB,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

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

@@ -0,0 +1,38 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressRing = ProgressRing;
+const jsx_runtime_1 = require("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.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const slot_1 = require("./slot.cjs");
+const SIZE = { sm: 14, md: 16 };
+const STROKE = 2;
+function ProgressRing({ value, size = 'md', barColor = 'var(--primary)', children, 'aria-label': label, ...props }) {
+    const id = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.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 ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-label`, size: "$1", color: "$ink", numberOfLines: 1, textAlign: "right", children: children })) : null, (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("circle", { cx: d / 2, cy: d / 2, r: r, fill: "none", stroke: "var(--rim)", strokeWidth: STROKE }), (0, jsx_runtime_1.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' } })] })] }));
+}