@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/dist/esm/components/radiogroup/radiogroup.js

@@ -8,7 +8,7 @@ const RadioContext = React.createContext(null);
  * preview cards whose border turns brand when picked (the Theme picker). Arrow
  * keys move between options (roving focus). Controlled or uncontrolled.
  */
-export function RadioGroup({ value, defaultValue, onValueChange, variant = "default", name, className, "aria-label": ariaLabel, children, }) {
+export function RadioGroup({ value, defaultValue, onValueChange, variant = "default", name, className, "aria-label": ariaLabel, children, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue);
     const selected = value ?? internal;
     const generatedName = React.useId();
@@ -31,7 +31,7 @@ export function RadioGroup({ value, defaultValue, onValueChange, variant = "defa
             next.dataset.value && select(next.dataset.value);
         }
     };
-    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), onKeyDown: onKeyDown, children: children }) }));
+    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 export function Radio({ value, label, children, disabled }) {

package/dist/esm/components/radiogroup/radiogroup.recipe.js

@@ -10,7 +10,7 @@ const config = defineRecipe({
     display: flex; flex-direction: column; gap: ${c.space["1"]}; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .radio { display: flex; align-items: center; gap: ${c.space["2"]}; margin: 0; padding: ${c.space["1"]} ${c.space["1"]}; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; }
+    & .radio { display: flex; align-items: center; gap: ${c.space["2"]}; margin: 0; padding: ${c.space["1"]} ${c.space["1"]}; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; }
     & .radio:disabled { opacity: 0.5; cursor: not-allowed; }
     & .radio:focus-visible { outline: none; }
     & .radio-dot { position: relative; flex-shrink: 0; width: 16px; height: 16px; border-radius: ${c.radius.full}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; transition: box-shadow .12s ease; }

package/dist/esm/components/resizablepanel/index.js

@@ -0,0 +1,2 @@
+export { computeDragWidth, percentToWidth, ResizablePanel, readStoredPercent, widthToPercent, writeStoredPercent, } from "./resizablepanel.js";
+export { resizablepanelRecipe } from "./resizablepanel.recipe.js";

package/dist/esm/components/resizablepanel/resizablepanel.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { resizablepanelRecipe } from "./resizablepanel.recipe.js";
+/**
+ * Drag delta -> next width, in px, signed by which edge of the panel the
+ * handle drags from. A left-side panel's handle sits at its *right* edge, so
+ * dragging right (positive dx) grows it; a right-side panel's handle sits at
+ * its *left* edge, so dragging right shrinks it. Pure so drag math can be
+ * unit-tested without a DOM.
+ */
+export function computeDragWidth(startWidth, startX, clientX, side) {
+    const dx = clientX - startX;
+    return side === "left" ? startWidth + dx : startWidth - dx;
+}
+/** width (px) -> percentage of the container's width. Pure, unrounded. */
+export function widthToPercent(width, containerWidth) {
+    if (!(containerWidth > 0))
+        return 0;
+    return (width / containerWidth) * 100;
+}
+/** percentage of the container's width -> width (px). Pure, unrounded. */
+export function percentToWidth(percent, containerWidth) {
+    return (percent / 100) * containerWidth;
+}
+/**
+ * Reads a persisted width percentage, wrapped in try/catch: `localStorage`
+ * can throw (private browsing, storage disabled), and a resizable panel
+ * failing to *render* over a persistence error would be worse than the
+ * panel simply forgetting its width. `storage` defaults to
+ * `window.localStorage` and exists as a seam for tests — dropping the
+ * try/catch here is the exact failure this must catch.
+ */
+export function readStoredPercent(key, storage = window.localStorage) {
+    try {
+        const raw = storage.getItem(key);
+        if (raw == null)
+            return null;
+        const n = Number(raw);
+        return Number.isFinite(n) ? n : null;
+    }
+    catch {
+        // private mode / storage disabled — behave as if nothing is stored
+        return null;
+    }
+}
+/** Writes a persisted width percentage, wrapped in try/catch — see {@link readStoredPercent}. */
+export function writeStoredPercent(key, percent, storage = window.localStorage) {
+    try {
+        storage.setItem(key, String(percent));
+    }
+    catch {
+        // private mode / quota exceeded — persistence is best-effort
+    }
+}
+/**
+ * Attio's adjustable-panel primitive: a spacer that reserves layout width
+ * plus a panel that overlays it, so the panel can move between docked
+ * (in-flow) and floating (`position: fixed`, an overlay) without a reflow
+ * glitch. Drag the edge handle to resize; constraints are CSS `min-width`/
+ * `max-width`, never re-clamped in JS.
+ */
+export function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeChange, min = 200, max, floating = false, handleVariant = "panel", storageKey, className, children, ...rest }) {
+    const controlled = size != null;
+    const [uncontrolledSize, setUncontrolledSize] = React.useState(defaultSize);
+    const width = controlled ? size : uncontrolledSize;
+    const containerRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const dragRef = React.useRef(null);
+    const [dragging, setDragging] = React.useState(false);
+    // Restore a persisted percentage on mount (uncontrolled + storageKey only).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: restore the persisted width once, on mount only
+    React.useEffect(() => {
+        if (controlled || !storageKey)
+            return;
+        const percent = readStoredPercent(storageKey);
+        if (percent == null)
+            return;
+        const containerWidth = containerRef.current?.getBoundingClientRect().width;
+        if (!containerWidth)
+            return;
+        setUncontrolledSize(percentToWidth(percent, containerWidth));
+    }, []);
+    const commitSize = React.useCallback((next) => {
+        if (!controlled)
+            setUncontrolledSize(next);
+        onSizeChange?.(next);
+        if (!controlled && storageKey) {
+            const containerWidth = containerRef.current?.getBoundingClientRect().width;
+            if (containerWidth) {
+                writeStoredPercent(storageKey, widthToPercent(next, containerWidth));
+            }
+        }
+    }, [controlled, onSizeChange, storageKey]);
+    function onHandlePointerDown(e) {
+        e.preventDefault();
+        e.target.setPointerCapture?.(e.pointerId);
+        dragRef.current = { startX: e.clientX, startWidth: width, moved: false };
+    }
+    function onHandlePointerMove(e) {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        if (!drag.moved) {
+            drag.moved = true;
+            setDragging(true);
+        }
+        const next = computeDragWidth(drag.startWidth, drag.startX, e.clientX, side);
+        if (!controlled)
+            setUncontrolledSize(next);
+        onSizeChange?.(next);
+    }
+    function onHandlePointerUp(e) {
+        const drag = dragRef.current;
+        dragRef.current = null;
+        setDragging(false);
+        e.target.releasePointerCapture?.(e.pointerId);
+        if (!drag)
+            return;
+        // Never re-clamp here: read back the panel's actual, CSS-clamped
+        // rendered width after layout, and commit *that* value.
+        const rect = panelRef.current?.getBoundingClientRect();
+        const finalWidth = rect ? Math.round(rect.width) : width;
+        commitSize(finalWidth);
+    }
+    const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
+    const panelSizeStyle = {
+        width,
+        minWidth: min,
+        maxWidth: maxStyle,
+    };
+    return (_jsxs("div", { ref: containerRef, className: resizablepanelRecipe({ className }), ...rest, children: [_jsx("div", { className: "resizablepanel-spacer", style: floating ? { width: 0 } : { width, minWidth: min, maxWidth: maxStyle } }), _jsxs("div", { ref: panelRef, className: "resizablepanel-panel", "data-side": side, "data-floating": floating ? "true" : "false", style: panelSizeStyle, children: [_jsx("div", { className: "resizablepanel-inner", children: children }), _jsx("div", { className: handleVariant === "column"
+                            ? "resizablepanel-handle resizablepanel-handle--column"
+                            : "resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, children: handleVariant === "column" && (_jsx("span", { className: "resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
+}
+ResizablePanel.displayName = "ResizablePanel";

package/dist/esm/components/resizablepanel/resizablepanel.recipe.js

@@ -0,0 +1,66 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// Attio's adjustable-panel primitive (measured live — see
+// docs/study/attio-panels.md §1-2). Two elements carry the layout: an
+// invisible SPACER that reserves flow width (it alone animates `width`, a
+// cheap reflow of a leaf node) and the PANEL, taken out of flow with
+// `position: absolute` and drawn on top of the spacer. That split is what
+// lets the panel move between docked (in-flow, hairline divider, no
+// elevation) and floating (position: fixed, 8px gutter, r10, the measured
+// tier-1 elevation) without a reflow glitch on the rest of the layout.
+//
+// Per Lesson 27, the floating panel rests at `transform: none` — the
+// measured off-canvas value (`translateX(calc(-100% - space-2))`, identical
+// to Drawer's left-side value) lives in `@starting-style` as the enter
+// transform only, never as a permanent resting position.
+const config = defineRecipe({
+    name: "resizablepanel",
+    base: `
+    position: relative; display: flex; height: 100%;
+    & .resizablepanel-spacer { flex: 0 0 auto; height: 100%; transition: width 0.14s; }
+    & .resizablepanel-panel { position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: hidden; background: ${c.bgSurface}; }
+    & .resizablepanel-panel[data-side="left"] { left: 0; }
+    & .resizablepanel-panel[data-side="right"] { right: 0; }
+
+    /* docked */
+    & .resizablepanel-panel[data-floating="false"] { border-radius: 0; box-shadow: none; }
+    & .resizablepanel-panel[data-floating="false"][data-side="left"] { border-inline-end: 1px solid ${c.borderSubtle}; }
+    & .resizablepanel-panel[data-floating="false"][data-side="right"] { border-inline-start: 1px solid ${c.borderSubtle}; }
+
+    /* floating — position: fixed, 8px gutter, r10, the measured floating elevation.
+       Rest is transform: none (Lesson 27); the off-canvas value is the @starting-style enter only. */
+    & .resizablepanel-panel[data-floating="true"] { position: fixed; top: ${c.space["2"]}; bottom: ${c.space["2"]}; border-inline-end: none; border-inline-start: none; border-radius: 10px; box-shadow: ${e.floating}; transform: none; transition: transform 0.14s, padding 0.14s; }
+    & .resizablepanel-panel[data-floating="true"][data-side="left"] { padding: ${c.space["2"]} 0 ${c.space["2"]} ${c.space["2"]}; @starting-style { transform: translateX(calc(-100% - ${c.space["2"]})); } }
+    & .resizablepanel-panel[data-floating="true"][data-side="right"] { padding: ${c.space["2"]} ${c.space["2"]} ${c.space["2"]} 0; @starting-style { transform: translateX(calc(100% + ${c.space["2"]})); } }
+
+    & .resizablepanel-inner { height: 100%; opacity: 1; }
+    & .resizablepanel-panel[data-floating="true"] .resizablepanel-inner { opacity: 1; transition: opacity 0.14s; @starting-style { opacity: 0; } }
+
+    /* handle — variant "panel" (default): a 10px hit target, its ::before the
+       only visible divider (1px rest -> 2px on hover/drag, brand-solid). */
+    & .resizablepanel-handle { position: absolute; top: 0; width: 10px; height: 100%; z-index: 2; cursor: col-resize; background: transparent; touch-action: none; }
+    & .resizablepanel-handle[data-side="left"] { right: 0; }
+    & .resizablepanel-handle[data-side="right"] { left: 0; }
+    & .resizablepanel-handle::before { content: ""; position: absolute; top: 0; width: 1px; height: 100%; background: ${c.borderSubtle}; transition: background-color 0.16s, height 0.16s; }
+    & .resizablepanel-handle[data-side="left"]::before { right: 0; }
+    & .resizablepanel-handle[data-side="right"]::before { left: 0; }
+    & .resizablepanel-handle:hover::before, & .resizablepanel-handle[data-dragging="true"]::before { width: 2px; background: ${c.bgBrandSolid}; }
+
+    /* handle — variant "column": a wider 7px hit target straddling a 1px
+       divider (table column edges), with a real 3px inner bar whose opacity
+       comes in on a 100ms DELAY — distinct from the panel variant's instant
+       ::before swap. */
+    /* .resizablepanel-handle.resizablepanel-handle--column (both classes) to
+       out-specificity the base [data-side] left/right rules above, which
+       otherwise tie-break by source order alone and would win. */
+    & .resizablepanel-handle.resizablepanel-handle--column { display: flex; align-items: center; justify-content: center; width: 7px; left: -3px; right: -3px; z-index: 1; cursor: col-resize; }
+    & .resizablepanel-handle--column::before { content: none; }
+    & .resizablepanel-handle-inner { width: 3px; height: 100%; border-radius: 3px; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity 0.1s 0.1s; }
+    & .resizablepanel-handle--column:hover .resizablepanel-handle-inner, & .resizablepanel-handle--column[data-dragging="true"] .resizablepanel-handle-inner { opacity: 1; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const resizablepanelRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/segmented/segmented.js

@@ -6,7 +6,7 @@ import { segmentedRecipe } from "./segmented.recipe.js";
  * switcher. `role="radiogroup"` over `role="radio"` buttons with roving
  * tabindex and ←/→ (Home/End) keyboard selection.
  */
-export function Segmented({ options, value, defaultValue, onValueChange, "aria-label": ariaLabel, className, }) {
+export function Segmented({ options, value, defaultValue, onValueChange, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? options[0]?.value);
     const selected = value ?? internal;
     const rootRef = React.useRef(null);
@@ -45,7 +45,7 @@ export function Segmented({ options, value, defaultValue, onValueChange, "aria-l
         e.preventDefault();
         select(enabled[next].value);
     };
-    return (_jsxs("div", { ref: rootRef, className: segmentedRecipe({ className }), role: "radiogroup", "aria-label": ariaLabel, children: [thumb && (_jsx("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
+    return (_jsxs("div", { ref: rootRef, className: segmentedRecipe({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, children: [thumb && (_jsx("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,
                 } })), options.map((opt, i) => {

package/dist/esm/components/select/select.js

@@ -14,7 +14,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, id, }) {
+export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
@@ -133,7 +133,7 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), children: [_jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "select-empty", children: "No results" })) : (filtered.map((opt, i) => {

package/dist/esm/components/select/select.recipe.js

@@ -1,5 +1,5 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 // A select / dropdown, measured from Attio's settings: a 32px combobox trigger
 // (radius 9, value + a 16px chevron) over a listbox — radius 12, 4px padding, a
 // layered soft shadow — of 32px options (radius 8, 6/8 padding) that show a
@@ -14,7 +14,7 @@ const config = defineRecipe({
 
     & .select-trigger {
       box-sizing: border-box; display: inline-flex; align-items: center; gap: ${c.space["1.5"]};
-      height: 32px; width: 100%; min-width: 0; margin: 0; padding: 0 ${c.space["1.5"]} 0 ${c.space["2"]};
+      height: ${c.size.menuRow}; width: 100%; min-width: 0; margin: 0; padding: 0 ${c.space["1.5"]} 0 ${c.space["2"]};
       border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
       font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer;
       transition: background-color .12s ease, box-shadow .12s ease;
@@ -22,7 +22,7 @@ const config = defineRecipe({
     & .select-trigger:hover { background: ${c.bgRaised}; }
     & .select-trigger[data-open], & .select-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; background: ${c.bgSurface}; }
     & .select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
+    & .select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
     & .select-placeholder { color: ${c.fgMuted}; }
     & .select-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .15s ease; }
     & .select-trigger[data-open] .select-chevron { transform: rotate(180deg); }
@@ -31,7 +31,7 @@ const config = defineRecipe({
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       max-height: 280px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
-      box-shadow: inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3};
+      box-shadow: ${e.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     & .select-listbox[data-up] { transform-origin: bottom; }
@@ -42,9 +42,9 @@ const config = defineRecipe({
     & .select-search input::placeholder { color: ${c.fgMuted}; }
     & .select-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
     & .select-option {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: 32px; flex-shrink: 0;
+      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
       padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md};
-      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; white-space: nowrap;
+      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
     }
     & .select-option[data-highlighted] { background: ${c.bgRaised}; }
     & .select-option[data-disabled] { opacity: 0.5; cursor: not-allowed; }

package/dist/esm/components/skeleton/skeleton.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { skeletonRecipe } from "./skeleton.recipe.js";
 /** A pulsing placeholder block sized to the content it stands in for. */
-export function Skeleton({ width, height = 16, circle, radius, className, }) {
-    return (_jsx("span", { "aria-hidden": "true", "data-circle": circle ? "" : undefined, className: skeletonRecipe({ className }), style: { width, height, borderRadius: radius } }));
+export function Skeleton({ width, height = 16, circle, radius, className, ...rest }) {
+    return (_jsx("span", { "aria-hidden": "true", "data-circle": circle ? "" : undefined, className: skeletonRecipe({ className }), ...rest, 
+        // the consumer's style wins on conflict, but the component's
+        // own sizing still applies when they don't set it
+        style: { width, height, borderRadius: radius, ...rest.style } }));
 }
 Skeleton.displayName = "Skeleton";

package/dist/esm/components/spinner/spinner.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { spinnerRecipe } from "./spinner.recipe.js";
 /** A spinning ring indicator. Reports `role="status"` for assistive tech. */
-export function Spinner({ size = 16, "aria-label": ariaLabel = "Loading", className, }) {
-    return (_jsx("span", { role: "status", "aria-label": ariaLabel, className: spinnerRecipe({ className }), style: {
+export function Spinner({ size = 16, "aria-label": ariaLabel = "Loading", className, ...rest }) {
+    return (_jsx("span", { role: "status", "aria-label": ariaLabel, className: spinnerRecipe({ className }), ...rest, style: {
             width: size,
             height: size,
             borderWidth: Math.max(2, Math.round(size / 8)),
+            ...rest.style,
         } }));
 }
 Spinner.displayName = "Spinner";

package/dist/esm/components/stagebar/stagebar.js

@@ -5,12 +5,12 @@ const DEFAULT = "#266df0";
  * A pipeline stage bar — measured from Attio's Deal-stage Highlight. Each stage
  * is a segment tinted with its colour; the current stage is at full strength.
  */
-export function StageBar({ stages, current, "aria-label": ariaLabel, className, }) {
+export function StageBar({ stages, current, "aria-label": ariaLabel, className, ...rest }) {
     const currentIndex = typeof current === "number"
         ? current
         : stages.findIndex((s) => s.label === current);
     const currentStage = stages[currentIndex];
-    return (_jsx("div", { className: stagebarRecipe({ className }), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": stages.length, "aria-valuenow": currentIndex + 1, "aria-valuetext": currentStage?.label, "aria-label": ariaLabel, children: stages.map((stage, i) => {
+    return (_jsx("div", { className: stagebarRecipe({ className }), ...rest, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": stages.length, "aria-valuenow": currentIndex + 1, "aria-valuetext": currentStage?.label, "aria-label": ariaLabel, children: stages.map((stage, i) => {
             const color = stage.color ?? DEFAULT;
             const on = i === currentIndex;
             return (_jsx("span", { className: "stagebar-seg", style: {

package/dist/esm/components/statcard/statcard.js

@@ -5,8 +5,8 @@ import { statcardRecipe } from "./statcard.recipe.js";
  * A single-metric KPI tile — measured from Attio's Reports number/insight cards.
  * Label, a large value, and an optional up/down delta pill with a caption.
  */
-export function StatCard({ label, icon, value, delta, deltaSuffix = "%", caption, card, className, }) {
+export function StatCard({ label, icon, value, delta, deltaSuffix = "%", caption, card, className, ...rest }) {
     const trend = delta == null ? null : delta > 0 ? "up" : delta < 0 ? "down" : "flat";
-    return (_jsxs("div", { className: statcardRecipe({ card, className }), children: [_jsxs("span", { className: "statcard-label", children: [icon, label] }), _jsx("span", { className: "statcard-value", children: value }), (trend != null || caption != null) && (_jsxs("span", { className: "statcard-foot", children: [trend != null && (_jsxs("span", { className: "statcard-delta", "data-trend": trend, children: [trend === "up" && _jsx(ArrowUp, { size: 12, strokeWidth: 2.5 }), trend === "down" && _jsx(ArrowDown, { size: 12, strokeWidth: 2.5 }), Math.abs(delta), deltaSuffix] })), caption] }))] }));
+    return (_jsxs("div", { className: statcardRecipe({ card, className }), ...rest, children: [_jsxs("span", { className: "statcard-label", children: [icon, label] }), _jsx("span", { className: "statcard-value", children: value }), (trend != null || caption != null) && (_jsxs("span", { className: "statcard-foot", children: [trend != null && (_jsxs("span", { className: "statcard-delta", "data-trend": trend, children: [trend === "up" && _jsx(ArrowUp, { size: 12, strokeWidth: 2.5 }), trend === "down" && _jsx(ArrowDown, { size: 12, strokeWidth: 2.5 }), Math.abs(delta), deltaSuffix] })), caption] }))] }));
 }
 StatCard.displayName = "StatCard";

package/dist/esm/components/table/table.recipe.js

@@ -10,19 +10,19 @@ const config = defineRecipe({
     base: `display: block; box-sizing: border-box; background: ${c.bgSurface};
     & .table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${c.font.sans}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
-    & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-right: 1px solid ${c.borderSubtle}; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; }
-    & th { height: 40px; background: ${c.bgSurface}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgPrimary}; user-select: none; }
+    & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${c.fgPrimary}; background: ${c.bgSurface}; }
-    & th:last-child, & td:last-child { border-right: none; }
+    & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
     & tfoot td { border-top: 1px solid ${c.borderSubtle}; border-bottom: none; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & caption { padding: ${c.space["2"]} ${c.space["2"]}; text-align: left; font-size: ${c.text.sm}; color: ${c.fgMuted}; caption-side: bottom; }
-    & td[data-align="right"], & th[data-align="right"] { text-align: right; }
+    & caption { padding: ${c.space["2"]} ${c.space["2"]}; text-align: start; font-size: ${c.text.sm}; color: ${c.fgMuted}; caption-side: bottom; }
+    & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }`,
     variants: {
         // subtle row hover — matches RecordsTable's 3% tint
         interactive: {
-            true: `& tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, ${c.fgPrimary} 3%, ${c.bgSurface}); }`,
+            true: `& tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); }`,
             false: ``,
         },
         // card (default): the bordered rounded surface, unchanged for existing

package/dist/esm/components/tabletoolbar/tabletoolbar.chrome.js

@@ -1,4 +1,4 @@
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 // The measured chrome of Attio's table toolbar: the Sort/Filter controls, the
 // menu/popover surface they open into, the sort-condition rows, and the filter
 // chips. It lives here, parameterised by class prefix, because TWO surfaces
@@ -25,7 +25,7 @@ export const toolbarChromeHead = (p) => `    & .${p}-toolbar { display: flex; al
     & .${p}-tool--ghost { box-shadow: none; background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); color: ${c.fgMuted}; }
     & .${p}-tool--ghost:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
     & .${p}-toolgroup { position: relative; display: inline-flex; }
-    & .${p}-menu { position: absolute; top: calc(100% + ${c.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; background: ${c.bgPopover}; box-shadow: inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3}; display: flex; flex-direction: column; gap: ${c.space.px}; transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
+    & .${p}-menu { position: absolute; top: calc(100% + ${c.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; background: ${c.bgPopover}; box-shadow: ${e.floating}; display: flex; flex-direction: column; gap: ${c.space.px}; transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
     & .${p}-menu { @starting-style { opacity: 0; transform: scale(0.96); } }`;
 export const toolbarChromeBody = (p) => `    & .${p}-menu-head { padding: ${c.space["1"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .${p}-sortpop { min-width: 460px; overflow: visible; padding: ${c.space["1.5"]}; gap: ${c.space["1"]}; }
@@ -42,7 +42,7 @@ export const toolbarChromeBody = (p) => `    & .${p}-menu-head { padding: ${c.sp
     & .${p}-sort-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
     & .${p}-sort-remove:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
     & .${p}-sort-addrow { display: flex; padding: ${c.space["0.5"]} 0; }
-    & .${p}-sort-add { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["2"]} 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; cursor: pointer; transition: background-color .12s; }
+    & .${p}-sort-add { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["2"]} 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; cursor: pointer; transition: background-color .12s; }
     & .${p}-sort-add:hover { background: ${c.bgRaised}; }
     & .${p}-sort-add svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .${p}-sort-foot { display: flex; padding: ${c.space["1.5"]} ${c.space["1"]} ${c.space["0.5"]}; }

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -84,7 +84,7 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * composable version, to put above `DataTable` or any table of your own. Pair
  * it with `applyFilters` / `applySorts` to turn its state into rows.
  */
-export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, }) {
+export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, ...rest }) {
     const [sortsState, setSortsState] = React.useState(defaultSorts ?? []);
     const [filtersState, setFiltersState] = React.useState(defaultFilters ?? []);
     const sorts = sortsProp ?? sortsState;
@@ -149,32 +149,40 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
         setOpenMenu(null);
     };
     const activeFilters = filters.length;
-    const sortedLabel = sorts.length
-        ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
-        : "Sort";
-    return (_jsx("div", { className: tabletoolbarRecipe({ className }), children: _jsxs("div", { className: "tabletoolbar-toolbar", children: [_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": "Sort", children: [sorts.length === 0 ? (_jsx("div", { className: "tabletoolbar-sort-empty", children: "No sorts applied to this view." })) : (sorts.map((s, i) => (_jsxs("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
+    // The default phrase only works in English word order, so a caller can
+    // replace the whole thing rather than fill a template.
+    const sortedLabel = sortTriggerLabel
+        ? sortTriggerLabel(sorts, columns)
+        : sorts.length
+            ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+            : "Sort";
+    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "tabletoolbar-toolbar", children: [_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "tabletoolbar-sort-empty", children: "No sorts applied to this view." })) : (sorts.map((s, i) => (_jsxs("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
                                         if (dragSort !== null)
                                             moveSort(dragSort, i);
                                         setDragSort(null);
-                                    }, children: [_jsx("button", { type: "button", className: "tabletoolbar-sort-grip", "aria-label": "Reorder sort", draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: columns.map((c) => ({
+                                    }, children: [_jsx("button", { type: "button", className: "tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: columns.map((c) => ({
                                                 value: c.key,
                                                 label: c.icon ? (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
                                                 keywords: c.label,
-                                            })), "aria-label": "Sort field" }), _jsx(Select, { className: "tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                            })), "aria-label": sortFieldLabel }), _jsx(Select, { className: "tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
                                                 {
                                                     value: "asc",
-                                                    label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), "Ascending"] })),
-                                                    keywords: "Ascending",
+                                                    label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), ascendingLabel] })),
+                                                    keywords: ascendingLabel,
                                                 },
                                                 {
                                                     value: "desc",
-                                                    label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), "Descending"] })),
-                                                    keywords: "Descending",
+                                                    label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
+                                                    keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": "Sort direction" }), _jsx("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": "Remove sort", children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), "Add sort"] }) }), helpHref && (_jsx("div", { className: "tabletoolbar-sort-foot", children: _jsxs("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), "Learn about sorting"] }) }))] }))] }), _jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "menu", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), activeFilters ? `Filter · ${activeFilters}` : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "tabletoolbar-menu", role: "menu", children: [_jsx("input", { className: "tabletoolbar-menu-input", placeholder: "Filter by\u2026", "aria-label": "Filter by field", 
+                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), "Add sort"] }) }), helpHref && (_jsx("div", { className: "tabletoolbar-sort-foot", children: _jsxs("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), "Learn about sorting"] }) }))] }))] }), _jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                    ? filterTriggerLabel(activeFilters)
+                                    : activeFilters
+                                        ? `Filter · ${activeFilters}`
+                                        : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [_jsx("input", { className: "tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
                                     // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                                     autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), columns
                                     .filter((col) => col.label
@@ -184,7 +192,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                     const col = columns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
                     const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
-                    return (_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("span", { className: "tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "menu", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "tabletoolbar-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "tabletoolbar-fchip-op", children: "Select condition" }))] }), _jsx("button", { type: "button", className: "tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "tabletoolbar-menu", role: "menu", children: [_jsxs("div", { className: "tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "tabletoolbar-menu-input", placeholder: "Value\u2026", "aria-label": `${col?.label} filter value`, 
+                    return (_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("span", { className: "tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "tabletoolbar-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "tabletoolbar-fchip-op", children: "Select condition" }))] }), _jsx("button", { type: "button", className: "tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
                                         autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) }))] }))] }, cond.id));
                 }), _jsx("span", { className: "tabletoolbar-spacer" }), count != null && _jsx("span", { className: "tabletoolbar-count", children: count }), children] }) }));

package/dist/esm/components/tabs/tabs.js

@@ -7,7 +7,7 @@ import { tabsRecipe } from "./tabs.recipe.js";
  * Home/End jump); activation follows focus, matching Attio. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
-export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, }) {
+export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? tabs[0]?.value);
     const active = value ?? internal;
     const listRef = React.useRef(null);
@@ -57,7 +57,7 @@ export function Tabs({ tabs, value, defaultValue, onValueChange, leading, childr
             ?.querySelector(`[data-value="${CSS.escape(nextValue)}"]`)
             ?.focus();
     };
-    return (_jsxs("div", { className: tabsRecipe({ className }), children: [_jsxs("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
+    return (_jsxs("div", { className: tabsRecipe({ className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
                         return (_jsxs("button", { type: "button", role: "tab", id: `tab-${t.value}`, "aria-selected": selected, "aria-controls": `panel-${t.value}`, tabIndex: selected ? 0 : -1, "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
                     }), indicator && (_jsx("span", { className: "tabs-indicator", style: {

package/dist/esm/components/tabs/tabs.recipe.js

@@ -12,16 +12,16 @@ const config = defineRecipe({
     display: flex; flex-direction: column; min-height: 0; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; height: 40px; flex-shrink: 0; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; }
-    & .tabs-leading { display: inline-flex; align-items: center; margin-right: ${c.space["1"]}; }
+    & .tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; flex-shrink: 0; }
+    & .tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${c.space["1"]}; }
     & .tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
     & .tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
-    & .tabs-tab[data-selected] { color: ${c.fgPrimary}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
+    & .tabs-tab[data-selected] { color: ${c.fgPrimary}; background: ${c.bgSubtle}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
     & .tabs-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
     & .tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .tabs-tab[data-selected] .tabs-tab-badge { color: ${c.fgPrimary}; }
-    & .tabs-indicator { position: absolute; bottom: 0; left: 0; height: 2px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .tabs-indicator { position: absolute; bottom: calc(-1 * ${c.space["2"]}); left: 0; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .tabs-panel { flex: 1; min-height: 0; }
     & .tabs-panel:focus-visible { outline: none; }
   `,

package/dist/esm/components/textarea/textarea.js

@@ -11,10 +11,10 @@ export const Textarea = React.forwardRef(({ showCount, maxLength, className, wra
     const [count, setCount] = React.useState(initial);
     const len = value !== undefined ? String(value).length : count;
     const counted = showCount && maxLength != null;
-    return (_jsxs("div", { className: textareaRecipe({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [_jsx("textarea", { ref: ref, className: `textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
-                    if (value === undefined)
-                        setCount(e.target.value.length);
-                    onChange?.(e);
-                }, ...props }), counted && (_jsxs("span", { className: "textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
+    return (_jsxs("div", { className: textareaRecipe({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [_jsx("span", { className: "textarea-wrap", children: _jsx("textarea", { ref: ref, className: `textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
+                        if (value === undefined)
+                            setCount(e.target.value.length);
+                        onChange?.(e);
+                    }, ...props }) }), counted && (_jsxs("span", { className: "textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
 });
 Textarea.displayName = "Textarea";