@crisp-ui-kit/crisp 0.2.0 → 0.5.0

package/README.md

@@ -30,9 +30,15 @@ Import the stylesheet **once** at your app root, then use components anywhere:
 
 ```tsx
 // app entry (main.tsx / layout.tsx)
+import "@crisp-ui-kit/crisp/base.css"; // optional app baseline
 import "@crisp-ui-kit/crisp/styles.css";
 ```
 
+`base.css` is optional: it sets `body`'s font, background, and text color from
+crisp's own tokens (plus box-sizing and `color-scheme`), so a fresh app doesn't
+render Times New Roman on a transparent background. Import it first, before
+`styles.css`.
+
 ```tsx
 import { Button, Badge, EmptyState } from "@crisp-ui-kit/crisp";
 

package/dist/base.css

@@ -0,0 +1,25 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--text-lg);
+  line-height: 20px;
+  background: var(--bg-surface);
+  color: var(--fg-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* crisp's dark theme is opt-in via [data-theme="dark"] (there is no
+   prefers-color-scheme block in styles.css), so the untagged default must be
+   light — otherwise a dark-set OS paints native controls, scrollbars and
+   autofill dark on crisp's light surface. */
+:root {
+  color-scheme: light;
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}

package/dist/button.css

@@ -5,7 +5,7 @@
   background: var(--bg-brand-solid); color: var(--fg-on-brand); 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: var(--bg-brand-solid-pressed); } &:active { background: var(--bg-brand-solid-pressed); }
 }
 .button--intent_neutral {
-  background: var(--bg-surface); color: var(--fg-primary); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); &:hover { background: var(--bg-raised); }
+  background: var(--bg-surface); color: var(--fg-primary); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); &:hover { background: var(--bg-raised); }
 }
 .button--intent_danger {
   background: var(--bg-danger); color: var(--fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(229,72,77,0.20), 0 3px 6px -2px rgba(229,72,77,0.12); &:hover { filter: brightness(0.96); } &:active { filter: brightness(0.92); }

package/dist/command.css

@@ -1,3 +1,3 @@
 .command {
-  display: contents; font-family: var(--font-sans); & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; } & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--space-4) var(--space-4); } & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; 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); } } & .command-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; } & .command-control { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--fg-muted); } & .command-control svg { flex-shrink: 0; } & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-xl); color: var(--fg-primary); } & .command-input::placeholder { color: var(--fg-muted); } & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-px); } & .command-empty { padding: var(--space-8) var(--space-3); text-align: center; font-size: var(--text-md); color: var(--fg-muted); } & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding-inline: var(--space-2-5); border-radius: var(--radius-xl); font-size: var(--text-lg); color: var(--fg-primary); cursor: pointer; } & .command-item svg { flex-shrink: 0; color: var(--fg-muted); } & .command-item[data-highlighted] { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); } & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .command-item-shortcut { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-0-5); } & .command-group-label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); } & .command-list > .command-group-label:first-child { padding-top: var(--space-1); } & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--space-2-5); border-top: 1px solid var(--border-subtle); } & .command-footer-nav { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); } & .command-footer-action { display: flex; align-items: center; gap: var(--space-2); height: 28px; max-width: 60%; 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; } & .command-footer-action:disabled { opacity: 0.5; cursor: default; } & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: rgba(255,255,255,0.22); font-size: var(--text-xs); }
+  display: contents; font-family: var(--font-sans); & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; } & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--space-4) var(--space-4); } & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; 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); } } & .command-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; } & .command-control { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--fg-muted); } & .command-control svg { flex-shrink: 0; } & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-xl); color: var(--fg-primary); } & .command-input::placeholder { color: var(--fg-muted); } & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-px); } & .command-empty { padding: var(--space-8) var(--space-3); text-align: center; font-size: var(--text-md); color: var(--fg-muted); } & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding-inline: var(--space-2-5); border-radius: var(--radius-xl); font-size: var(--text-lg); color: var(--fg-primary); cursor: pointer; } & .command-item svg { flex-shrink: 0; color: var(--fg-muted); } & .command-item[data-highlighted] { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); } & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .command-item-shortcut { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-0-5); } & .command-group-label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); } & .command-list > .command-group-label:first-child { padding-top: var(--space-1); } & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--space-2-5); border-top: 1px solid var(--border-subtle); } & .command-footer-nav { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); } & .command-footer-action { display: flex; align-items: center; gap: var(--space-2); height: 28px; max-width: 60%; 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; } & .command-footer-action:disabled { opacity: 0.5; cursor: default; } & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: rgba(255,255,255,0.22); font-size: var(--text-xs); }
 }

package/dist/contextmenu.css

@@ -1,6 +1,6 @@
 .contextmenu {
   display: contents; font-family: var(--font-sans);
-    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--space-1); border-radius: var(--radius-xl); background: var(--bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--space-1); border-radius: var(--radius-xl); background: var(--bg-popover); 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); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .contextmenu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 32px; box-sizing: border-box; padding: 0 var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); text-align: left; white-space: nowrap; cursor: pointer; }
     & .contextmenu-item svg { flex-shrink: 0; color: var(--fg-muted); }
     & .contextmenu-item:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); }

package/dist/datatable.css

@@ -0,0 +1,60 @@
+.datatable {
+  display: flex; flex-direction: column; gap: var(--space-2-5); font-family: var(--font-sans);
+    & .datatable-toolbar { display: flex; align-items: center; gap: var(--space-2); }
+    & .datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
+    & .datatable-search svg { position: absolute; left: var(--space-2); color: var(--fg-muted); pointer-events: none; }
+    & .datatable-search input { width: 100%; height: 32px; padding: 0 var(--space-2) 0 var(--space-6); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; transition: box-shadow .15s; }
+    & .datatable-search input::placeholder { color: var(--fg-muted); }
+    & .datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
+    & .datatable-count { margin-left: auto; font-size: var(--text-md); color: var(--fg-muted); }
+    & .datatable-th-inner { display: inline-flex; align-items: center; gap: var(--space-1-5); width: 100%; height: 100%; }
+    & .datatable-th-inner > svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .datatable-sort { display: inline-flex; align-items: center; gap: var(--space-1-5); width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
+    & th[data-align="right"] .datatable-sort { justify-content: flex-end; }
+    & .datatable-chevron { margin-left: auto; flex-shrink: 0; color: var(--fg-muted); opacity: 0; transition: opacity .12s; }
+    & th[data-align="right"] .datatable-chevron { margin-left: 0; }
+    & .datatable-sort:hover .datatable-chevron { opacity: 0.6; }
+    & .datatable-sort[data-sorted] .datatable-chevron { opacity: 1; color: var(--fg-primary); }
+    /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
+    & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--bg-surface); }
+    & th[data-sticky] { z-index: 3; }
+    & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--bg-brand-solid) 6%, var(--bg-surface)); }
+    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--fg-primary) 3%, var(--bg-surface)); }
+    & .table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -14px 0 0); box-shadow: 8px 0 12px -8px rgba(28,40,64,0.22); }
+    /* add-row + summary footer */
+    & .datatable-addcell { padding: 0; border-top: none; }
+    & .datatable-addrow { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-tableRow); padding: 0 var(--space-2); border: none; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; font-size: var(--text-lg); cursor: pointer; transition: background-color .12s; }
+    & .datatable-addrow:hover { background: var(--bg-raised); color: var(--fg-primary); }
+    & .datatable-addrow svg { flex-shrink: 0; }
+    & .datatable-check { display: flex; align-items: center; justify-content: center; }
+    & .datatable-col-check { width: 40px; padding: 0; text-align: center; }
+    & tbody tr[data-selected] td { background: color-mix(in srgb, var(--bg-brand-solid) 6%, var(--bg-surface)); }
+    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--bg-brand-solid) 10%, var(--bg-surface)); }
+    & .datatable-editable:hover { background: color-mix(in srgb, var(--fg-primary) 4%, var(--bg-surface)); cursor: text; }
+    & .datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--space-1-5); border: none; border-radius: var(--radius-sm); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--bg-brand-solid); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; vertical-align: middle; }
+    & .datatable-empty { padding: var(--space-8) var(--space-3); text-align: center; color: var(--fg-muted); font-size: var(--text-lg); }
+    /* fixed layout so column widths (and resize) are exact — like RecordsTable */
+    & table { table-layout: fixed; }
+    /* column resize grip */
+    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
+    & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
+    /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
+    & .datatable-entity { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; color: var(--fg-primary); font-weight: var(--weight-medium); }
+    & .datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .datatable-avatar { width: var(--size-icon); height: var(--size-icon); border-radius: var(--radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--weight-semibold); text-transform: uppercase; color: var(--fg-on-brand); background: var(--bg-brand-solid); }
+    & .datatable-avatar[data-tone="success"] { background: var(--bg-success); } & .datatable-avatar[data-tone="warning"] { background: var(--bg-warning); } & .datatable-avatar[data-tone="danger"] { background: var(--bg-danger); } & .datatable-avatar[data-tone="purple"] { background: var(--bg-purple); } & .datatable-avatar[data-tone="cyan"] { background: var(--bg-cyan); } & .datatable-avatar[data-tone="orange"] { background: var(--bg-orange); }
+    & .datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+    & .datatable-tags { display: flex; align-items: center; gap: var(--space-1); overflow: hidden; }
+    & .datatable-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-1); border-radius: 7px; font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: color-mix(in srgb, var(--fg-primary) 82%, transparent); }
+    & .datatable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--bg-brand-solid) 82%, var(--fg-primary)); }
+    & .datatable-tag[data-tone="success"] { background: color-mix(in srgb, var(--bg-success) 16%, transparent); color: color-mix(in srgb, var(--bg-success) 78%, var(--fg-primary)); }
+    & .datatable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--bg-warning) 18%, transparent); color: color-mix(in srgb, var(--bg-warning) 82%, var(--fg-primary)); }
+    & .datatable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--bg-danger) 15%, transparent); color: color-mix(in srgb, var(--bg-danger) 80%, var(--fg-primary)); }
+    & .datatable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--bg-purple) 16%, transparent); color: color-mix(in srgb, var(--bg-purple) 80%, var(--fg-primary)); }
+    & .datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--bg-cyan) 82%, var(--fg-primary)); }
+    & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--bg-orange) 16%, transparent); color: color-mix(in srgb, var(--bg-orange) 82%, var(--fg-primary)); }
+    & .datatable-num { font-variant-numeric: tabular-nums; }
+    & .datatable-muted { color: var(--fg-muted); }
+}

package/dist/datatable.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface DatatableVariants {
+
+}
+
+export declare const datatableRecipe: RecipeFn<{  }>;

package/dist/datepicker.css

@@ -1,6 +1,6 @@
 .datepicker {
   display: contents; font-family: var(--font-sans);
-    & .datepicker-trigger { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; height: 32px; padding: 0 var(--space-2-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); white-space: nowrap; cursor: pointer; }
+    & .datepicker-trigger { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; height: 32px; padding: 0 var(--space-2-5); margin: 0; border: none; border-radius: var(--radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 7%, transparent); color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); white-space: nowrap; cursor: pointer; }
     & .datepicker-trigger[data-ghost] { background: transparent; box-shadow: none; }
     & .datepicker-trigger[data-ghost]:hover { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); }
     & .datepicker-trigger[data-placeholder] { color: var(--fg-muted); }

package/dist/dialog.css

@@ -2,7 +2,7 @@
   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); }

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

@@ -0,0 +1,32 @@
+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`.
+ */
+export function Accordion({ items, multiple, defaultValue, className, }) {
+    const [open, setOpen] = React.useState(() => new Set(defaultValue == null
+        ? []
+        : Array.isArray(defaultValue)
+            ? defaultValue
+            : [defaultValue]));
+    const toggle = (value) => {
+        setOpen((prev) => {
+            const next = new Set(multiple ? prev : []);
+            if (prev.has(value))
+                next.delete(value);
+            else
+                next.add(value);
+            return next;
+        });
+    };
+    return (_jsx("div", { className: accordionRecipe({ className }), 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: left; 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, }) {
+    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 }), 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-left: -${c.space["2"]}; box-shadow: 0 0 0 2px ${c.bgSurface}; position: relative; }
+    & > *:first-child { margin-left: 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: 22px; padding-inline: 9px; font-size: ${c.text.lg}; border-radius: 7px;`,
+        },
+        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.fgOnBrand}; box-shadow: none;`,
+        },
+        {
+            variant: "solid",
+            tone: "warning",
+            css: `background: ${c.bgWarning}; color: ${c.fgOnBrand}; box-shadow: none;`,
+        },
+        {
+            variant: "solid",
+            tone: "danger",
+            css: `background: ${c.bgDanger}; color: ${c.fgOnBrand}; 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,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(), xAxisTitle, "aria-label": ariaLabel, className, }) {
+    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);
+    const summary = ariaLabel ??
+        `Bar chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
+    return (_jsxs("div", { className: barchartRecipe({ className }), style: { height }, 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,26 @@
+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",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
+    & .barchart-body { display: flex; flex: 1; min-height: 0; }
+    & .barchart-yaxis { position: relative; flex-shrink: 0; width: 34px; }
+    & .barchart-ytick { position: absolute; right: ${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-left: 34px; }
+    & .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-left: 34px; 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, }) {
+    const sep = separator ?? (_jsx(ChevronRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
+    return (_jsx("nav", { "aria-label": ariaLabel, className: breadcrumbRecipe({ className }), 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, }) {
+    return (_jsx("div", { className: bulkbarRecipe({ className }), children: _jsxs("div", { className: "bulkbar-bar", role: "status", children: [count != null && (_jsxs("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: "Clear selection", 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 } 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: 44px; padding: 0 ${c.space["1"]} 0 ${c.space["1.5"]}; border-radius: 14px; background: ${c.bgSurface}; box-shadow: 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16); 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: 32px; 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: 32px; 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,15 @@
+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, className, asChild, loading, disabled, children, ...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, className }), disabled: isDisabled, "aria-busy": loading || undefined, "data-loading": loading ? "" : undefined, ...props, children: content }));
+});
+Button.displayName = "Button";