@hanzo/ui 8.27.91 → 8.28.0

package/dist/backends/gui/card.js

@@ -7,10 +7,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * and a row is the one box model that also exists on native.
  */
 import { SizableText, XStack, YStack, styled, withStaticProperties } from '@hanzo/gui';
+import { createContext, useContext } from 'react';
+import { useDensity } from './density.js';
 import { AspectRatio } from './aspect-ratio.js';
 import { ink } from './ink.js';
 import { slot } from './slot.js';
 const PAD = 24;
+/**
+ * The compact card (twenty-ui's Card, MIT, NOTICE): the settings and record
+ * frame. No inset of its own and an 8px corner; a Header and a Footer band at
+ * 8×16 in 12px medium on the ground, a Content well at 16 on the panel rung,
+ * hairlines between them (`divider` on Content, on by default for the Footer).
+ * Asked for with `density="compact"` or given by a compact `<Density>`. The
+ * regular card stays the 24px-padded panel.
+ */
+const Compact = /* @__PURE__ */ createContext(false);
+const COMPACT = {
+    frame: { py: 0, gap: 0, rounded: '$3', overflow: 'hidden', bg: 'transparent' },
+    band: { px: 16, py: 8, bg: '$background' },
+    content: { p: 16, bg: '$panel' },
+};
 const CardFrame = styled(YStack, {
     name: 'Card',
     bg: '$background',
@@ -38,30 +54,43 @@ const DescriptionFrame = styled(SizableText, { name: 'CardDescription', size: '$
 const ActionFrame = styled(XStack, { name: 'CardAction', self: 'flex-end', shrink: 0 });
 const ContentFrame = styled(YStack, { name: 'CardContent', px: PAD });
 const FooterFrame = styled(XStack, { name: 'CardFooter', px: PAD, items: 'center' });
-const Card = ({ interactive, onPress, ...p }) => (_jsx(CardFrame, { ...slot('card'), ...(interactive
-        ? {
-            role: 'button',
-            tabIndex: 0,
-            cursor: 'pointer',
-            hoverStyle: { borderColor: '$dim' },
-            focusStyle: { borderColor: '$dim', outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$dim' },
-            // A div with role="button" is not a button: the browser gives it no
-            // keyboard activation, so it has to be spelled out or the card is
-            // mouse-only. Space must also preventDefault or the page scrolls.
-            onKeyDown: (e) => {
-                if (e.key !== 'Enter' && e.key !== ' ')
-                    return;
-                e.preventDefault();
-                onPress?.(e);
-            },
-        }
-        : null), onPress: onPress, ...p }));
-const CardHeader = (p) => _jsx(HeaderFrame, { ...slot('card-header'), ...p });
+const Card = ({ interactive, onPress, density, children, ...p }) => {
+    const near = useDensity();
+    const compact = (density ?? near) === 'compact';
+    return (_jsx(CardFrame, { ...slot('card'), ...(compact ? { 'data-density': 'compact', ...COMPACT.frame } : null), ...(interactive
+            ? {
+                role: 'button',
+                tabIndex: 0,
+                cursor: 'pointer',
+                hoverStyle: compact ? { bg: '$hover' } : { borderColor: '$dim' },
+                focusStyle: { borderColor: '$dim', outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$dim' },
+                // A div with role="button" is not a button: the browser gives it no
+                // keyboard activation, so it has to be spelled out or the card is
+                // mouse-only. Space must also preventDefault or the page scrolls.
+                onKeyDown: (e) => {
+                    if (e.key !== 'Enter' && e.key !== ' ')
+                        return;
+                    e.preventDefault();
+                    onPress?.(e);
+                },
+            }
+            : null), onPress: onPress, ...p, children: _jsx(Compact.Provider, { value: compact, children: children }) }));
+};
+const CardHeader = ({ children, ...p }) => {
+    const compact = useContext(Compact);
+    return (_jsx(HeaderFrame, { ...slot('card-header'), ...(compact ? { ...COMPACT.band, gap: '$1', borderBottomWidth: 1, borderColor: '$borderColor' } : null), ...p, children: compact ? ink(children, SizableText, { size: '$1', fontWeight: '500', color: '$aside' }) : children }));
+};
 const CardTitle = (p) => _jsx(TitleFrame, { ...slot('card-title'), ...p });
 const CardDescription = (p) => _jsx(DescriptionFrame, { ...slot('card-description'), ...p });
 const CardAction = (p) => _jsx(ActionFrame, { ...slot('card-action'), ...p });
-const CardContent = ({ children, ...p }) => (_jsx(ContentFrame, { ...slot('card-content'), ...p, children: ink(children) }));
-const CardFooter = ({ children, ...p }) => (_jsx(FooterFrame, { ...slot('card-footer'), ...p, children: ink(children) }));
+const CardContent = ({ children, divider = false, ...p }) => {
+    const compact = useContext(Compact);
+    return (_jsx(ContentFrame, { ...slot('card-content'), ...(compact ? { ...COMPACT.content, ...(divider ? { borderBottomWidth: 1, borderColor: '$borderColor' } : null) } : null), ...p, children: ink(children) }));
+};
+const CardFooter = ({ children, divider = true, ...p }) => {
+    const compact = useContext(Compact);
+    return (_jsx(FooterFrame, { ...slot('card-footer'), ...(compact ? { ...COMPACT.band, ...(divider ? { borderTopWidth: 1, borderColor: '$borderColor' } : null) } : null), ...p, children: compact ? ink(children, SizableText, { size: '$1', color: '$aside' }) : ink(children) }));
+};
 const CardMedia = ({ ratio = 16 / 10, ...p }) => (_jsx(AspectRatio, { ...slot('card-media'), ratio: ratio, mt: -PAD, ...p }));
 /**
  * The dot-namespace. `Card.Media`, `Card.Body`, `Card.Title`, `Card.Meta` are

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

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

package/dist/backends/gui/checkbox.cjs

@@ -6,12 +6,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Checkbox — 16px box, `touch()` to the 44px floor on web and native alike.
  * @hanzogui/checkbox owns the checked/indeterminate state and a11y.
+ *
+ * Two looks, one control.
+ *
+ * `plain` is the box every Hanzo surface has drawn: a 16px well with a control
+ * edge and an `$ink` tick, never filled. It is what a Checkbox renders when it
+ * names nothing else, so no existing caller moves.
+ *
+ * The record look is twenty-ui's (MIT, NOTICE), asked for by naming any of
+ * `variant` (solid | outline | soft), `size` (sm 12px | md 18px box), `shape`
+ * (square | round), `color` (accent | success | warning) or `hoverable`, or by a
+ * `<Density value="compact">` around it. The box FILLS when checked — the
+ * monochrome accent (`--primary`, which an org's accent restates) under its own
+ * foreground for the glyph — and `hoverable` (on by default there) widens the
+ * hit area by 5px (sm) or 6px (md) round the box with a hover halo, so a row's
+ * select column is a 24px target drawn as a 14px box.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const react_1 = require("react");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
+const density_1 = require("./density.cjs");
 const BOX = 16;
 /**
  * The mark: a tick when checked, a dash when indeterminate. `$ink` on the
@@ -22,18 +38,74 @@ const Mark = () => {
     const Icon = (0, react_1.useContext)(gui_1.CheckboxContext).checked === 'indeterminate' ? lucide_icons_2_1.Minus : lucide_icons_2_1.Check;
     return (0, jsx_runtime_1.jsx)(Icon, { size: BOX - 3, color: "$ink", strokeWidth: 3 });
 };
-const Checkbox = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Checkbox, { ...(0, slot_1.slot)('checkbox'), width: BOX, height: BOX, flexShrink: 0, 
-    // The frame is a <button>, which the user agent pads 1px 6px: on a 16px
-    // border box that leaves a 2px-wide content box and squeezes the 13px mark
-    // to 2px. Zero padding gives the mark the whole 14px inside the border.
-    padding: 0, borderRadius: "$2", borderWidth: 1, 
-    // A CONTROL boundary, not a surface hairline. `$borderColor` is 10% white —
-    // right for a card edge sitting on its own fill, and 1.26:1 against the
-    // ground, where WCAG 1.4.11 asks 3:1 for the visible boundary of a control.
-    // An unchecked box was therefore not quiet, it was absent. `$bound` is
-    // 3.45:1. The two jobs shared one token and only one of them was satisfied.
-    borderColor: "$bound", backgroundColor: "transparent", 
-    // gui fills a checked box with `$backgroundActive` unless `activeStyle` is
-    // given; the well stays transparent so the `$ink` mark keeps its contrast.
-    activeStyle: { bg: 'transparent' }, ...(0, gesture_1.touch)(BOX), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Checkbox.Indicator, { ...(0, slot_1.slot)('checkbox-indicator'), alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Mark, {}) }) }));
+/** The record box per size: the box, its edge, the glyph drawn over it, and the halo's reach. */
+const DIM = {
+    sm: { box: 12, edge: 1, glyph: 14, pad: 5 },
+    md: { box: 18, edge: 1.5, glyph: 20, pad: 6 },
+};
+/** The unchecked edge per variant (twenty-ui: inverted, secondary-inverted, medium). */
+const EDGE = {
+    solid: '$ink',
+    outline: '$hint',
+    soft: '$borderColor',
+};
+/** Per colour: the checked fill, the glyph on it, and the halo a checked box takes under the pointer. */
+const TONE = {
+    accent: { fill: 'var(--primary)', glyph: 'var(--primary-foreground)', tint: '$raised' },
+    success: { fill: '$good', glyph: '$background', tint: 'var(--state-success-bg)' },
+    warning: { fill: 'var(--state-warning)', glyph: '$background', tint: 'var(--state-warning-bg)' },
+};
+/**
+ * The visible box, inside the button. It reads the checked state from the
+ * control's context, so the fill follows a controlled AND an uncontrolled
+ * checkbox.
+ */
+const RecordBox = ({ look }) => {
+    const checked = (0, react_1.useContext)(gui_1.CheckboxContext).checked;
+    const on = checked === true || checked === 'indeterminate';
+    const Icon = checked === 'indeterminate' ? lucide_icons_2_1.Minus : lucide_icons_2_1.Check;
+    const { dim, tone } = look;
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('checkbox-box'), position: "relative", width: dim.box + 2 * dim.edge, height: dim.box + 2 * dim.edge, rounded: look.round ? '$10' : '$xs', borderWidth: dim.edge, borderColor: on ? tone.fill : look.disabled ? '$rim' : EDGE[look.variant], bg: on ? tone.fill : 'transparent', opacity: look.disabled && on ? 0.5 : 1, items: "center", justify: "center", pointerEvents: "none", children: on ? (0, jsx_runtime_1.jsx)(Icon, { size: dim.glyph, color: tone.glyph, strokeWidth: 2.5 }) : null }));
+};
+const Checkbox = ({ variant, size, shape, color, hoverable, ...props }) => {
+    const compact = (0, density_1.useDensity)() === 'compact';
+    const named = size !== undefined || shape !== undefined || color !== undefined || hoverable !== undefined;
+    const resolved = variant ?? (compact || named ? 'solid' : 'plain');
+    if (resolved !== 'plain') {
+        const dim = DIM[size ?? 'sm'];
+        const halo = hoverable ?? true;
+        const outer = dim.box + 2 * dim.edge;
+        const frame = halo ? outer + 2 * dim.pad : outer;
+        // The halo is the BUTTON's own hover, not a layer inside it: Chromium hit-
+        // tests a <button> as one target, so a child never matched :hover and a
+        // halo drawn as one never showed (measured). A checked box takes its
+        // colour's tint, read from the controlled value where there is one.
+        const lit = props.checked === true || props.checked === 'indeterminate';
+        const look = {
+            dim,
+            variant: resolved,
+            tone: TONE[color ?? 'accent'],
+            round: shape === 'round',
+            hoverable: halo,
+            disabled: !!props.disabled,
+        };
+        return ((0, jsx_runtime_1.jsx)(gui_1.Checkbox, { ...(0, slot_1.slot)('checkbox'), "data-variant": resolved, "data-size": size ?? 'sm', width: frame, height: frame, flexShrink: 0, padding: 0, position: "relative", items: "center", justify: "center", borderWidth: 0, rounded: shape === 'round' ? '$10' : halo ? '$3' : '$xs', backgroundColor: "transparent", ...(halo && !props.disabled ? { hoverStyle: { bg: lit ? look.tone.tint : '$hover' } } : null), 
+            // The fill is the box's, drawn from context; the button stays a well.
+            activeStyle: { bg: 'transparent' }, cursor: props.disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(frame), ...props, children: (0, jsx_runtime_1.jsx)(RecordBox, { look: look }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(gui_1.Checkbox, { ...(0, slot_1.slot)('checkbox'), width: BOX, height: BOX, flexShrink: 0, 
+        // The frame is a <button>, which the user agent pads 1px 6px: on a 16px
+        // border box that leaves a 2px-wide content box and squeezes the 13px mark
+        // to 2px. Zero padding gives the mark the whole 14px inside the border.
+        padding: 0, borderRadius: "$2", borderWidth: 1, 
+        // A CONTROL boundary, not a surface hairline. `$borderColor` is 10% white —
+        // right for a card edge sitting on its own fill, and 1.26:1 against the
+        // ground, where WCAG 1.4.11 asks 3:1 for the visible boundary of a control.
+        // An unchecked box was therefore not quiet, it was absent. `$bound` is
+        // 3.45:1. The two jobs shared one token and only one of them was satisfied.
+        borderColor: "$bound", backgroundColor: "transparent", 
+        // gui fills a checked box with `$backgroundActive` unless `activeStyle` is
+        // given; the well stays transparent so the `$ink` mark keeps its contrast.
+        activeStyle: { bg: 'transparent' }, ...(0, gesture_1.touch)(BOX), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Checkbox.Indicator, { ...(0, slot_1.slot)('checkbox-indicator'), alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Mark, {}) }) }));
+};
 exports.Checkbox = Checkbox;

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

@@ -1,10 +1,38 @@
 /**
  * Checkbox — 16px box, `touch()` to the 44px floor on web and native alike.
  * @hanzogui/checkbox owns the checked/indeterminate state and a11y.
+ *
+ * Two looks, one control.
+ *
+ * `plain` is the box every Hanzo surface has drawn: a 16px well with a control
+ * edge and an `$ink` tick, never filled. It is what a Checkbox renders when it
+ * names nothing else, so no existing caller moves.
+ *
+ * The record look is twenty-ui's (MIT, NOTICE), asked for by naming any of
+ * `variant` (solid | outline | soft), `size` (sm 12px | md 18px box), `shape`
+ * (square | round), `color` (accent | success | warning) or `hoverable`, or by a
+ * `<Density value="compact">` around it. The box FILLS when checked — the
+ * monochrome accent (`--primary`, which an org's accent restates) under its own
+ * foreground for the glyph — and `hoverable` (on by default there) widens the
+ * hit area by 5px (sm) or 6px (md) round the box with a hover halo, so a row's
+ * select column is a 24px target drawn as a 14px box.
  */
 import { Checkbox as GuiCheckbox } from '@hanzo/gui';
 import { type ComponentProps } from 'react';
-export type CheckboxProps = ComponentProps<typeof GuiCheckbox>;
-declare const Checkbox: (props: CheckboxProps) => import("react").JSX.Element;
+export type CheckboxVariant = 'plain' | 'solid' | 'outline' | 'soft';
+export type CheckboxSize = 'sm' | 'md';
+export type CheckboxShape = 'square' | 'round';
+export type CheckboxColor = 'accent' | 'success' | 'warning';
+export type CheckboxProps = Omit<ComponentProps<typeof GuiCheckbox>, 'size' | 'color'> & {
+    /** `plain` (the default outside a compact density) or the record looks. */
+    variant?: CheckboxVariant;
+    /** The record box: `sm` 12px (the default there) or `md` 18px, plus its edge. */
+    size?: CheckboxSize;
+    shape?: CheckboxShape;
+    color?: CheckboxColor;
+    /** The halo round the box that widens the hit area. On by default in the record look. */
+    hoverable?: boolean;
+};
+declare const Checkbox: ({ variant, size, shape, color, hoverable, ...props }: CheckboxProps) => import("react").JSX.Element;
 export { Checkbox };
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/checkbox.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAmB,MAAM,YAAY,CAAA;AAErE,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAMvD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAY9D,QAAA,MAAM,QAAQ,UAAW,aAAa,gCA6BrC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/checkbox.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA2B,MAAM,YAAY,CAAA;AAE7E,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAOvD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AACpE,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AACtC,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC9C,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;AAE5D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACvF,2EAA2E;IAC3E,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,iFAAiF;IACjF,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAuED,QAAA,MAAM,QAAQ,yDAA0D,aAAa,gCAgFpF,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/backends/gui/checkbox.js

@@ -3,12 +3,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Checkbox — 16px box, `touch()` to the 44px floor on web and native alike.
  * @hanzogui/checkbox owns the checked/indeterminate state and a11y.
+ *
+ * Two looks, one control.
+ *
+ * `plain` is the box every Hanzo surface has drawn: a 16px well with a control
+ * edge and an `$ink` tick, never filled. It is what a Checkbox renders when it
+ * names nothing else, so no existing caller moves.
+ *
+ * The record look is twenty-ui's (MIT, NOTICE), asked for by naming any of
+ * `variant` (solid | outline | soft), `size` (sm 12px | md 18px box), `shape`
+ * (square | round), `color` (accent | success | warning) or `hoverable`, or by a
+ * `<Density value="compact">` around it. The box FILLS when checked — the
+ * monochrome accent (`--primary`, which an org's accent restates) under its own
+ * foreground for the glyph — and `hoverable` (on by default there) widens the
+ * hit area by 5px (sm) or 6px (md) round the box with a hover halo, so a row's
+ * select column is a 24px target drawn as a 14px box.
  */
-import { Checkbox as GuiCheckbox, CheckboxContext } from '@hanzo/gui';
+import { Checkbox as GuiCheckbox, CheckboxContext, XStack } from '@hanzo/gui';
 import { Check, Minus } from '@hanzogui/lucide-icons-2';
 import { useContext } from 'react';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
+import { useDensity } from './density.js';
 const BOX = 16;
 /**
  * The mark: a tick when checked, a dash when indeterminate. `$ink` on the
@@ -19,19 +35,75 @@ const Mark = () => {
     const Icon = useContext(CheckboxContext).checked === 'indeterminate' ? Minus : Check;
     return _jsx(Icon, { size: BOX - 3, color: "$ink", strokeWidth: 3 });
 };
-const Checkbox = (props) => (_jsx(GuiCheckbox, { ...slot('checkbox'), width: BOX, height: BOX, flexShrink: 0, 
-    // The frame is a <button>, which the user agent pads 1px 6px: on a 16px
-    // border box that leaves a 2px-wide content box and squeezes the 13px mark
-    // to 2px. Zero padding gives the mark the whole 14px inside the border.
-    padding: 0, borderRadius: "$2", borderWidth: 1, 
-    // A CONTROL boundary, not a surface hairline. `$borderColor` is 10% white —
-    // right for a card edge sitting on its own fill, and 1.26:1 against the
-    // ground, where WCAG 1.4.11 asks 3:1 for the visible boundary of a control.
-    // An unchecked box was therefore not quiet, it was absent. `$bound` is
-    // 3.45:1. The two jobs shared one token and only one of them was satisfied.
-    borderColor: "$bound", backgroundColor: "transparent", 
-    // gui fills a checked box with `$backgroundActive` unless `activeStyle` is
-    // given; the well stays transparent so the `$ink` mark keeps its contrast.
-    activeStyle: { bg: 'transparent' }, ...touch(BOX), ...props, children: _jsx(GuiCheckbox.Indicator, { ...slot('checkbox-indicator'), alignItems: "center", justifyContent: "center", children: _jsx(Mark, {}) }) }));
+/** The record box per size: the box, its edge, the glyph drawn over it, and the halo's reach. */
+const DIM = {
+    sm: { box: 12, edge: 1, glyph: 14, pad: 5 },
+    md: { box: 18, edge: 1.5, glyph: 20, pad: 6 },
+};
+/** The unchecked edge per variant (twenty-ui: inverted, secondary-inverted, medium). */
+const EDGE = {
+    solid: '$ink',
+    outline: '$hint',
+    soft: '$borderColor',
+};
+/** Per colour: the checked fill, the glyph on it, and the halo a checked box takes under the pointer. */
+const TONE = {
+    accent: { fill: 'var(--primary)', glyph: 'var(--primary-foreground)', tint: '$raised' },
+    success: { fill: '$good', glyph: '$background', tint: 'var(--state-success-bg)' },
+    warning: { fill: 'var(--state-warning)', glyph: '$background', tint: 'var(--state-warning-bg)' },
+};
+/**
+ * The visible box, inside the button. It reads the checked state from the
+ * control's context, so the fill follows a controlled AND an uncontrolled
+ * checkbox.
+ */
+const RecordBox = ({ look }) => {
+    const checked = useContext(CheckboxContext).checked;
+    const on = checked === true || checked === 'indeterminate';
+    const Icon = checked === 'indeterminate' ? Minus : Check;
+    const { dim, tone } = look;
+    return (_jsx(XStack, { ...slot('checkbox-box'), position: "relative", width: dim.box + 2 * dim.edge, height: dim.box + 2 * dim.edge, rounded: look.round ? '$10' : '$xs', borderWidth: dim.edge, borderColor: on ? tone.fill : look.disabled ? '$rim' : EDGE[look.variant], bg: on ? tone.fill : 'transparent', opacity: look.disabled && on ? 0.5 : 1, items: "center", justify: "center", pointerEvents: "none", children: on ? _jsx(Icon, { size: dim.glyph, color: tone.glyph, strokeWidth: 2.5 }) : null }));
+};
+const Checkbox = ({ variant, size, shape, color, hoverable, ...props }) => {
+    const compact = useDensity() === 'compact';
+    const named = size !== undefined || shape !== undefined || color !== undefined || hoverable !== undefined;
+    const resolved = variant ?? (compact || named ? 'solid' : 'plain');
+    if (resolved !== 'plain') {
+        const dim = DIM[size ?? 'sm'];
+        const halo = hoverable ?? true;
+        const outer = dim.box + 2 * dim.edge;
+        const frame = halo ? outer + 2 * dim.pad : outer;
+        // The halo is the BUTTON's own hover, not a layer inside it: Chromium hit-
+        // tests a <button> as one target, so a child never matched :hover and a
+        // halo drawn as one never showed (measured). A checked box takes its
+        // colour's tint, read from the controlled value where there is one.
+        const lit = props.checked === true || props.checked === 'indeterminate';
+        const look = {
+            dim,
+            variant: resolved,
+            tone: TONE[color ?? 'accent'],
+            round: shape === 'round',
+            hoverable: halo,
+            disabled: !!props.disabled,
+        };
+        return (_jsx(GuiCheckbox, { ...slot('checkbox'), "data-variant": resolved, "data-size": size ?? 'sm', width: frame, height: frame, flexShrink: 0, padding: 0, position: "relative", items: "center", justify: "center", borderWidth: 0, rounded: shape === 'round' ? '$10' : halo ? '$3' : '$xs', backgroundColor: "transparent", ...(halo && !props.disabled ? { hoverStyle: { bg: lit ? look.tone.tint : '$hover' } } : null), 
+            // The fill is the box's, drawn from context; the button stays a well.
+            activeStyle: { bg: 'transparent' }, cursor: props.disabled ? 'not-allowed' : 'pointer', ...touch(frame), ...props, children: _jsx(RecordBox, { look: look }) }));
+    }
+    return (_jsx(GuiCheckbox, { ...slot('checkbox'), width: BOX, height: BOX, flexShrink: 0, 
+        // The frame is a <button>, which the user agent pads 1px 6px: on a 16px
+        // border box that leaves a 2px-wide content box and squeezes the 13px mark
+        // to 2px. Zero padding gives the mark the whole 14px inside the border.
+        padding: 0, borderRadius: "$2", borderWidth: 1, 
+        // A CONTROL boundary, not a surface hairline. `$borderColor` is 10% white —
+        // right for a card edge sitting on its own fill, and 1.26:1 against the
+        // ground, where WCAG 1.4.11 asks 3:1 for the visible boundary of a control.
+        // An unchecked box was therefore not quiet, it was absent. `$bound` is
+        // 3.45:1. The two jobs shared one token and only one of them was satisfied.
+        borderColor: "$bound", backgroundColor: "transparent", 
+        // gui fills a checked box with `$backgroundActive` unless `activeStyle` is
+        // given; the well stays transparent so the `$ink` mark keeps its contrast.
+        activeStyle: { bg: 'transparent' }, ...touch(BOX), ...props, children: _jsx(GuiCheckbox.Indicator, { ...slot('checkbox-indicator'), alignItems: "center", justifyContent: "center", children: _jsx(Mark, {}) }) }));
+};
 export { Checkbox };
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/backends/gui/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;GAGG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACrE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,GAAG,GAAG,EAAE,CAAA;AAId;;;;GAIG;AACH,MAAM,IAAI,GAAG,GAAG,EAAE;IAChB,MAAM,IAAI,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IACpF,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,WAAW,EAAE,CAAC,GAAI,CAAA;AAC7D,CAAC,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,CACzC,KAAC,WAAW,OACN,IAAI,CAAC,UAAU,CAAC,EACpB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,UAAU,EAAE,CAAC;IACb,wEAAwE;IACxE,2EAA2E;IAC3E,wEAAwE;IACxE,OAAO,EAAE,CAAC,EACV,YAAY,EAAC,IAAI,EACjB,WAAW,EAAE,CAAC;IACd,4EAA4E;IAC5E,wEAAwE;IACxE,4EAA4E;IAC5E,uEAAuE;IACvE,4EAA4E;IAC5E,WAAW,EAAC,QAAQ,EACpB,eAAe,EAAC,aAAa;IAC7B,2EAA2E;IAC3E,2EAA2E;IAC3E,WAAW,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,KAC9B,KAAK,CAAC,GAAG,CAAC,KACV,KAAK,YAET,KAAC,WAAW,CAAC,SAAS,OAAK,IAAI,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,YAChG,KAAC,IAAI,KAAG,GACc,GACZ,CACf,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/backends/gui/checkbox.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/chip.cjs

@@ -0,0 +1,51 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = Chip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Chip — a compact inline label with something before and after it: a record
+ * (avatar + name), an actor, an email or a phone, a "Not shared" lock.
+ *
+ * A chip is chrome, not data — it carries no hue of its own (that is `Tag`'s
+ * job) — so its grounds are the surface ladder: ghost takes its parent's, soft
+ * and solid lift one and two rungs, and a pressable chip lifts one more under
+ * the pointer and once again while pressed. The label truncates with an
+ * overflow hint, and the press area meets the 44px floor through `touch()`,
+ * never through padding, so the chip keeps its 20px.
+ *
+ * Re-expressed from twenty-ui's Chip (MIT, see NOTICE): sm 20 / md 24 tall, a
+ * 4px gutter and gap, square (4px) or round, an end element behind an optional
+ * hairline divider, a max width that shrinks the label and not the padding.
+ */
+const gui_1 = require("@hanzo/gui");
+const truncated_text_1 = require("./truncated-text.cjs");
+const ink_1 = require("./ink.cjs");
+const press_1 = require("./press.cjs");
+const gesture_1 = require("./gesture.cjs");
+const slot_1 = require("./slot.cjs");
+const HEIGHT = { sm: 20, md: 24 };
+/** Rest, hover and pressed grounds per variant: each step one rung up the ladder. */
+const GROUND = {
+    ghost: { rest: 'transparent', hover: '$hover', down: '$raised' },
+    soft: { rest: '$hover', hover: '$raised', down: '$rim' },
+    solid: { rest: '$raised', hover: '$rim', down: '$bound' },
+};
+function Chip({ label, size = 'sm', variant = 'ghost', color = 'primary', shape = 'square', weight = 'regular', startElement, endElement, endElementDivider = false, truncate = true, tooltipContent, onPress, href, clickable, disabled = false, children, ...props }) {
+    const ground = GROUND[variant];
+    const pressable = !disabled && (clickable ?? (onPress != null || href != null));
+    const text = {
+        size: '$2',
+        fontWeight: weight === 'medium' ? '500' : undefined,
+        color: disabled ? '$hush' : color === 'secondary' ? '$aside' : '$ink',
+    };
+    const body = label ?? children;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('chip'), "data-size": size, "data-variant": variant, ...(href != null && !disabled ? { render: 'a', href } : onPress != null ? (0, press_1.press)(disabled ? undefined : onPress) : null), ...(disabled ? { 'aria-disabled': true } : null), display: "inline-flex", self: "flex-start", items: "center", gap: "$1", height: HEIGHT[size], px: "$1", maxW: "100%", minW: 0, rounded: shape === 'round' ? '$10' : '$xs', bg: ground.rest, select: "none", cursor: disabled ? 'not-allowed' : pressable ? 'pointer' : undefined, ...(pressable
+            ? {
+                hoverStyle: { bg: ground.hover },
+                pressStyle: { bg: ground.down },
+                focusVisibleStyle: press_1.RING,
+                ...(0, gesture_1.touch)(HEIGHT[size], 44, 'y'),
+            }
+            : null), ...props, children: [startElement ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('chip-start'), shrink: 0, items: "center", children: startElement })) : null, typeof body === 'string' || typeof body === 'number' ? (truncate ? ((0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: String(body), tooltipContent: tooltipContent, ...text })) : ((0, ink_1.ink)(body, undefined, text))) : (body), endElement ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('chip-end'), shrink: 0, items: "center", self: "stretch", ...(endElementDivider ? { borderLeftWidth: 1, borderColor: '$borderColor', pl: '$1' } : null), children: endElement })) : null] }));
+}

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

@@ -0,0 +1,47 @@
+/**
+ * Chip — a compact inline label with something before and after it: a record
+ * (avatar + name), an actor, an email or a phone, a "Not shared" lock.
+ *
+ * A chip is chrome, not data — it carries no hue of its own (that is `Tag`'s
+ * job) — so its grounds are the surface ladder: ghost takes its parent's, soft
+ * and solid lift one and two rungs, and a pressable chip lifts one more under
+ * the pointer and once again while pressed. The label truncates with an
+ * overflow hint, and the press area meets the 44px floor through `touch()`,
+ * never through padding, so the chip keeps its 20px.
+ *
+ * Re-expressed from twenty-ui's Chip (MIT, see NOTICE): sm 20 / md 24 tall, a
+ * 4px gutter and gap, square (4px) or round, an end element behind an optional
+ * hairline divider, a max width that shrinks the label and not the padding.
+ */
+import { XStack } from '@hanzo/gui';
+import type { ComponentProps, ReactNode } from 'react';
+export type ChipSize = 'sm' | 'md';
+export type ChipVariant = 'ghost' | 'soft' | 'solid';
+export type ChipProps = Omit<ComponentProps<typeof XStack>, 'children' | 'color'> & {
+    label?: ReactNode;
+    size?: ChipSize;
+    variant?: ChipVariant;
+    color?: 'primary' | 'secondary';
+    shape?: 'square' | 'round';
+    weight?: 'regular' | 'medium';
+    /** Before the label: an avatar, an icon. Never shrinks. */
+    startElement?: ReactNode;
+    /** After the label: a remove button, a count. */
+    endElement?: ReactNode;
+    /** A hairline between the label and the end element. */
+    endElementDivider?: boolean;
+    /** One line with an ellipsis and an overflow hint. Default true. */
+    truncate?: boolean;
+    /** The hint, when it should say more than the label. */
+    tooltipContent?: ReactNode;
+    /** Makes the chip a button; it lifts under the pointer. */
+    onPress?: () => void;
+    /** Makes the chip a link — a record chip opens its record. */
+    href?: string;
+    /** Pressable without `onPress`/`href` — when the host handles the press. */
+    clickable?: boolean;
+    disabled?: boolean;
+    children?: ReactNode;
+};
+export declare function Chip({ label, size, variant, color, shape, weight, startElement, endElement, endElementDivider, truncate, tooltipContent, onPress, href, clickable, disabled, children, ...props }: ChipProps): import("react").JSX.Element;
+//# sourceMappingURL=chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/chip.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AAWpD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAClF,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,iDAAiD;IACjD,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,IAAW,EACX,OAAiB,EACjB,KAAiB,EACjB,KAAgB,EAChB,MAAkB,EAClB,YAAY,EACZ,UAAU,EACV,iBAAyB,EACzB,QAAe,EACf,cAAc,EACd,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,+BAkEX"}

package/dist/backends/gui/chip.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chip — a compact inline label with something before and after it: a record
+ * (avatar + name), an actor, an email or a phone, a "Not shared" lock.
+ *
+ * A chip is chrome, not data — it carries no hue of its own (that is `Tag`'s
+ * job) — so its grounds are the surface ladder: ghost takes its parent's, soft
+ * and solid lift one and two rungs, and a pressable chip lifts one more under
+ * the pointer and once again while pressed. The label truncates with an
+ * overflow hint, and the press area meets the 44px floor through `touch()`,
+ * never through padding, so the chip keeps its 20px.
+ *
+ * Re-expressed from twenty-ui's Chip (MIT, see NOTICE): sm 20 / md 24 tall, a
+ * 4px gutter and gap, square (4px) or round, an end element behind an optional
+ * hairline divider, a max width that shrinks the label and not the padding.
+ */
+import { XStack } from '@hanzo/gui';
+import { TruncatedText } from './truncated-text.js';
+import { ink } from './ink.js';
+import { press, RING } from './press.js';
+import { touch } from './gesture.js';
+import { slot } from './slot.js';
+const HEIGHT = { sm: 20, md: 24 };
+/** Rest, hover and pressed grounds per variant: each step one rung up the ladder. */
+const GROUND = {
+    ghost: { rest: 'transparent', hover: '$hover', down: '$raised' },
+    soft: { rest: '$hover', hover: '$raised', down: '$rim' },
+    solid: { rest: '$raised', hover: '$rim', down: '$bound' },
+};
+export function Chip({ label, size = 'sm', variant = 'ghost', color = 'primary', shape = 'square', weight = 'regular', startElement, endElement, endElementDivider = false, truncate = true, tooltipContent, onPress, href, clickable, disabled = false, children, ...props }) {
+    const ground = GROUND[variant];
+    const pressable = !disabled && (clickable ?? (onPress != null || href != null));
+    const text = {
+        size: '$2',
+        fontWeight: weight === 'medium' ? '500' : undefined,
+        color: disabled ? '$hush' : color === 'secondary' ? '$aside' : '$ink',
+    };
+    const body = label ?? children;
+    return (_jsxs(XStack, { ...slot('chip'), "data-size": size, "data-variant": variant, ...(href != null && !disabled ? { render: 'a', href } : onPress != null ? press(disabled ? undefined : onPress) : null), ...(disabled ? { 'aria-disabled': true } : null), display: "inline-flex", self: "flex-start", items: "center", gap: "$1", height: HEIGHT[size], px: "$1", maxW: "100%", minW: 0, rounded: shape === 'round' ? '$10' : '$xs', bg: ground.rest, select: "none", cursor: disabled ? 'not-allowed' : pressable ? 'pointer' : undefined, ...(pressable
+            ? {
+                hoverStyle: { bg: ground.hover },
+                pressStyle: { bg: ground.down },
+                focusVisibleStyle: RING,
+                ...touch(HEIGHT[size], 44, 'y'),
+            }
+            : null), ...props, children: [startElement ? (_jsx(XStack, { ...slot('chip-start'), shrink: 0, items: "center", children: startElement })) : null, typeof body === 'string' || typeof body === 'number' ? (truncate ? (_jsx(TruncatedText, { text: String(body), tooltipContent: tooltipContent, ...text })) : (ink(body, undefined, text))) : (body), endElement ? (_jsx(XStack, { ...slot('chip-end'), shrink: 0, items: "center", self: "stretch", ...(endElementDivider ? { borderLeftWidth: 1, borderColor: '$borderColor', pl: '$1' } : null), children: endElement })) : null] }));
+}
+//# sourceMappingURL=chip.js.map

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

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