@digdir/designsystemet-react 1.1.2 → 1.1.4

package/dist/esm/components/toggle-group/toggle-group-item.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { RovingFocusItem } from '../../utilities/roving-focus/roving-focus-item.js';
+import { Button } from '../button/button.js';
+import { useToggleGroupItem } from './use-toggle-groupitem.js';
+
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ */
+const ToggleGroupItem = forwardRef(function ToggleGroupItem(rest, ref) {
+    const { active, buttonProps, value } = useToggleGroupItem(rest);
+    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+});
+
+export { ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useState, createContext } from 'react';
+import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
+
+const ToggleGroupContext = createContext({});
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+const ToggleGroup = forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+    const nameId = useId();
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsx(ToggleGroupContext.Provider, { value: {
+            value,
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+        }, children: jsx(RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
+});
+
+export { ToggleGroup, ToggleGroupContext };

package/dist/esm/components/toggle-group/use-toggle-groupitem.js

@@ -0,0 +1,30 @@
+'use client';
+import { useId, useContext } from 'react';
+import { ToggleGroupContext } from './toggle-group.js';
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
+const useToggleGroupItem = (props) => {
+    const { ...rest } = props;
+    const genValue = useId();
+    const toggleGroup = useContext(ToggleGroupContext);
+    const value = props.value ?? genValue;
+    const active = toggleGroup.value === value;
+    const buttonId = `togglegroup-item-${useId()}`;
+    return {
+        ...rest,
+        active: active,
+        value,
+        buttonProps: {
+            id: buttonId,
+            'aria-checked': active,
+            'aria-current': active,
+            role: 'radio',
+            name: toggleGroup.name,
+            onClick: () => {
+                toggleGroup.onChange?.(value);
+            },
+        },
+    };
+};
+
+export { useToggleGroupItem };

package/dist/esm/components/tooltip/tooltip.js

@@ -0,0 +1,150 @@
+'use client';
+import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useState, useRef, useEffect, Fragment, version } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+const Tooltip = forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, ...rest }, ref) {
+    const randomTooltipId = useId();
+    const [internalOpen, setInternalOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const mergedRefs = useMergeRefs([tooltipRef, ref]);
+    const controlledOpen = open ?? internalOpen;
+    const setOpen = () => {
+        setInternalOpen(true);
+    };
+    const setClose = () => {
+        setInternalOpen(false);
+    };
+    // Position with floating-ui
+    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 autoUpdate(trigger, tooltip, () => {
+                computePosition(trigger, tooltip, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        ...(autoPlacement
+                            ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
+                            : []),
+                        shift(),
+                        arrowPseudoElement,
+                        safeAreaElement,
+                    ],
+                }).then(({ x, y }) => {
+                    tooltip.style.translate = `${x}px ${y}px`;
+                });
+            });
+        }
+    }, [controlledOpen, placement]);
+    /* Add listener for ESC to dismiss */
+    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' : Slot;
+    /* Make sure it is valid */
+    if (typeof children !== 'string' && children.type === Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
+        return null;
+    }
+    const popoverProps = {
+        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [version.startsWith('19')
+            ? 'popoverTargetAction'
+            : 'popovertargetaction']: 'show',
+    };
+    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
+});
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        switch (placement) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
+        return data;
+    },
+};
+const safeAreaElement = {
+    name: 'SafeAreaElement',
+    fn(data) {
+        const { elements, placement } = data;
+        let width = '100%';
+        let height = 'var(--dsc-tooltip-arrow-size)';
+        let translate = '0px';
+        switch (placement) {
+            case 'top':
+                translate = `-50% 0%`;
+                break;
+            case 'right':
+                height = '100%';
+                width = 'var(--dsc-tooltip-arrow-size)';
+                translate = '-100% -50%';
+                break;
+            case 'bottom':
+                translate = '-50% -100%';
+                break;
+            case 'left':
+                height = '100%';
+                width = 'var(--dsc-tooltip-arrow-size)';
+                translate = '0 -50%';
+                break;
+        }
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-height', height);
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-width', width);
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-translate', translate);
+        return data;
+    },
+};
+
+export { Tooltip };

package/dist/esm/index.js

@@ -1,108 +1,108 @@
 'use client';
-export { Alert } from './components/Alert/Alert.js';
-export { Avatar } from './components/Avatar/Avatar.js';
-export { Badge } from './components/Badge/index.js';
-export { BadgePosition } from './components/Badge/BadgePosition.js';
-export { Breadcrumbs } from './components/Breadcrumbs/index.js';
-export { BreadcrumbsList } from './components/Breadcrumbs/BreadcrumbsList.js';
-export { BreadcrumbsItem } from './components/Breadcrumbs/BreadcrumbsItem.js';
-export { BreadcrumbsLink } from './components/Breadcrumbs/BreadcrumbsLink.js';
-export { Button } from './components/Button/Button.js';
-export { Card } from './components/Card/index.js';
-export { CardBlock } from './components/Card/CardBlock.js';
-export { Checkbox } from './components/Checkbox/Checkbox.js';
-export { Chip } from './components/Chip/index.js';
-export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/Chip/Chips.js';
+export { Alert } from './components/alert/alert.js';
+export { Avatar } from './components/avatar/avatar.js';
+export { Badge } from './components/badge/index.js';
+export { BadgePosition } from './components/badge/badge-position.js';
+export { Breadcrumbs } from './components/breadcrumbs/index.js';
+export { BreadcrumbsItem } from './components/breadcrumbs/breadcrumbs-item.js';
+export { BreadcrumbsLink } from './components/breadcrumbs/breadcrumbs-link.js';
+export { BreadcrumbsList } from './components/breadcrumbs/breadcrumbs-list.js';
+export { Button } from './components/button/button.js';
 export { Combobox } from './components/Combobox/index.js';
-export { ComboboxOption } from './components/Combobox/Option/Option.js';
 export { ComboboxEmpty } from './components/Combobox/Empty.js';
-export { Details } from './components/Details/index.js';
-export { DetailsContent } from './components/Details/DetailsContent.js';
-export { DetailsSummary } from './components/Details/DetailsSummary.js';
-export { Dialog } from './components/Dialog/index.js';
-export { DialogBlock } from './components/Dialog/DialogBlock.js';
-export { DialogTriggerContext } from './components/Dialog/DialogTriggerContext.js';
-export { DialogTrigger } from './components/Dialog/DialogTrigger.js';
-export { Divider } from './components/Divider/Divider.js';
-export { Dropdown } from './components/Dropdown/index.js';
-export { DropdownTriggerContext } from './components/Dropdown/DropdownTriggerContext.js';
-export { DropdownList } from './components/Dropdown/DropdownList.js';
-export { DropdownHeading } from './components/Dropdown/DropdownHeading.js';
-export { DropdownItem } from './components/Dropdown/DropdownItem.js';
-export { DropdownButton } from './components/Dropdown/DropdownButton.js';
-export { DropdownTrigger } from './components/Dropdown/DropdownTrigger.js';
-export { ErrorSummary } from './components/ErrorSummary/index.js';
-export { ErrorSummaryItem } from './components/ErrorSummary/ErrorSummaryItem.js';
-export { ErrorSummaryHeading } from './components/ErrorSummary/ErrorSummaryHeading.js';
-export { ErrorSummaryList } from './components/ErrorSummary/ErrorSummaryList.js';
-export { ErrorSummaryLink } from './components/ErrorSummary/ErrorSummaryLink.js';
-export { Field } from './components/Field/index.js';
-export { FieldDescription } from './components/Field/FieldDescription.js';
-export { FieldAffix, FieldAffixes } from './components/Field/FieldAffix.js';
-export { FieldCounter } from './components/Field/FieldCounter.js';
-export { Fieldset } from './components/Fieldset/index.js';
-export { FieldsetLegend } from './components/Fieldset/FieldsetLegend.js';
-export { FieldsetDescription } from './components/Fieldset/FieldsetDescription.js';
-export { Heading } from './components/Heading/Heading.js';
-export { Input } from './components/Input/Input.js';
-export { Label } from './components/Label/Label.js';
-export { Link } from './components/Link/Link.js';
-export { List } from './components/List/index.js';
-export { ListOrdered, ListUnordered } from './components/List/Lists.js';
-export { ListItem } from './components/List/ListItem.js';
-export { Pagination } from './components/Pagination/index.js';
-export { PaginationList } from './components/Pagination/PaginationList.js';
-export { PaginationItem } from './components/Pagination/PaginationItem.js';
-export { PaginationButton } from './components/Pagination/PaginationButton.js';
-export { Paragraph } from './components/Paragraph/Paragraph.js';
-export { Popover } from './components/Popover/index.js';
-export { PopoverTriggerContext } from './components/Popover/PopoverTriggerContext.js';
-export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
-export { Radio } from './components/Radio/Radio.js';
-export { SearchClear } from './components/Search/SearchClear.js';
-export { SearchButton } from './components/Search/SearchButton.js';
-export { SearchInput } from './components/Search/SearchInput.js';
-export { Search } from './components/Search/index.js';
-export { Select } from './components/Select/index.js';
-export { SelectOption } from './components/Select/SelectOption.js';
-export { SelectOptgroup } from './components/Select/SelectOptgroup.js';
-export { Skeleton } from './components/Skeleton/Skeleton.js';
-export { SkipLink } from './components/SkipLink/SkipLink.js';
-export { Spinner } from './components/Spinner/Spinner.js';
-export { EXPERIMENTAL_Suggestion } from './components/Suggestion/index.js';
-export { SuggestionChips as EXPERIMENTAL_SuggestionChips } from './components/Suggestion/SuggestionChips.js';
-export { SuggestionList as EXPERIMENTAL_SuggestionList } from './components/Suggestion/SuggestionList.js';
-export { SuggestionInput as EXPERIMENTAL_SuggestionInput } from './components/Suggestion/SuggestionInput.js';
-export { SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty } from './components/Suggestion/SuggestionEmpty.js';
-export { SuggestionOption as EXPERIMENTAL_SuggestionOption } from './components/Suggestion/SuggestionOption.js';
-export { SuggestionClear as EXPERIMENTAL_SuggestionClear } from './components/Suggestion/SuggestionClear.js';
-export { Switch } from './components/Switch/Switch.js';
-export { Table } from './components/Table/index.js';
-export { TableHead } from './components/Table/TableHead.js';
-export { TableBody } from './components/Table/TableBody.js';
-export { TableRow } from './components/Table/TableRow.js';
-export { TableCell } from './components/Table/TableCell.js';
-export { TableHeaderCell } from './components/Table/TableHeaderCell.js';
-export { TableFoot } from './components/Table/TableFoot.js';
-export { Tabs } from './components/Tabs/index.js';
-export { TabsTab } from './components/Tabs/TabsTab.js';
-export { TabsList } from './components/Tabs/TabsList.js';
-export { TabsPanel } from './components/Tabs/TabsPanel.js';
-export { Tag } from './components/Tag/Tag.js';
-export { Textarea } from './components/Textarea/Textarea.js';
-export { Textfield } from './components/Textfield/Textfield.js';
-export { ToggleGroup } from './components/ToggleGroup/index.js';
-export { ToggleGroupItem } from './components/ToggleGroup/ToggleGroupItem.js';
-export { Tooltip } from './components/Tooltip/Tooltip.js';
-export { ValidationMessage } from './components/ValidationMessage/ValidationMessage.js';
-export { useCheckboxGroup } from './utilities/hooks/useCheckboxGroup/useCheckboxGroup.js';
-export { useDebounceCallback } from './utilities/hooks/useDebounceCallback/useDebounceCallback.js';
-export { useIsomorphicLayoutEffect } from './utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
-export { useMediaQuery } from './utilities/hooks/useMediaQuery/useMediaQuery.js';
-export { usePagination } from './utilities/hooks/usePagination/usePagination.js';
-export { useRadioGroup } from './utilities/hooks/useRadioGroup/useRadioGroup.js';
-export { useSynchronizedAnimation } from './utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+export { ComboboxOption } from './components/Combobox/Option/Option.js';
+export { Card } from './components/card/index.js';
+export { CardBlock } from './components/card/card-block.js';
+export { Checkbox } from './components/checkbox/checkbox.js';
+export { Chip } from './components/chip/index.js';
+export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/chip/chips.js';
+export { Details } from './components/details/index.js';
+export { DetailsContent } from './components/details/details-content.js';
+export { DetailsSummary } from './components/details/details-summary.js';
+export { Dialog } from './components/dialog/index.js';
+export { DialogBlock } from './components/dialog/dialog-block.js';
+export { DialogTrigger } from './components/dialog/dialog-trigger.js';
+export { DialogTriggerContext } from './components/dialog/dialog-trigger-context.js';
+export { Divider } from './components/divider/divider.js';
+export { Dropdown } from './components/dropdown/index.js';
+export { DropdownButton } from './components/dropdown/dropdown-button.js';
+export { DropdownHeading } from './components/dropdown/dropdown-heading.js';
+export { DropdownItem } from './components/dropdown/dropdown-item.js';
+export { DropdownList } from './components/dropdown/dropdown-list.js';
+export { DropdownTrigger } from './components/dropdown/dropdown-trigger.js';
+export { DropdownTriggerContext } from './components/dropdown/dropdown-trigger-context.js';
+export { ErrorSummary } from './components/error-summary/index.js';
+export { ErrorSummaryHeading } from './components/error-summary/error-summary-heading.js';
+export { ErrorSummaryItem } from './components/error-summary/error-summary-item.js';
+export { ErrorSummaryLink } from './components/error-summary/error-summary-link.js';
+export { ErrorSummaryList } from './components/error-summary/error-summary-list.js';
+export { Field } from './components/field/index.js';
+export { FieldAffix, FieldAffixes } from './components/field/field-affix.js';
+export { FieldCounter } from './components/field/field-counter.js';
+export { FieldDescription } from './components/field/field-description.js';
+export { Fieldset } from './components/fieldset/index.js';
+export { FieldsetDescription } from './components/fieldset/fieldset-description.js';
+export { FieldsetLegend } from './components/fieldset/fieldset-legend.js';
+export { Heading } from './components/heading/heading.js';
+export { Input } from './components/input/input.js';
+export { Label } from './components/label/label.js';
+export { Link } from './components/link/link.js';
+export { List } from './components/list/index.js';
+export { ListItem } from './components/list/list-item.js';
+export { ListOrdered, ListUnordered } from './components/list/lists.js';
+export { Pagination } from './components/pagination/index.js';
+export { PaginationButton } from './components/pagination/pagination-button.js';
+export { PaginationItem } from './components/pagination/pagination-item.js';
+export { PaginationList } from './components/pagination/pagination-list.js';
+export { Paragraph } from './components/paragraph/paragraph.js';
+export { Popover } from './components/popover/index.js';
+export { PopoverTrigger } from './components/popover/popover-trigger.js';
+export { PopoverTriggerContext } from './components/popover/popover-trigger-context.js';
+export { Radio } from './components/radio/radio.js';
+export { Search } from './components/search/index.js';
+export { SearchButton } from './components/search/search-button.js';
+export { SearchClear } from './components/search/search-clear.js';
+export { SearchInput } from './components/search/search-input.js';
+export { Select } from './components/select/index.js';
+export { SelectOptgroup } from './components/select/select-optgroup.js';
+export { SelectOption } from './components/select/select-option.js';
+export { Skeleton } from './components/skeleton/skeleton.js';
+export { SkipLink } from './components/skip-link/skip-link.js';
+export { Spinner } from './components/spinner/spinner.js';
+export { EXPERIMENTAL_Suggestion } from './components/suggestion/index.js';
+export { SuggestionChips as EXPERIMENTAL_SuggestionChips } from './components/suggestion/suggestion-chips.js';
+export { SuggestionClear as EXPERIMENTAL_SuggestionClear } from './components/suggestion/suggestion-clear.js';
+export { SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty } from './components/suggestion/suggestion-empty.js';
+export { SuggestionInput as EXPERIMENTAL_SuggestionInput } from './components/suggestion/suggestion-input.js';
+export { SuggestionList as EXPERIMENTAL_SuggestionList } from './components/suggestion/suggestion-list.js';
+export { SuggestionOption as EXPERIMENTAL_SuggestionOption } from './components/suggestion/suggestion-option.js';
+export { Switch } from './components/switch/switch.js';
+export { Table } from './components/table/index.js';
+export { TableBody } from './components/table/table-body.js';
+export { TableCell } from './components/table/table-cell.js';
+export { TableFoot } from './components/table/table-foot.js';
+export { TableHead } from './components/table/table-head.js';
+export { TableHeaderCell } from './components/table/table-header-cell.js';
+export { TableRow } from './components/table/table-row.js';
+export { Tabs } from './components/tabs/index.js';
+export { TabsList } from './components/tabs/tabs-list.js';
+export { TabsPanel } from './components/tabs/tabs-panel.js';
+export { TabsTab } from './components/tabs/tabs-tab.js';
+export { Tag } from './components/tag/tag.js';
+export { Textarea } from './components/textarea/textarea.js';
+export { Textfield } from './components/textfield/textfield.js';
+export { ToggleGroup } from './components/toggle-group/index.js';
+export { ToggleGroupItem } from './components/toggle-group/toggle-group-item.js';
+export { Tooltip } from './components/tooltip/tooltip.js';
+export { ValidationMessage } from './components/validation-message/validation-message.js';
+export { useCheckboxGroup } from './utilities/hooks/use-checkbox-group/use-checkbox-group.js';
+export { useDebounceCallback } from './utilities/hooks/use-debounce-callback/use-debounce-callback.js';
+export { useIsomorphicLayoutEffect } from './utilities/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js';
+export { useMediaQuery } from './utilities/hooks/use-media-query/use-media-query.js';
+export { usePagination } from './utilities/hooks/use-pagination/use-pagination.js';
+export { useRadioGroup } from './utilities/hooks/use-radio-group/use-radio-group.js';
+export { useSynchronizedAnimation } from './utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 export { omit } from './utilities/omit/omit.js';
-export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';
-export { RovingFocusRoot } from './utilities/RovingFocus/RovingFocusRoot.js';
-export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
+export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/roving-focus/roving-focus-item.js';
+export { RovingFocusRoot } from './utilities/roving-focus/roving-focus-root.js';
+export { useRovingFocus } from './utilities/roving-focus/use-roving-focus.js';

package/dist/esm/utilities/hooks/use-media-query/use-media-query.js

@@ -0,0 +1,47 @@
+'use client';
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../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] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    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;
+}
+
+export { useMediaQuery };

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

@@ -0,0 +1,95 @@
+'use client';
+import { useMemo } from 'react';
+
+const getSteps = (now, max, show) => {
+    const offset = (show - 1) / 2;
+    const start = Math.max(1, Math.min(Math.max(now - Math.floor(offset), 1), max - show + 1));
+    const end = Math.min(Math.max(now + Math.ceil(offset), show), max);
+    const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
+    if (show > 4 && start > 1)
+        pages.splice(0, 2, 1, 0);
+    if (show > 3 && end < max)
+        pages.splice(-2, 2, 0, max);
+    return pages;
+};
+/**
+ * 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 = 1, setCurrentPage, onChange, totalPages = 1, showPages = 7, }) => useMemo(() => {
+    const hasNext = currentPage < totalPages;
+    const hasPrev = currentPage !== 1;
+    const handleClick = (page) => (event) => {
+        if (page < 1 || page > totalPages)
+            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: getSteps(currentPage, totalPages, showPages).map((page, 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': page === currentPage ? 'page' : undefined,
+                    onClick: handleClick(page),
+                    variant: page === currentPage ? 'primary' : 'tertiary',
+                }
+                : null),
+        })),
+        /** Properties to spread on Pagination.Button used for previous naviagation */
+        prevButtonProps: {
+            'aria-disabled': !hasPrev, // Using aria-disabled to support all HTML elements because of potential asChild
+            onClick: handleClick(currentPage - 1),
+            variant: 'tertiary',
+        },
+        /** Properties to spread on Pagination.Button used for next naviagation */
+        nextButtonProps: {
+            'aria-disabled': !hasNext, // Using aria-disabled to support all HTML elements because of potential asChild
+            onClick: handleClick(currentPage + 1),
+            variant: 'tertiary',
+        },
+        /** Indication if previous page action should be shown or not */
+        hasPrev,
+        /** Indication if next page action should be shown or not */
+        hasNext,
+    };
+}, [currentPage, totalPages, showPages]);
+
+export { usePagination };