@crisp-ui-kit/crisp 0.2.0 → 0.7.0

package/dist/dialog.css

@@ -2,18 +2,26 @@
   display: contents; font-family: var(--font-sans);
     & .dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
     & .dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--space-4) var(--space-4); }
-    & .dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: var(--space-1); border-radius: var(--radius-2xl); background: var(--bg-raised); box-shadow: 0 8px 28px -6px rgba(28,40,64,0.12), 0 18px 88px -4px rgba(28,40,64,0.16), 0 0 1px rgba(28,40,64,0.16); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: var(--space-1); border-radius: var(--radius-2xl); background: color-mix(in srgb, var(--bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--shadow-overlay1), 0 18px 88px -4px var(--shadow-overlay2), 0 0 1px var(--shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
     & .dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg-primary) 8%, transparent); overflow: hidden; }
     & .dialog-header { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: 52px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
     & .dialog-header svg { flex-shrink: 0; color: var(--fg-muted); }
     & .dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); }
-    & .dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; }
     & .dialog-close:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
     & .dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-4); }
     & .dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-shrink: 0; min-height: 56px; padding: 0 var(--space-4); border-top: 1px solid var(--border-subtle); }
     & .dialog-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
     & .dialog-field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 50%, transparent); }
-    & .dialog-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; font-size: var(--text-md); color: var(--fg-muted); }
+    & .dialog-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: var(--text-md); color: var(--fg-muted); cursor: pointer; }
     & .dialog-submit { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-1) 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-brand-solid); color: var(--fg-on-brand); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
     & .dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: rgba(255,255,255,0.22); font-size: var(--text-xs); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog, .dialog * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/donutchart.css

@@ -14,3 +14,11 @@
     & .donutchart-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); }
     & .donutchart-val { flex-shrink: 0; font-weight: var(--weight-medium); color: var(--fg-primary); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .donutchart, .donutchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/drawer.css

@@ -1,17 +1,25 @@
 .drawer {
   display: contents; font-family: var(--font-sans);
     & .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--fg-primary) 18%, transparent); opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
-    & .drawer-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .drawer-positioner { position: fixed; inset: 0; z-index: 61; display: flex; box-sizing: border-box; padding: var(--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; width: 420px; max-width: 92vw; height: 100%; background: var(--bg-surface); transform: none; transition: transform 0.24s cubic-bezier(.32,.72,0,1); }
-    & .drawer-positioner[data-side="right"] .drawer-content { box-shadow: -12px 0 32px -8px rgba(28,40,64,0.18); @starting-style { transform: translateX(100%); } }
-    & .drawer-positioner[data-side="left"] .drawer-content { box-shadow: 12px 0 32px -8px rgba(28,40,64,0.18); @starting-style { transform: translateX(-100%); } }
+    & .drawer-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: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3); 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% + var(--space-2))); } }
+    & .drawer-positioner[data-side="left"] .drawer-content { @starting-style { transform: translateX(calc(-100% - var(--space-2))); } }
     & .drawer-header { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: 52px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
     & .drawer-header svg { flex-shrink: 0; color: var(--fg-muted); }
     & .drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg-primary); }
-    & .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: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .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: var(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; }
     & .drawer-close:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
     & .drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); }
     & .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-shrink: 0; min-height: 56px; padding: 0 var(--space-4); border-top: 1px solid var(--border-subtle); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer, .drawer * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/entitycard.css

@@ -1,5 +1,5 @@
 .entitycard {
-  display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-width: 0; text-align: left;
+  display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-width: 0; text-align: start;
     padding: var(--space-3) var(--space-4); margin: 0; border: none; border-radius: var(--radius-xl);
     background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--fg-primary);
     font-family: var(--font-sans); cursor: pointer; transition: box-shadow .12s ease, background-color .12s ease;
@@ -14,5 +14,13 @@
     & .entitycard-spacer { flex: 1; min-height: var(--space-3); }
     & .entitycard-foot { display: flex; align-items: center; gap: var(--space-1-5); padding-top: var(--space-2-5); margin-top: var(--space-1); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--fg-muted); }
     & .entitycard-foot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-primary); }
-    & .entitycard-date { margin-left: auto; flex-shrink: 0; white-space: nowrap; }
+    & .entitycard-date { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .entitycard, .entitycard * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/dist/esm/components/accordion/accordion.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { accordionRecipe } from "./accordion.recipe.js";
+/**
+ * A collapsible section list — measured from Attio's sidebar groups. Single or
+ * multiple open; panels animate their height (grid-rows 0fr->1fr). Headers are
+ * buttons with `aria-expanded` / `aria-controls`.
+ */
+const toSet = (v) => new Set(v == null ? [] : Array.isArray(v) ? v : [v]);
+export function Accordion({ items, multiple, value, defaultValue, onValueChange, className, ...rest }) {
+    const [internal, setInternal] = React.useState(() => toSet(defaultValue));
+    // `value` present means the caller owns the open set; our own state is then
+    // never read, so a click can only change what is shown by going through
+    // onValueChange and coming back as a new `value`.
+    const open = value !== undefined ? toSet(value) : internal;
+    const toggle = (itemValue) => {
+        const next = new Set(multiple ? open : []);
+        if (open.has(itemValue))
+            next.delete(itemValue);
+        else
+            next.add(itemValue);
+        onValueChange?.(multiple ? [...next] : ([...next][0] ?? ""));
+        if (value === undefined)
+            setInternal(next);
+    };
+    return (_jsx("div", { className: accordionRecipe({ className }), ...rest, children: items.map((item) => {
+            const isOpen = open.has(item.value);
+            const panelId = `accordion-panel-${item.value}`;
+            return (_jsxs("div", { className: "accordion-item", children: [_jsxs("button", { type: "button", className: "accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [_jsx("span", { className: "accordion-title", children: item.title }), _jsx(ChevronDown, { className: "accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), _jsx("div", { id: panelId, className: "accordion-panel", role: "region", "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: _jsx("div", { className: "accordion-panel-inner", children: _jsx("div", { className: "accordion-content", children: item.content }) }) })] }, item.value));
+        }) }));
+}
+Accordion.displayName = "Accordion";

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

@@ -0,0 +1,23 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A stack of collapsible sections — Attio's sidebar sections / "view all".
+// The panel animates height via the grid-template-rows 0fr->1fr technique.
+const config = defineRecipe({
+    name: "accordion",
+    base: `display: flex; flex-direction: column; font-family: ${c.font.sans};
+    & .accordion-item { border-bottom: 1px solid ${c.borderSubtle}; }
+    & .accordion-trigger { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: 44px; padding: 0 ${c.space["1"]}; margin: 0; border: none; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; text-align: start; cursor: pointer; }
+    & .accordion-trigger:hover { color: ${c.fgPrimary}; }
+    & .accordion-title { flex: 1; min-width: 0; }
+    & .accordion-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .2s ease; }
+    & .accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
+    & .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
+    & .accordion-panel[data-open] { grid-template-rows: 1fr; }
+    & .accordion-panel-inner { overflow: hidden; }
+    & .accordion-content { padding: 0 ${c.space["1"]} ${c.space["3"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const accordionRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Accordion, } from "./accordion.js";
+export { accordionRecipe } from "./accordion.recipe.js";

package/dist/esm/components/avatar/avatar.js

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

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

@@ -0,0 +1,39 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+const config = defineRecipe({
+    name: "avatar",
+    base: `display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: ${c.font.sans}; font-weight: ${c.weight.semibold}; overflow: hidden; user-select: none; & img { width: 100%; height: 100%; object-fit: cover; }`,
+    variants: {
+        size: {
+            sm: `height: 16px; width: 16px; font-size: 9px;`,
+            md: `height: 20px; width: 20px; font-size: 10px;`,
+            lg: `height: 24px; width: 24px; font-size: ${c.text.sm};`,
+            xl: `height: 32px; width: 32px; font-size: ${c.text.lg};`,
+        },
+        shape: {
+            circle: `border-radius: ${c.radius.full};`,
+            rounded: `border-radius: 30%;`,
+        },
+        tone: {
+            neutral: `background: ${c.bgRaised}; color: ${c.fgMuted}; box-shadow: inset 0 0 0 1px ${c.borderDefault};`,
+            brand: `background: ${c.bgBrandSolid}; color: #fff;`,
+            orange: `background: ${c.bgOrange}; color: #fff;`,
+            cyan: `background: ${c.bgCyan}; color: #fff;`,
+            purple: `background: ${c.bgPurple}; color: #fff;`,
+            green: `background: ${c.bgSuccess}; color: #fff;`,
+        },
+    },
+    defaultVariants: { size: "md", shape: "circle", tone: "neutral" },
+    compoundVariants: [],
+});
+export const avatarRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: {
+        lg: {
+            height: "24px",
+            fontSize: "12px",
+            fontWeight: "600",
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Avatar } from "./avatar.js";
+export { avatarRecipe } from "./avatar.recipe.js";

package/dist/esm/components/avatargroup/avatargroup.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Avatar } from "../avatar/avatar.js";
+import { avatargroupRecipe } from "./avatargroup.recipe.js";
+/**
+ * A stack of overlapping avatars with an optional "+N" overflow chip — measured
+ * from Attio's team / member rows. Pass `<Avatar>` children; each is ringed in
+ * the surface colour so it reads against its neighbour.
+ */
+export function AvatarGroup({ children, max, size = "md", className, "aria-label": ariaLabel, ...rest }) {
+    const items = React.Children.toArray(children);
+    const shown = max != null ? items.slice(0, max) : items;
+    const overflow = items.length - shown.length;
+    return (_jsxs("div", { className: avatargroupRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: [shown, overflow > 0 && (_jsxs(Avatar, { size: size, shape: "circle", tone: "neutral", children: ["+", overflow] }))] }));
+}
+AvatarGroup.displayName = "AvatarGroup";

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

@@ -0,0 +1,15 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A row of overlapping avatars — each ringed in the surface colour so it reads
+// against its neighbour, with a "+N" overflow chip.
+const config = defineRecipe({
+    name: "avatargroup",
+    base: `display: inline-flex; align-items: center;
+    & > * { margin-inline-start: -${c.space["2"]}; box-shadow: 0 0 0 2px ${c.bgSurface}; position: relative; }
+    & > *:first-child { margin-inline-start: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const avatargroupRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { AvatarGroup } from "./avatargroup.js";
+export { avatargroupRecipe } from "./avatargroup.recipe.js";

package/dist/esm/components/badge/badge.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { badgeRecipe } from "./badge.recipe.js";
+export const Badge = React.forwardRef(({ tone, size, variant, className, asChild, dot, children, ...props }, ref) => {
+    return (_jsxs(Primitive.span, { ref: ref, asChild: asChild, className: badgeRecipe({ tone, size, variant, className }), ...props, children: [dot && _jsx("span", { className: "badge-dot", "aria-hidden": "true" }), children] }));
+});
+Badge.displayName = "Badge";

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

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

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

@@ -0,0 +1,2 @@
+export { Badge } from "./badge.js";
+export { badgeRecipe } from "./badge.recipe.js";

package/dist/esm/components/barchart/barchart.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { contract as c } from "../../tokens/index.js";
+import { barchartRecipe } from "./barchart.recipe.js";
+// 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.
+ */
+export 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 + ${c.space["4"]})`;
+    const summary = ariaLabel ??
+        `Bar chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
+    return (_jsxs("div", { className: barchartRecipe({ className }), ...rest, style: {
+            height,
+            "--barchart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "barchart-body", children: [_jsx("div", { className: "barchart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "barchart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "barchart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "barchart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), data.map((d) => (_jsx("div", { className: "barchart-col", children: _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)))] })] }), _jsx("div", { className: "barchart-xaxis", "data-inset": "", children: data.map((d) => (_jsx("span", { className: "barchart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && (_jsx("div", { className: "barchart-axis-title", children: xAxisTitle }))] }));
+}
+BarChart.displayName = "BarChart";

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

@@ -0,0 +1,31 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = 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: ${c.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: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .barchart-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: ${c.space["3"]}; border-bottom: 1px solid ${c.borderDefault}; }
+    & .barchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.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: ${c.radius.sm} ${c.radius.sm} 0 0; background: ${c.bgBrandSolid}; transition: height 0.3s ease; }
+    & .barchart-bar[data-empty] { min-height: 2px; opacity: 0.35; }
+    & .barchart-xaxis { display: flex; gap: ${c.space["3"]}; margin-top: ${c.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: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .barchart-axis-title { margin-top: ${c.space["1"]}; padding-inline-start: var(--barchart-yaxis-width); text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const barchartRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { BarChart } from "./barchart.js";
+export { barchartRecipe } from "./barchart.recipe.js";

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import * as React from "react";
+import { breadcrumbRecipe } from "./breadcrumb.recipe.js";
+/**
+ * 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.
+ */
+export function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
+    const sep = separator ?? (_jsx(ChevronRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
+    return (_jsx("nav", { "aria-label": ariaLabel, className: breadcrumbRecipe({ className }), ...rest, children: items.map((item, i) => {
+            const last = i === items.length - 1;
+            const content = (_jsxs(_Fragment, { children: [item.icon, item.label] }));
+            return (_jsxs(React.Fragment, { children: [last ? (_jsx("span", { className: "breadcrumb-item", "aria-current": "page", children: content })) : item.href ? (_jsx("a", { className: "breadcrumb-item", href: item.href, children: content })) : (_jsx("button", { type: "button", className: "breadcrumb-item", onClick: item.onClick, children: content })), !last && _jsx("span", { className: "breadcrumb-sep", children: sep })] }, i));
+        }) }));
+}
+Breadcrumb.displayName = "Breadcrumb";

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

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

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

@@ -0,0 +1,2 @@
+export { Breadcrumb, } from "./breadcrumb.js";
+export { breadcrumbRecipe } from "./breadcrumb.recipe.js";

package/dist/esm/components/bulkbar/bulkbar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import * as React from "react";
+import { bulkbarRecipe } from "./bulkbar.recipe.js";
+/**
+ * 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.
+ */
+export function BulkBar({ count, onClear, countLabel = "selected", children, className, clearLabel = "Clear selection", ...rest }) {
+    return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "bulkbar-bar", role: "status", children: [count != null && (_jsxs("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [count, " ", countLabel, _jsx(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). */
+export const BulkBarButton = React.forwardRef(({ icon, danger, className, children, type, ...props }, ref) => (_jsxs("button", { ref: ref, type: type ?? "button", className: `bulkbar-btn${danger ? " bulkbar-btn--danger" : ""}${className ? ` ${className}` : ""}`, ...props, children: [icon, children] })));
+BulkBarButton.displayName = "BulkBarButton";

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

@@ -0,0 +1,28 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "bulkbar",
+    base: `position: absolute; left: 0; right: 0; bottom: ${c.space["4"]}; display: flex; justify-content: center; pointer-events: none; z-index: 10;
+    & .bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: ${c.space["0.5"]}; height: 48px; padding: 0 ${c.space["1"]} 0 ${c.space["1.5"]}; border-radius: 14px; background: ${c.bgSurface}; box-shadow: ${e.floating}; color: ${c.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: ${c.space["1"]}; height: ${c.size.menuRow}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-count:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); color: ${c.fgPrimary}; }
+    & .bulkbar-count svg { flex-shrink: 0; }
+    & .bulkbar-btn { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.menuRow}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-btn:hover { background: ${c.bgRaised}; }
+    & .bulkbar-btn--danger { color: ${c.bgDanger}; }
+    & .bulkbar-btn--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .bulkbar-btn svg { flex-shrink: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const bulkbarRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { BulkBar, BulkBarButton, } from "./bulkbar.js";
+export { bulkbarRecipe } from "./bulkbar.recipe.js";

package/dist/esm/components/button/button.js

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { buttonRecipe } from "./button.recipe.js";
+/** Self-animating SVG spinner (no CSS keyframes needed). Sizes to 1em. */
+function Spinner() {
+    return (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { flexShrink: 0 }, children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }), _jsx("path", { d: "M8 1.5a6.5 6.5 0 0 1 6.5 6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 8 8", to: "360 8 8", dur: "0.7s", repeatCount: "indefinite" }) })] }));
+}
+export const 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 ? (_jsxs(_Fragment, { children: [_jsx(Spinner, {}), children] })) : (children);
+    return (_jsx(Primitive.button, { ref: ref, asChild: asChild, className: 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 }));
+});
+Button.displayName = "Button";

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

@@ -0,0 +1,55 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+const config = defineRecipe({
+    name: "button",
+    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; font-family: ${c.font.sans}; font-weight: ${c.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: ${c.bgBrandSolid}; color: ${c.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: ${c.bgBrandSolidPressed}; } &:active { background: ${c.bgBrandSolidPressed}; }`,
+            neutral: `background: ${c.bgSurface}; color: ${c.fgPrimary}; box-shadow: ${e.field}; &:hover { background: ${c.bgRaised}; }`,
+            danger: `background: ${c.bgDangerSolid}; color: ${c.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: ${c.fgMuted}; box-shadow: none; &:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }`,
+        },
+        size: {
+            sm: `height: 24px; padding-inline: ${c.space["1.5"]}; font-size: ${c.text.md}; border-radius: ${c.radius.md};`,
+            md: `height: 28px; padding-inline: ${c.space["2"]}; font-size: ${c.text.lg}; border-radius: ${c.radius.md};`,
+            lg: `height: 40px; padding-inline: 14px; font-size: ${c.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: [],
+});
+export const buttonRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: {
+        primary: {
+            height: "28px",
+            borderRadius: "8px",
+            fontWeight: "500",
+            fontSize: "14px",
+            background: "rgb(38, 109, 240)",
+            color: "rgb(255, 255, 255)",
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Button } from "./button.js";
+export { buttonRecipe } from "./button.recipe.js";