@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiselectRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A multi-select / tag editor — measured from Attio's cell tag picker: an
+// outlined trigger showing the selected values as coloured chips, opening a
+// popover with a search field over rows of "[coloured chip] … [checkbox]" that
+// toggle on click. The popover keeps these nested styles by rendering inside
+// this relative root.
+const config = (0, core_1.defineRecipe)({
+    name: "multiselect",
+    base: `
+    position: relative; display: inline-flex; width: 100%; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .multiselect-trigger {
+      box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; min-width: 0; min-height: ${tokens_1.contract.size.menuRow};
+      margin: 0; padding: ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["0.5"]} ${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; text-align: start;
+      transition: background-color .12s ease, box-shadow .12s ease;
+    }
+    & .multiselect-trigger:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .multiselect-trigger[data-open], & .multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; background: ${tokens_1.contract.bgSurface}; }
+    & .multiselect-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .multiselect-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; }
+    & .multiselect-placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .multiselect-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .15s ease; }
+    & .multiselect-trigger[data-open] .multiselect-chevron { transform: rotate(180deg); }
+
+    & .multiselect-listbox {
+      position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
+      max-height: 300px; 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;
+    }
+    & .multiselect-listbox[data-up] { transform-origin: bottom left; }
+    & .multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .multiselect-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}; }
+    & .multiselect-search svg { flex-shrink: 0; }
+    & .multiselect-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}; }
+    & .multiselect-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .multiselect-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; cursor: pointer; text-align: start;
+    }
+    & .multiselect-option[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }
+    & .multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
+    & .multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${tokens_1.contract.radius.sm}; box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.borderDefault}; color: transparent; }
+    & .multiselect-option[aria-selected="true"] .multiselect-check { background: ${tokens_1.contract.bgBrandSolid}; box-shadow: none; color: #fff; }
+    & .multiselect-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}; }
+
+    & .recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
+    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
+    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .recordstable-tag[data-tone="danger"] { 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}); }
+    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.multiselectRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popoverRecipe = exports.Popover = void 0;
+var popover_1 = require("./popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return popover_1.Popover; } });
+var popover_recipe_1 = require("./popover.recipe");
+Object.defineProperty(exports, "popoverRecipe", { enumerable: true, get: function () { return popover_recipe_1.popoverRecipe; } });

package/dist/cjs/components/popover/popover.js

@@ -0,0 +1,106 @@
+"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.Popover = Popover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const popover_recipe_1 = require("./popover.recipe");
+/**
+ * A generic anchored popover — the Menu/Select surface holding arbitrary
+ * content. Opens below the trigger (flipping up when there's no room),
+ * closes on outside pointer-down and Escape. Controlled or self-managed.
+ */
+function Popover({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, "aria-label": ariaLabel, className, }) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const [pos, setPos] = React.useState({});
+    const [up, setUp] = React.useState(false);
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const place = () => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const gap = 6;
+        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);
+    };
+    // Position when opening (before paint so it never flashes at 0,0).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens
+    React.useLayoutEffect(() => {
+        if (open)
+            place();
+    }, [open]);
+    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 triggerEl = React.cloneElement(trigger, {
+        ref: triggerRef,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            setOpen(!open);
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, popover_recipe_1.popoverRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)("div", { className: "popover-content", role: "dialog", "aria-label": ariaLabel, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        e.preventDefault();
+                        setOpen(false);
+                    }
+                }, children: children }))] }));
+}
+Popover.displayName = "Popover";

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popoverRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A generic anchored popover — the same measured surface as Menu / Select
+// (radius 12, 4px padding, layered soft shadow, inset border), but holding
+// arbitrary content. Rendered inside a display:contents root and lifted out of
+// flow with position:fixed, so its styles survive while it floats.
+const config = (0, core_1.defineRecipe)({
+    name: "popover",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};
+    & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; color: ${tokens_1.contract.fgPrimary}; box-shadow: ${tokens_1.elevation.floating}; opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .popover-content[data-align="end"] { transform-origin: top right; }
+    & .popover-content[data-up] { transform-origin: bottom left; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.popoverRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.progressRecipe = exports.Progress = void 0;
+var progress_1 = require("./progress");
+Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return progress_1.Progress; } });
+var progress_recipe_1 = require("./progress.recipe");
+Object.defineProperty(exports, "progressRecipe", { enumerable: true, get: function () { return progress_recipe_1.progressRecipe; } });

package/dist/cjs/components/progress/progress.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = Progress;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const progress_recipe_1 = require("./progress.recipe");
+/**
+ * A progress bar — a continuous brand fill, or a segmented row of pills when
+ * `segments` is set (the "Getting started 3/6" pattern). Reports its state via
+ * `role="progressbar"` and the ARIA value attributes.
+ */
+function Progress({ value, max = 100, segments, "aria-label": ariaLabel, className, ...rest }) {
+    const pct = Math.max(0, Math.min(100, (value / max) * 100));
+    const aria = {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": ariaLabel,
+    };
+    if (segments && segments > 0) {
+        const filled = Math.round((pct / 100) * segments);
+        return ((0, jsx_runtime_1.jsx)("div", { ...aria, className: (0, progress_recipe_1.progressRecipe)({ className }), ...rest, "data-segmented": "", children: Array.from({ length: segments }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "progress-seg", "data-filled": i < filled ? "" : undefined }, i))) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ...aria, className: (0, progress_recipe_1.progressRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsx)("span", { className: "progress-fill", style: { width: `${pct}%` } }) }));
+}
+Progress.displayName = "Progress";

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.progressRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A progress indicator — a continuous brand-filled track, or a segmented row of
+// pills (Attio's "Getting started 3/6" bar).
+const config = (0, core_1.defineRecipe)({
+    name: "progress",
+    base: `display: block; box-sizing: border-box; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden;
+    & .progress-fill { display: block; height: 100%; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgBrandSolid}; transition: width 0.25s ease; }
+    &[data-segmented] { display: flex; gap: ${tokens_1.contract.space["1"]}; background: transparent; overflow: visible; }
+    &[data-segmented] .progress-seg { flex: 1; height: 100%; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); transition: background 0.2s; }
+    &[data-segmented] .progress-seg[data-filled] { background: ${tokens_1.contract.bgBrandSolid}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.progressRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radiogroupRecipe = exports.RadioGroup = exports.Radio = void 0;
+var radiogroup_1 = require("./radiogroup");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return radiogroup_1.Radio; } });
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radiogroup_1.RadioGroup; } });
+var radiogroup_recipe_1 = require("./radiogroup.recipe");
+Object.defineProperty(exports, "radiogroupRecipe", { enumerable: true, get: function () { return radiogroup_recipe_1.radiogroupRecipe; } });

package/dist/cjs/components/radiogroup/radiogroup.js

@@ -0,0 +1,83 @@
+"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.RadioGroup = RadioGroup;
+exports.Radio = Radio;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const radiogroup_recipe_1 = require("./radiogroup.recipe");
+const RadioContext = React.createContext(null);
+/**
+ * A radio group — measured from Attio's settings. `default` renders rows (a ring
+ * that fills brand when selected + a label); `card` renders a row of bordered
+ * preview cards whose border turns brand when picked (the Theme picker). Arrow
+ * keys move between options (roving focus). Controlled or uncontrolled.
+ */
+function RadioGroup({ value, defaultValue, onValueChange, variant = "default", name, className, "aria-label": ariaLabel, children, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const selected = value ?? internal;
+    const generatedName = React.useId();
+    const groupName = name ?? generatedName;
+    const select = React.useCallback((v) => {
+        if (value === undefined)
+            setInternal(v);
+        onValueChange?.(v);
+    }, [value, onValueChange]);
+    const onKeyDown = (e) => {
+        if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key))
+            return;
+        const radios = Array.from(e.currentTarget.querySelectorAll('[role="radio"]:not([disabled])'));
+        const idx = radios.indexOf(document.activeElement);
+        const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
+        const next = radios[(idx + (fwd ? 1 : -1) + radios.length) % radios.length];
+        if (next) {
+            e.preventDefault();
+            next.focus();
+            next.dataset.value && select(next.dataset.value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsx)("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
+}
+RadioGroup.displayName = "RadioGroup";
+function Radio({ value, label, children, disabled }) {
+    const ctx = React.useContext(RadioContext);
+    if (!ctx)
+        throw new Error("Radio must be used within a RadioGroup");
+    const checked = ctx.value === value;
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": checked, name: ctx.name, disabled: disabled, "data-value": value, "data-checked": checked ? "" : undefined, 
+        // roving tabindex: the selected (or first, when none) radio is tabbable
+        tabIndex: checked ? 0 : -1, className: "radio", onClick: () => ctx.select(value), children: ctx.variant === "card" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "radio-preview", children: children }), (0, jsx_runtime_1.jsx)("span", { className: "radio-cardfoot", children: (0, jsx_runtime_1.jsx)("span", { className: "radio-label", children: label }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "radio-dot" }), (0, jsx_runtime_1.jsx)("span", { className: "radio-label", children: label ?? children })] })) }));
+}
+Radio.displayName = "Radio";

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radiogroupRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A radio group with two shapes, measured from Attio's settings: the default is
+// a column of rows (a 16px ring that fills brand when selected + a label); the
+// `card` variant is a row of bordered preview cards (radius 16) whose border
+// turns brand (#266df0) when selected — the Appearance "Theme" picker.
+const config = (0, core_1.defineRecipe)({
+    name: "radiogroup",
+    base: `
+    display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .radio { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin: 0; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; 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; }
+    & .radio:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .radio:focus-visible { outline: none; }
+    & .radio-dot { position: relative; flex-shrink: 0; width: 16px; height: 16px; border-radius: ${tokens_1.contract.radius.full}; box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.borderDefault}; transition: box-shadow .12s ease; }
+    & .radio:hover .radio-dot { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 40%, transparent); }
+    & .radio[data-checked] .radio-dot { box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.bgBrandSolid}; }
+    & .radio[data-checked] .radio-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .radio:focus-visible .radio-dot { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 2px; }
+    & .radio-label { min-width: 0; }
+
+    &[data-variant="card"] { flex-direction: row; flex-wrap: wrap; gap: ${tokens_1.contract.space["3"]}; }
+    &[data-variant="card"] .radio { flex: 1 1 150px; min-width: 150px; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: ${tokens_1.contract.radius["2xl"]}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; overflow: hidden; transition: box-shadow .12s ease; }
+    &[data-variant="card"] .radio:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); }
+    &[data-variant="card"] .radio[data-checked] { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    &[data-variant="card"] .radio-preview { flex: 1; min-height: 0; background: ${tokens_1.contract.bgRaised}; }
+    &[data-variant="card"] .radio-cardfoot { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2.5"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.radiogroupRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resizablepanelRecipe = exports.writeStoredPercent = exports.widthToPercent = exports.readStoredPercent = exports.ResizablePanel = exports.percentToWidth = exports.computeDragWidth = void 0;
+var resizablepanel_1 = require("./resizablepanel");
+Object.defineProperty(exports, "computeDragWidth", { enumerable: true, get: function () { return resizablepanel_1.computeDragWidth; } });
+Object.defineProperty(exports, "percentToWidth", { enumerable: true, get: function () { return resizablepanel_1.percentToWidth; } });
+Object.defineProperty(exports, "ResizablePanel", { enumerable: true, get: function () { return resizablepanel_1.ResizablePanel; } });
+Object.defineProperty(exports, "readStoredPercent", { enumerable: true, get: function () { return resizablepanel_1.readStoredPercent; } });
+Object.defineProperty(exports, "widthToPercent", { enumerable: true, get: function () { return resizablepanel_1.widthToPercent; } });
+Object.defineProperty(exports, "writeStoredPercent", { enumerable: true, get: function () { return resizablepanel_1.writeStoredPercent; } });
+var resizablepanel_recipe_1 = require("./resizablepanel.recipe");
+Object.defineProperty(exports, "resizablepanelRecipe", { enumerable: true, get: function () { return resizablepanel_recipe_1.resizablepanelRecipe; } });

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

@@ -0,0 +1,176 @@
+"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.computeDragWidth = computeDragWidth;
+exports.widthToPercent = widthToPercent;
+exports.percentToWidth = percentToWidth;
+exports.readStoredPercent = readStoredPercent;
+exports.writeStoredPercent = writeStoredPercent;
+exports.ResizablePanel = ResizablePanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const resizablepanel_recipe_1 = require("./resizablepanel.recipe");
+/**
+ * Drag delta -> next width, in px, signed by which edge of the panel the
+ * handle drags from. A left-side panel's handle sits at its *right* edge, so
+ * dragging right (positive dx) grows it; a right-side panel's handle sits at
+ * its *left* edge, so dragging right shrinks it. Pure so drag math can be
+ * unit-tested without a DOM.
+ */
+function computeDragWidth(startWidth, startX, clientX, side) {
+    const dx = clientX - startX;
+    return side === "left" ? startWidth + dx : startWidth - dx;
+}
+/** width (px) -> percentage of the container's width. Pure, unrounded. */
+function widthToPercent(width, containerWidth) {
+    if (!(containerWidth > 0))
+        return 0;
+    return (width / containerWidth) * 100;
+}
+/** percentage of the container's width -> width (px). Pure, unrounded. */
+function percentToWidth(percent, containerWidth) {
+    return (percent / 100) * containerWidth;
+}
+/**
+ * Reads a persisted width percentage, wrapped in try/catch: `localStorage`
+ * can throw (private browsing, storage disabled), and a resizable panel
+ * failing to *render* over a persistence error would be worse than the
+ * panel simply forgetting its width. `storage` defaults to
+ * `window.localStorage` and exists as a seam for tests — dropping the
+ * try/catch here is the exact failure this must catch.
+ */
+function readStoredPercent(key, storage = window.localStorage) {
+    try {
+        const raw = storage.getItem(key);
+        if (raw == null)
+            return null;
+        const n = Number(raw);
+        return Number.isFinite(n) ? n : null;
+    }
+    catch {
+        // private mode / storage disabled — behave as if nothing is stored
+        return null;
+    }
+}
+/** Writes a persisted width percentage, wrapped in try/catch — see {@link readStoredPercent}. */
+function writeStoredPercent(key, percent, storage = window.localStorage) {
+    try {
+        storage.setItem(key, String(percent));
+    }
+    catch {
+        // private mode / quota exceeded — persistence is best-effort
+    }
+}
+/**
+ * Attio's adjustable-panel primitive: a spacer that reserves layout width
+ * plus a panel that overlays it, so the panel can move between docked
+ * (in-flow) and floating (`position: fixed`, an overlay) without a reflow
+ * glitch. Drag the edge handle to resize; constraints are CSS `min-width`/
+ * `max-width`, never re-clamped in JS.
+ */
+function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeChange, min = 200, max, floating = false, handleVariant = "panel", storageKey, className, children, ...rest }) {
+    const controlled = size != null;
+    const [uncontrolledSize, setUncontrolledSize] = React.useState(defaultSize);
+    const width = controlled ? size : uncontrolledSize;
+    const containerRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const dragRef = React.useRef(null);
+    const [dragging, setDragging] = React.useState(false);
+    // Restore a persisted percentage on mount (uncontrolled + storageKey only).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: restore the persisted width once, on mount only
+    React.useEffect(() => {
+        if (controlled || !storageKey)
+            return;
+        const percent = readStoredPercent(storageKey);
+        if (percent == null)
+            return;
+        const containerWidth = containerRef.current?.getBoundingClientRect().width;
+        if (!containerWidth)
+            return;
+        setUncontrolledSize(percentToWidth(percent, containerWidth));
+    }, []);
+    const commitSize = React.useCallback((next) => {
+        if (!controlled)
+            setUncontrolledSize(next);
+        onSizeChange?.(next);
+        if (!controlled && storageKey) {
+            const containerWidth = containerRef.current?.getBoundingClientRect().width;
+            if (containerWidth) {
+                writeStoredPercent(storageKey, widthToPercent(next, containerWidth));
+            }
+        }
+    }, [controlled, onSizeChange, storageKey]);
+    function onHandlePointerDown(e) {
+        e.preventDefault();
+        e.target.setPointerCapture?.(e.pointerId);
+        dragRef.current = { startX: e.clientX, startWidth: width, moved: false };
+    }
+    function onHandlePointerMove(e) {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        if (!drag.moved) {
+            drag.moved = true;
+            setDragging(true);
+        }
+        const next = computeDragWidth(drag.startWidth, drag.startX, e.clientX, side);
+        if (!controlled)
+            setUncontrolledSize(next);
+        onSizeChange?.(next);
+    }
+    function onHandlePointerUp(e) {
+        const drag = dragRef.current;
+        dragRef.current = null;
+        setDragging(false);
+        e.target.releasePointerCapture?.(e.pointerId);
+        if (!drag)
+            return;
+        // Never re-clamp here: read back the panel's actual, CSS-clamped
+        // rendered width after layout, and commit *that* value.
+        const rect = panelRef.current?.getBoundingClientRect();
+        const finalWidth = rect ? Math.round(rect.width) : width;
+        commitSize(finalWidth);
+    }
+    const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
+    const panelSizeStyle = {
+        width,
+        minWidth: min,
+        maxWidth: maxStyle,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, resizablepanel_recipe_1.resizablepanelRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "resizablepanel-spacer", style: floating ? { width: 0 } : { width, minWidth: min, maxWidth: maxStyle } }), (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, className: "resizablepanel-panel", "data-side": side, "data-floating": floating ? "true" : "false", style: panelSizeStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: "resizablepanel-inner", children: children }), (0, jsx_runtime_1.jsx)("div", { className: handleVariant === "column"
+                            ? "resizablepanel-handle resizablepanel-handle--column"
+                            : "resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, children: handleVariant === "column" && ((0, jsx_runtime_1.jsx)("span", { className: "resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
+}
+ResizablePanel.displayName = "ResizablePanel";