@digdir/designsystemet-react 1.0.0-next.43 → 1.0.0-next.45

package/dist/cjs/components/Combobox/Combobox.js

@@ -6,7 +6,7 @@ var react$1 = require('@floating-ui/react');
 var reactVirtual = require('@tanstack/react-virtual');
 var cl = require('clsx/lite');
 var react = require('react');
-var useFormField = require('../../utilities/hooks/useFormField/useFormField.js');
+var useFormField = require('./useFormField/useFormField.js');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
 var Custom = require('./Custom.js');

package/dist/cjs/{utilities/hooks → components/Combobox}/useFormField/useFormField.js

@@ -3,7 +3,7 @@
 
 var cl = require('clsx/lite');
 var react = require('react');
-var FieldsetContext = require('../../../components/Fieldset/FieldsetContext.js');
+var FieldsetContext = require('./FieldsetContext.js');
 
 /**
  * Handles props and their state for various form-fields in context with Fieldset

package/dist/cjs/components/Field/Field.js

@@ -7,11 +7,11 @@ var cl = require('clsx/lite');
 var react = require('react');
 var fieldObserver = require('./fieldObserver.js');
 
-const Field = react.forwardRef(function Field({ className, ...rest }, ref) {
+const Field = react.forwardRef(function Field({ className, position, ...rest }, ref) {
     const fieldRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([fieldRef, ref]);
     react.useEffect(() => fieldObserver.fieldObserver(fieldRef.current), []);
-    return (jsxRuntime.jsx("div", { className: cl('ds-field', className), ref: mergedRefs, ...rest }));
+    return (jsxRuntime.jsx("div", { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
 });
 
 exports.Field = Field;

package/dist/cjs/components/Pagination/usePagination.js

@@ -28,15 +28,15 @@ const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages,
     return {
         /** Number of steps */
         pages: getSteps(currentPage, totalPages, showPages).map((page, index) => ({
-            page: page || '',
+            page: page || 'ellipsis',
             itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
-            buttonProps: {
-                'aria-current': page === currentPage ? 'page' : undefined,
-                'aria-hidden': !page || undefined, // Hide ellipsis from screen reader
-                onClick: handleClick(page),
-                tabIndex: page ? undefined : -1, // Hide ellipsis keyboard
-                variant: page === currentPage ? 'primary' : 'tertiary',
-            },
+            buttonProps: (page
+                ? {
+                    'aria-current': page === currentPage ? 'page' : undefined,
+                    onClick: handleClick(page),
+                    variant: page === currentPage ? 'primary' : 'tertiary',
+                }
+                : null),
         })),
         /** Properties to spread on Pagination.Button used for previous naviagation */
         prevButtonProps: {

package/dist/cjs/components/Popover/PopoverTrigger.js

@@ -7,10 +7,14 @@ var react = require('react');
 var Button = require('../Button/Button.js');
 var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
-const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, asChild, ...rest }, ref) {
+const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = react.useContext(PopoverTriggerContext.Context);
-    const Component = asChild ? reactSlot.Slot : Button.Button;
-    return jsxRuntime.jsx(Component, { ref: ref, popovertarget: popoverId, ...rest });
+    const Component = asChild ? reactSlot.Slot : inline ? 'button' : Button.Button;
+    return (jsxRuntime.jsx(Component, { ref: ref, popovertarget: popoverId, ...(inline
+            ? {
+                'data-popover': 'inline',
+            }
+            : {}), ...rest }));
 });
 
 exports.PopoverTrigger = PopoverTrigger;

package/dist/cjs/components/Table/TableHeaderCell.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
 const TableHeaderCell = react.forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
-    return (jsxRuntime.jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? (jsxRuntime.jsx("button", { type: 'button', className: 'ds-focus', children: children })) : (children) }));
+    return (jsxRuntime.jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsxRuntime.jsx("button", { type: 'button', children: children }) : children }));
 });
 
 exports.TableHeaderCell = TableHeaderCell;

package/dist/cjs/components/Tag/Tag.js

@@ -8,10 +8,10 @@ var react = require('react');
 /**
  * Use `Tag` to display a small piece of information.
  * @example
- * <Tag color='success'>Success</Tag>
+ * <Tag>Success</Tag>
  */
-const Tag = react.forwardRef(function Tag({ color = 'neutral', className, ...rest }, ref) {
-    return (jsxRuntime.jsx("span", { className: cl('ds-tag', className), "data-color": color, ref: ref, ...rest }));
+const Tag = react.forwardRef(function Tag({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("span", { className: cl('ds-tag', className), ref: ref, ...rest });
 });
 
 exports.Tag = Tag;

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -2,10 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
+var dom = require('@floating-ui/dom');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
+var react$1 = require('@floating-ui/react');
 
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
@@ -19,46 +20,61 @@ var react = require('react');
  *  Hover me
  * </Tooltip>
  */
-const Tooltip = react.forwardRef(function Tooltip({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) {
-    const [isOpen, setIsOpen] = react.useState(defaultOpen);
-    const internalOpen = userOpen ?? isOpen;
-    const Container = portal ? react$1.FloatingPortal : react.Fragment;
-    const { refs, floatingStyles, context } = react$1.useFloating({
-        open: internalOpen,
-        onOpenChange: setIsOpen,
-        placement,
-        whileElementsMounted: react$1.autoUpdate,
-        middleware: [
-            react$1.offset((data) => {
-                // get pseudo element arrow size
-                const styles = getComputedStyle(data.elements.floating, '::before');
-                return parseFloat(styles.height);
-            }),
-            react$1.flip({
-                fallbackAxisSideDirection: 'start',
-            }),
-            react$1.shift(),
-            arrowPseudoElement,
-        ],
-    });
-    const { styles: animationStyles } = react$1.useTransitionStyles(context, {
-        initial: {
-            opacity: 0,
-        },
-    });
-    const { getReferenceProps, getFloatingProps } = react$1.useInteractions([
-        // Event listeners to change the open state
-        react$1.useHover(context, { move: false, delay }),
-        react$1.useFocus(context),
-        react$1.useDismiss(context),
-        react$1.useRole(context, { role: 'tooltip' }),
-    ]);
-    const mergedRef = react$1.useMergeRefs([ref, refs.setFloating]);
-    const childMergedRef = react$1.useMergeRefs([
-        children
-            .ref,
-        refs.setReference,
-    ]);
+const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', open, className, ...rest }, ref) {
+    const randomTooltipId = react.useId();
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const triggerRef = react.useRef(null);
+    const tooltipRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([tooltipRef, ref]);
+    const controlledOpen = open ?? internalOpen;
+    const setOpen = () => {
+        setInternalOpen(true);
+    };
+    const setClose = () => {
+        setInternalOpen(false);
+    };
+    // Position with floating-ui
+    react.useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const trigger = triggerRef.current;
+        tooltip?.togglePopover?.(controlledOpen);
+        if (tooltip)
+            tooltip.style.opacity = controlledOpen ? '1' : '0';
+        if (tooltip && trigger && controlledOpen) {
+            return dom.autoUpdate(trigger, tooltip, () => {
+                dom.computePosition(trigger, tooltip, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        dom.offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        dom.flip({
+                            fallbackAxisSideDirection: 'start',
+                        }),
+                        dom.shift(),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    tooltip.style.translate = `${x}px ${y}px`;
+                });
+            });
+        }
+    }, [controlledOpen, placement]);
+    /* Add listener for ESC to dismiss */
+    react.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setInternalOpen(false);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
     /* If children is only a string, make a span */
     const ChildContainer = typeof children === 'string' ? 'span' : reactSlot.Slot;
     /* Make sure it is valid */
@@ -66,13 +82,12 @@ const Tooltip = react.forwardRef(function Tooltip({ children, content, placement
         console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ...getReferenceProps({
-                    ref: childMergedRef,
-                }), children: children }), internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                        className: cl('ds-tooltip', className),
-                        ref: mergedRef,
-                        ...rest,
-                    }), children: content }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, popovertarget: id ?? randomTooltipId, 
+                // We set this to not close on click, since it should always show on hover
+                // @ts-ignore @types/react-dom does not understand popovertargetaction yet
+                popovertargetaction: 'show', onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
+                // @ts-ignore @types/react-dom does not understand popover yet
+                popover: 'manual', ...rest, children: content })] }));
 });
 const arrowPseudoElement = {
     name: 'ArrowPseudoElement',
@@ -94,8 +109,8 @@ const arrowPseudoElement = {
                 arrowX = '100%';
                 break;
         }
-        elements.floating.style.setProperty('--ds-tooltip-arrow-x', arrowX);
-        elements.floating.style.setProperty('--ds-tooltip-arrow-y', arrowY);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
         return data;
     },
 };

package/dist/cjs/index.js

@@ -1,12 +1,6 @@
 'use client';
 'use strict';
 
-var useSynchronizedAnimation = require('./utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
-var useIsomorphicLayoutEffect = require('./utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
-var RovingFocusRoot = require('./utilities/RovingFocus/RovingFocusRoot.js');
-var useRovingFocus = require('./utilities/RovingFocus/useRovingFocus.js');
-var RovingFocusItem = require('./utilities/RovingFocus/RovingFocusItem.js');
-var omit = require('./utilities/omit/omit.js');
 var Avatar = require('./components/Avatar/Avatar.js');
 var Button = require('./components/Button/Button.js');
 var index = require('./components/Badge/index.js');
@@ -97,17 +91,20 @@ var index$i = require('./components/ErrorSummary/index.js');
 var ErrorSummaryItem = require('./components/ErrorSummary/ErrorSummaryItem.js');
 var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading.js');
 var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
+var omit = require('./utilities/omit/omit.js');
+var useCheckboxGroup = require('./utilities/hooks/useCheckboxGroup/useCheckboxGroup.js');
+var useDebounceCallback = require('./utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var useIsomorphicLayoutEffect = require('./utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+var useMediaQuery = require('./utilities/hooks/useMediaQuery/useMediaQuery.js');
+var usePrevious = require('./utilities/hooks/usePrevious/usePrevious.js');
+var useRadioGroup = require('./utilities/hooks/useRadioGroup/useRadioGroup.js');
+var useSynchronizedAnimation = require('./utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var RovingFocusRoot = require('./utilities/RovingFocus/RovingFocusRoot.js');
+var useRovingFocus = require('./utilities/RovingFocus/useRovingFocus.js');
+var RovingFocusItem = require('./utilities/RovingFocus/RovingFocusItem.js');
 
 
 
-exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
-exports.RovingFocusRoot = RovingFocusRoot.RovingFocusRoot;
-exports.useRovingFocus = useRovingFocus.useRovingFocus;
-exports.RovingFocusItem = RovingFocusItem.RovingFocusItem;
-exports.getNextFocusableValue = RovingFocusItem.getNextFocusableValue;
-exports.getPrevFocusableValue = RovingFocusItem.getPrevFocusableValue;
-exports.omit = omit.omit;
 exports.Avatar = Avatar.Avatar;
 exports.Button = Button.Button;
 exports.Badge = index.Badge;
@@ -203,3 +200,16 @@ exports.ErrorSummary = index$i.ErrorSummary;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
+exports.omit = omit.omit;
+exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
+exports.useDebounceCallback = useDebounceCallback.useDebounceCallback;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+exports.useMediaQuery = useMediaQuery.useMediaQuery;
+exports.usePrevious = usePrevious.usePrevious;
+exports.useRadioGroup = useRadioGroup.useRadioGroup;
+exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
+exports.RovingFocusRoot = RovingFocusRoot.RovingFocusRoot;
+exports.useRovingFocus = useRovingFocus.useRovingFocus;
+exports.RovingFocusItem = RovingFocusItem.RovingFocusItem;
+exports.getNextFocusableValue = RovingFocusItem.getNextFocusableValue;
+exports.getPrevFocusableValue = RovingFocusItem.getPrevFocusableValue;

package/dist/cjs/utilities/hooks/useCheckboxGroup/useCheckboxGroup.js

@@ -0,0 +1,121 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+
+const toggleIndeterminate = (getIndeterminateInputs, getInputs) => {
+    const inputs = getIndeterminateInputs();
+    const checked = !!getInputs(true).length;
+    const unchecked = !!getInputs(false).length;
+    for (const input of inputs) {
+        input.indeterminate = unchecked && checked;
+        input.checked = !unchecked && checked;
+    }
+};
+function useCheckboxGroup(props) {
+    const { error, name: groupName, onChange, value = [], disabled, readOnly, required, } = props || {};
+    const [groupValue, setGroupValue] = react.useState(value);
+    const namedId = react.useId();
+    const errorId = react.useId();
+    const checkboxRefs = react.useRef(new Set());
+    const indeterminateRefs = react.useRef(new Set());
+    const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Checkbox` component.
+         * Accepts value or object
+         * @example
+         * <Checkbox {...getCheckboxProps('value')} />
+         *
+         * @example allow indeterminate
+         * <Checkbox {...getCheckboxProps({ value: 'all', allowIndeterminate: true })} />
+         */
+        getCheckboxProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue || {};
+            const { allowIndeterminate = false, ref = undefined, value = '', ...rest } = props;
+            const inputRef = react.useRef(null);
+            const mergedRefs = react$1.useMergeRefs([ref, inputRef]);
+            const handleChange = () => {
+                const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+                setGroupValue(nextGroupValue);
+                onChange?.(nextGroupValue, groupValue);
+            };
+            const indeterminateChange = () => {
+                if (!inputRef.current)
+                    return;
+                const checked = !!inputRef.current.checked;
+                for (const input of getInputs(!checked)) {
+                    /* We use click to send both event and change checked state */
+                    input.click();
+                }
+            };
+            react.useEffect(() => {
+                if (!allowIndeterminate)
+                    return;
+                toggleIndeterminate(getIndeterminateInputs, getInputs);
+            }, [groupValue]);
+            react.useEffect(() => {
+                if (!inputRef.current)
+                    return;
+                const input = inputRef.current;
+                const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
+                refs.current.add(input);
+                if (getIndeterminateInputs().length)
+                    toggleIndeterminate(getIndeterminateInputs, getInputs);
+                return () => {
+                    refs.current.delete(input);
+                };
+            }, [value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                checked: allowIndeterminate ? undefined : groupValue.includes(value),
+                name: rest.name || groupName || namedId,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    allowIndeterminate && indeterminateChange();
+                    handleChange();
+                },
+                ref: mergedRefs,
+                value,
+                disabled: disabled || rest.disabled,
+                readOnly: readOnly || rest.readOnly,
+                required: required || rest.required,
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+exports.useCheckboxGroup = useCheckboxGroup;

package/dist/cjs/utilities/hooks/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+
+// from https://usehooks-ts.com/react-hook/use-media-query
+const IS_SERVER = typeof window === 'undefined';
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = react.useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+
+exports.useMediaQuery = useMediaQuery;

package/dist/cjs/utilities/hooks/usePrevious/usePrevious.js

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+function usePrevious(value) {
+    const ref = react.useRef();
+    react.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+
+exports.usePrevious = usePrevious;

package/dist/cjs/utilities/hooks/useRadioGroup/useRadioGroup.js

@@ -0,0 +1,99 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+
+/**
+ * useRadioGroup is used to group multiple <Radio> components
+ * @example
+ * const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+ *   disabled: false,
+ *   error: 'Validation message text',
+ *   name: 'group-name',
+ *   onChange: (nextValue, prevValue) => {},
+ *   readOnly: false,
+ *   required: true,
+ *   value: '',
+ * });
+ */
+function useRadioGroup({ error, readOnly, required, disabled, name, onChange, value: initalValue = '', } = {}) {
+    const [groupValue, setGroupValue] = react.useState(initalValue);
+    const errorId = react.useId();
+    const namedId = react.useId();
+    const radioGroupName = name || namedId;
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Radio` component.
+         * @example
+         * <Radio label="Option 1" {...getRadioProps('option-1')} />
+         */
+        getRadioProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue;
+            const { ref = undefined, value = '', ...rest } = props;
+            const localRef = react.useRef(null);
+            const mergedRefs = react$1.useMergeRefs([ref, localRef]);
+            const handleChange = () => {
+                const input = localRef.current;
+                const isInput = input instanceof HTMLInputElement;
+                if (isInput && input.name === radioGroupName) {
+                    setGroupValue((prevValue) => {
+                        onChange?.(input.value, prevValue);
+                        return input.value;
+                    });
+                }
+            };
+            react.useEffect(() => {
+                if (!localRef.current)
+                    return;
+                localRef.current.checked = value === groupValue;
+            }, [groupValue, value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                name: radioGroupName,
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                value,
+                ref: mergedRefs,
+                required: required || rest.required,
+                readOnly: readOnly || rest.readOnly,
+                disabled: disabled || rest.disabled,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    handleChange();
+                },
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+exports.useRadioGroup = useRadioGroup;

package/dist/esm/components/Combobox/Combobox.js

@@ -4,7 +4,7 @@ import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useState, useEffect } from 'react';
-import { useFormField } from '../../utilities/hooks/useFormField/useFormField.js';
+import { useFormField } from './useFormField/useFormField.js';
 import { ComboboxContext } from './ComboboxContext.js';
 import { ComboboxIdProvider } from './ComboboxIdContext.js';
 import { ComboboxCustom } from './Custom.js';

package/dist/esm/{utilities/hooks → components/Combobox}/useFormField/useFormField.js

@@ -1,7 +1,7 @@
 'use client';
 import cl from 'clsx/lite';
 import { useContext, useId } from 'react';
-import { FieldsetContext } from '../../../components/Fieldset/FieldsetContext.js';
+import { FieldsetContext } from './FieldsetContext.js';
 
 /**
  * Handles props and their state for various form-fields in context with Fieldset

package/dist/esm/components/Field/Field.js

@@ -5,11 +5,11 @@ import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
 import { fieldObserver } from './fieldObserver.js';
 
-const Field = forwardRef(function Field({ className, ...rest }, ref) {
+const Field = forwardRef(function Field({ className, position, ...rest }, ref) {
     const fieldRef = useRef(null);
     const mergedRefs = useMergeRefs([fieldRef, ref]);
     useEffect(() => fieldObserver(fieldRef.current), []);
-    return (jsx("div", { className: cl('ds-field', className), ref: mergedRefs, ...rest }));
+    return (jsx("div", { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
 });
 
 export { Field };