@crisp-ui-kit/crisp 0.2.0 → 0.5.0

package/dist/esm/components/datepicker/datepicker.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { Popover } from "../popover/popover.js";
+import { datepickerRecipe } from "./datepicker.recipe.js";
+const DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const sameDay = (a, b) => a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+const defaultFormat = (d) => `${MONTHS[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
+/**
+ * A date field with a calendar popover — composes [Popover] with a month grid.
+ * Controlled via `value`/`onChange` or self-managed from `defaultValue`.
+ */
+export function DatePicker({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, "aria-label": ariaLabel, className, }) {
+    const [internal, setInternal] = React.useState(defaultValue ?? null);
+    const selected = value ?? internal;
+    const [open, setOpen] = React.useState(false);
+    const [view, setView] = React.useState(() => selected ?? new Date());
+    // when reopening, jump the view to the selected month
+    React.useEffect(() => {
+        if (open)
+            setView(selected ?? new Date());
+    }, [open, selected]);
+    const pick = (d) => {
+        if (value === undefined)
+            setInternal(d);
+        onChange?.(d);
+        setOpen(false);
+    };
+    const today = new Date();
+    const year = view.getFullYear();
+    const month = view.getMonth();
+    const firstWeekday = new Date(year, month, 1).getDay();
+    const start = new Date(year, month, 1 - firstWeekday);
+    return (_jsx("div", { className: datepickerRecipe({ className }), children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel ?? "Choose date", trigger: _jsxs("button", { type: "button", className: "datepicker-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "datepicker-cal", children: [_jsxs("div", { className: "datepicker-head", children: [_jsx("button", { type: "button", className: "datepicker-nav", "aria-label": "Previous month", onClick: () => setView(new Date(year, month - 1, 1)), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 1.75 }) }), _jsxs("span", { className: "datepicker-title", children: [MONTHS[month], " ", year] }), _jsx("button", { type: "button", className: "datepicker-nav", "aria-label": "Next month", onClick: () => setView(new Date(year, month + 1, 1)), children: _jsx(ChevronRight, { size: 16, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "datepicker-grid", role: "grid", children: [DOW.map((d) => (_jsx("span", { className: "datepicker-dow", "aria-hidden": "true", children: d }, d))), Array.from({ length: 42 }, (_, i) => {
+                                const day = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
+                                const outside = day.getMonth() !== month;
+                                const isSel = selected != null && sameDay(day, selected);
+                                return (_jsx("button", { type: "button", className: "datepicker-day", "aria-label": format(day), "aria-pressed": isSel, "data-outside": outside ? "" : undefined, "data-today": sameDay(day, today) ? "" : undefined, "data-selected": isSel ? "" : undefined, onClick: () => pick(day), children: day.getDate() }, day.toISOString()));
+                            })] })] }) }) }));
+}
+DatePicker.displayName = "DatePicker";

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

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A date field + calendar popover — measured from Attio's date cell editor: an
+// outlined trigger showing the value, opening a month grid (weekday row, day
+// cells, today outline, selected day brand-filled).
+const config = defineRecipe({
+    name: "datepicker",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .datepicker-trigger { display: inline-flex; align-items: center; gap: ${c.space["2"]}; box-sizing: border-box; height: 32px; padding: 0 ${c.space["2.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; white-space: nowrap; cursor: pointer; }
+    & .datepicker-trigger[data-ghost] { background: transparent; box-shadow: none; }
+    & .datepicker-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+    & .datepicker-trigger[data-placeholder] { color: ${c.fgMuted}; }
+    & .datepicker-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .datepicker-cal { width: 244px; }
+    & .datepicker-head { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 ${c.space["1"]}; }
+    & .datepicker-title { font-size: ${c.text.md}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .datepicker-nav { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .datepicker-nav:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: ${c.space["1"]}; }
+    & .datepicker-dow { display: flex; align-items: center; justify-content: center; height: 24px; font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .datepicker-day { display: flex; align-items: center; justify-content: center; height: 30px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; cursor: pointer; }
+    & .datepicker-day:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+    & .datepicker-day[data-outside] { color: ${c.fgMuted}; opacity: 0.5; }
+    & .datepicker-day[data-today] { box-shadow: inset 0 0 0 1px ${c.borderDefault}; }
+    & .datepicker-day[data-selected] { background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; }
+    & .datepicker-day[data-selected]:hover { background: ${c.bgBrandSolidPressed}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const datepickerRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { DatePicker } from "./datepicker.js";
+export { datepickerRecipe } from "./datepicker.recipe.js";

package/dist/esm/components/dialog/dialog.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as dialog from "@zag-js/dialog";
+import { normalizeProps, Portal, useMachine } from "@zag-js/react";
+import { X } from "lucide-react";
+import * as React from "react";
+import { dialogRecipe } from "./dialog.recipe.js";
+// A globally unique id per mounted instance (see command.tsx for the rationale —
+// the machine defers its dismissal listeners a frame, so tree-relative useId
+// values could let a stale registration resolve to a new instance's node).
+let instanceCounter = 0;
+function useDialogInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-dialog-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A modal dialog — composes Zag's dialog machine (focus trap, scroll lock,
+ * Escape / outside-click dismissal) with the measured Attio modal surface.
+ * Compose the body with `DialogBody` and actions with `DialogFooter`.
+ */
+export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, children, }) {
+    const id = useDialogInstanceId();
+    const service = useMachine(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        // Focus the first form field on open (like the command palette focuses its
+        // search), rather than the close button; fall back to the machine default.
+        initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+    });
+    const api = dialog.connect(service, normalizeProps);
+    if (!api.open)
+        return null;
+    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: _jsx("div", { ...api.getContentProps(), className: "dialog-content", "data-crisp-dialog": id, style: { maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "dialog-card", children: [title != null && (_jsxs("div", { className: "dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": "Close", children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+}
+Dialog.displayName = "Dialog";
+export function DialogBody({ children, className, }) {
+    return (_jsx("div", { className: className ? `dialog-body ${className}` : "dialog-body", children: children }));
+}
+export function DialogFooter({ children }) {
+    return _jsx("div", { className: "dialog-footer", children: children });
+}

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

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A modal dialog surface — measured from Attio's create-record modal: a radius-16
+// frosted-glass card (60% tinted background + 15px backdrop blur, both re-measured
+// per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
+// 2-layer black shadow) with a bordered header (title + close), a scrollable
+// body, and a bordered footer for the primary action.
+const config = defineRecipe({
+    name: "dialog",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
+    & .dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px ${c.shadowOverlay1}, 0 18px 88px -4px ${c.shadowOverlay2}, 0 0 1px ${c.shadowOverlay3}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .dialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["4"]}; padding: ${c.space["5"]} ${c.space["4"]}; }
+    & .dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .dialog-field { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
+    & .dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
+    & .dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-right: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const dialogRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Dialog, DialogBody, DialogFooter } from "./dialog.js";
+export { dialogRecipe } from "./dialog.recipe.js";

package/dist/esm/components/divider/divider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { dividerRecipe } from "./divider.recipe.js";
+/** A hairline separator over `borderSubtle`, horizontal or vertical. */
+export function Divider({ orientation = "horizontal", className, }) {
+    return (_jsx("hr", { "aria-orientation": orientation, "data-orientation": orientation, className: dividerRecipe({ className }) }));
+}
+Divider.displayName = "Divider";

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

@@ -0,0 +1,14 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A hairline separator — horizontal (default) or vertical.
+const config = defineRecipe({
+    name: "divider",
+    base: `flex-shrink: 0; border: none; margin: 0; background: ${c.borderSubtle};
+    &[data-orientation="horizontal"] { width: 100%; height: 1px; }
+    &[data-orientation="vertical"] { width: 1px; align-self: stretch; min-height: 1em; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const dividerRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Divider } from "./divider.js";
+export { dividerRecipe } from "./divider.recipe.js";

package/dist/esm/components/donutchart/donutchart.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { contract as c } from "../../tokens/index.js";
+import { donutchartRecipe } from "./donutchart.recipe.js";
+// default categorical palette (matches the tag/avatar tones)
+const PALETTE = [
+    c.bgBrandSolid,
+    c.bgCyan,
+    c.bgPurple,
+    c.bgOrange,
+    c.bgSuccess,
+    c.bgWarning,
+    c.bgDanger,
+];
+/**
+ * A donut / ring chart — measured from Attio's Reports breakdown reports. SVG
+ * ring using the r=15.915 (circumference 100) trick so slices are percentages;
+ * a centred total and an optional legend. `role="img"` with a summary.
+ */
+export function DonutChart({ data, size = 120, thickness = 14, centerValue, centerCaption, legend = true, format = (n) => n.toLocaleString(), "aria-label": ariaLabel, className, }) {
+    const total = data.reduce((s, d) => s + Math.max(0, d.value), 0);
+    const R = 15.915; // circumference ≈ 100
+    let cursor = 0;
+    const slices = data.map((d, i) => {
+        const pct = total > 0 ? (Math.max(0, d.value) / total) * 100 : 0;
+        const slice = {
+            ...d,
+            color: d.color ?? PALETTE[i % PALETTE.length],
+            pct,
+            offset: 25 - cursor, // 25 = start at 12 o'clock, clockwise
+        };
+        cursor += pct;
+        return slice;
+    });
+    const summary = ariaLabel ??
+        `Donut chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
+    return (_jsxs("div", { className: donutchartRecipe({ className }), role: "img", "aria-label": summary, children: [_jsxs("div", { className: "donutchart-ring", style: { width: size, height: size }, children: [_jsxs("svg", { className: "donutchart-svg", width: size, height: size, viewBox: "0 0 42 42", "aria-hidden": "true", children: [_jsx("circle", { className: "donutchart-track", cx: 21, cy: 21, r: R, strokeWidth: (thickness / size) * 42 }), slices.map((s) => (_jsx("circle", { className: "donutchart-seg", cx: 21, cy: 21, r: R, stroke: s.color, strokeWidth: (thickness / size) * 42, strokeDasharray: `${s.pct} ${100 - s.pct}`, strokeDashoffset: s.offset, children: _jsx("title", { children: `${s.label}: ${format(s.value)}` }) }, s.label)))] }), _jsxs("div", { className: "donutchart-center", children: [_jsx("span", { className: "donutchart-total", children: centerValue ?? format(total) }), centerCaption != null && (_jsx("span", { className: "donutchart-caption", children: centerCaption }))] })] }), legend && (_jsx("div", { className: "donutchart-legend", children: slices.map((s) => (_jsxs("span", { className: "donutchart-item", children: [_jsx("span", { className: "donutchart-swatch", style: { background: s.color } }), _jsx("span", { className: "donutchart-name", children: s.label }), _jsx("span", { className: "donutchart-val", children: format(s.value) })] }, s.label))) }))] }));
+}
+DonutChart.displayName = "DonutChart";

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

@@ -0,0 +1,27 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A donut / ring chart — measured from Attio's Reports breakdown reports: a
+// segmented ring with a centred total, plus a legend of coloured swatches with
+// labels and values. Pure SVG ring; HTML legend.
+const config = defineRecipe({
+    name: "donutchart",
+    base: `display: inline-flex; align-items: center; gap: ${c.space["4"]}; box-sizing: border-box; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .donutchart-ring { position: relative; flex-shrink: 0; }
+    & .donutchart-svg { display: block; }
+    & .donutchart-seg { fill: none; transition: stroke-dasharray 0.3s ease; }
+    & .donutchart-track { fill: none; stroke: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+    & .donutchart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
+    & .donutchart-total { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; }
+    & .donutchart-caption { font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+    & .donutchart-legend { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; min-width: 0; }
+    & .donutchart-item { display: inline-flex; align-items: center; gap: ${c.space["2"]}; font-size: ${c.text.md}; color: ${c.fgPrimary}; }
+    & .donutchart-swatch { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; }
+    & .donutchart-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: ${c.fgMuted}; }
+    & .donutchart-val { flex-shrink: 0; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const donutchartRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { DonutChart, } from "./donutchart.js";
+export { donutchartRecipe } from "./donutchart.recipe.js";

package/dist/esm/components/drawer/drawer.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as dialog from "@zag-js/dialog";
+import { normalizeProps, Portal, useMachine } from "@zag-js/react";
+import { X } from "lucide-react";
+import * as React from "react";
+import { drawerRecipe } from "./drawer.recipe.js";
+let instanceCounter = 0;
+function useDrawerInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-drawer-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A side sheet — composes Zag's dialog machine (focus trap, scroll lock,
+ * Escape / outside-click dismissal) with a panel that slides in from the edge.
+ * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
+ */
+export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, children, }) {
+    const id = useDrawerInstanceId();
+    const service = useMachine(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+    });
+    const api = dialog.connect(service, normalizeProps);
+    if (!api.open)
+        return null;
+    return (_jsx(Portal, { children: _jsxs("div", { className: drawerRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: _jsxs("div", { ...api.getContentProps(), className: "drawer-content", children: [title != null && (_jsxs("div", { className: "drawer-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": "Close", children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
+}
+Drawer.displayName = "Drawer";
+export function DrawerBody({ children }) {
+    return _jsx("div", { className: "drawer-body", children: children });
+}
+export function DrawerFooter({ children }) {
+    return _jsx("div", { className: "drawer-footer", children: children });
+}

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

@@ -0,0 +1,27 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A side sheet — a focus-trapped panel that slides in from the right or left,
+// over a scrim. Shares the Dialog header/body/footer language.
+const config = defineRecipe({
+    name: "drawer",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, ${c.fgPrimary} 18%, transparent); opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
+    & .drawer-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .drawer-positioner[data-side="right"] { justify-content: flex-end; }
+    & .drawer-positioner[data-side="left"] { justify-content: flex-start; }
+    & .drawer-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 420px; max-width: 92vw; height: 100%; background: ${c.bgSurface}; transform: none; transition: transform 0.24s cubic-bezier(.32,.72,0,1); }
+    & .drawer-positioner[data-side="right"] .drawer-content { box-shadow: -12px 0 32px -8px rgba(28,40,64,0.18); @starting-style { transform: translateX(100%); } }
+    & .drawer-positioner[data-side="left"] .drawer-content { box-shadow: 12px 0 32px -8px rgba(28,40,64,0.18); @starting-style { transform: translateX(-100%); } }
+    & .drawer-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .drawer-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .drawer-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .drawer-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["4"]}; }
+    & .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const drawerRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Drawer, DrawerBody, DrawerFooter } from "./drawer.js";
+export { drawerRecipe } from "./drawer.recipe.js";

package/dist/esm/components/emptystate/emptystate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { emptystateRecipe } from "./emptystate.recipe.js";
+/** A centred empty-state panel — icon, title, description, optional action. */
+export function EmptyState({ icon, title, description, action, variant, className, }) {
+    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), children: [icon && _jsx("span", { className: "emptystate-icon", children: icon }), _jsx("div", { className: "emptystate-title", children: title }), description != null && (_jsx("div", { className: "emptystate-desc", children: description })), action && _jsx("div", { className: "emptystate-action", children: action })] }));
+}
+EmptyState.displayName = "EmptyState";

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

@@ -0,0 +1,31 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// An empty-state panel — icon + title + description + optional action.
+const config = defineRecipe({
+    name: "emptystate",
+    base: `display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; box-sizing: border-box; padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-family: ${c.font.sans};
+    & .emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); color: ${c.fgMuted}; }
+    & .emptystate-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .emptystate-desc { max-width: 320px; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .emptystate-action { margin-top: ${c.space["2"]}; }`,
+    variants: {
+        variant: {
+            // compact icon tile (default)
+            default: ``,
+            // a large icon on a dotted-grid backdrop — Attio's Developers/Reports empty state
+            illustrated: `& .emptystate-icon { width: 132px; height: 96px; margin-bottom: ${c.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }`,
+            // Attio's full-view empty state (measured from a filtered-to-zero records table):
+            // a 45px ringed circle icon, a 20/24 semibold heading, a 14/20 medium muted body,
+            // then a primary action. Gaps are 16 / 8 / 16 (icon→title→desc→action).
+            page: `gap: ${c.space["2"]};
+    & .emptystate-icon { width: 45px; height: 45px; margin-bottom: ${c.space["2"]}; border-radius: ${c.radius.full}; border: 1px solid ${c.borderSubtle}; background: none; color: ${c.fgMuted}; }
+    & .emptystate-title { font-size: 20px; line-height: 24px; }
+    & .emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
+    & .emptystate-action { margin-top: ${c.space["2"]}; }`,
+        },
+    },
+    defaultVariants: { variant: "default" },
+    compoundVariants: [],
+});
+export const emptystateRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { EmptyState } from "./emptystate.js";
+export { emptystateRecipe } from "./emptystate.recipe.js";

package/dist/esm/components/formfield/formfield.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { formfieldRecipe } from "./formfield.recipe.js";
+/**
+ * A labelled form field — measured from Attio's Settings forms. A muted label
+ * above any control, with an optional description or error line below. When
+ * `error` is set, it replaces the description and gets `aria-describedby` wiring.
+ */
+export function FormField({ label, htmlFor, required, optional, description, error, children, className, }) {
+    const descId = React.useId();
+    const hasMsg = error != null || description != null;
+    return (_jsxs("div", { className: formfieldRecipe({ className }), children: [_jsxs("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "formfield-optional", children: "(optional)" }))] }), children, error != null ? (_jsx("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
+}
+FormField.displayName = "FormField";

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

@@ -0,0 +1,19 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A labelled form field — measured from Attio's Settings forms: a 12px/500 muted
+// label above the control, with an optional description or danger error line
+// below. Wraps any control (Input, Select, Textarea…).
+const config = defineRecipe({
+    name: "formfield",
+    base: `display: flex; flex-direction: column; gap: ${c.space["1.5"]}; box-sizing: border-box; font-family: ${c.font.sans};
+    & .formfield-label { display: inline-flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .formfield-required { color: ${c.bgDanger}; }
+    & .formfield-optional { color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); font-weight: ${c.weight.regular}; }
+    & .formfield-desc { font-size: ${c.text.sm}; line-height: 16px; color: ${c.fgMuted}; }
+    & .formfield-error { font-size: ${c.text.sm}; line-height: 16px; color: ${c.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const formfieldRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { FormField } from "./formfield.js";
+export { formfieldRecipe } from "./formfield.recipe.js";

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

@@ -0,0 +1,2 @@
+export { Input } from "./input.js";
+export { inputRecipe } from "./input.recipe.js";

package/dist/esm/components/input/input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { inputRecipe } from "./input.recipe.js";
+export const Input = React.forwardRef(({ size, invalid, className, ...props }, ref) => {
+    return (_jsx(Primitive.input, { ref: ref, className: inputRecipe({ size, invalid, className }), "aria-invalid": invalid === true || undefined, ...props }));
+});
+Input.displayName = "Input";

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

@@ -0,0 +1,23 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+const config = defineRecipe({
+    name: "input",
+    base: `box-sizing: border-box; display: inline-flex; width: 100%; font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary}; background: ${c.bgSurface}; border: none; outline: none; box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow .15s; &::placeholder { color: ${c.fgMuted}; } &:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; } &:disabled { opacity: 0.5; cursor: not-allowed; }`,
+    variants: {
+        size: {
+            medium: `height: 32px; padding-inline: ${c.space["2.5"]}; border-radius: ${c.radius.md};`,
+            large: `height: 36px; padding-inline: ${c.space["3"]}; border-radius: 10px;`,
+        },
+        invalid: {
+            true: `box-shadow: inset 0 0 0 1px ${c.bgDanger}; &:focus { box-shadow: inset 0 0 0 1px ${c.bgDanger}; }`,
+            false: ``,
+        },
+    },
+    defaultVariants: { size: "medium", invalid: false },
+    compoundVariants: [],
+});
+export const inputRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: { medium: { height: "32px", borderRadius: "8px", fontSize: "14px" } },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Kbd } from "./kbd.js";
+export { kbdRecipe } from "./kbd.recipe.js";

package/dist/esm/components/kbd/kbd.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { kbdRecipe } from "./kbd.recipe.js";
+export const Kbd = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: kbdRecipe({ className }), ...props }));
+});
+Kbd.displayName = "Kbd";

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

@@ -0,0 +1,20 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+const config = defineRecipe({
+    name: "kbd",
+    base: `box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["0.5"]}; min-width: 20px; height: 20px; padding-inline: ${c.space["1"]}; border-radius: ${c.radius.sm}; font-family: ${c.font.sans}; font-size: ${c.text.xs}; font-weight: ${c.weight.regular}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent);`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const kbdRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: {
+        chip: {
+            height: "20px",
+            borderRadius: "6px",
+            fontSize: "11px",
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { LineChart } from "./linechart.js";
+export { linechartRecipe } from "./linechart.recipe.js";

package/dist/esm/components/linechart/linechart.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { linechartRecipe } from "./linechart.recipe.js";
+function niceNum(raw) {
+    if (raw <= 0)
+        return 1;
+    const mag = 10 ** Math.floor(Math.log10(raw));
+    const norm = raw / mag;
+    const step = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;
+    return step * mag;
+}
+/**
+ * A responsive line chart — measured from Attio's Reports historical charts.
+ * A stretched SVG line/area (non-scaling stroke keeps it crisp) over dashed
+ * gridlines; dots are HTML so they stay round. `role="img"` with a summary.
+ */
+export function LineChart({ data, height = 240, max, ticks = 5, color, area = true, dots = true, format = (n) => n.toLocaleString(), xAxisTitle, "aria-label": ariaLabel, className, }) {
+    const rawMax = Math.max(1, ...data.map((d) => d.value));
+    const step = max ? max / (ticks - 1) : niceNum(rawMax / (ticks - 1));
+    const top = step * (ticks - 1);
+    const tickValues = Array.from({ length: ticks }, (_, i) => step * i);
+    // points in a 0..100 viewBox (y inverted: 0 at top)
+    const n = data.length;
+    const pts = data.map((d, i) => {
+        const x = n === 1 ? 50 : (i / (n - 1)) * 100;
+        const frac = Math.max(0, Math.min(1, d.value / top));
+        return { x, y: 100 - frac * 100, frac };
+    });
+    const line = pts.map((p) => `${p.x},${p.y}`).join(" ");
+    const areaPath = pts.length > 1
+        ? `M ${pts[0].x},100 ${pts.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${pts[pts.length - 1].x},100 Z`
+        : "";
+    const summary = ariaLabel ??
+        `Line chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
+    return (_jsxs("div", { className: linechartRecipe({ className }), style: { height }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "linechart-body", children: [_jsx("div", { className: "linechart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "linechart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && (_jsxs("svg", { className: "linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && _jsx("path", { className: "linechart-area", d: areaPath }), _jsx("polyline", { className: "linechart-line", points: line, style: { stroke: color } })] })), dots &&
+                                pts.map((p, i) => (_jsx("span", { className: "linechart-dot-html", style: {
+                                        left: `${p.x}%`,
+                                        bottom: `${p.frac * 100}%`,
+                                        borderColor: color,
+                                    }, title: `${data[i].label}: ${format(data[i].value)}` }, i)))] })] }), _jsx("div", { className: "linechart-xaxis", children: data.map((d) => (_jsx("span", { className: "linechart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && (_jsx("div", { className: "linechart-axis-title", children: xAxisTitle }))] }));
+}
+LineChart.displayName = "LineChart";

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

@@ -0,0 +1,27 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A responsive line chart — measured from Attio's Reports historical charts: a
+// brand line with a soft area fill over dashed horizontal gridlines, a value
+// axis on the left, and category labels below. The plot is an SVG stretched to
+// its box (non-scaling stroke keeps the line crisp); axes are HTML.
+const config = defineRecipe({
+    name: "linechart",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
+    & .linechart-body { display: flex; flex: 1; min-height: 0; }
+    & .linechart-yaxis { position: relative; flex-shrink: 0; width: 34px; }
+    & .linechart-ytick { position: absolute; right: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid ${c.borderDefault}; }
+    & .linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.borderSubtle}; pointer-events: none; }
+    & .linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+    & .linechart-area { fill: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); stroke: none; }
+    & .linechart-line { fill: none; stroke: ${c.bgBrandSolid}; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+    & .linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: ${c.radius.full}; background: ${c.bgSurface}; border: 2px solid ${c.bgBrandSolid}; transform: translate(-50%, 50%); pointer-events: auto; }
+    & .linechart-xaxis { display: flex; margin-top: ${c.space["1.5"]}; padding-left: 34px; }
+    & .linechart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .linechart-axis-title { margin-top: ${c.space["1"]}; padding-left: 34px; text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const linechartRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Menu, MenuCheckboxItem, MenuItem, MenuLabel, MenuSeparator, } from "./menu.js";
+export { menuRecipe } from "./menu.recipe.js";