@crisp-ui-kit/crisp 0.41.0 → 0.43.0

package/dist/cjs/components/contextmenu/contextmenu.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = ContextMenu;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_slot_1 = require("@radix-ui/react-slot");
 const React = __importStar(require("react"));
 const core_1 = require("../../core");
 const menu_1 = require("../menu");
@@ -44,7 +45,7 @@ const contextmenu_recipe_1 = require("./contextmenu.recipe");
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-function ContextMenu({ children, items, menuLabel = "Context menu", className, }) {
+function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);
@@ -109,7 +110,7 @@ function ContextMenu({ children, items, menuLabel = "Context menu", className, }
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [asChild ? ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: rootRef, className: className, onContextMenu: open, children: children })) : ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: (0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }) })), pos && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                             ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
                             : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
                             item.onSelect?.();

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

@@ -195,7 +195,12 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const sel = selectedSet.has(opt.value);
-                            return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                            // #343: a header renders once per run of same-`group`
+                            // options, so consecutive rows sharing a group render one
+                            // 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-multiselect-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] })] }, opt.value));
                         }))] }) }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

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

@@ -58,6 +58,10 @@ const config = (0, core_1.defineRecipe)({
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
     .crisp-multiselect-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
       padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; cursor: pointer; text-align: start;

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

@@ -185,7 +185,12 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const isSel = opt.value === selected;
-                            return ((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 } })), (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));
+                            // #343: a header renders once per run of same-`group`
+                            // options, so consecutive rows sharing a group render one
+                            // 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 } })), (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));
                         }))] }) }))] }));
 }
 Select.displayName = "Select";

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

@@ -59,6 +59,10 @@ const config = (0, core_1.defineRecipe)({
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
     .crisp-select-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
     .crisp-select-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
       padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; background: none; border-radius: ${tokens_1.contract.radius.md};

package/dist/esm/components/contextmenu/contextmenu.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { FloatingPortal, isInsideLaterFloatingLayer, registerFloatingLayer, } from "../../core/index.js";
 import { useMenuKeyboard } from "../menu/index.js";
@@ -8,7 +9,7 @@ import { contextmenuRecipe } from "./contextmenu.recipe.js";
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export function ContextMenu({ children, items, menuLabel = "Context menu", className, }) {
+export function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);
@@ -73,7 +74,7 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "crisp-contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    return (_jsxs(_Fragment, { children: [asChild ? (_jsx(Slot, { ref: rootRef, className: className, onContextMenu: open, children: children })) : (_jsx("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: _jsx("div", { onContextMenu: open, children: children }) })), pos && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "crisp-contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                             ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
                             : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
                             item.onSelect?.();

package/dist/esm/components/multiselect/multiselect.js

@@ -159,7 +159,12 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const sel = selectedSet.has(opt.value);
-                            return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "crisp-multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "crisp-multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                            // #343: a header renders once per run of same-`group`
+                            // options, so consecutive rows sharing a group render one
+                            // heading, not one each.
+                            const showGroupLabel = opt.group !== undefined &&
+                                opt.group !== filtered[i - 1]?.group;
+                            return (_jsxs(React.Fragment, { children: [showGroupLabel && (_jsx("div", { className: "crisp-multiselect-label", children: opt.group })), _jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "crisp-multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "crisp-multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] })] }, opt.value));
                         }))] }) }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

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

@@ -55,6 +55,10 @@ const config = defineRecipe({
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     .crisp-multiselect-search input::placeholder { color: ${c.fgMuted}; }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
       padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; cursor: pointer; text-align: start;

package/dist/esm/components/select/select.js

@@ -149,7 +149,12 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const isSel = opt.value === selected;
-                            return (_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 && (_jsx("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "crisp-select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                            // #343: a header renders once per run of same-`group`
+                            // options, so consecutive rows sharing a group render one
+                            // heading, not one each.
+                            const showGroupLabel = opt.group !== undefined &&
+                                opt.group !== filtered[i - 1]?.group;
+                            return (_jsxs(React.Fragment, { children: [showGroupLabel && (_jsx("div", { className: "crisp-select-label", children: opt.group })), _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 && (_jsx("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "crisp-select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
                         }))] }) }))] }));
 }
 Select.displayName = "Select";

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

@@ -56,6 +56,10 @@ const config = defineRecipe({
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     .crisp-select-search input::placeholder { color: ${c.fgMuted}; }
     .crisp-select-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
       padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md};

package/dist/multiselect.css

@@ -13,6 +13,10 @@
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;

package/dist/multiselect.layered.css

@@ -14,6 +14,10 @@
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;

package/dist/select.css

@@ -14,6 +14,10 @@
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);

package/dist/select.layered.css

@@ -15,6 +15,10 @@
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);

package/dist/styles.css

@@ -1045,6 +1045,10 @@
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;
@@ -1272,6 +1276,10 @@
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);

package/dist/styles.layered.css

@@ -1046,6 +1046,10 @@
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;
@@ -1273,6 +1277,10 @@
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);

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

@@ -17,13 +17,23 @@ export type ContextMenuProps = {
     /** Accessible name for the menu surface. */
     menuLabel?: string;
     className?: string;
+    /**
+     * Render `onContextMenu` and the trigger ref directly onto `children`
+     * instead of wrapping it in a `<div>` (#340) — needed when `children` is
+     * an element that cannot have a wrapping element inserted around it, such
+     * as a `<tr>` inside a `<tbody>` (the browser's HTML parser hoists the row
+     * out of the wrapping `<div>`, breaking both the layout and the
+     * right-click target). `children` must then be a single valid React
+     * element, same as any other `asChild` in crisp (`core/primitive.tsx`).
+     */
+    asChild?: boolean;
 };
 /**
  * A right-click context menu — the popover surface positioned at the cursor.
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export declare function ContextMenu({ children, items, menuLabel, className, }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, items, menuLabel, className, asChild, }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

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

@@ -4,6 +4,14 @@ export type MultiSelectOption = {
     label: string;
     /** Chip colour tone; falls back to a deterministic pastel per value. */
     tone?: string;
+    /**
+     * Group heading, rendered above this option (#343). A header renders once
+     * per run of consecutive options sharing the same `group` — like native
+     * `<optgroup>`, grouping is positional: pre-sort `options` so same-group
+     * rows are adjacent, or the same label renders more than once. Options
+     * with no `group` render exactly as before this existed.
+     */
+    group?: string;
 };
 export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
     options: MultiSelectOption[];

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

@@ -7,6 +7,14 @@ export type SelectOption = {
     /** A status colour dot shown before the label (status/select fields). */
     color?: string;
     disabled?: boolean;
+    /**
+     * Group heading, rendered above this option (#343). A header renders once
+     * per run of consecutive options sharing the same `group` — like native
+     * `<optgroup>`, grouping is positional: pre-sort `options` so same-group
+     * rows are adjacent, or the same label renders more than once. Options
+     * with no `group` render exactly as before this existed.
+     */
+    group?: string;
 };
 export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
     options: SelectOption[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.41.0",
+  "version": "0.43.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",