@hanzo/ui 8.27.91 → 8.29.0

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

@@ -4,18 +4,37 @@
  * gui keeps the offset on the tooltip ROOT while the compound API spells it on
  * Content, as `sideOffset`. One value, one owner: the root holds it, Content
  * publishes into it — the same split `popover` resolves, for the same reason.
+ *
+ * The panel FOLLOWS THE THEME — a dark hint on a dark page, a light one on a
+ * light page (Hanzo's decision; twenty-ui's is a dark slab in both). It did not
+ * before, measured: gui's Tooltip frame carries a `t_Tooltip` sub-theme that
+ * inverts the ground, so on the dark page the hint was a light-grey slab
+ * (`--background` 85% lightness under glass) with near-black text, and on the
+ * light page a dark one. Naming the frame's component `Hint`, which no theme
+ * table carries, leaves it in the theme it was opened from. It takes twenty-ui's
+ * geometry (MIT, NOTICE): 4×6 padding, 12px text on
+ * a 16px line, 10px clear of its anchor, at most 300 wide, opening after 600ms.
+ * A title may lead with a 14px icon and carry a quieter description under it,
+ * line breaks kept.
  */
 import { Tooltip as GuiTooltip, TooltipGroup } from '@hanzo/gui';
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 export type TooltipProps = Omit<ComponentProps<typeof GuiTooltip>, 'offset'> & {
     offset?: number;
 };
 export type TooltipContentProps = ComponentProps<typeof GuiTooltip.Content> & {
     sideOffset?: number;
+    /** A 14px icon before the title. */
+    startIcon?: ReactNode;
+    /** A quieter line under the title, line breaks kept. */
+    description?: ReactNode;
 };
-declare const Tooltip: ({ offset, ...props }: TooltipProps) => import("react").JSX.Element;
+declare const Tooltip: ({ offset, delay, ...props }: TooltipProps) => import("react").JSX.Element;
 declare const TooltipTrigger: typeof GuiTooltip.Trigger;
-declare const TooltipProvider: typeof TooltipGroup;
-declare const TooltipContent: ({ sideOffset, children, ...props }: TooltipContentProps) => import("react").JSX.Element;
+/** gui's `TooltipGroup`: the tooltips in it share one delay, 600ms unless told otherwise. */
+declare const TooltipProvider: ({ delay, ...props }: Omit<ComponentProps<typeof TooltipGroup>, 'delay'> & {
+    delay?: ComponentProps<typeof TooltipGroup>['delay'];
+}) => import("react").JSX.Element;
+declare const TooltipContent: ({ sideOffset, startIcon, description, children, ...props }: TooltipContentProps) => import("react").JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 //# sourceMappingURL=tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tooltip.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAYd,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAClG,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErG,QAAA,MAAM,OAAO,yBAA2C,YAAY,gCAQnE,CAAA;AACD,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,eAAe,EAAE,OAAO,YAA2B,CAAA;AAEzD,QAAA,MAAM,cAAc,uCAAwC,mBAAmB,gCAwB9E,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tooltip.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAQ,OAAO,IAAI,UAAU,EAAE,YAAY,EAAkB,MAAM,YAAY,CAAA;AACtF,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAed,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAClG,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAA;CACxB,CAAA;AASD,QAAA,MAAM,OAAO,gCAAkD,YAAY,gCAS1E,CAAA;AACD,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AAEpE,6FAA6F;AAC7F,QAAA,MAAM,eAAe,wBAAyC,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,OAAO,CAAC,CAAA;CAAE,gCAI1K,CAAA;AAED,QAAA,MAAM,cAAc,+DAAgE,mBAAmB,gCA4CtG,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/backends/gui/tooltip.js

@@ -1,27 +1,50 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Tooltip — hover/focus hint. `TooltipProvider` is gui's `TooltipGroup`.
  *
  * gui keeps the offset on the tooltip ROOT while the compound API spells it on
  * Content, as `sideOffset`. One value, one owner: the root holds it, Content
  * publishes into it — the same split `popover` resolves, for the same reason.
+ *
+ * The panel FOLLOWS THE THEME — a dark hint on a dark page, a light one on a
+ * light page (Hanzo's decision; twenty-ui's is a dark slab in both). It did not
+ * before, measured: gui's Tooltip frame carries a `t_Tooltip` sub-theme that
+ * inverts the ground, so on the dark page the hint was a light-grey slab
+ * (`--background` 85% lightness under glass) with near-black text, and on the
+ * light page a dark one. Naming the frame's component `Hint`, which no theme
+ * table carries, leaves it in the theme it was opened from. It takes twenty-ui's
+ * geometry (MIT, NOTICE): 4×6 padding, 12px text on
+ * a 16px line, 10px clear of its anchor, at most 300 wide, opening after 600ms.
+ * A title may lead with a 14px icon and carry a quieter description under it,
+ * line breaks kept.
  */
-import { Tooltip as GuiTooltip, TooltipGroup } from '@hanzo/gui';
+import { Text, Tooltip as GuiTooltip, TooltipGroup, XStack, YStack } from '@hanzo/gui';
 import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
 import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
 import { ink } from './ink.js';
 import { slot } from './slot.js';
-const DEFAULT_OFFSET = 4;
+const DEFAULT_OFFSET = 10;
+/** How long a pointer rests before the hint opens, ms. */
+const DEFAULT_DELAY = 600;
+const MAX_W = 300;
 const Publish = /* @__PURE__ */ createContext(null);
-const Tooltip = ({ offset = DEFAULT_OFFSET, ...props }) => {
+/**
+ * Whether a tooltip sits in a `TooltipProvider`. gui lets a tooltip's own
+ * `delay` override its group's, so a tooltip in a group must leave the delay
+ * unsaid for the group's to hold; one standing alone takes the 600ms default.
+ */
+const Grouped = /* @__PURE__ */ createContext(false);
+const Tooltip = ({ offset = DEFAULT_OFFSET, delay, ...props }) => {
     const [placed, setPlaced] = useState({});
     const publish = useCallback((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
-    return (_jsx(Publish.Provider, { value: publish, children: _jsx(GuiTooltip, { offset: placed.offset ?? offset, ...props }) }));
+    const grouped = useContext(Grouped);
+    return (_jsx(Publish.Provider, { value: publish, children: _jsx(GuiTooltip, { offset: placed.offset ?? offset, delay: delay ?? (grouped ? undefined : DEFAULT_DELAY), ...props }) }));
 };
 const TooltipTrigger = GuiTooltip.Trigger;
-const TooltipProvider = TooltipGroup;
-const TooltipContent = ({ sideOffset, children, ...props }) => {
+/** gui's `TooltipGroup`: the tooltips in it share one delay, 600ms unless told otherwise. */
+const TooltipProvider = ({ delay = DEFAULT_DELAY, ...props }) => (_jsx(Grouped.Provider, { value: true, children: _jsx(TooltipGroup, { delay: delay, ...props }) }));
+const TooltipContent = ({ sideOffset, startIcon, description, children, ...props }) => {
     const themeName = useThemeName();
     const publish = useContext(Publish);
     // Only a Content that names an offset has anything to say about it; an absent
@@ -30,7 +53,7 @@ const TooltipContent = ({ sideOffset, children, ...props }) => {
         if (sideOffset !== undefined)
             publish?.({ offset: sideOffset });
     }, [publish, sideOffset]);
-    return (_jsx(PortalTheme, { name: themeName, children: _jsx(GuiTooltip.Content, { ...slot('tooltip-content'), bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", px: "$3", py: "$1.5", ...props, children: ink(children, undefined, { size: '$1' }) }) }));
+    return (_jsx(PortalTheme, { name: themeName, children: _jsx(GuiTooltip.Content, { ...slot('tooltip-content'), componentName: "Hint", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", px: "$1.5", py: "$1", maxW: MAX_W, ...props, children: startIcon || description ? (_jsxs(YStack, { gap: "$0.5", children: [_jsxs(XStack, { items: "center", gap: "$1", children: [startIcon ? _jsx(XStack, { shrink: 0, children: startIcon }) : null, ink(children, undefined, { size: '$1', fontWeight: '500' })] }), description ? (typeof description === 'string' ? (_jsx(Text, { ...slot('tooltip-description'), fontSize: "$1", lineHeight: "$1", color: "$aside", style: { whiteSpace: 'pre-line' }, children: description })) : (description)) : null] })) : (ink(children, undefined, { size: '$1' })) }) }));
 };
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 //# sourceMappingURL=tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/backends/gui/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChE,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,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,cAAc,GAAG,CAAC,CAAA;AAKxB,MAAM,OAAO,GAAG,eAAe,CAAC,aAAa,CAA+B,IAAI,CAAC,CAAA;AAKjF,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,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,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,IAAI,MAAM,KAAM,KAAK,GAAI,GACzC,CACpB,CAAA;AACH,CAAC,CAAA;AACD,MAAM,cAAc,GAA8B,UAAU,CAAC,OAAO,CAAA;AACpE,MAAM,eAAe,GAAwB,YAAY,CAAA;AAEzD,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE;IACjF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACnC,8EAA8E;IAC9E,mDAAmD;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,SAAS;YAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAA;IACjE,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAA;IACzB,OAAO,CACL,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,YAC1B,KAAC,UAAU,CAAC,OAAO,OACb,IAAI,CAAC,iBAAiB,CAAC,EAC3B,EAAE,EAAC,QAAQ,EACX,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,IAAI,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,MAAM,KACL,KAAK,YAER,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GACtB,GACT,CACf,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/backends/gui/tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/truncated-text.cjs

@@ -0,0 +1,102 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.overflows = void 0;
+exports.TruncatedTextProvider = TruncatedTextProvider;
+exports.TruncatedText = TruncatedText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * TruncatedText — one line with an ellipsis, or N lines clamped, that shows the
+ * whole text in a tooltip only when it was actually cut.
+ *
+ * Every cell, chip label, navigation item and view name in a record surface is
+ * one of these, so the tooltip has to cost nothing when it is not needed: it
+ * measures (scroll size past client size) when the pointer enters or focus
+ * arrives, and the tooltip opens only if that measurement found an overflow. A
+ * text that fits never shows one. `TruncatedTextProvider` lets a host change the
+ * rule for a subtree — a table turns it `disabled` while it scrolls or edits, so
+ * a thousand cells carry no listeners at all.
+ *
+ * Re-expressed from twenty-ui's OverflowingTextWithTooltip and its mode provider
+ * (MIT, see NOTICE): 500ms delay, bottom placement, a 300px cap on the hint,
+ * focusable on request, `alwaysShowTooltip` for a hint that is wanted anyway.
+ * The tooltip is this package's own `Tooltip`; its look is the Tooltip's.
+ *
+ * Anchored, not triggered: a tooltip trigger stamps `aria-expanded` on its
+ * child, which a run of text may not carry (axe, aria-allowed-attr), and the
+ * hint discloses nothing — it repeats the text. So the text is the tooltip's
+ * ANCHOR and this component opens it itself, after the delay, on hover or focus.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const tooltip_1 = require("./tooltip.cjs");
+const slot_1 = require("./slot.cjs");
+const ModeContext = /* @__PURE__ */ (0, react_1.createContext)('measure-on-hover');
+function TruncatedTextProvider({ mode, children }) {
+    return (0, jsx_runtime_1.jsx)(ModeContext.Provider, { value: mode, children: children });
+}
+/** Whether a rendered node holds more than it shows. False off the web, where there is no node to ask. */
+const overflows = (node) => {
+    const el = node;
+    if (!el || typeof el.scrollWidth !== 'number')
+        return false;
+    return el.scrollWidth > (el.clientWidth ?? 0) || (el.scrollHeight ?? 0) > (el.clientHeight ?? 0);
+};
+exports.overflows = overflows;
+const DELAY = 500;
+const MAX_W = 300;
+function TruncatedText({ text, lineClamp, tooltipContent, tooltipDelay = DELAY, tooltipPlace = 'bottom', isTooltipMultiline = false, alwaysShowTooltip = false, isFocusable = false, ...props }) {
+    const mode = (0, react_1.useContext)(ModeContext);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [cut, setCut] = (0, react_1.useState)(false);
+    const node = (0, react_1.useRef)(null);
+    const timer = (0, react_1.useRef)(null);
+    const held = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    const lines = lineClamp && Number.isInteger(lineClamp) && lineClamp > 0 ? lineClamp : 1;
+    const host = (extra) => ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('truncated-text'), numberOfLines: lines, maxW: "100%", minW: 0, ...(lines > 1 ? { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } } : null), ...props, ...extra, children: text }));
+    if (mode === 'disabled' && !alwaysShowTooltip)
+        return host({});
+    const measure = (target) => {
+        node.current = target;
+        const over = (0, exports.overflows)(target);
+        setCut(over);
+        return over;
+    };
+    /** Arm the hint: measured now (hover mode) or when it opens (open mode), shown after the delay. */
+    const arm = (target, wait) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        const now = mode === 'measure-on-hover' ? measure(target) : ((node.current = target), false);
+        timer.current = setTimeout(() => {
+            const over = mode === 'measure-on-open' ? measure(node.current) : now;
+            if (alwaysShowTooltip || over)
+                setOpen(true);
+        }, wait);
+    };
+    const disarm = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = null;
+        if (!held.current)
+            setOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { open: open, onOpenChange: (next) => !next && setOpen(false), placement: tooltipPlace, children: [(0, jsx_runtime_1.jsx)(gui_1.Tooltip.Anchor, { asChild: true, children: host({
+                    onPointerEnter: (e) => arm(e?.currentTarget, tooltipDelay),
+                    onPointerLeave: disarm,
+                    // Focus opens at once; the hint stays while the text holds focus.
+                    onFocus: (e) => {
+                        held.current = true;
+                        arm(e?.currentTarget, 0);
+                    },
+                    onBlur: () => {
+                        held.current = false;
+                        disarm();
+                    },
+                    ...(isFocusable ? { tabIndex: 0, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' } } : null),
+                    ...(cut ? { cursor: 'pointer' } : null),
+                }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { maxW: MAX_W, children: isTooltipMultiline && typeof (tooltipContent ?? text) === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", style: { whiteSpace: 'pre-wrap' }, children: tooltipContent ?? text })) : ((tooltipContent ?? text)) })] }));
+}

package/dist/backends/gui/truncated-text.d.ts

@@ -0,0 +1,55 @@
+/**
+ * TruncatedText — one line with an ellipsis, or N lines clamped, that shows the
+ * whole text in a tooltip only when it was actually cut.
+ *
+ * Every cell, chip label, navigation item and view name in a record surface is
+ * one of these, so the tooltip has to cost nothing when it is not needed: it
+ * measures (scroll size past client size) when the pointer enters or focus
+ * arrives, and the tooltip opens only if that measurement found an overflow. A
+ * text that fits never shows one. `TruncatedTextProvider` lets a host change the
+ * rule for a subtree — a table turns it `disabled` while it scrolls or edits, so
+ * a thousand cells carry no listeners at all.
+ *
+ * Re-expressed from twenty-ui's OverflowingTextWithTooltip and its mode provider
+ * (MIT, see NOTICE): 500ms delay, bottom placement, a 300px cap on the hint,
+ * focusable on request, `alwaysShowTooltip` for a hint that is wanted anyway.
+ * The tooltip is this package's own `Tooltip`; its look is the Tooltip's.
+ *
+ * Anchored, not triggered: a tooltip trigger stamps `aria-expanded` on its
+ * child, which a run of text may not carry (axe, aria-allowed-attr), and the
+ * hint discloses nothing — it repeats the text. So the text is the tooltip's
+ * ANCHOR and this component opens it itself, after the delay, on hover or focus.
+ */
+import { SizableText } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+/**
+ * `measure-on-hover` (default): the hint is armed by the last hover or focus
+ * that measured an overflow. `measure-on-open`: measured when it tries to open.
+ * `disabled`: no tooltip and no listeners.
+ */
+export type TruncateMode = 'measure-on-hover' | 'measure-on-open' | 'disabled';
+export declare function TruncatedTextProvider({ mode, children }: {
+    mode: TruncateMode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** Whether a rendered node holds more than it shows. False off the web, where there is no node to ask. */
+export declare const overflows: (node: unknown) => boolean;
+export type TruncatedTextProps = Omit<ComponentProps<typeof SizableText>, 'children'> & {
+    /** What is shown. A node needs `tooltipContent`, since the hint cannot be read off it. */
+    text: ReactNode;
+    /** Clamp to N lines (wrapping, breaking long words) instead of one line with an ellipsis. */
+    lineClamp?: number;
+    /** The hint, when it should say more or other than `text`. */
+    tooltipContent?: ReactNode;
+    /** Milliseconds before the hint opens. */
+    tooltipDelay?: number;
+    tooltipPlace?: 'top' | 'right' | 'bottom' | 'left';
+    /** Keep the hint's line breaks. */
+    isTooltipMultiline?: boolean;
+    /** Show the hint whether or not the text was cut. */
+    alwaysShowTooltip?: boolean;
+    /** A tab stop: focus measures and opens the hint, as a hover does. */
+    isFocusable?: boolean;
+};
+export declare function TruncatedText({ text, lineClamp, tooltipContent, tooltipDelay, tooltipPlace, isTooltipMultiline, alwaysShowTooltip, isFocusable, ...props }: TruncatedTextProps): import("react").JSX.Element;
+//# sourceMappingURL=truncated-text.d.ts.map

package/dist/backends/gui/truncated-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/truncated-text.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,YAAY,CAAA;AAC/D,OAAO,EAA0D,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAInH;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,UAAU,CAAA;AAI9E,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErG;AAED,0GAA0G;AAC1G,eAAO,MAAM,SAAS,SAAU,OAAO,KAAG,OAIzC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,0FAA0F;IAC1F,IAAI,EAAE,SAAS,CAAA;IACf,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClD,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAKD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,cAAc,EACd,YAAoB,EACpB,YAAuB,EACvB,kBAA0B,EAC1B,iBAAyB,EACzB,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAgFpB"}

package/dist/backends/gui/truncated-text.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TruncatedText — one line with an ellipsis, or N lines clamped, that shows the
+ * whole text in a tooltip only when it was actually cut.
+ *
+ * Every cell, chip label, navigation item and view name in a record surface is
+ * one of these, so the tooltip has to cost nothing when it is not needed: it
+ * measures (scroll size past client size) when the pointer enters or focus
+ * arrives, and the tooltip opens only if that measurement found an overflow. A
+ * text that fits never shows one. `TruncatedTextProvider` lets a host change the
+ * rule for a subtree — a table turns it `disabled` while it scrolls or edits, so
+ * a thousand cells carry no listeners at all.
+ *
+ * Re-expressed from twenty-ui's OverflowingTextWithTooltip and its mode provider
+ * (MIT, see NOTICE): 500ms delay, bottom placement, a 300px cap on the hint,
+ * focusable on request, `alwaysShowTooltip` for a hint that is wanted anyway.
+ * The tooltip is this package's own `Tooltip`; its look is the Tooltip's.
+ *
+ * Anchored, not triggered: a tooltip trigger stamps `aria-expanded` on its
+ * child, which a run of text may not carry (axe, aria-allowed-attr), and the
+ * hint discloses nothing — it repeats the text. So the text is the tooltip's
+ * ANCHOR and this component opens it itself, after the delay, on hover or focus.
+ */
+import { SizableText, Tooltip as GuiTooltip } from '@hanzo/gui';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { Tooltip, TooltipContent } from './tooltip.js';
+import { slot } from './slot.js';
+const ModeContext = /* @__PURE__ */ createContext('measure-on-hover');
+export function TruncatedTextProvider({ mode, children }) {
+    return _jsx(ModeContext.Provider, { value: mode, children: children });
+}
+/** Whether a rendered node holds more than it shows. False off the web, where there is no node to ask. */
+export const overflows = (node) => {
+    const el = node;
+    if (!el || typeof el.scrollWidth !== 'number')
+        return false;
+    return el.scrollWidth > (el.clientWidth ?? 0) || (el.scrollHeight ?? 0) > (el.clientHeight ?? 0);
+};
+const DELAY = 500;
+const MAX_W = 300;
+export function TruncatedText({ text, lineClamp, tooltipContent, tooltipDelay = DELAY, tooltipPlace = 'bottom', isTooltipMultiline = false, alwaysShowTooltip = false, isFocusable = false, ...props }) {
+    const mode = useContext(ModeContext);
+    const [open, setOpen] = useState(false);
+    const [cut, setCut] = useState(false);
+    const node = useRef(null);
+    const timer = useRef(null);
+    const held = useRef(false);
+    useEffect(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    const lines = lineClamp && Number.isInteger(lineClamp) && lineClamp > 0 ? lineClamp : 1;
+    const host = (extra) => (_jsx(SizableText, { ...slot('truncated-text'), numberOfLines: lines, maxW: "100%", minW: 0, ...(lines > 1 ? { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } } : null), ...props, ...extra, children: text }));
+    if (mode === 'disabled' && !alwaysShowTooltip)
+        return host({});
+    const measure = (target) => {
+        node.current = target;
+        const over = overflows(target);
+        setCut(over);
+        return over;
+    };
+    /** Arm the hint: measured now (hover mode) or when it opens (open mode), shown after the delay. */
+    const arm = (target, wait) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        const now = mode === 'measure-on-hover' ? measure(target) : ((node.current = target), false);
+        timer.current = setTimeout(() => {
+            const over = mode === 'measure-on-open' ? measure(node.current) : now;
+            if (alwaysShowTooltip || over)
+                setOpen(true);
+        }, wait);
+    };
+    const disarm = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = null;
+        if (!held.current)
+            setOpen(false);
+    };
+    return (_jsxs(Tooltip, { open: open, onOpenChange: (next) => !next && setOpen(false), placement: tooltipPlace, children: [_jsx(GuiTooltip.Anchor, { asChild: true, children: host({
+                    onPointerEnter: (e) => arm(e?.currentTarget, tooltipDelay),
+                    onPointerLeave: disarm,
+                    // Focus opens at once; the hint stays while the text holds focus.
+                    onFocus: (e) => {
+                        held.current = true;
+                        arm(e?.currentTarget, 0);
+                    },
+                    onBlur: () => {
+                        held.current = false;
+                        disarm();
+                    },
+                    ...(isFocusable ? { tabIndex: 0, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' } } : null),
+                    ...(cut ? { cursor: 'pointer' } : null),
+                }) }), _jsx(TooltipContent, { maxW: MAX_W, children: isTooltipMultiline && typeof (tooltipContent ?? text) === 'string' ? (_jsx(SizableText, { size: "$1", style: { whiteSpace: 'pre-wrap' }, children: tooltipContent ?? text })) : ((tooltipContent ?? text)) })] }));
+}
+//# sourceMappingURL=truncated-text.js.map

package/dist/backends/gui/truncated-text.js.map

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

package/dist/gallery/compound.cjs

@@ -0,0 +1,60 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Compound = Compound;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's compound controls in the gallery: grouped buttons and the
+ * Button axes they hand down, every tone on every variant that takes one, the
+ * loading positions — regular and compact. A module of the one gallery
+ * (`gallery/records.tsx` renders it), so the stylesheet generator, the render
+ * test and the consumer screenshots see these as they see everything else.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const section_1 = require("./section.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const button_group_1 = require("../backends/gui/button-group.cjs");
+const density_1 = require("../backends/gui/density.cjs");
+const number_field_1 = require("../backends/gui/number-field.cjs");
+const input_1 = require("../backends/gui/input.cjs");
+const input_group_1 = require("../backends/gui/input-group.cjs");
+const currency_picker_1 = require("../backends/gui/currency-picker.cjs");
+const phone_country_picker_1 = require("../backends/gui/phone-country-picker.cjs");
+const country_select_1 = require("../backends/gui/country-select.cjs");
+const PrimaryButton_1 = require("../product/PrimaryButton.cjs");
+const Filters_1 = require("../product/Filters.cjs");
+const image_input_1 = require("../backends/gui/image-input.cjs");
+const ComboBox_1 = require("../product/ComboBox.cjs");
+const NOOP = () => { };
+/** Sample data: the pickers are data-free, so the gallery brings its own. */
+const CURRENCIES = [
+    { code: 'USD', name: 'US Dollar', symbol: '$' },
+    { code: 'EUR', name: 'Euro', symbol: '€' },
+    { code: 'GBP', name: 'British Pound', symbol: '£' },
+    { code: 'JPY', name: 'Japanese Yen', symbol: '¥', disabled: true },
+];
+const PHONES = [
+    { value: 'US', label: 'United States', callingCode: '1' },
+    { value: 'FR', label: 'France', callingCode: '33' },
+    { value: 'DE', label: 'Germany', callingCode: '49' },
+];
+const COUNTRIES = [
+    { value: 'FR', label: 'France' },
+    { value: 'DE', label: 'Germany' },
+    { value: 'GB', label: 'United Kingdom of Great Britain and Northern Ireland' },
+];
+const TONES = ['accent', 'danger', 'success'];
+/** The variants a tone restates: outline-shaped, ghost, soft and solid. */
+const TONED = ['default', 'outline', 'ghost', 'secondary', 'primary'];
+function Compound() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-group", children: [(0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { "aria-label": "Update view", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { children: "Update view" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon", "aria-label": "More update options", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { attached: false, "aria-label": "Unattached", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", children: "Day" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", children: "Week" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", children: "Month" })] }), (0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { framed: true, attached: false, size: "icon-2xs", variant: "ghost", "aria-label": "Zoom", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { "aria-label": "Zoom out", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minus, {}) }), (0, jsx_runtime_1.jsx)(button_1.Button, { "aria-label": "Zoom in", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, {}) })] }), (0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { framed: true, size: "xs", variant: "ghost", "aria-label": "Cell actions", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { children: "Open" }), (0, jsx_runtime_1.jsx)(button_1.Button, { children: "Copy" })] })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-tone", children: [TONES.flatMap((tone) => TONED.map((variant) => ((0, jsx_runtime_1.jsx)(button_1.Button, { tone: tone, variant: variant, size: "sm", children: `${tone} ${variant}` }, `${tone}-${variant}`)))), (0, jsx_runtime_1.jsx)(button_1.Button, { tone: "danger", variant: "ghost", size: "icon-xs", "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Trash2, {}) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-state", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", shortcut: ['Mod', 'Enter'], children: "Update view" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "ghost", shortcut: [['G'], ['P']], children: "Go to people" }), (0, jsx_runtime_1.jsx)(button_1.Button, { isLoading: true, loadingPosition: "center", children: "Saving" }), (0, jsx_runtime_1.jsx)(button_1.Button, { isLoading: true, loadingPosition: "end", variant: "outline", children: "Saving" }), (0, jsx_runtime_1.jsx)(button_1.Button, { elevated: true, children: "Continue" }), (0, jsx_runtime_1.jsx)(button_1.Button, { elevated: true, variant: "primary", children: "Continue" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-sm", shape: "round", "aria-label": "Add", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, focusableWhenDisabled: true, onPress: NOOP, children: "Merge" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-sm", variant: "ghost", tooltip: "Close side panel", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minus, { size: 16 }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { fullWidth: true, variant: "outline", children: "Full width" }), (0, jsx_runtime_1.jsx)(PrimaryButton_1.PrimaryButton, { children: "Get started" }), (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { value: "", onChange: NOOP, options: [{ value: 'kai-1' }, { value: 'enso-flash' }], placeholder: "Model" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "number-field", children: [(0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Amount", defaultValue: 1234.5, locale: "en-US" }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Seats", defaultValue: 2, min: 1, max: 150, buttons: true }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Decimals", size: "sm", defaultValue: 2, min: 0, max: 100, buttons: true }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Limit", size: "xs", defaultValue: 10, buttons: true, readOnly: true }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Rate", size: "sm", defaultValue: 0.25, format: { style: 'percent' } }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Invalid", size: "sm", defaultValue: 3, "aria-invalid": true })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "pickers", children: [(0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(currency_picker_1.CurrencyPicker, { currencies: CURRENCIES, defaultValue: "USD" }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Amount", defaultValue: 1200 })] }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(currency_picker_1.CurrencyPicker, { currencies: CURRENCIES }), (0, jsx_runtime_1.jsx)(input_1.Input, { "aria-label": "Amount, no currency", placeholder: "0.00" })] }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(phone_country_picker_1.PhoneCountryPicker, { countries: PHONES, defaultValue: "FR" }), (0, jsx_runtime_1.jsx)(input_1.Input, { "aria-label": "Phone number", placeholder: "6 12 34 56 78" })] }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { size: "xs", children: [(0, jsx_runtime_1.jsx)(phone_country_picker_1.PhoneCountryPicker, { countries: PHONES }), (0, jsx_runtime_1.jsx)(input_1.Input, { "aria-label": "Phone number, no country", placeholder: "Number" })] }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(currency_picker_1.CurrencyPicker, { currencies: CURRENCIES, defaultValue: "EUR", disabled: true }), (0, jsx_runtime_1.jsx)(input_1.Input, { "aria-label": "Disabled amount", disabled: true, placeholder: "0.00" })] }), (0, jsx_runtime_1.jsx)(country_select_1.CountrySelect, { countries: COUNTRIES, defaultValue: "GB", label: "Country" }), (0, jsx_runtime_1.jsx)(country_select_1.CountrySelect, { countries: COUNTRIES, size: "sm", "aria-label": "Country, none" }), (0, jsx_runtime_1.jsx)(country_select_1.CountrySelect, { countries: [], size: "xs", "aria-label": "Country, empty" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "segmented", children: [(0, jsx_runtime_1.jsx)(Filters_1.Segmented, { variant: "track", "aria-label": "When", options: [
+                            { label: 'Send now', value: 'now' },
+                            { label: 'Schedule', value: 'later' },
+                        ], value: "now", onChange: NOOP }), (0, jsx_runtime_1.jsx)(Filters_1.Segmented, { variant: "track", trackSize: "sm", itemWidth: "content", "aria-label": "Layout", options: [
+                            { label: '', value: 'table', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Rows3, { size: 16 }), 'aria-label': 'Table' },
+                            { label: '', value: 'kanban', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Columns3, { size: 16 }), 'aria-label': 'Kanban' },
+                        ], value: "kanban", onChange: NOOP }), (0, jsx_runtime_1.jsx)(Filters_1.Segmented, { variant: "track", disabled: true, "aria-label": "Disabled choice", options: [
+                            { label: 'Left', value: 'l' },
+                            { label: 'Right', value: 'r' },
+                        ], value: "l", onChange: NOOP })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "image-input", children: [(0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Logo", helperText: "PNG or JPG, up to 2MB" }), (0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Photo", src: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", alt: "" }), (0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Uploading", isUploading: true }), (0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Broken", errorMessage: "That file is too large" }), (0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Off", disabled: true })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-group-compact", children: [(0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { "aria-label": "Update view, compact", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { children: "Update view" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-sm", "aria-label": "More update options", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14 }) })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { tone: "danger", variant: "outline", children: "Delete" }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Compact amount", defaultValue: 42, buttons: true }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(currency_picker_1.CurrencyPicker, { currencies: CURRENCIES, defaultValue: "GBP" }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Compact grouped amount", defaultValue: 99 })] }), (0, jsx_runtime_1.jsx)(country_select_1.CountrySelect, { countries: COUNTRIES, defaultValue: "DE", "aria-label": "Compact country" }), (0, jsx_runtime_1.jsx)(PrimaryButton_1.PrimaryButton, { children: "Continue" }), (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { value: "", onChange: NOOP, options: [{ value: 'kai-1' }, { value: 'enso-flash' }], placeholder: "Model" })] }) })] }));
+}

package/dist/gallery/compound.d.ts

@@ -0,0 +1,2 @@
+export declare function Compound(): import("react").JSX.Element;
+//# sourceMappingURL=compound.d.ts.map

package/dist/gallery/compound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound.d.ts","sourceRoot":"","sources":["../../src/gallery/compound.tsx"],"names":[],"mappings":"AAiDA,wBAAgB,QAAQ,gCAiLvB"}

package/dist/gallery/compound.js

@@ -0,0 +1,58 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The record kit's compound controls in the gallery: grouped buttons and the
+ * Button axes they hand down, every tone on every variant that takes one, the
+ * loading positions — regular and compact. A module of the one gallery
+ * (`gallery/records.tsx` renders it), so the stylesheet generator, the render
+ * test and the consumer screenshots see these as they see everything else.
+ */
+import { ChevronDown, Columns3, Minus, Plus, Rows3, Trash2 } from '@hanzogui/lucide-icons-2';
+import { Section } from './section.js';
+import { Button } from '../backends/gui/button.js';
+import { ButtonGroup } from '../backends/gui/button-group.js';
+import { Density } from '../backends/gui/density.js';
+import { NumberField } from '../backends/gui/number-field.js';
+import { Input } from '../backends/gui/input.js';
+import { InputGroup } from '../backends/gui/input-group.js';
+import { CurrencyPicker } from '../backends/gui/currency-picker.js';
+import { PhoneCountryPicker } from '../backends/gui/phone-country-picker.js';
+import { CountrySelect } from '../backends/gui/country-select.js';
+import { PrimaryButton } from '../product/PrimaryButton.js';
+import { Segmented } from '../product/Filters.js';
+import { ImageInput } from '../backends/gui/image-input.js';
+import { ComboBox } from '../product/ComboBox.js';
+const NOOP = () => { };
+/** Sample data: the pickers are data-free, so the gallery brings its own. */
+const CURRENCIES = [
+    { code: 'USD', name: 'US Dollar', symbol: '$' },
+    { code: 'EUR', name: 'Euro', symbol: '€' },
+    { code: 'GBP', name: 'British Pound', symbol: '£' },
+    { code: 'JPY', name: 'Japanese Yen', symbol: '¥', disabled: true },
+];
+const PHONES = [
+    { value: 'US', label: 'United States', callingCode: '1' },
+    { value: 'FR', label: 'France', callingCode: '33' },
+    { value: 'DE', label: 'Germany', callingCode: '49' },
+];
+const COUNTRIES = [
+    { value: 'FR', label: 'France' },
+    { value: 'DE', label: 'Germany' },
+    { value: 'GB', label: 'United Kingdom of Great Britain and Northern Ireland' },
+];
+const TONES = ['accent', 'danger', 'success'];
+/** The variants a tone restates: outline-shaped, ghost, soft and solid. */
+const TONED = ['default', 'outline', 'ghost', 'secondary', 'primary'];
+export function Compound() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "button-group", children: [_jsxs(ButtonGroup, { "aria-label": "Update view", children: [_jsx(Button, { children: "Update view" }), _jsx(Button, { size: "icon", "aria-label": "More update options", children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(ButtonGroup, { attached: false, "aria-label": "Unattached", children: [_jsx(Button, { size: "sm", children: "Day" }), _jsx(Button, { size: "sm", children: "Week" }), _jsx(Button, { size: "sm", children: "Month" })] }), _jsxs(ButtonGroup, { framed: true, attached: false, size: "icon-2xs", variant: "ghost", "aria-label": "Zoom", children: [_jsx(Button, { "aria-label": "Zoom out", children: _jsx(Minus, {}) }), _jsx(Button, { "aria-label": "Zoom in", children: _jsx(Plus, {}) })] }), _jsxs(ButtonGroup, { framed: true, size: "xs", variant: "ghost", "aria-label": "Cell actions", children: [_jsx(Button, { children: "Open" }), _jsx(Button, { children: "Copy" })] })] }), _jsxs(Section, { name: "button-tone", children: [TONES.flatMap((tone) => TONED.map((variant) => (_jsx(Button, { tone: tone, variant: variant, size: "sm", children: `${tone} ${variant}` }, `${tone}-${variant}`)))), _jsx(Button, { tone: "danger", variant: "ghost", size: "icon-xs", "aria-label": "Delete", children: _jsx(Trash2, {}) })] }), _jsxs(Section, { name: "button-state", children: [_jsx(Button, { size: "sm", shortcut: ['Mod', 'Enter'], children: "Update view" }), _jsx(Button, { size: "sm", variant: "ghost", shortcut: [['G'], ['P']], children: "Go to people" }), _jsx(Button, { isLoading: true, loadingPosition: "center", children: "Saving" }), _jsx(Button, { isLoading: true, loadingPosition: "end", variant: "outline", children: "Saving" }), _jsx(Button, { elevated: true, children: "Continue" }), _jsx(Button, { elevated: true, variant: "primary", children: "Continue" }), _jsx(Button, { size: "icon-sm", shape: "round", "aria-label": "Add", children: _jsx(Plus, { size: 16 }) }), _jsx(Button, { disabled: true, focusableWhenDisabled: true, onPress: NOOP, children: "Merge" }), _jsx(Button, { size: "icon-sm", variant: "ghost", tooltip: "Close side panel", children: _jsx(Minus, { size: 16 }) }), _jsx(Button, { fullWidth: true, variant: "outline", children: "Full width" }), _jsx(PrimaryButton, { children: "Get started" }), _jsx(ComboBox, { value: "", onChange: NOOP, options: [{ value: 'kai-1' }, { value: 'enso-flash' }], placeholder: "Model" })] }), _jsxs(Section, { name: "number-field", children: [_jsx(NumberField, { "aria-label": "Amount", defaultValue: 1234.5, locale: "en-US" }), _jsx(NumberField, { "aria-label": "Seats", defaultValue: 2, min: 1, max: 150, buttons: true }), _jsx(NumberField, { "aria-label": "Decimals", size: "sm", defaultValue: 2, min: 0, max: 100, buttons: true }), _jsx(NumberField, { "aria-label": "Limit", size: "xs", defaultValue: 10, buttons: true, readOnly: true }), _jsx(NumberField, { "aria-label": "Rate", size: "sm", defaultValue: 0.25, format: { style: 'percent' } }), _jsx(NumberField, { "aria-label": "Invalid", size: "sm", defaultValue: 3, "aria-invalid": true })] }), _jsxs(Section, { name: "pickers", children: [_jsxs(InputGroup, { children: [_jsx(CurrencyPicker, { currencies: CURRENCIES, defaultValue: "USD" }), _jsx(NumberField, { "aria-label": "Amount", defaultValue: 1200 })] }), _jsxs(InputGroup, { size: "sm", children: [_jsx(CurrencyPicker, { currencies: CURRENCIES }), _jsx(Input, { "aria-label": "Amount, no currency", placeholder: "0.00" })] }), _jsxs(InputGroup, { size: "sm", children: [_jsx(PhoneCountryPicker, { countries: PHONES, defaultValue: "FR" }), _jsx(Input, { "aria-label": "Phone number", placeholder: "6 12 34 56 78" })] }), _jsxs(InputGroup, { size: "xs", children: [_jsx(PhoneCountryPicker, { countries: PHONES }), _jsx(Input, { "aria-label": "Phone number, no country", placeholder: "Number" })] }), _jsxs(InputGroup, { size: "sm", children: [_jsx(CurrencyPicker, { currencies: CURRENCIES, defaultValue: "EUR", disabled: true }), _jsx(Input, { "aria-label": "Disabled amount", disabled: true, placeholder: "0.00" })] }), _jsx(CountrySelect, { countries: COUNTRIES, defaultValue: "GB", label: "Country" }), _jsx(CountrySelect, { countries: COUNTRIES, size: "sm", "aria-label": "Country, none" }), _jsx(CountrySelect, { countries: [], size: "xs", "aria-label": "Country, empty" })] }), _jsxs(Section, { name: "segmented", children: [_jsx(Segmented, { variant: "track", "aria-label": "When", options: [
+                            { label: 'Send now', value: 'now' },
+                            { label: 'Schedule', value: 'later' },
+                        ], value: "now", onChange: NOOP }), _jsx(Segmented, { variant: "track", trackSize: "sm", itemWidth: "content", "aria-label": "Layout", options: [
+                            { label: '', value: 'table', icon: _jsx(Rows3, { size: 16 }), 'aria-label': 'Table' },
+                            { label: '', value: 'kanban', icon: _jsx(Columns3, { size: 16 }), 'aria-label': 'Kanban' },
+                        ], value: "kanban", onChange: NOOP }), _jsx(Segmented, { variant: "track", disabled: true, "aria-label": "Disabled choice", options: [
+                            { label: 'Left', value: 'l' },
+                            { label: 'Right', value: 'r' },
+                        ], value: "l", onChange: NOOP })] }), _jsxs(Section, { name: "image-input", children: [_jsx(ImageInput, { title: "Logo", helperText: "PNG or JPG, up to 2MB" }), _jsx(ImageInput, { title: "Photo", src: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", alt: "" }), _jsx(ImageInput, { title: "Uploading", isUploading: true }), _jsx(ImageInput, { title: "Broken", errorMessage: "That file is too large" }), _jsx(ImageInput, { title: "Off", disabled: true })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "button-group-compact", children: [_jsxs(ButtonGroup, { "aria-label": "Update view, compact", children: [_jsx(Button, { children: "Update view" }), _jsx(Button, { size: "icon-sm", "aria-label": "More update options", children: _jsx(ChevronDown, { size: 14 }) })] }), _jsx(Button, { tone: "danger", variant: "outline", children: "Delete" }), _jsx(NumberField, { "aria-label": "Compact amount", defaultValue: 42, buttons: true }), _jsxs(InputGroup, { children: [_jsx(CurrencyPicker, { currencies: CURRENCIES, defaultValue: "GBP" }), _jsx(NumberField, { "aria-label": "Compact grouped amount", defaultValue: 99 })] }), _jsx(CountrySelect, { countries: COUNTRIES, defaultValue: "DE", "aria-label": "Compact country" }), _jsx(PrimaryButton, { children: "Continue" }), _jsx(ComboBox, { value: "", onChange: NOOP, options: [{ value: 'kai-1' }, { value: 'enso-flash' }], placeholder: "Model" })] }) })] }));
+}
+//# sourceMappingURL=compound.js.map

package/dist/gallery/compound.js.map

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