@crisp-ui-kit/crisp 0.1.0 → 0.5.0

package/dist/esm/components/button/button.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { buttonRecipe } from "./button.recipe.js";
+/** Self-animating SVG spinner (no CSS keyframes needed). Sizes to 1em. */
+function Spinner() {
+    return (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { flexShrink: 0 }, children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }), _jsx("path", { d: "M8 1.5a6.5 6.5 0 0 1 6.5 6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 8 8", to: "360 8 8", dur: "0.7s", repeatCount: "indefinite" }) })] }));
+}
+export const Button = React.forwardRef(({ intent, size, shape, className, asChild, loading, disabled, children, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    // Slot (asChild) requires a single child — never inject the spinner in that mode.
+    const content = loading && !asChild ? (_jsxs(_Fragment, { children: [_jsx(Spinner, {}), children] })) : (children);
+    return (_jsx(Primitive.button, { ref: ref, asChild: asChild, className: buttonRecipe({ intent, size, shape, className }), disabled: isDisabled, "aria-busy": loading || undefined, "data-loading": loading ? "" : undefined, ...props, children: content }));
+});
+Button.displayName = "Button";

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

@@ -0,0 +1,39 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+const config = defineRecipe({
+    name: "button",
+    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; font-family: ${c.font.sans}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; line-height: 20px; white-space: nowrap; border: none; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; &:disabled { opacity: 0.5; cursor: not-allowed; }`,
+    variants: {
+        intent: {
+            primary: `background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); &:hover { background: ${c.bgBrandSolidPressed}; } &:active { background: ${c.bgBrandSolidPressed}; }`,
+            neutral: `background: ${c.bgSurface}; color: ${c.fgPrimary}; 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); &:hover { background: ${c.bgRaised}; }`,
+            danger: `background: ${c.bgDanger}; color: ${c.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(229,72,77,0.20), 0 3px 6px -2px rgba(229,72,77,0.12); &:hover { filter: brightness(0.96); } &:active { filter: brightness(0.92); }`,
+            ghost: `background: transparent; color: ${c.fgMuted}; box-shadow: none; &:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }`,
+        },
+        size: {
+            sm: `height: 24px; padding-inline: ${c.space["1.5"]}; font-size: ${c.text.md}; border-radius: ${c.radius.md};`,
+            md: `height: 28px; padding-inline: ${c.space["2"]}; font-size: ${c.text.lg}; border-radius: ${c.radius.md};`,
+            lg: `height: 40px; padding-inline: 14px; font-size: ${c.text.lg}; border-radius: 10px;`,
+        },
+        shape: {
+            text: ``,
+            icon: `padding-inline: 0; aspect-ratio: 1 / 1;`,
+        },
+    },
+    defaultVariants: { intent: "primary", size: "md", shape: "text" },
+    compoundVariants: [],
+});
+export const buttonRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: {
+        primary: {
+            height: "28px",
+            borderRadius: "8px",
+            fontWeight: "500",
+            fontSize: "14px",
+            background: "rgb(38, 109, 240)",
+            color: "rgb(255, 255, 255)",
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Button } from "./button.js";
+export { buttonRecipe } from "./button.recipe.js";

package/dist/esm/components/callout/callout.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { calloutRecipe } from "./callout.recipe.js";
+const DEFAULT_ICONS = {
+    neutral: Info,
+    info: Info,
+    success: CircleCheck,
+    warning: TriangleAlert,
+    danger: CircleAlert,
+};
+/**
+ * An inline callout / banner — measured from Attio's info notices. `tone` tints
+ * the background and icon; pass a `title` and/or body `children`.
+ */
+export function Callout({ tone = "neutral", icon, title, children, action, className, }) {
+    const Fallback = DEFAULT_ICONS[tone];
+    const iconNode = icon === undefined
+        ? Fallback && _jsx(Fallback, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
+        : icon;
+    return (_jsxs("div", { className: calloutRecipe({ className }), "data-tone": tone, role: "note", children: [iconNode && _jsx("span", { className: "callout-icon", children: iconNode }), _jsxs("div", { className: "callout-body", children: [title != null && _jsx("div", { className: "callout-title", children: title }), children != null && _jsx("div", { className: "callout-desc", children: children })] }), action && _jsx("div", { className: "callout-action", children: action })] }));
+}
+Callout.displayName = "Callout";

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

@@ -0,0 +1,26 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A callout / banner — Attio's inline info notices (e.g. "Changes apply to all
+// workspaces", the trial banner). Tone tints the background + icon.
+const config = defineRecipe({
+    name: "callout",
+    base: `display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["3"]} ${c.space["4"]}; border-radius: ${c.radius.lg}; font-family: ${c.font.sans}; font-size: ${c.text.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary};
+    & .callout-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${c.fgMuted}; }
+    & .callout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .callout-title { font-weight: ${c.weight.semibold}; }
+    & .callout-desc { color: ${c.fgMuted}; }
+    & .callout-action { flex-shrink: 0; }
+    &[data-tone="info"] { background: color-mix(in srgb, ${c.bgBrandSolid} 8%, transparent); }
+    &[data-tone="info"] .callout-icon { color: ${c.bgBrandSolid}; }
+    &[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 10%, transparent); }
+    &[data-tone="success"] .callout-icon { color: ${c.bgSuccess}; }
+    &[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 12%, transparent); }
+    &[data-tone="warning"] .callout-icon { color: ${c.bgWarning}; }
+    &[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    &[data-tone="danger"] .callout-icon { color: ${c.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const calloutRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Callout } from "./callout.js";
+export { calloutRecipe } from "./callout.recipe.js";

package/dist/esm/components/card/card.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cardRecipe } from "./card.recipe.js";
+/** A bordered surface card. Compose with CardHeader / CardBody / CardFooter. */
+export const Card = React.forwardRef(({ raised, interactive, className, ...props }, ref) => (_jsx("div", { ref: ref, className: cardRecipe({ raised, interactive, className }), ...props })));
+Card.displayName = "Card";
+export function CardHeader({ children, icon, action, }) {
+    return (_jsxs("div", { className: "card-header", children: [icon, _jsx("span", { className: "card-title", children: children }), action] }));
+}
+export function CardBody({ children, className, }) {
+    return (_jsx("div", { className: className ? `card-body ${className}` : "card-body", children: children }));
+}
+export function CardFooter({ children }) {
+    return _jsx("div", { className: "card-footer", children: children });
+}

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

@@ -0,0 +1,28 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A bordered surface card — the recurring container behind kanban cards, chart
+// cards, workflow nodes, and highlight cells. `raised` adds a soft float shadow;
+// `interactive` adds a hover affordance.
+const config = defineRecipe({
+    name: "card",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-family: ${c.font.sans}; color: ${c.fgPrimary};
+    & .card-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; padding: ${c.space["3"]} ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; }
+    & .card-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .card-body { flex: 1; min-height: 0; padding: ${c.space["4"]}; }
+    & .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["2"]}; flex-shrink: 0; padding: ${c.space["3"]} ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }`,
+    variants: {
+        raised: {
+            true: `box-shadow: inset 0 0 0 1px ${c.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px -4px rgba(28,40,64,0.08);`,
+            false: "",
+        },
+        interactive: {
+            true: `cursor: pointer; transition: box-shadow 0.12s ease; &:hover { box-shadow: inset 0 0 0 1px ${c.borderDefault}, 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }`,
+            false: "",
+        },
+    },
+    defaultVariants: { raised: false, interactive: false },
+    compoundVariants: [],
+});
+export const cardRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Card, CardBody, CardFooter, CardHeader } from "./card.js";
+export { cardRecipe } from "./card.recipe.js";

package/dist/esm/components/checkbox/checkbox.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { checkboxRecipe } from "./checkbox.recipe.js";
+/**
+ * A native `<input type="checkbox">` styled to Attio's grid checkbox (16px,
+ * r6, brand fill + white check). Native on purpose: keyboard, focus, and form
+ * semantics come for free. `indeterminate` is a DOM-only property, so it is
+ * applied via ref rather than an attribute.
+ */
+export const Checkbox = React.forwardRef(({ className, indeterminate = false, asChild, ...props }, ref) => {
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    React.useEffect(() => {
+        if (innerRef.current)
+            innerRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return (_jsx(Primitive.input, { ref: innerRef, asChild: asChild, type: "checkbox", className: checkboxRecipe({ className }), ...props }));
+});
+Checkbox.displayName = "Checkbox";

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

@@ -0,0 +1,23 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A 16px square checkbox measured from Attio's record grid: r6, a subtle 1px
+// inset ring when empty, brand fill + white check when on. The check is a
+// data-URI SVG background so it renders reliably (input pseudo-content doesn't).
+const CHECK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
+const config = defineRecipe({
+    name: "checkbox",
+    base: `appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); } &:checked, &:indeterminate { background: ${c.bgBrandSolid} center / 10px no-repeat; box-shadow: none; } &:checked { background-image: ${CHECK}; } &:indeterminate { background-image: linear-gradient(${c.fgOnBrand}, ${c.fgOnBrand}); background-size: 8px 2px; } &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const checkboxRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: {
+        box: {
+            size: "16px",
+            borderRadius: "6px",
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Checkbox } from "./checkbox.js";
+export { checkboxRecipe } from "./checkbox.recipe.js";

package/dist/esm/components/contextmenu/contextmenu.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { contextmenuRecipe } from "./contextmenu.recipe.js";
+/**
+ * A right-click context menu — the popover surface positioned at the cursor.
+ * Wrap the target; right-clicking it opens the menu (flipping at the viewport
+ * edges), closing on select, outside pointer-down, and Escape.
+ */
+export function ContextMenu({ children, items, className }) {
+    const rootRef = React.useRef(null);
+    const [pos, setPos] = React.useState(null);
+    const open = (e) => {
+        e.preventDefault();
+        // flip so the menu stays on-screen near the right/bottom edges
+        const x = Math.min(e.clientX, window.innerWidth - 220);
+        const y = Math.min(e.clientY, window.innerHeight - 12 - items.length * 34);
+        setPos({ x: Math.max(8, x), y: Math.max(8, y) });
+    };
+    const close = React.useCallback(() => setPos(null), []);
+    React.useEffect(() => {
+        if (!pos)
+            return;
+        const onDown = (e) => {
+            if (!rootRef.current?.contains(e.target))
+                close();
+        };
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("pointerdown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("pointerdown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [pos, close]);
+    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx("div", { className: "contextmenu-content", role: "menu", style: { left: pos.x, top: pos.y }, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+                        ? "contextmenu-item contextmenu-item--danger"
+                        : "contextmenu-item", onClick: () => {
+                        item.onSelect?.();
+                        close();
+                    }, children: [item.icon, item.label, item.shortcut && (_jsx("span", { className: "contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
+}
+ContextMenu.displayName = "ContextMenu";

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

@@ -0,0 +1,21 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A right-click menu on the measured popover surface, positioned at the cursor.
+const config = defineRecipe({
+    name: "contextmenu",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; 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}; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .contextmenu-item { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: 32px; box-sizing: border-box; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; text-align: left; white-space: nowrap; cursor: pointer; }
+    & .contextmenu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .contextmenu-item:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+    & .contextmenu-item--danger { color: ${c.bgDanger}; }
+    & .contextmenu-item--danger svg { color: ${c.bgDanger}; }
+    & .contextmenu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .contextmenu-shortcut { margin-left: auto; padding-left: ${c.space["3"]}; color: ${c.fgMuted}; font-size: ${c.text.sm}; }
+    & .contextmenu-sep { height: 1px; margin: ${c.space["1"]} 0; border: none; background: ${c.borderSubtle}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const contextmenuRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { ContextMenu, } from "./contextmenu.js";
+export { contextmenuRecipe } from "./contextmenu.recipe.js";

package/dist/esm/components/datatable/datatable.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ChevronsUpDown, Plus, Search } from "lucide-react";
+import * as React from "react";
+import { Checkbox } from "../checkbox/index.js";
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
+import { datatableRecipe } from "./datatable.recipe.js";
+function cellValue(col, row) {
+    if (col.accessor)
+        return col.accessor(row);
+    return row[col.key];
+}
+function asText(v) {
+    if (v == null)
+        return "";
+    if (typeof v === "object" && "name" in v)
+        return v.name ?? "";
+    if (Array.isArray(v))
+        return v.join(", ");
+    return String(v);
+}
+// stable pastel tone per string value — colour-coded tags/statuses, like Attio
+const TAG_TONES = [
+    "brand",
+    "success",
+    "warning",
+    "danger",
+    "purple",
+    "cyan",
+    "orange",
+];
+function toneFor(t) {
+    let h = 0;
+    for (let i = 0; i < t.length; i++)
+        h = (h * 31 + t.charCodeAt(i)) >>> 0;
+    return TAG_TONES[h % TAG_TONES.length];
+}
+function initials(name) {
+    const p = name.trim().split(/\s+/);
+    return ((p[0]?.[0] ?? "") + (p[1]?.[0] ?? "")).toUpperCase() || "?";
+}
+const DATE_FMT = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+});
+function formatCell(type, v, symbol) {
+    if (type === "number")
+        return typeof v === "number" ? v.toLocaleString("en-US") : asText(v);
+    if (type === "currency")
+        return typeof v === "number"
+            ? `${symbol ?? "$"}${v.toLocaleString("en-US")}`
+            : asText(v);
+    if (type === "date") {
+        const d = v ? new Date(v) : null;
+        return d && !Number.isNaN(d.getTime()) ? DATE_FMT.format(d) : asText(v);
+    }
+    return asText(v);
+}
+/** Built-in typed-cell renderer (used when a column has no custom `render`). */
+function renderTyped(col, value, avatarTone) {
+    const empty = _jsx("span", { className: "datatable-muted", children: "\u2014" });
+    switch (col.type) {
+        case "entity": {
+            const e = (typeof value === "object" && value ? value : { name: asText(value) });
+            if (!e.name)
+                return empty;
+            return (_jsxs("span", { className: "datatable-entity", children: [_jsx("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(e.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _jsx("span", { className: "datatable-entity-name", children: e.name })] }));
+        }
+        case "tags": {
+            const tags = Array.isArray(value) ? value : [];
+            if (!tags.length)
+                return empty;
+            return (_jsx("span", { className: "datatable-tags", children: tags.map((t) => (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
+        }
+        case "status": {
+            const s = asText(value);
+            if (!s)
+                return empty;
+            return (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: s }));
+        }
+        default: {
+            const text = formatCell(col.type, value, col.symbol);
+            const isNum = col.type === "number" || col.type === "currency";
+            if (!text)
+                return empty;
+            return isNum ? _jsx("span", { className: "datatable-num", children: text }) : text;
+        }
+    }
+}
+const CHECK_W = 40;
+export function DataTable({ columns, data, selectable = false, selectedIds, onSelectionChange, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", onEdit, stickyFirst = true, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, toolbar, className, }) {
+    const [query, setQuery] = React.useState("");
+    const [internalSort, setInternalSort] = React.useState(defaultSort ?? null);
+    const sort = sortProp !== undefined ? sortProp : internalSort;
+    const setSort = React.useCallback((next) => {
+        onSortChange?.(next);
+        if (sortProp === undefined)
+            setInternalSort(next);
+    }, [onSortChange, sortProp]);
+    const [internalSel, setInternalSel] = React.useState(new Set());
+    const selected = React.useMemo(() => (selectedIds ? new Set(selectedIds) : internalSel), [selectedIds, internalSel]);
+    const setSelected = React.useCallback((next) => {
+        onSelectionChange?.([...next]);
+        if (!selectedIds)
+            setInternalSel(next);
+    }, [onSelectionChange, selectedIds]);
+    const [editing, setEditing] = React.useState(null);
+    const [scrolledX, setScrolledX] = React.useState(false);
+    // column widths (drag-to-resize) + fixed-layout sizing
+    const [widths, setWidths] = React.useState({});
+    const [resizingKey, setResizingKey] = React.useState(null);
+    const resizeRef = React.useRef(null);
+    const colWidth = (col) => widths[col.key] ?? col.width ?? (col.type === "entity" ? 220 : 160);
+    const minWidth = (selectable ? CHECK_W : 0) +
+        columns.reduce((sum, col) => sum + colWidth(col), 0);
+    const colByKey = React.useMemo(() => {
+        const m = new Map();
+        for (const c of columns)
+            m.set(c.key, c);
+        return m;
+    }, [columns]);
+    const filtered = React.useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return data;
+        const cols = columns.filter((c) => c.filterable !== false);
+        return data.filter((row) => cols.some((c) => asText(cellValue(c, row)).toLowerCase().includes(q)));
+    }, [data, columns, query]);
+    const rows = React.useMemo(() => {
+        if (!sort)
+            return filtered;
+        const col = colByKey.get(sort.key);
+        if (!col)
+            return filtered;
+        const dir = sort.dir === "asc" ? 1 : -1;
+        return [...filtered].sort((a, b) => {
+            const av = cellValue(col, a);
+            const bv = cellValue(col, b);
+            if (typeof av === "number" && typeof bv === "number")
+                return (av - bv) * dir;
+            return asText(av).localeCompare(asText(bv)) * dir;
+        });
+    }, [filtered, sort, colByKey]);
+    const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.id));
+    const someSelected = selected.size > 0 && !allSelected;
+    function toggleAll() {
+        setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
+    }
+    function toggleRow(id) {
+        const next = new Set(selected);
+        next.has(id) ? next.delete(id) : next.add(id);
+        setSelected(next);
+    }
+    function cycleSort(key) {
+        if (!sort || sort.key !== key)
+            setSort({ key, dir: "asc" });
+        else if (sort.dir === "asc")
+            setSort({ key, dir: "desc" });
+        else
+            setSort(null);
+    }
+    function commitEdit(id, key, value) {
+        onEdit?.(id, key, value);
+        setEditing(null);
+    }
+    const totalCols = columns.length + (selectable ? 1 : 0);
+    const hasSummary = columns.some((c) => c.summary);
+    // sticky attrs for the leading column(s): selection col + first data column
+    const stickyCol = (index) => {
+        if (!stickyFirst)
+            return {};
+        if (selectable && index === -1)
+            return { "data-sticky": "", style: { left: 0 } };
+        if (index === 0)
+            return {
+                "data-sticky": "",
+                "data-sticky-edge": "",
+                style: { left: selectable ? CHECK_W : 0 },
+            };
+        return {};
+    };
+    const alignFor = (col) => col.align ??
+        (col.type === "number" || col.type === "currency" ? "right" : undefined);
+    function startResize(col, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.target.setPointerCapture(e.pointerId);
+        resizeRef.current = {
+            key: col.key,
+            startX: e.clientX,
+            startW: colWidth(col),
+        };
+        setResizingKey(col.key);
+    }
+    function moveResize(e) {
+        const r = resizeRef.current;
+        if (!r)
+            return;
+        const w = Math.max(64, r.startW + (e.clientX - r.startX));
+        setWidths((prev) => ({ ...prev, [r.key]: w }));
+    }
+    function endResize(e) {
+        resizeRef.current = null;
+        setResizingKey(null);
+        e.target.releasePointerCapture(e.pointerId);
+    }
+    function ChevronFor({ colKey }) {
+        if (sort?.key === colKey)
+            return sort.dir === "asc" ? (_jsx(ArrowUp, { className: "datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
+        return (_jsx(ChevronsUpDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
+    }
+    return (_jsxs("div", { className: datatableRecipe({ className }), children: [(filterable || showCount || toolbar) && (_jsxs("div", { className: "datatable-toolbar", children: [filterable && (_jsxs("span", { className: "datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": "Search table" })] })), showCount && (_jsx("span", { className: "datatable-count", children: rows.length === data.length
+                            ? `${data.length} ${data.length === 1 ? "row" : "rows"}`
+                            : `${rows.length} of ${data.length}` })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+                    onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
+                    ...(scrolledX ? { "data-scrolled-x": "" } : {}),
+                }, children: [_jsxs("colgroup", { children: [selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableHead, { className: "datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
+                                    const Icon = col.icon;
+                                    const inner = (_jsxs("span", { className: "datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
+                                    return (_jsxs(TableHead, { align: alignFor(col), ...stickyCol(i), children: [col.sortable ? (_jsx("button", { type: "button", className: "datatable-sort", "data-sorted": sort?.key === col.key ? sort.dir : undefined, onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && (_jsx("span", { className: "datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
+                                })] }) }), _jsx(TableBody, { children: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "datatable-empty", children: empty }) }) })) : (rows.map((row) => (_jsxs(TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, style: onRowClick ? { cursor: "pointer" } : undefined, children: [selectable && (_jsx(TableCell, { className: "datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": `Select row ${row.id}`, checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
+                                    const isEditing = editing?.id === row.id && editing?.key === col.key;
+                                    const value = cellValue(col, row);
+                                    const sticky = stickyCol(i);
+                                    if (isEditing) {
+                                        return (_jsx(TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: _jsx("input", { className: "datatable-edit", 
+                                                // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
+                                                autoFocus: true, defaultValue: asText(value), "aria-label": `Edit ${col.key}`, onKeyDown: (e) => {
+                                                    if (e.key === "Enter")
+                                                        commitEdit(row.id, col.key, e.currentTarget.value);
+                                                    else if (e.key === "Escape")
+                                                        setEditing(null);
+                                                }, onBlur: (e) => commitEdit(row.id, col.key, e.currentTarget.value) }) }, col.key));
+                                    }
+                                    return (_jsx(TableCell, { align: alignFor(col), ...sticky, className: col.editable ? "datatable-editable" : undefined, onClick: col.editable
+                                            ? (e) => {
+                                                e.stopPropagation();
+                                                setEditing({ id: row.id, key: col.key });
+                                            }
+                                            : undefined, children: col.render
+                                            ? col.render(value, row)
+                                            : renderTyped(col, col.format ? col.format(value, row) : value, avatarTone) }, col.key));
+                                })] }, row.id)))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+}
+DataTable.displayName = "DataTable";

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

@@ -0,0 +1,72 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The feature-rich, config-driven data grid (sort / filter / selection /
+// inline edit) built on the composable `Table` primitives. This recipe adds the
+// toolbar, sortable header buttons, selection cells, selected-row tint, and the
+// inline-edit input on top of the base `.table` styling.
+const config = defineRecipe({
+    name: "datatable",
+    base: `display: flex; flex-direction: column; gap: ${c.space["2.5"]}; font-family: ${c.font.sans};
+    & .datatable-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
+    & .datatable-search svg { position: absolute; left: ${c.space["2"]}; color: ${c.fgMuted}; pointer-events: none; }
+    & .datatable-search input { width: 100%; height: 32px; padding: 0 ${c.space["2"]} 0 ${c.space["6"]}; 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}; color: ${c.fgPrimary}; outline: none; transition: box-shadow .15s; }
+    & .datatable-search input::placeholder { color: ${c.fgMuted}; }
+    & .datatable-search input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .datatable-count { margin-left: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .datatable-th-inner { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: 100%; }
+    & .datatable-th-inner > svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .datatable-sort { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
+    & th[data-align="right"] .datatable-sort { justify-content: flex-end; }
+    & .datatable-chevron { margin-left: auto; flex-shrink: 0; color: ${c.fgMuted}; opacity: 0; transition: opacity .12s; }
+    & th[data-align="right"] .datatable-chevron { margin-left: 0; }
+    & .datatable-sort:hover .datatable-chevron { opacity: 0.6; }
+    & .datatable-sort[data-sorted] .datatable-chevron { opacity: 1; color: ${c.fgPrimary}; }
+    /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
+    & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${c.bgSurface}; }
+    & th[data-sticky] { z-index: 3; }
+    & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${c.bgBrandSolid} 6%, ${c.bgSurface}); }
+    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${c.fgPrimary} 3%, ${c.bgSurface}); }
+    & .table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -14px 0 0); box-shadow: 8px 0 12px -8px rgba(28,40,64,0.22); }
+    /* add-row + summary footer */
+    & .datatable-addcell { padding: 0; border-top: none; }
+    & .datatable-addrow { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border: none; border-top: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.lg}; cursor: pointer; transition: background-color .12s; }
+    & .datatable-addrow:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .datatable-addrow svg { flex-shrink: 0; }
+    & .datatable-check { display: flex; align-items: center; justify-content: center; }
+    & .datatable-col-check { width: 40px; padding: 0; text-align: center; }
+    & tbody tr[data-selected] td { background: color-mix(in srgb, ${c.bgBrandSolid} 6%, ${c.bgSurface}); }
+    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
+    & .datatable-editable:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); cursor: text; }
+    & .datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${c.space["1.5"]}; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; vertical-align: middle; }
+    & .datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
+    /* fixed layout so column widths (and resize) are exact — like RecordsTable */
+    & table { table-layout: fixed; }
+    /* column resize grip */
+    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
+    /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
+    & .datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
+    & .datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnBrand}; background: ${c.bgBrandSolid}; }
+    & .datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; } & .datatable-avatar[data-tone="warning"] { background: ${c.bgWarning}; } & .datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; } & .datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; } & .datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; } & .datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; }
+    & .datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+    & .datatable-tags { display: flex; align-items: center; gap: ${c.space["1"]}; overflow: hidden; }
+    & .datatable-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
+    & .datatable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    & .datatable-num { font-variant-numeric: tabular-nums; }
+    & .datatable-muted { color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const datatableRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { DataTable, } from "./datatable.js";
+export { datatableRecipe } from "./datatable.recipe.js";