@crisp-ui-kit/crisp 0.5.0 → 0.7.1

package/dist/cjs/components/statcard/statcard.recipe.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statcardRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A single-metric KPI tile — measured from Attio's Reports "Insight" number
+// report: a small muted label, a large semibold value, and an optional delta
+// pill (green up / red down) with a caption. Fills its container.
+const config = (0, core_1.defineRecipe)({
+    name: "statcard",
+    base: `display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .statcard-label { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .statcard-label svg { color: ${tokens_1.contract.fgMuted}; }
+    & .statcard-value { font-size: 28px; line-height: 32px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.4px; color: ${tokens_1.contract.fgPrimary}; }
+    & .statcard-foot { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .statcard-delta svg { flex-shrink: 0; }
+    & .statcard-delta[data-trend="up"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .statcard-delta[data-trend="down"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .statcard-delta[data-trend="flat"] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {
+        // Opt-in chrome for consumers who want the tile self-contained instead of
+        // hand-wrapping it in <Card><CardBody>. Not measured as part of the Attio
+        // report tile itself (the tile sits bare inside the report's own Card —
+        // see the docs page) — reuses Card's exact border/radius/bg rather than
+        // inventing a new value, since it is only ever an explicit opt-in.
+        card: {
+            true: `padding: ${tokens_1.contract.space["4"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle};`,
+            false: ``,
+        },
+    },
+    defaultVariants: { card: false },
+    compoundVariants: [],
+});
+exports.statcardRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/components/switch/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switchRecipe = exports.Switch = void 0;
+var switch_1 = require("./switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return switch_1.Switch; } });
+var switch_recipe_1 = require("./switch.recipe");
+Object.defineProperty(exports, "switchRecipe", { enumerable: true, get: function () { return switch_recipe_1.switchRecipe; } });

package/dist/cjs/components/switch/switch.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const switch_recipe_1 = require("./switch.recipe");
+/**
+ * An on/off toggle — the settings switch, measured from Attio. Renders a
+ * `role="switch"` button (a native checkbox's semantics without its box), so
+ * label association and keyboard (Space/Enter) come for free. Controlled via
+ * `checked`/`onCheckedChange`, or uncontrolled from `defaultChecked`.
+ */
+exports.Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, ...props }, ref) => {
+    const [internal, setInternal] = React.useState(defaultChecked);
+    const on = checked ?? internal;
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", role: "switch", "aria-checked": on, disabled: disabled, "data-checked": on ? "" : undefined, className: (0, switch_recipe_1.switchRecipe)({ className }), onClick: (e) => {
+            onClick?.(e);
+            if (e.defaultPrevented)
+                return;
+            if (checked === undefined)
+                setInternal((v) => !v);
+            onCheckedChange?.(!on);
+        }, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: "switch-thumb" }) }));
+});
+exports.Switch.displayName = "Switch";

package/dist/cjs/components/switch/switch.recipe.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switchRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// Attio's settings toggle, measured from the live app: a 24×16 pill track that
+// flips from a muted grey to brand blue (#266df0), with a 12px white thumb
+// (2px inset) that slides 8px across. background + transform both animate .2s.
+const config = (0, core_1.defineRecipe)({
+    name: "switch",
+    base: `
+    display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
+    border: none; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent);
+    cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
+    & .switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: ${tokens_1.contract.radius.full}; background: #fff; transition: transform .2s ease; }
+    &[data-checked] { background: ${tokens_1.contract.bgBrandSolid}; }
+    &[data-checked] .switch-thumb { transform: translateX(8px); }
+    &:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 2px; }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.switchRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: { track: { width: "24px", height: "16px" }, thumb: { size: "12px" } },
+});
+exports.default = config;

package/dist/cjs/components/table/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableRecipe = exports.TableRow = exports.TableHeader = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.Table = void 0;
+var table_1 = require("./table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return table_1.Table; } });
+Object.defineProperty(exports, "TableBody", { enumerable: true, get: function () { return table_1.TableBody; } });
+Object.defineProperty(exports, "TableCaption", { enumerable: true, get: function () { return table_1.TableCaption; } });
+Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return table_1.TableCell; } });
+Object.defineProperty(exports, "TableFooter", { enumerable: true, get: function () { return table_1.TableFooter; } });
+Object.defineProperty(exports, "TableHead", { enumerable: true, get: function () { return table_1.TableHead; } });
+Object.defineProperty(exports, "TableHeader", { enumerable: true, get: function () { return table_1.TableHeader; } });
+Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return table_1.TableRow; } });
+var table_recipe_1 = require("./table.recipe");
+Object.defineProperty(exports, "tableRecipe", { enumerable: true, get: function () { return table_recipe_1.tableRecipe; } });

package/dist/cjs/components/table/table.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCaption = exports.TableCell = exports.TableHead = exports.TableRow = exports.TableFooter = exports.TableBody = exports.TableHeader = exports.Table = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const table_recipe_1 = require("./table.recipe");
+/**
+ * A composable data table. Wraps `<table>` in a horizontally scrollable
+ * surface — `surface="card"` (default) bordered + rounded, `surface="bleed"`
+ * edge-to-edge like RecordsTable's full-page grid. Compose with
+ * `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`,
+ * `TableCell`, and `TableCaption`.
+ */
+exports.Table = React.forwardRef(({ interactive, surface, className, wrapperClassName, scrollProps, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { className: (0, table_recipe_1.tableRecipe)({
+        interactive,
+        surface,
+        className: wrapperClassName,
+    }), children: (0, jsx_runtime_1.jsx)("div", { ...scrollProps, className: `table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: (0, jsx_runtime_1.jsx)("table", { ref: ref, className: className, ...props, children: children }) }) })));
+exports.Table.displayName = "Table";
+exports.TableHeader = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("thead", { ref: ref, ...props }));
+exports.TableHeader.displayName = "TableHeader";
+exports.TableBody = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("tbody", { ref: ref, ...props }));
+exports.TableBody.displayName = "TableBody";
+exports.TableFooter = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("tfoot", { ref: ref, ...props }));
+exports.TableFooter.displayName = "TableFooter";
+exports.TableRow = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("tr", { ref: ref, ...props }));
+exports.TableRow.displayName = "TableRow";
+exports.TableHead = React.forwardRef(({ align, ...props }, ref) => (0, jsx_runtime_1.jsx)("th", { ref: ref, "data-align": align, ...props }));
+exports.TableHead.displayName = "TableHead";
+exports.TableCell = React.forwardRef(({ align, ...props }, ref) => (0, jsx_runtime_1.jsx)("td", { ref: ref, "data-align": align, ...props }));
+exports.TableCell.displayName = "TableCell";
+exports.TableCaption = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("caption", { ref: ref, ...props }));
+exports.TableCaption.displayName = "TableCaption";

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A general-purpose, composable data table — the lightweight primitive for
+// arbitrary tabular data (as opposed to `product/recordstable`, which is a
+// faithful rebuild of Attio's heavy records grid). It carries the SAME measured
+// grid styling as RecordsTable — 36px rows, a 40px header, hairline vertical +
+// horizontal grid lines — so `DataTable` (built on this) matches that polish.
+const config = (0, core_1.defineRecipe)({
+    name: "table",
+    base: `display: block; box-sizing: border-box; background: ${tokens_1.contract.bgSurface};
+    & .table-scroll { overflow-x: auto; }
+    & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th { height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); user-select: none; }
+    & td { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; }
+    & th:last-child, & td:last-child { border-inline-end: none; }
+    & tbody tr:last-child td { border-bottom: none; }
+    & tfoot td { border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-bottom: none; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & caption { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]}; text-align: start; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.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, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); }`,
+            false: ``,
+        },
+        // card (default): the bordered rounded surface, unchanged for existing
+        // consumers. bleed: drops the outer border/radius/inset so the grid runs
+        // edge-to-edge, like RecordsTable's real full-page records grid.
+        surface: {
+            card: `border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius.xl}; overflow: hidden;`,
+            bleed: `border: none; border-radius: 0;`,
+        },
+    },
+    defaultVariants: { interactive: false, surface: "card" },
+    compoundVariants: [],
+});
+exports.tableRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/components/tabletoolbar/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabletoolbarRecipe = void 0;
+__exportStar(require("./tabletoolbar"), exports);
+var tabletoolbar_recipe_1 = require("./tabletoolbar.recipe");
+Object.defineProperty(exports, "tabletoolbarRecipe", { enumerable: true, get: function () { return tabletoolbar_recipe_1.tabletoolbarRecipe; } });

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

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toolbarChromeBody = exports.toolbarChromeHead = void 0;
+const tokens_1 = require("../../tokens");
+// 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.
+const toolbarChromeHead = (p) => `    & .${p}-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
+    & .${p}-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-search svg { flex-shrink: 0; }
+    & .${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; width: 180px; }
+    & .${p}-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-tool { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${p}-tool:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .${p}-tool svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-tool--active { background: ${tokens_1.contract.bgRaised}; }
+    & .${p}-tool--ghost { box-shadow: none; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-tool--ghost:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
+    & .${p}-toolgroup { position: relative; display: inline-flex; }
+    & .${p}-menu { position: absolute; top: calc(100% + ${tokens_1.contract.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; display: flex; flex-direction: column; gap: ${tokens_1.contract.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); } }`;
+exports.toolbarChromeHead = toolbarChromeHead;
+const toolbarChromeBody = (p) => `    & .${p}-menu-head { padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-sortpop { min-width: 460px; overflow: visible; padding: ${tokens_1.contract.space["1.5"]}; gap: ${tokens_1.contract.space["1"]}; }
+    & .${p}-sort-empty { padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-sort-row { display: flex; align-items: center; gap: ${tokens_1.contract.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 * ${tokens_1.contract.space["1"]}); padding: 0; border: none; background: none; color: ${tokens_1.contract.fgMuted}; cursor: grab; }
+    & .${p}-sort-grip:active { cursor: grabbing; }
+    & .${p}-sort-grip:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .${p}-sort-optlabel { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+    & .${p}-sort-optlabel svg { flex-shrink: 0; color: ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .${p}-sort-remove:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .${p}-sort-addrow { display: flex; padding: ${tokens_1.contract.space["0.5"]} 0; }
+    & .${p}-sort-add { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; transition: background-color .12s; }
+    & .${p}-sort-add:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .${p}-sort-add svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-sort-foot { display: flex; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["0.5"]}; }
+    & .${p}-sort-learn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.lg}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); text-decoration: none; }
+    & .${p}-sort-learn svg { flex-shrink: 0; }
+    & .${p}-sort-learn:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .${p}-menu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: left; cursor: pointer; }
+    & .${p}-menu-item:hover { background: ${tokens_1.contract.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: ${tokens_1.contract.fgMuted}; }
+    & .${p}-menu-item[data-on] svg { color: ${tokens_1.contract.bgBrandSolid}; }
+    & .${p}-menu-item .${p}-menu-check { margin-left: auto; }
+    & .${p}-menu-input { height: ${tokens_1.contract.size.row}; margin: ${tokens_1.contract.space["0.5"]}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
+    & .${p}-menu-sep { height: 1px; background: ${tokens_1.contract.borderSubtle}; margin: ${tokens_1.contract.space["0.5"]} 0; }
+    & .${p}-menu--up { top: auto; bottom: calc(100% + ${tokens_1.contract.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: ${tokens_1.contract.bgDanger}; }
+    & .${p}-menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
+    & .${p}-menu-item--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    & .${p}-menu-check { margin-left: auto; color: ${tokens_1.contract.bgBrandSolid}; }
+    & .${p}-fchip { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.row}; padding-right: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; background: ${tokens_1.contract.bgSurface}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; white-space: nowrap; }
+    & .${p}-fchip-main { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; }
+    & .${p}-fchip-field { font-weight: ${tokens_1.contract.weight.medium}; }
+    & .${p}-fchip-op { color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-fchip-val { font-weight: ${tokens_1.contract.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: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .${p}-fchip-x:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 10%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .${p}-spacer { flex: 1; }
+    & .${p}-count { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .${p}-new { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${p}-new:hover { background: ${tokens_1.contract.bgBrandSolidPressed}; }`;
+exports.toolbarChromeBody = toolbarChromeBody;

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -0,0 +1,237 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyFilters = applyFilters;
+exports.applySorts = applySorts;
+exports.TableToolbar = TableToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const select_1 = require("../select");
+const tabletoolbar_recipe_1 = require("./tabletoolbar.recipe");
+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".
+ */
+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.
+ */
+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.
+ */
+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;
+    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;
+    // 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 ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-empty", children: "No sorts applied to this view." })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
+                                        if (dragSort !== null)
+                                            e.preventDefault();
+                                    }, onDrop: () => {
+                                        if (dragSort !== null)
+                                            moveSort(dragSort, i);
+                                        setDragSort(null);
+                                    }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)(select_1.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 ? ((0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
+                                                keywords: c.label,
+                                            })), "aria-label": sortFieldLabel }), (0, jsx_runtime_1.jsx)(select_1.Select, { className: "tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                                {
+                                                    value: "asc",
+                                                    label: ((0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), ascendingLabel] })),
+                                                    keywords: ascendingLabel,
+                                                },
+                                                {
+                                                    value: "desc",
+                                                    label: ((0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
+                                                    keywords: descendingLabel,
+                                                },
+                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), "Add sort"] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), "Learn about sorting"] }) }))] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                    ? filterTriggerLabel(activeFilters)
+                                    : activeFilters
+                                        ? `Filter · ${activeFilters}`
+                                        : "Filter"] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [(0, jsx_runtime_1.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
+                                    .toLowerCase()
+                                    .includes(filterQuery.trim().toLowerCase()))
+                                    .map((col) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-val", children: cond.value }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-op", children: "Select condition" }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.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));
+                }), (0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-spacer" }), count != null && (0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-count", children: count }), children] }) }));
+}