frey-ui 1.0.13 → 1.0.14

package/dist/cjs/Accordion/accordion.css

@@ -65,6 +65,11 @@
   grid-template-rows: 1fr;
 }
 
+.accordion_content_wrapper_closed_58ee9305 {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .accordion_content_945ef079 {
   overflow: hidden; /* Important for grid animation to hide contents when 0fr */
   padding-bottom: 1rem;
@@ -78,3 +83,11 @@
 .accordion_content_945ef079 {
   padding-bottom: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion_trigger_1c357514,
+  .accordion_chevron_c55f991e,
+  .accordion_content_wrapper_357a0679 {
+    transition: none;
+  }
+}

package/dist/cjs/Accordion/accordion.module.css.cjs

@@ -4,7 +4,7 @@ require('./accordion.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"accordion":"accordion_8f91be6e","accordion_item":"accordion_item_2d6abc63","accordion_header":"accordion_header_c9933178","accordion_trigger":"accordion_trigger_1c357514","accordion_chevron":"accordion_chevron_c55f991e","accordion_chevron_open":"accordion_chevron_open_44560e91","accordion_content_wrapper":"accordion_content_wrapper_357a0679","accordion_content_wrapper_open":"accordion_content_wrapper_open_02841768","accordion_content":"accordion_content_945ef079"};
+var styles = {"accordion":"accordion_8f91be6e","accordion_item":"accordion_item_2d6abc63","accordion_header":"accordion_header_c9933178","accordion_trigger":"accordion_trigger_1c357514","accordion_chevron":"accordion_chevron_c55f991e","accordion_chevron_open":"accordion_chevron_open_44560e91","accordion_content_wrapper":"accordion_content_wrapper_357a0679","accordion_content_wrapper_open":"accordion_content_wrapper_open_02841768","accordion_content_wrapper_closed":"accordion_content_wrapper_closed_58ee9305","accordion_content":"accordion_content_945ef079"};
 
 exports.default = styles;
 //# sourceMappingURL=accordion.module.css.cjs.map

package/dist/cjs/Accordion/index.cjs

@@ -6,9 +6,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
+var useControllableState = require('../hooks/useControllableState.cjs');
 var ChevronDownIcon = require('../Icons/ChevronDownIcon.cjs');
+var mergeRefs = require('../utils/mergeRefs.cjs');
 var accordion_module = require('./accordion.module.css.cjs');
 
+const ACCORDION_FOCUSABLE_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]';
 const AccordionContext = React.createContext(null);
 function useAccordionContext() {
     const context = React.useContext(AccordionContext);
@@ -27,18 +30,13 @@ function useAccordionItemContext() {
 }
 const AccordionRoot = React.forwardRef(function Accordion({ type = 'single', value, defaultValue, onValueChange, className, ...props }, ref) {
     const defaultVal = defaultValue ?? (type === 'multiple' ? [] : '');
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultVal);
-    const currentValue = isControlled ? value : uncontrolledValue;
+    const [currentValue, setCurrentValue] = useControllableState.useControllableValue(value, defaultVal, onValueChange);
     const idPrefix = React.useId();
     const handleValueChange = React.useCallback((nextValue) => {
         let resolvedValue;
         if (type === 'single') {
             const valueAsStr = typeof currentValue === 'string' ? currentValue : '';
             resolvedValue = valueAsStr === nextValue ? '' : nextValue;
-            if (!isControlled) {
-                setUncontrolledValue(resolvedValue);
-            }
         }
         else {
             const valueAsArray = Array.isArray(currentValue) ? currentValue : [];
@@ -46,13 +44,10 @@ const AccordionRoot = React.forwardRef(function Accordion({ type = 'single', val
             const nextArrayValue = isSelected
                 ? valueAsArray.filter((v) => v !== nextValue)
                 : [...valueAsArray, nextValue];
-            if (!isControlled) {
-                setUncontrolledValue(nextArrayValue);
-            }
             resolvedValue = nextArrayValue;
         }
-        onValueChange?.(resolvedValue);
-    }, [type, currentValue, isControlled, onValueChange]);
+        setCurrentValue(resolvedValue);
+    }, [type, currentValue, setCurrentValue]);
     const contextValue = React.useMemo(() => ({
         type,
         value: currentValue,
@@ -83,8 +78,40 @@ AccordionTrigger.displayName = 'Accordion.Trigger';
 const AccordionContent = React.forwardRef(function AccordionContent({ className, children, ...props }, ref) {
     const { idPrefix } = useAccordionContext();
     const { value, isOpen } = useAccordionItemContext();
-    return (jsxRuntime.jsx("section", { ref: ref, id: `${idPrefix}-content-${value}`, "aria-labelledby": `${idPrefix}-trigger-${value}`, className: clsx(accordion_module.default.accordion_content_wrapper, {
-            [accordion_module.default.accordion_content_wrapper_open]: isOpen
+    const contentRef = React.useRef(null);
+    const mergedContentRef = React.useMemo(() => mergeRefs.mergeRefs(ref, contentRef), [ref]);
+    React.useEffect(() => {
+        const node = contentRef.current;
+        if (!node) {
+            return;
+        }
+        const focusableElements = node.querySelectorAll(ACCORDION_FOCUSABLE_SELECTOR);
+        focusableElements.forEach((element) => {
+            if (isOpen) {
+                const originalTabIndex = element.dataset.freyAccordionTabindex;
+                if (originalTabIndex === undefined) {
+                    return;
+                }
+                if (originalTabIndex === '') {
+                    element.removeAttribute('tabindex');
+                }
+                else {
+                    element.setAttribute('tabindex', originalTabIndex);
+                }
+                delete element.dataset.freyAccordionTabindex;
+                return;
+            }
+            if (element.dataset.freyAccordionTabindex !== undefined) {
+                return;
+            }
+            const currentTabIndex = element.getAttribute('tabindex');
+            element.dataset.freyAccordionTabindex = currentTabIndex ?? '';
+            element.setAttribute('tabindex', '-1');
+        });
+    }, [isOpen]);
+    return (jsxRuntime.jsx("section", { ref: mergedContentRef, id: `${idPrefix}-content-${value}`, "aria-labelledby": `${idPrefix}-trigger-${value}`, "aria-hidden": !isOpen, inert: !isOpen, className: clsx(accordion_module.default.accordion_content_wrapper, {
+            [accordion_module.default.accordion_content_wrapper_open]: isOpen,
+            [accordion_module.default.accordion_content_wrapper_closed]: !isOpen
         }), ...props, children: jsxRuntime.jsx("div", { className: clsx(accordion_module.default.accordion_content, className), children: children }) }));
 });
 AccordionContent.displayName = 'Accordion.Content';

package/dist/cjs/Checkbox/checkbox.css

@@ -122,7 +122,7 @@
   cursor: not-allowed;
 }
 
-.visually-hidden_bf54f2cb {
+.visually_hidden_420cf0cd {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/cjs/Checkbox/checkbox.module.css.cjs

@@ -4,7 +4,7 @@ require('./checkbox.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"checkbox-container":"checkbox-container_61f229ee","checkbox":"checkbox_d32c8199","checkbox-sm":"checkbox-sm_a9268e0e","checkbox-md":"checkbox-md_2e4b6d59","checkbox-lg":"checkbox-lg_822bc43d","checkbox-box":"checkbox-box_d429074b","checkbox-disabled":"checkbox-disabled_29936a5d","check-icon":"check-icon_1beba8f1","indeterminate-icon":"indeterminate-icon_d2727941","label":"label_714abdf7","visually-hidden":"visually-hidden_bf54f2cb"};
+var styles = {"checkbox-container":"checkbox-container_61f229ee","checkbox":"checkbox_d32c8199","checkbox-sm":"checkbox-sm_a9268e0e","checkbox-md":"checkbox-md_2e4b6d59","checkbox-lg":"checkbox-lg_822bc43d","checkbox-box":"checkbox-box_d429074b","checkbox-disabled":"checkbox-disabled_29936a5d","check-icon":"check-icon_1beba8f1","indeterminate-icon":"indeterminate-icon_d2727941","label":"label_714abdf7","visually_hidden":"visually_hidden_420cf0cd"};
 
 exports.default = styles;
 //# sourceMappingURL=checkbox.module.css.cjs.map

package/dist/cjs/Checkbox/index.cjs

@@ -8,6 +8,7 @@ var clsx = require('clsx');
 var React = require('react');
 var CheckIcon = require('../Icons/CheckIcon.cjs');
 var MinusIcon = require('../Icons/MinusIcon.cjs');
+var mergeRefs = require('../utils/mergeRefs.cjs');
 var checkbox_module = require('./checkbox.module.css.cjs');
 
 const SizeClassMap = {
@@ -19,27 +20,16 @@ const Checkbox = React.forwardRef(function Checkbox({ label, hideLabel = false,
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
     const internalRef = React.useRef(null);
+    const mergedRef = mergeRefs.mergeRefs(internalRef, forwardedRef);
     React.useLayoutEffect(() => {
         if (internalRef.current) {
             internalRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    const setRef = (node) => {
-        internalRef.current = node;
-        if (node) {
-            node.indeterminate = indeterminate;
-        }
-        if (typeof forwardedRef === 'function') {
-            forwardedRef(node);
-        }
-        else if (forwardedRef) {
-            forwardedRef.current = node;
-        }
-    };
     return (jsxRuntime.jsxs("div", { className: clsx(checkbox_module.default['checkbox-container'], className), style: style, children: [jsxRuntime.jsxs("span", { className: clsx(checkbox_module.default.checkbox, SizeClassMap[size], {
                     [checkbox_module.default['checkbox-disabled']]: disabled
-                }), "aria-disabled": disabled || undefined, children: [jsxRuntime.jsx("input", { type: 'checkbox', id: inputId, disabled: disabled, ref: setRef, "aria-checked": indeterminate ? 'mixed' : undefined, ...inputProps }), jsxRuntime.jsxs("span", { className: checkbox_module.default['checkbox-box'], "aria-hidden": 'true', children: [jsxRuntime.jsx(CheckIcon.CheckIcon, { className: checkbox_module.default['check-icon'], strokeWidth: 'bold', size: 'md' }), jsxRuntime.jsx(MinusIcon.MinusIcon, { className: checkbox_module.default['indeterminate-icon'], strokeWidth: 'bold', size: 'md' })] })] }), jsxRuntime.jsx("label", { htmlFor: inputId, className: clsx(checkbox_module.default.label, {
-                    [checkbox_module.default['visually-hidden']]: hideLabel
+                }), "aria-disabled": disabled || undefined, children: [jsxRuntime.jsx("input", { type: 'checkbox', id: inputId, disabled: disabled, ref: mergedRef, "aria-checked": indeterminate ? 'mixed' : undefined, ...inputProps }), jsxRuntime.jsxs("span", { className: checkbox_module.default['checkbox-box'], "aria-hidden": 'true', children: [jsxRuntime.jsx(CheckIcon.CheckIcon, { className: checkbox_module.default['check-icon'], strokeWidth: 'bold', size: 'md' }), jsxRuntime.jsx(MinusIcon.MinusIcon, { className: checkbox_module.default['indeterminate-icon'], strokeWidth: 'bold', size: 'md' })] })] }), jsxRuntime.jsx("label", { htmlFor: inputId, className: clsx(checkbox_module.default.label, {
+                    [checkbox_module.default.visually_hidden]: hideLabel
                 }), children: label })] }));
 });
 Checkbox.displayName = 'Checkbox';

package/dist/cjs/Combobox/combobox.css

@@ -0,0 +1,140 @@
+.combobox_root_09637419 {
+  position: relative;
+  width: 100%;
+}
+
+.combobox_input_wrapper_7fd4a338 {
+  position: relative;
+  width: 100%;
+}
+
+.combobox_input_51f796ee {
+  width: 100%;
+  color: var(--frey-color-text-primary);
+  background-color: var(--frey-color-surface);
+  border: 1px solid var(--frey-color-border, #d1d5db);
+  border-radius: 0.375rem;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+  box-sizing: border-box;
+  font-family: inherit;
+  padding-right: 2.25rem;
+}
+
+.combobox_input_51f796ee:focus-visible {
+  border-color: var(--frey-focus-ring);
+  box-shadow: 0 0 0 2px var(--frey-focus-ring);
+}
+
+.combobox_input_51f796ee:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--frey-color-surface-subtle, #f1f1f1);
+}
+
+.combobox_input_error_c2170046 {
+  border-color: var(--frey-color-error, #dc2626);
+}
+
+.combobox_input_error_c2170046:focus-visible {
+  border-color: var(--frey-color-error, #dc2626);
+  box-shadow: 0 0 0 2px var(--frey-color-error, #dc2626);
+}
+
+.combobox_input_sm_058a1114 {
+  min-height: 2rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem 2rem;
+  font-size: 0.8125rem;
+}
+
+.combobox_input_md_8aee06ca {
+  min-height: 2.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem 2rem;
+  font-size: 0.875rem;
+}
+
+.combobox_input_lg_4b0a7fac {
+  min-height: 2.875rem;
+  padding-block: 0.625rem;
+  padding-inline: 0.875rem 2rem;
+  font-size: 0.9375rem;
+}
+
+.combobox_icon_57742fb0 {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--frey-color-text-secondary, #6b7280);
+  width: 1rem;
+  height: 1rem;
+}
+
+.combobox_listbox_ec63ee60 {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0.25rem;
+  list-style: none;
+  max-height: 14rem;
+  overflow-y: auto;
+  background: var(--frey-color-surface, #ffffff);
+  border: 1px solid var(--frey-color-border, #d1d5db);
+  border-radius: 0.5rem;
+  box-shadow: var(--frey-shadow-md, 0 10px 30px rgb(0 0 0 / 12%));
+  z-index: 20;
+  display: grid;
+  gap: 0.125rem;
+}
+
+.combobox_option_1440ebc4 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 2rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  border: none;
+  background-color: transparent;
+  color: var(--frey-color-text-primary, #111827);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 0.16s ease,
+    color 0.16s ease;
+}
+
+.combobox_option_1440ebc4:focus-visible {
+  outline: 2px solid var(--frey-focus-ring);
+  outline-offset: 1px;
+}
+
+.combobox_option_1440ebc4:hover {
+  background-color: var(--frey-color-surface-subtle, #f3f4f6);
+}
+
+.combobox_option_active_01b209b7 {
+  background-color: var(--frey-color-surface-subtle, #f3f4f6);
+}
+
+.combobox_option_disabled_36362911 {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.combobox_empty_state_3311246e {
+  margin: 0;
+  min-height: 2rem;
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  color: var(--frey-color-text-muted, #6b7280);
+  font-size: 0.875rem;
+}

package/dist/cjs/Combobox/combobox.module.css.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+require('./combobox.css');
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"combobox_root":"combobox_root_09637419","combobox_input_wrapper":"combobox_input_wrapper_7fd4a338","combobox_input":"combobox_input_51f796ee","combobox_input_error":"combobox_input_error_c2170046","combobox_input_sm":"combobox_input_sm_058a1114","combobox_input_md":"combobox_input_md_8aee06ca","combobox_input_lg":"combobox_input_lg_4b0a7fac","combobox_icon":"combobox_icon_57742fb0","combobox_listbox":"combobox_listbox_ec63ee60","combobox_option":"combobox_option_1440ebc4","combobox_option_active":"combobox_option_active_01b209b7","combobox_option_disabled":"combobox_option_disabled_36362911","combobox_empty_state":"combobox_empty_state_3311246e"};
+
+exports.default = styles;
+//# sourceMappingURL=combobox.module.css.cjs.map

package/dist/cjs/Combobox/index.cjs

@@ -0,0 +1,191 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var index = require('../Field/index.cjs');
+var useControllableState = require('../hooks/useControllableState.cjs');
+var ChevronDownIcon = require('../Icons/ChevronDownIcon.cjs');
+var aria = require('../utils/aria.cjs');
+var combobox_module = require('./combobox.module.css.cjs');
+
+const SizeClassMap = {
+    sm: combobox_module.default.combobox_input_sm,
+    md: combobox_module.default.combobox_input_md,
+    lg: combobox_module.default.combobox_input_lg
+};
+function findNextEnabledOptionIndex(options, startIndex, direction) {
+    if (options.length === 0) {
+        return -1;
+    }
+    let currentIndex = startIndex;
+    for (const _option of options) {
+        currentIndex = (currentIndex + direction + options.length) % options.length;
+        if (!options[currentIndex]?.disabled) {
+            return currentIndex;
+        }
+    }
+    return -1;
+}
+function dispatchInputChangeEvent(input, nextValue) {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(globalThis.HTMLInputElement.prototype, 'value')?.set;
+    const setInputValue = nativeInputValueSetter ??
+        function setInputValueFallback(value) {
+            this.value = value;
+        };
+    setInputValue.call(input, nextValue);
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+const Combobox = React.forwardRef(function Combobox({ label, options, hideLabel = false, error, helperText, size = 'md', value, defaultValue, onChange, noResultsText = 'No results found', className, style, id, disabled = false, required = false, autoComplete, onFocus, onBlur, onClick, onKeyDown, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...inputProps }, ref) {
+    const [currentValue, setCurrentValue] = useControllableState.useControllableValue(value, defaultValue ?? '');
+    const [open, setOpen] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const rootRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const suppressOpenOnNextInputChangeRef = React.useRef(false);
+    const query = currentValue.trim().toLowerCase();
+    const filteredOptions = React.useMemo(() => {
+        if (!query) {
+            return options;
+        }
+        return options.filter((option) => {
+            const candidate = `${option.label} ${option.value}`.toLowerCase();
+            return candidate.includes(query);
+        });
+    }, [options, query]);
+    const closeOptions = React.useCallback(() => {
+        setOpen(false);
+        setActiveIndex(-1);
+    }, []);
+    const selectOption = React.useCallback((option) => {
+        setCurrentValue(option.label);
+        closeOptions();
+        if (onChange && inputRef.current) {
+            suppressOpenOnNextInputChangeRef.current = true;
+            dispatchInputChangeEvent(inputRef.current, option.label);
+        }
+    }, [closeOptions, onChange, setCurrentValue]);
+    React.useEffect(() => {
+        if (disabled) {
+            closeOptions();
+        }
+    }, [closeOptions, disabled]);
+    React.useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const handlePointerDown = (event) => {
+            if (rootRef.current &&
+                event.target instanceof Node &&
+                !rootRef.current.contains(event.target)) {
+                closeOptions();
+            }
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+        };
+    }, [closeOptions, open]);
+    return (jsxRuntime.jsx(index.default, { label: label, hideLabel: hideLabel, error: error, helperText: helperText, disabled: disabled, required: required, id: id, className: className, style: style, children: ({ inputId, describedBy, hasError }) => {
+            const listboxId = `${inputId}-listbox`;
+            const activeOptionId = activeIndex >= 0 && activeIndex < filteredOptions.length
+                ? `${inputId}-option-${activeIndex}`
+                : undefined;
+            const isPopupVisible = open && !disabled;
+            const isListboxVisible = isPopupVisible && filteredOptions.length > 0;
+            const handleInputChange = (event) => {
+                const shouldKeepClosed = suppressOpenOnNextInputChangeRef.current;
+                suppressOpenOnNextInputChangeRef.current = false;
+                setCurrentValue(event.target.value);
+                if (!shouldKeepClosed) {
+                    setOpen(true);
+                    setActiveIndex(-1);
+                }
+                onChange?.(event);
+            };
+            const handleInputFocus = (event) => {
+                onFocus?.(event);
+                if (!event.defaultPrevented && !disabled) {
+                    setOpen(true);
+                }
+            };
+            const handleInputBlur = (event) => {
+                onBlur?.(event);
+                const nextFocused = event.relatedTarget;
+                if (!nextFocused ||
+                    (nextFocused instanceof Node &&
+                        rootRef.current &&
+                        !rootRef.current.contains(nextFocused))) {
+                    closeOptions();
+                }
+            };
+            const handleInputClick = (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented && !disabled) {
+                    setOpen(true);
+                }
+            };
+            const handleInputKeyDown = (event) => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented || disabled) {
+                    return;
+                }
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    if (!open) {
+                        setOpen(true);
+                    }
+                    setActiveIndex((previousIndex) => findNextEnabledOptionIndex(filteredOptions, previousIndex, 1));
+                    return;
+                }
+                if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    if (!open) {
+                        setOpen(true);
+                    }
+                    setActiveIndex((previousIndex) => findNextEnabledOptionIndex(filteredOptions, previousIndex, -1));
+                    return;
+                }
+                if (event.key === 'Enter' && open && activeIndex >= 0) {
+                    event.preventDefault();
+                    const selectedOption = filteredOptions[activeIndex];
+                    if (selectedOption) {
+                        selectOption(selectedOption);
+                    }
+                    return;
+                }
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    closeOptions();
+                }
+            };
+            return (jsxRuntime.jsxs("div", { ref: rootRef, className: combobox_module.default.combobox_root, children: [jsxRuntime.jsxs("div", { className: combobox_module.default.combobox_input_wrapper, children: [jsxRuntime.jsx("input", { ref: (node) => {
+                                    inputRef.current = node;
+                                    if (typeof ref === 'function') {
+                                        ref(node);
+                                        return;
+                                    }
+                                    if (ref) {
+                                        ref.current = node;
+                                    }
+                                }, id: inputId, type: 'text', role: 'combobox', value: currentValue, disabled: disabled, required: required, autoComplete: autoComplete ?? 'off', "aria-autocomplete": 'list', "aria-haspopup": 'listbox', "aria-expanded": isListboxVisible, "aria-controls": isListboxVisible ? listboxId : undefined, "aria-activedescendant": isListboxVisible ? activeOptionId : undefined, className: clsx(combobox_module.default.combobox_input, SizeClassMap[size], hasError && combobox_module.default.combobox_input_error), onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, ...aria.computeAriaProps(hasError, describedBy, ariaDescribedBy, ariaInvalid), ...inputProps }), jsxRuntime.jsx(ChevronDownIcon.ChevronDownIcon, { className: combobox_module.default.combobox_icon, size: 16 })] }), isPopupVisible && !isListboxVisible && (jsxRuntime.jsx("div", { role: 'status', "aria-live": 'polite', className: combobox_module.default.combobox_listbox, children: jsxRuntime.jsx("p", { className: combobox_module.default.combobox_empty_state, children: noResultsText }) })), isListboxVisible && (jsxRuntime.jsx("div", { id: listboxId, role: 'listbox', className: combobox_module.default.combobox_listbox, children: filteredOptions.map((option, index) => {
+                            const isActive = activeIndex === index;
+                            const isDisabled = Boolean(option.disabled);
+                            return (jsxRuntime.jsx("button", { id: `${inputId}-option-${index}`, type: 'button', role: 'option', disabled: isDisabled, tabIndex: -1, "aria-selected": isActive, "aria-disabled": isDisabled || undefined, className: clsx(combobox_module.default.combobox_option, {
+                                    [combobox_module.default.combobox_option_active]: isActive,
+                                    [combobox_module.default.combobox_option_disabled]: isDisabled
+                                }), onMouseEnter: isDisabled ? undefined : () => setActiveIndex(index), onMouseDown: isDisabled
+                                    ? undefined
+                                    : (event) => {
+                                        event.preventDefault();
+                                    }, onClick: isDisabled ? undefined : () => selectOption(option), children: option.label }, option.value));
+                        }) }))] }));
+        } }));
+});
+Combobox.displayName = 'Combobox';
+
+exports.default = Combobox;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/Dialog/dialog.css

@@ -142,3 +142,16 @@
 .dialog_body_39a5839d {
   margin-top: 0.875rem;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog_root_1c624aa8,
+  .dialog_root_1c624aa8::backdrop,
+  .dialog_content_ee12e897,
+  .dialog_close_e5b07e60 {
+    transition: none;
+  }
+
+  .dialog_content_ee12e897 {
+    transform: none;
+  }
+}

package/dist/cjs/Dialog/index.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
+var useControllableState = require('../hooks/useControllableState.cjs');
 var CloseIcon = require('../Icons/CloseIcon.cjs');
 var mergeRefs = require('../utils/mergeRefs.cjs');
 var Portal = require('../utils/Portal.cjs');
@@ -22,15 +23,7 @@ function useDialogContext() {
 }
 const DialogRoot = function Dialog({ open, defaultOpen = false, onOpenChange, children }) {
     const idPrefix = React.useId();
-    const isControlled = open !== undefined;
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
-    const currentOpen = isControlled ? open : uncontrolledOpen;
-    const handleOpenChange = React.useCallback((nextOpen) => {
-        if (!isControlled) {
-            setUncontrolledOpen(nextOpen);
-        }
-        onOpenChange?.(nextOpen);
-    }, [isControlled, onOpenChange]);
+    const [currentOpen, handleOpenChange] = useControllableState.useControllableState(open, defaultOpen, onOpenChange);
     const contextValue = React.useMemo(() => ({ open: currentOpen, onOpenChange: handleOpenChange, idPrefix }), [currentOpen, handleOpenChange, idPrefix]);
     return (jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children: children }));
 };

package/dist/cjs/Popover/index.cjs

@@ -119,7 +119,7 @@ const PopoverContent = React.forwardRef(function PopoverContent({ className, sty
     const floatingProps = getFloatingProps(props);
     if (!open)
         return null;
-    return (jsxRuntime.jsx(Portal.default, { children: jsxRuntime.jsx(react.FloatingFocusManager, { context: floatingContext, modal: true, returnFocus: true, outsideElementsInert: false, initialFocus: 0, children: jsxRuntime.jsx("div", { id: `${idPrefix}-content`, ref: mergeRefs.mergeRefs(ref, setFloating), "aria-live": 'polite', className: clsx(popover_module.default.popover_content, className), style: {
+    return (jsxRuntime.jsx(Portal.default, { children: jsxRuntime.jsx(react.FloatingFocusManager, { context: floatingContext, modal: true, returnFocus: true, outsideElementsInert: false, initialFocus: 0, children: jsxRuntime.jsx("div", { id: `${idPrefix}-content`, ref: mergeRefs.mergeRefs(ref, setFloating), className: clsx(popover_module.default.popover_content, className), style: {
                     ...floatingStyles,
                     ...style
                 }, ...floatingProps, children: children }) }) }));

package/dist/cjs/Popover/popover.css

@@ -23,3 +23,9 @@
     transform: translateY(0) scale(1);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .popover_content_0199c0e3 {
+    animation: none;
+  }
+}

package/dist/cjs/Progress/index.cjs

@@ -21,7 +21,7 @@ const Progress = React.forwardRef(function Progress({ value = 0, max = 100, inde
     const safeValue = Number.isFinite(value) ? clampValue(value, safeMax) : 0;
     const percent = (safeValue / safeMax) * 100;
     const valueText = `${Math.round(percent)}%`;
-    return (jsxRuntime.jsxs("div", { ref: ref, className: clsx(progress_module.default.progress_root, className), style: style, ...rootProps, children: [(label || showValue) && (jsxRuntime.jsxs("div", { className: progress_module.default.progress_header, children: [label && jsxRuntime.jsx("span", { className: progress_module.default.progress_label, children: label }), showValue && !indeterminate && (jsxRuntime.jsx("span", { className: progress_module.default.progress_value, children: valueText }))] })), jsxRuntime.jsx("div", { className: clsx(progress_module.default.progress_track_wrapper, SizeClassMap[size]), children: jsxRuntime.jsx("progress", { className: clsx(progress_module.default.progress_track, indeterminate && progress_module.default.progress_track_indeterminate, barClassName), "aria-label": label ?? 'Progress', value: indeterminate ? undefined : safeValue, max: safeMax }) })] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: clsx(progress_module.default.progress_root, className), style: style, ...rootProps, children: [(label || showValue) && (jsxRuntime.jsxs("div", { className: progress_module.default.progress_header, children: [label && jsxRuntime.jsx("span", { className: progress_module.default.progress_label, children: label }), showValue && !indeterminate && (jsxRuntime.jsx("span", { className: progress_module.default.progress_value, children: valueText }))] })), jsxRuntime.jsx("div", { className: clsx(progress_module.default.progress_track_wrapper, SizeClassMap[size]), children: jsxRuntime.jsx("progress", { className: clsx(progress_module.default.progress_track, indeterminate && progress_module.default.progress_track_indeterminate, barClassName), "aria-label": label ?? 'Progress', "aria-busy": indeterminate || undefined, "aria-valuenow": indeterminate ? undefined : safeValue, "aria-valuemax": safeMax, "aria-valuetext": indeterminate ? 'Loading' : valueText, value: indeterminate ? undefined : safeValue, max: safeMax }) })] }));
 });
 Progress.displayName = 'Progress';
 

package/dist/cjs/Progress/progress.css

@@ -84,3 +84,16 @@
     transform: translateX(320%);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .progress_track_d33f2771::-webkit-progress-value,
+  .progress_track_d33f2771::-moz-progress-bar {
+    transition: none;
+  }
+
+  .progress_track_indeterminate_50b31de5::before {
+    animation: none;
+    width: 60%;
+    transform: translateX(0);
+  }
+}

package/dist/cjs/RadioGroup/index.cjs

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
 var index = require('../Field/index.cjs');
+var useControllableState = require('../hooks/useControllableState.cjs');
 var radiogroup_module = require('./radiogroup.module.css.cjs');
 
 const OrientationClassMap = {
@@ -16,13 +17,9 @@ const OrientationClassMap = {
 const RadioGroup = React.forwardRef(function RadioGroup({ label, options, value, defaultValue, onChange, hideLabel = false, helperText, error, disabled = false, required = false, orientation = 'vertical', name, id, className, style, ...groupProps }, ref) {
     const generatedName = React.useId();
     const groupName = name ?? generatedName;
-    const isControlled = typeof value === 'string';
-    const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
-    const selectedValue = isControlled ? value : internalValue;
+    const [selectedValue, setSelectedValue] = useControllableState.useControllableValue(value, defaultValue ?? '');
     const handleChange = (event) => {
-        if (!isControlled) {
-            setInternalValue(event.target.value);
-        }
+        setSelectedValue(event.target.value);
         onChange?.(event);
     };
     return (jsxRuntime.jsx(index.default, { label: label, hideLabel: hideLabel, helperText: helperText, error: error, disabled: disabled, required: required, id: id, className: className, style: style, labelElement: 'span', children: ({ inputId, labelId, describedBy, hasError }) => (jsxRuntime.jsx("div", { ref: ref, id: inputId, role: 'radiogroup', "aria-labelledby": labelId, "aria-describedby": describedBy, "aria-invalid": hasError || undefined, className: clsx(radiogroup_module.default.radio_group, OrientationClassMap[orientation], disabled && radiogroup_module.default.radio_group_disabled), ...groupProps, children: options.map((option, index) => {