@inkra/react 0.3.0 → 0.5.0

package/dist/select/SearchableSelect.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { Combobox } from '@base-ui/react/combobox';
 import { DirectionProvider } from '@base-ui/react/direction-provider';
-import { forwardRef, useId, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button.js';
 import { Input } from '../form/Input.js';
+import { InputAction } from '../form/InputAction.js';
 import { mergeAriaIds, useFieldContext } from '../form/context.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
@@ -14,8 +16,10 @@ const chevronPaths = [{ d: 'M6 9l6 6 6-6' }];
 const checkPaths = [{ d: 'M5 12l4 4L19 6' }];
 const clearPaths = [{ d: 'M6 6l12 12M18 6L6 18' }];
 const SearchableControl = forwardRef(function SearchableControl(props, forwardedRef) {
-    const { items, searchPlacement = 'trigger', placeholder = 'Select an option', searchPlaceholder = 'Search options', emptyContent = 'No matching options', clearable = true, clearLabel = 'Clear selection', openLabel = 'Show options', size = 'md', multiple = false, value, defaultValue, onValueChange: _onValueChange, name, form, dir, disabled, readOnly, required, invalid, id, className, children: _children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
+    const { t } = useInkraLocale();
+    const { items, searchPlacement = 'trigger', placeholder = t('select.placeholder'), searchPlaceholder = t('select.search'), emptyContent = t('select.empty'), clearable = true, clearLabel = t('select.clear'), openLabel = t('select.open'), size = 'md', multiple = false, value, defaultValue, onValueChange: _onValueChange, name, form, dir, disabled, readOnly, required, invalid, id, className, children: _children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
     const indicatorSize = size === 'sm' ? 24 : size === 'lg' ? 32 : 28;
+    const actionSize = size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon';
     const field = useFieldContext();
     const generatedId = useId();
     const controlId = field?.controlId ?? id ?? generatedId;
@@ -24,26 +28,79 @@ const SearchableControl = forwardRef(function SearchableControl(props, forwarded
     const resolvedInvalid = Boolean(invalid || field?.invalid);
     const describedBy = mergeAriaIds(ariaDescribedBy, field?.descriptionId, field?.errorId);
     const searchRef = useRef(null);
+    const triggerRef = useRef(null);
+    const rootRef = useRef(null);
+    const defaultValueRef = useRef(defaultValue);
+    const actionsRef = useRef(null);
     const portalRef = usePortalTriggerRef(forwardedRef);
+    const [resetVersion, setResetVersion] = useState(0);
+    const captureRoot = useCallback((node) => {
+        rootRef.current = node;
+        portalRef(node);
+    }, [portalRef]);
     const lookup = useMemo(() => new Map(items.map(item => [item.value, item])), [items]);
     const values = useMemo(() => items.map(item => item.value), [items]);
     const { contains } = Combobox.useFilter({ sensitivity: 'base' });
+    const itemToStringLabel = useCallback((item) => lookup.get(item)?.label ?? item, [lookup]);
+    const filter = useCallback((item, query) => {
+        const option = lookup.get(item);
+        return contains(`${option?.label ?? item} ${option?.keywords ?? ''}`, query);
+    }, [contains, lookup]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return undefined;
+        const ownerDocument = root.ownerDocument;
+        const formElement = form
+            ? ownerDocument.getElementById(form)
+            : root.closest('form');
+        if (!formElement)
+            return undefined;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                actionsRef.current?.close();
+                setResetVersion(version => version + 1);
+            }, 0);
+        };
+        formElement.addEventListener('reset', reset);
+        return () => {
+            clearTimeout(timer);
+            formElement.removeEventListener('reset', reset);
+        };
+    }, [form]);
     const summary = (selected) => {
         const selectedValues = Array.isArray(selected) ? selected : selected == null ? [] : [selected];
         return selectedValues.map(item => lookup.get(item)?.label ?? item).join(', ');
     };
-    const search = _jsx(Combobox.Input, { id: searchPlacement === 'trigger' ? controlId : `${controlId}-search`, "aria-label": searchPlacement === 'trigger' ? ariaLabel : searchPlaceholder, "aria-labelledby": searchPlacement === 'trigger' ? ariaLabelledBy : undefined, "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, ref: searchRef, placeholder: searchPlacement === 'trigger' ? placeholder : searchPlaceholder, render: _jsx(Input, { size: size, variant: searchPlacement === 'trigger' ? 'outline' : 'underline', startIcon: _jsx(PencilIcon, { paths: searchPaths, size: 22, sourceSize: 24 }) }) });
-    return _jsx(DirectionProvider, { direction: dir, children: _jsxs(Combobox.Root, { items: values, multiple: multiple, value: value, defaultValue: defaultValue, disabled: resolvedDisabled, readOnly: resolvedReadOnly, required: Boolean(required || field?.required), name: name, form: form, autoHighlight: true, open: resolvedReadOnly || resolvedDisabled ? false : open, defaultOpen: defaultOpen, onOpenChange: (next, details) => { if (resolvedReadOnly || resolvedDisabled)
+    const search = _jsx(Combobox.Input, { id: searchPlacement === 'trigger' ? controlId : `${controlId}-search`, "aria-label": searchPlacement === 'trigger' ? ariaLabel : searchPlaceholder, "aria-labelledby": searchPlacement === 'trigger' ? ariaLabelledBy : undefined, "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, ref: searchRef, placeholder: searchPlacement === 'trigger' ? placeholder : searchPlaceholder, render: _jsx(Input, { classNames: searchPlacement === 'trigger' ? {
+                root: 'inkra-search-select__input',
+                control: 'inkra-search-select__input-control',
+            } : undefined, size: size, variant: searchPlacement === 'trigger' ? 'ghost' : 'underline', startIcon: _jsx(PencilIcon, { paths: searchPaths, size: 22, sourceSize: 24 }) }) });
+    const clear = clearable ? _jsx(InputAction, { disabled: resolvedReadOnly || resolvedDisabled, seed: `search-select-clear-${controlId}`, children: _jsx(Combobox.Clear, { "aria-label": clearLabel, className: "inkra-search-select__clear", disabled: resolvedReadOnly || resolvedDisabled, keepMounted: true, onMouseDown: event => {
+                event.preventDefault();
+                event.stopPropagation();
+            }, onClick: event => {
+                event.stopPropagation();
+                setTimeout(() => {
+                    actionsRef.current?.close();
+                    (searchPlacement === 'trigger' ? searchRef.current : triggerRef.current)?.focus({ preventScroll: true });
+                }, 0);
+            }, render: (renderProps, state) => _jsx(Button, { ...renderProps, "aria-hidden": !state.visible || undefined, tabIndex: state.visible ? 0 : -1, variant: "ghost", size: actionSize }), children: _jsx(PencilIcon, { paths: clearPaths, size: 24, sourceSize: 24 }) }) }) : null;
+    return _jsx(DirectionProvider, { direction: dir, children: _jsxs(Combobox.Root, { actionsRef: actionsRef, items: values, multiple: multiple, value: value, defaultValue: defaultValueRef.current, disabled: resolvedDisabled, readOnly: resolvedReadOnly, required: Boolean(required || field?.required), name: name, form: form, autoHighlight: true, open: resolvedReadOnly || resolvedDisabled ? false : open, defaultOpen: resetVersion === 0 ? defaultOpen : false, onOpenChange: (next, details) => { if (resolvedReadOnly || resolvedDisabled)
                 details.cancel();
             else
-                onOpenChange?.(next); }, itemToStringLabel: item => lookup.get(item)?.label ?? item, filter: (item, query) => contains(`${lookup.get(item)?.label ?? item} ${lookup.get(item)?.keywords ?? ''}`, query), onValueChange: next => {
+                onOpenChange?.(next); }, itemToStringLabel: itemToStringLabel, filter: filter, onValueChange: next => {
                 if (resolvedDisabled || resolvedReadOnly)
                     return;
                 if (props.multiple)
                     props.onValueChange?.(Array.isArray(next) ? next : []);
                 else
                     props.onValueChange?.(typeof next === 'string' ? next : null);
-            }, children: [_jsxs("div", { ...rest, ref: portalRef, dir: dir, className: ['inkra-search-select', className].filter(Boolean).join(' '), "data-placement": searchPlacement, "data-invalid": resolvedInvalid || undefined, children: [_jsxs(Combobox.InputGroup, { className: "inkra-search-select__anchor", children: [searchPlacement === 'trigger' ? search : _jsxs(Combobox.Trigger, { id: controlId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, "aria-readonly": resolvedReadOnly || undefined, className: "inkra-search-select__trigger", render: _jsx(Button, { variant: "outline", fullWidth: true, size: size, align: "start" }), children: [_jsx(Combobox.Value, { children: (selected) => _jsx(PencilText, { ellipsis: true, children: summary(selected) || placeholder }) }), _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 })] }), searchPlacement === 'trigger' && _jsx(Combobox.Trigger, { "aria-label": openLabel, render: _jsx(Button, { variant: "ghost", size: "icon" }), children: _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 }) }), clearable && _jsx(Combobox.Clear, { "aria-label": clearLabel, disabled: resolvedReadOnly || resolvedDisabled, render: _jsx(Button, { variant: "ghost", size: "icon" }), children: _jsx(PencilIcon, { paths: clearPaths, size: 24, sourceSize: 24 }) })] }), multiple && searchPlacement === 'trigger' && _jsx(Combobox.Value, { children: (selected) => selected.length ? _jsx(PencilText, { className: "inkra-search-select__summary", children: summary(selected) }) : null })] }), _jsx(Combobox.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(Combobox.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: "inkra-select__positioner inkra-search-select__positioner", children: _jsx(Combobox.Popup, { className: "inkra-search-select__popup", initialFocus: searchPlacement === 'popup' ? searchRef : false, children: _jsxs(PencilSurface, { variant: "paper", radius: 8, children: [searchPlacement === 'popup' && _jsx("div", { className: "inkra-search-select__search", children: search }), _jsx(Combobox.Empty, { className: "inkra-search-select__empty", children: typeof emptyContent === 'string' ? _jsx(PencilText, { children: emptyContent }) : emptyContent }), _jsx(Combobox.List, { className: "inkra-select__viewport inkra-search-select__list", children: (item) => _jsx(Combobox.Item, { value: item, disabled: lookup.get(item)?.disabled, className: "inkra-select__item", children: _jsxs(PencilSurface, { className: "inkra-select__item-surface", variant: "selection", seed: `search-option-${item}`, children: [_jsx(PencilText, { children: lookup.get(item)?.label ?? item }), _jsx(Combobox.ItemIndicator, { className: "inkra-select__item-indicator", children: _jsx(PencilIcon, { paths: checkPaths, size: 22, sourceSize: 24 }) })] }) }, item) })] }) }) }) }) })] }) });
+            }, children: [_jsxs("div", { ...rest, ref: captureRoot, dir: dir, className: ['inkra-search-select', className].filter(Boolean).join(' '), "data-disabled": resolvedDisabled || undefined, "data-placement": searchPlacement, "data-invalid": resolvedInvalid || undefined, "data-readonly": resolvedReadOnly || undefined, "data-size": size, children: [_jsx(Combobox.InputGroup, { render: _jsx(PencilSurface, { className: "inkra-search-select__anchor inkra-search-select__control", radius: 8, seed: `search-select-control-${controlId}`, variant: resolvedInvalid ? 'danger' : 'outline' }), children: searchPlacement === 'trigger' ? _jsxs(_Fragment, { children: [search, _jsx(InputAction, { disabled: resolvedReadOnly || resolvedDisabled, seed: `search-select-open-${controlId}`, children: _jsx(Combobox.Trigger, { "aria-label": openLabel, className: "inkra-search-select__open", disabled: resolvedReadOnly || resolvedDisabled, render: _jsx(Button, { variant: "ghost", size: actionSize }), children: _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 }) }) }), clear] }) : _jsxs(_Fragment, { children: [_jsxs(Combobox.Trigger, { id: controlId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, "aria-readonly": resolvedReadOnly || undefined, className: "inkra-search-select__trigger", ref: triggerRef, render: _jsx(Button, { variant: "ghost", fullWidth: true, size: size, align: "start" }), children: [_jsx(Combobox.Value, { children: (selected) => _jsx(PencilText, { ellipsis: true, children: summary(selected) || placeholder }) }), _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 })] }), clear] }) }), multiple && searchPlacement === 'trigger' && _jsx(Combobox.Value, { children: (selected) => selected.length ? _jsx(PencilText, { className: "inkra-search-select__summary", children: summary(selected) }) : null })] }), _jsx(Combobox.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(Combobox.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: "inkra-select__positioner inkra-search-select__positioner", children: _jsx(Combobox.Popup, { className: "inkra-search-select__popup", initialFocus: searchPlacement === 'popup' ? searchRef : false, children: _jsxs(PencilSurface, { variant: "paper", radius: 8, children: [searchPlacement === 'popup' && _jsx("div", { className: "inkra-search-select__search", children: search }), _jsx(Combobox.Empty, { className: "inkra-search-select__empty", children: typeof emptyContent === 'string' ? _jsx(PencilText, { children: emptyContent }) : emptyContent }), _jsx(Combobox.List, { className: "inkra-select__viewport inkra-search-select__list", children: (item) => _jsx(Combobox.Item, { value: item, disabled: lookup.get(item)?.disabled, className: "inkra-select__item", children: _jsxs(PencilSurface, { className: "inkra-select__item-surface", variant: "selection", seed: `search-option-${item}`, children: [_jsx(PencilText, { children: lookup.get(item)?.label ?? item }), _jsx(Combobox.ItemIndicator, { className: "inkra-select__item-indicator", children: _jsx(PencilIcon, { paths: checkPaths, size: 22, sourceSize: 24 }) })] }) }, item) })] }) }) }) }) })] }, resetVersion) });
 });
 export const SearchableSelect = forwardRef(function SearchableSelect(props, ref) {
     return _jsx(PortalThemeProvider, { children: _jsx(SearchableControl, { ...props, ref: ref }) });

package/dist/select/Select.d.ts

@@ -87,6 +87,7 @@ export interface SelectClearProps extends ButtonHTMLAttributes<HTMLButtonElement
 export declare const SelectClear: import("react").ForwardRefExoticComponent<SelectClearProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const Select: Readonly<{
     Searchable: import("react").ForwardRefExoticComponent<import("./SearchableSelect.js").SearchableSelectProps & import("react").RefAttributes<HTMLDivElement>>;
+    Stepper: import("react").ForwardRefExoticComponent<import("./StepperSelect.js").SelectStepperProps & import("react").RefAttributes<HTMLButtonElement>>;
     Root: typeof SelectRoot;
     Trigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Value: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/select/Select.js

@@ -3,6 +3,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { SearchableSelect } from './SearchableSelect.js';
+import { SelectStepper } from './StepperSelect.js';
 import { MultipleSelect, MultipleSelectContext, MultipleSelectRoot } from './MultipleSelect.js';
 import { mergeAriaIds, useFieldContext } from '../form/context.js';
 import { PencilIcon } from '../PencilIcon.js';
@@ -175,6 +176,7 @@ export const SelectSeparator = forwardRef(function SelectSeparator({ className,
 });
 export const SelectClear = forwardRef(function SelectClear({ children, className, disabled, onClick, ...props }, ref) {
     const state = useContext(MultipleSelectContext);
+    const { t } = useInkraLocale();
     if (!state)
         throw new Error('Select.Clear must be used inside Select.Root with multiple.');
     return _jsx(Button, { ...props, className: classes('inkra-select__clear', className), ref: ref, type: "button", variant: "ghost", disabled: disabled || state.disabled || state.readOnly || state.values.length === 0, onClick: event => {
@@ -183,10 +185,11 @@ export const SelectClear = forwardRef(function SelectClear({ children, className
                 return;
             state.change([]);
             state.triggerRef.current?.focus({ preventScroll: true });
-        }, children: children ?? 'Clear' });
+        }, children: children ?? t('common.clear') });
 });
-export const Select = Object.freeze({
+export const Select = /* @__PURE__ */ Object.freeze({
     Searchable: SearchableSelect,
+    Stepper: SelectStepper,
     Root: SelectRoot,
     Trigger: SelectTrigger,
     Value: SelectValue,
@@ -203,3 +206,4 @@ export const Select = Object.freeze({
     Separator: SelectSeparator,
     Clear: SelectClear,
 });
+import { useInkraLocale } from '../i18n/index.js';

package/dist/select/StepperSelect.d.ts

@@ -0,0 +1,29 @@
+import type { AriaAttributes, ButtonHTMLAttributes } from 'react';
+import type { FieldControlSize } from '../form/types.js';
+export interface SelectStepperItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectStepperProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'dir' | 'form' | 'name' | 'onChange' | 'readOnly' | 'required' | 'size' | 'value'> {
+    items: readonly SelectStepperItem[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    placeholder?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    size?: FieldControlSize;
+    fullWidth?: boolean;
+    name?: string;
+    form?: string;
+    dir?: 'ltr' | 'rtl';
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+}
+export declare const SelectStepper: import("react").ForwardRefExoticComponent<SelectStepperProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/select/StepperSelect.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
+import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { InputAction } from '../form/InputAction.js';
+import { useResolvedControlProps } from '../form/controlProps.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { findAdjacentStepperItem, findEdgeStepperItem, resolveStepperNativeValue } from './stepperModel.js';
+const previousPaths = [{ d: 'M15 18l-6-6 6-6' }];
+const nextPaths = [{ d: 'M9 18l6-6-6-6' }];
+export const SelectStepper = forwardRef(function SelectStepper(inkraProps, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, defaultValue = null, dir, disabled, form, fullWidth = true, id, invalid, items, loop = false, name, nextLabel = t('select.next'), onKeyDown, onValueChange, placeholder = t('select.placeholder'), previousLabel = t('select.previous'), readOnly, required, size = 'md', value, ...props } = inkraProps;
+    const generatedId = useId();
+    const controlRef = useRef(null);
+    const selectRef = useRef(null);
+    const itemsRef = useRef(items);
+    const defaultValueRef = useRef(defaultValue);
+    const latestValueRef = useRef(value);
+    const controlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const currentValue = controlled ? value ?? null : uncontrolledValue;
+    const state = useResolvedControlProps({
+        id,
+        required,
+        disabled,
+        readOnly,
+        invalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage,
+        'aria-invalid': ariaInvalid,
+    });
+    const controlId = state.id ?? generatedId;
+    const currentItemIndex = items.findIndex(item => item.value === currentValue);
+    const currentItem = currentItemIndex < 0 ? undefined : items[currentItemIndex];
+    const iconSize = size === 'sm' ? 18 : size === 'lg' ? 26 : 22;
+    const buttonSize = size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon';
+    defaultValueRef.current = defaultValue;
+    itemsRef.current = items;
+    latestValueRef.current = value;
+    useEffect(() => {
+        const select = selectRef.current;
+        const formElement = select?.form;
+        if (!select || !formElement)
+            return undefined;
+        let resetTimer;
+        const reset = (event) => {
+            clearTimeout(resetTimer);
+            resetTimer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                if (controlled) {
+                    select.value = resolveStepperNativeValue(itemsRef.current, latestValueRef.current);
+                }
+                else {
+                    const restored = defaultValueRef.current;
+                    // Native reset may restore the first option before React can render. Write the
+                    // effective default even when setState bails out because state already matches.
+                    select.value = resolveStepperNativeValue(itemsRef.current, restored);
+                    setUncontrolledValue(restored);
+                }
+            }, 0);
+        };
+        formElement.addEventListener('reset', reset);
+        return () => {
+            clearTimeout(resetTimer);
+            formElement.removeEventListener('reset', reset);
+        };
+    }, [controlled, form]);
+    function adjacentItem(direction) {
+        return findAdjacentStepperItem(items, currentValue, direction, loop);
+    }
+    function change(next) {
+        if (!next || state.disabled || state.readOnly)
+            return;
+        if (!controlled)
+            setUncontrolledValue(next.value);
+        onValueChange?.(next.value);
+        controlRef.current?.focus({ preventScroll: true });
+    }
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || state.disabled || state.readOnly)
+            return;
+        const rtl = dir === 'rtl' || (dir == null && getComputedStyle(event.currentTarget).direction === 'rtl');
+        let next;
+        if (event.key === 'ArrowUp')
+            next = adjacentItem(-1);
+        else if (event.key === 'ArrowDown')
+            next = adjacentItem(1);
+        else if (event.key === 'ArrowLeft')
+            next = adjacentItem(rtl ? 1 : -1);
+        else if (event.key === 'ArrowRight')
+            next = adjacentItem(rtl ? -1 : 1);
+        else if (event.key === 'Home')
+            next = findEdgeStepperItem(items, 'first');
+        else if (event.key === 'End')
+            next = findEdgeStepperItem(items, 'last');
+        else
+            return;
+        event.preventDefault();
+        change(next);
+    }
+    const previous = adjacentItem(-1);
+    const next = adjacentItem(1);
+    const interactionDisabled = state.disabled || state.readOnly;
+    const visibleLabel = currentItem?.label ?? placeholder;
+    const nativeValue = resolveStepperNativeValue(items, currentValue);
+    const seed = `inkra-select-stepper-${controlId}`;
+    return (_jsx("span", { className: ['inkra-field-control-hit', 'inkra-input-root', 'inkra-select-stepper', className].filter(Boolean).join(' '), "data-disabled": state.disabled || undefined, "data-full-width": fullWidth, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, dir: dir, children: _jsxs(PencilSurface, { as: "div", className: "inkra-field-control inkra-field-control--input inkra-select-stepper__control", clipContent: true, seed: seed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx(InputAction, { disabled: interactionDisabled || previous == null, position: "start", seed: `${seed}-previous`, children: _jsx(Button, { "aria-label": previousLabel, className: "inkra-select-stepper__button inkra-select-stepper__button--previous", disabled: interactionDisabled || previous == null, onClick: () => change(previous), size: buttonSize, type: "button", variant: "ghost", children: _jsx(PencilIcon, { paths: previousPaths, size: iconSize, sourceSize: 24 }) }) }), _jsx("button", { ...props, "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, "aria-readonly": state.readOnly || undefined, "aria-required": state.required || undefined, "aria-valuemax": items.length ? items.length - 1 : undefined, "aria-valuemin": items.length ? 0 : undefined, "aria-valuenow": currentItemIndex < 0 ? undefined : currentItemIndex, "aria-valuetext": visibleLabel, className: "inkra-select-stepper__value", "data-placeholder": currentItem == null || undefined, disabled: state.disabled, id: controlId, onKeyDown: handleKeyDown, ref: node => {
+                        controlRef.current = node;
+                        if (typeof forwardedRef === 'function')
+                            forwardedRef(node);
+                        else if (forwardedRef)
+                            forwardedRef.current = node;
+                    }, role: "spinbutton", type: "button", children: _jsx(PencilText, { ellipsis: true, seed: `${seed}-value`, children: visibleLabel }) }), _jsx(InputAction, { disabled: interactionDisabled || next == null, seed: `${seed}-next`, children: _jsx(Button, { "aria-label": nextLabel, className: "inkra-select-stepper__button inkra-select-stepper__button--next", disabled: interactionDisabled || next == null, onClick: () => change(next), size: buttonSize, type: "button", variant: "ghost", children: _jsx(PencilIcon, { paths: nextPaths, size: iconSize, sourceSize: 24 }) }) }), _jsxs("select", { "aria-hidden": "true", className: "inkra-select-stepper__native", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => {
+                        event.preventDefault();
+                        controlRef.current?.focus({ preventScroll: true });
+                    }, ref: selectRef, required: state.required && !state.readOnly, tabIndex: -1, value: nativeValue, children: [_jsx("option", { value: "" }), items.map(item => _jsx("option", { disabled: item.disabled, value: item.value, children: item.label }, item.value))] })] }) }));
+});

package/dist/select/index.d.ts

@@ -1,4 +1,6 @@
 export { Select, SelectClear, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, } from './Select.js';
 export { SearchableSelect } from './SearchableSelect.js';
 export type { SearchableSelectProps, SearchableSelectOption } from './SearchableSelect.js';
+export { SelectStepper } from './StepperSelect.js';
+export type { SelectStepperItem, SelectStepperProps } from './StepperSelect.js';
 export type { SelectClearProps, SelectContentProps, SelectGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPortalProps, SelectRootProps, SelectSingleRootProps, SelectMultipleRootProps, SelectOption, SelectScrollDownButtonProps, SelectScrollUpButtonProps, SelectSeparatorProps, SelectSize, SelectTriggerProps, SelectValueProps, SelectViewportProps, } from './Select.js';

package/dist/select/index.js

@@ -1,2 +1,3 @@
 export { Select, SelectClear, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, } from './Select.js';
 export { SearchableSelect } from './SearchableSelect.js';
+export { SelectStepper } from './StepperSelect.js';

package/dist/select/stepperModel.d.ts

@@ -0,0 +1,7 @@
+export interface StepperModelItem {
+    value: string;
+    disabled?: boolean;
+}
+export declare function findAdjacentStepperItem<Item extends StepperModelItem>(items: readonly Item[], currentValue: string | null, direction: -1 | 1, loop: boolean): Item | undefined;
+export declare function findEdgeStepperItem<Item extends StepperModelItem>(items: readonly Item[], edge: 'first' | 'last'): Item | undefined;
+export declare function resolveStepperNativeValue(items: readonly StepperModelItem[], value: string | null | undefined): string;

package/dist/select/stepperModel.js

@@ -0,0 +1,29 @@
+export function findAdjacentStepperItem(items, currentValue, direction, loop) {
+    if (items.length === 0)
+        return undefined;
+    const currentIndex = items.findIndex(item => item.value === currentValue);
+    if (currentIndex < 0) {
+        const ordered = direction < 0 ? [...items].reverse() : items;
+        return ordered.find(item => !item.disabled);
+    }
+    for (let offset = 1; offset <= items.length; offset += 1) {
+        let index = currentIndex + direction * offset;
+        if (loop)
+            index = (index + items.length) % items.length;
+        else if (index < 0 || index >= items.length)
+            return undefined;
+        if (index === currentIndex)
+            return undefined;
+        const item = items[index];
+        if (!item.disabled)
+            return item;
+    }
+    return undefined;
+}
+export function findEdgeStepperItem(items, edge) {
+    const ordered = edge === 'last' ? [...items].reverse() : items;
+    return ordered.find(item => !item.disabled);
+}
+export function resolveStepperNativeValue(items, value) {
+    return value != null && items.some(item => item.value === value) ? value : '';
+}

package/dist/selection/Checkbox.js

@@ -10,7 +10,7 @@ function ids(...values) {
     const value = values.filter(Boolean).join(' ');
     return value || undefined;
 }
-export const Checkbox = forwardRef(function Checkbox({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked, className, defaultChecked, description, disabled = false, id, indeterminate = false, label, onChange, onCheckedChange, seed, ...props }, forwardedRef) {
+export const Checkbox = forwardRef(function Checkbox({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked, className, defaultChecked, description, disabled = false, form, id, indeterminate = false, label, onChange, onCheckedChange, seed, ...props }, forwardedRef) {
     const generatedId = useId();
     const inputId = id ?? `inkra-checkbox-${generatedId}`;
     const labelId = `${inputId}-label`;
@@ -22,16 +22,17 @@ export const Checkbox = forwardRef(function Checkbox({ 'aria-label': ariaLabel,
     const { controlled, syncUncontrolled, visualChecked } = useNativeChecked({
         checked,
         defaultChecked,
+        form,
         indeterminate,
         inputRef,
     });
     const selected = visualChecked || indeterminate;
-    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-checkbox', className].filter(Boolean).join(' '), "data-checked": visualChecked || undefined, "data-disabled": disabled || undefined, "data-indeterminate": indeterminate || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-checked": indeterminate ? 'mixed' : undefined, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: controlled ? checked : undefined, className: "inkra-selection-control__input", defaultChecked: controlled ? undefined : defaultChecked, disabled: disabled, id: inputId, onChange: (event) => {
+    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-checkbox', className].filter(Boolean).join(' '), "data-checked": visualChecked || undefined, "data-disabled": disabled || undefined, "data-indeterminate": indeterminate || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-checked": indeterminate ? 'mixed' : undefined, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: controlled ? checked : undefined, className: "inkra-selection-control__input", defaultChecked: controlled ? undefined : defaultChecked, disabled: disabled, form: form, id: inputId, onChange: (event) => {
                     const nextChecked = event.currentTarget.checked;
                     event.currentTarget.indeterminate = indeterminate;
                     if (!controlled)
                         syncUncontrolled(nextChecked);
                     onChange?.(event);
                     onCheckedChange?.(nextChecked);
-                }, ref: inputRef, type: "checkbox" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-selection-control__mark inkra-checkbox__mark", radius: 3, seed: `${resolvedSeed}-mark`, variant: selected ? 'quiet' : 'outline', children: selected ? (_jsx(PencilIcon, { className: "inkra-selection-control__glyph", paths: indeterminate ? mixedPaths : checkPaths, seed: `${resolvedSeed}-${indeterminate ? 'mixed' : 'check'}`, size: 18, sourceSize: 24 })) : null }), _jsxs("span", { className: "inkra-selection-control__copy", children: [typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label }), description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }))] })] }));
+                }, ref: inputRef, type: "checkbox" }), _jsxs(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-selection-control__mark inkra-checkbox__mark", radius: 3, seed: `${resolvedSeed}-mark`, variant: selected ? 'quiet' : 'outline', children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-selection-control__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" }), selected ? (_jsx(PencilIcon, { className: "inkra-selection-control__glyph", paths: indeterminate ? mixedPaths : checkPaths, seed: `${resolvedSeed}-${indeterminate ? 'mixed' : 'check'}`, size: 18, sourceSize: 24 })) : null] }), _jsxs("span", { className: "inkra-selection-control__copy", children: [typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label }), description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }))] })] }));
 });

package/dist/selection/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { createContext, forwardRef, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
@@ -22,29 +22,45 @@ export const RadioGroup = forwardRef(function RadioGroup({ 'aria-label': ariaLab
     const descriptionId = description == null ? undefined : `inkra-radio-group-${generatedId}-description`;
     const rootRef = useRef(null);
     const initialDefaultValueRef = useRef(defaultValue);
+    const currentValueRef = useRef(value);
     useImperativeHandle(forwardedRef, () => rootRef.current);
     const controlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(initialDefaultValueRef.current);
     const currentValue = controlled ? value : uncontrolledValue;
+    currentValueRef.current = value;
     useEffect(() => {
         const root = rootRef.current;
         const ownerForm = root?.form;
-        if (!root || !ownerForm || controlled)
+        if (!root || !ownerForm)
             return undefined;
-        const handleReset = () => {
-            queueMicrotask(() => {
-                const checkedInput = root.querySelector('input[type="radio"]:checked');
-                setUncontrolledValue(checkedInput?.value);
-            });
+        let timer;
+        const handleReset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                const restored = controlled ? currentValueRef.current : initialDefaultValueRef.current;
+                root.querySelectorAll(`input[type="radio"][data-inkra-radio-group="${generatedId}"]`).forEach(input => {
+                    if (input.form !== ownerForm || input.name !== name)
+                        return;
+                    input.checked = input.value === restored;
+                });
+                if (!controlled)
+                    setUncontrolledValue(restored);
+            }, 0);
         };
         ownerForm.addEventListener('reset', handleReset);
-        return () => ownerForm.removeEventListener('reset', handleReset);
-    }, [controlled]);
-    const context = {
+        return () => {
+            clearTimeout(timer);
+            ownerForm.removeEventListener('reset', handleReset);
+        };
+    }, [controlled, form, generatedId, name]);
+    const context = useMemo(() => ({
         controlled,
         defaultValue: initialDefaultValueRef.current,
         disabled,
         form,
+        groupId: generatedId,
         name,
         onItemChange(event) {
             if (!event.currentTarget.checked)
@@ -56,7 +72,7 @@ export const RadioGroup = forwardRef(function RadioGroup({ 'aria-label': ariaLab
         required,
         variant,
         value: currentValue,
-    };
+    }), [controlled, disabled, form, name, onValueChange, required, variant, currentValue]);
     return (_jsx(RadioGroupContext.Provider, { value: context, children: _jsxs("fieldset", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: ['inkra-radio-group', className].filter(Boolean).join(' '), "data-orientation": orientation, "data-variant": variant, disabled: disabled, form: form, ref: rootRef, children: [label == null ? null : typeof label === 'string' ? (_jsx(PencilText, { as: "legend", className: "inkra-radio-group__label", seed: `inkra-radio-group-${generatedId}-label`, children: label })) : _jsx("legend", { className: "inkra-radio-group__label", children: label }), description == null ? null : (_jsx("span", { className: "inkra-radio-group__description", id: descriptionId, children: description })), variant === 'segmented' ? (_jsx(PencilSurface, { className: "inkra-radio-group__frame", radius: 8, seed: `inkra-radio-group-${generatedId}-frame`, variant: "outline", children: _jsx("div", { className: "inkra-radio-group__items", "data-orientation": orientation, children: children }) })) : _jsx("div", { className: "inkra-radio-group__items", "data-orientation": orientation, children: children })] }) }));
 });
 export const RadioGroupItem = forwardRef(function RadioGroupItem({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, className, description, disabled = false, form, icon, id, label, onChange, required = false, seed, value, ...props }, ref) {
@@ -75,8 +91,8 @@ export const RadioGroupItem = forwardRef(function RadioGroupItem({ 'aria-label':
     const resolvedSeed = seed ?? inputId;
     const visibleLabel = typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label });
     const visibleDescription = description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }));
-    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-radio-group__item', className].filter(Boolean).join(' '), "data-checked": selected || undefined, "data-disabled": itemDisabled || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: context.controlled ? selected : undefined, className: "inkra-selection-control__input", defaultChecked: context.controlled ? undefined : context.defaultValue === value, disabled: itemDisabled, form: form ?? context.form, id: inputId, name: context.name, onChange: (event) => {
+    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-radio-group__item', className].filter(Boolean).join(' '), "data-checked": selected || undefined, "data-disabled": itemDisabled || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: context.controlled ? selected : undefined, className: "inkra-selection-control__input", defaultChecked: context.controlled ? undefined : context.defaultValue === value, disabled: itemDisabled, "data-inkra-radio-group": context.groupId, form: form ?? context.form, id: inputId, name: context.name, onChange: (event) => {
                     onChange?.(event);
                     context.onItemChange(event);
-                }, ref: ref, required: required || context.required, type: "radio", value: value }), context.variant === 'segmented' ? (_jsxs("span", { className: "inkra-radio-group__segment", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radio-segment__surface inkra-radio-segment__surface--selection", ref: selectionRef, seed: `${resolvedSeed}-segment-selection`, variant: "selection" }), _jsxs("span", { className: "inkra-radio-segment__content", children: [icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-radio-group__icon", children: icon }), _jsxs("span", { className: "inkra-selection-control__copy", children: [visibleLabel, visibleDescription] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "inkra-selection-control__mark inkra-radio-group__mark", children: _jsx(PencilIcon, { className: "inkra-selection-control__glyph", paths: selected ? selectedPaths : ringPaths, seed: `${resolvedSeed}-${selected ? 'selected' : 'ring'}`, size: 24, sourceSize: 24 }) }), icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-radio-group__icon", children: icon }), _jsxs("span", { className: "inkra-selection-control__copy", children: [visibleLabel, visibleDescription] })] }))] }));
+                }, ref: ref, required: required || context.required, type: "radio", value: value }), context.variant === 'segmented' ? (_jsxs("span", { className: "inkra-radio-group__segment", children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-selection-control__focus-ring inkra-selection-control__focus-ring--inset", seed: `${resolvedSeed}-focus`, variant: "outline" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radio-segment__surface inkra-radio-segment__surface--selection", ref: selectionRef, seed: `${resolvedSeed}-segment-selection`, variant: "selection" }), _jsxs("span", { className: "inkra-radio-segment__content", children: [icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-radio-group__icon", children: icon }), _jsxs("span", { className: "inkra-selection-control__copy", children: [visibleLabel, visibleDescription] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { "aria-hidden": "true", className: "inkra-selection-control__mark inkra-radio-group__mark", children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-selection-control__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" }), _jsx(PencilIcon, { className: "inkra-selection-control__glyph", paths: selected ? selectedPaths : ringPaths, seed: `${resolvedSeed}-${selected ? 'selected' : 'ring'}`, size: 24, sourceSize: 24 })] }), icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-radio-group__icon", children: icon }), _jsxs("span", { className: "inkra-selection-control__copy", children: [visibleLabel, visibleDescription] })] }))] }));
 });

package/dist/selection/Switch.js

@@ -12,7 +12,7 @@ function ids(...values) {
     const value = values.filter(Boolean).join(' ');
     return value || undefined;
 }
-export const Switch = forwardRef(function Switch({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked, className, defaultChecked, description, disabled = false, id, label, onChange, onCheckedChange, seed, ...props }, forwardedRef) {
+export const Switch = forwardRef(function Switch({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked, className, defaultChecked, description, disabled = false, form, id, label, onChange, onCheckedChange, seed, ...props }, forwardedRef) {
     const generatedId = useId();
     const inputId = id ?? `inkra-switch-${generatedId}`;
     const labelId = `${inputId}-label`;
@@ -24,13 +24,14 @@ export const Switch = forwardRef(function Switch({ 'aria-label': ariaLabel, 'ari
     const { controlled, syncUncontrolled, visualChecked } = useNativeChecked({
         checked,
         defaultChecked,
+        form,
         inputRef,
     });
-    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-switch', className].filter(Boolean).join(' '), "data-checked": visualChecked || undefined, "data-disabled": disabled || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: controlled ? checked : undefined, className: "inkra-selection-control__input", defaultChecked: controlled ? undefined : defaultChecked, disabled: disabled, id: inputId, onChange: (event) => {
+    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-switch', className].filter(Boolean).join(' '), "data-checked": visualChecked || undefined, "data-disabled": disabled || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: controlled ? checked : undefined, className: "inkra-selection-control__input", defaultChecked: controlled ? undefined : defaultChecked, disabled: disabled, form: form, id: inputId, onChange: (event) => {
                     const nextChecked = event.currentTarget.checked;
                     if (!controlled)
                         syncUncontrolled(nextChecked);
                     onChange?.(event);
                     onCheckedChange?.(nextChecked);
-                }, ref: inputRef, role: "switch", type: "checkbox" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-switch__track", radius: 8, seed: `${resolvedSeed}-track`, variant: visualChecked ? 'quiet' : 'outline', children: _jsx(PencilIcon, { className: "inkra-switch__thumb", paths: thumbPaths, seed: `${resolvedSeed}-thumb`, size: 24, sourceSize: 40 }) }), _jsxs("span", { className: "inkra-selection-control__copy", children: [typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label }), description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }))] })] }));
+                }, ref: inputRef, role: "switch", type: "checkbox" }), _jsxs(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-switch__track", radius: 8, seed: `${resolvedSeed}-track`, variant: visualChecked ? 'quiet' : 'outline', children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-selection-control__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" }), _jsx(PencilIcon, { className: "inkra-switch__thumb", paths: thumbPaths, seed: `${resolvedSeed}-thumb`, size: 24, sourceSize: 40 })] }), _jsxs("span", { className: "inkra-selection-control__copy", children: [typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label }), description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }))] })] }));
 });

package/dist/selection/useNativeChecked.d.ts

@@ -2,10 +2,11 @@ import type { RefObject } from 'react';
 interface NativeCheckedOptions {
     checked?: boolean;
     defaultChecked?: boolean;
+    form?: string;
     inputRef: RefObject<HTMLInputElement | null>;
     indeterminate?: boolean;
 }
-export declare function useNativeChecked({ checked, defaultChecked, inputRef, indeterminate, }: NativeCheckedOptions): {
+export declare function useNativeChecked({ checked, defaultChecked, form, inputRef, indeterminate, }: NativeCheckedOptions): {
     controlled: boolean;
     visualChecked: boolean;
     syncUncontrolled: import("react").Dispatch<import("react").SetStateAction<boolean>>;

package/dist/selection/useNativeChecked.js

@@ -1,8 +1,13 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
-export function useNativeChecked({ checked, defaultChecked, inputRef, indeterminate = false, }) {
+export function useNativeChecked({ checked, defaultChecked, form, inputRef, indeterminate = false, }) {
     const controlled = checked !== undefined;
-    const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));
+    const defaultCheckedRef = useRef(Boolean(defaultChecked));
+    const checkedRef = useRef(checked);
+    const indeterminateRef = useRef(indeterminate);
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultCheckedRef.current);
+    checkedRef.current = checked;
+    indeterminateRef.current = indeterminate;
     useBrowserLayoutEffect(() => {
         const input = inputRef.current;
         if (input)
@@ -11,14 +16,27 @@ export function useNativeChecked({ checked, defaultChecked, inputRef, indetermin
     useEffect(() => {
         const input = inputRef.current;
         const form = input?.form;
-        if (!input || !form || controlled)
+        if (!input || !form)
             return undefined;
-        const handleReset = () => {
-            queueMicrotask(() => setUncontrolledChecked(input.checked));
+        let timer;
+        const handleReset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                const restored = controlled ? Boolean(checkedRef.current) : defaultCheckedRef.current;
+                input.checked = restored;
+                input.indeterminate = indeterminateRef.current;
+                if (!controlled)
+                    setUncontrolledChecked(restored);
+            }, 0);
         };
         form.addEventListener('reset', handleReset);
-        return () => form.removeEventListener('reset', handleReset);
-    }, [controlled, inputRef]);
+        return () => {
+            clearTimeout(timer);
+            form.removeEventListener('reset', handleReset);
+        };
+    }, [controlled, form, inputRef]);
     return {
         controlled,
         visualChecked: controlled ? Boolean(checked) : uncontrolledChecked,