@crisp-ui-kit/crisp 0.2.0 → 0.7.0

package/dist/cjs/product/flowcanvas/flowcanvas.js

@@ -0,0 +1,121 @@
+"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.FlowCanvas = FlowCanvas;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const flowcanvas_recipe_1 = require("./flowcanvas.recipe");
+const GRID = 20;
+const clampZoom = (z) => Math.min(1.5, Math.max(0.5, z));
+/**
+ * A pannable, zoomable node canvas with draggable nodes and connecting edges —
+ * measured from Attio's Workflows editor. Drag a node to move it (fires
+ * `onNodesChange`); drag the background to pan; use the toolbar to zoom.
+ */
+function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth = 240, nodeHeight = 64, "aria-label": ariaLabel, className, zoomOutLabel = "Zoom out", zoomInLabel = "Zoom in", resetLabel = "Reset", edgesLabel = "Edges", }) {
+    const [pan, setPan] = React.useState({ x: 40, y: 40 });
+    const [zoom, setZoom] = React.useState(1);
+    const [panning, setPanning] = React.useState(false);
+    const drag = React.useRef(null);
+    const byId = React.useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+    const onNodePointerDown = (e, node) => {
+        e.stopPropagation();
+        e.target.setPointerCapture?.(e.pointerId);
+        drag.current = {
+            id: node.id,
+            startX: e.clientX,
+            startY: e.clientY,
+            nodeX: node.x,
+            nodeY: node.y,
+        };
+    };
+    const onBackgroundPointerDown = (e) => {
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        setPanning(true);
+        drag.current = {
+            pan: true,
+            startX: e.clientX,
+            startY: e.clientY,
+            panX: pan.x,
+            panY: pan.y,
+        };
+    };
+    const onPointerMove = (e) => {
+        const d = drag.current;
+        if (!d)
+            return;
+        if ("pan" in d) {
+            setPan({
+                x: d.panX + (e.clientX - d.startX),
+                y: d.panY + (e.clientY - d.startY),
+            });
+        }
+        else {
+            const dx = (e.clientX - d.startX) / zoom;
+            const dy = (e.clientY - d.startY) / zoom;
+            onNodesChange?.(nodes.map((n) => n.id === d.id ? { ...n, x: d.nodeX + dx, y: d.nodeY + dy } : n));
+        }
+    };
+    const onPointerUp = () => {
+        drag.current = null;
+        setPanning(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, flowcanvas_recipe_1.flowcanvasRecipe)({ className }), "data-panning": panning ? "" : undefined, style: {
+            backgroundSize: `${GRID * zoom}px ${GRID * zoom}px`,
+            backgroundPosition: `${pan.x}px ${pan.y}px`,
+        }, role: "application", "aria-label": ariaLabel ?? "Flow canvas", onPointerDown: onBackgroundPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flowcanvas-viewport", style: {
+                    transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                }, children: [(0, jsx_runtime_1.jsxs)("svg", { className: "flowcanvas-edges", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("title", { children: edgesLabel }), edges.map((edge) => {
+                                const a = byId.get(edge.from);
+                                const b = byId.get(edge.to);
+                                if (!a || !b)
+                                    return null;
+                                const sx = a.x + nodeWidth;
+                                const sy = a.y + nodeHeight / 2;
+                                const tx = b.x;
+                                const ty = b.y + nodeHeight / 2;
+                                const c = Math.max(30, Math.abs(tx - sx) / 2);
+                                return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { className: "flowcanvas-edge", d: `M ${sx} ${sy} C ${sx + c} ${sy}, ${tx - c} ${ty}, ${tx} ${ty}` }), (0, jsx_runtime_1.jsx)("circle", { className: "flowcanvas-edge-dot", cx: sx, cy: sy, r: 3 }), (0, jsx_runtime_1.jsx)("circle", { className: "flowcanvas-edge-dot", cx: tx, cy: ty, r: 3 })] }, `${edge.from}-${edge.to}`));
+                            })] }), nodes.map((node) => ((0, jsx_runtime_1.jsx)("div", { className: "flowcanvas-node", "data-dragging": drag.current &&
+                            "id" in drag.current &&
+                            drag.current.id === node.id
+                            ? ""
+                            : undefined, style: { left: node.x, top: node.y, width: nodeWidth }, onPointerDown: (e) => onNodePointerDown(e, node), children: renderNode(node) }, node.id)))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flowcanvas-toolbar", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "flowcanvas-tool", "aria-label": zoomOutLabel, onClick: () => setZoom((z) => clampZoom(z - 0.1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "flowcanvas-tool flowcanvas-tool-zoom", "aria-live": "polite", children: [Math.round(zoom * 100), "%"] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "flowcanvas-tool", "aria-label": zoomInLabel, onClick: () => setZoom((z) => clampZoom(z + 0.1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsx)("span", { className: "flowcanvas-tool-sep" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "flowcanvas-tool", onClick: () => {
+                            setZoom(1);
+                            setPan({ x: 40, y: 40 });
+                        }, children: resetLabel })] })] }));
+}
+FlowCanvas.displayName = "FlowCanvas";

package/dist/cjs/product/flowcanvas/flowcanvas.recipe.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flowcanvasRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A pannable, zoomable node canvas — measured from Attio's Workflows editor:
+// a dotted-grid background, draggable node cards, and connecting edges with dots.
+const config = (0, core_1.defineRecipe)({
+    name: "flowcanvas",
+    base: `position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: ${tokens_1.contract.bgSurface}; background-image: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.fgPrimary} 14%, transparent) 1px, transparent 1px); font-family: ${tokens_1.contract.font.sans}; cursor: grab; touch-action: none; user-select: none;
+    &[data-panning] { cursor: grabbing; }
+    & .flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
+    & .flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
+    & .flowcanvas-edge { fill: none; stroke: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); stroke-width: 1.5; }
+    & .flowcanvas-edge-dot { fill: ${tokens_1.contract.bgBrandSolid}; }
+    & .flowcanvas-node { position: absolute; cursor: grab; }
+    & .flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
+    & .flowcanvas-toolbar { position: absolute; bottom: ${tokens_1.contract.space["4"]}; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgRaised}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}, 0 4px 14px -4px rgba(28,40,64,0.16); }
+    & .flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1"]}; height: 30px; min-width: 30px; padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    & .flowcanvas-tool:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .flowcanvas-tool-zoom { min-width: 48px; }
+    & .flowcanvas-tool-sep { width: 1px; height: 18px; background: ${tokens_1.contract.borderSubtle}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.flowcanvasRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/flowcanvas/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flowcanvasRecipe = exports.FlowCanvas = void 0;
+var flowcanvas_1 = require("./flowcanvas");
+Object.defineProperty(exports, "FlowCanvas", { enumerable: true, get: function () { return flowcanvas_1.FlowCanvas; } });
+var flowcanvas_recipe_1 = require("./flowcanvas.recipe");
+Object.defineProperty(exports, "flowcanvasRecipe", { enumerable: true, get: function () { return flowcanvas_recipe_1.flowcanvasRecipe; } });

package/dist/cjs/product/inbox/inbox.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Inbox = Inbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const inbox_recipe_1 = require("./inbox.recipe");
+/**
+ * A notifications inbox panel — measured from Attio's notification flyout. A
+ * title, Notifications/Requests tabs with counts, then notification rows
+ * (avatar + message + time + unread dot) or a centred empty state. Put it inside
+ * a Popover for the flyout.
+ */
+function Inbox({ notifications = [], title = "Notifications", tabs, activeTab, onTabChange, emptyTitle = "No notifications", emptySubtitle = "Notifications such as mentions and important updates will be displayed here.", emptyAction, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "inbox-tabs", role: "tablist", children: tabs.map((t) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, className: "inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && ((0, jsx_runtime_1.jsxs)("span", { className: "inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-sub", children: emptySubtitle })), emptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-action", children: emptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "inbox-row-unread" })] }, n.id))) }))] }));
+}
+Inbox.displayName = "Inbox";

package/dist/cjs/product/inbox/inbox.recipe.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inboxRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A notifications inbox panel — measured from Attio's notification flyout: a
+// ~380px rounded panel with a title, "Notifications / Requests" tabs (with
+// counts), then notification rows (avatar + message + time + unread dot) or a
+// centred empty state. Drop it in a Popover for the flyout, or use standalone.
+const config = (0, core_1.defineRecipe)({
+    name: "inbox",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px;
+    border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans}; overflow: hidden;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .inbox-head { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]} 0; }
+    & .inbox-title { font-size: ${tokens_1.contract.text.xl}; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; color: ${tokens_1.contract.fgPrimary}; }
+    & .inbox-tabs { display: flex; gap: ${tokens_1.contract.space["3"]}; margin-top: ${tokens_1.contract.space["2"]}; box-shadow: inset 0 -1px 0 ${tokens_1.contract.borderSubtle}; }
+    & .inbox-tab { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
+    & .inbox-tab:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .inbox-tab[data-active] { color: ${tokens_1.contract.bgBrandSolid}; box-shadow: inset 0 -2px 0 ${tokens_1.contract.bgBrandSolid}; }
+    & .inbox-tab-count { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .inbox-tab[data-active] .inbox-tab-count { color: ${tokens_1.contract.bgBrandSolid}; }
+
+    & .inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["1"]}; display: flex; flex-direction: column; gap: 1px; }
+    & .inbox-row { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .inbox-row:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
+    & .inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .inbox-row-msg { font-size: ${tokens_1.contract.text.lg}; line-height: 18px; color: ${tokens_1.contract.fgPrimary}; }
+    & .inbox-row-msg b { font-weight: ${tokens_1.contract.weight.semibold}; }
+    & .inbox-row-time { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgBrandSolid}; }
+
+    & .inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1"]}; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["4"]}; text-align: center; }
+    & .inbox-empty-icon { display: inline-flex; margin-bottom: ${tokens_1.contract.space["2"]}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); }
+    & .inbox-empty-title { font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .inbox-empty-sub { font-size: ${tokens_1.contract.text.md}; line-height: 18px; color: ${tokens_1.contract.fgMuted}; max-width: 260px; }
+    & .inbox-empty-action { margin-top: ${tokens_1.contract.space["2"]}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.inboxRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/inbox/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inboxRecipe = exports.Inbox = void 0;
+var inbox_1 = require("./inbox");
+Object.defineProperty(exports, "Inbox", { enumerable: true, get: function () { return inbox_1.Inbox; } });
+var inbox_recipe_1 = require("./inbox.recipe");
+Object.defineProperty(exports, "inboxRecipe", { enumerable: true, get: function () { return inbox_recipe_1.inboxRecipe; } });

package/dist/cjs/product/listpage/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listpageRecipe = exports.ListRow = exports.ListPage = void 0;
+var listpage_1 = require("./listpage");
+Object.defineProperty(exports, "ListPage", { enumerable: true, get: function () { return listpage_1.ListPage; } });
+Object.defineProperty(exports, "ListRow", { enumerable: true, get: function () { return listpage_1.ListRow; } });
+var listpage_recipe_1 = require("./listpage.recipe");
+Object.defineProperty(exports, "listpageRecipe", { enumerable: true, get: function () { return listpage_recipe_1.listpageRecipe; } });

package/dist/cjs/product/listpage/listpage.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListRow = ListRow;
+exports.ListPage = ListPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const listpage_recipe_1 = require("./listpage.recipe");
+/** A single list row wrapper (52px, hover, top border). Compose cells inside.
+ * Renders a real `<button>` when `onClick` is given, else a plain row. */
+function ListRow({ children, onClick, }) {
+    if (onClick) {
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "listpage-row", onClick: onClick, children: children }));
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: "listpage-row", children: children });
+}
+/**
+ * The entity-list page shell — measured from Attio's Reports/Sequences/Tasks/
+ * Notes list views. A view-bar toolbar (leading/trailing slots + record count),
+ * an optional dashed Favorites region, then column headers and time-grouped
+ * rows. Rows are composed by the caller (wrap each in <ListRow>).
+ */
+function ListPage({ leading, trailing, count, favorites, favoritesLabel = "Favorites", columns, groups, emptyLabel = "Nothing here yet", className, }) {
+    const total = groups?.reduce((s, g) => s + g.rows.length, 0) ?? 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, listpage_recipe_1.listpageRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "listpage-toolbar", children: [(0, jsx_runtime_1.jsx)("div", { className: "listpage-toolbar-lead", children: leading }), count != null && (0, jsx_runtime_1.jsx)("div", { className: "listpage-count", children: count }), trailing != null && ((0, jsx_runtime_1.jsx)("div", { className: "listpage-toolbar-trail", children: trailing }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "listpage-body", children: [favorites != null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "listpage-section-label", children: favoritesLabel }), (0, jsx_runtime_1.jsx)("div", { className: "listpage-favorites", "data-dashed": "", children: favorites })] })), columns && columns.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "listpage-colhead", children: columns.map((col, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "listpage-colhead-cell", children: [col.icon, col.label] }, i))) })), total === 0 && !groups?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "listpage-empty", children: emptyLabel })) : (groups?.map((g) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "listpage-group", children: [g.label, g.count != null && ((0, jsx_runtime_1.jsx)("span", { className: "listpage-group-count", children: g.count }))] }), g.rows] }, g.id))))] })] }));
+}
+ListPage.displayName = "ListPage";

package/dist/cjs/product/listpage/listpage.recipe.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listpageRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The entity-list page shell — measured from Attio's Reports / Sequences / Tasks
+// / Notes list views: a view-bar toolbar (leading Sort/Filter, trailing view
+// toggle / settings / New, and a record count), an optional dashed "Favorites"
+// region, then a list with column headers and time-grouped 52px rows.
+const config = (0, core_1.defineRecipe)({
+    name: "listpage",
+    base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .listpage-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; }
+    & .listpage-toolbar-lead { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    & .listpage-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .listpage-toolbar-trail { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    & .listpage-count + .listpage-toolbar-trail { margin-inline-start: ${tokens_1.contract.space["3"]}; }
+
+    & .listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]}; }
+
+    & .listpage-section-label { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .listpage-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${tokens_1.contract.space["6"]}; border-radius: ${tokens_1.contract.radius.xl};
+      background: repeating-linear-gradient(0deg, transparent, transparent) padding-box,
+        border-box; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); }
+    & .listpage-favorites[data-dashed] { box-shadow: none; border: 1px dashed color-mix(in srgb, ${tokens_1.contract.fgPrimary} 14%, transparent); }
+
+    & .listpage-colhead { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; height: 40px; padding: 0 ${tokens_1.contract.space["2"]}; box-shadow: inset 0 -1px 0 ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .listpage-colhead-cell { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
+
+    & .listpage-group { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 36px; padding: 0 ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .listpage-group-count { 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}; color: ${tokens_1.contract.fgMuted}; }
+
+    & .listpage-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; width: 100%; height: 52px; padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; background: none; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .listpage-row:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: -2px; }
+    & .listpage-row:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); }
+    & .listpage-row-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+
+    & .listpage-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["4"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.listpageRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/navitem/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavItem = void 0;
+var navitem_1 = require("./navitem");
+Object.defineProperty(exports, "NavItem", { enumerable: true, get: function () { return navitem_1.NavItem; } });

package/dist/cjs/product/navitem/navitem.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.NavItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const navitem_recipe_1 = require("./navitem.recipe");
+exports.NavItem = React.forwardRef(({ active, icon, trailing, className, children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.a, { ref: ref, "data-active": active || undefined, className: (0, navitem_recipe_1.navitemRecipe)({ className }), ...props, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "navitem-label", children: children }), trailing != null && ((0, jsx_runtime_1.jsx)("span", { className: "navitem-trailing", children: trailing }))] }));
+});
+exports.NavItem.displayName = "NavItem";

package/dist/cjs/product/navitem/navitem.recipe.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navitemRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+const config = (0, core_1.defineRecipe)({
+    name: "navitem",
+    base: `box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}
+  ; height: 28px; padding-inline: ${tokens_1.contract.space["2"]}
+  ; padding-inline-end: ${tokens_1.contract.space["1"]}
+  ; border-radius: ${tokens_1.contract.radius.lg}
+  ; font-family: ${tokens_1.contract.font.sans}
+  ; font-size: ${tokens_1.contract.text.lg}
+  ; font-weight: ${tokens_1.contract.weight.medium}
+  ; letter-spacing: -0.14px; line-height: 20px; color: ${tokens_1.contract.fgPrimary}
+  ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s; & .navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
+  &:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 2%, transparent); }
+  &[data-active] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.navitemRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: {
+        row: {
+            height: "28px",
+            borderRadius: "9px",
+            fontSize: "14px",
+            fontWeight: "500",
+        },
+    },
+});
+exports.default = config;

package/dist/cjs/product/onboarding/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onboardingRecipe = exports.OnboardingChecklist = void 0;
+var onboarding_1 = require("./onboarding");
+Object.defineProperty(exports, "OnboardingChecklist", { enumerable: true, get: function () { return onboarding_1.OnboardingChecklist; } });
+var onboarding_recipe_1 = require("./onboarding.recipe");
+Object.defineProperty(exports, "onboardingRecipe", { enumerable: true, get: function () { return onboarding_recipe_1.onboardingRecipe; } });

package/dist/cjs/product/onboarding/onboarding.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingChecklist = OnboardingChecklist;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const onboarding_recipe_1 = require("./onboarding.recipe");
+/**
+ * An onboarding checklist card — measured from Attio's floating "Getting
+ * started" widget. Title + optional menu/minimize, a segmented progress bar,
+ * and step rows (completed rows strike through with a brand check).
+ */
+function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", }) {
+    const total = steps.length;
+    const done = steps.filter((s) => s.done).length;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, onboarding_recipe_1.onboardingRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "onboarding-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-title", children: title }), onMenu && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "onboarding-sub", children: [(0, jsx_runtime_1.jsxs)("b", { children: [done, "/", total] }), " ", "steps completed", encouragement ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-steps", children: steps.map((s) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-icon", children: s.icon }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-check", children: s.done && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
+}
+OnboardingChecklist.displayName = "OnboardingChecklist";

package/dist/cjs/product/onboarding/onboarding.recipe.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onboardingRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// An onboarding checklist card — measured from Attio's floating "Getting started"
+// widget: a title + menu/minimize header, a "N/total steps" subtitle, a
+// segmented progress bar (filled pills brand, rest 4% ink), then step rows with
+// an icon + label; completed rows strike through and show a brand check.
+const config = (0, core_1.defineRecipe)({
+    name: "onboarding",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 272px; padding: ${tokens_1.contract.space["3"]}; gap: ${tokens_1.contract.space["2"]};
+    border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+
+    & .onboarding-head { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; }
+    & .onboarding-title { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .onboarding-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: ${tokens_1.contract.size.chip}; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .onboarding-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+
+    & .onboarding-sub { font-size: ${tokens_1.contract.text.sm}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); }
+    & .onboarding-sub b { font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+
+    & .onboarding-progress { display: flex; gap: ${tokens_1.contract.space["1"]}; margin: ${tokens_1.contract.space["0.5"]} 0 ${tokens_1.contract.space["1"]}; }
+    & .onboarding-seg { flex: 1; height: 4px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); transition: background-color .2s ease; }
+    & .onboarding-seg[data-done] { background: ${tokens_1.contract.bgBrandSolid}; }
+
+    & .onboarding-steps { display: flex; flex-direction: column; }
+    & .onboarding-step { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding: 0 ${tokens_1.contract.space["1"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .onboarding-step:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .onboarding-step-icon { display: inline-flex; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .onboarding-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .onboarding-step-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.full}; color: transparent; }
+    & .onboarding-step[data-done] { cursor: default; }
+    & .onboarding-step[data-done] .onboarding-step-icon, & .onboarding-step[data-done] .onboarding-step-label { color: ${tokens_1.contract.fgMuted}; text-decoration: line-through; }
+    & .onboarding-step[data-done]:hover { background: none; }
+    & .onboarding-step[data-done] .onboarding-step-check { background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.onboardingRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/recordpage/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recordpageRecipe = exports.RecordPage = void 0;
+var recordpage_1 = require("./recordpage");
+Object.defineProperty(exports, "RecordPage", { enumerable: true, get: function () { return recordpage_1.RecordPage; } });
+var recordpage_recipe_1 = require("./recordpage.recipe");
+Object.defineProperty(exports, "recordpageRecipe", { enumerable: true, get: function () { return recordpage_recipe_1.recordpageRecipe; } });