@crisp-ui-kit/crisp 0.54.0 → 0.54.2

package/dist/esm/product/savedviews/savedviews.recipe.js

@@ -0,0 +1,100 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// A saved-view switcher — measured live from Attio's own "All Companies ▾"
+// trigger (app.attio.com/techpartners/companies): a 28px chip opens a
+// popover of 32px `role="option"` rows, each revealing a 20px kebab on
+// hover that opens a second, identical-chrome popover of rename/duplicate/
+// delete actions. The trigger stays un-portaled (`&`-nested); the panel and
+// its rows portal to document.body (#339), so they live in `globalCss`, not
+// nested under `&` — the same split Menu/MultiSelect use and for the same
+// reason: a descendant selector needs real DOM containment, which the
+// portal breaks.
+//
+// Panel chrome (radius 12 / 4px padding / elevation.floating) and row height
+// (32px) are the exact values Menu's own `crisp-menu-content`/`crisp-menu-item`
+// already carry — reused by reference (radius.xl, space["1"], size.menuRow,
+// elevation.floating), not re-measured, since it is the same overlay
+// surface. The panel's measured 308.75×182 size is deliberately NOT
+// hardcoded — it grows with the number of views — so width/height are left
+// to content, with the same 200px floor Menu's own popover uses.
+const config = defineRecipe({
+    name: "savedviews",
+    base: `
+    position: relative; display: inline-flex; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
+       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
+       screenshot/anti-aliasing noise, not a second real colour. Reusing the
+       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
+       already-established dark-mode fill for free instead of a light-only
+       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
+       wrong (a flat colour that stayed visible where the reference had
+       none) — this is the opposite risk (a token that already flips per
+       theme, applied to the closest measured match). */
+    & .crisp-savedviews-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: ${c.space["1.5"]};
+      height: ${c.size.row}; margin: 0; padding: ${c.space["1"]} ${c.space["1.5"]};
+      border: none; border-radius: ${c.radius.md}; background: ${c.bgRaised};
+      font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
+      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
+    }
+    & .crisp-savedviews-trigger:hover,
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgRaised}); }
+    & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: ${c.size.icon}; height: ${c.size.icon}; }
+    & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: ${c.fgMuted}; }
+  `,
+    globalCss: `
+    /* pointer-events: auto (#375) — see Menu/MultiSelect's matching comment:
+       a modal Dialog sets pointer-events: none on document.body, and a
+       portaled layer outside Zag's knowledge inherits that lock. */
+    .crisp-savedviews-panel {
+      font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${c.space["1"]};
+      border-radius: ${c.radius.xl}; background: ${c.bgPopover};
+      box-shadow: ${e.floating};
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
+    .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-savedviews-row {
+      box-sizing: border-box; position: relative; display: flex; align-items: center; gap: ${c.space["1.5"]};
+      height: ${c.size.menuRow}; flex-shrink: 0; padding: ${c.space["1.5"]} ${c.space["2"]};
+      border-radius: ${c.radius.md}; cursor: pointer; -webkit-user-select: none; user-select: none;
+    }
+    .crisp-savedviews-row:hover, .crisp-savedviews-row[data-highlighted] { background: ${c.bgRaised}; }
+    .crisp-savedviews-row-icon { flex-shrink: 0; display: inline-flex; width: ${c.size.icon}; height: ${c.size.icon}; color: ${c.fgMuted}; }
+    .crisp-savedviews-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    .crisp-savedviews-row[aria-selected="true"] .crisp-savedviews-row-label { font-weight: ${c.weight.semibold}; }
+    .crisp-savedviews-row-shared { flex-shrink: 0; display: inline-flex; color: ${c.fgMuted}; }
+
+    /* The kebab's own <Menu> is wrapped in a slot div (savedviews.tsx) that
+       stops a click from bubbling — through the REACT tree, which a portal
+       does not leave, even though the Menu's content is a DOM sibling under
+       document.body — into the row's own onClick. The slot, not the kebab
+       button itself, is what the row's flex layout pushes to the trailing
+       edge. */
+    .crisp-savedviews-kebab-slot { flex-shrink: 0; margin-inline-start: auto; }
+    /* 20px / 4px padding is a component-intrinsic size (AUTHORING.md §4b —
+       "a badge's 20px" is the named example), used once here: raw, not a
+       scale step. */
+    .crisp-savedviews-kebab {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; padding: ${c.space["1"]}; margin: 0;
+      border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; cursor: pointer;
+      opacity: 0; transition: opacity .1s ease, background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-row:hover .crisp-savedviews-kebab,
+    .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
+    .crisp-savedviews-kebab[data-open] { opacity: 1; }
+    .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: ${c.bgSurface}; color: ${c.fgPrimary}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const savedviewsRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/taskstable/index.js

@@ -0,0 +1,2 @@
+export { TasksTable, } from "./taskstable.js";
+export { taskstableRecipe } from "./taskstable.recipe.js";

package/dist/esm/product/taskstable/taskstable.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, useCrispMessage, useCrispMessages } from "../../core/index.js";
+import { ListRow, listpageRecipe } from "../listpage/index.js";
+import { taskstableRecipe } from "./taskstable.recipe.js";
+function Cell({ flex, className, children, }) {
+    return (_jsx("span", { className: cx("crisp-taskstable-cell", className), style: { flex }, children: children }));
+}
+/**
+ * A grouped due-date table pattern — Attio's Tasks page. Composes
+ * `ListPage`'s toolbar and group-row chrome (both class-compatible; see
+ * taskstable.recipe.ts) with a typed column/cell layer: a title+checkbox
+ * row grouped into due-date sections, a due-date cell that goes red past
+ * due, and consumer-supplied record/assignee chip slots.
+ */
+export function TasksTable({ columns, groups, leading, trailing, emptyLabel: emptyLabelProp, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, className, ...rest }) {
+    const crispMessages = useCrispMessages();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No tasks"] ?? "No tasks";
+    const completeLabel = useCrispMessage(completeLabelProp, "Mark complete");
+    const incompleteLabel = useCrispMessage(incompleteLabelProp, "Mark incomplete");
+    const flexOf = (key) => columns.find((col) => col.key === key)?.flex ?? 1;
+    const total = groups.reduce((s, g) => s + g.rows.length, 0);
+    return (_jsxs("div", { className: cx(taskstableRecipe({ className }), listpageRecipe()), ...rest, children: [_jsxs("div", { className: "crisp-listpage-toolbar", children: [_jsx("div", { className: "crisp-listpage-toolbar-lead", children: leading }), trailing != null && (_jsx("div", { className: "crisp-listpage-toolbar-trail", children: trailing }))] }), _jsxs("div", { className: "crisp-listpage-body", children: [_jsx("div", { className: "crisp-taskstable-colhead", children: columns.map((col) => (_jsxs("span", { className: "crisp-taskstable-colhead-cell", style: { flex: col.flex ?? 1 }, children: [col.icon, col.label] }, col.key))) }), total === 0 ? (_jsx("div", { className: "crisp-taskstable-empty", children: emptyLabel })) : (groups.map((g) => (_jsxs("div", { children: [_jsxs("div", { className: "crisp-listpage-group", children: [g.label, _jsx("span", { className: "crisp-listpage-group-count", children: g.count })] }), g.rows.map((row) => (_jsx(ListRow, { children: _jsxs("div", { className: "crisp-taskstable-row", style: { flex: 1 }, children: [_jsxs(Cell, { flex: flexOf("title"), children: [_jsx("input", { type: "checkbox", className: "crisp-taskstable-check", checked: !!row.done, "aria-label": row.done ? incompleteLabel : completeLabel, onChange: () => row.onToggle?.(!row.done) }), _jsx("span", { className: "crisp-taskstable-title", children: row.title })] }), _jsx(Cell, { flex: flexOf("due"), children: row.due != null && (_jsx("span", { className: "crisp-taskstable-due", "data-overdue": row.due.overdue ? "" : undefined, children: row.due.label })) }), _jsx(Cell, { flex: flexOf("record"), children: row.record }), _jsx(Cell, { flex: flexOf("assignee"), children: row.assignee })] }) }, row.id)))] }, g.id))))] })] }));
+}
+TasksTable.displayName = "TasksTable";

package/dist/esm/product/taskstable/taskstable.recipe.js

@@ -0,0 +1,44 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A grouped due-date table — Attio's Tasks page (app.attio.com/<ws>/tasks),
+// measured live and recorded on crisp#462. Composes ListPage's own toolbar
+// (`.crisp-listpage-toolbar`) and group-row (`.crisp-listpage-group`) chrome
+// by carrying BOTH this recipe's root class and `listpageRecipe`'s root class
+// on the same element (see taskstable.tsx) -- both recipes' descendant rules
+// nest under their own root class, so this is a safe, ordinary composition,
+// the same way `<ListRow>` already lets a caller compose into `ListPage`'s
+// group bodies. Real deviation: ListPage's own `columns` colhead slot is
+// pinned to `c.size.menuRow` (32px, correct for its Reports/Sequences
+// reference surfaces per #479) but Tasks/Notes independently measure a 49px
+// column-header row (#462) -- ListPage's colhead can't be asked to render at
+// a different height per consumer today, so this component renders its own
+// colhead instead of using that slot. Flagged in the PR, not fixed here (out
+// of scope: don't change ListPage for this component).
+const config = defineRecipe({
+    name: "taskstable",
+    base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${c.font.sans}; color: ${c.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-taskstable-colhead { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-height: 49px; max-height: 49px; padding: ${c.space["2.5"]} ${c.space["3"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-taskstable-colhead-cell { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
+
+    & .crisp-taskstable-row { display: flex; align-items: center; gap: ${c.space["1.5"]}; }
+    & .crisp-taskstable-cell { display: flex; align-items: center; min-width: 0; }
+
+    & .crisp-taskstable-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${c.radius.full}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
+    & .crisp-taskstable-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); }
+    & .crisp-taskstable-check:checked { background: ${c.bgBrandSolid} center / 10px no-repeat; box-shadow: none; 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"); }
+    & .crisp-taskstable-check:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+
+    & .crisp-taskstable-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+
+    & .crisp-taskstable-due { font-size: ${c.text.lg}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .crisp-taskstable-due[data-overdue] { color: ${c.fgDanger}; }
+
+    & .crisp-taskstable-empty { padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const taskstableRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/themepicker/index.js

@@ -0,0 +1 @@
+export * from "./themepicker.js";

package/dist/esm/product/themepicker/themepicker.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRadioGroupKeyboard } from "../../components/radiogroup/index.js";
+import { useCrispMessage } from "../../core/index.js";
+import { themepickerRecipe } from "./themepicker.recipe.js";
+const OPTIONS = ["light", "dark", "system"];
+function PreviewSwatch({ swatch }) {
+    return (_jsxs("div", { className: "crisp-themepicker-preview", "data-swatch": swatch, children: [_jsxs("div", { className: "crisp-themepicker-preview-side", children: [_jsx("div", { className: "crisp-themepicker-preview-bar" }), _jsx("div", { className: "crisp-themepicker-preview-bar" }), _jsx("div", { className: "crisp-themepicker-preview-bar" })] }), _jsxs("div", { className: "crisp-themepicker-preview-main", children: [_jsx("div", { className: "crisp-themepicker-preview-bar" }), _jsx("div", { className: "crisp-themepicker-preview-bar" }), _jsx("div", { className: "crisp-themepicker-preview-bar" })] })] }));
+}
+/**
+ * A light/dark/system theme picker — three cards, each a small preview of
+ * what that option looks like, radio-selectable. See the recipe's own doc
+ * comment for the live Attio measurement (crisp#462 gap 4) and for why the
+ * preview swatch colours are literal rather than `var(--crisp-*)` tokens.
+ */
+export function ThemePicker({ value, onChange, labels, className, ...rest }) {
+    const lightLabel = useCrispMessage(labels?.light, "Light");
+    const darkLabel = useCrispMessage(labels?.dark, "Dark");
+    const systemLabel = useCrispMessage(labels?.system, "System");
+    const labelFor = {
+        light: lightLabel,
+        dark: darkLabel,
+        system: systemLabel,
+    };
+    const { onKeyDown, groupRef } = useRadioGroupKeyboard({
+        select: (v) => onChange(v),
+    });
+    return (_jsx("div", { ref: groupRef, className: themepickerRecipe({ className }), role: "radiogroup", onKeyDown: onKeyDown, ...rest, children: OPTIONS.map((option) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === option, "data-value": option, className: "crisp-themepicker-option", "data-selected": value === option ? "" : undefined, onClick: () => onChange(option), children: [_jsx(PreviewSwatch, { swatch: option }), _jsxs("span", { className: "crisp-themepicker-label", children: [_jsx("span", { className: "crisp-themepicker-radio", "aria-hidden": "true" }), labelFor[option]] })] }, option))) }));
+}
+ThemePicker.displayName = "ThemePicker";

package/dist/esm/product/themepicker/themepicker.recipe.js

@@ -0,0 +1,95 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A theme picker (crisp#571) — measured live at
+// app.attio.com/<ws>/settings/appearance (Settings -> Appearance -> Theme,
+// its "Light" / "Dark" / "System" tiles):
+// each option is a 224x152 card, 16px radius, on a flex row with an 8px
+// gap. Selected carries a 1px solid brand-blue border (theme-constant
+// #266df0, matches `bgBrandSolid`); unselected carries the ordinary
+// hairline (`borderSubtle`). Inside, a ~214x114 mock-UI preview card sits
+// on the same 12px radius / 1px hairline chrome the real Sidebar itself
+// uses, with a label row below (a radio dot + 14px/500 text, `fgPrimary`
+// when selected, muted when not).
+//
+// The preview card's OWN colours are deliberately literal, not `var(--crisp-*)`
+// tokens: they must show what "Light"/"Dark" look like regardless of the
+// picker's own ambient theme (a dark-mode app still needs its "Light" tile
+// to render light), and crisp's token system only has one live value per
+// custom property at a time -- there's no way to force a light subtree
+// inside a dark ancestor without one. This is also how Attio's own tiles
+// behave: their preview is a fixed illustration asset, not theme-reactive
+// markup (confirmed by reading the SVG's own baked-in fills while the app
+// itself was in light mode: the "Dark" tile's fills were already dark).
+// The literals below are simply the EXISTING dual-theme tokens' own two
+// values, spelled out per swatch rather than invented fresh: bgSidebar
+// (#fbfbfb / #0e0f10), gray00/bgSurface (#ffffff / #0a0a0a), borderSubtle
+// (#eeeff1 / #1c1d1f) -- each matches what Attio's own SVG measured
+// (#0B0C0D-#101112 range for backgrounds, #1B1C1F for dividers) closely
+// enough to treat as the same token rather than a fresh, barely-different
+// one. `bgBrandSolid` (#266df0) IS referenced live since it's already
+// theme-constant.
+//
+// "System" mirrors the OS's own effective scheme via `prefers-color-scheme`,
+// not a guessed split illustration: this session's own System tile
+// rendered with the SAME fills as the Light tile while the OS/browser
+// reported light -- reads as "follows the OS", not a fixed half-and-half
+// image there's no other evidence for.
+//
+// The mock-UI content inside each preview card (Attio's own hand-drawn
+// sidebar/content wireframe SVG) is NOT reproduced pixel-for-pixel here --
+// that illustration is decorative, not a measured design value, so this
+// recipe draws a simplified schematic (a sidebar block + a few content
+// bars) instead of a bespoke SVG asset.
+//
+// Attio's unselected label reads a black-alpha `rgba(0,0,0,0.63)`, the
+// same pattern SettingsSection's own subtitle measured (crisp#522) and
+// left unresolved for the same reason: no confirmed dark-mode value yet.
+// `fgMuted` is used here as the closest existing (and already dual-theme)
+// token rather than repeating an unmeasured-in-dark literal.
+const config = defineRecipe({
+    name: "themepicker",
+    base: `display: flex; gap: ${c.space["2"]}; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-themepicker-option { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: ${c.space["1.5"]}; width: 224px; padding: ${c.space["1"]}; border: 1px solid ${c.borderSubtle}; border-radius: 16px; background: ${c.bgSurface}; cursor: pointer; font-family: inherit; }
+    & .crisp-themepicker-option[data-selected] { border-color: ${c.bgBrandSolid}; }
+
+    & .crisp-themepicker-preview { box-sizing: border-box; display: flex; width: 100%; height: 114px; padding: ${c.space["2"]}; gap: ${c.space["1.5"]}; border-radius: ${c.radius.xl}; overflow: hidden; }
+    & .crisp-themepicker-preview-side { flex-shrink: 0; width: 28%; display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+    & .crisp-themepicker-preview-bar { height: 4px; border-radius: ${c.radius.full}; }
+    & .crisp-themepicker-preview-bar:nth-child(1) { width: 70%; background: ${c.bgBrandSolid}; }
+    & .crisp-themepicker-preview-bar:nth-child(2) { width: 90%; }
+    & .crisp-themepicker-preview-bar:nth-child(3) { width: 60%; }
+    & .crisp-themepicker-preview-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: ${c.space["1.5"]}; padding: ${c.space["1.5"]}; border-radius: ${c.radius.md}; }
+
+    /* Light / System (default) swatch colours. */
+    & .crisp-themepicker-preview[data-swatch="light"],
+    & .crisp-themepicker-preview[data-swatch="system"] { border: 1px solid #eeeff1; background: #fbfbfb; }
+    & [data-swatch="light"] .crisp-themepicker-preview-bar:not(:nth-child(1)),
+    & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #eeeff1; }
+    & [data-swatch="light"] .crisp-themepicker-preview-main,
+    & [data-swatch="system"] .crisp-themepicker-preview-main { background: #ffffff; }
+    & [data-swatch="light"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar,
+    & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #eeeff1; }
+
+    /* Dark swatch colours -- always for "dark", and for "system" only
+       when the OS itself reports dark. */
+    & .crisp-themepicker-preview[data-swatch="dark"] { border: 1px solid #1c1d1f; background: #0e0f10; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-main { background: #0a0a0a; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #1c1d1f; }
+    @media (prefers-color-scheme: dark) {
+      & .crisp-themepicker-preview[data-swatch="system"] { border: 1px solid #1c1d1f; background: #0e0f10; }
+      & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; }
+      & [data-swatch="system"] .crisp-themepicker-preview-main { background: #0a0a0a; }
+      & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #1c1d1f; }
+    }
+
+    & .crisp-themepicker-label { display: flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-label { color: ${c.fgPrimary}; }
+    & .crisp-themepicker-radio { flex-shrink: 0; width: 14px; height: 14px; border-radius: ${c.radius.full}; border: 1px solid ${c.borderDefault}; box-sizing: border-box; }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-radio { border: 4px solid ${c.bgBrandSolid}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const themepickerRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/tokens/palette.js

@@ -9,6 +9,14 @@ export const palette = {
     gray900: { light: "#101112", dark: "#f5f5f5" },
     line200: { light: "#e4e4e7", dark: "#212224" },
     line100: { light: "#eeeff1", dark: "#1c1d1f" },
+    // ImportDialog's dropzone border — measured live from Attio's Import CSV
+    // flow (`rgb(230,231,234)`), distinct from `line200`/`line100` (#e4e4e7 /
+    // #eeeff1 are close but not equal, and AUTHORING's dimensional-scale rule
+    // against rounding a measurement to fit an existing token applies to color
+    // too). Dark value not independently re-measured (Attio's dark theme is
+    // off-limits to toggle, same restriction as `ringField`/`ringSwitch`) —
+    // reuses `line200`'s dark line colour rather than inventing a new one.
+    line150: { light: "#e6e7ea", dark: "#212224" },
     ringNeutral: { light: "transparent", dark: "#212224" },
     // Text-entry fields (Input, Textarea) — measured live on app.attio.com's
     // Settings page, a real typed field: `inset 0 0 0 1px rgba(0,0,0,.06)`,
@@ -49,6 +57,15 @@ export const palette = {
     // #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
     // destructive control needs the same white-bearing fill in both themes.
     red700: { light: "#ba2525", dark: "#ba2525" },
+    // The #EB3B3B named in red700's own comment above (destructive menu text) —
+    // it had never actually been given a token. Independently re-measured live
+    // on `app.attio.com/.../tasks`, `rgb(235,59,59)`, as the overdue due-date
+    // text colour on the Tasks page (crisp#462) — same hex, second surface.
+    // Dark not independently re-measured (Attio's theme toggle is off-limits,
+    // same restriction noted throughout this file); reuses red600's dark value,
+    // the same "brightens for legibility on a dark surface" tone this red
+    // already sits next to, rather than inventing a third red.
+    red500: { light: "#eb3b3b", dark: "#ff5a5f" },
     // seed-design's field focus ring (stroke-neutral-contrast = gray-1000),
     // measured from @seed-design/css. A high-contrast neutral rather than a brand
     // hue: the ring reads as "this field has focus", not as a state colour.
@@ -97,4 +114,18 @@ export const palette = {
     // as-is per build/spec-check.mjs's own note), this token exists only for
     // Badge's soft-neutral text, so darkening it doesn't move any other surface.
     softNeutralText: { light: "#686870", dark: "#9a9aa2" },
+    // Badge's purple/role-pill tone (crisp#506) -- measured live off Attio's
+    // own role pill ("Admin", app.attio.com/<ws>/settings/members-and-teams):
+    // background rgb(245,240,255), text rgb(98,56,181), ring rgb(232,221,254)
+    // (cross-validated against a second, independent pill sharing the
+    // identical background, a company's "Broadcasting" Categories tag).
+    // Dark mode (crisp#566) measured the same way, after switching Attio's
+    // own Appearance setting to Dark, reading the pill, then switching back
+    // to Light to restore the original state: background rgb(47,30,90),
+    // text rgb(216,196,255), ring rgb(69,41,125) -- verify-the-right-element
+    // note: the pill's own wrapper span inherits an unstyled rgb(241,242,243)
+    // text colour; the real styled colour sits on its nested leaf text node.
+    purpleTint: { light: "#f5f0ff", dark: "#2f1e5a" },
+    softPurpleText: { light: "#6238b5", dark: "#d8c4ff" },
+    purpleRing: { light: "#e8ddfe", dark: "#45297d" },
 };

package/dist/esm/tokens/semantic.js

@@ -10,6 +10,8 @@ export const semantic = {
     bgRaised: "gray50",
     borderDefault: "line200",
     borderSubtle: "line100",
+    /** ImportDialog's dashed dropzone border — see palette.ts's `line150`. */
+    borderDropzone: "line150",
     ringNeutral: "ringNeutral",
     ringField: "ringField",
     ringSwitch: "ringSwitch",
@@ -29,6 +31,10 @@ export const semantic = {
     bgDanger: "red600",
     /** Fill for a SOLID destructive control that carries white text. */
     bgDangerSolid: "red700",
+    /** Solid critical/destructive TEXT (not a fill) — an overdue due-date, a
+     * destructive menu item's label. Distinct from `bgDanger` (a fill colour)
+     * and `fgDangerSoft` (a soft badge pill's text, a different measured hex). */
+    fgDanger: "red500",
     /** The 2px ring a text field shows while focused. */
     strokeFieldFocus: "fieldFocus",
     /** Unavailable/disabled content: unselected wheel rows, unpickable dates. */
@@ -60,4 +66,9 @@ export const semantic = {
     fgWarningSoft: "softWarningText",
     fgDangerSoft: "softDangerText",
     fgNeutralSoft: "softNeutralText",
+    /** Badge's purple/role-pill tone (crisp#506) — see palette.ts's comment
+     * on `purpleTint`/`softPurpleText`/`purpleRing` for the measurement. */
+    bgPurpleSoft: "purpleTint",
+    fgPurpleSoft: "softPurpleText",
+    ringPurpleSoft: "purpleRing",
 };

package/dist/formdialog.css

@@ -0,0 +1,6 @@
+.crisp-formdialog {
+  & .crisp-formdialog-createfoot { display: flex; align-items: center; gap: var(--crisp-space-4); }
+    & .crisp-formdialog-more-label { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-formdialog-error { font-size: var(--crisp-text-md); color: var(--crisp-fg-danger); margin: 0; }
+    & .crisp-formdialog-form { display: grid; gap: var(--crisp-space-3); }
+}

package/dist/formdialog.d.ts

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

package/dist/formdialog.layered.css

@@ -0,0 +1,8 @@
+@layer crisp-components {
+.crisp-formdialog {
+  & .crisp-formdialog-createfoot { display: flex; align-items: center; gap: var(--crisp-space-4); }
+    & .crisp-formdialog-more-label { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-formdialog-error { font-size: var(--crisp-text-md); color: var(--crisp-fg-danger); margin: 0; }
+    & .crisp-formdialog-form { display: grid; gap: var(--crisp-space-3); }
+}
+}

package/dist/importdialog.css

@@ -0,0 +1,38 @@
+.crisp-importdialog {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-importdialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-importdialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .crisp-importdialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; border-radius: 0; background: var(--crisp-bg-surface); box-shadow: none; transform: none; opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
+    & .crisp-importdialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-6); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-importdialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-importdialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-importdialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-importdialog-steps { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; padding: var(--crisp-space-4) var(--crisp-space-6) 0; }
+    & .crisp-importdialog-step { display: inline-flex; align-items: center; height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: default; transition: background-color .12s, color .12s; }
+    & button.crisp-importdialog-step { cursor: pointer; }
+    & .crisp-importdialog-step[data-active] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
+    & .crisp-importdialog-step:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 1px; }
+    & .crisp-importdialog-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: var(--crisp-space-6); }
+    & .crisp-importdialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--crisp-space-3); flex-shrink: 0; min-height: 56px; padding: 0 var(--crisp-space-6); border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-importdialog-dropzone { box-sizing: border-box; position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); width: 100%; border: 1px dashed var(--crisp-border-dropzone); border-radius: 20px; background: var(--crisp-bg-subtle); text-align: center; transition: background-color .12s, border-color .12s; }
+    & .crisp-importdialog-dropzone[data-dragging-over] { border-color: var(--crisp-bg-brand-solid); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 6%, transparent); }
+    & .crisp-importdialog-dropzone[data-invalid] { border-color: var(--crisp-bg-danger); }
+    & .crisp-importdialog-dropzone-title { color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-importdialog-dropzone-or { color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); line-height: 18px; }
+    & .crisp-importdialog-dropzone-choose { border: none; background: none; padding: 0; margin: 0; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid); cursor: pointer; }
+    & .crisp-importdialog-dropzone-choose:hover { color: var(--crisp-bg-brand-solid-pressed); }
+    & .crisp-importdialog-dropzone-choose:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 2px; border-radius: var(--crisp-radius-sm); }
+    & .crisp-importdialog-dropzone-learnmore { color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-decoration: underline; }
+    & .crisp-importdialog-dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-importdialog-dropzone-errors { margin: 0; padding: 0; list-style: none; }
+    & .crisp-importdialog-dropzone-errors:empty { position: absolute; }
+    & .crisp-importdialog-dropzone-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-importdialog, .crisp-importdialog * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/importdialog.d.ts

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

package/dist/importdialog.layered.css

@@ -0,0 +1,40 @@
+@layer crisp-components {
+.crisp-importdialog {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-importdialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-importdialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .crisp-importdialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; border-radius: 0; background: var(--crisp-bg-surface); box-shadow: none; transform: none; opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
+    & .crisp-importdialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-6); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-importdialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-importdialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-importdialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-importdialog-steps { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; padding: var(--crisp-space-4) var(--crisp-space-6) 0; }
+    & .crisp-importdialog-step { display: inline-flex; align-items: center; height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: default; transition: background-color .12s, color .12s; }
+    & button.crisp-importdialog-step { cursor: pointer; }
+    & .crisp-importdialog-step[data-active] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
+    & .crisp-importdialog-step:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 1px; }
+    & .crisp-importdialog-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: var(--crisp-space-6); }
+    & .crisp-importdialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--crisp-space-3); flex-shrink: 0; min-height: 56px; padding: 0 var(--crisp-space-6); border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-importdialog-dropzone { box-sizing: border-box; position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); width: 100%; border: 1px dashed var(--crisp-border-dropzone); border-radius: 20px; background: var(--crisp-bg-subtle); text-align: center; transition: background-color .12s, border-color .12s; }
+    & .crisp-importdialog-dropzone[data-dragging-over] { border-color: var(--crisp-bg-brand-solid); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 6%, transparent); }
+    & .crisp-importdialog-dropzone[data-invalid] { border-color: var(--crisp-bg-danger); }
+    & .crisp-importdialog-dropzone-title { color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-importdialog-dropzone-or { color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); line-height: 18px; }
+    & .crisp-importdialog-dropzone-choose { border: none; background: none; padding: 0; margin: 0; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid); cursor: pointer; }
+    & .crisp-importdialog-dropzone-choose:hover { color: var(--crisp-bg-brand-solid-pressed); }
+    & .crisp-importdialog-dropzone-choose:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 2px; border-radius: var(--crisp-radius-sm); }
+    & .crisp-importdialog-dropzone-learnmore { color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-decoration: underline; }
+    & .crisp-importdialog-dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-importdialog-dropzone-errors { margin: 0; padding: 0; list-style: none; }
+    & .crisp-importdialog-dropzone-errors:empty { position: absolute; }
+    & .crisp-importdialog-dropzone-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-importdialog, .crisp-importdialog * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/mentionchip.css

@@ -0,0 +1,3 @@
+.crisp-mention-chip {
+  display: inline; border-radius: var(--crisp-radius-chip); padding-inline: var(--crisp-space-1); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); font-weight: var(--crisp-weight-medium); cursor: default;
+}

package/dist/mentionchip.d.ts

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

package/dist/mentionchip.layered.css

@@ -0,0 +1,5 @@
+@layer crisp-components {
+.crisp-mention-chip {
+  display: inline; border-radius: var(--crisp-radius-chip); padding-inline: var(--crisp-space-1); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); font-weight: var(--crisp-weight-medium); cursor: default;
+}
+}

package/dist/native/tokens.d.ts

@@ -2,7 +2,7 @@
 // The same tokens the CSS custom properties carry, resolved per theme, with
 // dimensions as numbers for React Native and Lynx style objects.
 export type Theme = "light" | "dark";
-export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft", string>;
+export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "borderDropzone" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft", string>;
 export declare const tokens: {
   color: Record<Theme, ColorTokens>;
   palette: Record<Theme, Record<string, string>>;