@digdir/designsystemet-react 1.1.2 → 1.1.4

package/dist/cjs/components/suggestion/suggestion-empty.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var suggestion = require('./suggestion.js');
+
+/**
+ * Component that provides an empty Suggestion list.
+ *
+ * Place as a descendant of `Suggestion.List`
+ *
+ * @example
+ * <Suggestion.List>
+ *   <Suggestion.Empty>Tomt</Suggestion.Empty>
+ * </Suggestion.List>
+ */
+const SuggestionEmpty = react.forwardRef(function SuggestionEmpty(rest, ref) {
+    const { isEmpty } = react.useContext(suggestion.SuggestionContext);
+    return isEmpty ? jsxRuntime.jsx("u-option", { "data-empty": true, value: '', ref: ref, ...rest }) : null;
+});
+
+exports.SuggestionEmpty = SuggestionEmpty;

package/dist/cjs/components/suggestion/suggestion-input.js

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var input = require('../input/input.js');
+var suggestion = require('./suggestion.js');
+
+/**
+ * Component that provides an input field for the Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionInput = react.forwardRef(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
+    const { listId, handleFilter } = react.useContext(suggestion.SuggestionContext);
+    react.useEffect(handleFilter, [value]); // Filter if controlled value
+    if (onChange)
+        console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onValueChange on Suggest instead, or onInput if fetching API results');
+    if (value)
+        console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use value on Suggest instead.');
+    const popoverProps = Object.assign({
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: listId,
+    }, rest);
+    return (jsxRuntime.jsx(input.Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
+        , ref: ref, onInput: (event) => {
+            onInput?.(event); // Should run first
+            handleFilter?.(); // Filter if uncontrolled value
+        }, ...popoverProps }));
+});
+
+exports.SuggestionInput = SuggestionInput;

package/dist/cjs/components/suggestion/suggestion-list.js

@@ -0,0 +1,57 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+var dom = require('@floating-ui/dom');
+var suggestion = require('./suggestion.js');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+/**
+ * Component that provides a Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+    const { listId, setListId, handleFilter } = react.useContext(suggestion.SuggestionContext);
+    const listRef = react.useRef(null);
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, listRef]);
+    react.useEffect(handleFilter); // Must run on every render
+    react.useEffect(() => {
+        id && setListId(id);
+    }, [id]);
+    // Position with floating-ui
+    react.useEffect(() => {
+        const list = listRef.current;
+        const trigger = document.querySelector(`[popovertarget="${list?.id}"]`);
+        if (list && trigger) {
+            return dom.autoUpdate(trigger, list, () => {
+                dom.computePosition(trigger, list, {
+                    placement: 'bottom',
+                    strategy: 'fixed',
+                    middleware: [triggerWidth],
+                }).then(({ x, y }) => {
+                    list.style.translate = `${x}px calc(${y}px + var(--dsc-suggestion-list-gap))`;
+                });
+            });
+        }
+    }, [listId]);
+    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: mergedRefs, id: listId, popover: 'manual', ...rest }));
+});
+const triggerWidth = {
+    name: 'TriggerWidth',
+    fn(data) {
+        const { elements, rects } = data;
+        elements.floating.style.width = `${rects.reference.width}px`;
+        return data;
+    },
+};
+
+exports.SuggestionList = SuggestionList;

package/dist/cjs/components/suggestion/suggestion.js

@@ -0,0 +1,89 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-combobox');
+var cl = require('clsx/lite');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+const SuggestionContext = react.createContext({
+    setListId: () => undefined,
+    handleFilter: () => undefined,
+});
+const text = (el) => el.textContent?.trim() || '';
+const sanitizeItems = (values = []) => (typeof values === 'string'
+    ? [{ label: values, value: values }]
+    : values.map((value) => typeof value === 'string'
+        ? { label: value, value }
+        : {
+            label: value.label || value.value || '',
+            value: value.value || '',
+        })).filter((x) => !!x.label);
+const nextItems = (data, prev, multiple) => {
+    const item = { label: text(data), value: data.value };
+    if (!multiple)
+        return data.isConnected ? [] : [item];
+    return data.isConnected
+        ? sanitizeItems(prev).filter(({ value }) => value !== item.value)
+        : [...sanitizeItems(prev), item];
+};
+const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
+const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
+    const uComboboxRef = react.useRef(null);
+    const genId = react.useId();
+    const selectId = rest.id ? `${rest.id}-select` : genId;
+    const isContolled = value !== undefined;
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
+    const [isEmpty, setIsEmpty] = react.useState(false);
+    const [selectedItems, setSelectedItems] = react.useState(sanitizeItems(defaultValue || value));
+    const [listId, setListId] = react.useState(rest.id ? `${rest.id}-list` : `${genId}-list`);
+    // Update if controlled values
+    const prevControlled = react.useRef(value);
+    if (value !== prevControlled.current) {
+        prevControlled.current = value;
+        setSelectedItems(sanitizeItems(prevControlled.current));
+    }
+    /**
+     * Listerners and handling of adding/removing
+     */
+    react.useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeChange = (event) => {
+            event.preventDefault();
+            const multiple = combobox?.multiple;
+            const data = event.detail;
+            if (isContolled)
+                onValueChange?.(nextItems(data, prevControlled.current, multiple));
+            else
+                setSelectedItems((prevItems) => nextItems(data, prevItems, multiple));
+        };
+        combobox?.addEventListener('beforechange', beforeChange);
+        return () => combobox?.removeEventListener('beforechange', beforeChange);
+    }, [isContolled, setSelectedItems]);
+    const handleFilter = react.useCallback(() => {
+        const { control: input, options = [] } = uComboboxRef?.current || {};
+        const filterFn = filter === true ? defaultFilter : filter;
+        let disabled = 0;
+        let index = 0;
+        for (const option of options)
+            if (!option.hasAttribute('data-empty')) {
+                if (filterFn && input)
+                    option.disabled =
+                        !filterFn({
+                            index,
+                            input,
+                            label: option.label,
+                            optionElement: option,
+                            text: option.text,
+                            value: option.value,
+                        }) && Boolean(++disabled);
+                index++; // Increment index for each <option>
+            }
+        setIsEmpty(index === disabled);
+    }, [filter]);
+    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, listId, setListId, handleFilter }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+});
+
+exports.Suggestion = Suggestion;
+exports.SuggestionContext = SuggestionContext;

package/dist/cjs/components/switch/switch.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../field/index.js');
+var input = require('../input/input.js');
+var label = require('../label/label.js');
+
+/**
+ * Switch used to toggle options.
+ *
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+const Switch = react.forwardRef(function Switch({ 'data-size': size, children, className, description, label: label$1, position, style, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsxRuntime.jsx(input.Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label$1 && jsxRuntime.jsx(label.Label, { weight: 'regular', children: label$1 }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description })] }));
+});
+
+exports.Switch = Switch;

package/dist/cjs/components/table/index.js

@@ -0,0 +1,59 @@
+'use client';
+'use strict';
+
+var table = require('./table.js');
+var tableBody = require('./table-body.js');
+var tableCell = require('./table-cell.js');
+var tableFoot = require('./table-foot.js');
+var tableHead = require('./table-head.js');
+var tableHeaderCell = require('./table-header-cell.js');
+var tableRow = require('./table-row.js');
+
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
+const Table = Object.assign(table.Table, {
+    Head: tableHead.TableHead,
+    Body: tableBody.TableBody,
+    Row: tableRow.TableRow,
+    Cell: tableCell.TableCell,
+    HeaderCell: tableHeaderCell.TableHeaderCell,
+    Foot: tableFoot.TableFoot,
+});
+Table.displayName = 'Table';
+Table.Head.displayName = 'Table.Head';
+Table.Body.displayName = 'Table.Body';
+Table.Row.displayName = 'Table.Row';
+Table.Cell.displayName = 'Table.Cell';
+Table.HeaderCell.displayName = 'Table.HeaderCell';
+Table.Foot.displayName = 'Table.Foot';
+
+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.Table = Table;

package/dist/cjs/components/tabs/index.js

@@ -0,0 +1,36 @@
+'use client';
+'use strict';
+
+var tabs = require('./tabs.js');
+var tabsList = require('./tabs-list.js');
+var tabsPanel = require('./tabs-panel.js');
+var tabsTab = require('./tabs-tab.js');
+
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = Object.assign(tabs.Tabs, {
+    List: tabsList.TabsList,
+    Tab: tabsTab.TabsTab,
+    Panel: tabsPanel.TabsPanel,
+});
+Tabs.Tab.displayName = 'Tabs.Tab';
+Tabs.List.displayName = 'Tabs.List';
+Tabs.Panel.displayName = 'Tabs.Panel';
+
+exports.TabsList = tabsList.TabsList;
+exports.TabsPanel = tabsPanel.TabsPanel;
+exports.TabsTab = tabsTab.TabsTab;
+exports.Tabs = Tabs;

package/dist/cjs/components/tabs/tabs-list.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var rovingFocusRoot = require('../../utilities/roving-focus/roving-focus-root.js');
+var tabs = require('./tabs.js');
+
+/**
+ * The container for all `Tab` components.
+ *
+ * @example
+ * <Tabs.List>
+ *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ * </Tabs.List>
+ */
+const TabsList = react.forwardRef(function TabsList({ children, ...rest }, ref) {
+    const { value } = react.useContext(tabs.Context);
+    return (jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+});
+
+exports.TabsList = TabsList;

package/dist/cjs/components/tabs/tabs-panel.js

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var tabs = require('./tabs.js');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+/**
+ * A single content item in a Tabs component.
+ *
+ * @example
+ * <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ */
+const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
+    const { value: tabsValue } = react.useContext(tabs.Context);
+    const active = value === tabsValue;
+    const [hasTabbableElement, setHasTabbableElement] = react.useState(false);
+    const internalRef = react.useRef(null);
+    const mergedRef = useMergeRefs.useMergeRefs([ref, internalRef]);
+    /* Check if the panel has any tabbable elements */
+    react.useEffect(() => {
+        if (!internalRef.current)
+            return;
+        const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        setHasTabbableElement(tabbableElements.length > 0);
+    }, [children]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
+});
+
+exports.TabsPanel = TabsPanel;

package/dist/cjs/components/tabs/tabs-tab.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var rovingFocusItem = require('../../utilities/roving-focus/roving-focus-item.js');
+var tabs = require('./tabs.js');
+
+/**
+ * A single item in a Tabs component.
+ *
+ * @example
+ * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ */
+const TabsTab = react.forwardRef(function TabsTab({ value, id, ...rest }, ref) {
+    const tabs$1 = react.useContext(tabs.Context);
+    const generatedId = react.useId();
+    const buttonId = id ?? `tab-${generatedId}`;
+    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...rest, "aria-selected": tabs$1.value === value, id: buttonId, onClick: () => tabs$1.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
+});
+
+exports.TabsTab = TabsTab;

package/dist/cjs/components/textfield/textfield.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../field/index.js');
+var input = require('../input/input.js');
+var label = require('../label/label.js');
+var textarea = require('../textarea/textarea.js');
+var validationMessage = require('../validation-message/validation-message.js');
+var fieldDescription = require('../field/field-description.js');
+var fieldAffix = require('../field/field-affix.js');
+
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
+ * @example
+ * <Textfield label="Textfield label">
+ */
+const Textfield = react.forwardRef(function Textfield({ label: label$1, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label$1 && jsxRuntime.jsx(label.Label, { children: label$1 }), !!description && jsxRuntime.jsx(fieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(fieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(fieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(textarea.Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsxRuntime.jsx(input.Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsxRuntime.jsx(fieldAffix.FieldAffix, { children: suffix })] }), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
+});
+
+exports.Textfield = Textfield;

package/dist/cjs/components/toggle-group/index.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var toggleGroup = require('./toggle-group.js');
+var toggleGroupItem = require('./toggle-group-item.js');
+
+/**
+ * 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 = Object.assign(toggleGroup.ToggleGroup, {
+    Item: toggleGroupItem.ToggleGroupItem,
+});
+ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+
+exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
+exports.ToggleGroup = ToggleGroup;

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

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

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

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var rovingFocusRoot = require('../../utilities/roving-focus/roving-focus-root.js');
+
+const ToggleGroupContext = react.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 = react.forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+    const nameId = react.useId();
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsxRuntime.jsx(ToggleGroupContext.Provider, { value: {
+            value,
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+        }, children: jsxRuntime.jsx(rovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxRuntime.jsxs("div", { className: cl('ds-toggle-group', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsxRuntime.jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
+});
+
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupContext = ToggleGroupContext;

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

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