@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

package/dist/cjs/index.js

@@ -0,0 +1,225 @@
+'use client';
+'use strict';
+
+require('@digdir/designsystemet-web');
+var alert = require('./components/alert/alert.js');
+var avatar = require('./components/avatar/avatar.js');
+var avatarStack = require('./components/avatar-stack/avatar-stack.js');
+var index = require('./components/badge/index.js');
+var index$1 = require('./components/breadcrumbs/index.js');
+var button = require('./components/button/button.js');
+var index$4 = require('./components/Combobox/index.js');
+var index$2 = require('./components/card/index.js');
+var checkbox = require('./components/checkbox/checkbox.js');
+var index$3 = require('./components/chip/index.js');
+var index$5 = require('./components/details/index.js');
+var index$6 = require('./components/dialog/index.js');
+var divider = require('./components/divider/divider.js');
+var index$7 = require('./components/dropdown/index.js');
+var index$9 = require('./components/error-summary/index.js');
+var index$a = require('./components/field/index.js');
+var index$b = require('./components/fieldset/index.js');
+var heading = require('./components/heading/heading.js');
+var input = require('./components/input/input.js');
+var label = require('./components/label/label.js');
+var link = require('./components/link/link.js');
+var index$c = require('./components/list/index.js');
+var index$d = require('./components/pagination/index.js');
+var paragraph = require('./components/paragraph/paragraph.js');
+var index$e = require('./components/popover/index.js');
+var radio = require('./components/radio/radio.js');
+var index$f = require('./components/search/index.js');
+var index$g = require('./components/select/index.js');
+var skeleton = require('./components/skeleton/skeleton.js');
+var skipLink = require('./components/skip-link/skip-link.js');
+var spinner = require('./components/spinner/spinner.js');
+var index$8 = require('./components/suggestion/index.js');
+var _switch = require('./components/switch/switch.js');
+var index$h = require('./components/table/index.js');
+var index$i = require('./components/tabs/index.js');
+var tag = require('./components/tag/tag.js');
+var textarea = require('./components/textarea/textarea.js');
+var textfield = require('./components/textfield/textfield.js');
+var index$j = require('./components/toggle-group/index.js');
+var tooltip = require('./components/tooltip/tooltip.js');
+var validationMessage = require('./components/validation-message/validation-message.js');
+var omit = require('./components/Combobox/omit/omit.js');
+var useDebounceCallback = require('./utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+var useIsomorphicLayoutEffect = require('./utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js');
+var useMediaQuery = require('./utilities/hooks/deprecated/use-media-query/use-media-query.js');
+var useCheckboxGroup = require('./utilities/hooks/use-checkbox-group/use-checkbox-group.js');
+require('react');
+var usePagination = require('./utilities/hooks/use-pagination/use-pagination.js');
+var useRadioGroup = require('./utilities/hooks/use-radio-group/use-radio-group.js');
+var useSynchronizedAnimation = require('./utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
+var rovingFocusItem = require('./utilities/roving-focus/roving-focus-item.js');
+var rovingFocusRoot = require('./utilities/roving-focus/roving-focus-root.js');
+var badgePosition = require('./components/badge/badge-position.js');
+var breadcrumbsItem = require('./components/breadcrumbs/breadcrumbs-item.js');
+var breadcrumbsLink = require('./components/breadcrumbs/breadcrumbs-link.js');
+var breadcrumbsList = require('./components/breadcrumbs/breadcrumbs-list.js');
+var cardBlock = require('./components/card/card-block.js');
+var chips = require('./components/chip/chips.js');
+var Empty = require('./components/Combobox/Empty.js');
+var Option = require('./components/Combobox/Option/Option.js');
+var detailsContent = require('./components/details/details-content.js');
+var detailsSummary = require('./components/details/details-summary.js');
+var dialogBlock = require('./components/dialog/dialog-block.js');
+var dialogTrigger = require('./components/dialog/dialog-trigger.js');
+var dialogTriggerContext = require('./components/dialog/dialog-trigger-context.js');
+var dropdownButton = require('./components/dropdown/dropdown-button.js');
+var dropdownHeading = require('./components/dropdown/dropdown-heading.js');
+var dropdownItem = require('./components/dropdown/dropdown-item.js');
+var dropdownList = require('./components/dropdown/dropdown-list.js');
+var dropdownTrigger = require('./components/dropdown/dropdown-trigger.js');
+var dropdownTriggerContext = require('./components/dropdown/dropdown-trigger-context.js');
+var suggestionClear = require('./components/suggestion/suggestion-clear.js');
+var suggestionEmpty = require('./components/suggestion/suggestion-empty.js');
+var suggestionInput = require('./components/suggestion/suggestion-input.js');
+var suggestionList = require('./components/suggestion/suggestion-list.js');
+var suggestionOption = require('./components/suggestion/suggestion-option.js');
+var errorSummaryHeading = require('./components/error-summary/error-summary-heading.js');
+var errorSummaryItem = require('./components/error-summary/error-summary-item.js');
+var errorSummaryLink = require('./components/error-summary/error-summary-link.js');
+var errorSummaryList = require('./components/error-summary/error-summary-list.js');
+var fieldAffix = require('./components/field/field-affix.js');
+var fieldCounter = require('./components/field/field-counter.js');
+var fieldDescription = require('./components/field/field-description.js');
+var fieldsetDescription = require('./components/fieldset/fieldset-description.js');
+var fieldsetLegend = require('./components/fieldset/fieldset-legend.js');
+var listItem = require('./components/list/list-item.js');
+var lists = require('./components/list/lists.js');
+var paginationButton = require('./components/pagination/pagination-button.js');
+var paginationItem = require('./components/pagination/pagination-item.js');
+var paginationList = require('./components/pagination/pagination-list.js');
+var popoverTrigger = require('./components/popover/popover-trigger.js');
+var popoverTriggerContext = require('./components/popover/popover-trigger-context.js');
+var searchButton = require('./components/search/search-button.js');
+var searchClear = require('./components/search/search-clear.js');
+var searchInput = require('./components/search/search-input.js');
+var selectOptgroup = require('./components/select/select-optgroup.js');
+var selectOption = require('./components/select/select-option.js');
+var tableBody = require('./components/table/table-body.js');
+var tableCell = require('./components/table/table-cell.js');
+var tableFoot = require('./components/table/table-foot.js');
+var tableHead = require('./components/table/table-head.js');
+var tableHeaderCell = require('./components/table/table-header-cell.js');
+var tableRow = require('./components/table/table-row.js');
+var tabsList = require('./components/tabs/tabs-list.js');
+var tabsPanel = require('./components/tabs/tabs-panel.js');
+var tabsTab = require('./components/tabs/tabs-tab.js');
+var toggleGroupItem = require('./components/toggle-group/toggle-group-item.js');
+
+
+
+exports.Alert = alert.Alert;
+exports.Avatar = avatar.Avatar;
+exports.EXPERIMENTAL_AvatarStack = avatarStack.EXPERIMENTAL_AvatarStack;
+exports.Badge = index.Badge;
+exports.Breadcrumbs = index$1.Breadcrumbs;
+exports.Button = button.Button;
+exports.Combobox = index$4.Combobox;
+exports.Card = index$2.Card;
+exports.Checkbox = checkbox.Checkbox;
+exports.Chip = index$3.Chip;
+exports.Details = index$5.Details;
+exports.Dialog = index$6.Dialog;
+exports.Divider = divider.Divider;
+exports.Dropdown = index$7.Dropdown;
+exports.ErrorSummary = index$9.ErrorSummary;
+exports.Field = index$a.Field;
+exports.Fieldset = index$b.Fieldset;
+exports.Heading = heading.Heading;
+exports.Input = input.Input;
+exports.Label = label.Label;
+exports.Link = link.Link;
+exports.List = index$c.List;
+exports.Pagination = index$d.Pagination;
+exports.Paragraph = paragraph.Paragraph;
+exports.Popover = index$e.Popover;
+exports.Radio = radio.Radio;
+exports.Search = index$f.Search;
+exports.Select = index$g.Select;
+exports.Skeleton = skeleton.Skeleton;
+exports.SkipLink = skipLink.SkipLink;
+exports.Spinner = spinner.Spinner;
+exports.EXPERIMENTAL_Suggestion = index$8.EXPERIMENTAL_Suggestion;
+exports.Switch = _switch.Switch;
+exports.Table = index$h.Table;
+exports.Tabs = index$i.Tabs;
+exports.Tag = tag.Tag;
+exports.Textarea = textarea.Textarea;
+exports.Textfield = textfield.Textfield;
+exports.ToggleGroup = index$j.ToggleGroup;
+exports.Tooltip = tooltip.Tooltip;
+exports.ValidationMessage = validationMessage.ValidationMessage;
+exports.omit = omit.omit;
+exports.useDebounceCallback = useDebounceCallback.useDebounceCallback;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+exports.useMediaQuery = useMediaQuery.useMediaQuery;
+exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
+exports.usePagination = usePagination.usePagination;
+exports.useRadioGroup = useRadioGroup.useRadioGroup;
+exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
+exports.RovingFocusItem = rovingFocusItem.RovingFocusItem;
+exports.RovingFocusRoot = rovingFocusRoot.RovingFocusRoot;
+exports.BadgePosition = badgePosition.BadgePosition;
+exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
+exports.BreadcrumbsLink = breadcrumbsLink.BreadcrumbsLink;
+exports.BreadcrumbsList = breadcrumbsList.BreadcrumbsList;
+exports.CardBlock = cardBlock.CardBlock;
+exports.ChipButton = chips.ChipButton;
+exports.ChipCheckbox = chips.ChipCheckbox;
+exports.ChipRadio = chips.ChipRadio;
+exports.ChipRemovable = chips.ChipRemovable;
+exports.ComboboxEmpty = Empty.ComboboxEmpty;
+exports.ComboboxOption = Option.ComboboxOption;
+exports.DetailsContent = detailsContent.DetailsContent;
+exports.DetailsSummary = detailsSummary.DetailsSummary;
+exports.DialogBlock = dialogBlock.DialogBlock;
+exports.DialogTrigger = dialogTrigger.DialogTrigger;
+exports.DialogTriggerContext = dialogTriggerContext.DialogTriggerContext;
+exports.DropdownButton = dropdownButton.DropdownButton;
+exports.DropdownHeading = dropdownHeading.DropdownHeading;
+exports.DropdownItem = dropdownItem.DropdownItem;
+exports.DropdownList = dropdownList.DropdownList;
+exports.DropdownTrigger = dropdownTrigger.DropdownTrigger;
+exports.DropdownTriggerContext = dropdownTriggerContext.DropdownTriggerContext;
+exports.EXPERIMENTAL_SuggestionClear = suggestionClear.SuggestionClear;
+exports.EXPERIMENTAL_SuggestionEmpty = suggestionEmpty.SuggestionEmpty;
+exports.EXPERIMENTAL_SuggestionInput = suggestionInput.SuggestionInput;
+exports.EXPERIMENTAL_SuggestionList = suggestionList.SuggestionList;
+exports.EXPERIMENTAL_SuggestionOption = suggestionOption.SuggestionOption;
+exports.ErrorSummaryHeading = errorSummaryHeading.ErrorSummaryHeading;
+exports.ErrorSummaryItem = errorSummaryItem.ErrorSummaryItem;
+exports.ErrorSummaryLink = errorSummaryLink.ErrorSummaryLink;
+exports.ErrorSummaryList = errorSummaryList.ErrorSummaryList;
+exports.FieldAffix = fieldAffix.FieldAffix;
+exports.FieldAffixes = fieldAffix.FieldAffixes;
+exports.FieldCounter = fieldCounter.FieldCounter;
+exports.FieldDescription = fieldDescription.FieldDescription;
+exports.FieldsetDescription = fieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
+exports.ListItem = listItem.ListItem;
+exports.ListOrdered = lists.ListOrdered;
+exports.ListUnordered = lists.ListUnordered;
+exports.PaginationButton = paginationButton.PaginationButton;
+exports.PaginationItem = paginationItem.PaginationItem;
+exports.PaginationList = paginationList.PaginationList;
+exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
+exports.PopoverTriggerContext = popoverTriggerContext.PopoverTriggerContext;
+exports.SearchButton = searchButton.SearchButton;
+exports.SearchClear = searchClear.SearchClear;
+exports.SearchInput = searchInput.SearchInput;
+exports.SelectOptgroup = selectOptgroup.SelectOptgroup;
+exports.SelectOption = selectOption.SelectOption;
+exports.TableBody = tableBody.TableBody;
+exports.TableCell = tableCell.TableCell;
+exports.TableFoot = tableFoot.TableFoot;
+exports.TableHead = tableHead.TableHead;
+exports.TableHeaderCell = tableHeaderCell.TableHeaderCell;
+exports.TableRow = tableRow.TableRow;
+exports.TabsList = tabsList.TabsList;
+exports.TabsPanel = tabsPanel.TabsPanel;
+exports.TabsTab = tabsTab.TabsTab;
+exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;

package/dist/cjs/utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+function useDebounceCallback(callback, delay = 50) {
+    const timeoutRef = react.useRef(null);
+    react.useEffect(() => {
+        // Cleanup the previous timeout on re-render
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const debouncedCallback = (...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = window.setTimeout(() => {
+            callback(...args);
+        }, delay);
+    };
+    return debouncedCallback;
+}
+
+exports.useDebounceCallback = useDebounceCallback;

package/dist/cjs/utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js

@@ -0,0 +1,9 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/cjs/utilities/hooks/deprecated/use-media-query/use-media-query.js

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var useIsomorphicLayoutEffect = require('../use-isomorphic-layout-effect/use-isomorphic-layout-effect.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/use-checkbox-group/use-checkbox-group.js

@@ -0,0 +1,135 @@
+'use client';
+'use strict';
+
+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 inputRefs = react.useRef(new Map());
+    const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+    react.useEffect(() => {
+        toggleIndeterminate(getIndeterminateInputs, getInputs);
+    }, [groupValue]);
+    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) => {
+            let groupProps;
+            if (props) {
+                const { onChange, error, ...rest } = props;
+                groupProps = rest;
+            }
+            const checkboxProps = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue || {};
+            const { allowIndeterminate = false, ref: forwardedRef = undefined, value = '', ...rest } = checkboxProps;
+            const handleRef = (element) => {
+                if (element) {
+                    const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
+                    refs.current.add(element);
+                    inputRefs.current.set(value, element);
+                    if (getIndeterminateInputs().length) {
+                        toggleIndeterminate(getIndeterminateInputs, getInputs);
+                    }
+                }
+                else {
+                    const oldElement = inputRefs.current.get(value);
+                    if (oldElement) {
+                        checkboxRefs.current.delete(oldElement);
+                        indeterminateRefs.current.delete(oldElement);
+                        inputRefs.current.delete(value);
+                    }
+                }
+                if (forwardedRef) {
+                    if (typeof forwardedRef === 'function') {
+                        forwardedRef(element);
+                    }
+                    else {
+                        forwardedRef.current = element;
+                    }
+                }
+            };
+            const handleChange = () => {
+                const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+                setGroupValue(nextGroupValue);
+                onChange?.(nextGroupValue, groupValue);
+            };
+            const indeterminateChange = () => {
+                const element = inputRefs.current.get(value);
+                if (!element)
+                    return;
+                const checked = !!element.checked;
+                for (const input of getInputs(!checked)) {
+                    input.click();
+                }
+            };
+            return {
+                ...groupProps,
+                ...rest,
+                '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: handleRef,
+                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/use-merge-refs/use-merge-refs.js

@@ -0,0 +1,57 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+// https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useMergeRefs.ts
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ */
+function useMergeRefs(refs) {
+    const cleanupRef = react.useRef(undefined);
+    const refEffect = react.useCallback((instance) => {
+        const cleanups = refs.map((ref) => {
+            if (ref == null) {
+                return null;
+            }
+            if (typeof ref === 'function') {
+                const refCallback = ref;
+                // biome-ignore lint/suspicious/noConfusingVoidType: @types-react wants `void` here
+                const refCleanup = refCallback(instance);
+                return typeof refCleanup === 'function'
+                    ? refCleanup
+                    : () => {
+                        refCallback(null);
+                    };
+            }
+            ref.current = instance;
+            return () => {
+                ref.current = null;
+            };
+        });
+        return () => {
+            for (const refCleanup of cleanups) {
+                refCleanup?.();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+    return react.useMemo(() => {
+        if (refs.every((ref) => ref == null)) {
+            return null;
+        }
+        return (value) => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = undefined;
+            }
+            if (value != null) {
+                cleanupRef.current =
+                    refEffect(value);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}
+
+exports.useMergeRefs = useMergeRefs;

package/dist/cjs/utilities/hooks/use-pagination/use-pagination.js

@@ -0,0 +1,83 @@
+'use client';
+'use strict';
+
+var designsystemetWeb = require('@digdir/designsystemet-web');
+var react = require('react');
+
+/**
+ * Hook to help manage pagination state
+ *
+ * @example
+ * const { pages, nextButtonProps, prevButtonProps } = usePagination({
+ *   currentPage: page,
+ *   totalPages: 10,
+ *   showPages: 7,
+ *   setCurrentPage,
+ * })
+ *
+ * <Pagination>
+ *   <Pagination.Item>
+ *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ *   {pages.map(({ page, itemKey, buttonProps }) => (
+ *     <Pagination.Item key={itemKey}>
+ *       {typeof page === 'number' && (
+ *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+ *           {page}
+ *         </Pagination.Button>
+ *       )}
+ *     </Pagination.Item>
+ *   ))}
+ *   <Pagination.Item>
+ *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination>
+ **/
+const usePagination = ({ currentPage: current = 1, setCurrentPage, onChange, totalPages: total = 1, showPages: show = 7, }) => react.useMemo(() => {
+    const { next, prev, pages } = designsystemetWeb.pagination({ current, total, show });
+    const handleClick = (page) => (event) => {
+        if (page < 1 || page > total)
+            return event.preventDefault(); // Prevent out of bounds navigation
+        onChange?.(event, page);
+        if (!event.defaultPrevented)
+            setCurrentPage?.(page); // Allow stopping change by calling event.preventDefault() in onChange
+    };
+    return {
+        /** Number of steps */
+        pages: pages.map(({ page, current }, index) => ({
+            /**
+             * Page number or "ellipsis" for the ellipsis item
+             */
+            page: page || 'ellipsis',
+            /**
+             * Unique key for the item
+             */
+            itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
+            /**
+             * Properties to spread on Pagination.Button
+             */
+            buttonProps: (page
+                ? {
+                    'aria-current': current ? 'true' : undefined,
+                    onClick: handleClick(page),
+                }
+                : null),
+        })),
+        /** Properties to spread on Pagination.Button used for previous navigation */
+        prevButtonProps: {
+            'aria-hidden': !prev, // Using aria-hidden to support all HTML elements because of potential asChild
+            onClick: handleClick(prev),
+        },
+        /** Properties to spread on Pagination.Button used for next navigation */
+        nextButtonProps: {
+            'aria-hidden': !next, // Using aria-hidden to support all HTML elements because of potential asChild
+            onClick: handleClick(next),
+        },
+        /** Indication if previous page action should be shown or not */
+        hasPrev: !!prev,
+        /** Indication if next page action should be shown or not */
+        hasNext: !!next,
+    };
+}, [current, total, show]);
+
+exports.usePagination = usePagination;