@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/README.md

@@ -24,6 +24,15 @@ React 18+ is a peer dependency:
 npm install react react-dom
 ```
 
+crisp ships **ESM and CommonJS**, so both `import` and `require` work. Every
+component also has its own subpath, which is what keeps a one-component import
+small (a lone `Badge` bundles to ~8 KB):
+
+```tsx
+import { Badge } from "@crisp-ui-kit/crisp";      // barrel — tree-shakes
+import { Menu } from "@crisp-ui-kit/crisp/menu";  // or import it directly
+```
+
 ## Usage
 
 Import the stylesheet **once** at your app root, then use components anywhere:
@@ -39,6 +48,11 @@ 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`.
 
+`styles.css` already contains the design tokens, so that one import is enough.
+`@crisp-ui-kit/crisp/tokens.css` is available separately for the rare case of
+wanting the tokens **without** the component styles — theming another library
+from crisp's palette, for instance.
+
 ```tsx
 import { Button, Badge, EmptyState } from "@crisp-ui-kit/crisp";
 

package/dist/accordion.css

@@ -1,7 +1,7 @@
 .accordion {
   display: flex; flex-direction: column; font-family: var(--font-sans);
     & .accordion-item { border-bottom: 1px solid var(--border-subtle); }
-    & .accordion-trigger { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 44px; padding: 0 var(--space-1); margin: 0; border: none; background: none; color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); text-align: left; cursor: pointer; }
+    & .accordion-trigger { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 44px; padding: 0 var(--space-1); margin: 0; border: none; background: none; color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); text-align: start; cursor: pointer; }
     & .accordion-trigger:hover { color: var(--fg-primary); }
     & .accordion-title { flex: 1; min-width: 0; }
     & .accordion-chevron { flex-shrink: 0; color: var(--fg-muted); transition: transform .2s ease; }
@@ -11,3 +11,11 @@
     & .accordion-panel-inner { overflow: hidden; }
     & .accordion-content { padding: 0 var(--space-1) var(--space-3); font-size: var(--text-md); color: var(--fg-muted); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion, .accordion * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/appshell.css

@@ -3,11 +3,19 @@
     display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--bg-surface); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
     & .appshell-side-inner { height: 100%; }
-    & .appshell-resize { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: transparent; transition: background-color .12s; }
-    & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { background: var(--bg-brand-solid); }
+    & .appshell-resize { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .appshell-resize::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--border-subtle); transition: background-color .16s, height .16s; }
+    & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: var(--bg-brand-solid); }
     & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
-    & .appshell-expand { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--size-row); height: var(--size-row); padding: 0; border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); cursor: pointer; transition: background-color .12s; }
+    & .appshell-expand { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--size-row); height: var(--size-row); padding: 0; border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .appshell-expand:hover { background: var(--bg-raised); color: var(--fg-primary); }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .appshell, .appshell * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/authshell.css

@@ -0,0 +1,57 @@
+.authshell {
+  min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
+    background: var(--bg-surface); font-family: var(--font-sans); font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--border-default); }
+    & .authshell-progress-fill { height: 2px; background: var(--fg-primary); border-radius: 4px; transition: width .2s; }
+
+    & .authshell-logo { margin-top: var(--space-8); height: 24px; display: flex; align-items: center; }
+
+    & .authshell-card { margin-top: var(--space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--border-subtle); overflow: hidden; }
+
+    & .authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+
+    & .authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
+    & .authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--bg-subtle) 0%, transparent) 0%, var(--bg-subtle) 100%); pointer-events: none; }
+
+    & .authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-8); align-items: center; }
+
+    & .authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--weight-semibold); letter-spacing: -0.4px; color: var(--fg-primary); align-self: stretch; }
+
+    & .authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
+
+    & .authshell-footer { margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); line-height: 16px; color: color-mix(in srgb, var(--fg-primary) 63%, transparent); }
+    & .authshell-footer a { color: inherit; font-weight: var(--weight-medium); text-decoration: underline; }
+
+    /* Auth-surface control treatment: flatter than the in-app chrome — a plain
+       hairline ring instead of elevation.field's soft glow, and a 36px (not
+       40px) submit. Scoped to .authshell-body so a consumer keeps using
+       crisp's Input / FormField / Button and gets the auth treatment for free. */
+    & .authshell-body .formfield-label { font-size: var(--text-sm); line-height: 16px; font-weight: var(--weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--fg-primary) 50%, transparent); padding-inline-start: var(--space-1); }
+    & .authshell-body .formfield { gap: var(--space-1); }
+    & .authshell-body .input { height: 34px; padding-inline: var(--space-2-5); border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
+    & .authshell-body .input:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
+    /* Same three-layer brand shadow as Button's primary intent, but the auth
+       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
+       the in-app button's rgba(255,255,255,0.07) highlight. */
+    & .authshell-body .button { height: 36px; padding-inline: var(--space-3); border-radius: 10px; }
+    & .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
+
+    /* Attio drops the preview pane in JS on narrow viewports (measured: two
+       panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
+       that bracket, not a measured value. A CONTAINER query, not a media
+       query: the shell is embedded in the docs inside an ~800px column, where
+       a viewport query would keep the 1130px card and overflow it. Asking the
+       shell's own width is what "there isn't room for the preview" means. */
+    container-type: inline-size;
+    @container (max-width: 1200px) { & .authshell-preview { display: none; } }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .authshell, .authshell * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/authshell.d.ts

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

package/dist/avatargroup.css

@@ -1,5 +1,5 @@
 .avatargroup {
   display: inline-flex; align-items: center;
-    & > * { margin-left: -var(--space-2); box-shadow: 0 0 0 2px var(--bg-surface); position: relative; }
-    & > *:first-child { margin-left: 0; }
+    & > * { margin-inline-start: -var(--space-2); box-shadow: 0 0 0 2px var(--bg-surface); position: relative; }
+    & > *:first-child { margin-inline-start: 0; }
 }

package/dist/badge.css

@@ -24,7 +24,7 @@
   height: 20px; padding-inline: var(--space-2); font-size: var(--text-sm); border-radius: var(--radius-sm);
 }
 .badge--size_large {
-  height: 22px; padding-inline: 9px; font-size: var(--text-lg); border-radius: 7px;
+  height: var(--size-chip); padding-inline: 9px; font-size: var(--text-lg); border-radius: var(--radius-chip);
 }
 .badge--variant_soft {
   
@@ -36,13 +36,13 @@
   background: var(--bg-brand-solid); color: var(--fg-on-brand); box-shadow: none;
 }
 .badge--compound_1 {
-  background: var(--bg-success); color: var(--fg-on-brand); box-shadow: none;
+  background: var(--bg-success); color: var(--fg-on-tone); box-shadow: none;
 }
 .badge--compound_2 {
-  background: var(--bg-warning); color: var(--fg-on-brand); box-shadow: none;
+  background: var(--bg-warning); color: var(--fg-on-tone); box-shadow: none;
 }
 .badge--compound_3 {
-  background: var(--bg-danger); color: var(--fg-on-brand); box-shadow: none;
+  background: var(--bg-danger); color: var(--fg-on-tone); box-shadow: none;
 }
 .badge--compound_4 {
   background: var(--fg-muted); color: var(--bg-surface); box-shadow: none;

package/dist/barchart.css

@@ -1,15 +1,23 @@
 .barchart {
-  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--font-sans);
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--font-sans); --barchart-yaxis-width: 34px;
     & .barchart-body { display: flex; flex: 1; min-height: 0; }
-    & .barchart-yaxis { position: relative; flex-shrink: 0; width: 34px; }
-    & .barchart-ytick { position: absolute; right: var(--space-2); transform: translateY(50%); font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; }
+    & .barchart-yaxis { position: relative; flex-shrink: 0; width: var(--barchart-yaxis-width); }
+    & .barchart-ytick { position: absolute; inset-inline-end: var(--space-2); transform: translateY(50%); font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; }
     & .barchart-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: var(--space-3); border-bottom: 1px solid var(--border-default); }
     & .barchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-subtle); 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: var(--radius-sm) var(--radius-sm) 0 0; background: var(--bg-brand-solid); transition: height 0.3s ease; }
     & .barchart-bar[data-empty] { min-height: 2px; opacity: 0.35; }
     & .barchart-xaxis { display: flex; gap: var(--space-3); margin-top: var(--space-1-5); }
-    & .barchart-xaxis[data-inset] { padding-left: 34px; }
+    & .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: var(--text-sm); color: var(--fg-muted); }
-    & .barchart-axis-title { margin-top: var(--space-1); padding-left: 34px; text-align: center; font-size: var(--text-sm); color: var(--fg-muted); }
+    & .barchart-axis-title { margin-top: var(--space-1); padding-inline-start: var(--barchart-yaxis-width); text-align: center; font-size: var(--text-sm); color: var(--fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .barchart, .barchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/dist/board.css

@@ -5,7 +5,7 @@
     & .board-col-dot { width: 9px; height: 9px; border-radius: var(--radius-full); flex-shrink: 0; }
     & .board-col-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg-primary); }
     & .board-col-count { font-size: var(--text-md); color: var(--fg-muted); }
-    & .board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; }
     & .board-col-add:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
     & .board-col-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-height: 48px; padding: var(--space-1); border-radius: var(--radius-lg); overflow-y: auto; transition: background 0.12s; }
     & .board-col[data-over] .board-col-body { background: color-mix(in srgb, var(--bg-brand-solid) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-brand-solid) 30%, transparent); }
@@ -15,3 +15,11 @@
     & .board-card:active { cursor: grabbing; }
     & .board-card[data-dragging] { opacity: 0.4; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .board, .board * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/bulkbar.css

@@ -1,13 +1,21 @@
 .bulkbar {
   position: absolute; left: 0; right: 0; bottom: var(--space-4); display: flex; justify-content: center; pointer-events: none; z-index: 10;
-    & .bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: var(--space-0-5); height: 44px; padding: 0 var(--space-1) 0 var(--space-1-5); border-radius: 14px; background: var(--bg-surface); 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: var(--fg-primary); transition: opacity .16s ease, transform .16s ease; }
+    & .bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: var(--space-0-5); height: 48px; padding: 0 var(--space-1) 0 var(--space-1-5); border-radius: 14px; background: var(--bg-surface); 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); color: var(--fg-primary); 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: var(--space-1); height: 32px; margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg-primary) 4%, transparent); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-muted); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-count { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-menuRow); margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg-primary) 4%, transparent); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-muted); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .bulkbar-count:hover { background: color-mix(in srgb, var(--fg-primary) 8%, transparent); color: var(--fg-primary); }
     & .bulkbar-count svg { flex-shrink: 0; }
-    & .bulkbar-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-menuRow); padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .bulkbar-btn:hover { background: var(--bg-raised); }
     & .bulkbar-btn--danger { color: var(--bg-danger); }
     & .bulkbar-btn--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
     & .bulkbar-btn svg { flex-shrink: 0; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .bulkbar, .bulkbar * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/button.css

@@ -8,7 +8,7 @@
   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); }
+  background: var(--bg-danger-solid); color: var(--fg-on-brand); 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); }
 }
 .button--intent_ghost {
   background: transparent; color: var(--fg-muted); box-shadow: none; &:hover { background: var(--bg-raised); color: var(--fg-primary); }
@@ -28,3 +28,17 @@
 .button--shape_icon {
   padding-inline: 0; aspect-ratio: 1 / 1;
 }
+.button--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; }
+}
+.button--touchTarget_false {
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button, .button * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/button.d.ts

@@ -4,6 +4,7 @@ export interface ButtonVariants {
   intent?: "primary" | "neutral" | "danger" | "ghost";
   size?: "sm" | "md" | "lg";
   shape?: "text" | "icon";
+  touchTarget?: boolean;
 }
 
-export declare const buttonRecipe: RecipeFn<{ intent: { primary: string; neutral: string; danger: string; ghost: string }; size: { sm: string; md: string; lg: string }; shape: { text: string; icon: string } }>;
+export declare const buttonRecipe: RecipeFn<{ intent: { primary: string; neutral: string; danger: string; ghost: string }; size: { sm: string; md: string; lg: string }; shape: { text: string; icon: string }; touchTarget: { true: string; false: string } }>;

package/dist/card.css

@@ -18,3 +18,11 @@
 .card--interactive_false {
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .card, .card * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/checkbox.css

@@ -1,3 +1,19 @@
 .checkbox {
-  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--radius-sm); background: var(--bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 30%, transparent); } &:checked, &:indeterminate { background: var(--bg-brand-solid) center / 10px no-repeat; box-shadow: none; } &:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); } &:indeterminate { background-image: linear-gradient(var(--fg-on-brand), var(--fg-on-brand)); background-size: 8px 2px; } &:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--radius-sm)
+  ; background: var(--bg-surface)
+  ; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary)
+  9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 30%, transparent); }
+  &:checked, &:indeterminate { background: var(--bg-brand-solid) center / 10px no-repeat; box-shadow: none; }
+  &:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+  &:indeterminate { background-image: linear-gradient(var(--fg-on-brand), var(--fg-on-brand)); background-size: 8px 2px; }
+  &:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .checkbox, .checkbox * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/dist/cjs/components/accordion/accordion.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const accordion_recipe_1 = require("./accordion.recipe");
+/**
+ * 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]);
+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 ((0, jsx_runtime_1.jsx)("div", { className: (0, accordion_recipe_1.accordionRecipe)({ className }), ...rest, children: items.map((item) => {
+            const isOpen = open.has(item.value);
+            const panelId = `accordion-panel-${item.value}`;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "accordion-item", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [(0, jsx_runtime_1.jsx)("span", { className: "accordion-title", children: item.title }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), (0, jsx_runtime_1.jsx)("div", { id: panelId, className: "accordion-panel", role: "region", "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: (0, jsx_runtime_1.jsx)("div", { className: "accordion-panel-inner", children: (0, jsx_runtime_1.jsx)("div", { className: "accordion-content", children: item.content }) }) })] }, item.value));
+        }) }));
+}
+Accordion.displayName = "Accordion";

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accordionRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "accordion",
+    base: `display: flex; flex-direction: column; font-family: ${tokens_1.contract.font.sans};
+    & .accordion-item { border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .accordion-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: 44px; padding: 0 ${tokens_1.contract.space["1"]}; margin: 0; border: none; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; text-align: start; cursor: pointer; }
+    & .accordion-trigger:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .accordion-title { flex: 1; min-width: 0; }
+    & .accordion-chevron { flex-shrink: 0; color: ${tokens_1.contract.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 ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.accordionRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accordionRecipe = exports.Accordion = void 0;
+var accordion_1 = require("./accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return accordion_1.Accordion; } });
+var accordion_recipe_1 = require("./accordion.recipe");
+Object.defineProperty(exports, "accordionRecipe", { enumerable: true, get: function () { return accordion_recipe_1.accordionRecipe; } });

package/dist/cjs/components/avatar/avatar.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const avatar_recipe_1 = require("./avatar.recipe");
+exports.Avatar = React.forwardRef(({ size, shape, tone, className, asChild, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, avatar_recipe_1.avatarRecipe)({ size, shape, tone, className }), ...props }));
+});
+exports.Avatar.displayName = "Avatar";

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatarRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+const config = (0, core_1.defineRecipe)({
+    name: "avatar",
+    base: `display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.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: ${tokens_1.contract.text.sm};`,
+            xl: `height: 32px; width: 32px; font-size: ${tokens_1.contract.text.lg};`,
+        },
+        shape: {
+            circle: `border-radius: ${tokens_1.contract.radius.full};`,
+            rounded: `border-radius: 30%;`,
+        },
+        tone: {
+            neutral: `background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgMuted}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault};`,
+            brand: `background: ${tokens_1.contract.bgBrandSolid}; color: #fff;`,
+            orange: `background: ${tokens_1.contract.bgOrange}; color: #fff;`,
+            cyan: `background: ${tokens_1.contract.bgCyan}; color: #fff;`,
+            purple: `background: ${tokens_1.contract.bgPurple}; color: #fff;`,
+            green: `background: ${tokens_1.contract.bgSuccess}; color: #fff;`,
+        },
+    },
+    defaultVariants: { size: "md", shape: "circle", tone: "neutral" },
+    compoundVariants: [],
+});
+exports.avatarRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: {
+        lg: {
+            height: "24px",
+            fontSize: "12px",
+            fontWeight: "600",
+        },
+    },
+});
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatarRecipe = exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
+var avatar_recipe_1 = require("./avatar.recipe");
+Object.defineProperty(exports, "avatarRecipe", { enumerable: true, get: function () { return avatar_recipe_1.avatarRecipe; } });

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

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroup = AvatarGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const avatar_1 = require("../avatar/avatar");
+const avatargroup_recipe_1 = require("./avatargroup.recipe");
+/**
+ * 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.
+ */
+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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, avatargroup_recipe_1.avatargroupRecipe)({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: [shown, overflow > 0 && ((0, jsx_runtime_1.jsxs)(avatar_1.Avatar, { size: size, shape: "circle", tone: "neutral", children: ["+", overflow] }))] }));
+}
+AvatarGroup.displayName = "AvatarGroup";

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

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

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

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