@crisp-ui-kit/crisp 0.42.0 → 0.43.0

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/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/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.42.0",
+  "version": "0.43.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",