@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentedRecipe = exports.Segmented = void 0;
+var segmented_1 = require("./segmented");
+Object.defineProperty(exports, "Segmented", { enumerable: true, get: function () { return segmented_1.Segmented; } });
+var segmented_recipe_1 = require("./segmented.recipe");
+Object.defineProperty(exports, "segmentedRecipe", { enumerable: true, get: function () { return segmented_recipe_1.segmentedRecipe; } });

package/dist/cjs/components/segmented/segmented.js

@@ -0,0 +1,95 @@
+"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.Segmented = Segmented;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const segmented_recipe_1 = require("./segmented.recipe");
+/**
+ * A segmented control (single-choice toggle) — measured from Attio's view
+ * switcher. `role="radiogroup"` over `role="radio"` buttons with roving
+ * tabindex and ←/→ (Home/End) keyboard selection.
+ */
+function Segmented({ options, value, defaultValue, onValueChange, "aria-label": ariaLabel, className, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue ?? options[0]?.value);
+    const selected = value ?? internal;
+    const rootRef = React.useRef(null);
+    const [thumb, setThumb] = React.useState(null);
+    // Measure the selected item and slide the thumb to it (before paint, so the
+    // first render lands in place and only later selections animate).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-measure when the value or option set changes
+    React.useLayoutEffect(() => {
+        const root = rootRef.current;
+        const el = root?.querySelector(".segmented-item[data-selected]");
+        if (!el) {
+            setThumb(null);
+            return;
+        }
+        setThumb({ left: el.offsetLeft, width: el.offsetWidth });
+    }, [selected, options]);
+    const select = (v) => {
+        if (value === undefined)
+            setInternal(v);
+        onValueChange?.(v);
+    };
+    const onKeyDown = (e, i) => {
+        const enabled = options.filter((o) => !o.disabled);
+        const pos = enabled.findIndex((o) => o.value === options[i].value);
+        let next = -1;
+        if (e.key === "ArrowRight" || e.key === "ArrowDown")
+            next = (pos + 1) % enabled.length;
+        else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+            next = (pos - 1 + enabled.length) % enabled.length;
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = enabled.length - 1;
+        if (next < 0)
+            return;
+        e.preventDefault();
+        select(enabled[next].value);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, segmented_recipe_1.segmentedRecipe)({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, children: [thumb && ((0, jsx_runtime_1.jsx)("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
+                    width: thumb.width,
+                    transform: `translateX(${thumb.left}px)`,
+                } })), options.map((opt, i) => {
+                const on = opt.value === selected;
+                const iconOnly = opt.label == null && opt.icon != null;
+                return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "radio", "aria-checked": on, "aria-label": opt["aria-label"], disabled: opt.disabled, "data-selected": on ? "" : undefined, tabIndex: on ? 0 : -1, className: iconOnly
+                        ? "segmented-item segmented-item--icon"
+                        : "segmented-item", onClick: () => select(opt.value), onKeyDown: (e) => onKeyDown(e, i), children: [opt.icon, opt.label] }, opt.value));
+            })] }));
+}
+Segmented.displayName = "Segmented";

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentedRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A segmented control — Attio's view switcher: a subtle track holding options,
+// the selected one raised on a white pill.
+const config = (0, core_1.defineRecipe)({
+    name: "segmented",
+    base: `position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["0.5"]}; border-radius: ${tokens_1.contract.radius.lg}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); font-family: ${tokens_1.contract.font.sans};
+    & .segmented-thumb { position: absolute; top: ${tokens_1.contract.space["0.5"]}; left: 0; height: 26px; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.06); pointer-events: none; z-index: 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); }
+    & .segmented-item { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; height: 26px; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: color 0.15s ease; }
+    & .segmented-item svg { flex-shrink: 0; }
+    & .segmented-item:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .segmented-item[data-selected] { color: ${tokens_1.contract.fgPrimary}; }
+    & .segmented-item[disabled] { opacity: 0.4; cursor: default; }
+    & .segmented-item--icon { width: 26px; padding: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.segmentedRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectRecipe = exports.Select = void 0;
+var select_1 = require("./select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return select_1.Select; } });
+var select_recipe_1 = require("./select.recipe");
+Object.defineProperty(exports, "selectRecipe", { enumerable: true, get: function () { return select_recipe_1.selectRecipe; } });

package/dist/cjs/components/select/select.js

@@ -0,0 +1,180 @@
+"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.Select = Select;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const select_recipe_1 = require("./select.recipe");
+function optionText(o) {
+    if (o.keywords)
+        return o.keywords;
+    return typeof o.label === "string" ? o.label : o.value;
+}
+/**
+ * A select / dropdown — the settings control, measured from Attio, with an
+ * optional Linear-style search. A `role="combobox"` trigger opens a
+ * `role="listbox"`; pass `searchable` to add a filter field at the top (with a
+ * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
+ * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
+ */
+function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const selected = value ?? internal;
+    const [open, setOpen] = React.useState(false);
+    const [up, setUp] = React.useState(false);
+    const [pos, setPos] = React.useState({});
+    const [highlight, setHighlight] = React.useState(0);
+    const [query, setQuery] = React.useState("");
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const searchRef = React.useRef(null);
+    const selectedOption = options.find((o) => o.value === selected);
+    // The options shown, after applying the search filter.
+    const q = query.trim().toLowerCase();
+    const filtered = searchable && q
+        ? options.filter((o) => optionText(o).toLowerCase().includes(q))
+        : options;
+    const enabledIndexes = filtered
+        .map((o, i) => (o.disabled ? -1 : i))
+        .filter((i) => i >= 0);
+    const openMenu = () => {
+        if (disabled)
+            return;
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (rect) {
+            const flipUp = window.innerHeight - rect.bottom < 260;
+            setUp(flipUp);
+            setPos({
+                left: rect.left,
+                minWidth: rect.width,
+                ...(flipUp
+                    ? { bottom: window.innerHeight - rect.top + 4 }
+                    : { top: rect.bottom + 4 }),
+            });
+        }
+        setQuery("");
+        const sel = options.findIndex((o) => o.value === selected);
+        setHighlight(sel >= 0 ? sel : (enabledIndexes[0] ?? 0));
+        setOpen(true);
+        if (searchable)
+            requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
+    };
+    const close = () => {
+        setOpen(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    };
+    const pick = (opt) => {
+        if (!opt || opt.disabled)
+            return;
+        if (value === undefined)
+            setInternal(opt.value);
+        onValueChange?.(opt.value);
+        setOpen(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    };
+    const moveHighlight = (dir) => {
+        if (enabledIndexes.length === 0)
+            return;
+        const pos = enabledIndexes.indexOf(highlight);
+        const nextPos = pos < 0
+            ? dir > 0
+                ? 0
+                : enabledIndexes.length - 1
+            : (pos + dir + enabledIndexes.length) % enabledIndexes.length;
+        setHighlight(enabledIndexes[nextPos] ?? 0);
+    };
+    const onNavKeys = (e) => {
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                moveHighlight(1);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                moveHighlight(-1);
+                break;
+            case "Home":
+                e.preventDefault();
+                setHighlight(enabledIndexes[0] ?? 0);
+                break;
+            case "End":
+                e.preventDefault();
+                setHighlight(enabledIndexes[enabledIndexes.length - 1] ?? 0);
+                break;
+            case "Enter":
+                e.preventDefault();
+                pick(filtered[highlight]);
+                break;
+            case "Escape":
+                e.preventDefault();
+                close();
+                break;
+            case "Tab":
+                setOpen(false);
+                break;
+        }
+    };
+    const onTriggerKeyDown = (e) => {
+        if (!open) {
+            if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                openMenu();
+            }
+            return;
+        }
+        // when searchable, navigation is handled on the search input
+        if (!searchable)
+            onNavKeys(e);
+    };
+    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, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-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: "select-empty", children: "No results" })) : (filtered.map((opt, i) => {
+                        const isSel = opt.value === selected;
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "option", "aria-selected": isSel, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                    }))] }))] }));
+}
+Select.displayName = "Select";

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A select / dropdown, measured from Attio's settings: a 32px combobox trigger
+// (radius 9, value + a 16px chevron) over a listbox — radius 12, 4px padding, a
+// layered soft shadow — of 32px options (radius 8, 6/8 padding) that show a
+// check on the selected one and highlight on hover / keyboard. The listbox is
+// portaled into this root (which is position:relative) so it escapes overflow
+// while keeping these nested styles.
+const config = (0, core_1.defineRecipe)({
+    name: "select",
+    base: `
+    position: relative; display: inline-flex; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .select-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
+      height: ${tokens_1.contract.size.menuRow}; width: 100%; min-width: 0; margin: 0; padding: 0 ${tokens_1.contract.space["1.5"]} 0 ${tokens_1.contract.space["2"]};
+      border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent);
+      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer;
+      transition: background-color .12s ease, box-shadow .12s ease;
+    }
+    & .select-trigger:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .select-trigger[data-open], & .select-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; background: ${tokens_1.contract.bgSurface}; }
+    & .select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .select-placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .select-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .15s ease; }
+    & .select-trigger[data-open] .select-chevron { transform: rotate(180deg); }
+
+    & .select-listbox {
+      position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
+      max-height: 280px; 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;
+    }
+    & .select-listbox[data-up] { transform-origin: bottom; }
+    & .select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .select-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["1"]}) calc(-1 * ${tokens_1.contract.space["1"]}) ${tokens_1.contract.space["1"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
+    & .select-search svg { flex-shrink: 0; }
+    & .select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & .select-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .select-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .select-option {
+      box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
+      padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; 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;
+    }
+    & .select-option[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }
+    & .select-option[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    & .select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; }
+    & .select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .select-option-check { flex-shrink: 0; color: ${tokens_1.contract.bgBrandSolid}; }
+  `,
+    variants: {
+        // ghost: borderless at rest (transparent), reveals a subtle fill on hover —
+        // Attio's inline selects (e.g. the sort configurator).
+        variant: {
+            default: "",
+            ghost: `
+        & .select-trigger { background: transparent; box-shadow: none; }
+        & .select-trigger:hover { background: ${tokens_1.contract.bgRaised}; box-shadow: none; }
+        & .select-trigger[data-open], & .select-trigger:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+      `,
+        },
+        // full (default): fills its container, as before. auto: sizes to content.
+        width: {
+            full: `width: 100%;`,
+            auto: `width: auto;`,
+        },
+    },
+    defaultVariants: { variant: "default", width: "full" },
+    compoundVariants: [],
+});
+exports.selectRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skeletonRecipe = exports.Skeleton = void 0;
+var skeleton_1 = require("./skeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return skeleton_1.Skeleton; } });
+var skeleton_recipe_1 = require("./skeleton.recipe");
+Object.defineProperty(exports, "skeletonRecipe", { enumerable: true, get: function () { return skeleton_recipe_1.skeletonRecipe; } });

package/dist/cjs/components/skeleton/skeleton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = Skeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const skeleton_recipe_1 = require("./skeleton.recipe");
+/** A pulsing placeholder block sized to the content it stands in for. */
+function Skeleton({ width, height = 16, circle, radius, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", "data-circle": circle ? "" : undefined, className: (0, skeleton_recipe_1.skeletonRecipe)({ className }), ...rest, 
+        // the consumer's style wins on conflict, but the component's
+        // own sizing still applies when they don't set it
+        style: { width, height, borderRadius: radius, ...rest.style } }));
+}
+Skeleton.displayName = "Skeleton";

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skeletonRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A pulsing placeholder block for loading states.
+const config = (0, core_1.defineRecipe)({
+    name: "skeleton",
+    globalCss: `@keyframes crisp-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }`,
+    base: `display: block; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); border-radius: ${tokens_1.contract.radius.md}; animation: crisp-skeleton 1.4s ease-in-out infinite;
+    &[data-circle] { border-radius: ${tokens_1.contract.radius.full}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.skeletonRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spinnerRecipe = exports.Spinner = void 0;
+var spinner_1 = require("./spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return spinner_1.Spinner; } });
+var spinner_recipe_1 = require("./spinner.recipe");
+Object.defineProperty(exports, "spinnerRecipe", { enumerable: true, get: function () { return spinner_recipe_1.spinnerRecipe; } });

package/dist/cjs/components/spinner/spinner.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const spinner_recipe_1 = require("./spinner.recipe");
+/** A spinning ring indicator. Reports `role="status"` for assistive tech. */
+function Spinner({ size = 16, "aria-label": ariaLabel = "Loading", className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("span", { role: "status", "aria-label": ariaLabel, className: (0, spinner_recipe_1.spinnerRecipe)({ className }), ...rest, style: {
+            width: size,
+            height: size,
+            borderWidth: Math.max(2, Math.round(size / 8)),
+            ...rest.style,
+        } }));
+}
+Spinner.displayName = "Spinner";

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spinnerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A spinning ring loading indicator.
+const config = (0, core_1.defineRecipe)({
+    name: "spinner",
+    globalCss: `@keyframes crisp-spin { to { transform: rotate(360deg); } }`,
+    base: `display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: ${tokens_1.contract.radius.full}; border: 2px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 15%, transparent); border-top-color: ${tokens_1.contract.fgMuted}; animation: crisp-spin 0.6s linear infinite;`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.spinnerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stagebarRecipe = exports.StageBar = void 0;
+var stagebar_1 = require("./stagebar");
+Object.defineProperty(exports, "StageBar", { enumerable: true, get: function () { return stagebar_1.StageBar; } });
+var stagebar_recipe_1 = require("./stagebar.recipe");
+Object.defineProperty(exports, "stagebarRecipe", { enumerable: true, get: function () { return stagebar_recipe_1.stagebarRecipe; } });

package/dist/cjs/components/stagebar/stagebar.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StageBar = StageBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const stagebar_recipe_1 = require("./stagebar.recipe");
+const DEFAULT = "#266df0";
+/**
+ * A pipeline stage bar — measured from Attio's Deal-stage Highlight. Each stage
+ * is a segment tinted with its colour; the current stage is at full strength.
+ */
+function StageBar({ stages, current, "aria-label": ariaLabel, className, ...rest }) {
+    const currentIndex = typeof current === "number"
+        ? current
+        : stages.findIndex((s) => s.label === current);
+    const currentStage = stages[currentIndex];
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, stagebar_recipe_1.stagebarRecipe)({ className }), ...rest, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": stages.length, "aria-valuenow": currentIndex + 1, "aria-valuetext": currentStage?.label, "aria-label": ariaLabel, children: stages.map((stage, i) => {
+            const color = stage.color ?? DEFAULT;
+            const on = i === currentIndex;
+            return ((0, jsx_runtime_1.jsx)("span", { className: "stagebar-seg", style: {
+                    background: on
+                        ? color
+                        : `color-mix(in srgb, ${color} 18%, transparent)`,
+                } }, stage.label));
+        }) }));
+}
+StageBar.displayName = "StageBar";

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stagebarRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A pipeline stage indicator — Attio's Deal-stage Highlight bar: one segment per
+// stage, each tinted with its stage colour, the current stage at full strength.
+const config = (0, core_1.defineRecipe)({
+    name: "stagebar",
+    base: `display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; width: 100%; height: 6px; font-family: ${tokens_1.contract.font.sans};
+    & .stagebar-seg { flex: 1; height: 100%; border-radius: ${tokens_1.contract.radius.full}; transition: background 0.2s ease; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.stagebarRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statcardRecipe = exports.StatCard = void 0;
+var statcard_1 = require("./statcard");
+Object.defineProperty(exports, "StatCard", { enumerable: true, get: function () { return statcard_1.StatCard; } });
+var statcard_recipe_1 = require("./statcard.recipe");
+Object.defineProperty(exports, "statcardRecipe", { enumerable: true, get: function () { return statcard_recipe_1.statcardRecipe; } });

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatCard = StatCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const statcard_recipe_1 = require("./statcard.recipe");
+/**
+ * A single-metric KPI tile — measured from Attio's Reports number/insight cards.
+ * Label, a large value, and an optional up/down delta pill with a caption.
+ */
+function StatCard({ label, icon, value, delta, deltaSuffix = "%", caption, card, className, ...rest }) {
+    const trend = delta == null ? null : delta > 0 ? "up" : delta < 0 ? "down" : "flat";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, statcard_recipe_1.statcardRecipe)({ card, className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("span", { className: "statcard-label", children: [icon, label] }), (0, jsx_runtime_1.jsx)("span", { className: "statcard-value", children: value }), (trend != null || caption != null) && ((0, jsx_runtime_1.jsxs)("span", { className: "statcard-foot", children: [trend != null && ((0, jsx_runtime_1.jsxs)("span", { className: "statcard-delta", "data-trend": trend, children: [trend === "up" && (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 12, strokeWidth: 2.5 }), trend === "down" && (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 12, strokeWidth: 2.5 }), Math.abs(delta), deltaSuffix] })), caption] }))] }));
+}
+StatCard.displayName = "StatCard";