@crisp-ui-kit/crisp 0.1.0 → 0.5.0

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

@@ -0,0 +1,79 @@
+import { contract as c } 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
+// render it — the standalone `TableToolbar` primitive and `RecordsTable`, whose
+// markup predates it and must keep its own `recordstable-` class names.
+//
+// These strings were MOVED out of `recordstable.recipe.ts` verbatim, not
+// retyped: every value is still the one measured from Attio. Do not "tidy" them.
+//
+// It comes in two halves because RecordsTable interleaves three rules of its own
+// (the context-menu z-index and the column drop-target) into the middle of the
+// block, and those depend on following `.menu` in source order. Keeping the
+// split preserves that cascade exactly, which is what lets the generated CSS
+// stay byte-for-byte identical to what shipped before the extraction.
+export const toolbarChromeHead = (p) => `    & .${p}-toolbar { display: flex; align-items: center; gap: ${c.space["1.5"]}; padding: 0 ${c.space["3"]} ${c.space["2"]}; }
+    & .${p}-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; color: ${c.fgMuted}; }
+    & .${p}-search svg { flex-shrink: 0; }
+    & .${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; width: 180px; }
+    & .${p}-search input::placeholder { color: ${c.fgMuted}; }
+    & .${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${p}-tool:hover { background: ${c.bgRaised}; }
+    & .${p}-tool svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .${p}-tool--active { background: ${c.bgRaised}; }
+    & .${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 { @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"]}; }
+    & .${p}-sort-empty { padding: ${c.space["1"]} ${c.space["1"]} ${c.space["2"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .${p}-sort-row { display: flex; align-items: center; gap: ${c.space["1.5"]}; }
+    & .${p}-sort-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; flex-shrink: 0; margin-right: calc(-1 * ${c.space["1"]}); padding: 0; border: none; background: none; color: ${c.fgMuted}; cursor: grab; }
+    & .${p}-sort-grip:active { cursor: grabbing; }
+    & .${p}-sort-grip:hover { color: ${c.fgPrimary}; }
+    & .${p}-sort-optlabel { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
+    & .${p}-sort-optlabel svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .${p}-sort-field { flex: 1; min-width: 0; }
+    & .${p}-sort-dir { width: 136px; flex-shrink: 0; }
+    & .${p}-sort-field .select-trigger, & .${p}-sort-dir .select-trigger { height: 28px; padding-right: ${c.space["1"]}; }
+    & .${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: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"]}; }
+    & .${p}-sort-learn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.lg}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); text-decoration: none; }
+    & .${p}-sort-learn svg { flex-shrink: 0; }
+    & .${p}-sort-learn:hover { color: ${c.fgPrimary}; }
+    & .${p}-menu-item { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; 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; }
+    & .${p}-menu-item:hover { background: ${c.bgRaised}; }
+    & .${p}-menu-item:disabled { opacity: 0.4; cursor: default; }
+    & .${p}-menu-item:disabled:hover { background: none; }
+    & .${p}-menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .${p}-menu-item[data-on] svg { color: ${c.bgBrandSolid}; }
+    & .${p}-menu-item .${p}-menu-check { margin-left: auto; }
+    & .${p}-menu-input { height: ${c.size.row}; margin: ${c.space["0.5"]}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; }
+    & .${p}-menu-sep { height: 1px; background: ${c.borderSubtle}; margin: ${c.space["0.5"]} 0; }
+    & .${p}-menu--up { top: auto; bottom: calc(100% + ${c.space["1"]}); transform-origin: bottom; }
+    & .${p}-menu--right { left: auto; right: 0; }
+    & .${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
+    & .${p}-menu--hdr { min-width: 200px; }
+    & .${p}-menu-item--danger { color: ${c.bgDanger}; }
+    & .${p}-menu-item--danger svg { color: ${c.bgDanger}; }
+    & .${p}-menu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .${p}-menu-check { margin-left: auto; color: ${c.bgBrandSolid}; }
+    & .${p}-fchip { display: inline-flex; align-items: center; height: ${c.size.row}; padding-right: ${c.space["1"]}; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; background: ${c.bgSurface}; font-size: ${c.text.md}; color: ${c.fgPrimary}; white-space: nowrap; }
+    & .${p}-fchip-main { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 100%; margin: 0; padding: 0 ${c.space["1"]} 0 ${c.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; cursor: pointer; }
+    & .${p}-fchip-field { font-weight: ${c.weight.medium}; }
+    & .${p}-fchip-op { color: ${c.fgMuted}; }
+    & .${p}-fchip-val { font-weight: ${c.weight.medium}; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+    & .${p}-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .${p}-fchip-x:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); color: ${c.fgPrimary}; }
+    & .${p}-spacer { flex: 1; }
+    & .${p}-count { font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .${p}-new { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${p}-new:hover { background: ${c.bgBrandSolidPressed}; }`;

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

@@ -0,0 +1,191 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, Plus, X, } from "lucide-react";
+import * as React from "react";
+import { Select } from "../select/index.js";
+import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
+const OP_LABELS = {
+    contains: "contains",
+    is: "is",
+    isnot: "is not",
+    empty: "is empty",
+    notempty: "is not empty",
+};
+const OP_ORDER = [
+    "contains",
+    "is",
+    "isnot",
+    "empty",
+    "notempty",
+];
+const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
+const isEmptyValue = (v) => v == null || v === "" || (Array.isArray(v) && v.length === 0);
+const asText = (v) => {
+    if (isEmptyValue(v))
+        return "";
+    if (Array.isArray(v))
+        return v.join(", ");
+    if (typeof v === "object") {
+        const name = v.name;
+        return typeof name === "string" ? name : "";
+    }
+    return String(v);
+};
+/**
+ * Applies a toolbar's filter conditions to any row array. Reads the raw value
+ * at `row[key]` (override with `get` for derived fields) — never a formatted
+ * display string, so a grouped-thousands "$1,200" still matches "1200".
+ */
+export function applyFilters(rows, filters, get = (row, key) => row[key]) {
+    const active = filters.filter((f) => !opNeedsValue(f.op) || f.value.trim() !== "");
+    if (!active.length)
+        return rows;
+    return rows.filter((row) => active.every((f) => {
+        const raw = get(row, f.key);
+        if (f.op === "empty")
+            return isEmptyValue(raw);
+        if (f.op === "notempty")
+            return !isEmptyValue(raw);
+        const t = asText(raw).toLowerCase();
+        const v = f.value.trim().toLowerCase();
+        if (f.op === "contains")
+            return t.includes(v);
+        if (f.op === "is")
+            return t === v;
+        return t !== v;
+    }));
+}
+/**
+ * Applies a toolbar's sorts to any row array, in order — sort 0 wins, later
+ * sorts break ties. Numbers compare numerically, everything else by locale.
+ */
+export function applySorts(rows, sorts, get = (row, key) => row[key]) {
+    if (!sorts.length)
+        return rows;
+    return [...rows].sort((a, b) => {
+        for (const s of sorts) {
+            const av = get(a, s.key);
+            const bv = get(b, s.key);
+            let d = 0;
+            if (typeof av === "number" && typeof bv === "number")
+                d = av - bv;
+            else
+                d = asText(av).localeCompare(asText(bv));
+            if (d !== 0)
+                return s.dir === "asc" ? d : -d;
+        }
+        return 0;
+    });
+}
+/**
+ * Attio's table toolbar as a standalone primitive: the Sort and Filter
+ * controls, their menus, the sort-condition rows and the filter chips.
+ *
+ * `RecordsTable` renders this same measured chrome internally; this is the
+ * 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, }) {
+    const [sortsState, setSortsState] = React.useState(defaultSorts ?? []);
+    const [filtersState, setFiltersState] = React.useState(defaultFilters ?? []);
+    const sorts = sortsProp ?? sortsState;
+    const filters = filtersProp ?? filtersState;
+    const putSorts = (next) => {
+        if (sortsProp === undefined)
+            setSortsState(next);
+        onSortsChange?.(next);
+    };
+    const putFilters = (next) => {
+        if (filtersProp === undefined)
+            setFiltersState(next);
+        onFiltersChange?.(next);
+    };
+    const [openMenu, setOpenMenu] = React.useState(null);
+    const [dragSort, setDragSort] = React.useState(null);
+    const [filterQuery, setFilterQuery] = React.useState("");
+    // close any open menu on outside click (anything not inside a menu or its
+    // trigger) or Escape
+    React.useEffect(() => {
+        if (!openMenu)
+            return;
+        const onDown = (e) => {
+            const t = e.target;
+            if (!t.closest(".tabletoolbar-menu, [data-menu-trigger]"))
+                setOpenMenu(null);
+        };
+        const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [openMenu]);
+    const addSort = () => {
+        const used = new Set(sorts.map((s) => s.key));
+        const col = columns.find((c) => !used.has(c.key));
+        if (col)
+            putSorts([...sorts, { key: col.key, dir: "asc" }]);
+    };
+    const moveSort = (from, to) => {
+        if (from === to)
+            return;
+        const next = [...sorts];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        putSorts(next);
+    };
+    const setSortField = (i, key) => putSorts(sorts.map((s, j) => (j === i ? { ...s, key } : s)));
+    const setSortDir = (i, dir) => putSorts(sorts.map((s, j) => (j === i ? { ...s, dir } : s)));
+    const removeSort = (i) => putSorts(sorts.filter((_, j) => j !== i));
+    const addFilter = (key) => {
+        const id = `f${Date.now()}${Math.random().toString(36).slice(2, 6)}`;
+        putFilters([...filters, { id, key, op: "contains", value: "" }]);
+        setFilterQuery("");
+        setOpenMenu(`fcond:${id}`);
+    };
+    const patchFilter = (id, patch) => putFilters(filters.map((c) => (c.id === id ? { ...c, ...patch } : c)));
+    const removeFilter = (id) => {
+        putFilters(filters.filter((c) => c.id !== id));
+        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) => {
+                                        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) => ({
+                                                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: [
+                                                {
+                                                    value: "asc",
+                                                    label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), "Ascending"] })),
+                                                    keywords: "Ascending",
+                                                },
+                                                {
+                                                    value: "desc",
+                                                    label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), "Descending"] })),
+                                                    keywords: "Descending",
+                                                },
+                                            ], "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", 
+                                    // 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
+                                    .toLowerCase()
+                                    .includes(filterQuery.trim().toLowerCase()))
+                                    .map((col) => (_jsxs("button", { type: "button", className: "tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
+                    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`, 
+                                        // 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/tabletoolbar/tabletoolbar.recipe.js

@@ -0,0 +1,23 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+import { toolbarChromeBody, toolbarChromeHead } from "./tabletoolbar.chrome.js";
+// Attio's table toolbar, measured: 28px controls, the Sort/Filter buttons and
+// the menus they open, sort-condition rows, and the filter chips. The chrome
+// itself lives in ./tabletoolbar.chrome.ts because RecordsTable renders the
+// same measured surface under its own class prefix — one source, two prefixes,
+// so the two can never drift apart again.
+//
+// The root is `display: contents` on purpose: the emitted `-toolbar` rule is
+// the flex row, so the wrapper contributes no box of its own and a TableToolbar
+// lays out exactly like the bare toolbar it replaces.
+const config = defineRecipe({
+    name: "tabletoolbar",
+    base: `
+    display: contents; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & * { box-sizing: border-box; }
+${toolbarChromeHead("tabletoolbar")}
+${toolbarChromeBody("tabletoolbar")}
+  `,
+});
+export const tabletoolbarRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Tabs } from "./tabs.js";
+export { tabsRecipe } from "./tabs.recipe.js";

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { tabsRecipe } from "./tabs.recipe.js";
+/**
+ * A row of text tabs over a sliding ink underline — the record-view tab bar,
+ * measured from Attio. Roving-tabindex keyboard model (←/→ move + activate,
+ * 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, }) {
+    const [internal, setInternal] = React.useState(defaultValue ?? tabs[0]?.value);
+    const active = value ?? internal;
+    const listRef = React.useRef(null);
+    const [indicator, setIndicator] = React.useState(null);
+    const select = React.useCallback((v) => {
+        if (value === undefined)
+            setInternal(v);
+        onValueChange?.(v);
+    }, [value, onValueChange]);
+    // Position the underline under the active tab; re-measure on tab/value change
+    // and on resize.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `tabs` re-measures when the tab set (labels/counts) changes width
+    React.useEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const measure = () => {
+            const el = list.querySelector(`[data-value="${CSS.escape(active)}"]`);
+            if (el)
+                setIndicator({ left: el.offsetLeft, width: el.offsetWidth });
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(list);
+        return () => ro.disconnect();
+    }, [active, tabs]);
+    const onKeyDown = (e) => {
+        const enabled = tabs.filter((t) => !t.disabled);
+        const idx = enabled.findIndex((t) => t.value === active);
+        let next = -1;
+        if (e.key === "ArrowRight")
+            next = (idx + 1) % enabled.length;
+        else if (e.key === "ArrowLeft")
+            next = (idx - 1 + enabled.length) % enabled.length;
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = enabled.length - 1;
+        if (next < 0)
+            return;
+        e.preventDefault();
+        const nextValue = enabled[next]?.value;
+        if (!nextValue)
+            return;
+        select(nextValue);
+        listRef.current
+            ?.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) => {
+                        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: {
+                            width: indicator.width,
+                            transform: `translateX(${indicator.left}px)`,
+                        } }))] }), children && (_jsx("div", { className: "tabs-panel", role: "tabpanel", id: `panel-${active}`, "aria-labelledby": `tab-${active}`, 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: a tabpanel is focusable per the WAI-ARIA tabs pattern
+                tabIndex: 0, children: children(active) }))] }));
+}
+Tabs.displayName = "Tabs";

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

@@ -0,0 +1,33 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Attio's record-view tabs: a row of segmented tab buttons over a 1px baseline.
+// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
+// with a 2px ink underline that slides along the baseline; inactive tabs are
+// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
+// and an optional count badge. Measured from the live app: 28px pills, 4/8
+// padding, 6px icon-label gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+const config = defineRecipe({
+    name: "tabs",
+    base: `
+    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-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: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-panel { flex: 1; min-height: 0; }
+    & .tabs-panel:focus-visible { outline: none; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const tabsRecipe = Object.assign(resolveRecipe(config), { config });
+export default config;

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

@@ -0,0 +1,2 @@
+export { Textarea } from "./textarea.js";
+export { textareaRecipe } from "./textarea.recipe.js";

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { textareaRecipe } from "./textarea.recipe.js";
+/**
+ * A multiline text field — measured from Attio's settings. Forwards every native
+ * `<textarea>` prop; pass `showCount` with `maxLength` to render a live
+ * character counter (which turns red if the value exceeds the limit).
+ */
+export const Textarea = React.forwardRef(({ showCount, maxLength, className, wrapperClassName, value, defaultValue, onChange, ...props }, ref) => {
+    const initial = String(value ?? defaultValue ?? "").length;
+    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] }))] }));
+});
+Textarea.displayName = "Textarea";

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

@@ -0,0 +1,31 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A multiline text field, measured from Attio's settings "Personal context": an
+// inset 1px ring (radius 8), 14px text, 6/10 padding, and an optional character
+// counter pinned bottom-right (12px, muted). Focus rings the field brand.
+const config = defineRecipe({
+    name: "textarea",
+    base: `
+    position: relative; display: block; width: 100%; font-family: ${c.font.sans};
+
+    & .textarea-field {
+      box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
+      margin: 0; padding: ${c.space["1.5"]} ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md};
+      background: ${c.bgSurface}; box-shadow: 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}; line-height: 20px; color: ${c.fgPrimary};
+      outline: none; transition: box-shadow .15s ease;
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    }
+    & .textarea-field::placeholder { color: ${c.fgMuted}; }
+    & .textarea-field:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+    &[data-counted] .textarea-field { padding-bottom: ${c.space["5"]}; }
+    & .textarea-count { position: absolute; right: ${c.space["2.5"]}; bottom: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
+    & .textarea-count[data-over] { color: ${c.bgDanger}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const textareaRecipe = Object.assign(resolveRecipe(config), { config });
+export default config;

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

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast, } from "./toast.js";
+export { toastRecipe } from "./toast.recipe.js";

package/dist/esm/components/toast/toast.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import * as React from "react";
+import { toastRecipe } from "./toast.recipe.js";
+const ToastContext = React.createContext(null);
+const ICONS = {
+    info: Info,
+    success: CircleCheck,
+    warning: TriangleAlert,
+    danger: CircleAlert,
+};
+function ToastCard({ item, onClose, }) {
+    const Icon = ICONS[item.tone ?? "info"];
+    return (_jsxs("div", { className: "toast", role: "status", "data-tone": item.tone ?? "info", children: [_jsx("span", { className: "toast-icon", children: _jsx(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsxs("div", { className: "toast-body", children: [_jsx("div", { className: "toast-title", children: item.title }), item.description != null && (_jsx("div", { className: "toast-desc", children: item.description })), item.action && (_jsx("button", { type: "button", className: "toast-action", onClick: () => {
+                            item.action?.onClick();
+                            onClose();
+                        }, children: item.action.label }))] }), _jsx("button", { type: "button", className: "toast-close", "aria-label": "Dismiss", onClick: onClose, children: _jsx(X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }));
+}
+/**
+ * Wrap your app in a `ToastProvider`, then call `useToast().toast({...})` from
+ * anywhere to push a notification. Toasts stack bottom-right and auto-dismiss
+ * after `duration` (default 4s; 0 keeps them until dismissed).
+ */
+export function ToastProvider({ children, duration = 4000, }) {
+    const [items, setItems] = React.useState([]);
+    const idRef = React.useRef(0);
+    const timers = React.useRef(new Map());
+    const dismiss = React.useCallback((id) => {
+        setItems((list) => list.filter((t) => t.id !== id));
+        const t = timers.current.get(id);
+        if (t) {
+            clearTimeout(t);
+            timers.current.delete(id);
+        }
+    }, []);
+    const toast = React.useCallback((o) => {
+        idRef.current += 1;
+        const id = idRef.current;
+        setItems((list) => [...list, { ...o, id }]);
+        const d = o.duration ?? duration;
+        if (d > 0)
+            timers.current.set(id, setTimeout(() => dismiss(id), d));
+        return id;
+    }, [duration, dismiss]);
+    React.useEffect(() => {
+        const map = timers.current;
+        return () => map.forEach(clearTimeout);
+    }, []);
+    const api = React.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { className: toastRecipe(), children: _jsx("div", { className: "toast-viewport", role: "region", "aria-label": "Notifications", children: items.map((t) => (_jsx(ToastCard, { item: t, onClose: () => dismiss(t.id) }, t.id))) }) })] }));
+}
+ToastProvider.displayName = "ToastProvider";
+export function useToast() {
+    const ctx = React.useContext(ToastContext);
+    if (!ctx)
+        throw new Error("useToast must be used within a ToastProvider");
+    return ctx;
+}

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

@@ -0,0 +1,28 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Toast notifications — a fixed bottom-right stack of cards on the measured
+// popover surface, each with a tone icon, title/description, optional action,
+// and a close button.
+const config = defineRecipe({
+    name: "toast",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .toast-viewport { position: fixed; z-index: 80; right: ${c.space["4"]}; bottom: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
+    & .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["3"]}; border-radius: ${c.radius.xl}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${c.fgMuted}; }
+    & .toast[data-tone="info"] .toast-icon { color: ${c.bgBrandSolid}; }
+    & .toast[data-tone="success"] .toast-icon { color: ${c.bgSuccess}; }
+    & .toast[data-tone="warning"] .toast-icon { color: ${c.bgWarning}; }
+    & .toast[data-tone="danger"] .toast-icon { color: ${c.bgDanger}; }
+    & .toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .toast-title { font-size: ${c.text.md}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .toast-desc { font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .toast-action { align-self: flex-start; margin-top: ${c.space["1.5"]}; height: 24px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .toast-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); }
+    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .toast-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const toastRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Tooltip } from "./tooltip.js";
+export { tooltipRecipe } from "./tooltip.recipe.js";

package/dist/esm/components/tooltip/tooltip.js

@@ -0,0 +1,45 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { tooltipRecipe } from "./tooltip.recipe.js";
+/**
+ * A hover/focus tooltip — a dark hint chip measured from Attio. Wraps its
+ * trigger in an inline element, shows after `delay` on pointer-enter / focus,
+ * and hides on leave / blur / Escape. The bubble is portaled and positioned
+ * above the trigger (flipping below near the top edge).
+ */
+export function Tooltip({ content, children, side = "top", delay = 350, }) {
+    const triggerRef = React.useRef(null);
+    const timer = React.useRef(undefined);
+    const [pos, setPos] = React.useState(null);
+    const show = () => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        const below = side === "bottom" || r.top < 48;
+        setPos({
+            left: Math.round(r.left + r.width / 2),
+            top: Math.round(below ? r.bottom + 6 : r.top - 6),
+            below,
+        });
+    };
+    const open = () => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(show, delay);
+    };
+    const close = () => {
+        clearTimeout(timer.current);
+        setPos(null);
+    };
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, style: { display: "inline-flex" }, onPointerEnter: open, onPointerLeave: close, onFocusCapture: open, onBlurCapture: close, onKeyDown: (e) => e.key === "Escape" && close(), children: children }), pos != null &&
+                createPortal(_jsx("div", { role: "tooltip", className: tooltipRecipe(), style: {
+                        left: pos.left,
+                        top: pos.top,
+                        transform: pos.below
+                            ? "translate(-50%, 0)"
+                            : "translate(-50%, -100%)",
+                    }, children: content }), document.body)] }));
+}
+Tooltip.displayName = "Tooltip";