@crisp-ui-kit/crisp 0.57.3 → 0.57.4

package/dist/assigneepicker.css

@@ -0,0 +1,13 @@
+.crisp-assigneepicker {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: var(--crisp-font-sans);
+    & .crisp-assigneepicker-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding: 0 var(--crisp-space-3); color: var(--crisp-fg-muted); }
+    & .crisp-assigneepicker-search svg { flex-shrink: 0; }
+    & .crisp-assigneepicker-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; color: var(--crisp-fg-primary); }
+    & .crisp-assigneepicker-search-input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-assigneepicker-pill { display: flex; padding: 0 var(--crisp-space-3) var(--crisp-space-2); }
+    & .crisp-assigneepicker-remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; margin: 0; padding: 0; border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; }
+    & .crisp-assigneepicker-empty { padding: var(--crisp-space-4) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-assigneepicker-list { display: flex; flex-direction: column; margin: 0; padding: var(--crisp-space-1); list-style: none; }
+    & .crisp-assigneepicker-option { display: flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-assigneepicker-option:hover, & .crisp-assigneepicker-option[data-highlighted] { background: var(--crisp-bg-raised); }
+}

package/dist/assigneepicker.d.ts

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

package/dist/assigneepicker.layered.css

@@ -0,0 +1,15 @@
+@layer crisp-components {
+.crisp-assigneepicker {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: var(--crisp-font-sans);
+    & .crisp-assigneepicker-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding: 0 var(--crisp-space-3); color: var(--crisp-fg-muted); }
+    & .crisp-assigneepicker-search svg { flex-shrink: 0; }
+    & .crisp-assigneepicker-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; color: var(--crisp-fg-primary); }
+    & .crisp-assigneepicker-search-input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-assigneepicker-pill { display: flex; padding: 0 var(--crisp-space-3) var(--crisp-space-2); }
+    & .crisp-assigneepicker-remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; margin: 0; padding: 0; border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; }
+    & .crisp-assigneepicker-empty { padding: var(--crisp-space-4) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-assigneepicker-list { display: flex; flex-direction: column; margin: 0; padding: var(--crisp-space-1); list-style: none; }
+    & .crisp-assigneepicker-option { display: flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-assigneepicker-option:hover, & .crisp-assigneepicker-option[data-highlighted] { background: var(--crisp-bg-raised); }
+}
+}

package/dist/button.css

@@ -25,7 +25,7 @@
   height: 24px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-md); border-radius: var(--crisp-radius-md);
 }
 .crisp-button--size_xs {
-  height: 20px; padding-inline: var(--crisp-space-1-5); font-size: 10px; font-weight: var(--crisp-weight-regular); line-height: 15px; letter-spacing: normal; border-radius: var(--crisp-radius-sm); gap: var(--crisp-space-1);
+  height: 20px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); line-height: 16px; letter-spacing: normal; border-radius: var(--crisp-radius-sm); gap: var(--crisp-space-1);
 }
 .crisp-button--size_md {
   height: 28px; padding-inline: var(--crisp-space-2); font-size: var(--crisp-text-lg); border-radius: var(--crisp-radius-md);

package/dist/button.layered.css

@@ -26,7 +26,7 @@
   height: 24px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-md); border-radius: var(--crisp-radius-md);
 }
 .crisp-button--size_xs {
-  height: 20px; padding-inline: var(--crisp-space-1-5); font-size: 10px; font-weight: var(--crisp-weight-regular); line-height: 15px; letter-spacing: normal; border-radius: var(--crisp-radius-sm); gap: var(--crisp-space-1);
+  height: 20px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); line-height: 16px; letter-spacing: normal; border-radius: var(--crisp-radius-sm); gap: var(--crisp-space-1);
 }
 .crisp-button--size_md {
   height: 28px; padding-inline: var(--crisp-space-2); font-size: var(--crisp-text-lg); border-radius: var(--crisp-radius-md);

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

@@ -135,19 +135,24 @@ const spec = (0, core_1.defineSpec)({
             // shape="icon" already does for every other size, so it needs no
             // extra rule), 4px gap between multiple children.
             //
-            // The label itself is NOT 14px/#682's tracking -- getComputedStyle on
-            // the live button (fonts loaded, DPR 2, zero zoom/transform anywhere
-            // in the ancestor chain) reads 10px/regular/15px line-height/normal
-            // tracking, independently matching `recordpanel.recipe.ts`'s own
-            // "View all" measurement (10px/400) elsewhere in this codebase. 10px
-            // sits below the text scale's 11px floor, so it's a literal here, the
-            // same as recordpanel's.
+            // Follow-up correction (still #688): the label is 12px/500(medium)/
+            // 16px line-height/normal tracking -- NOT #682's 14px button tracking,
+            // and NOT the 10px/regular/15px this file shipped with first. That
+            // first pass read getComputedStyle on the `<button>` element itself;
+            // Attio's actual label lives in an inner `<div>` that overrides
+            // font-size/weight/line-height on top of it (confirmed by walking the
+            // full child tree, on "View all" AND "Today, <date>", both Home and
+            // the savedviews toolbar's own "Save for everyone") -- the outer
+            // button's own 10px/400/15px is real but never what's on screen.
+            // 12px is already `c.text.sm` and 500 is already the base's own
+            // default `fontWeight` (no override needed for either); only
+            // line-height and tracking still diverge from the base's 20px/
+            // -0.07px and need their own values here.
             xs: {
                 height: "20px",
                 paddingInline: tokens_1.contract.space["1.5"],
-                fontSize: "10px",
-                fontWeight: tokens_1.contract.weight.regular,
-                lineHeight: "15px",
+                fontSize: tokens_1.contract.text.sm,
+                lineHeight: "16px",
                 letterSpacing: "normal",
                 borderRadius: tokens_1.contract.radius.sm,
                 gap: tokens_1.contract.space["1"],

package/dist/cjs/components/datatable/datatable.js

@@ -428,14 +428,17 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
-            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tags", children: tags.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tags", children: tags.map((t) => col.swatches?.[t] ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-swatch", "data-swatch": col.swatches[t], children: t }, t)) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
         }
         case "status": {
             const s = asText(value);
             if (!s)
                 return empty;
-            // tone is looked up by the RAW status, so formatting the label (casing,
-            // translation) can never silently repaint the chip
+            // tone/swatch is looked up by the RAW status, so formatting the label
+            // (casing, translation) can never silently repaint the chip
+            if (col.swatches?.[s]) {
+                return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-swatch", "data-swatch": col.swatches[s], children: display || s }));
+            }
             return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         case "rating": {

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

@@ -318,9 +318,24 @@ const config = (0, core_1.defineRecipe)({
        Avatar's own already-shipped shape="rounded" value, not a new number.
        shape="circle" reuses Avatar's own shape="circle" value (radius.full)
        the same way, measured live on a real Attio person avatar. */
-    & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnTone}; background: ${tokens_1.contract.bgBrandSolid}; }
     & .crisp-datatable-avatar[data-shape="circle"] { border-radius: ${tokens_1.contract.radius.full}; }
-    & .crisp-datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; }
+    /* your-moon/crisp#891: every data-tone override painted ONLY a
+       background, inheriting the base rule's white fgOnBrand -- white
+       clears AA against none of these seven fills (brand 3.23:1, success
+       3.96, warning 4.12, danger 3.76, purple 3.58, cyan 2.30, orange
+       2.77). fgOnTone (ink, #101112 -- semantic.ts's own comment: "dark ink
+       clears AA on every tone in both themes") clears 4.5:1+ on every fill
+       here with a comfortable margin (brand 5.85, success 4.77/6.29,
+       danger 5.03/6.19, purple 5.27, cyan 8.23, orange 6.83, light/dark),
+       so the base rule's colour moves there and every override keeps it --
+       EXCEPT warning, whose raw fill (bgWarning) only clears 4.59:1 in
+       light, too thin a margin to rely on: it takes bgWarningSolid instead,
+       the same solid-warning-plus-ink pair Badge's own solid variant
+       already established (13.98/7.83), for the same reason (see
+       tokens/palette.ts's amberSolid comment). No background changes
+       otherwise -- the fills themselves are unaffected, only the text. */
+    & .crisp-datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarningSolid}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; color: ${tokens_1.contract.fgOnTone}; }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
@@ -331,6 +346,24 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured
+       live, see tokens/palette.ts's tagSwatch1 comment) -- flat black
+       text, no ring, unlike the tone family above. 7px radius/10px text
+       are measured literals (no matching step in the shared scale, same
+       as Select's own .crisp-select-swatch). */
+    & .crisp-datatable-swatch { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${tokens_1.contract.weight.regular}; white-space: nowrap; color: ${tokens_1.contract.fgTagSwatch}; }
+    & .crisp-datatable-swatch[data-swatch="1"] { background: ${tokens_1.contract.bgTagSwatch1}; }
+    & .crisp-datatable-swatch[data-swatch="2"] { background: ${tokens_1.contract.bgTagSwatch2}; }
+    & .crisp-datatable-swatch[data-swatch="3"] { background: ${tokens_1.contract.bgTagSwatch3}; }
+    & .crisp-datatable-swatch[data-swatch="4"] { background: ${tokens_1.contract.bgTagSwatch4}; }
+    & .crisp-datatable-swatch[data-swatch="5"] { background: ${tokens_1.contract.bgTagSwatch5}; }
+    & .crisp-datatable-swatch[data-swatch="6"] { background: ${tokens_1.contract.bgTagSwatch6}; }
+    & .crisp-datatable-swatch[data-swatch="7"] { background: ${tokens_1.contract.bgTagSwatch7}; }
+    & .crisp-datatable-swatch[data-swatch="8"] { background: ${tokens_1.contract.bgTagSwatch8}; }
+    & .crisp-datatable-swatch[data-swatch="9"] { background: ${tokens_1.contract.bgTagSwatch9}; }
+    & .crisp-datatable-swatch[data-swatch="10"] { background: ${tokens_1.contract.bgTagSwatch10}; }
+    & .crisp-datatable-swatch[data-swatch="11"] { background: ${tokens_1.contract.bgTagSwatch11}; }
+    & .crisp-datatable-swatch[data-swatch="12"] { background: ${tokens_1.contract.bgTagSwatch12}; }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${tokens_1.contract.fgMuted}; }
     /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as

package/dist/cjs/components/menu/menu.js

@@ -33,8 +33,8 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
 exports.Menu = Menu;
-exports.MenuItem = MenuItem;
 exports.MenuCheckboxItem = MenuCheckboxItem;
 exports.MenuSeparator = MenuSeparator;
 exports.MenuLabel = MenuLabel;
@@ -52,7 +52,7 @@ const MenuContext = React.createContext(null);
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }) {
+function Menu({ trigger, children, align = "start", placement = "menu", open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }) {
     // The surface and the button that opens it were two unconnected nodes: the
     // menu/dialog had no id, so nothing could point at it, and no accessible
     // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
@@ -68,6 +68,7 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         onOpenChange?.(next);
     }, [openProp, onOpenChange]);
     const [up, setUp] = React.useState(false);
+    const [submenuAlign, setSubmenuAlign] = React.useState("start");
     const [pos, setPos] = React.useState({});
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
@@ -79,6 +80,38 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
+        if (placement === "submenu") {
+            // The content div is already in the DOM by this point (it's part of
+            // the same render this effect runs after, just not yet painted) so its
+            // real rendered size/padding are measurable, not guessed.
+            const content = contentRef.current;
+            const size = content?.getBoundingClientRect() ?? {
+                width: 200,
+                height: 0,
+            };
+            const padTop = content
+                ? Number.parseFloat(getComputedStyle(content).paddingTop) || 0
+                : 0;
+            const { style, align: side, up: flipUp, } = (0, core_1.placeSubmenu)({
+                // Not a `{...rect}` spread: DOMRect's numeric fields are accessors
+                // on its prototype, not own enumerable properties, so a spread
+                // silently drops everything except the two overridden below.
+                rect: {
+                    left: rect.left,
+                    right: rect.right,
+                    top: rect.top - padTop,
+                    bottom: rect.bottom - padTop,
+                },
+                size,
+                // Measured flush against the item, no gap (crisp#616).
+                gap: 0,
+                anchor: triggerRef.current,
+            });
+            setSubmenuAlign(side);
+            setUp(flipUp);
+            setPos(style);
+            return;
+        }
         const { style, up: flipUp } = (0, core_1.placeFloating)({
             rect,
             align,
@@ -181,18 +214,25 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
     });
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: contentClassName
                         ? `crisp-menu-content ${contentClassName}`
-                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, onFocus: onContentFocus, children: (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
+                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": placement === "submenu" ? submenuAlign : align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, onFocus: onContentFocus, children: (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
-function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {
+/**
+ * A row inside a `Menu`. Forwards its ref and spreads unrecognised button
+ * props (crisp#616) so it can double as another `Menu`'s own `trigger` —
+ * `Menu` clones its trigger with `ref`/`onClick`/`aria-*`, which a plain
+ * function component would silently drop.
+ */
+exports.MenuItem = React.forwardRef(function MenuItem({ children, icon, shortcut, count, trailingIcon, danger, disabled, onSelect, closeOnSelect = true, onClick, ...rest }, ref) {
     const ctx = React.useContext(MenuContext);
-    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: (e) => {
+            onClick?.(e);
             onSelect?.();
             if (closeOnSelect)
                 ctx?.close();
-        }, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children }), count != null && (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-count", children: count }), shortcut && (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
-}
-MenuItem.displayName = "MenuItem";
+        }, ...rest, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-count", children: count })), shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-shortcut", children: shortcut })), trailingIcon] }));
+});
+exports.MenuItem.displayName = "MenuItem";
 function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {
     return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "crisp-menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-menu-item-check", size: 15, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-check--placeholder" })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children })] }));
 }

package/dist/cjs/components/multiselect/multiselect.js

@@ -57,6 +57,9 @@ function toneFor(t) {
     return TONES[h % TONES.length];
 }
 function Chip({ opt }) {
+    if (opt.swatch) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-swatch", "data-swatch": opt.swatch, children: opt.label }));
+    }
     return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
 }
 /**

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

@@ -107,6 +107,24 @@ const config = (0, core_1.defineRecipe)({
     .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgPurple} 30%, transparent); }
     .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgCyan} 30%, transparent); }
     .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgOrange} 30%, transparent); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured live,
+       see tokens/palette.ts's tagSwatch1 comment) -- flat black text, no
+       ring/border, unlike the tone family above. 7px radius/10px text are
+       measured literals, no matching step in the shared scale (same as
+       Select's own .crisp-select-swatch). */
+    .crisp-multiselect-swatch { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${tokens_1.contract.weight.regular}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: ${tokens_1.contract.fgTagSwatch}; }
+    .crisp-multiselect-swatch[data-swatch="1"] { background: ${tokens_1.contract.bgTagSwatch1}; }
+    .crisp-multiselect-swatch[data-swatch="2"] { background: ${tokens_1.contract.bgTagSwatch2}; }
+    .crisp-multiselect-swatch[data-swatch="3"] { background: ${tokens_1.contract.bgTagSwatch3}; }
+    .crisp-multiselect-swatch[data-swatch="4"] { background: ${tokens_1.contract.bgTagSwatch4}; }
+    .crisp-multiselect-swatch[data-swatch="5"] { background: ${tokens_1.contract.bgTagSwatch5}; }
+    .crisp-multiselect-swatch[data-swatch="6"] { background: ${tokens_1.contract.bgTagSwatch6}; }
+    .crisp-multiselect-swatch[data-swatch="7"] { background: ${tokens_1.contract.bgTagSwatch7}; }
+    .crisp-multiselect-swatch[data-swatch="8"] { background: ${tokens_1.contract.bgTagSwatch8}; }
+    .crisp-multiselect-swatch[data-swatch="9"] { background: ${tokens_1.contract.bgTagSwatch9}; }
+    .crisp-multiselect-swatch[data-swatch="10"] { background: ${tokens_1.contract.bgTagSwatch10}; }
+    .crisp-multiselect-swatch[data-swatch="11"] { background: ${tokens_1.contract.bgTagSwatch11}; }
+    .crisp-multiselect-swatch[data-swatch="12"] { background: ${tokens_1.contract.bgTagSwatch12}; }
   `,
     variants: {
         // Owner's follow-up after #867/#879/#882 (crisp/#889): SIZE is Attio's

package/dist/cjs/components/select/select.js

@@ -217,7 +217,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, size, invalid, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? (selectedOption.swatch ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-swatch", "data-swatch": selectedOption.swatch, children: selectedOption.triggerLabel ?? selectedOption.label })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] }))) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                         onSearchChange?.(e.target.value);
@@ -228,7 +228,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
                             // heading, not one each.
                             const showGroupLabel = opt.group !== undefined &&
                                 opt.group !== filtered[i - 1]?.group;
-                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroupLabel && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), opt.description !== undefined ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-select-option-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-description", children: opt.description })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label })), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
+                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroupLabel && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [!opt.swatch && opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), opt.description !== undefined ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-select-option-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.swatch ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-swatch", "data-swatch": opt.swatch, children: opt.label })) : (opt.label) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-description", children: opt.description })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.swatch ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-swatch", "data-swatch": opt.swatch, children: opt.label })) : (opt.label) })), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
                         }))] }) }))] }));
 }
 Select.displayName = "Select";

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

@@ -137,6 +137,25 @@ const config = (0, core_1.defineRecipe)({
     .crisp-select-option[data-disabled] .crisp-select-option-description,
     .crisp-select-option[data-disabled] .crisp-select-option-check { color: ${tokens_1.contract.fgDisabled}; }
     .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; margin-inline-end: ${tokens_1.contract.space["2"]}; }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured live,
+       see tokens/palette.ts's tagSwatch1 comment) -- the label itself as a
+       filled pill, not a dot beside it. 7px radius/10px text have no
+       matching step in the shared scale (radius.xs is 4px, .sm is 6px;
+       text.xs is 11px), so both are the measured literals, same as
+       DataTable's own avatar font-size (#891). */
+    .crisp-select-swatch { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgTagSwatch}; }
+    .crisp-select-swatch[data-swatch="1"] { background: ${tokens_1.contract.bgTagSwatch1}; }
+    .crisp-select-swatch[data-swatch="2"] { background: ${tokens_1.contract.bgTagSwatch2}; }
+    .crisp-select-swatch[data-swatch="3"] { background: ${tokens_1.contract.bgTagSwatch3}; }
+    .crisp-select-swatch[data-swatch="4"] { background: ${tokens_1.contract.bgTagSwatch4}; }
+    .crisp-select-swatch[data-swatch="5"] { background: ${tokens_1.contract.bgTagSwatch5}; }
+    .crisp-select-swatch[data-swatch="6"] { background: ${tokens_1.contract.bgTagSwatch6}; }
+    .crisp-select-swatch[data-swatch="7"] { background: ${tokens_1.contract.bgTagSwatch7}; }
+    .crisp-select-swatch[data-swatch="8"] { background: ${tokens_1.contract.bgTagSwatch8}; }
+    .crisp-select-swatch[data-swatch="9"] { background: ${tokens_1.contract.bgTagSwatch9}; }
+    .crisp-select-swatch[data-swatch="10"] { background: ${tokens_1.contract.bgTagSwatch10}; }
+    .crisp-select-swatch[data-swatch="11"] { background: ${tokens_1.contract.bgTagSwatch11}; }
+    .crisp-select-swatch[data-swatch="12"] { background: ${tokens_1.contract.bgTagSwatch12}; }
     .crisp-select-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
     .crisp-select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     .crisp-select-option-description { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: ${tokens_1.contract.fgNeutralSubtle}; }

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.hasNestedFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
+exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeSubmenu = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.hasNestedFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
 var caret_rect_1 = require("./caret-rect");
 Object.defineProperty(exports, "caretRectInField", { enumerable: true, get: function () { return caret_rect_1.caretRectInField; } });
 var cell_date_1 = require("./cell-date");
@@ -47,6 +47,7 @@ var mention_1 = require("./mention");
 Object.defineProperty(exports, "matchMentionTrigger", { enumerable: true, get: function () { return mention_1.matchMentionTrigger; } });
 var place_floating_1 = require("./place-floating");
 Object.defineProperty(exports, "placeFloating", { enumerable: true, get: function () { return place_floating_1.placeFloating; } });
+Object.defineProperty(exports, "placeSubmenu", { enumerable: true, get: function () { return place_floating_1.placeSubmenu; } });
 var primitive_1 = require("./primitive");
 Object.defineProperty(exports, "Primitive", { enumerable: true, get: function () { return primitive_1.Primitive; } });
 var resolve_1 = require("./resolve");

package/dist/cjs/core/place-floating.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.placeFloating = placeFloating;
+exports.placeSubmenu = placeSubmenu;
 const direction_1 = require("./direction");
 /**
  * Where a floating layer goes, in logical terms.
@@ -36,3 +37,40 @@ function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
         style.left = rect.left;
     return { style, up };
 }
+/**
+ * Where a cascading submenu goes, BESIDE the item that opens it — not below
+ * it, the way `placeFloating`'s own dropdown does. Opens toward the inline
+ * end by default (further into the reading direction) and flips to the
+ * inline start when the surface's measured width doesn't fit there.
+ *
+ * Live-measured on Attio's own object-page "…" menu (crisp#616): the
+ * Notifications submenu sits with NO gap against the item's opposite edge
+ * (its own edge lines up exactly with the item's), so callers pass `gap: 0`
+ * for this specific cascade rather than the 4px a dropdown uses against its
+ * trigger.
+ */
+function placeSubmenu({ rect, size, gap, anchor, }) {
+    const rtl = (0, direction_1.isRtlElement)(anchor);
+    // "end" here is the inline-end direction FROM the item, e.g. further
+    // right in LTR — the room available there is measured from whichever
+    // physical edge that is.
+    const roomTowardEnd = rtl ? rect.left : window.innerWidth - rect.right;
+    const opensEnd = roomTowardEnd >= size.width + gap;
+    const align = opensEnd ? "start" : "end";
+    const style = {};
+    // Same formula as `placeFloating`'s own `toRight`, applied to the opposite
+    // geometry: there `align` picks which of the TRIGGER's edges the layer's
+    // matching edge lines up with; here it picks which side of the ITEM the
+    // layer cascades toward.
+    const anchorRight = align === "end" ? !rtl : rtl;
+    if (anchorRight)
+        style.right = window.innerWidth - rect.left + gap;
+    else
+        style.left = rect.right + gap;
+    const up = rect.top + size.height > window.innerHeight;
+    if (up)
+        style.bottom = Math.max(0, window.innerHeight - rect.bottom);
+    else
+        style.top = rect.top;
+    return { style, align, up };
+}

package/dist/cjs/index.js

@@ -92,6 +92,7 @@ __exportStar(require("./core"), exports);
 // the generic primitives (Table, DataTable, Button, …) to build your own UI from.
 __exportStar(require("./product/activityfeed"), exports);
 __exportStar(require("./product/appshell"), exports);
+__exportStar(require("./product/assigneepicker"), exports);
 __exportStar(require("./product/authshell"), exports);
 __exportStar(require("./product/board"), exports);
 __exportStar(require("./product/command"), exports);
@@ -105,21 +106,28 @@ __exportStar(require("./product/inbox"), exports);
 __exportStar(require("./product/listpage"), exports);
 __exportStar(require("./product/memberssettings"), exports);
 __exportStar(require("./product/navitem"), exports);
+__exportStar(require("./product/notesgallery"), exports);
 __exportStar(require("./product/notificationssettings"), exports);
+__exportStar(require("./product/objectpagemenu"), exports);
 __exportStar(require("./product/objectsettings"), exports);
 __exportStar(require("./product/onboarding"), exports);
 __exportStar(require("./product/recordpage"), exports);
 __exportStar(require("./product/recordpanel"), exports);
+__exportStar(require("./product/recordpicker"), exports);
 __exportStar(require("./product/richtext"), exports);
 __exportStar(require("./product/savedviews"), exports);
 __exportStar(require("./product/settingssection"), exports);
 __exportStar(require("./product/settingsshell"), exports);
+__exportStar(require("./product/share"), exports);
+__exportStar(require("./product/shortcutssheet"), exports);
 __exportStar(require("./product/sidebar"), exports);
 __exportStar(require("./product/statlist"), exports);
+__exportStar(require("./product/taskeditpopover"), exports);
 __exportStar(require("./product/tasklist"), exports);
 __exportStar(require("./product/themepicker"), exports);
 __exportStar(require("./product/trialbanner"), exports);
 __exportStar(require("./product/viewtoggle"), exports);
 __exportStar(require("./product/workspacegeneralsettings"), exports);
+__exportStar(require("./product/workspaceswitchermenu"), exports);
 // design tokens + recipe core (for building custom components)
 __exportStar(require("./tokens"), exports);