@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatargroupRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A row of overlapping avatars — each ringed in the surface colour so it reads
+// against its neighbour, with a "+N" overflow chip.
+const config = (0, core_1.defineRecipe)({
+    name: "avatargroup",
+    base: `display: inline-flex; align-items: center;
+    & > * { margin-inline-start: -${tokens_1.contract.space["2"]}; box-shadow: 0 0 0 2px ${tokens_1.contract.bgSurface}; position: relative; }
+    & > *:first-child { margin-inline-start: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.avatargroupRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatargroupRecipe = exports.AvatarGroup = void 0;
+var avatargroup_1 = require("./avatargroup");
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return avatargroup_1.AvatarGroup; } });
+var avatargroup_recipe_1 = require("./avatargroup.recipe");
+Object.defineProperty(exports, "avatargroupRecipe", { enumerable: true, get: function () { return avatargroup_recipe_1.avatargroupRecipe; } });

package/dist/cjs/components/badge/badge.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.Badge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const badge_recipe_1 = require("./badge.recipe");
+exports.Badge = React.forwardRef(({ tone, size, variant, className, asChild, dot, children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, badge_recipe_1.badgeRecipe)({ tone, size, variant, className }), ...props, children: [dot && (0, jsx_runtime_1.jsx)("span", { className: "badge-dot", "aria-hidden": "true" }), children] }));
+});
+exports.Badge.displayName = "Badge";

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+const config = (0, core_1.defineRecipe)({
+    name: "badge",
+    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1"]}; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.1px; white-space: nowrap;
+    & .badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.full}; background: currentColor; }`,
+    variants: {
+        tone: {
+            neutral: `background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgMuted}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault};`,
+            brand: `background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: ${tokens_1.contract.bgBrandSolid}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent);`,
+            success: `background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 14%, transparent); color: ${tokens_1.contract.bgSuccess}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgSuccess} 30%, transparent);`,
+            warning: `background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 16%, transparent); color: ${tokens_1.contract.bgWarning}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgWarning} 32%, transparent);`,
+            danger: `background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 14%, transparent); color: ${tokens_1.contract.bgDanger}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgDanger} 30%, transparent);`,
+        },
+        size: {
+            small: `height: 16px; padding-inline: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.xs}; border-radius: ${tokens_1.contract.radius.sm};`,
+            medium: `height: 20px; padding-inline: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.sm}; border-radius: ${tokens_1.contract.radius.sm};`,
+            large: `height: ${tokens_1.contract.size.chip}; padding-inline: 9px; font-size: ${tokens_1.contract.text.lg}; border-radius: ${tokens_1.contract.radius.chip};`,
+        },
+        variant: {
+            soft: ``,
+            solid: ``,
+        },
+    },
+    defaultVariants: { tone: "neutral", size: "medium", variant: "soft" },
+    compoundVariants: [
+        {
+            variant: "solid",
+            tone: "brand",
+            css: `background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: none;`,
+        },
+        {
+            variant: "solid",
+            tone: "success",
+            css: `background: ${tokens_1.contract.bgSuccess}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+        },
+        {
+            variant: "solid",
+            tone: "warning",
+            css: `background: ${tokens_1.contract.bgWarning}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+        },
+        {
+            variant: "solid",
+            tone: "danger",
+            css: `background: ${tokens_1.contract.bgDanger}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+        },
+        {
+            variant: "solid",
+            tone: "neutral",
+            css: `background: ${tokens_1.contract.fgMuted}; color: ${tokens_1.contract.bgSurface}; box-shadow: none;`,
+        },
+    ],
+});
+exports.badgeRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: {
+        medium: {
+            height: "20px",
+            borderRadius: "6px",
+            fontSize: "12px",
+            fontWeight: "500",
+        },
+    },
+});
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeRecipe = exports.Badge = void 0;
+var badge_1 = require("./badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });
+var badge_recipe_1 = require("./badge.recipe");
+Object.defineProperty(exports, "badgeRecipe", { enumerable: true, get: function () { return badge_recipe_1.badgeRecipe; } });

package/dist/cjs/components/barchart/barchart.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = BarChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tokens_1 = require("../../tokens");
+const barchart_recipe_1 = require("./barchart.recipe");
+// round up to a friendly 1/2/5 × 10^n value (for tick steps)
+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 bar chart — measured from Attio's Reports dashboard. Pure CSS, so
+ * it scales with its container. Renders `role="img"` with an accessible summary.
+ */
+function BarChart({ data, height = 240, max, ticks = 5, color, format = (n) => n.toLocaleString(), yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }) {
+    const rawMax = Math.max(1, ...data.map((d) => d.value));
+    // pick a nice step so the top tick is round and >= the data max
+    const step = max ? max / (ticks - 1) : niceNum(rawMax / (ticks - 1));
+    const top = step * (ticks - 1);
+    const tickValues = Array.from({ length: ticks }, (_, i) => step * i);
+    // The value-axis gutter must fit whatever `format` actually returns — a
+    // hardcoded width fits "4.0k" but not "4,000,000₮". `ch` is the width of
+    // "0" in the current font, so sizing off the longest formatted tick tracks
+    // the real label width without measuring the DOM (works during SSR, no
+    // ResizeObserver). `yAxisWidth` lets a caller pin the gutter instead.
+    const longestTickChars = Math.max(0, ...tickValues.map((t) => format(t).length));
+    const yAxisWidthValue = yAxisWidth != null
+        ? `${yAxisWidth}px`
+        : `max(34px, ${longestTickChars}ch + ${tokens_1.contract.space["4"]})`;
+    const summary = ariaLabel ??
+        `Bar chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, barchart_recipe_1.barchartRecipe)({ className }), ...rest, style: {
+            height,
+            "--barchart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "barchart-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "barchart-yaxis", children: tickValues.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "barchart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), (0, jsx_runtime_1.jsxs)("div", { className: "barchart-plot", children: [tickValues.map((t) => ((0, jsx_runtime_1.jsx)("div", { className: "barchart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), data.map((d) => ((0, jsx_runtime_1.jsx)("div", { className: "barchart-col", children: (0, jsx_runtime_1.jsx)("div", { className: "barchart-bar", "data-empty": d.value <= 0 ? "" : undefined, style: {
+                                        height: `${Math.max(0, (d.value / top) * 100)}%`,
+                                        background: color,
+                                    }, title: `${d.label}: ${format(d.value)}` }) }, d.label)))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "barchart-xaxis", "data-inset": "", children: data.map((d) => ((0, jsx_runtime_1.jsx)("span", { className: "barchart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "barchart-axis-title", children: xAxisTitle }))] }));
+}
+BarChart.displayName = "BarChart";

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.barchartRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A responsive bar chart — measured from Attio's Reports dashboard: brand bars
+// with rounded tops over dashed horizontal gridlines, a value axis on the left,
+// and category labels below. Pure CSS (no SVG), so it scales with its container.
+const config = (0, core_1.defineRecipe)({
+    name: "barchart",
+    // --barchart-yaxis-width is the one source of truth for the value-axis
+    // gutter: the component sets it (auto-sized to the longest tick label, or
+    // pinned via `yAxisWidth`) on the root element, and it inherits down to the
+    // x-axis padding and axis title so they never drift out of alignment. 34px
+    // is only the pre-JS fallback (e.g. if `barchartRecipe` is used bare).
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; --barchart-yaxis-width: 34px;
+    & .barchart-body { display: flex; flex: 1; min-height: 0; }
+    & .barchart-yaxis { position: relative; flex-shrink: 0; width: var(--barchart-yaxis-width); }
+    & .barchart-ytick { position: absolute; inset-inline-end: ${tokens_1.contract.space["2"]}; transform: translateY(50%); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .barchart-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderDefault}; }
+    & .barchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${tokens_1.contract.borderSubtle}; pointer-events: none; }
+    & .barchart-col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
+    & .barchart-bar { width: 100%; max-width: 96px; border-radius: ${tokens_1.contract.radius.sm} ${tokens_1.contract.radius.sm} 0 0; background: ${tokens_1.contract.bgBrandSolid}; transition: height 0.3s ease; }
+    & .barchart-bar[data-empty] { min-height: 2px; opacity: 0.35; }
+    & .barchart-xaxis { display: flex; gap: ${tokens_1.contract.space["3"]}; margin-top: ${tokens_1.contract.space["1.5"]}; }
+    & .barchart-xaxis[data-inset] { padding-inline-start: var(--barchart-yaxis-width); }
+    & .barchart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .barchart-axis-title { margin-top: ${tokens_1.contract.space["1"]}; padding-inline-start: var(--barchart-yaxis-width); text-align: center; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.barchartRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.barchartRecipe = exports.BarChart = void 0;
+var barchart_1 = require("./barchart");
+Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return barchart_1.BarChart; } });
+var barchart_recipe_1 = require("./barchart.recipe");
+Object.defineProperty(exports, "barchartRecipe", { enumerable: true, get: function () { return barchart_recipe_1.barchartRecipe; } });

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,53 @@
+"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.Breadcrumb = Breadcrumb;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const breadcrumb_recipe_1 = require("./breadcrumb.recipe");
+/**
+ * A breadcrumb trail — measured from Attio's record-page nav. The last item is
+ * marked `aria-current="page"`; earlier items render as links or buttons.
+ */
+function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
+    const sep = separator ?? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
+    return ((0, jsx_runtime_1.jsx)("nav", { "aria-label": ariaLabel, className: (0, breadcrumb_recipe_1.breadcrumbRecipe)({ className }), ...rest, children: items.map((item, i) => {
+            const last = i === items.length - 1;
+            const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon, item.label] }));
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [last ? ((0, jsx_runtime_1.jsx)("span", { className: "breadcrumb-item", "aria-current": "page", children: content })) : item.href ? ((0, jsx_runtime_1.jsx)("a", { className: "breadcrumb-item", href: item.href, children: content })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "breadcrumb-item", onClick: item.onClick, children: content })), !last && (0, jsx_runtime_1.jsx)("span", { className: "breadcrumb-sep", children: sep })] }, i));
+        }) }));
+}
+Breadcrumb.displayName = "Breadcrumb";

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A breadcrumb trail — Attio's record-page nav ("Companies / Google").
+const config = (0, core_1.defineRecipe)({
+    name: "breadcrumb",
+    base: `display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg};
+    & .breadcrumb-item { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; height: 24px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; color: ${tokens_1.contract.fgMuted}; text-decoration: none; white-space: nowrap; }
+    & .breadcrumb-item svg { flex-shrink: 0; }
+    & a.breadcrumb-item:hover, & button.breadcrumb-item:hover { color: ${tokens_1.contract.fgPrimary}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); }
+    & button.breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
+    & .breadcrumb-item[aria-current] { color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.breadcrumbRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbRecipe = exports.Breadcrumb = void 0;
+var breadcrumb_1 = require("./breadcrumb");
+Object.defineProperty(exports, "Breadcrumb", { enumerable: true, get: function () { return breadcrumb_1.Breadcrumb; } });
+var breadcrumb_recipe_1 = require("./breadcrumb.recipe");
+Object.defineProperty(exports, "breadcrumbRecipe", { enumerable: true, get: function () { return breadcrumb_recipe_1.breadcrumbRecipe; } });

package/dist/cjs/components/bulkbar/bulkbar.js

@@ -0,0 +1,53 @@
+"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.BulkBarButton = void 0;
+exports.BulkBar = BulkBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const bulkbar_recipe_1 = require("./bulkbar.recipe");
+/**
+ * A floating bulk-action bar. Rises from the bottom-centre of its nearest
+ * positioned ancestor when a selection is active; render it conditionally
+ * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
+ */
+function BulkBar({ count, onClear, countLabel = "selected", children, className, clearLabel = "Clear selection", ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, bulkbar_recipe_1.bulkbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "bulkbar-bar", role: "status", children: [count != null && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [count, " ", countLabel, (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
+}
+BulkBar.displayName = "BulkBar";
+/** A styled action button for use inside a `<BulkBar>` (or as a `<Menu>` trigger). */
+exports.BulkBarButton = React.forwardRef(({ icon, danger, className, children, type, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: type ?? "button", className: `bulkbar-btn${danger ? " bulkbar-btn--danger" : ""}${className ? ` ${className}` : ""}`, ...props, children: [icon, children] })));
+exports.BulkBarButton.displayName = "BulkBarButton";

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bulkbarRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A floating bulk-action bar — the pill that rises from the bottom of a
+// selection surface (a table, a gallery) when one or more rows are selected.
+// Measured from Attio's records-table bulk bar. The root is an absolutely-
+// positioned anchor that centres the bar with flex (NOT a transform): a resting
+// transform on the bar would reparent any `position: fixed` menu inside it (the
+// "More" overflow), detaching it — the enter slide lives in @starting-style only.
+// Needs a `position: relative` ancestor (a table/gallery container).
+const config = (0, core_1.defineRecipe)({
+    name: "bulkbar",
+    base: `position: absolute; left: 0; right: 0; bottom: ${tokens_1.contract.space["4"]}; display: flex; justify-content: center; pointer-events: none; z-index: 10;
+    & .bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; height: 48px; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["1.5"]}; border-radius: 14px; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.floating}; color: ${tokens_1.contract.fgPrimary}; transition: opacity .16s ease, transform .16s ease; }
+    & .bulkbar-bar { @starting-style { opacity: 0; transform: translateY(10px); } }
+    & .bulkbar-count { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.menuRow}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-count:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .bulkbar-count svg { flex-shrink: 0; }
+    & .bulkbar-btn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-btn:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .bulkbar-btn--danger { color: ${tokens_1.contract.bgDanger}; }
+    & .bulkbar-btn--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    & .bulkbar-btn svg { flex-shrink: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.bulkbarRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bulkbarRecipe = exports.BulkBarButton = exports.BulkBar = void 0;
+var bulkbar_1 = require("./bulkbar");
+Object.defineProperty(exports, "BulkBar", { enumerable: true, get: function () { return bulkbar_1.BulkBar; } });
+Object.defineProperty(exports, "BulkBarButton", { enumerable: true, get: function () { return bulkbar_1.BulkBarButton; } });
+var bulkbar_recipe_1 = require("./bulkbar.recipe");
+Object.defineProperty(exports, "bulkbarRecipe", { enumerable: true, get: function () { return bulkbar_recipe_1.bulkbarRecipe; } });

package/dist/cjs/components/button/button.js

@@ -0,0 +1,62 @@
+"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.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const button_recipe_1 = require("./button.recipe");
+/** Self-animating SVG spinner (no CSS keyframes needed). Sizes to 1em. */
+function Spinner() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { flexShrink: 0 }, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 1.5a6.5 6.5 0 0 1 6.5 6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 8 8", to: "360 8 8", dur: "0.7s", repeatCount: "indefinite" }) })] }));
+}
+exports.Button = React.forwardRef(({ intent, size, shape, touchTarget, className, asChild, loading, disabled, children, type, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    // Slot (asChild) requires a single child — never inject the spinner in that mode.
+    const content = loading && !asChild ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner, {}), children] })) : (children);
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.button, { ref: ref, asChild: asChild, className: (0, button_recipe_1.buttonRecipe)({
+            intent,
+            size,
+            shape,
+            touchTarget,
+            className,
+        }), 
+        // A bare <button> inside a <form> defaults to type="submit". Nothing in
+        // a design system should submit a form by accident, so default to
+        // "button" and make submitting explicit. `asChild` renders someone
+        // else's element, which must not be given a button-only attribute.
+        type: asChild ? type : (type ?? "button"), disabled: isDisabled, "aria-busy": loading || undefined, "data-loading": loading ? "" : undefined, ...props, children: content }));
+});
+exports.Button.displayName = "Button";

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+const config = (0, core_1.defineRecipe)({
+    name: "button",
+    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; line-height: 20px; white-space: nowrap; border: none; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; &:disabled { opacity: 0.5; cursor: not-allowed; }`,
+    variants: {
+        intent: {
+            primary: `background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); &:hover { background: ${tokens_1.contract.bgBrandSolidPressed}; } &:active { background: ${tokens_1.contract.bgBrandSolidPressed}; }`,
+            neutral: `background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; box-shadow: ${tokens_1.elevation.field}; &:hover { background: ${tokens_1.contract.bgRaised}; }`,
+            danger: `background: ${tokens_1.contract.bgDangerSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12); &:hover { filter: brightness(0.96); } &:active { filter: brightness(0.92); }`,
+            ghost: `background: transparent; color: ${tokens_1.contract.fgMuted}; box-shadow: none; &:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }`,
+        },
+        size: {
+            sm: `height: 24px; padding-inline: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.md}; border-radius: ${tokens_1.contract.radius.md};`,
+            md: `height: 28px; padding-inline: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.lg}; border-radius: ${tokens_1.contract.radius.md};`,
+            lg: `height: 40px; padding-inline: 14px; font-size: ${tokens_1.contract.text.lg}; border-radius: 10px;`,
+        },
+        shape: {
+            text: ``,
+            icon: `padding-inline: 0; aspect-ratio: 1 / 1;`,
+        },
+        // Opt-in hit-area expansion (crisp/#62): none of sm/md/lg reaches the
+        // 44x44 touch-target minimum (Apple HIG / Material), and enlarging the
+        // visual sizes isn't an option — crisp is deliberately dense. A
+        // `::after` overlay grows the *clickable* region from the button's
+        // centre without reflow, so the rendered size/position never changes.
+        // Opt-in rather than always-on: an always-on overlay would swallow
+        // clicks meant for a neighbour in a toolbar packed tighter than 44px.
+        touchTarget: {
+            true: `position: relative; &::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; }`,
+            false: ``,
+        },
+    },
+    defaultVariants: {
+        intent: "primary",
+        size: "md",
+        shape: "text",
+        touchTarget: false,
+    },
+    compoundVariants: [],
+});
+exports.buttonRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: {
+        primary: {
+            height: "28px",
+            borderRadius: "8px",
+            fontWeight: "500",
+            fontSize: "14px",
+            background: "rgb(38, 109, 240)",
+            color: "rgb(255, 255, 255)",
+        },
+    },
+});
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonRecipe = exports.Button = void 0;
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+var button_recipe_1 = require("./button.recipe");
+Object.defineProperty(exports, "buttonRecipe", { enumerable: true, get: function () { return button_recipe_1.buttonRecipe; } });

package/dist/cjs/components/callout/callout.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Callout = Callout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const callout_recipe_1 = require("./callout.recipe");
+const DEFAULT_ICONS = {
+    neutral: lucide_react_1.Info,
+    info: lucide_react_1.Info,
+    success: lucide_react_1.CircleCheck,
+    warning: lucide_react_1.TriangleAlert,
+    danger: lucide_react_1.CircleAlert,
+};
+/**
+ * An inline callout / banner — measured from Attio's info notices. `tone` tints
+ * the background and icon; pass a `title` and/or body `children`.
+ */
+function Callout({ tone = "neutral", icon, title, children, action, className, ...rest }) {
+    const Fallback = DEFAULT_ICONS[tone];
+    const iconNode = icon === undefined
+        ? Fallback && (0, jsx_runtime_1.jsx)(Fallback, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
+        : icon;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, callout_recipe_1.calloutRecipe)({ className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && (0, jsx_runtime_1.jsx)("span", { className: "callout-icon", children: iconNode }), (0, jsx_runtime_1.jsxs)("div", { className: "callout-body", children: [title != null && (0, jsx_runtime_1.jsx)("div", { className: "callout-title", children: title }), children != null && (0, jsx_runtime_1.jsx)("div", { className: "callout-desc", children: children })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "callout-action", children: action })] }));
+}
+Callout.displayName = "Callout";

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calloutRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A callout / banner — Attio's inline info notices (e.g. "Changes apply to all
+// workspaces", the trial banner). Tone tints the background + icon.
+const config = (0, core_1.defineRecipe)({
+    name: "callout",
+    base: `display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border-radius: ${tokens_1.contract.radius.lg}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary};
+    & .callout-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${tokens_1.contract.fgMuted}; }
+    & .callout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .callout-title { font-weight: ${tokens_1.contract.weight.semibold}; }
+    & .callout-desc { color: ${tokens_1.contract.fgMuted}; }
+    & .callout-action { flex-shrink: 0; }
+    &[data-tone="info"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 8%, transparent); }
+    &[data-tone="info"] .callout-icon { color: ${tokens_1.contract.bgBrandSolid}; }
+    &[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 10%, transparent); }
+    &[data-tone="success"] .callout-icon { color: ${tokens_1.contract.bgSuccess}; }
+    &[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 12%, transparent); }
+    &[data-tone="warning"] .callout-icon { color: ${tokens_1.contract.bgWarning}; }
+    &[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    &[data-tone="danger"] .callout-icon { color: ${tokens_1.contract.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.calloutRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calloutRecipe = exports.Callout = void 0;
+var callout_1 = require("./callout");
+Object.defineProperty(exports, "Callout", { enumerable: true, get: function () { return callout_1.Callout; } });
+var callout_recipe_1 = require("./callout.recipe");
+Object.defineProperty(exports, "calloutRecipe", { enumerable: true, get: function () { return callout_recipe_1.calloutRecipe; } });