@crisp-ui-kit/crisp 0.2.0 → 0.7.0

package/dist/switch.css

@@ -10,3 +10,11 @@
     &:disabled { opacity: 0.5; cursor: not-allowed; }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .switch, .switch * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/table.css

@@ -0,0 +1,34 @@
+.table {
+  display: block; box-sizing: border-box; background: var(--bg-surface);
+    & .table-scroll { overflow-x: auto; }
+    & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); font-size: var(--text-lg); color: var(--fg-primary); }
+    & th, & td { position: relative; height: var(--size-tableRow); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); border-inline-end: 1px solid var(--border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th { height: var(--size-tableHeader); background: var(--bg-surface); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--fg-primary) 63%, transparent); user-select: none; }
+    & td { color: var(--fg-primary); background: var(--bg-surface); }
+    & th:last-child, & td:last-child { border-inline-end: none; }
+    & tbody tr:last-child td { border-bottom: none; }
+    & tfoot td { border-top: 1px solid var(--border-subtle); border-bottom: none; font-weight: var(--weight-medium); color: var(--fg-muted); }
+    & caption { padding: var(--space-2) var(--space-2); text-align: start; font-size: var(--text-sm); color: var(--fg-muted); caption-side: bottom; }
+    & td[data-align="right"], & th[data-align="right"] { text-align: end; }
+    & td[data-align="center"], & th[data-align="center"] { text-align: center; }
+}
+.table--interactive_true {
+  & tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, var(--fg-primary) 4%, var(--bg-surface)); }
+}
+.table--interactive_false {
+  
+}
+.table--surface_card {
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden;
+}
+.table--surface_bleed {
+  border: none; border-radius: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table, .table * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/table.d.ts

@@ -0,0 +1,8 @@
+import type { RecipeFn } from "../core/types";
+
+export interface TableVariants {
+  interactive?: boolean;
+  surface?: "card" | "bleed";
+}
+
+export declare const tableRecipe: RecipeFn<{ interactive: { true: string; false: string }; surface: { card: string; bleed: string } }>;

package/dist/tabletoolbar.css

@@ -0,0 +1,78 @@
+.tabletoolbar {
+  
+    display: contents; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & * { box-sizing: border-box; }
+    & .tabletoolbar-toolbar { display: flex; align-items: center; gap: var(--space-1-5); padding: 0 var(--space-3) var(--space-2); }
+    & .tabletoolbar-search { display: flex; align-items: center; gap: var(--space-1-5); height: var(--size-row); padding: 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--fg-muted); }
+    & .tabletoolbar-search svg { flex-shrink: 0; }
+    & .tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--text-md); color: var(--fg-primary); width: 180px; }
+    & .tabletoolbar-search input::placeholder { color: var(--fg-muted); }
+    & .tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; transition: background-color .12s; }
+    & .tabletoolbar-tool:hover { background: var(--bg-raised); }
+    & .tabletoolbar-tool svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .tabletoolbar-tool--active { background: var(--bg-raised); }
+    & .tabletoolbar-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--fg-primary) 3%, transparent); color: var(--fg-muted); }
+    & .tabletoolbar-tool--ghost:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); }
+    & .tabletoolbar-toolgroup { position: relative; display: inline-flex; }
+    & .tabletoolbar-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--space-1); border-radius: var(--radius-lg); 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); display: flex; flex-direction: column; gap: var(--space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
+    & .tabletoolbar-menu { @starting-style { opacity: 0; transform: scale(0.96); } }
+    & .tabletoolbar-menu-head { padding: var(--space-1) var(--space-2) var(--space-0-5); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
+    & .tabletoolbar-sortpop { min-width: 460px; overflow: visible; padding: var(--space-1-5); gap: var(--space-1); }
+    & .tabletoolbar-sort-empty { padding: var(--space-1) var(--space-1) var(--space-2); font-size: var(--text-md); color: var(--fg-muted); }
+    & .tabletoolbar-sort-row { display: flex; align-items: center; gap: var(--space-1-5); }
+    & .tabletoolbar-sort-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; flex-shrink: 0; margin-right: calc(-1 * var(--space-1)); padding: 0; border: none; background: none; color: var(--fg-muted); cursor: grab; }
+    & .tabletoolbar-sort-grip:active { cursor: grabbing; }
+    & .tabletoolbar-sort-grip:hover { color: var(--fg-primary); }
+    & .tabletoolbar-sort-optlabel { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
+    & .tabletoolbar-sort-optlabel svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .tabletoolbar-sort-field { flex: 1; min-width: 0; }
+    & .tabletoolbar-sort-dir { width: 136px; flex-shrink: 0; }
+    & .tabletoolbar-sort-field .select-trigger, & .tabletoolbar-sort-dir .select-trigger { height: 28px; padding-right: var(--space-1); }
+    & .tabletoolbar-sort-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; transition: background-color .12s, color .12s; }
+    & .tabletoolbar-sort-remove:hover { background: var(--bg-raised); color: var(--fg-primary); }
+    & .tabletoolbar-sort-addrow { display: flex; padding: var(--space-0-5) 0; }
+    & .tabletoolbar-sort-add { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-2) 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); 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); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--fg-primary); cursor: pointer; transition: background-color .12s; }
+    & .tabletoolbar-sort-add:hover { background: var(--bg-raised); }
+    & .tabletoolbar-sort-add svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .tabletoolbar-sort-foot { display: flex; padding: var(--space-1-5) var(--space-1) var(--space-0-5); }
+    & .tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-lg); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); text-decoration: none; }
+    & .tabletoolbar-sort-learn svg { flex-shrink: 0; }
+    & .tabletoolbar-sort-learn:hover { color: var(--fg-primary); }
+    & .tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; background: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); text-align: left; cursor: pointer; }
+    & .tabletoolbar-menu-item:hover { background: var(--bg-raised); }
+    & .tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
+    & .tabletoolbar-menu-item:disabled:hover { background: none; }
+    & .tabletoolbar-menu-item svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .tabletoolbar-menu-item[data-on] svg { color: var(--bg-brand-solid); }
+    & .tabletoolbar-menu-item .tabletoolbar-menu-check { margin-left: auto; }
+    & .tabletoolbar-menu-input { height: var(--size-row); margin: var(--space-0-5); padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; }
+    & .tabletoolbar-menu-sep { height: 1px; background: var(--border-subtle); margin: var(--space-0-5) 0; }
+    & .tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--space-1)); transform-origin: bottom; }
+    & .tabletoolbar-menu--right { left: auto; right: 0; }
+    & .tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
+    & .tabletoolbar-menu--hdr { min-width: 200px; }
+    & .tabletoolbar-menu-item--danger { color: var(--bg-danger); }
+    & .tabletoolbar-menu-item--danger svg { color: var(--bg-danger); }
+    & .tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
+    & .tabletoolbar-menu-check { margin-left: auto; color: var(--bg-brand-solid); }
+    & .tabletoolbar-fchip { display: inline-flex; align-items: center; height: var(--size-row); padding-right: var(--space-1); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-default); background: var(--bg-surface); font-size: var(--text-md); color: var(--fg-primary); white-space: nowrap; }
+    & .tabletoolbar-fchip-main { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 100%; margin: 0; padding: 0 var(--space-1) 0 var(--space-2); border: none; background: none; font-family: inherit; font-size: var(--text-md); color: var(--fg-primary); cursor: pointer; }
+    & .tabletoolbar-fchip-field { font-weight: var(--weight-medium); }
+    & .tabletoolbar-fchip-op { color: var(--fg-muted); }
+    & .tabletoolbar-fchip-val { font-weight: var(--weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+    & .tabletoolbar-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .tabletoolbar-fchip-x:hover { background: color-mix(in srgb, var(--fg-primary) 10%, transparent); color: var(--fg-primary); }
+    & .tabletoolbar-spacer { flex: 1; }
+    & .tabletoolbar-count { font-size: var(--text-md); color: var(--fg-muted); }
+    & .tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-row); padding: 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; transition: background-color .12s; }
+    & .tabletoolbar-new:hover { background: var(--bg-brand-solid-pressed); }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tabletoolbar, .tabletoolbar * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/tabletoolbar.d.ts

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

package/dist/tabs.css

@@ -3,17 +3,25 @@
     display: flex; flex-direction: column; min-height: 0; font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .tabs-list { position: relative; display: flex; align-items: center; gap: var(--space-1); height: 40px; flex-shrink: 0; box-shadow: inset 0 -1px 0 var(--border-subtle); }
-    & .tabs-leading { display: inline-flex; align-items: center; margin-right: var(--space-1); }
+    & .tabs-list { position: relative; display: flex; align-items: center; gap: var(--space-1); height: var(--size-row); flex-shrink: 0; }
+    & .tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--space-1); }
     & .tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; margin: 0; padding: 0 var(--space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; color: var(--fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
     & .tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
-    & .tabs-tab[data-selected] { color: var(--fg-primary); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--border-subtle); }
+    & .tabs-tab[data-selected] { color: var(--fg-primary); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-subtle); }
     & .tabs-tab:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
     & .tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-muted); }
     & .tabs-tab[data-selected] .tabs-tab-badge { color: var(--fg-primary); }
-    & .tabs-indicator { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .tabs-indicator { position: absolute; bottom: calc(-1 * var(--space-2)); left: 0; height: 1px; background: var(--fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .tabs-panel { flex: 1; min-height: 0; }
     & .tabs-panel:focus-visible { outline: none; }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tabs, .tabs * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/tasklist.css

@@ -22,3 +22,11 @@
 
     & .tasklist-empty { padding: var(--space-4) var(--space-2); text-align: center; font-size: var(--text-md); color: var(--fg-muted); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tasklist, .tasklist * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/textarea.css

@@ -5,16 +5,36 @@
     & .textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
       margin: 0; padding: var(--space-1-5) var(--space-2-5); 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);
+      background: var(--bg-surface); 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);
       font-family: inherit; font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary);
       outline: none; transition: box-shadow .15s ease;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     }
     & .textarea-field::placeholder { color: var(--fg-muted); }
-    & .textarea-field:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
     & .textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
+       overlay that is present-but-transparent at rest, so focusing never
+       shifts the box, animating only its colour. */
+    & .textarea-wrap { position: relative; display: block; }
+    & .textarea-wrap::after {
+      content: ""; position: absolute; inset: 0; border-radius: var(--radius-md);
+      border: 2px solid transparent; transition: border-color .1s ease;
+      pointer-events: none;
+    }
+    & .textarea-wrap:focus-within::after { border-color: var(--stroke-field-focus); }
+    &[data-invalid] .textarea-wrap::after { border-color: var(--bg-danger); }
+    &[data-invalid] .textarea-wrap:focus-within::after { border-color: var(--bg-danger); }
     &[data-counted] .textarea-field { padding-bottom: var(--space-5); }
-    & .textarea-count { position: absolute; right: var(--space-2-5); bottom: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); pointer-events: none; }
+    & .textarea-count { position: absolute; inset-inline-end: var(--space-2-5); bottom: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); pointer-events: none; }
     & .textarea-count[data-over] { color: var(--bg-danger); }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea, .textarea * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/toast.css

@@ -1,6 +1,6 @@
 .toast {
   display: contents; font-family: var(--font-sans);
-    & .toast-viewport { position: fixed; z-index: 80; right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); width: 360px; max-width: calc(100vw - var(--space-8)); pointer-events: none; }
+    & .toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); width: 360px; max-width: calc(100vw - var(--space-8)); pointer-events: none; }
     & .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-2-5); box-sizing: border-box; padding: var(--space-3); 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: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--fg-muted); }
     & .toast[data-tone="info"] .toast-icon { color: var(--bg-brand-solid); }
@@ -12,6 +12,14 @@
     & .toast-desc { font-size: var(--text-md); color: var(--fg-muted); }
     & .toast-action { align-self: flex-start; margin-top: var(--space-1-5); height: 24px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
     & .toast-action:hover { background: color-mix(in srgb, var(--fg-primary) 10%, transparent); }
-    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; }
     & .toast-close:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .toast, .toast * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/tokens.css

@@ -2,38 +2,84 @@
   --bg-brand-solid: #266df0;
   --bg-brand-solid-pressed: #1f5fd6;
   --fg-on-brand: #ffffff;
+  --fg-on-tone: #101112;
   --bg-surface: #ffffff;
   --bg-raised: #f4f4f5;
   --border-default: #e4e4e7;
   --border-subtle: #eeeff1;
+  --ring-neutral: transparent;
+  --bg-tile-active: #ffffff;
+  --shadow-tile-active: rgba(0,0,0,0.04);
+  --bg-overlay-frost: #ffffff;
+  --shadow-overlay1: rgba(28,40,64,0.12);
+  --shadow-overlay2: rgba(28,40,64,0.16);
+  --shadow-overlay3: rgba(28,40,64,0.16);
+  --bg-popover: #ffffff;
+  --ring-popover: rgba(0,0,0,0);
+  --shadow-popover1: rgba(28,40,64,0.04);
+  --shadow-popover2: rgba(28,40,64,0.12);
+  --shadow-popover3: rgba(24,41,75,0.16);
   --fg-primary: #101112;
   --fg-muted: #71717a;
   --bg-danger: #e5484d;
+  --bg-danger-solid: #ba2525;
+  --stroke-field-focus: #1a1c20;
+  --fg-disabled: #d1d3d8;
+  --bg-neutral-weak: #f3f4f5;
+  --bg-neutral-inverted: #2a3038;
+  --fg-on-neutral-inverted: #ffffff;
+  --fg-neutral-subtle: #868b94;
+  --fg-neutral-muted: #555d6d;
+  --stroke-focus-ring: #1e82eb;
   --bg-success: #1f9d57;
   --bg-warning: #b5730f;
   --bg-orange: #f97514;
   --bg-cyan: #00b9eb;
   --bg-purple: #9b69ff;
   --bg-sidebar: #fbfbfb;
+  --bg-subtle: #fbfbfb;
 }
 
 [data-theme="dark"] {
   --bg-brand-solid: #266df0;
   --bg-brand-solid-pressed: #1f5fd6;
   --fg-on-brand: #ffffff;
+  --fg-on-tone: #101112;
   --bg-surface: #0a0a0a;
   --bg-raised: #101112;
   --border-default: #212224;
   --border-subtle: #1c1d1f;
+  --ring-neutral: #212224;
+  --bg-tile-active: #101112;
+  --shadow-tile-active: rgba(0,0,0,0);
+  --bg-overlay-frost: #1c1d1f;
+  --shadow-overlay1: rgba(0,0,0,0.48);
+  --shadow-overlay2: rgba(0,0,0,0.64);
+  --shadow-overlay3: rgba(0,0,0,0);
+  --bg-popover: #17181a;
+  --ring-popover: #212224;
+  --shadow-popover1: rgba(0,0,0,0.16);
+  --shadow-popover2: rgba(0,0,0,0.24);
+  --shadow-popover3: rgba(0,0,0,0.32);
   --fg-primary: #f5f5f5;
   --fg-muted: #9a9aa2;
   --bg-danger: #ff5a5f;
+  --bg-danger-solid: #ba2525;
+  --stroke-field-focus: #f3f4f5;
+  --fg-disabled: #5b606a;
+  --bg-neutral-weak: #1d2025;
+  --bg-neutral-inverted: #f3f4f5;
+  --fg-on-neutral-inverted: #16171b;
+  --fg-neutral-subtle: #b0b3ba;
+  --fg-neutral-muted: #dcdee3;
+  --stroke-focus-ring: #5e98fe;
   --bg-success: #2ea968;
   --bg-warning: #e0982a;
   --bg-orange: #f97514;
   --bg-cyan: #00b9eb;
   --bg-purple: #9b69ff;
   --bg-sidebar: #0e0f10;
+  --bg-subtle: #0e0f10;
 }
 
 :root {
@@ -48,6 +94,7 @@
   --space-0-5: 2px;
   --space-1-5: 6px;
   --space-2-5: 10px;
+  --radius-chip: 7px;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 9px;
@@ -55,9 +102,14 @@
   --radius-2xl: 16px;
   --radius-full: 999px;
   --size-icon: 16px;
+  --size-chip: 22px;
   --size-row: 28px;
+  --size-menuRow: 32px;
   --size-tableRow: 36px;
+  --size-tableHeader: 40px;
   --size-header: 48px;
+  --size-calendarCell: 48px;
+  --size-calendarPill: 42px;
   --text-xs: 11px;
   --text-sm: 12px;
   --text-md: 13px;
@@ -66,5 +118,6 @@
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
+  --weight-bold: 700;
   --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }

package/dist/tokens.json

@@ -0,0 +1,217 @@
+{
+  "color": {
+    "light": {
+      "bgBrandSolid": "#266df0",
+      "bgBrandSolidPressed": "#1f5fd6",
+      "fgOnBrand": "#ffffff",
+      "fgOnTone": "#101112",
+      "bgSurface": "#ffffff",
+      "bgRaised": "#f4f4f5",
+      "borderDefault": "#e4e4e7",
+      "borderSubtle": "#eeeff1",
+      "ringNeutral": "transparent",
+      "bgTileActive": "#ffffff",
+      "shadowTileActive": "rgba(0,0,0,0.04)",
+      "bgOverlayFrost": "#ffffff",
+      "shadowOverlay1": "rgba(28,40,64,0.12)",
+      "shadowOverlay2": "rgba(28,40,64,0.16)",
+      "shadowOverlay3": "rgba(28,40,64,0.16)",
+      "bgPopover": "#ffffff",
+      "ringPopover": "rgba(0,0,0,0)",
+      "shadowPopover1": "rgba(28,40,64,0.04)",
+      "shadowPopover2": "rgba(28,40,64,0.12)",
+      "shadowPopover3": "rgba(24,41,75,0.16)",
+      "fgPrimary": "#101112",
+      "fgMuted": "#71717a",
+      "bgDanger": "#e5484d",
+      "bgDangerSolid": "#ba2525",
+      "strokeFieldFocus": "#1a1c20",
+      "fgDisabled": "#d1d3d8",
+      "bgNeutralWeak": "#f3f4f5",
+      "bgNeutralInverted": "#2a3038",
+      "fgOnNeutralInverted": "#ffffff",
+      "fgNeutralSubtle": "#868b94",
+      "fgNeutralMuted": "#555d6d",
+      "strokeFocusRing": "#1e82eb",
+      "bgSuccess": "#1f9d57",
+      "bgWarning": "#b5730f",
+      "bgOrange": "#f97514",
+      "bgCyan": "#00b9eb",
+      "bgPurple": "#9b69ff",
+      "bgSidebar": "#fbfbfb",
+      "bgSubtle": "#fbfbfb"
+    },
+    "dark": {
+      "bgBrandSolid": "#266df0",
+      "bgBrandSolidPressed": "#1f5fd6",
+      "fgOnBrand": "#ffffff",
+      "fgOnTone": "#101112",
+      "bgSurface": "#0a0a0a",
+      "bgRaised": "#101112",
+      "borderDefault": "#212224",
+      "borderSubtle": "#1c1d1f",
+      "ringNeutral": "#212224",
+      "bgTileActive": "#101112",
+      "shadowTileActive": "rgba(0,0,0,0)",
+      "bgOverlayFrost": "#1c1d1f",
+      "shadowOverlay1": "rgba(0,0,0,0.48)",
+      "shadowOverlay2": "rgba(0,0,0,0.64)",
+      "shadowOverlay3": "rgba(0,0,0,0)",
+      "bgPopover": "#17181a",
+      "ringPopover": "#212224",
+      "shadowPopover1": "rgba(0,0,0,0.16)",
+      "shadowPopover2": "rgba(0,0,0,0.24)",
+      "shadowPopover3": "rgba(0,0,0,0.32)",
+      "fgPrimary": "#f5f5f5",
+      "fgMuted": "#9a9aa2",
+      "bgDanger": "#ff5a5f",
+      "bgDangerSolid": "#ba2525",
+      "strokeFieldFocus": "#f3f4f5",
+      "fgDisabled": "#5b606a",
+      "bgNeutralWeak": "#1d2025",
+      "bgNeutralInverted": "#f3f4f5",
+      "fgOnNeutralInverted": "#16171b",
+      "fgNeutralSubtle": "#b0b3ba",
+      "fgNeutralMuted": "#dcdee3",
+      "strokeFocusRing": "#5e98fe",
+      "bgSuccess": "#2ea968",
+      "bgWarning": "#e0982a",
+      "bgOrange": "#f97514",
+      "bgCyan": "#00b9eb",
+      "bgPurple": "#9b69ff",
+      "bgSidebar": "#0e0f10",
+      "bgSubtle": "#0e0f10"
+    }
+  },
+  "palette": {
+    "light": {
+      "gray00": "#ffffff",
+      "white": "#ffffff",
+      "ink": "#101112",
+      "gray50": "#f4f4f5",
+      "gray900": "#101112",
+      "line200": "#e4e4e7",
+      "line100": "#eeeff1",
+      "ringNeutral": "transparent",
+      "tileActive": "#ffffff",
+      "tileActiveShadow": "rgba(0,0,0,0.04)",
+      "overlayFrost": "#ffffff",
+      "shadowOverlay1": "rgba(28,40,64,0.12)",
+      "shadowOverlay2": "rgba(28,40,64,0.16)",
+      "shadowOverlay3": "rgba(28,40,64,0.16)",
+      "popoverBg": "#ffffff",
+      "ringPopover": "rgba(0,0,0,0)",
+      "shadowPopover1": "rgba(28,40,64,0.04)",
+      "shadowPopover2": "rgba(28,40,64,0.12)",
+      "shadowPopover3": "rgba(24,41,75,0.16)",
+      "gray400": "#71717a",
+      "brand600": "#266df0",
+      "brand700": "#1f5fd6",
+      "red600": "#e5484d",
+      "red700": "#ba2525",
+      "fieldFocus": "#1a1c20",
+      "disabledFg": "#d1d3d8",
+      "neutralWeak": "#f3f4f5",
+      "neutralInverted": "#2a3038",
+      "onNeutralInverted": "#ffffff",
+      "neutralSubtle": "#868b94",
+      "neutralMuted": "#555d6d",
+      "focusRing": "#1e82eb",
+      "green600": "#1f9d57",
+      "amber600": "#b5730f",
+      "orange600": "#f97514",
+      "cyan600": "#00b9eb",
+      "purple600": "#9b69ff",
+      "graySidebar": "#fbfbfb"
+    },
+    "dark": {
+      "gray00": "#0a0a0a",
+      "white": "#ffffff",
+      "ink": "#101112",
+      "gray50": "#101112",
+      "gray900": "#f5f5f5",
+      "line200": "#212224",
+      "line100": "#1c1d1f",
+      "ringNeutral": "#212224",
+      "tileActive": "#101112",
+      "tileActiveShadow": "rgba(0,0,0,0)",
+      "overlayFrost": "#1c1d1f",
+      "shadowOverlay1": "rgba(0,0,0,0.48)",
+      "shadowOverlay2": "rgba(0,0,0,0.64)",
+      "shadowOverlay3": "rgba(0,0,0,0)",
+      "popoverBg": "#17181a",
+      "ringPopover": "#212224",
+      "shadowPopover1": "rgba(0,0,0,0.16)",
+      "shadowPopover2": "rgba(0,0,0,0.24)",
+      "shadowPopover3": "rgba(0,0,0,0.32)",
+      "gray400": "#9a9aa2",
+      "brand600": "#266df0",
+      "brand700": "#1f5fd6",
+      "red600": "#ff5a5f",
+      "red700": "#ba2525",
+      "fieldFocus": "#f3f4f5",
+      "disabledFg": "#5b606a",
+      "neutralWeak": "#1d2025",
+      "neutralInverted": "#f3f4f5",
+      "onNeutralInverted": "#16171b",
+      "neutralSubtle": "#b0b3ba",
+      "neutralMuted": "#dcdee3",
+      "focusRing": "#5e98fe",
+      "green600": "#2ea968",
+      "amber600": "#e0982a",
+      "orange600": "#f97514",
+      "cyan600": "#00b9eb",
+      "purple600": "#9b69ff",
+      "graySidebar": "#0e0f10"
+    }
+  },
+  "space": {
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "px": 1,
+    "0.5": 2,
+    "1.5": 6,
+    "2.5": 10
+  },
+  "radius": {
+    "chip": 7,
+    "sm": 6,
+    "md": 8,
+    "lg": 9,
+    "xl": 12,
+    "2xl": 16,
+    "full": 999
+  },
+  "size": {
+    "icon": 16,
+    "chip": 22,
+    "row": 28,
+    "menuRow": 32,
+    "tableRow": 36,
+    "tableHeader": 40,
+    "header": 48,
+    "calendarCell": 48,
+    "calendarPill": 42
+  },
+  "text": {
+    "xs": 11,
+    "sm": 12,
+    "md": 13,
+    "lg": 14,
+    "xl": 16
+  },
+  "font": {
+    "sans": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
+  },
+  "weight": {
+    "regular": "400",
+    "medium": "500",
+    "semibold": "600",
+    "bold": "700"
+  }
+}

package/dist/tooltip.css

@@ -1,3 +1,11 @@
 .tooltip {
   position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: #20242c; color: #fff; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease; @starting-style { opacity: 0; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip, .tooltip * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/trialbanner.css

@@ -16,3 +16,11 @@
     &[data-tone="warning"] .trialbanner-icon { color: var(--bg-warning); }
     &[data-tone="danger"] .trialbanner-icon { color: var(--bg-danger); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .trialbanner, .trialbanner * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/types/components/accordion/accordion.d.ts

@@ -4,20 +4,22 @@ export type AccordionItemData = {
     title: React.ReactNode;
     content: React.ReactNode;
 };
-export type AccordionProps = {
+export type AccordionProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue"> & {
     items: AccordionItemData[];
     /** Allow multiple panels open at once (default: single). */
     multiple?: boolean;
-    /** Initially open value(s). */
+    /** Controlled open value(s). Omit to let Accordion manage them (see
+     * `defaultValue`). A string in single mode, an array when `multiple`. */
+    value?: string | string[];
+    /** Initially open value(s), when uncontrolled. */
     defaultValue?: string | string[];
+    /** Fires with the next open value(s) on every toggle, controlled or not.
+     * Emits the shape the mode implies: `string[]` when `multiple`, otherwise
+     * the open value, or `""` when the panel was closed. */
+    onValueChange?: (value: string | string[]) => void;
     className?: string;
 };
-/**
- * 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 declare function Accordion({ items, multiple, defaultValue, className, }: AccordionProps): React.JSX.Element;
+export declare function Accordion({ items, multiple, value, defaultValue, onValueChange, className, ...rest }: AccordionProps): React.JSX.Element;
 export declare namespace Accordion {
     var displayName: string;
 }