@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/dist/cjs/components/divider/divider.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = Divider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_recipe_1 = require("./divider.recipe");
+/** A hairline separator over `borderSubtle`, horizontal or vertical. */
+function Divider({ orientation = "horizontal", className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("hr", { "aria-orientation": orientation, "data-orientation": orientation, className: (0, divider_recipe_1.dividerRecipe)({ className }), ...rest }));
+}
+Divider.displayName = "Divider";

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dividerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A hairline separator — horizontal (default) or vertical.
+const config = (0, core_1.defineRecipe)({
+    name: "divider",
+    base: `flex-shrink: 0; border: none; margin: 0; background: ${tokens_1.contract.borderSubtle};
+    &[data-orientation="horizontal"] { width: 100%; height: 1px; }
+    &[data-orientation="vertical"] { width: 1px; align-self: stretch; min-height: 1em; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.dividerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dividerRecipe = exports.Divider = void 0;
+var divider_1 = require("./divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return divider_1.Divider; } });
+var divider_recipe_1 = require("./divider.recipe");
+Object.defineProperty(exports, "dividerRecipe", { enumerable: true, get: function () { return divider_recipe_1.dividerRecipe; } });

package/dist/cjs/components/donutchart/donutchart.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DonutChart = DonutChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tokens_1 = require("../../tokens");
+const donutchart_recipe_1 = require("./donutchart.recipe");
+// default categorical palette (matches the tag/avatar tones)
+const PALETTE = [
+    tokens_1.contract.bgBrandSolid,
+    tokens_1.contract.bgCyan,
+    tokens_1.contract.bgPurple,
+    tokens_1.contract.bgOrange,
+    tokens_1.contract.bgSuccess,
+    tokens_1.contract.bgWarning,
+    tokens_1.contract.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.
+ */
+function DonutChart({ data, size = 120, thickness = 14, centerValue, centerCaption, legend = true, format = (n) => n.toLocaleString(), "aria-label": ariaLabel, className, ...rest }) {
+    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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, donutchart_recipe_1.donutchartRecipe)({ className }), ...rest, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "donutchart-ring", style: { width: size, height: size }, children: [(0, jsx_runtime_1.jsxs)("svg", { className: "donutchart-svg", width: size, height: size, viewBox: "0 0 42 42", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { className: "donutchart-track", cx: 21, cy: 21, r: R, strokeWidth: (thickness / size) * 42 }), slices.map((s) => ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("title", { children: `${s.label}: ${format(s.value)}` }) }, s.label)))] }), (0, jsx_runtime_1.jsxs)("div", { className: "donutchart-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "donutchart-total", children: centerValue ?? format(total) }), centerCaption != null && ((0, jsx_runtime_1.jsx)("span", { className: "donutchart-caption", children: centerCaption }))] })] }), legend && ((0, jsx_runtime_1.jsx)("div", { className: "donutchart-legend", children: slices.map((s) => ((0, jsx_runtime_1.jsxs)("span", { className: "donutchart-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "donutchart-swatch", style: { background: s.color } }), (0, jsx_runtime_1.jsx)("span", { className: "donutchart-name", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "donutchart-val", children: format(s.value) })] }, s.label))) }))] }));
+}
+DonutChart.displayName = "DonutChart";

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.donutchartRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "donutchart",
+    base: `display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["4"]}; box-sizing: border-box; font-family: ${tokens_1.contract.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, ${tokens_1.contract.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: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; color: ${tokens_1.contract.fgPrimary}; }
+    & .donutchart-caption { font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; }
+    & .donutchart-legend { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+    & .donutchart-item { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.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: ${tokens_1.contract.fgMuted}; }
+    & .donutchart-val { flex-shrink: 0; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.donutchartRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.donutchartRecipe = exports.DonutChart = void 0;
+var donutchart_1 = require("./donutchart");
+Object.defineProperty(exports, "DonutChart", { enumerable: true, get: function () { return donutchart_1.DonutChart; } });
+var donutchart_recipe_1 = require("./donutchart.recipe");
+Object.defineProperty(exports, "donutchartRecipe", { enumerable: true, get: function () { return donutchart_recipe_1.donutchartRecipe; } });

package/dist/cjs/components/drawer/drawer.js

@@ -0,0 +1,80 @@
+"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.Drawer = Drawer;
+exports.DrawerBody = DrawerBody;
+exports.DrawerFooter = DrawerFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog = __importStar(require("@zag-js/dialog"));
+const react_1 = require("@zag-js/react");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const drawer_recipe_1 = require("./drawer.recipe");
+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`.
+ */
+function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel = "Close", children, }) {
+    const id = useDrawerInstanceId();
+    const service = (0, react_1.useMachine)(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+    });
+    const api = dialog.connect(service, react_1.normalizeProps);
+    if (!api.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, drawer_recipe_1.drawerRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: (0, jsx_runtime_1.jsxs)("div", { ...api.getContentProps(), className: "drawer-content", children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "drawer-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
+}
+Drawer.displayName = "Drawer";
+function DrawerBody({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "drawer-body", children: children });
+}
+function DrawerFooter({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "drawer-footer", children: children });
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "drawer",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};
+    & .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, ${tokens_1.contract.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; box-sizing: border-box; padding: ${tokens_1.contract.space["2"]}; }
+    & .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; overflow: hidden; width: 420px; max-width: 100%; height: 100%; background: ${tokens_1.contract.bgSurface}; border-radius: ${tokens_1.contract.radius.xl}; box-shadow: ${tokens_1.elevation.floating}; transform: none; transition: transform 0.24s cubic-bezier(.32,.72,0,1); }
+    & .drawer-positioner[data-side="right"] .drawer-content { @starting-style { transform: translateX(calc(100% + ${tokens_1.contract.space["2"]})); } }
+    & .drawer-positioner[data-side="left"] .drawer-content { @starting-style { transform: translateX(calc(-100% - ${tokens_1.contract.space["2"]})); } }
+    & .drawer-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .drawer-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .drawer-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["4"]}; }
+    & .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.drawerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerRecipe = exports.DrawerFooter = exports.DrawerBody = exports.Drawer = void 0;
+var drawer_1 = require("./drawer");
+Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return drawer_1.Drawer; } });
+Object.defineProperty(exports, "DrawerBody", { enumerable: true, get: function () { return drawer_1.DrawerBody; } });
+Object.defineProperty(exports, "DrawerFooter", { enumerable: true, get: function () { return drawer_1.DrawerFooter; } });
+var drawer_recipe_1 = require("./drawer.recipe");
+Object.defineProperty(exports, "drawerRecipe", { enumerable: true, get: function () { return drawer_recipe_1.drawerRecipe; } });

package/dist/cjs/components/emptystate/emptystate.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = EmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const emptystate_recipe_1 = require("./emptystate.recipe");
+/** A centred empty-state panel — icon, title, description, optional action. */
+function EmptyState({ icon, title, description, action, variant, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, emptystate_recipe_1.emptystateRecipe)({ variant, className }), ...rest, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "emptystate-icon", children: icon }), (0, jsx_runtime_1.jsx)("div", { className: "emptystate-title", children: title }), description != null && ((0, jsx_runtime_1.jsx)("div", { className: "emptystate-desc", children: description })), action && (0, jsx_runtime_1.jsx)("div", { className: "emptystate-action", children: action })] }));
+}
+EmptyState.displayName = "EmptyState";

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emptystateRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// An empty-state panel — icon + title + description + optional action.
+const config = (0, core_1.defineRecipe)({
+    name: "emptystate",
+    base: `display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["4"]}; text-align: center; font-family: ${tokens_1.contract.font.sans};
+    & .emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); color: ${tokens_1.contract.fgMuted}; }
+    & .emptystate-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .emptystate-desc { max-width: 320px; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .emptystate-action { margin-top: ${tokens_1.contract.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: ${tokens_1.contract.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.space["2"]};
+    & .emptystate-icon { width: 45px; height: 45px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.full}; border: 1px solid ${tokens_1.contract.borderSubtle}; background: none; color: ${tokens_1.contract.fgMuted}; }
+    & .emptystate-title { font-size: 20px; line-height: 24px; }
+    & .emptystate-desc { max-width: 266px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }
+    & .emptystate-action { margin-top: ${tokens_1.contract.space["2"]}; }`,
+        },
+    },
+    defaultVariants: { variant: "default" },
+    compoundVariants: [],
+});
+exports.emptystateRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emptystateRecipe = exports.EmptyState = void 0;
+var emptystate_1 = require("./emptystate");
+Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return emptystate_1.EmptyState; } });
+var emptystate_recipe_1 = require("./emptystate.recipe");
+Object.defineProperty(exports, "emptystateRecipe", { enumerable: true, get: function () { return emptystate_recipe_1.emptystateRecipe; } });

package/dist/cjs/components/formfield/formfield.js

@@ -0,0 +1,50 @@
+"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.FormField = FormField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const formfield_recipe_1 = require("./formfield.recipe");
+/**
+ * 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.
+ */
+function FormField({ label, htmlFor, required, optional, description, error, children, className, ...rest }) {
+    const descId = React.useId();
+    const hasMsg = error != null || description != null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, formfield_recipe_1.formfieldRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && ((0, jsx_runtime_1.jsx)("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && ((0, jsx_runtime_1.jsx)("span", { className: "formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? ((0, jsx_runtime_1.jsx)("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? ((0, jsx_runtime_1.jsx)("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
+}
+FormField.displayName = "FormField";

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formfieldRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "formfield",
+    base: `display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
+    & .formfield-label { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .formfield-required { color: ${tokens_1.contract.bgDanger}; }
+    & .formfield-optional { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 40%, transparent); font-weight: ${tokens_1.contract.weight.regular}; }
+    & .formfield-desc { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: ${tokens_1.contract.fgMuted}; }
+    & .formfield-error { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: ${tokens_1.contract.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.formfieldRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formfieldRecipe = exports.FormField = void 0;
+var formfield_1 = require("./formfield");
+Object.defineProperty(exports, "FormField", { enumerable: true, get: function () { return formfield_1.FormField; } });
+var formfield_recipe_1 = require("./formfield.recipe");
+Object.defineProperty(exports, "formfieldRecipe", { enumerable: true, get: function () { return formfield_recipe_1.formfieldRecipe; } });

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputRecipe = exports.Input = void 0;
+var input_1 = require("./input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_1.Input; } });
+var input_recipe_1 = require("./input.recipe");
+Object.defineProperty(exports, "inputRecipe", { enumerable: true, get: function () { return input_recipe_1.inputRecipe; } });

package/dist/cjs/components/input/input.js

@@ -0,0 +1,47 @@
+"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.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const input_recipe_1 = require("./input.recipe");
+exports.Input = React.forwardRef(({ size, invalid, className, style, ...props }, ref) => {
+    // The wrapper exists only to host the ::after focus ring — an <input> is a
+    // replaced element and cannot have one. Everything the consumer passes
+    // still lands on the <input> itself, so `id`, `name`, `onChange`, form
+    // association and every native attribute behave exactly as before.
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, input_recipe_1.inputRecipe)({ size, invalid, className }), style: style, children: (0, jsx_runtime_1.jsx)("input", { ref: ref, className: "input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
+});
+exports.Input.displayName = "Input";

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// Geometry is Attio's, measured: 32/36px tall, r8/r10, 10/12px side padding.
+// The FOCUS TREATMENT is seed-design's, measured from @seed-design/css: a 2px
+// ring on an ::after overlay that is present-but-transparent at rest, so
+// focusing cannot shift layout the way a width change would, and animates
+// `border-color` over 100ms. The ring colour is a high-contrast neutral rather
+// than the brand hue — it reads as "this field has focus", not as a state.
+//
+// The ring needs the ::after, and ::after needs a non-replaced element, so
+// Input renders a wrapper around the <input>. The wrapper is presentational:
+// every consumer prop still goes to the <input>, which is what `id`, `name`,
+// `onChange` and form semantics require.
+const config = (0, core_1.defineRecipe)({
+    name: "input",
+    base: `
+    position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
+    width: 100%; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field};
+    font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
+
+    &::after {
+      content: ""; position: absolute; inset: 0; border-radius: inherit;
+      border: 2px solid transparent; transition: border-color .1s ease;
+      pointer-events: none;
+    }
+    &:focus-within::after { border-color: ${tokens_1.contract.strokeFieldFocus}; }
+
+    & .input-value {
+      box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%;
+      align-self: stretch; margin: 0; border: none; background: none; outline: none;
+      font: inherit; color: ${tokens_1.contract.fgPrimary};
+    }
+    & .input-value::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .input-value:disabled { opacity: 0.5; cursor: not-allowed; }
+    &:has(.input-value:disabled) { opacity: 1; }
+  `,
+    variants: {
+        size: {
+            medium: `height: 32px; border-radius: ${tokens_1.contract.radius.md}; & .input-value { padding-inline: ${tokens_1.contract.space["2.5"]}; }`,
+            large: `height: 36px; border-radius: 10px; & .input-value { padding-inline: ${tokens_1.contract.space["3"]}; }`,
+        },
+        invalid: {
+            // critical outranks focus: a field that is wrong stays visibly wrong
+            // while you are correcting it, which is seed's behaviour too
+            true: `&::after { border-color: ${tokens_1.contract.bgDanger}; } &:focus-within::after { border-color: ${tokens_1.contract.bgDanger}; }`,
+            false: ``,
+        },
+    },
+    defaultVariants: { size: "medium", invalid: false },
+    compoundVariants: [],
+});
+exports.inputRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: { medium: { height: "32px", borderRadius: "8px", fontSize: "14px" } },
+});
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.kbdRecipe = exports.Kbd = void 0;
+var kbd_1 = require("./kbd");
+Object.defineProperty(exports, "Kbd", { enumerable: true, get: function () { return kbd_1.Kbd; } });
+var kbd_recipe_1 = require("./kbd.recipe");
+Object.defineProperty(exports, "kbdRecipe", { enumerable: true, get: function () { return kbd_recipe_1.kbdRecipe; } });

package/dist/cjs/components/kbd/kbd.js

@@ -0,0 +1,44 @@
+"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.Kbd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const kbd_recipe_1 = require("./kbd.recipe");
+exports.Kbd = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, kbd_recipe_1.kbdRecipe)({ className }), ...props }));
+});
+exports.Kbd.displayName = "Kbd";

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linechartRecipe = exports.LineChart = void 0;
+var linechart_1 = require("./linechart");
+Object.defineProperty(exports, "LineChart", { enumerable: true, get: function () { return linechart_1.LineChart; } });
+var linechart_recipe_1 = require("./linechart.recipe");
+Object.defineProperty(exports, "linechartRecipe", { enumerable: true, get: function () { return linechart_recipe_1.linechartRecipe; } });