@crisp-ui-kit/crisp 0.5.0 → 0.7.1

package/dist/cjs/components/linechart/linechart.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = LineChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tokens_1 = require("../../tokens");
+const linechart_recipe_1 = require("./linechart.recipe");
+function niceNum(raw) {
+    if (raw <= 0)
+        return 1;
+    const mag = 10 ** Math.floor(Math.log10(raw));
+    const norm = raw / mag;
+    const step = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;
+    return step * mag;
+}
+/**
+ * A responsive line chart — measured from Attio's Reports historical charts.
+ * A stretched SVG line/area (non-scaling stroke keeps it crisp) over dashed
+ * gridlines; dots are HTML so they stay round. `role="img"` with a summary.
+ */
+function LineChart({ data, height = 240, max, ticks = 5, color, area = true, dots = true, format = (n) => n.toLocaleString(), yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }) {
+    const rawMax = Math.max(1, ...data.map((d) => d.value));
+    const step = max ? max / (ticks - 1) : niceNum(rawMax / (ticks - 1));
+    const top = step * (ticks - 1);
+    const tickValues = Array.from({ length: ticks }, (_, i) => step * i);
+    // The value-axis gutter must fit whatever `format` actually returns — a
+    // hardcoded width fits "4.0k" but not "4,000,000₮". `ch` is the width of
+    // "0" in the current font, so sizing off the longest formatted tick tracks
+    // the real label width without measuring the DOM (works during SSR, no
+    // ResizeObserver). `yAxisWidth` lets a caller pin the gutter instead.
+    const longestTickChars = Math.max(0, ...tickValues.map((t) => format(t).length));
+    const yAxisWidthValue = yAxisWidth != null
+        ? `${yAxisWidth}px`
+        : `max(34px, ${longestTickChars}ch + ${tokens_1.contract.space["4"]})`;
+    // points in a 0..100 viewBox (y inverted: 0 at top)
+    const n = data.length;
+    const pts = data.map((d, i) => {
+        const x = n === 1 ? 50 : (i / (n - 1)) * 100;
+        const frac = Math.max(0, Math.min(1, d.value / top));
+        return { x, y: 100 - frac * 100, frac };
+    });
+    const line = pts.map((p) => `${p.x},${p.y}`).join(" ");
+    const areaPath = pts.length > 1
+        ? `M ${pts[0].x},100 ${pts.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${pts[pts.length - 1].x},100 Z`
+        : "";
+    const summary = ariaLabel ??
+        `Line chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, linechart_recipe_1.linechartRecipe)({ className }), ...rest, style: {
+            height,
+            "--linechart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "linechart-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "linechart-yaxis", children: tickValues.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), (0, jsx_runtime_1.jsxs)("div", { className: "linechart-plot", children: [tickValues.map((t) => ((0, jsx_runtime_1.jsx)("div", { className: "linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && ((0, jsx_runtime_1.jsxs)("svg", { className: "linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && (0, jsx_runtime_1.jsx)("path", { className: "linechart-area", d: areaPath }), (0, jsx_runtime_1.jsx)("polyline", { className: "linechart-line", points: line, style: { stroke: color } })] })), dots &&
+                                pts.map((p, i) => ((0, jsx_runtime_1.jsx)("span", { className: "linechart-dot-html", style: {
+                                        left: `${p.x}%`,
+                                        bottom: `${p.frac * 100}%`,
+                                        borderColor: color,
+                                    }, title: `${data[i].label}: ${format(data[i].value)}` }, i)))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "linechart-xaxis", children: data.map((d) => ((0, jsx_runtime_1.jsx)("span", { className: "linechart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "linechart-axis-title", children: xAxisTitle }))] }));
+}
+LineChart.displayName = "LineChart";

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linechartRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A responsive line chart — measured from Attio's Reports historical charts: a
+// brand line with a soft area fill over dashed horizontal gridlines, a value
+// axis on the left, and category labels below. The plot is an SVG stretched to
+// its box (non-scaling stroke keeps the line crisp); axes are HTML.
+const config = (0, core_1.defineRecipe)({
+    name: "linechart",
+    // --linechart-yaxis-width is the one source of truth for the value-axis
+    // gutter: the component sets it (auto-sized to the longest tick label, or
+    // pinned via `yAxisWidth`) on the root element, and it inherits down to the
+    // x-axis padding and axis title so they never drift out of alignment. 34px
+    // is only the pre-JS fallback (e.g. if `linechartRecipe` is used bare).
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; --linechart-yaxis-width: 34px;
+    & .linechart-body { display: flex; flex: 1; min-height: 0; }
+    & .linechart-yaxis { position: relative; flex-shrink: 0; width: var(--linechart-yaxis-width); }
+    & .linechart-ytick { position: absolute; inset-inline-end: ${tokens_1.contract.space["2"]}; transform: translateY(50%); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid ${tokens_1.contract.borderDefault}; }
+    & .linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${tokens_1.contract.borderSubtle}; pointer-events: none; }
+    & .linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+    & .linechart-area { fill: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 12%, transparent); stroke: none; }
+    & .linechart-line { fill: none; stroke: ${tokens_1.contract.bgBrandSolid}; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+    & .linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgSurface}; border: 2px solid ${tokens_1.contract.bgBrandSolid}; transform: translate(-50%, 50%); pointer-events: auto; }
+    & .linechart-xaxis { display: flex; margin-top: ${tokens_1.contract.space["1.5"]}; padding-inline-start: var(--linechart-yaxis-width); }
+    & .linechart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .linechart-axis-title { margin-top: ${tokens_1.contract.space["1"]}; padding-inline-start: var(--linechart-yaxis-width); text-align: center; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.linechartRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuKeyboard = exports.MENU_ITEM_SELECTOR = exports.menuRecipe = exports.MenuSeparator = exports.MenuLabel = exports.MenuItem = exports.MenuCheckboxItem = exports.Menu = void 0;
+var menu_1 = require("./menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return menu_1.Menu; } });
+Object.defineProperty(exports, "MenuCheckboxItem", { enumerable: true, get: function () { return menu_1.MenuCheckboxItem; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return menu_1.MenuItem; } });
+Object.defineProperty(exports, "MenuLabel", { enumerable: true, get: function () { return menu_1.MenuLabel; } });
+Object.defineProperty(exports, "MenuSeparator", { enumerable: true, get: function () { return menu_1.MenuSeparator; } });
+var menu_recipe_1 = require("./menu.recipe");
+Object.defineProperty(exports, "menuRecipe", { enumerable: true, get: function () { return menu_recipe_1.menuRecipe; } });
+var menu_keyboard_1 = require("./menu-keyboard");
+Object.defineProperty(exports, "MENU_ITEM_SELECTOR", { enumerable: true, get: function () { return menu_keyboard_1.MENU_ITEM_SELECTOR; } });
+Object.defineProperty(exports, "useMenuKeyboard", { enumerable: true, get: function () { return menu_keyboard_1.useMenuKeyboard; } });

package/dist/cjs/components/menu/menu-keyboard.js

@@ -0,0 +1,117 @@
+"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.MENU_ITEM_SELECTOR = void 0;
+exports.useMenuKeyboard = useMenuKeyboard;
+const React = __importStar(require("react"));
+/**
+ * The elements a `role="menu"` may own, minus the disabled ones. Kept here so
+ * every menu surface in crisp agrees on what counts as an item.
+ */
+exports.MENU_ITEM_SELECTOR = [
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+]
+    // a disabled item is not focusable, so leaving it in the list would strand
+    // the roving focus on it — both spellings have to go
+    .map((role) => `${role}:not([data-disabled]):not(:disabled)`)
+    .join(",");
+/**
+ * The WAI-ARIA menu keyboard model: focus the first item on open, ↑/↓ to move
+ * (wrapping), Home/End to jump, printable characters for typeahead, Esc to
+ * close, Tab to dismiss. Returns the `onKeyDown` to put on the menu element.
+ *
+ * Extracted from `Menu` so the table surfaces, which build their own popovers
+ * against measured positions, get the identical model instead of a second
+ * partial one.
+ */
+function useMenuKeyboard({ open, close, dismiss = close, contentRef, }) {
+    const typeahead = React.useRef("");
+    const typeaheadTimer = React.useRef(undefined);
+    const items = React.useCallback(() => Array.from(contentRef.current?.querySelectorAll(exports.MENU_ITEM_SELECTOR) ??
+        []), [contentRef]);
+    // focus the first item when the menu opens
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const id = requestAnimationFrame(() => contentRef.current
+            ?.querySelector(exports.MENU_ITEM_SELECTOR)
+            ?.focus());
+        return () => cancelAnimationFrame(id);
+    }, [open, contentRef]);
+    React.useEffect(() => () => clearTimeout(typeaheadTimer.current), []);
+    const onKeyDown = (e) => {
+        const list = items();
+        const idx = list.indexOf(document.activeElement);
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            list[(idx + 1) % list.length]?.focus();
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            list[(idx - 1 + list.length) % list.length]?.focus();
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            list[0]?.focus();
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            list[list.length - 1]?.focus();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            close();
+        }
+        else if (e.key === "Tab") {
+            dismiss();
+        }
+        else if (e.key.length === 1 && /\S/.test(e.key)) {
+            // typeahead: jump to the next item starting with the typed run
+            typeahead.current += e.key.toLowerCase();
+            clearTimeout(typeaheadTimer.current);
+            typeaheadTimer.current = setTimeout(() => {
+                typeahead.current = "";
+            }, 500);
+            const match = list.find((el) => (el.textContent ?? "")
+                .trim()
+                .toLowerCase()
+                .startsWith(typeahead.current));
+            match?.focus();
+        }
+    };
+    return { onKeyDown, items };
+}

package/dist/cjs/components/menu/menu.js

@@ -0,0 +1,144 @@
+"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.Menu = Menu;
+exports.MenuItem = MenuItem;
+exports.MenuCheckboxItem = MenuCheckboxItem;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuLabel = MenuLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const menu_recipe_1 = require("./menu.recipe");
+const menu_keyboard_1 = require("./menu-keyboard");
+const MenuContext = React.createContext(null);
+/**
+ * A dropdown menu — the ⋯ / sort / filter menu surface, on Attio's measured
+ * popover. Give it a `trigger` element and Menu items as children. Opens on
+ * click / ↓ / Enter; roving-focus keyboard model (↑/↓ move, Home/End jump,
+ * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
+ * closes on outside click. Flips up / right-aligns when space is tight.
+ */
+function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const [up, setUp] = React.useState(false);
+    const [pos, setPos] = React.useState({});
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    // Position the (fixed) menu against the trigger so it escapes any overflow
+    // clip; flip up / right-align when there isn't room. Runs on every open,
+    // not just a click, so a controlled consumer gets the same placement.
+    const place = () => {
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const gap = 4;
+        const flipUp = window.innerHeight - rect.bottom < 280;
+        const style = flipUp
+            ? { bottom: window.innerHeight - rect.top + gap }
+            : { top: rect.bottom + gap };
+        if (align === "end")
+            style.right = window.innerWidth - rect.right;
+        else
+            style.left = rect.left;
+        setUp(flipUp);
+        setPos(style);
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens
+    React.useLayoutEffect(() => {
+        if (open)
+            place();
+    }, [open]);
+    const close = React.useCallback(() => {
+        setOpen(false);
+        triggerRef.current?.focus?.();
+    }, [setOpen]);
+    // close on outside pointer-down
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!rootRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open, setOpen]);
+    const { onKeyDown: onContentKeyDown } = (0, menu_keyboard_1.useMenuKeyboard)({
+        open,
+        close,
+        dismiss: () => setOpen(false),
+        contentRef,
+    });
+    const triggerEl = React.cloneElement(trigger, {
+        ref: triggerRef,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            setOpen(!open);
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: "menu-content", role: "menu", "aria-label": ariaLabel, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
+}
+Menu.displayName = "Menu";
+function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {
+    const ctx = React.useContext(MenuContext);
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `menu-item${danger ? " menu-item--danger" : ""}`, onClick: () => {
+            onSelect?.();
+            if (closeOnSelect)
+                ctx?.close();
+        }, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "menu-item-label", children: children }), shortcut && (0, jsx_runtime_1.jsx)("span", { className: "menu-item-shortcut", children: shortcut })] }));
+}
+MenuItem.displayName = "MenuItem";
+function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "menu-item-check", size: 15, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)("span", { className: "menu-item-check--placeholder" })), (0, jsx_runtime_1.jsx)("span", { className: "menu-item-label", children: children })] }));
+}
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+function MenuSeparator() {
+    return (0, jsx_runtime_1.jsx)("hr", { className: "menu-sep" });
+}
+MenuSeparator.displayName = "MenuSeparator";
+function MenuLabel({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "menu-label", children: children });
+}
+MenuLabel.displayName = "MenuLabel";

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A dropdown menu — same popover surface Attio uses for its ⋯ / sort / filter
+// menus (measured from the app's listboxes): radius 12, 4px padding, a layered
+// soft shadow, over 32px items (radius 8, icon + label + optional shortcut /
+// check). The content is rendered inside this relative root so it keeps these
+// nested styles while escaping the trigger's own box.
+const config = (0, core_1.defineRecipe)({
+    name: "menu",
+    base: `
+    position: relative; display: inline-flex; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .menu-content {
+      position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${tokens_1.contract.space["1"]};
+      border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover};
+      box-shadow: ${tokens_1.elevation.floating};
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    & .menu-content[data-align="end"] { transform-origin: top right; }
+    & .menu-content[data-up] { transform-origin: bottom left; }
+    & .menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
+    & .menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    & .menu-item {
+      box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
+      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: start; cursor: pointer; white-space: nowrap;
+    }
+    & .menu-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .menu-item:focus { outline: none; }
+    & .menu-item:hover:not([data-disabled]), & .menu-item:focus-visible:not([data-disabled]), & .menu-item[data-highlighted]:not([data-disabled]) { background: ${tokens_1.contract.bgRaised}; }
+    & .menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    & .menu-item--danger { color: ${tokens_1.contract.bgDanger}; }
+    & .menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
+    & .menu-item--danger:hover, & .menu-item--danger:focus-visible, & .menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    & .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; letter-spacing: 0.02em; }
+    & .menu-item-check { flex-shrink: 0; color: ${tokens_1.contract.bgBrandSolid}; }
+    & .menu-item-check--placeholder { width: 15px; }
+
+    & .menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${tokens_1.contract.space["1"]} calc(-1 * ${tokens_1.contract.space["1"]}); background: ${tokens_1.contract.borderSubtle}; }
+    & .menu-label { padding: ${tokens_1.contract.space["1.5"]} ${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}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.menuRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiselectRecipe = exports.MultiSelect = void 0;
+var multiselect_1 = require("./multiselect");
+Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return multiselect_1.MultiSelect; } });
+var multiselect_recipe_1 = require("./multiselect.recipe");
+Object.defineProperty(exports, "multiselectRecipe", { enumerable: true, get: function () { return multiselect_recipe_1.multiselectRecipe; } });

package/dist/cjs/components/multiselect/multiselect.js

@@ -0,0 +1,161 @@
+"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.MultiSelect = MultiSelect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const multiselect_recipe_1 = require("./multiselect.recipe");
+const TONES = [
+    "brand",
+    "success",
+    "warning",
+    "danger",
+    "purple",
+    "cyan",
+    "orange",
+];
+// deterministic pastel per value (a value keeps its colour), matching the table
+function toneFor(t) {
+    let h = 0;
+    for (let i = 0; i < t.length; i++)
+        h = (h * 31 + t.charCodeAt(i)) >>> 0;
+    return TONES[h % TONES.length];
+}
+function Chip({ opt }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
+}
+/**
+ * A multi-select / tag editor — measured from Attio's cell tag picker. The
+ * outlined trigger shows the selected values as coloured chips; it opens a
+ * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
+ * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
+ */
+function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, ...rest }) {
+    const [open, setOpen] = React.useState(false);
+    const [up, setUp] = React.useState(false);
+    const [pos, setPos] = React.useState({});
+    const [query, setQuery] = React.useState("");
+    const [highlight, setHighlight] = React.useState(0);
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const searchRef = React.useRef(null);
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? []);
+    const value = valueProp ?? internalValue;
+    const selectedSet = React.useMemo(() => new Set(value), [value]);
+    const selectedOptions = options.filter((o) => selectedSet.has(o.value));
+    const q = query.trim().toLowerCase();
+    const filtered = searchable && q
+        ? options.filter((o) => o.label.toLowerCase().includes(q))
+        : options;
+    const openMenu = () => {
+        if (disabled)
+            return;
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (rect) {
+            const flipUp = window.innerHeight - rect.bottom < 300;
+            setUp(flipUp);
+            setPos({
+                left: rect.left,
+                minWidth: rect.width,
+                ...(flipUp
+                    ? { bottom: window.innerHeight - rect.top + 4 }
+                    : { top: rect.bottom + 4 }),
+            });
+        }
+        setQuery("");
+        setHighlight(0);
+        setOpen(true);
+        if (searchable)
+            requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
+    };
+    const close = () => {
+        setOpen(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    };
+    const toggle = (v) => {
+        const next = selectedSet.has(v)
+            ? value.filter((x) => x !== v)
+            : [...value, v];
+        if (valueProp === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    };
+    const onNavKeys = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setHighlight((h) => Math.min(h + 1, filtered.length - 1));
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setHighlight((h) => Math.max(h - 1, 0));
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            const opt = filtered[highlight];
+            if (opt)
+                toggle(opt.value);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            close();
+        }
+    };
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!rootRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+                    if (open && !searchable)
+                        onNavKeys(e);
+                    else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {
+                        e.preventDefault();
+                        openMenu();
+                    }
+                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => {
+                                    setQuery(e.target.value);
+                                    setHighlight(0);
+                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "multiselect-empty", children: "No results" })) : (filtered.map((opt, i) => {
+                        const sel = selectedSet.has(opt.value);
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "option", "aria-selected": sel, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                    }))] }))] }));
+}
+MultiSelect.displayName = "MultiSelect";