@hanzo/ui 8.27.90 → 8.28.0

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

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,KAAK,GAAG,EAAE,CAAA;AAIhB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,SAAS,OACJ,IAAI,CAAC,QAAQ,CAAC,EAClB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAC,SAAS;IACzB,sEAAsE;IACtE,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,WAAW,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE;IACrE,yEAAyE;IACzE,0EAA0E;IAC1E,yEAAyE;IACzE,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,GAAG,CAAC,KACvB,KAAK,YAET,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,eAAe,EAAC,SAAS;QACzB,yEAAyE;QACzE,4EAA4E;QAC5E,0EAA0E;QAC1E,sEAAsE;QACtE,uEAAuE;QACvE,0EAA0E;QAC1E,sEAAsE;QACtE,iCAAiC;QACjC,WAAW,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAC/B,GACQ,CACb,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAItC,4FAA4F;AAC5F,MAAM,IAAI,GAA8E;IACtF,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IAC7C,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IACxC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;CACzC,CAAA;AAOD,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IAC3D,MAAM,OAAO,GAAG,UAAU,EAAE,KAAK,SAAS,CAAA;IAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IACtD,OAAO,CACP,KAAC,SAAS,OACJ,IAAI,CAAC,QAAQ,CAAC,eACP,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,EAC/C,KAAK,EAAE,GAAG,CAAC,CAAC,EACZ,MAAM,EAAE,GAAG,CAAC,CAAC,EACb,SAAS,EAAE,GAAG,CAAC,CAAC,EAChB,OAAO,EAAE,CAAC,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAC,SAAS;QACzB,0EAA0E;QAC1E,iDAAiD;QACjD,WAAW,EAAE,GAAG,CAAC,IAAI,EACrB,WAAW,EAAC,cAAc,EAC1B,WAAW,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE;QACrE,yEAAyE;QACzE,0EAA0E;QAC1E,yEAAyE;QACzE,6DAA6D;QAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,KACrB,KAAK,YAET,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,MAAM,EAAE,GAAG,CAAC,KAAK,EACjB,eAAe,EAAC,SAAS;YACzB,yEAAyE;YACzE,4EAA4E;YAC5E,0EAA0E;YAC1E,sEAAsE;YACtE,uEAAuE;YACvE,0EAA0E;YAC1E,sEAAsE;YACtE,iCAAiC;YACjC,WAAW,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAC/B,GACQ,CACX,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/backends/gui/tabs.cjs

@@ -3,30 +3,76 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/** Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor. */
+/**
+ * Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor.
+ *
+ * Two looks. The default is the segmented pill: a 36px track on the hover rung
+ * with the chosen tab lifted onto the ground. `variant="line"` is the record
+ * page's strip (twenty-ui's Tabs, MIT, NOTICE): a transparent list over a 1px
+ * baseline, 40px tabs whose label sits in an inner box (8×8 at `md`, 4×8 at
+ * `sm`, 8px corner) that takes the hover rung under the pointer, and a 1px line
+ * in the ink under the chosen tab. A tab takes a `startIcon`, an `endIcon` and a
+ * `badge`, and `highlighted` rings it (a drop target during a drag). Vertical
+ * orientation moves the baseline to the end edge.
+ *
+ * The variant and the chosen value ride a context from the root, because gui
+ * paints a tab's `activeStyle` but tells nothing else inside it which tab is
+ * chosen — and the line has to know where to draw.
+ */
 const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
 const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const ROW_H = 36;
-const Tabs = (p) => (0, jsx_runtime_1.jsx)(gui_1.Tabs, { ...(0, slot_1.slot)('tabs'), flexDirection: "column", gap: "$2", ...p });
+const LINE_H = 40;
+const LineContext = /* @__PURE__ */ (0, react_1.createContext)({ variant: 'default', value: undefined, vertical: false });
+const Tabs = ({ variant = 'default', value, defaultValue, onValueChange, orientation, ...p }) => {
+    const [own, setOwn] = (0, react_1.useState)(defaultValue);
+    const current = value ?? own;
+    return ((0, jsx_runtime_1.jsx)(LineContext.Provider, { value: { variant, value: current, vertical: orientation === 'vertical' }, children: (0, jsx_runtime_1.jsx)(gui_1.Tabs, { ...(0, slot_1.slot)('tabs'), flexDirection: orientation === 'vertical' ? 'row' : 'column', gap: "$2", ...(value !== undefined ? { value } : { defaultValue }), onValueChange: (v) => {
+                setOwn(v);
+                onValueChange?.(v);
+            }, ...(orientation ? { orientation } : null), ...(variant === 'line' ? { 'data-variant': 'line' } : null), ...p }) }));
+};
 exports.Tabs = Tabs;
-const TabsList = (p) => ((0, jsx_runtime_1.jsx)(gui_1.Tabs.List, { ...(0, slot_1.slot)('tabs-list'), items: "center", justify: "center", self: "flex-start", height: ROW_H, p: 3, gap: 2, bg: "$hover", rounded: "$4", ...p }));
+const TabsList = (p) => {
+    const { variant, vertical } = (0, react_1.useContext)(LineContext);
+    if (variant === 'line')
+        return ((0, jsx_runtime_1.jsx)(gui_1.Tabs.List, { ...(0, slot_1.slot)('tabs-list'), ...(vertical
+                ? { flexDirection: 'column', borderRightWidth: 1, items: 'stretch' }
+                : { flexDirection: 'row', borderBottomWidth: 1, items: 'flex-end' }), borderColor: "$borderColor", bg: "transparent", gap: "$1", p: 0, rounded: 0, justify: "flex-start", ...p }));
+    return ((0, jsx_runtime_1.jsx)(gui_1.Tabs.List, { ...(0, slot_1.slot)('tabs-list'), items: "center", justify: "center", self: "flex-start", height: ROW_H, p: 3, gap: 2, bg: "$hover", rounded: "$4", ...p }));
+};
 exports.TabsList = TabsList;
-const TabsTrigger = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { ...(0, slot_1.slot)('tabs-trigger'), unstyled: true, items: "center", justify: "center", height: "100%", px: "$3", gap: "$1.5", rounded: "$3", cursor: "pointer", ...(0, gesture_1.touch)(ROW_H, 44, 'y'), hoverStyle: { bg: '$edge' }, focusStyle: { bg: '$edge' }, 
-    // The selected tab. gui's `Tabs.Tab` spreads `activeStyle` only for the tab
-    // whose `value` is current, and the `unstyled` frame drops its OWN active
-    // default (`...!unstyled && !activeStyle && {…}` in the compiled frame) — so
-    // without this the active tab is painted identically to the rest and the row
-    // reads as though nothing is chosen. A raised `$background` pill on the
-    // `$hover` track: shadcn's `data-[state=active]:bg-background shadow-sm`.
-    activeStyle: {
-        bg: '$background',
-        shadowColor: '$shadowColor',
-        shadowOpacity: 0.12,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-    }, ...p, children: (0, ink_1.ink)(children, undefined, { size: '$2', fontWeight: '500' }) }));
+/** The record strip's tab: an inner box that hovers, and the line under the chosen one. */
+const LineTab = ({ children, startIcon, endIcon, badge, size = 'md', highlighted = false, disabled, value, ...p }) => {
+    const { value: current, vertical } = (0, react_1.useContext)(LineContext);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const chosen = current === value;
+    const tone = disabled ? '$hush' : chosen ? '$ink' : '$aside';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tabs.Tab, { ...(0, slot_1.slot)('tabs-trigger'), "data-variant": "line", ...(chosen ? { 'data-chosen': '' } : null), unstyled: true, value: value, disabled: disabled, position: "relative", items: "center", justify: "center", minH: LINE_H, p: 0, bg: "transparent", borderWidth: 0, cursor: disabled ? 'default' : 'pointer', ...(0, gesture_1.touch)(LINE_H, 44, 'y'), onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false), ...p, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('tabs-trigger-box'), items: "center", gap: "$1", px: "$2", py: size === 'sm' ? '$1' : '$2', rounded: highlighted ? '$xs' : '$3', bg: hovered && !disabled ? '$hover' : 'transparent', ...(highlighted ? { outlineWidth: 1, outlineStyle: 'solid', outlineColor: 'var(--primary)', outlineOffset: -1 } : null), children: [startIcon, (0, ink_1.ink)(children, undefined, { size: '$2', fontWeight: '500', color: tone, numberOfLines: 1 }), badge, endIcon] }), chosen ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('tabs-indicator'), position: "absolute", bg: "$ink", ...(vertical ? { r: -1, t: 0, b: 0, width: 1 } : { b: -1, l: 0, r: 0, height: 1 }) })) : null] }));
+};
+const TabsTrigger = (props) => {
+    const { variant } = (0, react_1.useContext)(LineContext);
+    if (variant === 'line')
+        return (0, jsx_runtime_1.jsx)(LineTab, { ...props });
+    const { children, startIcon, endIcon, badge, size: _size, highlighted: _highlighted, ...p } = props;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tabs.Tab, { ...(0, slot_1.slot)('tabs-trigger'), unstyled: true, items: "center", justify: "center", height: "100%", px: "$3", gap: "$1.5", rounded: "$3", cursor: "pointer", ...(0, gesture_1.touch)(ROW_H, 44, 'y'), hoverStyle: { bg: '$edge' }, focusStyle: { bg: '$edge' }, 
+        // The selected tab. gui's `Tabs.Tab` spreads `activeStyle` only for the tab
+        // whose `value` is current, and the `unstyled` frame drops its OWN active
+        // default (`...!unstyled && !activeStyle && {…}` in the compiled frame) — so
+        // without this the active tab is painted identically to the rest and the row
+        // reads as though nothing is chosen. A raised `$background` pill on the
+        // `$hover` track: shadcn's `data-[state=active]:bg-background shadow-sm`.
+        activeStyle: {
+            bg: '$background',
+            shadowColor: '$shadowColor',
+            shadowOpacity: 0.12,
+            shadowRadius: 3,
+            shadowOffset: { width: 0, height: 1 },
+        }, ...p, children: [startIcon, (0, ink_1.ink)(children, undefined, { size: '$2', fontWeight: '500' }), badge, endIcon] }));
+};
 exports.TabsTrigger = TabsTrigger;
 const TabsContent = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Tabs.Content, { ...(0, slot_1.slot)('tabs-content'), flex: 1, ...p, children: (0, ink_1.ink)(children) }));
 exports.TabsContent = TabsContent;

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

@@ -1,13 +1,42 @@
-/** Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor. */
+/**
+ * Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor.
+ *
+ * Two looks. The default is the segmented pill: a 36px track on the hover rung
+ * with the chosen tab lifted onto the ground. `variant="line"` is the record
+ * page's strip (twenty-ui's Tabs, MIT, NOTICE): a transparent list over a 1px
+ * baseline, 40px tabs whose label sits in an inner box (8×8 at `md`, 4×8 at
+ * `sm`, 8px corner) that takes the hover rung under the pointer, and a 1px line
+ * in the ink under the chosen tab. A tab takes a `startIcon`, an `endIcon` and a
+ * `badge`, and `highlighted` rings it (a drop target during a drag). Vertical
+ * orientation moves the baseline to the end edge.
+ *
+ * The variant and the chosen value ride a context from the root, because gui
+ * paints a tab's `activeStyle` but tells nothing else inside it which tab is
+ * chosen — and the line has to know where to draw.
+ */
 import { Tabs as GuiTabs } from '@hanzo/gui';
-import type { ComponentProps } from 'react';
-export type TabsProps = ComponentProps<typeof GuiTabs>;
+import { type ComponentProps, type ReactNode } from 'react';
+export type TabsProps = ComponentProps<typeof GuiTabs> & {
+    /** `line` is the underlined record strip; the default is the segmented pill. */
+    variant?: 'default' | 'line';
+};
 export type TabsListProps = ComponentProps<typeof GuiTabs.List>;
-export type TabsTriggerProps = ComponentProps<typeof GuiTabs.Tab>;
+export type TabsTriggerProps = Omit<ComponentProps<typeof GuiTabs.Tab>, 'size'> & {
+    /** A 16px icon before the label (line variant). */
+    startIcon?: ReactNode;
+    /** An icon after the label. */
+    endIcon?: ReactNode;
+    /** A count or marker after the label. */
+    badge?: ReactNode;
+    /** `sm` tightens the inner box to 4×8 (line variant). */
+    size?: 'sm' | 'md';
+    /** Ringed as a drop target. */
+    highlighted?: boolean;
+};
 export type TabsContentProps = ComponentProps<typeof GuiTabs.Content>;
-declare const Tabs: (p: TabsProps) => import("react").JSX.Element;
+declare const Tabs: ({ variant, value, defaultValue, onValueChange, orientation, ...p }: TabsProps) => import("react").JSX.Element;
 declare const TabsList: (p: TabsListProps) => import("react").JSX.Element;
-declare const TabsTrigger: ({ children, ...p }: TabsTriggerProps) => import("react").JSX.Element;
+declare const TabsTrigger: (props: TabsTriggerProps) => import("react").JSX.Element;
 declare const TabsContent: ({ children, ...p }: TabsContentProps) => import("react").JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tabs.tsx"],"names":[],"mappings":"AAEA,gFAAgF;AAChF,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAO3C,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACtD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AAC/D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAA;AACjE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA;AAErE,QAAA,MAAM,IAAI,MAAO,SAAS,gCAAyE,CAAA;AAEnG,QAAA,MAAM,QAAQ,MAAO,aAAa,gCAajC,CAAA;AAED,QAAA,MAAM,WAAW,uBAAwB,gBAAgB,gCA+BxD,CAAA;AAED,QAAA,MAAM,WAAW,uBAAwB,gBAAgB,gCAIxD,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tabs.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkB,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAuC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWhG,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG;IACvD,gFAAgF;IAChF,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;CAC7B,CAAA;AACD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AAC/D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAChF,mDAAmD;IACnD,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,yDAAyD;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AACD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA;AAErE,QAAA,MAAM,IAAI,uEAAoF,SAAS,gCAoBtG,CAAA;AAED,QAAA,MAAM,QAAQ,MAAO,aAAa,gCAgCjC,CAAA;AAwDD,QAAA,MAAM,WAAW,UAAW,gBAAgB,gCAuC3C,CAAA;AAED,QAAA,MAAM,WAAW,uBAAwB,gBAAgB,gCAIxD,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}

package/dist/backends/gui/tabs.js

@@ -1,27 +1,73 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-/** Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor. */
-import { Tabs as GuiTabs } from '@hanzo/gui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor.
+ *
+ * Two looks. The default is the segmented pill: a 36px track on the hover rung
+ * with the chosen tab lifted onto the ground. `variant="line"` is the record
+ * page's strip (twenty-ui's Tabs, MIT, NOTICE): a transparent list over a 1px
+ * baseline, 40px tabs whose label sits in an inner box (8×8 at `md`, 4×8 at
+ * `sm`, 8px corner) that takes the hover rung under the pointer, and a 1px line
+ * in the ink under the chosen tab. A tab takes a `startIcon`, an `endIcon` and a
+ * `badge`, and `highlighted` rings it (a drop target during a drag). Vertical
+ * orientation moves the baseline to the end edge.
+ *
+ * The variant and the chosen value ride a context from the root, because gui
+ * paints a tab's `activeStyle` but tells nothing else inside it which tab is
+ * chosen — and the line has to know where to draw.
+ */
+import { Tabs as GuiTabs, XStack, YStack } from '@hanzo/gui';
+import { createContext, useContext, useState } from 'react';
 import { ink } from './ink.js';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
 const ROW_H = 36;
-const Tabs = (p) => _jsx(GuiTabs, { ...slot('tabs'), flexDirection: "column", gap: "$2", ...p });
-const TabsList = (p) => (_jsx(GuiTabs.List, { ...slot('tabs-list'), items: "center", justify: "center", self: "flex-start", height: ROW_H, p: 3, gap: 2, bg: "$hover", rounded: "$4", ...p }));
-const TabsTrigger = ({ children, ...p }) => (_jsx(GuiTabs.Tab, { ...slot('tabs-trigger'), unstyled: true, items: "center", justify: "center", height: "100%", px: "$3", gap: "$1.5", rounded: "$3", cursor: "pointer", ...touch(ROW_H, 44, 'y'), hoverStyle: { bg: '$edge' }, focusStyle: { bg: '$edge' }, 
-    // The selected tab. gui's `Tabs.Tab` spreads `activeStyle` only for the tab
-    // whose `value` is current, and the `unstyled` frame drops its OWN active
-    // default (`...!unstyled && !activeStyle && {…}` in the compiled frame) — so
-    // without this the active tab is painted identically to the rest and the row
-    // reads as though nothing is chosen. A raised `$background` pill on the
-    // `$hover` track: shadcn's `data-[state=active]:bg-background shadow-sm`.
-    activeStyle: {
-        bg: '$background',
-        shadowColor: '$shadowColor',
-        shadowOpacity: 0.12,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-    }, ...p, children: ink(children, undefined, { size: '$2', fontWeight: '500' }) }));
+const LINE_H = 40;
+const LineContext = /* @__PURE__ */ createContext({ variant: 'default', value: undefined, vertical: false });
+const Tabs = ({ variant = 'default', value, defaultValue, onValueChange, orientation, ...p }) => {
+    const [own, setOwn] = useState(defaultValue);
+    const current = value ?? own;
+    return (_jsx(LineContext.Provider, { value: { variant, value: current, vertical: orientation === 'vertical' }, children: _jsx(GuiTabs, { ...slot('tabs'), flexDirection: orientation === 'vertical' ? 'row' : 'column', gap: "$2", ...(value !== undefined ? { value } : { defaultValue }), onValueChange: (v) => {
+                setOwn(v);
+                onValueChange?.(v);
+            }, ...(orientation ? { orientation } : null), ...(variant === 'line' ? { 'data-variant': 'line' } : null), ...p }) }));
+};
+const TabsList = (p) => {
+    const { variant, vertical } = useContext(LineContext);
+    if (variant === 'line')
+        return (_jsx(GuiTabs.List, { ...slot('tabs-list'), ...(vertical
+                ? { flexDirection: 'column', borderRightWidth: 1, items: 'stretch' }
+                : { flexDirection: 'row', borderBottomWidth: 1, items: 'flex-end' }), borderColor: "$borderColor", bg: "transparent", gap: "$1", p: 0, rounded: 0, justify: "flex-start", ...p }));
+    return (_jsx(GuiTabs.List, { ...slot('tabs-list'), items: "center", justify: "center", self: "flex-start", height: ROW_H, p: 3, gap: 2, bg: "$hover", rounded: "$4", ...p }));
+};
+/** The record strip's tab: an inner box that hovers, and the line under the chosen one. */
+const LineTab = ({ children, startIcon, endIcon, badge, size = 'md', highlighted = false, disabled, value, ...p }) => {
+    const { value: current, vertical } = useContext(LineContext);
+    const [hovered, setHovered] = useState(false);
+    const chosen = current === value;
+    const tone = disabled ? '$hush' : chosen ? '$ink' : '$aside';
+    return (_jsxs(GuiTabs.Tab, { ...slot('tabs-trigger'), "data-variant": "line", ...(chosen ? { 'data-chosen': '' } : null), unstyled: true, value: value, disabled: disabled, position: "relative", items: "center", justify: "center", minH: LINE_H, p: 0, bg: "transparent", borderWidth: 0, cursor: disabled ? 'default' : 'pointer', ...touch(LINE_H, 44, 'y'), onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false), ...p, children: [_jsxs(XStack, { ...slot('tabs-trigger-box'), items: "center", gap: "$1", px: "$2", py: size === 'sm' ? '$1' : '$2', rounded: highlighted ? '$xs' : '$3', bg: hovered && !disabled ? '$hover' : 'transparent', ...(highlighted ? { outlineWidth: 1, outlineStyle: 'solid', outlineColor: 'var(--primary)', outlineOffset: -1 } : null), children: [startIcon, ink(children, undefined, { size: '$2', fontWeight: '500', color: tone, numberOfLines: 1 }), badge, endIcon] }), chosen ? (_jsx(YStack, { ...slot('tabs-indicator'), position: "absolute", bg: "$ink", ...(vertical ? { r: -1, t: 0, b: 0, width: 1 } : { b: -1, l: 0, r: 0, height: 1 }) })) : null] }));
+};
+const TabsTrigger = (props) => {
+    const { variant } = useContext(LineContext);
+    if (variant === 'line')
+        return _jsx(LineTab, { ...props });
+    const { children, startIcon, endIcon, badge, size: _size, highlighted: _highlighted, ...p } = props;
+    return (_jsxs(GuiTabs.Tab, { ...slot('tabs-trigger'), unstyled: true, items: "center", justify: "center", height: "100%", px: "$3", gap: "$1.5", rounded: "$3", cursor: "pointer", ...touch(ROW_H, 44, 'y'), hoverStyle: { bg: '$edge' }, focusStyle: { bg: '$edge' }, 
+        // The selected tab. gui's `Tabs.Tab` spreads `activeStyle` only for the tab
+        // whose `value` is current, and the `unstyled` frame drops its OWN active
+        // default (`...!unstyled && !activeStyle && {…}` in the compiled frame) — so
+        // without this the active tab is painted identically to the rest and the row
+        // reads as though nothing is chosen. A raised `$background` pill on the
+        // `$hover` track: shadcn's `data-[state=active]:bg-background shadow-sm`.
+        activeStyle: {
+            bg: '$background',
+            shadowColor: '$shadowColor',
+            shadowOpacity: 0.12,
+            shadowRadius: 3,
+            shadowOffset: { width: 0, height: 1 },
+        }, ...p, children: [startIcon, ink(children, undefined, { size: '$2', fontWeight: '500' }), badge, endIcon] }));
+};
 const TabsContent = ({ children, ...p }) => (_jsx(GuiTabs.Content, { ...slot('tabs-content'), flex: 1, ...p, children: ink(children) }));
 export { Tabs, TabsList, TabsTrigger, TabsContent };
 //# sourceMappingURL=tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/backends/gui/tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,gFAAgF;AAChF,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,KAAK,GAAG,EAAE,CAAA;AAOhB,MAAM,IAAI,GAAG,CAAC,CAAY,EAAE,EAAE,CAAC,KAAC,OAAO,OAAK,IAAI,CAAC,MAAM,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,KAAK,CAAC,GAAI,CAAA;AAEnG,MAAM,QAAQ,GAAG,CAAC,CAAgB,EAAE,EAAE,CAAC,CACrC,KAAC,OAAO,CAAC,IAAI,OACP,IAAI,CAAC,WAAW,CAAC,EACrB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,KAAK,EACb,CAAC,EAAE,CAAC,EACJ,GAAG,EAAE,CAAC,EACN,EAAE,EAAC,QAAQ,EACX,OAAO,EAAC,IAAI,KACR,CAAC,GACL,CACH,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,OAAO,CAAC,GAAG,OACN,IAAI,CAAC,cAAc,CAAC,EACxB,QAAQ,QACR,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAC,MAAM,EACb,EAAE,EAAC,IAAI,EACP,GAAG,EAAC,MAAM,EACV,OAAO,EAAC,IAAI,EACZ,MAAM,EAAC,SAAS,KACZ,KAAK,CAAC,KAAK,EAAE,EAAE,EAAE,GAAG,CAAC,EACzB,UAAU,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAC3B,UAAU,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE;IAC3B,4EAA4E;IAC5E,0EAA0E;IAC1E,6EAA6E;IAC7E,6EAA6E;IAC7E,wEAAwE;IACxE,0EAA0E;IAC1E,WAAW,EAAE;QACX,EAAE,EAAE,aAAa;QACjB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;KACtC,KACG,CAAC,YAEJ,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,GAChD,CACf,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,OAAO,CAAC,OAAO,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,KAAM,CAAC,YACtD,GAAG,CAAC,QAAQ,CAAC,GACE,CACnB,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/backends/gui/tabs.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/tag.cjs

@@ -0,0 +1,48 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = Tag;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Tag — a coloured label: a select option's value, a kanban column, a status
+ * word, a group header.
+ *
+ * The colour is DATA — the hue a person picked for the option — so it comes
+ * from the data palette (@hanzo/tokens), never from the chrome ladder: soft is
+ * the hue's step 3 under step 11 ink, solid swaps them onto the ground, outline
+ * and ghost keep the ink alone. `transparent` is a label with no colour of its
+ * own, and a colour this palette does not know reads as gray rather than as
+ * nothing.
+ *
+ * Re-expressed from twenty-ui's Tag (MIT, see NOTICE): 20px tall, 8px gutter,
+ * 4px gap and radius, 13px text, a 14px start icon, a dashed outline for "no
+ * value", string labels truncated with an overflow hint.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const hue_1 = require("./hue.cjs");
+const truncated_text_1 = require("./truncated-text.cjs");
+const press_1 = require("./press.cjs");
+const slot_1 = require("./slot.cjs");
+const HEIGHT = 20;
+const ICON = 14;
+/** The icon, at the tag's size and ink, where it names neither. */
+const mark = (icon, color) => {
+    if (!(0, react_1.isValidElement)(icon))
+        return icon;
+    const own = icon.props;
+    return (0, react_1.cloneElement)(icon, {
+        ...(own.size == null ? { size: ICON } : null),
+        ...(own.color == null ? { color } : null),
+    });
+};
+function Tag({ color = 'gray', variant = 'soft', weight = 'regular', startIcon, endElement, truncate = true, borderStyle = 'solid', onPress, href, disabled = false, children, style, ...props }) {
+    const bare = color === 'transparent';
+    const hue = (0, hue_1.hueOr)(bare ? 'gray' : color);
+    const { style: hueStyle, tone } = (0, hue_1.useTone)(hue, [3, 11]);
+    const ink = bare ? '$aside' : variant === 'solid' ? '$background' : tone(11);
+    const fill = bare || variant === 'outline' || variant === 'ghost' ? 'transparent' : variant === 'solid' ? tone(11) : tone(3);
+    const text = { size: '$2', fontWeight: weight === 'medium' ? '500' : undefined, color: ink };
+    const interactive = !disabled && (onPress != null || href != null);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('tag'), "data-color": bare ? 'transparent' : hue, "data-variant": variant, ...(href != null ? { render: 'a', href } : onPress != null ? { ...(0, press_1.press)(disabled ? undefined : onPress) } : { render: 'span' }), ...(disabled ? { 'aria-disabled': true } : null), display: "inline-flex", self: "flex-start", items: "center", gap: "$1", height: HEIGHT, px: "$2", maxW: "100%", minW: 0, rounded: "$xs", bg: fill, ...(variant === 'outline' ? { borderWidth: 1, borderColor: '$rim', borderStyle } : null), overflow: "hidden", opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : interactive ? 'pointer' : undefined, ...(interactive ? { focusVisibleStyle: press_1.RING } : null), style: { ...hueStyle, ...style }, ...props, children: [startIcon ? mark(startIcon, ink) : null, typeof children === 'string' || typeof children === 'number' ? (truncate ? ((0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: String(children), ...text })) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...text, children: children }))) : (children), endElement ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('tag-end'), shrink: 0, items: "center", children: endElement })) : null] }));
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Tag — a coloured label: a select option's value, a kanban column, a status
+ * word, a group header.
+ *
+ * The colour is DATA — the hue a person picked for the option — so it comes
+ * from the data palette (@hanzo/tokens), never from the chrome ladder: soft is
+ * the hue's step 3 under step 11 ink, solid swaps them onto the ground, outline
+ * and ghost keep the ink alone. `transparent` is a label with no colour of its
+ * own, and a colour this palette does not know reads as gray rather than as
+ * nothing.
+ *
+ * Re-expressed from twenty-ui's Tag (MIT, see NOTICE): 20px tall, 8px gutter,
+ * 4px gap and radius, 13px text, a 14px start icon, a dashed outline for "no
+ * value", string labels truncated with an overflow hint.
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+import { type DataHue } from './hue.js';
+export type TagColor = DataHue | 'transparent';
+/**
+ * One entry of a `Tags` row. The type shares the component's name, as the entry
+ * shape did before the component existed: `import type { Tag }` keeps meaning
+ * the entry, and `Tag` in JSX is the component.
+ */
+export type Tag = {
+    id: string;
+    label: string;
+    /** A data hue: the entry is drawn as a coloured `Tag` rather than a badge. */
+    color?: TagColor;
+};
+export type TagVariant = 'soft' | 'solid' | 'outline' | 'ghost';
+export type TagProps = Omit<ComponentProps<typeof XStack>, 'children' | 'color'> & {
+    /** One of the thirty data hues, or `transparent`. Anything else reads as gray. */
+    color?: TagColor | (string & {});
+    variant?: TagVariant;
+    weight?: 'regular' | 'medium';
+    /** An icon before the label, drawn at 14px in the tag's ink unless it names its own. */
+    startIcon?: ReactNode;
+    /** After the label: a remove button, a count. */
+    endElement?: ReactNode;
+    /** One line with an ellipsis and an overflow hint (string children). Default true. */
+    truncate?: boolean;
+    /** The outline variant's edge: `dashed` marks an empty value ("No value"). */
+    borderStyle?: 'solid' | 'dashed';
+    /** Makes the tag a button. */
+    onPress?: () => void;
+    /** Makes the tag a link. */
+    href?: string;
+    disabled?: boolean;
+    children?: ReactNode;
+};
+export declare function Tag({ color, variant, weight, startIcon, endElement, truncate, borderStyle, onPress, href, disabled, children, style, ...props }: TagProps): import("react").JSX.Element;
+//# sourceMappingURL=tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tag.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAe,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAgC,KAAK,cAAc,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5G,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,OAAO,CAAA;AAKpD,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAA;AAE9C;;;;GAIG;AACH,MAAM,MAAM,GAAG,GAAG;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AACD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAK/D,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACjF,kFAAkF;IAClF,KAAK,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAChC,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,wFAAwF;IACxF,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,iDAAiD;IACjD,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAChC,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAYD,wBAAgB,GAAG,CAAC,EAClB,KAAc,EACd,OAAgB,EAChB,MAAkB,EAClB,SAAS,EACT,UAAU,EACV,QAAe,EACf,WAAqB,EACrB,OAAO,EACP,IAAI,EACJ,QAAgB,EAChB,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,QAAQ,+BAmDV"}

package/dist/backends/gui/tag.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tag — a coloured label: a select option's value, a kanban column, a status
+ * word, a group header.
+ *
+ * The colour is DATA — the hue a person picked for the option — so it comes
+ * from the data palette (@hanzo/tokens), never from the chrome ladder: soft is
+ * the hue's step 3 under step 11 ink, solid swaps them onto the ground, outline
+ * and ghost keep the ink alone. `transparent` is a label with no colour of its
+ * own, and a colour this palette does not know reads as gray rather than as
+ * nothing.
+ *
+ * Re-expressed from twenty-ui's Tag (MIT, see NOTICE): 20px tall, 8px gutter,
+ * 4px gap and radius, 13px text, a 14px start icon, a dashed outline for "no
+ * value", string labels truncated with an overflow hint.
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { cloneElement, isValidElement } from 'react';
+import { hueOr, useTone } from './hue.js';
+import { TruncatedText } from './truncated-text.js';
+import { press, RING } from './press.js';
+import { slot } from './slot.js';
+const HEIGHT = 20;
+const ICON = 14;
+/** The icon, at the tag's size and ink, where it names neither. */
+const mark = (icon, color) => {
+    if (!isValidElement(icon))
+        return icon;
+    const own = icon.props;
+    return cloneElement(icon, {
+        ...(own.size == null ? { size: ICON } : null),
+        ...(own.color == null ? { color } : null),
+    });
+};
+export function Tag({ color = 'gray', variant = 'soft', weight = 'regular', startIcon, endElement, truncate = true, borderStyle = 'solid', onPress, href, disabled = false, children, style, ...props }) {
+    const bare = color === 'transparent';
+    const hue = hueOr(bare ? 'gray' : color);
+    const { style: hueStyle, tone } = useTone(hue, [3, 11]);
+    const ink = bare ? '$aside' : variant === 'solid' ? '$background' : tone(11);
+    const fill = bare || variant === 'outline' || variant === 'ghost' ? 'transparent' : variant === 'solid' ? tone(11) : tone(3);
+    const text = { size: '$2', fontWeight: weight === 'medium' ? '500' : undefined, color: ink };
+    const interactive = !disabled && (onPress != null || href != null);
+    return (_jsxs(XStack, { ...slot('tag'), "data-color": bare ? 'transparent' : hue, "data-variant": variant, ...(href != null ? { render: 'a', href } : onPress != null ? { ...press(disabled ? undefined : onPress) } : { render: 'span' }), ...(disabled ? { 'aria-disabled': true } : null), display: "inline-flex", self: "flex-start", items: "center", gap: "$1", height: HEIGHT, px: "$2", maxW: "100%", minW: 0, rounded: "$xs", bg: fill, ...(variant === 'outline' ? { borderWidth: 1, borderColor: '$rim', borderStyle } : null), overflow: "hidden", opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : interactive ? 'pointer' : undefined, ...(interactive ? { focusVisibleStyle: RING } : null), style: { ...hueStyle, ...style }, ...props, children: [startIcon ? mark(startIcon, ink) : null, typeof children === 'string' || typeof children === 'number' ? (truncate ? (_jsx(TruncatedText, { text: String(children), ...text })) : (_jsx(SizableText, { ...text, children: children }))) : (children), endElement ? (_jsx(XStack, { ...slot('tag-end'), shrink: 0, items: "center", children: endElement })) : null] }));
+}
+//# sourceMappingURL=tag.js.map

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

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

package/dist/backends/gui/tags.cjs

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tags = Tags;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Tags — a wrapping row of removable labels, built on `Badge`.
+ * Tags — a wrapping row of removable labels, built on `Badge`, or on `Tag` for
+ * an entry that carries a data hue (twenty-ui's select-option tags, MIT, see
+ * NOTICE) — so a list of coloured options and a list of plain labels are one
+ * component, and an entry without a colour renders exactly as before.
  *
  * Each entry is a plain `{ id, label }`; passing `onRemove` grows the badge a
  * close button that reports which entry was pressed. The list carries no
@@ -14,9 +17,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const badge_1 = require("./badge.cjs");
+const tag_1 = require("./tag.cjs");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const REMOVE = 16;
 function Tags({ tags, onRemove, variant = 'default', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('tags'), flexWrap: "wrap", gap: "$2", ...props, children: tags.map((tag) => ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: variant, children: [tag.label, onRemove ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('tags-remove'), render: "button", ...{ type: 'button' }, rounded: "$10", items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { opacity: 1, bg: '$hover' }, ...(0, gesture_1.touch)(REMOVE), "aria-label": `Remove ${tag.label}`, onPress: () => onRemove(tag.id), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12 }) })) : null] }, tag.id))) }));
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('tags'), flexWrap: "wrap", gap: "$2", ...props, children: tags.map((tag) => {
+            const remove = onRemove ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('tags-remove'), render: "button", ...{ type: 'button' }, rounded: "$10", items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { opacity: 1, bg: '$hover' }, ...(0, gesture_1.touch)(REMOVE), "aria-label": `Remove ${tag.label}`, onPress: () => onRemove(tag.id), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12 }) })) : null;
+            return tag.color ? ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: tag.color, endElement: remove, children: tag.label }, tag.id)) : ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: variant, children: [tag.label, remove] }, tag.id));
+        }) }));
 }

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

@@ -1,5 +1,8 @@
 /**
- * Tags — a wrapping row of removable labels, built on `Badge`.
+ * Tags — a wrapping row of removable labels, built on `Badge`, or on `Tag` for
+ * an entry that carries a data hue (twenty-ui's select-option tags, MIT, see
+ * NOTICE) — so a list of coloured options and a list of plain labels are one
+ * component, and an entry without a colour renders exactly as before.
  *
  * Each entry is a plain `{ id, label }`; passing `onRemove` grows the badge a
  * close button that reports which entry was pressed. The list carries no
@@ -9,10 +12,8 @@
 import { XStack } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
 import { type BadgeVariant } from './badge.js';
-export type Tag = {
-    id: string;
-    label: string;
-};
+import { type Tag } from './tag.js';
+export type { Tag };
 export type TagsProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
     tags: Tag[];
     onRemove?: (id: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tags.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAIlD,MAAM,MAAM,GAAG,GAAG;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CAC9B,CAAA;AAID,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BA4BhF"}
+{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tags.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAmB,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAIjD,YAAY,EAAE,GAAG,EAAE,CAAA;AAEnB,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CAC9B,CAAA;AAID,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAmChF"}

package/dist/backends/gui/tags.js

@@ -1,7 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Tags — a wrapping row of removable labels, built on `Badge`.
+ * Tags — a wrapping row of removable labels, built on `Badge`, or on `Tag` for
+ * an entry that carries a data hue (twenty-ui's select-option tags, MIT, see
+ * NOTICE) — so a list of coloured options and a list of plain labels are one
+ * component, and an entry without a colour renders exactly as before.
  *
  * Each entry is a plain `{ id, label }`; passing `onRemove` grows the badge a
  * close button that reports which entry was pressed. The list carries no
@@ -11,10 +14,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XStack } from '@hanzo/gui';
 import { X } from '@hanzogui/lucide-icons-2';
 import { Badge } from './badge.js';
+import { Tag as Coloured } from './tag.js';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
 const REMOVE = 16;
 export function Tags({ tags, onRemove, variant = 'default', ...props }) {
-    return (_jsx(XStack, { ...slot('tags'), flexWrap: "wrap", gap: "$2", ...props, children: tags.map((tag) => (_jsxs(Badge, { variant: variant, children: [tag.label, onRemove ? (_jsx(XStack, { ...slot('tags-remove'), render: "button", ...{ type: 'button' }, rounded: "$10", items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { opacity: 1, bg: '$hover' }, ...touch(REMOVE), "aria-label": `Remove ${tag.label}`, onPress: () => onRemove(tag.id), children: _jsx(X, { size: 12 }) })) : null] }, tag.id))) }));
+    return (_jsx(XStack, { ...slot('tags'), flexWrap: "wrap", gap: "$2", ...props, children: tags.map((tag) => {
+            const remove = onRemove ? (_jsx(XStack, { ...slot('tags-remove'), render: "button", ...{ type: 'button' }, rounded: "$10", items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { opacity: 1, bg: '$hover' }, ...touch(REMOVE), "aria-label": `Remove ${tag.label}`, onPress: () => onRemove(tag.id), children: _jsx(X, { size: 12 }) })) : null;
+            return tag.color ? (_jsx(Coloured, { color: tag.color, endElement: remove, children: tag.label }, tag.id)) : (_jsxs(Badge, { variant: variant, children: [tag.label, remove] }, tag.id));
+        }) }));
 }
 //# sourceMappingURL=tags.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../../src/backends/gui/tags.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,CAAC,EAAE,MAAM,0BAA0B,CAAA;AAE5C,OAAO,EAAE,KAAK,EAAqB,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAajC,MAAM,MAAM,GAAG,EAAE,CAAA;AAEjB,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,EAAa;IAC/E,OAAO,CACL,KAAC,MAAM,OAAK,IAAI,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,KAAK,KAAK,YACzD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,MAAC,KAAK,IAAc,OAAO,EAAE,OAAO,aACjC,GAAG,CAAC,KAAK,EACT,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,OACD,IAAI,CAAC,aAAa,CAAC,EACvB,MAAM,EAAC,QAAQ,KACV,EAAE,IAAI,EAAE,QAAQ,EAAa,EAClC,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,GAAG,EACZ,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KACpC,KAAK,CAAC,MAAM,CAAC,gBACL,UAAU,GAAG,CAAC,KAAK,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,YAE/B,KAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,GACR,CACV,CAAC,CAAC,CAAC,IAAI,KAnBE,GAAG,CAAC,EAAE,CAoBV,CACT,CAAC,GACK,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../../src/backends/gui/tags.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,CAAC,EAAE,MAAM,0BAA0B,CAAA;AAE5C,OAAO,EAAE,KAAK,EAAqB,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,GAAG,IAAI,QAAQ,EAAY,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAUjC,MAAM,MAAM,GAAG,EAAE,CAAA;AAEjB,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,EAAa;IAC/E,OAAO,CACL,KAAC,MAAM,OAAK,IAAI,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,KAAK,KAAK,YACzD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAChB,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CACtB,KAAC,MAAM,OACD,IAAI,CAAC,aAAa,CAAC,EACvB,MAAM,EAAC,QAAQ,KACV,EAAE,IAAI,EAAE,QAAQ,EAAa,EAClC,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,GAAG,EACZ,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KACpC,KAAK,CAAC,MAAM,CAAC,gBACL,UAAU,GAAG,CAAC,KAAK,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,YAE/B,KAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,GACR,CACV,CAAC,CAAC,CAAC,IAAI,CAAA;YACV,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CACjB,KAAC,QAAQ,IAAc,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,YACxD,GAAG,CAAC,KAAK,IADG,GAAG,CAAC,EAAE,CAEV,CACZ,CAAC,CAAC,CAAC,CACF,MAAC,KAAK,IAAc,OAAO,EAAE,OAAO,aACjC,GAAG,CAAC,KAAK,EACT,MAAM,KAFG,GAAG,CAAC,EAAE,CAGV,CACT,CAAA;QACH,CAAC,CAAC,GACK,CACV,CAAA;AACH,CAAC"}