frey-ui 1.0.13 → 1.0.14

package/dist/esm/Combobox/index.mjs

@@ -0,0 +1,187 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import React from 'react';
+import Field from '../Field/index.mjs';
+import { useControllableValue } from '../hooks/useControllableState.mjs';
+import { ChevronDownIcon } from '../Icons/ChevronDownIcon.mjs';
+import { computeAriaProps } from '../utils/aria.mjs';
+import styles from './combobox.module.css.mjs';
+
+const SizeClassMap = {
+    sm: styles.combobox_input_sm,
+    md: styles.combobox_input_md,
+    lg: styles.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] = 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 (jsx(Field, { 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 (jsxs("div", { ref: rootRef, className: styles.combobox_root, children: [jsxs("div", { className: styles.combobox_input_wrapper, children: [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(styles.combobox_input, SizeClassMap[size], hasError && styles.combobox_input_error), onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, ...computeAriaProps(hasError, describedBy, ariaDescribedBy, ariaInvalid), ...inputProps }), jsx(ChevronDownIcon, { className: styles.combobox_icon, size: 16 })] }), isPopupVisible && !isListboxVisible && (jsx("div", { role: 'status', "aria-live": 'polite', className: styles.combobox_listbox, children: jsx("p", { className: styles.combobox_empty_state, children: noResultsText }) })), isListboxVisible && (jsx("div", { id: listboxId, role: 'listbox', className: styles.combobox_listbox, children: filteredOptions.map((option, index) => {
+                            const isActive = activeIndex === index;
+                            const isDisabled = Boolean(option.disabled);
+                            return (jsx("button", { id: `${inputId}-option-${index}`, type: 'button', role: 'option', disabled: isDisabled, tabIndex: -1, "aria-selected": isActive, "aria-disabled": isDisabled || undefined, className: clsx(styles.combobox_option, {
+                                    [styles.combobox_option_active]: isActive,
+                                    [styles.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';
+
+export { Combobox as default };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/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/esm/Dialog/index.mjs

@@ -1,7 +1,8 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { createContext, useContext, useId, useState } from 'react';
+import React, { createContext, useContext, useId } from 'react';
+import { useControllableState } from '../hooks/useControllableState.mjs';
 import { CloseIcon } from '../Icons/CloseIcon.mjs';
 import { mergeRefs } from '../utils/mergeRefs.mjs';
 import Portal from '../utils/Portal.mjs';
@@ -18,15 +19,7 @@ function useDialogContext() {
 }
 const DialogRoot = function Dialog({ open, defaultOpen = false, onOpenChange, children }) {
     const idPrefix = useId();
-    const isControlled = open !== undefined;
-    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-    const currentOpen = isControlled ? open : uncontrolledOpen;
-    const handleOpenChange = React.useCallback((nextOpen) => {
-        if (!isControlled) {
-            setUncontrolledOpen(nextOpen);
-        }
-        onOpenChange?.(nextOpen);
-    }, [isControlled, onOpenChange]);
+    const [currentOpen, handleOpenChange] = useControllableState(open, defaultOpen, onOpenChange);
     const contextValue = React.useMemo(() => ({ open: currentOpen, onOpenChange: handleOpenChange, idPrefix }), [currentOpen, handleOpenChange, idPrefix]);
     return (jsx(DialogContext.Provider, { value: contextValue, children: children }));
 };

package/dist/esm/Popover/index.mjs

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

package/dist/esm/Popover/popover.css

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

package/dist/esm/Progress/index.mjs

@@ -17,7 +17,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 (jsxs("div", { ref: ref, className: clsx(styles.progress_root, className), style: style, ...rootProps, children: [(label || showValue) && (jsxs("div", { className: styles.progress_header, children: [label && jsx("span", { className: styles.progress_label, children: label }), showValue && !indeterminate && (jsx("span", { className: styles.progress_value, children: valueText }))] })), jsx("div", { className: clsx(styles.progress_track_wrapper, SizeClassMap[size]), children: jsx("progress", { className: clsx(styles.progress_track, indeterminate && styles.progress_track_indeterminate, barClassName), "aria-label": label ?? 'Progress', value: indeterminate ? undefined : safeValue, max: safeMax }) })] }));
+    return (jsxs("div", { ref: ref, className: clsx(styles.progress_root, className), style: style, ...rootProps, children: [(label || showValue) && (jsxs("div", { className: styles.progress_header, children: [label && jsx("span", { className: styles.progress_label, children: label }), showValue && !indeterminate && (jsx("span", { className: styles.progress_value, children: valueText }))] })), jsx("div", { className: clsx(styles.progress_track_wrapper, SizeClassMap[size]), children: jsx("progress", { className: clsx(styles.progress_track, indeterminate && styles.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/esm/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/esm/RadioGroup/index.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
 import Field from '../Field/index.mjs';
+import { useControllableValue } from '../hooks/useControllableState.mjs';
 import styles from './radiogroup.module.css.mjs';
 
 const OrientationClassMap = {
@@ -12,13 +13,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] = useControllableValue(value, defaultValue ?? '');
     const handleChange = (event) => {
-        if (!isControlled) {
-            setInternalValue(event.target.value);
-        }
+        setSelectedValue(event.target.value);
         onChange?.(event);
     };
     return (jsx(Field, { 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 }) => (jsx("div", { ref: ref, id: inputId, role: 'radiogroup', "aria-labelledby": labelId, "aria-describedby": describedBy, "aria-invalid": hasError || undefined, className: clsx(styles.radio_group, OrientationClassMap[orientation], disabled && styles.radio_group_disabled), ...groupProps, children: options.map((option, index) => {

package/dist/esm/Spinner/index.mjs

@@ -15,7 +15,7 @@ function resolveSize(size) {
     }
     return SpinnerSizeMap[size ?? 'md'];
 }
-const Spinner = React.forwardRef(function Spinner({ size = 'md', label = 'Loading', className, style }, ref) {
+const Spinner = React.forwardRef(function Spinner({ size, label = 'Loading', className, style }, ref) {
     const resolvedSize = resolveSize(size);
     return (jsxs("output", { ref: ref, className: clsx(styles.spinner_root, className), style: {
             '--spinner-size': `${resolvedSize}px`,

package/dist/esm/Switch/index.mjs

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React, { useId } from 'react';
+import { useControllableState } from '../hooks/useControllableState.mjs';
 import styles from './switch.module.css.mjs';
 
 const SizeClassMap = {
@@ -9,10 +10,12 @@ const SizeClassMap = {
     md: styles['switch-md'],
     lg: styles['switch-lg']
 };
-const Switch = React.forwardRef(function Switch({ label, hideLabel = false, size = 'md', className, style, id, disabled = false, onChange, onKeyDown, ...inputProps }, ref) {
+const Switch = React.forwardRef(function Switch({ label, hideLabel = false, size = 'md', className, style, id, disabled = false, onChange, onKeyDown, checked, defaultChecked, ...inputProps }, ref) {
     const generatedId = useId();
     const inputId = id ?? generatedId;
+    const [currentChecked, setCurrentChecked] = useControllableState(checked, Boolean(defaultChecked));
     const handleChange = (event) => {
+        setCurrentChecked(event.target.checked);
         onChange?.(event);
     };
     const handleKeyDown = (event) => {
@@ -24,8 +27,8 @@ const Switch = React.forwardRef(function Switch({ label, hideLabel = false, size
     };
     return (jsxs("div", { className: clsx(styles['switch-container'], className), style: style, children: [jsxs("span", { className: clsx(styles.switch, SizeClassMap[size], {
                     [styles['switch-disabled']]: disabled
-                }), "aria-disabled": disabled || undefined, children: [jsx("input", { type: 'checkbox', role: 'switch', id: inputId, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, "aria-checked": inputProps.checked, ref: ref, ...inputProps }), jsx("span", { className: styles.slider, "aria-hidden": 'true' })] }), jsx("label", { htmlFor: inputId, className: clsx(styles.label, {
-                    [styles['visually-hidden']]: hideLabel
+                }), "aria-disabled": disabled || undefined, children: [jsx("input", { type: 'checkbox', role: 'switch', id: inputId, checked: currentChecked, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, "aria-checked": currentChecked, ref: ref, ...inputProps }), jsx("span", { className: styles.slider, "aria-hidden": 'true' })] }), jsx("label", { htmlFor: inputId, className: clsx(styles.label, {
+                    [styles.visually_hidden]: hideLabel
                 }), children: label })] }));
 });
 Switch.displayName = 'Switch';

package/dist/esm/Switch/switch.css

@@ -110,7 +110,7 @@
   cursor: not-allowed;
 }
 
-.visually-hidden_75ccb710 {
+.visually_hidden_3bca186b {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -121,3 +121,10 @@
   white-space: nowrap;
   border: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .slider_5603991a,
+  .slider_5603991a::before {
+    transition: none;
+  }
+}

package/dist/esm/Switch/switch.module.css.mjs

@@ -1,6 +1,6 @@
 'use client';
 import './switch.css';
-var styles = {"switch-container":"switch-container_63905009","switch":"switch_011a552d","switch-sm":"switch-sm_3a85b947","switch-md":"switch-md_e3005d26","switch-lg":"switch-lg_daceb03b","slider":"slider_5603991a","switch-disabled":"switch-disabled_f3161357","label":"label_3314af1a","visually-hidden":"visually-hidden_75ccb710"};
+var styles = {"switch-container":"switch-container_63905009","switch":"switch_011a552d","switch-sm":"switch-sm_3a85b947","switch-md":"switch-md_e3005d26","switch-lg":"switch-lg_daceb03b","slider":"slider_5603991a","switch-disabled":"switch-disabled_f3161357","label":"label_3314af1a","visually_hidden":"visually_hidden_3bca186b"};
 
 export { styles as default };
 //# sourceMappingURL=switch.module.css.mjs.map

package/dist/esm/Tabs/index.mjs

@@ -1,7 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { createContext, useId, useState, useContext } from 'react';
+import React, { createContext, useId, useContext } from 'react';
+import { useControllableValue } from '../hooks/useControllableState.mjs';
 import { useRovingCollection } from '../hooks/useRovingCollection.mjs';
 import { mergeRefs } from '../utils/mergeRefs.mjs';
 import styles from './tabs.module.css.mjs';
@@ -17,15 +18,10 @@ function useTabsContext() {
 const TabsRoot = React.forwardRef(function Tabs({ value, defaultValue, onValueChange, className, ...props }, ref) {
     const idPrefix = useId();
     const triggerCollection = useRovingCollection();
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? '');
-    const currentValue = isControlled ? value : uncontrolledValue;
+    const [currentValue, setCurrentValue] = useControllableValue(value, defaultValue ?? '', onValueChange);
     const handleValueChange = React.useCallback((nextValue) => {
-        if (!isControlled) {
-            setUncontrolledValue(nextValue);
-        }
-        onValueChange?.(nextValue);
-    }, [isControlled, onValueChange]);
+        setCurrentValue(nextValue);
+    }, [setCurrentValue]);
     const contextValue = React.useMemo(() => ({
         value: currentValue,
         onValueChange: handleValueChange,

package/dist/esm/TextInput/textinput.css

@@ -80,7 +80,7 @@
   margin: 0;
 }
 
-.visually-hidden_2e7218f5 {
+.visually_hidden_6fce66d0 {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/esm/ThemeProvider/index.mjs

@@ -1,15 +1,23 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { createContext, useState, useEffect, useMemo } from 'react';
+import { createContext, useState, useEffect, useMemo, useContext } from 'react';
 import styles from './themeprovider.module.css.mjs';
 
 const ThemeContext = createContext(null);
+function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider.');
+    }
+    return context;
+}
 function ThemeProvider({ children, theme = 'light', highContrast = false, id, className, style }) {
     const [systemTheme, setSystemTheme] = useState('light');
     useEffect(() => {
-        if (theme !== 'system')
+        if (theme !== 'system' || typeof globalThis.matchMedia !== 'function') {
             return;
+        }
         const mediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
         setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
         const handleChange = (e) => {
@@ -23,5 +31,5 @@ function ThemeProvider({ children, theme = 'light', highContrast = false, id, cl
     return (jsx(ThemeContext.Provider, { value: contextValue, children: jsx("div", { id: id, className: clsx('frey-theme-provider', styles['frey-theme-provider'], className), style: style, "data-frey-theme": resolvedTheme, "data-frey-high-contrast": highContrast, children: children }) }));
 }
 
-export { ThemeContext, ThemeProvider as default };
+export { ThemeContext, ThemeProvider as default, useTheme };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/Toast/toast.css

@@ -149,3 +149,14 @@
     transform: translateY(0);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .toast_ab9f2513 {
+    animation: none;
+  }
+
+  .toast_action_ea986326,
+  .toast_close_0f117163 {
+    transition: none;
+  }
+}

package/dist/esm/hooks/useControllableState.mjs

@@ -2,10 +2,10 @@
 import { useState, useCallback } from 'react';
 
 /**
- * Manages a boolean value that can be either controlled (value supplied by parent)
+ * Manages a value that can be either controlled (value supplied by parent)
  * or uncontrolled (managed internally with an optional callback).
  */
-function useControllableState(controlled, defaultValue, onChange) {
+function useControllableValue(controlled, defaultValue, onChange) {
     const isControlled = controlled !== undefined;
     const [uncontrolled, setUncontrolled] = useState(defaultValue);
     const value = isControlled ? controlled : uncontrolled;
@@ -17,6 +17,13 @@ function useControllableState(controlled, defaultValue, onChange) {
     }, [isControlled, onChange]);
     return [value, setValue];
 }
+/**
+ * Manages a boolean value that can be either controlled (value supplied by parent)
+ * or uncontrolled (managed internally with an optional callback).
+ */
+function useControllableState(controlled, defaultValue, onChange) {
+    return useControllableValue(controlled, defaultValue, onChange);
+}
 
-export { useControllableState };
+export { useControllableState, useControllableValue };
 //# sourceMappingURL=useControllableState.mjs.map

package/dist/esm/index.mjs

@@ -9,6 +9,7 @@ export { default as Button } from './Button/index.mjs';
 export { Card } from './Card/index.mjs';
 export { default as Checkbox } from './Checkbox/index.mjs';
 export { default as Chip } from './Chip/index.mjs';
+export { default as Combobox } from './Combobox/index.mjs';
 export { Dialog } from './Dialog/index.mjs';
 export { DropdownMenu } from './DropdownMenu/index.mjs';
 export { default as Field } from './Field/index.mjs';
@@ -37,7 +38,7 @@ export { Table } from './Table/index.mjs';
 export { Tabs } from './Tabs/index.mjs';
 export { default as Textarea } from './Textarea/index.mjs';
 export { default as TextInput } from './TextInput/index.mjs';
-export { default as ThemeProvider } from './ThemeProvider/index.mjs';
+export { default as ThemeProvider, useTheme } from './ThemeProvider/index.mjs';
 export { ToastProvider, useToast } from './Toast/index.mjs';
 export { default as Tooltip } from './Tooltip/index.mjs';
 //# sourceMappingURL=index.mjs.map

package/dist/index.d.ts

@@ -217,6 +217,29 @@ type ChipComponent = (<E extends ChipElement = 'span'>(props: Readonly<ChipProps
 };
 declare const Chip: ChipComponent;
 
+type ComboboxSize = 'sm' | 'md' | 'lg';
+type ComboboxOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type ComboboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'className' | 'style' | 'value' | 'defaultValue' | 'onChange'> & {
+    label: string;
+    options: ReadonlyArray<ComboboxOption>;
+    hideLabel?: boolean;
+    error?: string;
+    helperText?: string;
+    size?: ComboboxSize;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    noResultsText?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+type ComboboxComponent = React.ForwardRefExoticComponent<Readonly<ComboboxProps> & React.RefAttributes<HTMLInputElement>>;
+declare const Combobox: ComboboxComponent;
+
 type DialogProps = {
     open?: boolean;
     defaultOpen?: boolean;
@@ -611,6 +634,11 @@ type ThemeProviderProps = {
     className?: string;
     style?: React.CSSProperties;
 };
+type ThemeContextValue = {
+    resolvedTheme: 'light' | 'dark';
+    highContrast: boolean;
+};
+declare function useTheme(): ThemeContextValue;
 declare function ThemeProvider({ children, theme, highContrast, id, className, style }: Readonly<ThemeProviderProps>): React.JSX.Element;
 
 type ToastVariant = 'info' | 'success' | 'warning' | 'error';
@@ -659,5 +687,5 @@ type TooltipProps = {
 };
 declare function Tooltip({ children, asChild, content, open, defaultOpen, onOpenChange, placement, offset, delay, id, className, style }: Readonly<TooltipProps>): React.JSX.Element;
 
-export { Accordion, Alert, Avatar, Badge, Box, Breadcrumbs, Button, Card, CheckIcon, Checkbox, ChevronDownIcon, Chip, CircleCheckIcon, CircleInfoIcon, CircleXIcon, CloseIcon, Dialog, DropdownMenu, Field, Flex, Grid, Link, MinusIcon, Popover, Progress, RadioGroup, Select, Skeleton, Spinner, Stack, Switch, Table, Tabs, TextInput, Textarea, ThemeProvider, ToastProvider, Tooltip, TriangleAlertIcon, useToast };
-export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, AccordionType, AlertProps, AlertVariant, AvatarProps, AvatarSize, AvatarStatus, BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BoxProps, BreadcrumbsCurrentProps, BreadcrumbsItemProps, BreadcrumbsLinkProps, BreadcrumbsListProps, BreadcrumbsProps, ButtonProps, ButtonSize, ButtonVariant, CardContentProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, CheckboxProps, CheckboxSize, ChipElement, ChipProps, ColorToken, DialogBodyProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DialogTitleProps, DialogTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuProps, DropdownMenuTriggerProps, FieldProps, FieldRenderProps, FlexProps, FreyTheme, GridProps, IconProps, IconSizeToken, IconStrokeToken, LinkColor, LinkProps, LinkUnderline, PopoverContentProps, PopoverPlacement, PopoverProps, PopoverTriggerProps, ProgressProps, ProgressSize, RadioGroupOrientation, RadioGroupProps, RadioOption, RadiusToken, SelectProps, SelectSize, SkeletonProps, SkeletonShape, SpaceToken, SpinnerProps, SpinnerSize, StackProps, SwitchProps, SwitchSize, TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, TextInputProps, TextareaProps, TextareaResize, ThemeProviderProps, ToastAction, ToastOptions, ToastPlacement, ToastProviderProps, ToastVariant, TooltipPlacement, TooltipProps, Variant };
+export { Accordion, Alert, Avatar, Badge, Box, Breadcrumbs, Button, Card, CheckIcon, Checkbox, ChevronDownIcon, Chip, CircleCheckIcon, CircleInfoIcon, CircleXIcon, CloseIcon, Combobox, Dialog, DropdownMenu, Field, Flex, Grid, Link, MinusIcon, Popover, Progress, RadioGroup, Select, Skeleton, Spinner, Stack, Switch, Table, Tabs, TextInput, Textarea, ThemeProvider, ToastProvider, Tooltip, TriangleAlertIcon, useTheme, useToast };
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, AccordionType, AlertProps, AlertVariant, AvatarProps, AvatarSize, AvatarStatus, BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BoxProps, BreadcrumbsCurrentProps, BreadcrumbsItemProps, BreadcrumbsLinkProps, BreadcrumbsListProps, BreadcrumbsProps, ButtonProps, ButtonSize, ButtonVariant, CardContentProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, CheckboxProps, CheckboxSize, ChipElement, ChipProps, ColorToken, ComboboxOption, ComboboxProps, ComboboxSize, DialogBodyProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DialogTitleProps, DialogTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuProps, DropdownMenuTriggerProps, FieldProps, FieldRenderProps, FlexProps, FreyTheme, GridProps, IconProps, IconSizeToken, IconStrokeToken, LinkColor, LinkProps, LinkUnderline, PopoverContentProps, PopoverPlacement, PopoverProps, PopoverTriggerProps, ProgressProps, ProgressSize, RadioGroupOrientation, RadioGroupProps, RadioOption, RadiusToken, SelectProps, SelectSize, SkeletonProps, SkeletonShape, SpaceToken, SpinnerProps, SpinnerSize, StackProps, SwitchProps, SwitchSize, TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, TextInputProps, TextareaProps, TextareaResize, ThemeContextValue, ThemeProviderProps, ToastAction, ToastOptions, ToastPlacement, ToastProviderProps, ToastVariant, TooltipPlacement, TooltipProps, Variant };

package/dist/types/src/Combobox/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export type ComboboxSize = 'sm' | 'md' | 'lg';
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type ComboboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'className' | 'style' | 'value' | 'defaultValue' | 'onChange'> & {
+    label: string;
+    options: ReadonlyArray<ComboboxOption>;
+    hideLabel?: boolean;
+    error?: string;
+    helperText?: string;
+    size?: ComboboxSize;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    noResultsText?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+type ComboboxComponent = React.ForwardRefExoticComponent<Readonly<ComboboxProps> & React.RefAttributes<HTMLInputElement>>;
+declare const Combobox: ComboboxComponent;
+export default Combobox;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/ThemeProvider/index.d.ts

@@ -13,6 +13,7 @@ export type ThemeContextValue = {
     highContrast: boolean;
 };
 export declare const ThemeContext: React.Context<ThemeContextValue | null>;
+export declare function useTheme(): ThemeContextValue;
 declare function ThemeProvider({ children, theme, highContrast, id, className, style }: Readonly<ThemeProviderProps>): React.JSX.Element;
 export default ThemeProvider;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/useControllableState.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Manages a value that can be either controlled (value supplied by parent)
+ * or uncontrolled (managed internally with an optional callback).
+ */
+export declare function useControllableValue<Value>(controlled: Value | undefined, defaultValue: Value, onChange?: (value: Value) => void): [Value, (next: Value) => void];
 /**
  * Manages a boolean value that can be either controlled (value supplied by parent)
  * or uncontrolled (managed internally with an optional callback).

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

@@ -19,6 +19,8 @@ export type { CheckboxProps, CheckboxSize } from './Checkbox';
 export { default as Checkbox } from './Checkbox';
 export type { ChipElement, ChipProps, Variant } from './Chip';
 export { default as Chip } from './Chip';
+export type { ComboboxOption, ComboboxProps, ComboboxSize } from './Combobox';
+export { default as Combobox } from './Combobox';
 export type { DialogBodyProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DialogTitleProps, DialogTriggerProps } from './Dialog';
 export { default as Dialog } from './Dialog';
 export type { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuProps, DropdownMenuTriggerProps } from './DropdownMenu';
@@ -57,8 +59,8 @@ export type { TextareaProps, TextareaResize } from './Textarea';
 export { default as Textarea } from './Textarea';
 export type { TextInputProps } from './TextInput';
 export { default as TextInput } from './TextInput';
-export type { FreyTheme, ThemeProviderProps } from './ThemeProvider';
-export { default as ThemeProvider } from './ThemeProvider';
+export type { FreyTheme, ThemeContextValue, ThemeProviderProps } from './ThemeProvider';
+export { default as ThemeProvider, useTheme } from './ThemeProvider';
 export type { ToastAction, ToastOptions, ToastPlacement, ToastProviderProps, ToastVariant } from './Toast';
 export { ToastProvider, useToast } from './Toast';
 export type { TooltipPlacement, TooltipProps } from './Tooltip';