@crisp-ui-kit/crisp 0.26.1 → 0.27.0

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

@@ -65,7 +65,7 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
+function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -154,7 +154,8 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [name &&
+                value.map((v) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: v }, v)), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

package/dist/cjs/components/radiogroup/radiogroup.js

@@ -57,7 +57,7 @@ function RadioGroup({ value, defaultValue, onValueChange, variant = "default", n
         onValueChange?.(v);
     }, [value, onValueChange]);
     const { onKeyDown, groupRef } = (0, radiogroup_keyboard_1.useRadioGroupKeyboard)({ select });
-    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsx)("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsxs)("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: [children, name && selected && ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: selected }))] }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 function Radio({ value, label, children, disabled }) {
@@ -65,7 +65,7 @@ function Radio({ value, label, children, disabled }) {
     if (!ctx)
         throw new Error("Radio must be used within a RadioGroup");
     const checked = ctx.value === value;
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": checked, name: ctx.name, disabled: disabled, "data-value": value, "data-checked": checked ? "" : undefined, 
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": checked, disabled: disabled, "data-value": value, "data-checked": checked ? "" : undefined, 
         // roving tabindex: the selected (or first, when none) radio is tabbable
         tabIndex: checked ? 0 : -1, className: "radio", onClick: () => ctx.select(value), children: ctx.variant === "card" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "radio-preview", children: children }), (0, jsx_runtime_1.jsx)("span", { className: "radio-cardfoot", children: (0, jsx_runtime_1.jsx)("span", { className: "radio-label", children: label }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "radio-dot" }), (0, jsx_runtime_1.jsx)("span", { className: "radio-label", children: label ?? children })] })) }));
 }

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

@@ -52,7 +52,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+function Select({ options, value, defaultValue, onValueChange, name, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -150,7 +150,7 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [(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, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, 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) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [name && selected && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: selected }), (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, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, 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);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {

package/dist/cjs/components/switch/switch.js

@@ -43,16 +43,16 @@ const switch_recipe_1 = require("./switch.recipe");
  * label association and keyboard (Space/Enter) come for free. Controlled via
  * `checked`/`onCheckedChange`, or uncontrolled from `defaultChecked`.
  */
-exports.Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, ...props }, ref) => {
+exports.Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, name, value = "on", ...props }, ref) => {
     const [internal, setInternal] = React.useState(defaultChecked);
     const on = checked ?? internal;
-    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", role: "switch", "aria-checked": on, disabled: disabled, "data-checked": on ? "" : undefined, className: (0, switch_recipe_1.switchRecipe)({ className }), onClick: (e) => {
-            onClick?.(e);
-            if (e.defaultPrevented)
-                return;
-            if (checked === undefined)
-                setInternal((v) => !v);
-            onCheckedChange?.(!on);
-        }, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: "switch-thumb" }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", role: "switch", "aria-checked": on, disabled: disabled, "data-checked": on ? "" : undefined, className: (0, switch_recipe_1.switchRecipe)({ className }), onClick: (e) => {
+                    onClick?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    if (checked === undefined)
+                        setInternal((v) => !v);
+                    onCheckedChange?.(!on);
+                }, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: "switch-thumb" }) }), name && on && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: value })] }));
 });
 exports.Switch.displayName = "Switch";

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

@@ -29,7 +29,7 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
+export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -118,7 +118,8 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [name &&
+                value.map((v) => _jsx("input", { type: "hidden", name: name, value: v }, v)), _jsxs("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

package/dist/esm/components/radiogroup/radiogroup.js

@@ -20,7 +20,7 @@ export function RadioGroup({ value, defaultValue, onValueChange, variant = "defa
         onValueChange?.(v);
     }, [value, onValueChange]);
     const { onKeyDown, groupRef } = useRadioGroupKeyboard({ select });
-    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
+    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsxs("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: [children, name && selected && (_jsx("input", { type: "hidden", name: name, value: selected }))] }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 export function Radio({ value, label, children, disabled }) {
@@ -28,7 +28,7 @@ export function Radio({ value, label, children, disabled }) {
     if (!ctx)
         throw new Error("Radio must be used within a RadioGroup");
     const checked = ctx.value === value;
-    return (_jsx("button", { type: "button", role: "radio", "aria-checked": checked, name: ctx.name, disabled: disabled, "data-value": value, "data-checked": checked ? "" : undefined, 
+    return (_jsx("button", { type: "button", role: "radio", "aria-checked": checked, disabled: disabled, "data-value": value, "data-checked": checked ? "" : undefined, 
         // roving tabindex: the selected (or first, when none) radio is tabbable
         tabIndex: checked ? 0 : -1, className: "radio", onClick: () => ctx.select(value), children: ctx.variant === "card" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "radio-preview", children: children }), _jsx("span", { className: "radio-cardfoot", children: _jsx("span", { className: "radio-label", children: label }) })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "radio-dot" }), _jsx("span", { className: "radio-label", children: label ?? children })] })) }));
 }

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

@@ -16,7 +16,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+export function Select({ options, value, defaultValue, onValueChange, name, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -114,7 +114,7 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [_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, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [name && selected && _jsx("input", { type: "hidden", name: name, value: selected }), _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, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _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);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {

package/dist/esm/components/switch/switch.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { switchRecipe } from "./switch.recipe.js";
 /**
@@ -7,16 +7,16 @@ import { switchRecipe } from "./switch.recipe.js";
  * label association and keyboard (Space/Enter) come for free. Controlled via
  * `checked`/`onCheckedChange`, or uncontrolled from `defaultChecked`.
  */
-export const Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, ...props }, ref) => {
+export const Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, name, value = "on", ...props }, ref) => {
     const [internal, setInternal] = React.useState(defaultChecked);
     const on = checked ?? internal;
-    return (_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": on, disabled: disabled, "data-checked": on ? "" : undefined, className: switchRecipe({ className }), onClick: (e) => {
-            onClick?.(e);
-            if (e.defaultPrevented)
-                return;
-            if (checked === undefined)
-                setInternal((v) => !v);
-            onCheckedChange?.(!on);
-        }, ...props, children: _jsx("span", { className: "switch-thumb" }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": on, disabled: disabled, "data-checked": on ? "" : undefined, className: switchRecipe({ className }), onClick: (e) => {
+                    onClick?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    if (checked === undefined)
+                        setInternal((v) => !v);
+                    onCheckedChange?.(!on);
+                }, ...props, children: _jsx("span", { className: "switch-thumb" }) }), name && on && _jsx("input", { type: "hidden", name: name, value: value })] }));
 });
 Switch.displayName = "Switch";

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

@@ -11,6 +11,13 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
     value?: string[];
     /** Initially selected values, when uncontrolled. */
     defaultValue?: string[];
+    /**
+     * Submits with the form under this name. crisp's MultiSelect is a
+     * a button and a listbox, not a native control, so the value reaches a `<form>` only through a
+     * hidden input — without one, `name` type-checks, renders, and contributes
+     * nothing to FormData (#243).
+     */
+    name?: string;
     /** Fires with the next value on every toggle, controlled or not. */
     onValueChange?: (value: string[]) => void;
     placeholder?: string;
@@ -29,7 +36,7 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

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

@@ -6,6 +6,12 @@ export type RadioGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "value
     onValueChange?: (value: string) => void;
     /** `default` = rows (dot + label); `card` = bordered preview cards. */
     variant?: "default" | "card";
+    /**
+     * Submits with the form under this name. It used to land on each radio
+     * `<button>`, where a name means nothing unless the button submits the form:
+     * the prop type-checked, rendered, and contributed nothing to FormData
+     * (#243). The value now rides on a hidden input.
+     */
     name?: string;
     className?: string;
     "aria-label"?: string;

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

@@ -14,6 +14,13 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /**
+     * Submits with the form under this name. crisp's Select is a
+     * a button and a listbox, not a native control, so the value reaches a `<form>` only through a
+     * hidden input — without one, `name` type-checks, renders, and contributes
+     * nothing to FormData (#243).
+     */
+    name?: string;
     placeholder?: string;
     /** `ghost` is borderless until hover — for inline selects (e.g. sort rows). */
     variant?: "default" | "ghost";
@@ -36,7 +43,7 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export declare function Select({ options, value, defaultValue, onValueChange, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, name, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

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

@@ -4,6 +4,15 @@ export type SwitchProps = Omit<React.ComponentPropsWithoutRef<"button">, "onChan
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Submits with the form under this name. crisp's Switch is a
+     * `role="switch"` button`, not a native control, so the value reaches a `<form>` only
+     * through a hidden input — without one, `name` type-checks, renders, and
+     * contributes nothing to FormData (#243).
+     */
+    name?: string;
+    /** The value submitted when it is on (default "on", as a checkbox does). */
+    value?: string;
 };
 /**
  * An on/off toggle — the settings switch, measured from Attio. Renders a
@@ -16,4 +25,13 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<React.Det
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Submits with the form under this name. crisp's Switch is a
+     * `role="switch"` button`, not a native control, so the value reaches a `<form>` only
+     * through a hidden input — without one, `name` type-checks, renders, and
+     * contributes nothing to FormData (#243).
+     */
+    name?: string;
+    /** The value submitted when it is on (default "on", as a checkbox does). */
+    value?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

package/package.json

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