@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabletoolbarRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+const tabletoolbar_chrome_1 = require("./tabletoolbar.chrome");
+// Attio's table toolbar, measured: 28px controls, the Sort/Filter buttons and
+// the menus they open, sort-condition rows, and the filter chips. The chrome
+// itself lives in ./tabletoolbar.chrome.ts because RecordsTable renders the
+// same measured surface under its own class prefix — one source, two prefixes,
+// so the two can never drift apart again.
+//
+// The root is `display: contents` on purpose: the emitted `-toolbar` rule is
+// the flex row, so the wrapper contributes no box of its own and a TableToolbar
+// lays out exactly like the bare toolbar it replaces.
+const config = (0, core_1.defineRecipe)({
+    name: "tabletoolbar",
+    base: `
+    display: contents; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & * { box-sizing: border-box; }
+${(0, tabletoolbar_chrome_1.toolbarChromeHead)("tabletoolbar")}
+${(0, tabletoolbar_chrome_1.toolbarChromeBody)("tabletoolbar")}
+  `,
+});
+exports.tabletoolbarRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabsRecipe = exports.Tabs = void 0;
+var tabs_1 = require("./tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return tabs_1.Tabs; } });
+var tabs_recipe_1 = require("./tabs.recipe");
+Object.defineProperty(exports, "tabsRecipe", { enumerable: true, get: function () { return tabs_recipe_1.tabsRecipe; } });

package/dist/cjs/components/tabs/tabs.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.Tabs = Tabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const tabs_recipe_1 = require("./tabs.recipe");
+/**
+ * A row of text tabs over a sliding ink underline — the record-view tab bar,
+ * measured from Attio. Roving-tabindex keyboard model (←/→ move + activate,
+ * Home/End jump); activation follows focus, matching Attio. Controlled via
+ * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
+ */
+function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue ?? tabs[0]?.value);
+    const active = value ?? internal;
+    const listRef = React.useRef(null);
+    const [indicator, setIndicator] = React.useState(null);
+    const select = React.useCallback((v) => {
+        if (value === undefined)
+            setInternal(v);
+        onValueChange?.(v);
+    }, [value, onValueChange]);
+    // Position the underline under the active tab; re-measure on tab/value change
+    // and on resize.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `tabs` re-measures when the tab set (labels/counts) changes width
+    React.useEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const measure = () => {
+            const el = list.querySelector(`[data-value="${CSS.escape(active)}"]`);
+            if (el)
+                setIndicator({ left: el.offsetLeft, width: el.offsetWidth });
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(list);
+        return () => ro.disconnect();
+    }, [active, tabs]);
+    const onKeyDown = (e) => {
+        const enabled = tabs.filter((t) => !t.disabled);
+        const idx = enabled.findIndex((t) => t.value === active);
+        let next = -1;
+        if (e.key === "ArrowRight")
+            next = (idx + 1) % enabled.length;
+        else if (e.key === "ArrowLeft")
+            next = (idx - 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();
+        const nextValue = enabled[next]?.value;
+        if (!nextValue)
+            return;
+        select(nextValue);
+        listRef.current
+            ?.querySelector(`[data-value="${CSS.escape(nextValue)}"]`)
+            ?.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && (0, jsx_runtime_1.jsx)("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
+                        const selected = t.value === active;
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", id: `tab-${t.value}`, "aria-selected": selected, "aria-controls": `panel-${t.value}`, tabIndex: selected ? 0 : -1, "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, (0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
+                    }), indicator && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-indicator", style: {
+                            width: indicator.width,
+                            transform: `translateX(${indicator.left}px)`,
+                        } }))] }), children && ((0, jsx_runtime_1.jsx)("div", { className: "tabs-panel", role: "tabpanel", id: `panel-${active}`, "aria-labelledby": `tab-${active}`, 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: a tabpanel is focusable per the WAI-ARIA tabs pattern
+                tabIndex: 0, children: children(active) }))] }));
+}
+Tabs.displayName = "Tabs";

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabsRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// Attio's record-view tabs: a row of segmented tab buttons over a 1px baseline.
+// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
+// with a 2px ink underline that slides along the baseline; inactive tabs are
+// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
+// and an optional count badge. Measured from the live app: 28px pills, 4/8
+// padding, 6px icon-label gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+const config = (0, core_1.defineRecipe)({
+    name: "tabs",
+    base: `
+    display: flex; flex-direction: column; min-height: 0; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; flex-shrink: 0; }
+    & .tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${tokens_1.contract.space["1"]}; }
+    & .tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
+    & .tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .tabs-tab[data-selected] { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
+    & .tabs-tab:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+    & .tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .tabs-tab[data-selected] .tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }
+    & .tabs-indicator { position: absolute; bottom: calc(-1 * ${tokens_1.contract.space["2"]}); left: 0; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .tabs-panel { flex: 1; min-height: 0; }
+    & .tabs-panel:focus-visible { outline: none; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.tabsRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textareaRecipe = exports.Textarea = void 0;
+var textarea_1 = require("./textarea");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return textarea_1.Textarea; } });
+var textarea_recipe_1 = require("./textarea.recipe");
+Object.defineProperty(exports, "textareaRecipe", { enumerable: true, get: function () { return textarea_recipe_1.textareaRecipe; } });

package/dist/cjs/components/textarea/textarea.js

@@ -0,0 +1,56 @@
+"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.Textarea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const textarea_recipe_1 = require("./textarea.recipe");
+/**
+ * A multiline text field — measured from Attio's settings. Forwards every native
+ * `<textarea>` prop; pass `showCount` with `maxLength` to render a live
+ * character counter (which turns red if the value exceeds the limit).
+ */
+exports.Textarea = React.forwardRef(({ showCount, maxLength, className, wrapperClassName, value, defaultValue, onChange, ...props }, ref) => {
+    const initial = String(value ?? defaultValue ?? "").length;
+    const [count, setCount] = React.useState(initial);
+    const len = value !== undefined ? String(value).length : count;
+    const counted = showCount && maxLength != null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, textarea_recipe_1.textareaRecipe)({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: "textarea-wrap", children: (0, jsx_runtime_1.jsx)("textarea", { ref: ref, className: `textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
+                        if (value === undefined)
+                            setCount(e.target.value.length);
+                        onChange?.(e);
+                    }, ...props }) }), counted && ((0, jsx_runtime_1.jsxs)("span", { className: "textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
+});
+exports.Textarea.displayName = "Textarea";

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textareaRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A multiline text field, measured from Attio's settings "Personal context": an
+// inset 1px ring (radius 8), 14px text, 6/10 padding, and an optional character
+// counter pinned bottom-right (12px, muted). Focus rings the field brand.
+const config = (0, core_1.defineRecipe)({
+    name: "textarea",
+    base: `
+    position: relative; display: block; width: 100%; font-family: ${tokens_1.contract.font.sans};
+
+    & .textarea-field {
+      box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
+      margin: 0; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md};
+      background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field};
+      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
+      outline: none; transition: box-shadow .15s ease;
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    }
+    & .textarea-field::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
+       overlay that is present-but-transparent at rest, so focusing never
+       shifts the box, animating only its colour. */
+    & .textarea-wrap { position: relative; display: block; }
+    & .textarea-wrap::after {
+      content: ""; position: absolute; inset: 0; border-radius: ${tokens_1.contract.radius.md};
+      border: 2px solid transparent; transition: border-color .1s ease;
+      pointer-events: none;
+    }
+    & .textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.strokeFieldFocus}; }
+    &[data-invalid] .textarea-wrap::after { border-color: ${tokens_1.contract.bgDanger}; }
+    &[data-invalid] .textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.bgDanger}; }
+    &[data-counted] .textarea-field { padding-bottom: ${tokens_1.contract.space["5"]}; }
+    & .textarea-count { position: absolute; inset-inline-end: ${tokens_1.contract.space["2.5"]}; bottom: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
+    & .textarea-count[data-over] { color: ${tokens_1.contract.bgDanger}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.textareaRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toastRecipe = exports.useToast = exports.ToastProvider = void 0;
+var toast_1 = require("./toast");
+Object.defineProperty(exports, "ToastProvider", { enumerable: true, get: function () { return toast_1.ToastProvider; } });
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return toast_1.useToast; } });
+var toast_recipe_1 = require("./toast.recipe");
+Object.defineProperty(exports, "toastRecipe", { enumerable: true, get: function () { return toast_recipe_1.toastRecipe; } });

package/dist/cjs/components/toast/toast.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.ToastProvider = ToastProvider;
+exports.useToast = useToast;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const toast_recipe_1 = require("./toast.recipe");
+const ToastContext = React.createContext(null);
+const ICONS = {
+    info: lucide_react_1.Info,
+    success: lucide_react_1.CircleCheck,
+    warning: lucide_react_1.TriangleAlert,
+    danger: lucide_react_1.CircleAlert,
+};
+function ToastCard({ item, onClose, dismissLabel, }) {
+    const Icon = ICONS[item.tone ?? "info"];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "toast", role: "status", "data-tone": item.tone ?? "info", children: [(0, jsx_runtime_1.jsx)("span", { className: "toast-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "toast-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "toast-title", children: item.title }), item.description != null && ((0, jsx_runtime_1.jsx)("div", { className: "toast-desc", children: item.description })), item.action && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "toast-action", onClick: () => {
+                            item.action?.onClick();
+                            onClose();
+                        }, children: item.action.label }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "toast-close", "aria-label": dismissLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }));
+}
+/**
+ * Wrap your app in a `ToastProvider`, then call `useToast().toast({...})` from
+ * anywhere to push a notification. Toasts stack bottom-right and auto-dismiss
+ * after `duration` (default 4s; 0 keeps them until dismissed).
+ */
+function ToastProvider({ children, duration = 4000, dismissLabel = "Dismiss", regionLabel = "Notifications", }) {
+    const [items, setItems] = React.useState([]);
+    const idRef = React.useRef(0);
+    const timers = React.useRef(new Map());
+    const dismiss = React.useCallback((id) => {
+        setItems((list) => list.filter((t) => t.id !== id));
+        const t = timers.current.get(id);
+        if (t) {
+            clearTimeout(t);
+            timers.current.delete(id);
+        }
+    }, []);
+    const toast = React.useCallback((o) => {
+        idRef.current += 1;
+        const id = idRef.current;
+        setItems((list) => [...list, { ...o, id }]);
+        const d = o.duration ?? duration;
+        if (d > 0)
+            timers.current.set(id, setTimeout(() => dismiss(id), d));
+        return id;
+    }, [duration, dismiss]);
+    React.useEffect(() => {
+        const map = timers.current;
+        return () => map.forEach(clearTimeout);
+    }, []);
+    const api = React.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+    return ((0, jsx_runtime_1.jsxs)(ToastContext.Provider, { value: api, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, toast_recipe_1.toastRecipe)(), children: (0, jsx_runtime_1.jsx)("div", { className: "toast-viewport", role: "region", "aria-label": regionLabel, children: items.map((t) => ((0, jsx_runtime_1.jsx)(ToastCard, { item: t, onClose: () => dismiss(t.id), dismissLabel: dismissLabel }, t.id))) }) })] }));
+}
+ToastProvider.displayName = "ToastProvider";
+function useToast() {
+    const ctx = React.useContext(ToastContext);
+    if (!ctx)
+        throw new Error("useToast must be used within a ToastProvider");
+    return ctx;
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toastRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// Toast notifications — a fixed bottom-right stack of cards on the measured
+// popover surface, each with a tone icon, title/description, optional action,
+// and a close button.
+const config = (0, core_1.defineRecipe)({
+    name: "toast",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};
+    & .toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${tokens_1.contract.space["4"]}; bottom: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; width: 360px; max-width: calc(100vw - ${tokens_1.contract.space["8"]}); pointer-events: none; }
+    & .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${tokens_1.contract.fgMuted}; }
+    & .toast[data-tone="info"] .toast-icon { color: ${tokens_1.contract.bgBrandSolid}; }
+    & .toast[data-tone="success"] .toast-icon { color: ${tokens_1.contract.bgSuccess}; }
+    & .toast[data-tone="warning"] .toast-icon { color: ${tokens_1.contract.bgWarning}; }
+    & .toast[data-tone="danger"] .toast-icon { color: ${tokens_1.contract.bgDanger}; }
+    & .toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .toast-title { font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .toast-desc { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .toast-action { align-self: flex-start; margin-top: ${tokens_1.contract.space["1.5"]}; height: 24px; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    & .toast-action:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 10%, transparent); }
+    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .toast-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.toastRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipRecipe = exports.Tooltip = void 0;
+var tooltip_1 = require("./tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });
+var tooltip_recipe_1 = require("./tooltip.recipe");
+Object.defineProperty(exports, "tooltipRecipe", { enumerable: true, get: function () { return tooltip_recipe_1.tooltipRecipe; } });

package/dist/cjs/components/tooltip/tooltip.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.Tooltip = Tooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const tooltip_recipe_1 = require("./tooltip.recipe");
+/**
+ * A hover/focus tooltip — a dark hint chip measured from Attio. Wraps its
+ * trigger in an inline element, shows after `delay` on pointer-enter / focus,
+ * and hides on leave / blur / Escape. The bubble is portaled and positioned
+ * above the trigger (flipping below near the top edge).
+ */
+function Tooltip({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, }) {
+    const triggerRef = React.useRef(null);
+    const timer = React.useRef(undefined);
+    const [pos, setPos] = React.useState(null);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    // Measuring is separate from opening, so a controlled consumer that flips
+    // `open` gets placed against the trigger exactly as a hover would.
+    React.useLayoutEffect(() => {
+        if (!open) {
+            setPos(null);
+            return;
+        }
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        const below = side === "bottom" || r.top < 48;
+        setPos({
+            left: Math.round(r.left + r.width / 2),
+            top: Math.round(below ? r.bottom + 6 : r.top - 6),
+            below,
+        });
+    }, [open, side]);
+    const openAfterDelay = () => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(true), delay);
+    };
+    const close = () => {
+        clearTimeout(timer.current);
+        setOpen(false);
+    };
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: triggerRef, style: { display: "inline-flex" }, onPointerEnter: openAfterDelay, onPointerLeave: close, onFocusCapture: openAfterDelay, onBlurCapture: close, onKeyDown: (e) => e.key === "Escape" && close(), children: children }), open &&
+                pos != null &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { role: "tooltip", className: (0, tooltip_recipe_1.tooltipRecipe)(), style: {
+                        left: pos.left,
+                        top: pos.top,
+                        transform: pos.below
+                            ? "translate(-50%, 0)"
+                            : "translate(-50%, -100%)",
+                    }, children: content }), document.body)] }));
+}
+Tooltip.displayName = "Tooltip";

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The floating bubble for a Tooltip — Attio's dark hint chip. Applied to the
+// portaled bubble itself (not a wrapper), so its styles survive the portal.
+const config = (0, core_1.defineRecipe)({
+    name: "tooltip",
+    base: `position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.sm}; background: #20242c; color: #fff; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease; @starting-style { opacity: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.tooltipRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wheelpickerRecipe = exports.WheelPicker = void 0;
+var wheelpicker_1 = require("./wheelpicker");
+Object.defineProperty(exports, "WheelPicker", { enumerable: true, get: function () { return wheelpicker_1.WheelPicker; } });
+var wheelpicker_recipe_1 = require("./wheelpicker.recipe");
+Object.defineProperty(exports, "wheelpickerRecipe", { enumerable: true, get: function () { return wheelpicker_recipe_1.wheelpickerRecipe; } });