@crisp-ui-kit/crisp 0.16.1 → 0.18.0

package/dist/cjs/components/datepickerfield/datepickerfield.js

@@ -57,13 +57,15 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-function DatePickerField({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
     const pick = (d) => {
         if (value === undefined)
             setInternal(d);
+        // both, so a consumer passing either name is heard
+        onValueChange?.(d);
         onChange?.(d);
         setOpen(false);
     };

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

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.radiogroupRecipe = exports.RadioGroup = exports.Radio = void 0;
+exports.useRadioGroupKeyboard = exports.radiogroupRecipe = exports.RadioGroup = exports.Radio = void 0;
 var radiogroup_1 = require("./radiogroup");
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return radiogroup_1.Radio; } });
 Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radiogroup_1.RadioGroup; } });
 var radiogroup_recipe_1 = require("./radiogroup.recipe");
 Object.defineProperty(exports, "radiogroupRecipe", { enumerable: true, get: function () { return radiogroup_recipe_1.radiogroupRecipe; } });
+var radiogroup_keyboard_1 = require("./radiogroup-keyboard");
+Object.defineProperty(exports, "useRadioGroupKeyboard", { enumerable: true, get: function () { return radiogroup_keyboard_1.useRadioGroupKeyboard; } });

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRadioGroupKeyboard = useRadioGroupKeyboard;
+/**
+ * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
+ * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
+ * the ends.
+ *
+ * Mount the returned handler on the element carrying `role="radiogroup"`. It
+ * reads the radios out of the DOM rather than an options array, so a surface
+ * that renders its own chrome — `Segmented`'s pill switcher — shares the model
+ * without sharing a data shape.
+ *
+ * Extracted from `RadioGroup`, whose version was the working one. `Segmented`
+ * mounted its handler per button and closed over that button's index, so it
+ * selected a neighbour without moving focus and every later press recomputed
+ * the same step (#200). The same reason `useMenuKeyboard`,
+ * `useTablistKeyboard` and `useListboxKeyboard` exist.
+ *
+ * Moving focus is not a detail: roving `tabIndex` follows the selection, so a
+ * handler that selects without focusing leaves focus on a `tabindex="-1"`
+ * element while the tab stop is somewhere else.
+ *
+ * Home/End are not in APG's radio group pattern. They are kept because
+ * `Segmented` already offered them, and the shared model should be the union
+ * rather than quietly dropping behaviour one surface had.
+ */
+function useRadioGroupKeyboard({ select, }) {
+    const onKeyDown = (e) => {
+        const KEYS = [
+            "ArrowDown",
+            "ArrowRight",
+            "ArrowUp",
+            "ArrowLeft",
+            "Home",
+            "End",
+        ];
+        if (!KEYS.includes(e.key))
+            return;
+        const radios = Array.from(e.currentTarget.querySelectorAll('[role="radio"]:not([disabled])'));
+        if (!radios.length)
+            return;
+        const idx = radios.indexOf(document.activeElement);
+        let next;
+        if (e.key === "Home")
+            next = radios[0];
+        else if (e.key === "End")
+            next = radios[radios.length - 1];
+        else {
+            const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
+            // focus outside the group: enter at the near end rather than stepping
+            // off an index of -1, which would land two from the back going backwards
+            if (idx < 0)
+                next = fwd ? radios[0] : radios[radios.length - 1];
+            else
+                next = radios[(idx + (fwd ? 1 : -1) + radios.length) % radios.length];
+        }
+        if (!next)
+            return;
+        e.preventDefault();
+        next.focus();
+        const value = next.dataset.value;
+        if (value !== undefined)
+            select(value);
+    };
+    return { onKeyDown };
+}

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

@@ -38,6 +38,7 @@ exports.Radio = Radio;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const radiogroup_recipe_1 = require("./radiogroup.recipe");
+const radiogroup_keyboard_1 = require("./radiogroup-keyboard");
 const RadioContext = React.createContext(null);
 /**
  * A radio group — measured from Attio's settings. `default` renders rows (a ring
@@ -55,19 +56,7 @@ function RadioGroup({ value, defaultValue, onValueChange, variant = "default", n
             setInternal(v);
         onValueChange?.(v);
     }, [value, onValueChange]);
-    const onKeyDown = (e) => {
-        if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key))
-            return;
-        const radios = Array.from(e.currentTarget.querySelectorAll('[role="radio"]:not([disabled])'));
-        const idx = radios.indexOf(document.activeElement);
-        const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
-        const next = radios[(idx + (fwd ? 1 : -1) + radios.length) % radios.length];
-        if (next) {
-            e.preventDefault();
-            next.focus();
-            next.dataset.value && select(next.dataset.value);
-        }
-    };
+    const { onKeyDown } = (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", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
 }
 RadioGroup.displayName = "RadioGroup";

package/dist/cjs/components/segmented/segmented.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = Segmented;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const radiogroup_1 = require("../radiogroup");
 const segmented_recipe_1 = require("./segmented.recipe");
 /**
  * A segmented control (single-choice toggle) — measured from Attio's view
@@ -64,32 +65,19 @@ function Segmented({ options, value, defaultValue, onValueChange, "aria-label":
             setInternal(v);
         onValueChange?.(v);
     };
-    const onKeyDown = (e, i) => {
-        const enabled = options.filter((o) => !o.disabled);
-        const pos = enabled.findIndex((o) => o.value === options[i].value);
-        let next = -1;
-        if (e.key === "ArrowRight" || e.key === "ArrowDown")
-            next = (pos + 1) % enabled.length;
-        else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
-            next = (pos - 1 + enabled.length) % enabled.length;
-        else if (e.key === "Home")
-            next = 0;
-        else if (e.key === "End")
-            next = enabled.length - 1;
-        if (next < 0)
-            return;
-        e.preventDefault();
-        select(enabled[next].value);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, segmented_recipe_1.segmentedRecipe)({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, children: [thumb && ((0, jsx_runtime_1.jsx)("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
+    // crisp's shared radio group model (#200). The per-button handler this
+    // replaces closed over its own index, so it selected a neighbour without
+    // moving focus and every press after the first recomputed the same step.
+    const { onKeyDown } = (0, radiogroup_1.useRadioGroupKeyboard)({ select });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, segmented_recipe_1.segmentedRecipe)({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && ((0, jsx_runtime_1.jsx)("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,
-                } })), options.map((opt, i) => {
+                } })), options.map((opt) => {
                 const on = opt.value === selected;
                 const iconOnly = opt.label == null && opt.icon != null;
-                return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "radio", "aria-checked": on, "aria-label": opt["aria-label"], disabled: opt.disabled, "data-selected": on ? "" : undefined, tabIndex: on ? 0 : -1, className: iconOnly
+                return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "radio", "aria-checked": on, "aria-label": opt["aria-label"], disabled: opt.disabled, "data-selected": on ? "" : undefined, "data-value": opt.value, tabIndex: on ? 0 : -1, className: iconOnly
                         ? "segmented-item segmented-item--icon"
-                        : "segmented-item", onClick: () => select(opt.value), onKeyDown: (e) => onKeyDown(e, i), children: [opt.icon, opt.label] }, opt.value));
+                        : "segmented-item", onClick: () => select(opt.value), children: [opt.icon, opt.label] }, opt.value));
             })] }));
 }
 Segmented.displayName = "Segmented";

package/dist/cjs/product/viewtoggle/viewtoggle.js

@@ -42,12 +42,15 @@ const viewtoggle_recipe_1 = require("./viewtoggle.recipe");
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-function ViewToggle({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }) {
+function ViewToggle({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }) {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const value = valueProp ?? internalValue ?? options[0]?.value;
     const pick = (next) => {
         if (valueProp === undefined)
             setInternalValue(next);
+        // both, so a consumer passing either name is heard and one passing both
+        // does not silently lose one
+        onValueChange?.(next);
         onChange?.(next);
     };
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, viewtoggle_recipe_1.viewtoggleRecipe)({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -21,13 +21,15 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export function DatePickerField({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
     const pick = (d) => {
         if (value === undefined)
             setInternal(d);
+        // both, so a consumer passing either name is heard
+        onValueChange?.(d);
         onChange?.(d);
         setOpen(false);
     };

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

@@ -1,2 +1,3 @@
 export { Radio, RadioGroup, } from "./radiogroup.js";
 export { radiogroupRecipe } from "./radiogroup.recipe.js";
+export { useRadioGroupKeyboard, } from "./radiogroup-keyboard.js";

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

@@ -0,0 +1,64 @@
+/**
+ * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
+ * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
+ * the ends.
+ *
+ * Mount the returned handler on the element carrying `role="radiogroup"`. It
+ * reads the radios out of the DOM rather than an options array, so a surface
+ * that renders its own chrome — `Segmented`'s pill switcher — shares the model
+ * without sharing a data shape.
+ *
+ * Extracted from `RadioGroup`, whose version was the working one. `Segmented`
+ * mounted its handler per button and closed over that button's index, so it
+ * selected a neighbour without moving focus and every later press recomputed
+ * the same step (#200). The same reason `useMenuKeyboard`,
+ * `useTablistKeyboard` and `useListboxKeyboard` exist.
+ *
+ * Moving focus is not a detail: roving `tabIndex` follows the selection, so a
+ * handler that selects without focusing leaves focus on a `tabindex="-1"`
+ * element while the tab stop is somewhere else.
+ *
+ * Home/End are not in APG's radio group pattern. They are kept because
+ * `Segmented` already offered them, and the shared model should be the union
+ * rather than quietly dropping behaviour one surface had.
+ */
+export function useRadioGroupKeyboard({ select, }) {
+    const onKeyDown = (e) => {
+        const KEYS = [
+            "ArrowDown",
+            "ArrowRight",
+            "ArrowUp",
+            "ArrowLeft",
+            "Home",
+            "End",
+        ];
+        if (!KEYS.includes(e.key))
+            return;
+        const radios = Array.from(e.currentTarget.querySelectorAll('[role="radio"]:not([disabled])'));
+        if (!radios.length)
+            return;
+        const idx = radios.indexOf(document.activeElement);
+        let next;
+        if (e.key === "Home")
+            next = radios[0];
+        else if (e.key === "End")
+            next = radios[radios.length - 1];
+        else {
+            const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
+            // focus outside the group: enter at the near end rather than stepping
+            // off an index of -1, which would land two from the back going backwards
+            if (idx < 0)
+                next = fwd ? radios[0] : radios[radios.length - 1];
+            else
+                next = radios[(idx + (fwd ? 1 : -1) + radios.length) % radios.length];
+        }
+        if (!next)
+            return;
+        e.preventDefault();
+        next.focus();
+        const value = next.dataset.value;
+        if (value !== undefined)
+            select(value);
+    };
+    return { onKeyDown };
+}

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

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { radiogroupRecipe } from "./radiogroup.recipe.js";
+import { useRadioGroupKeyboard } from "./radiogroup-keyboard.js";
 const RadioContext = React.createContext(null);
 /**
  * A radio group — measured from Attio's settings. `default` renders rows (a ring
@@ -18,19 +19,7 @@ export function RadioGroup({ value, defaultValue, onValueChange, variant = "defa
             setInternal(v);
         onValueChange?.(v);
     }, [value, onValueChange]);
-    const onKeyDown = (e) => {
-        if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key))
-            return;
-        const radios = Array.from(e.currentTarget.querySelectorAll('[role="radio"]:not([disabled])'));
-        const idx = radios.indexOf(document.activeElement);
-        const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
-        const next = radios[(idx + (fwd ? 1 : -1) + radios.length) % radios.length];
-        if (next) {
-            e.preventDefault();
-            next.focus();
-            next.dataset.value && select(next.dataset.value);
-        }
-    };
+    const { onKeyDown } = useRadioGroupKeyboard({ select });
     return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
 }
 RadioGroup.displayName = "RadioGroup";

package/dist/esm/components/segmented/segmented.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useRadioGroupKeyboard } from "../radiogroup/index.js";
 import { segmentedRecipe } from "./segmented.recipe.js";
 /**
  * A segmented control (single-choice toggle) — measured from Attio's view
@@ -28,32 +29,19 @@ export function Segmented({ options, value, defaultValue, onValueChange, "aria-l
             setInternal(v);
         onValueChange?.(v);
     };
-    const onKeyDown = (e, i) => {
-        const enabled = options.filter((o) => !o.disabled);
-        const pos = enabled.findIndex((o) => o.value === options[i].value);
-        let next = -1;
-        if (e.key === "ArrowRight" || e.key === "ArrowDown")
-            next = (pos + 1) % enabled.length;
-        else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
-            next = (pos - 1 + enabled.length) % enabled.length;
-        else if (e.key === "Home")
-            next = 0;
-        else if (e.key === "End")
-            next = enabled.length - 1;
-        if (next < 0)
-            return;
-        e.preventDefault();
-        select(enabled[next].value);
-    };
-    return (_jsxs("div", { ref: rootRef, className: segmentedRecipe({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, children: [thumb && (_jsx("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
+    // crisp's shared radio group model (#200). The per-button handler this
+    // replaces closed over its own index, so it selected a neighbour without
+    // moving focus and every press after the first recomputed the same step.
+    const { onKeyDown } = useRadioGroupKeyboard({ select });
+    return (_jsxs("div", { ref: rootRef, className: segmentedRecipe({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && (_jsx("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,
-                } })), options.map((opt, i) => {
+                } })), options.map((opt) => {
                 const on = opt.value === selected;
                 const iconOnly = opt.label == null && opt.icon != null;
-                return (_jsxs("button", { type: "button", role: "radio", "aria-checked": on, "aria-label": opt["aria-label"], disabled: opt.disabled, "data-selected": on ? "" : undefined, tabIndex: on ? 0 : -1, className: iconOnly
+                return (_jsxs("button", { type: "button", role: "radio", "aria-checked": on, "aria-label": opt["aria-label"], disabled: opt.disabled, "data-selected": on ? "" : undefined, "data-value": opt.value, tabIndex: on ? 0 : -1, className: iconOnly
                         ? "segmented-item segmented-item--icon"
-                        : "segmented-item", onClick: () => select(opt.value), onKeyDown: (e) => onKeyDown(e, i), children: [opt.icon, opt.label] }, opt.value));
+                        : "segmented-item", onClick: () => select(opt.value), children: [opt.icon, opt.label] }, opt.value));
             })] }));
 }
 Segmented.displayName = "Segmented";

package/dist/esm/product/viewtoggle/viewtoggle.js

@@ -6,12 +6,15 @@ import { viewtoggleRecipe } from "./viewtoggle.recipe.js";
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-export function ViewToggle({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }) {
+export function ViewToggle({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }) {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const value = valueProp ?? internalValue ?? options[0]?.value;
     const pick = (next) => {
         if (valueProp === undefined)
             setInternalValue(next);
+        // both, so a consumer passing either name is heard and one passing both
+        // does not silently lose one
+        onValueChange?.(next);
         onChange?.(next);
     };
     return (_jsx("div", { className: viewtoggleRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => (_jsx("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));

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

@@ -11,6 +11,14 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
     /** Controlled value. Omit to let the field manage it (see defaultValue). */
     value?: Date | null;
     defaultValue?: Date | null;
+    /** Fires with the picked date, controlled or not. */
+    onValueChange?: (date: Date) => void;
+    /**
+     * The original name for `onValueChange`, kept working so no consumer breaks.
+     * Prefer `onValueChange`: it is what every other crisp component calls this,
+     * and passing the house name to a component that only knew `onChange` was
+     * not a type error — the handler simply never fired (#202).
+     */
     onChange?: (date: Date) => void;
     placeholder?: string;
     /** `default` = outlined trigger; `ghost` = transparent (for table cells). */
@@ -29,7 +37,7 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export declare function DatePickerField({ value, defaultValue, onChange, placeholder, variant, format, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
+export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder, variant, format, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
 export declare namespace DatePickerField {
     var displayName: string;
 }

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

@@ -1,2 +1,3 @@
 export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, } from "./radiogroup";
 export { radiogroupRecipe } from "./radiogroup.recipe";
+export { type UseRadioGroupKeyboardOptions, useRadioGroupKeyboard, } from "./radiogroup-keyboard";

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

@@ -0,0 +1,32 @@
+import type * as React from "react";
+export type UseRadioGroupKeyboardOptions = {
+    /** Select a radio by its `data-value`. */
+    select: (value: string) => void;
+};
+/**
+ * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
+ * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
+ * the ends.
+ *
+ * Mount the returned handler on the element carrying `role="radiogroup"`. It
+ * reads the radios out of the DOM rather than an options array, so a surface
+ * that renders its own chrome — `Segmented`'s pill switcher — shares the model
+ * without sharing a data shape.
+ *
+ * Extracted from `RadioGroup`, whose version was the working one. `Segmented`
+ * mounted its handler per button and closed over that button's index, so it
+ * selected a neighbour without moving focus and every later press recomputed
+ * the same step (#200). The same reason `useMenuKeyboard`,
+ * `useTablistKeyboard` and `useListboxKeyboard` exist.
+ *
+ * Moving focus is not a detail: roving `tabIndex` follows the selection, so a
+ * handler that selects without focusing leaves focus on a `tabindex="-1"`
+ * element while the tab stop is somewhere else.
+ *
+ * Home/End are not in APG's radio group pattern. They are kept because
+ * `Segmented` already offered them, and the shared model should be the union
+ * rather than quietly dropping behaviour one surface had.
+ */
+export declare function useRadioGroupKeyboard({ select, }: UseRadioGroupKeyboardOptions): {
+    onKeyDown: (e: React.KeyboardEvent) => void;
+};

package/dist/types/product/viewtoggle/viewtoggle.d.ts

@@ -12,9 +12,15 @@ export type ViewToggleProps<T extends string = string> = Omit<React.ComponentPro
     value?: T;
     /** Initially selected value, when uncontrolled. Defaults to the first option. */
     defaultValue?: T;
-    /** Fires with the next value on every pick, controlled or not.
-     * Named `onChange` rather than the house `onValueChange` for historical
-     * reasons; renaming it would break consumers. */
+    /** Fires with the next value on every pick, controlled or not. */
+    onValueChange?: (value: T) => void;
+    /**
+     * The original name for `onValueChange`, kept working so no consumer breaks.
+     * Prefer `onValueChange`: it is what every other crisp component calls this,
+     * and because these props extend a `<div>`'s, passing the house name to a
+     * component that only knew `onChange` was not a type error — it landed on
+     * the DOM and React dropped it with a development-only warning (#202).
+     */
     onChange?: (value: T) => void;
     "aria-label"?: string;
     className?: string;
@@ -24,7 +30,7 @@ export type ViewToggleProps<T extends string = string> = Omit<React.ComponentPro
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-export declare function ViewToggle<T extends string = string>({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }: ViewToggleProps<T>): React.JSX.Element;
+export declare function ViewToggle<T extends string = string>({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }: ViewToggleProps<T>): React.JSX.Element;
 export declare namespace ViewToggle {
     var displayName: string;
 }

package/package.json

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