@crisp-ui-kit/crisp 0.1.0 → 0.5.0

package/dist/esm/components/menu/menu.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import * as React from "react";
+import { menuRecipe } from "./menu.recipe.js";
+const MenuContext = React.createContext(null);
+const ITEM_SELECTOR = '[role="menuitem"]:not([data-disabled]),[role="menuitemcheckbox"]:not([data-disabled]),[role="menuitemradio"]:not([data-disabled])';
+/**
+ * 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.
+ */
+export function Menu({ trigger, children, align = "start", className, "aria-label": ariaLabel, }) {
+    const [open, setOpen] = React.useState(false);
+    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);
+    const typeahead = React.useRef("");
+    const typeaheadTimer = React.useRef(undefined);
+    // Position the (fixed) menu against the trigger so it escapes any overflow
+    // clip; flip up / right-align when there isn't room.
+    const openMenu = () => {
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (!rect) {
+            setOpen(true);
+            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);
+        setOpen(true);
+    };
+    const close = React.useCallback(() => {
+        setOpen(false);
+        triggerRef.current?.focus?.();
+    }, []);
+    const items = () => Array.from(contentRef.current?.querySelectorAll(ITEM_SELECTOR) ?? []);
+    // focus the first item when the menu opens
+    React.useEffect(() => {
+        if (open)
+            requestAnimationFrame(() => contentRef.current?.querySelector(ITEM_SELECTOR)?.focus());
+    }, [open]);
+    // 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]);
+    const onContentKeyDown = (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") {
+            setOpen(false);
+        }
+        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();
+        }
+    };
+    const triggerEl = React.cloneElement(trigger, {
+        ref: triggerRef,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            open ? setOpen(false) : openMenu();
+        },
+    });
+    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(MenuContext.Provider, { value: { close }, children: _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";
+export function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {
+    const ctx = React.useContext(MenuContext);
+    return (_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, _jsx("span", { className: "menu-item-label", children: children }), shortcut && _jsx("span", { className: "menu-item-shortcut", children: shortcut })] }));
+}
+MenuItem.displayName = "MenuItem";
+export function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {
+    return (_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 ? (_jsx(Check, { className: "menu-item-check", size: 15, strokeWidth: 2 })) : (_jsx("span", { className: "menu-item-check--placeholder" })), _jsx("span", { className: "menu-item-label", children: children })] }));
+}
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+export function MenuSeparator() {
+    return _jsx("hr", { className: "menu-sep" });
+}
+MenuSeparator.displayName = "MenuSeparator";
+export function MenuLabel({ children }) {
+    return _jsx("div", { className: "menu-label", children: children });
+}
+MenuLabel.displayName = "MenuLabel";

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

@@ -0,0 +1,51 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "menu",
+    base: `
+    position: relative; display: inline-flex; font-family: ${c.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: ${c.space.px};
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${c.space["1"]};
+      border-radius: ${c.radius.xl}; background: ${c.bgPopover};
+      box-shadow: inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3};
+      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: ${c.space["1.5"]}; width: 100%; height: 32px; flex-shrink: 0;
+      margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md};
+      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; white-space: nowrap;
+    }
+    & .menu-item svg { flex-shrink: 0; color: ${c.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: ${c.bgRaised}; }
+    & .menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    & .menu-item--danger { color: ${c.bgDanger}; }
+    & .menu-item--danger svg { color: ${c.bgDanger}; }
+    & .menu-item--danger:hover, & .menu-item--danger:focus-visible, & .menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .menu-item-shortcut { flex-shrink: 0; margin-left: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
+    & .menu-item-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
+    & .menu-item-check--placeholder { width: 15px; }
+
+    & .menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${c.space["1"]} calc(-1 * ${c.space["1"]}); background: ${c.borderSubtle}; }
+    & .menu-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const menuRecipe = Object.assign(resolveRecipe(config), { config });
+export default config;

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

@@ -0,0 +1,2 @@
+export { MultiSelect, } from "./multiselect.js";
+export { multiselectRecipe } from "./multiselect.recipe.js";

package/dist/esm/components/multiselect/multiselect.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, Search } from "lucide-react";
+import * as React from "react";
+import { multiselectRecipe } from "./multiselect.recipe.js";
+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 (_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.
+ */
+export function MultiSelect({ options, value, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, }) {
+    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 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) => {
+        onValueChange(selectedSet.has(v) ? value.filter((x) => x !== v) : [...value, v]);
+    };
+    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 (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), children: [_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: [_jsx("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _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 ? (_jsx("div", { className: "multiselect-empty", children: "No results" })) : (filtered.map((opt, i) => {
+                        const sel = selectedSet.has(opt.value);
+                        return (_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: [_jsx("span", { className: "multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                    }))] }))] }));
+}
+MultiSelect.displayName = "MultiSelect";

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

@@ -0,0 +1,68 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "multiselect",
+    base: `
+    position: relative; display: inline-flex; width: 100%; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .multiselect-trigger {
+      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; min-width: 0; min-height: 32px;
+      margin: 0; padding: ${c.space["0.5"]} ${c.space["1.5"]} ${c.space["0.5"]} ${c.space["2"]};
+      border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
+      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; text-align: left;
+      transition: background-color .12s ease, box-shadow .12s ease;
+    }
+    & .multiselect-trigger:hover { background: ${c.bgRaised}; }
+    & .multiselect-trigger[data-open], & .multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; background: ${c.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: ${c.space["1"]}; }
+    & .multiselect-placeholder { color: ${c.fgMuted}; }
+    & .multiselect-chevron { flex-shrink: 0; color: ${c.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: ${c.space.px};
+      max-height: 300px; overflow-y: auto; padding: ${c.space["1"]};
+      border-radius: ${c.radius.xl}; background: ${c.bgPopover};
+      box-shadow: inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3};
+      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: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.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: ${c.text.lg}; color: ${c.fgPrimary}; }
+    & .multiselect-search input::placeholder { color: ${c.fgMuted}; }
+    & .multiselect-option {
+      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: 32px; flex-shrink: 0;
+      padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md}; cursor: pointer; text-align: left;
+    }
+    & .multiselect-option[data-highlighted] { background: ${c.bgRaised}; }
+    & .multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
+    & .multiselect-check { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; color: transparent; }
+    & .multiselect-option[aria-selected="true"] .multiselect-check { background: ${c.bgBrandSolid}; box-shadow: none; color: #fff; }
+    & .multiselect-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+
+    & .recordstable-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
+    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
+    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
+    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
+    & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
+    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
+    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
+    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const multiselectRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Popover } from "./popover.js";
+export { popoverRecipe } from "./popover.recipe.js";

package/dist/esm/components/popover/popover.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { popoverRecipe } from "./popover.recipe.js";
+/**
+ * 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.
+ */
+export function Popover({ trigger, children, align = "start", open: openProp, onOpenChange, "aria-label": ariaLabel, className, }) {
+    const [internalOpen, setInternalOpen] = React.useState(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 (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_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/esm/components/popover/popover.recipe.js

@@ -0,0 +1,18 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "popover",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; box-shadow: inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3}; opacity: 1; transform: none; transition: opacity 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: [],
+});
+export const popoverRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Progress } from "./progress.js";
+export { progressRecipe } from "./progress.recipe.js";

package/dist/esm/components/progress/progress.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { progressRecipe } from "./progress.recipe.js";
+/**
+ * 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.
+ */
+export function Progress({ value, max = 100, segments, "aria-label": ariaLabel, className, }) {
+    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 (_jsx("div", { ...aria, className: progressRecipe({ className }), "data-segmented": "", children: Array.from({ length: segments }, (_, i) => (_jsx("span", { className: "progress-seg", "data-filled": i < filled ? "" : undefined }, i))) }));
+    }
+    return (_jsx("div", { ...aria, className: progressRecipe({ className }), children: _jsx("span", { className: "progress-fill", style: { width: `${pct}%` } }) }));
+}
+Progress.displayName = "Progress";

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

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

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup, } from "./radiogroup.js";
+export { radiogroupRecipe } from "./radiogroup.recipe.js";

package/dist/esm/components/radiogroup/radiogroup.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { radiogroupRecipe } from "./radiogroup.recipe.js";
+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.
+ */
+export function RadioGroup({ value, defaultValue, onValueChange, variant = "default", name, className, "aria-label": ariaLabel, children, }) {
+    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 (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), onKeyDown: onKeyDown, children: children }) }));
+}
+RadioGroup.displayName = "RadioGroup";
+export 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 (_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" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "radio-preview", children: children }), _jsx("span", { className: "radio-cardfoot", children: _jsx("span", { className: "radio-label", children: label }) })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "radio-dot" }), _jsx("span", { className: "radio-label", children: label ?? children })] })) }));
+}
+Radio.displayName = "Radio";

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

@@ -0,0 +1,37 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "radiogroup",
+    base: `
+    display: flex; flex-direction: column; gap: ${c.space["1"]}; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .radio { display: flex; align-items: center; gap: ${c.space["2"]}; margin: 0; padding: ${c.space["1"]} ${c.space["1"]}; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; 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: ${c.radius.full}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; transition: box-shadow .12s ease; }
+    & .radio:hover .radio-dot { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, ${c.fgPrimary} 40%, transparent); }
+    & .radio[data-checked] .radio-dot { box-shadow: inset 0 0 0 1.5px ${c.bgBrandSolid}; }
+    & .radio[data-checked] .radio-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: ${c.radius.full}; background: ${c.bgBrandSolid}; }
+    & .radio:focus-visible .radio-dot { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 2px; }
+    & .radio-label { min-width: 0; }
+
+    &[data-variant="card"] { flex-direction: row; flex-wrap: wrap; gap: ${c.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: ${c.radius["2xl"]}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; overflow: hidden; transition: box-shadow .12s ease; }
+    &[data-variant="card"] .radio:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 22%, transparent); }
+    &[data-variant="card"] .radio[data-checked] { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    &[data-variant="card"] .radio-preview { flex: 1; min-height: 0; background: ${c.bgRaised}; }
+    &[data-variant="card"] .radio-cardfoot { display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["2"]} ${c.space["2.5"]}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const radiogroupRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Segmented, } from "./segmented.js";
+export { segmentedRecipe } from "./segmented.recipe.js";