@hanzo/ui 8.27.91 → 8.29.0

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"}

package/dist/backends/gui/textarea.cjs

@@ -39,15 +39,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const gui_1 = require("@hanzo/gui");
 const control_1 = require("./control.cjs");
+const density_1 = require("./density.cjs");
+const field_1 = require("./field.cjs");
 const slot_1 = require("./slot.cjs");
 /** Floor for the grown row count. */
 const MIN_ROWS = 3;
+/**
+ * The line each size sets its text on. The record sizes (`sm`, `xs`) set 13px
+ * text on a 16px line, as twenty-ui's Textarea does (MIT, NOTICE); the regular
+ * ones keep the 20px line of the 14px rung.
+ */
+const LINE = { default: 20, lg: 20, sm: 16, xs: 16 };
 const rowsOf = (v) => typeof v === "string" ? v.split("\n").length : 0;
-const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, value, defaultValue, style, size = "default", fill = false, ...props }, ref) {
-    const box = control_1.BOX[size];
+const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, value, defaultValue, style, size, fill = false, maxRows, ...props }, ref) {
+    const density = (0, density_1.useDensity)();
+    const field = (0, field_1.useField)();
+    const resolved = (0, density_1.fieldSize)(size, density);
+    const box = control_1.BOX[resolved];
+    const line = LINE[resolved];
+    const dense = resolved === "sm" || resolved === "xs";
     const [typed, setTyped] = React.useState(() => rowsOf(defaultValue));
     const uncontrolled = value === undefined;
-    const invalid = props["aria-invalid"];
+    const invalid = (0, field_1.invalidOf)(props["aria-invalid"], field);
     const node = React.useRef(null);
     const [grown, setGrown] = React.useState(undefined);
     // Both refs reach the same host: ours to measure it, and the caller's.
@@ -72,7 +85,10 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
         el.style.height = held;
         setGrown((h) => (h === measured ? h : measured));
     }, [shown]);
-    return ((0, jsx_runtime_1.jsx)(gui_1.TextArea, { ref: hold, ...(0, slot_1.slot)("textarea"), rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, ...control_1.FIELD, ...(fill ? control_1.FILL : null), width: "100%", minH: 64, 
+    return ((0, jsx_runtime_1.jsx)(gui_1.TextArea, { ref: hold, ...(0, slot_1.slot)("textarea"), rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, ...control_1.FIELD, ...(density === "compact" ? { bg: "$panel" } : null), ...(fill ? control_1.FILL : null), width: "100%", 
+        // Three lines of the size's own leading, its risers and its two edges —
+        // 64 on the regular rungs, as it has always been; a dense box is shorter.
+        minH: dense ? MIN_ROWS * line + 2 * box.riser + 2 : 64, ...(maxRows ? { maxH: maxRows * line + 2 * box.riser + 2 } : null), 
         // The gutter has to be NAMED, both ways. Left unsaid the HORIZONTAL one
         // came from gui's `textAreaSizeVariant`, which computes its own and landed
         // on 20 — so the one field a form makes tall was also the one indented
@@ -84,11 +100,11 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
         // first line sat 1px under the edge where its neighbours' sat at 8. In a
         // form the two are read together, and the text looked like it was falling
         // out of the top of the box. The riser is that arithmetic, per size.
-        px: box.gutter, pt: box.riser, pb: box.riser, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor", 
+        px: box.gutter, pt: box.riser, pb: box.riser, borderColor: invalid ? "$red7" : "$borderColor", ...(invalid ? { focusStyle: { borderColor: "$red8" } } : null), 
         // The value at the full ink, the hint at the placeholder token. gui's
         // Input sub-theme draws its value at 80% grey, which left a typed value
         // and a sample placeholder one rung apart.
-        color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props, 
+        color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(dense ? { lineHeight: line } : null), opacity: props.disabled ? 0.5 : 1, ...(invalid ? { "aria-invalid": true } : null), ...props, 
         // After the caller's props, so a passed `style` cannot silently disable
         // growth. A fixed height is asked for with `height`.
         style: { ...style, ...(grown ? { height: grown } : null) } }));

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

@@ -23,10 +23,19 @@ import { type FieldSize } from "./control.js";
  * a type that never matched the runtime.
  */
 export type TextareaProps = Omit<React.ComponentProps<typeof TextArea>, "children" | "size"> & Pick<React.ComponentProps<"textarea">, "onKeyDown" | "rows"> & {
-    /** The gutter and riser of the Input it stands under (control.ts `BOX`). */
+    /**
+     * The gutter and riser of the Input it stands under (control.ts `BOX`).
+     * Unset, the nearest `<Density>` decides.
+     */
     size?: FieldSize;
     /** On the raised ground instead of a bare edge (control.ts `FILL`). */
     fill?: boolean;
+    /**
+     * The tallest the field grows, in lines, before it scrolls: the box is
+     * capped at `maxRows` lines plus its risers and edges. A `maxH` the caller
+     * states still wins.
+     */
+    maxRows?: number;
 };
 declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAS5D;;;;;;;;;;;;;;;GAeG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,GAAG;IAC7D,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAEH,QAAA,MAAM,QAAQ,wGA4Eb,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAkB5D;;;;;;;;;;;;;;;GAeG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,GAAG;IAC7D;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAEH,QAAA,MAAM,QAAQ,wGA0Fb,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/backends/gui/textarea.js

@@ -3,15 +3,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { TextArea } from "@hanzo/gui";
 import { BOX, FIELD, FILL } from "./control.js";
+import { fieldSize, useDensity } from "./density.js";
+import { invalidOf, useField } from "./field.js";
 import { slot } from "./slot.js";
 /** Floor for the grown row count. */
 const MIN_ROWS = 3;
+/**
+ * The line each size sets its text on. The record sizes (`sm`, `xs`) set 13px
+ * text on a 16px line, as twenty-ui's Textarea does (MIT, NOTICE); the regular
+ * ones keep the 20px line of the 14px rung.
+ */
+const LINE = { default: 20, lg: 20, sm: 16, xs: 16 };
 const rowsOf = (v) => typeof v === "string" ? v.split("\n").length : 0;
-const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, value, defaultValue, style, size = "default", fill = false, ...props }, ref) {
-    const box = BOX[size];
+const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, value, defaultValue, style, size, fill = false, maxRows, ...props }, ref) {
+    const density = useDensity();
+    const field = useField();
+    const resolved = fieldSize(size, density);
+    const box = BOX[resolved];
+    const line = LINE[resolved];
+    const dense = resolved === "sm" || resolved === "xs";
     const [typed, setTyped] = React.useState(() => rowsOf(defaultValue));
     const uncontrolled = value === undefined;
-    const invalid = props["aria-invalid"];
+    const invalid = invalidOf(props["aria-invalid"], field);
     const node = React.useRef(null);
     const [grown, setGrown] = React.useState(undefined);
     // Both refs reach the same host: ours to measure it, and the caller's.
@@ -36,7 +49,10 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
         el.style.height = held;
         setGrown((h) => (h === measured ? h : measured));
     }, [shown]);
-    return (_jsx(TextArea, { ref: hold, ...slot("textarea"), rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, ...FIELD, ...(fill ? FILL : null), width: "100%", minH: 64, 
+    return (_jsx(TextArea, { ref: hold, ...slot("textarea"), rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, ...FIELD, ...(density === "compact" ? { bg: "$panel" } : null), ...(fill ? FILL : null), width: "100%", 
+        // Three lines of the size's own leading, its risers and its two edges —
+        // 64 on the regular rungs, as it has always been; a dense box is shorter.
+        minH: dense ? MIN_ROWS * line + 2 * box.riser + 2 : 64, ...(maxRows ? { maxH: maxRows * line + 2 * box.riser + 2 } : null), 
         // The gutter has to be NAMED, both ways. Left unsaid the HORIZONTAL one
         // came from gui's `textAreaSizeVariant`, which computes its own and landed
         // on 20 — so the one field a form makes tall was also the one indented
@@ -48,11 +64,11 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
         // first line sat 1px under the edge where its neighbours' sat at 8. In a
         // form the two are read together, and the text looked like it was falling
         // out of the top of the box. The riser is that arithmetic, per size.
-        px: box.gutter, pt: box.riser, pb: box.riser, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor", 
+        px: box.gutter, pt: box.riser, pb: box.riser, borderColor: invalid ? "$red7" : "$borderColor", ...(invalid ? { focusStyle: { borderColor: "$red8" } } : null), 
         // The value at the full ink, the hint at the placeholder token. gui's
         // Input sub-theme draws its value at 80% grey, which left a typed value
         // and a sample placeholder one rung apart.
-        color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props, 
+        color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(dense ? { lineHeight: line } : null), opacity: props.disabled ? 0.5 : 1, ...(invalid ? { "aria-invalid": true } : null), ...props, 
         // After the caller's props, so a passed `style` cannot silently disable
         // growth. A fixed height is asked for with `height`.
         style: { ...style, ...(grown ? { height: grown } : null) } }));

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

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