@crisp-ui-kit/crisp 0.27.0 → 0.28.0

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

@@ -78,6 +78,13 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, n
     const [query, setQuery] = React.useState("");
     const [highlight, setHighlight] = React.useState(0);
     const rootRef = React.useRef(null);
+    // `form.reset()` restores native controls; a button + listbox holds its value
+    // in React, so it has to listen (#245). Controlled multiselects are left
+    // alone.
+    (0, core_1.useFormReset)(rootRef, () => {
+        if (valueProp === undefined)
+            setInternalValue(defaultValue ?? []);
+    });
     const triggerRef = React.useRef(null);
     const searchRef = React.useRef(null);
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? []);

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

@@ -37,6 +37,7 @@ exports.RadioGroup = RadioGroup;
 exports.Radio = Radio;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const radiogroup_recipe_1 = require("./radiogroup.recipe");
 const radiogroup_keyboard_1 = require("./radiogroup-keyboard");
 const RadioContext = React.createContext(null);
@@ -57,6 +58,13 @@ function RadioGroup({ value, defaultValue, onValueChange, variant = "default", n
         onValueChange?.(v);
     }, [value, onValueChange]);
     const { onKeyDown, groupRef } = (0, radiogroup_keyboard_1.useRadioGroupKeyboard)({ select });
+    // `form.reset()` restores native controls; a group of role="radio" buttons
+    // holds its answer in React, so it has to listen (#245). A controlled group
+    // is left alone — the value is the consumer's.
+    (0, core_1.useFormReset)(groupRef, () => {
+        if (value === undefined)
+            setInternal(defaultValue);
+    });
     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";

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

@@ -69,6 +69,12 @@ function Select({ options, value, defaultValue, onValueChange, name, placeholder
     const [highlight, setHighlight] = React.useState(0);
     const [query, setQuery] = React.useState("");
     const rootRef = React.useRef(null);
+    // `form.reset()` restores native controls; a button + listbox holds its value
+    // in React, so it has to listen (#245). Controlled selects are left alone.
+    (0, core_1.useFormReset)(rootRef, () => {
+        if (value === undefined)
+            setInternal(defaultValue);
+    });
     const triggerRef = React.useRef(null);
     const searchRef = React.useRef(null);
     const selectedOption = options.find((o) => o.value === selected);

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

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const switch_recipe_1 = require("./switch.recipe");
 /**
  * An on/off toggle — the settings switch, measured from Attio. Renders a
@@ -46,7 +47,16 @@ const switch_recipe_1 = require("./switch.recipe");
 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.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) => {
+    // `form.reset()` restores native controls; a role="switch" button holds its
+    // state in React, so it has to listen (#245). A controlled switch is left
+    // alone — the value is the consumer's.
+    const rootRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => rootRef.current);
+    (0, core_1.useFormReset)(rootRef, () => {
+        if (checked === undefined)
+            setInternal(defaultChecked);
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: rootRef, 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;

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.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.useFormReset = exports.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
@@ -32,5 +32,7 @@ Object.defineProperty(exports, "resolveRecipe", { enumerable: true, get: functio
 __exportStar(require("./rtl"), exports);
 var use_focus_after_removal_1 = require("./use-focus-after-removal");
 Object.defineProperty(exports, "useFocusAfterRemoval", { enumerable: true, get: function () { return use_focus_after_removal_1.useFocusAfterRemoval; } });
+var use_form_reset_1 = require("./use-form-reset");
+Object.defineProperty(exports, "useFormReset", { enumerable: true, get: function () { return use_form_reset_1.useFormReset; } });
 var use_prefers_reduced_motion_1 = require("./use-prefers-reduced-motion");
 Object.defineProperty(exports, "usePrefersReducedMotion", { enumerable: true, get: function () { return use_prefers_reduced_motion_1.usePrefersReducedMotion; } });

package/dist/cjs/core/use-form-reset.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormReset = useFormReset;
+const React = __importStar(require("react"));
+/**
+ * Restore a control's default when the form around it is reset.
+ *
+ * `form.reset()` restores native controls — crisp's Input and Checkbox come
+ * back on their own. The controls that are buttons and listboxes hold their
+ * value in React state, which the platform cannot touch, so a Reset button
+ * used to snap half a form back and leave the other half as the user set it
+ * (#245). The hidden inputs that carry the value to `FormData` do not help:
+ * React rewrites them from the same state a moment later.
+ *
+ * Only the UNCONTROLLED case is restored here. A controlled component's value
+ * belongs to the consumer, and React already behaves this way for a controlled
+ * `<input>`: the platform resets the DOM, the next render puts the prop
+ * straight back. A consumer who wants a controlled control to follow the reset
+ * listens for the same event.
+ *
+ * The listener lives on the form the element is in, found from the element
+ * rather than passed in, because the consumer owns the markup between them.
+ *
+ * The `value === undefined` guard in each caller is deliberate and is NOT
+ * covered by a test, because it cannot be: with a controlled component the
+ * internal state is never read — `value ?? internal` — so writing to it
+ * changes nothing observable. It is kept because a component that later reads
+ * that state (a consumer switching from controlled to uncontrolled) would
+ * otherwise find a value the reset put there behind its back.
+ */
+function useFormReset(ref, onReset) {
+    // the handler is read through a ref so a fresh closure each render does not
+    // resubscribe: the listener is bound to the form, not to this render.
+    const latest = React.useRef(onReset);
+    latest.current = onReset;
+    React.useEffect(() => {
+        const el = ref.current;
+        const form = el?.closest("form");
+        if (!form)
+            return;
+        const handler = () => latest.current();
+        form.addEventListener("reset", handler);
+        return () => form.removeEventListener("reset", handler);
+    }, [ref]);
+}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
-import { placeFloating } from "../../core/index.js";
+import { placeFloating, useFormReset } from "../../core/index.js";
 import { useListboxKeyboard } from "../select/index.js";
 import { multiselectRecipe } from "./multiselect.recipe.js";
 const TONES = [
@@ -42,6 +42,13 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
     const [query, setQuery] = React.useState("");
     const [highlight, setHighlight] = React.useState(0);
     const rootRef = React.useRef(null);
+    // `form.reset()` restores native controls; a button + listbox holds its value
+    // in React, so it has to listen (#245). Controlled multiselects are left
+    // alone.
+    useFormReset(rootRef, () => {
+        if (valueProp === undefined)
+            setInternalValue(defaultValue ?? []);
+    });
     const triggerRef = React.useRef(null);
     const searchRef = React.useRef(null);
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? []);

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

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useFormReset } from "../../core/index.js";
 import { radiogroupRecipe } from "./radiogroup.recipe.js";
 import { useRadioGroupKeyboard } from "./radiogroup-keyboard.js";
 const RadioContext = React.createContext(null);
@@ -20,6 +21,13 @@ export function RadioGroup({ value, defaultValue, onValueChange, variant = "defa
         onValueChange?.(v);
     }, [value, onValueChange]);
     const { onKeyDown, groupRef } = useRadioGroupKeyboard({ select });
+    // `form.reset()` restores native controls; a group of role="radio" buttons
+    // holds its answer in React, so it has to listen (#245). A controlled group
+    // is left alone — the value is the consumer's.
+    useFormReset(groupRef, () => {
+        if (value === undefined)
+            setInternal(defaultValue);
+    });
     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";

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

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
-import { placeFloating } from "../../core/index.js";
+import { placeFloating, useFormReset } from "../../core/index.js";
 import { useListboxKeyboard } from "./listbox-keyboard.js";
 import { selectRecipe } from "./select.recipe.js";
 function optionText(o) {
@@ -33,6 +33,12 @@ export function Select({ options, value, defaultValue, onValueChange, name, plac
     const [highlight, setHighlight] = React.useState(0);
     const [query, setQuery] = React.useState("");
     const rootRef = React.useRef(null);
+    // `form.reset()` restores native controls; a button + listbox holds its value
+    // in React, so it has to listen (#245). Controlled selects are left alone.
+    useFormReset(rootRef, () => {
+        if (value === undefined)
+            setInternal(defaultValue);
+    });
     const triggerRef = React.useRef(null);
     const searchRef = React.useRef(null);
     const selectedOption = options.find((o) => o.value === selected);

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

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useFormReset } from "../../core/index.js";
 import { switchRecipe } from "./switch.recipe.js";
 /**
  * An on/off toggle — the settings switch, measured from Attio. Renders a
@@ -10,7 +11,16 @@ import { switchRecipe } from "./switch.recipe.js";
 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 (_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) => {
+    // `form.reset()` restores native controls; a role="switch" button holds its
+    // state in React, so it has to listen (#245). A controlled switch is left
+    // alone — the value is the consumer's.
+    const rootRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => rootRef.current);
+    useFormReset(rootRef, () => {
+        if (checked === undefined)
+            setInternal(defaultChecked);
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: rootRef, type: "button", role: "switch", "aria-checked": on, disabled: disabled, "data-checked": on ? "" : undefined, className: switchRecipe({ className }), onClick: (e) => {
                     onClick?.(e);
                     if (e.defaultPrevented)
                         return;

package/dist/esm/core/index.js

@@ -7,4 +7,5 @@ export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
 export * from "./rtl.js";
 export { useFocusAfterRemoval } from "./use-focus-after-removal.js";
+export { useFormReset } from "./use-form-reset.js";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion.js";

package/dist/esm/core/use-form-reset.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+/**
+ * Restore a control's default when the form around it is reset.
+ *
+ * `form.reset()` restores native controls — crisp's Input and Checkbox come
+ * back on their own. The controls that are buttons and listboxes hold their
+ * value in React state, which the platform cannot touch, so a Reset button
+ * used to snap half a form back and leave the other half as the user set it
+ * (#245). The hidden inputs that carry the value to `FormData` do not help:
+ * React rewrites them from the same state a moment later.
+ *
+ * Only the UNCONTROLLED case is restored here. A controlled component's value
+ * belongs to the consumer, and React already behaves this way for a controlled
+ * `<input>`: the platform resets the DOM, the next render puts the prop
+ * straight back. A consumer who wants a controlled control to follow the reset
+ * listens for the same event.
+ *
+ * The listener lives on the form the element is in, found from the element
+ * rather than passed in, because the consumer owns the markup between them.
+ *
+ * The `value === undefined` guard in each caller is deliberate and is NOT
+ * covered by a test, because it cannot be: with a controlled component the
+ * internal state is never read — `value ?? internal` — so writing to it
+ * changes nothing observable. It is kept because a component that later reads
+ * that state (a consumer switching from controlled to uncontrolled) would
+ * otherwise find a value the reset put there behind its back.
+ */
+export function useFormReset(ref, onReset) {
+    // the handler is read through a ref so a fresh closure each render does not
+    // resubscribe: the listener is bound to the form, not to this render.
+    const latest = React.useRef(onReset);
+    latest.current = onReset;
+    React.useEffect(() => {
+        const el = ref.current;
+        const form = el?.closest("form");
+        if (!form)
+            return;
+        const handler = () => latest.current();
+        form.addEventListener("reset", handler);
+        return () => form.removeEventListener("reset", handler);
+    }, [ref]);
+}

package/dist/types/core/index.d.ts

@@ -8,4 +8,5 @@ export { resolveRecipe } from "./resolve";
 export * from "./rtl";
 export type * from "./types";
 export { useFocusAfterRemoval } from "./use-focus-after-removal";
+export { useFormReset } from "./use-form-reset";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion";

package/dist/types/core/use-form-reset.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * Restore a control's default when the form around it is reset.
+ *
+ * `form.reset()` restores native controls — crisp's Input and Checkbox come
+ * back on their own. The controls that are buttons and listboxes hold their
+ * value in React state, which the platform cannot touch, so a Reset button
+ * used to snap half a form back and leave the other half as the user set it
+ * (#245). The hidden inputs that carry the value to `FormData` do not help:
+ * React rewrites them from the same state a moment later.
+ *
+ * Only the UNCONTROLLED case is restored here. A controlled component's value
+ * belongs to the consumer, and React already behaves this way for a controlled
+ * `<input>`: the platform resets the DOM, the next render puts the prop
+ * straight back. A consumer who wants a controlled control to follow the reset
+ * listens for the same event.
+ *
+ * The listener lives on the form the element is in, found from the element
+ * rather than passed in, because the consumer owns the markup between them.
+ *
+ * The `value === undefined` guard in each caller is deliberate and is NOT
+ * covered by a test, because it cannot be: with a controlled component the
+ * internal state is never read — `value ?? internal` — so writing to it
+ * changes nothing observable. It is kept because a component that later reads
+ * that state (a consumer switching from controlled to uncontrolled) would
+ * otherwise find a value the reset put there behind its back.
+ */
+export declare function useFormReset(ref: React.RefObject<HTMLElement | null>, onReset: () => void): void;

package/package.json

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