@digdir/designsystemet-react 0.0.0-next-20250603060245 → 0.0.0-react-side-effects-20260113071010

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

@@ -0,0 +1,96 @@
+'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');
+var index = require('../chip/index.js');
+
+const text = (el) => el.textContent?.trim() || '';
+const sanitizeItems = (values = []) => typeof values === 'string'
+    ? [{ label: values, value: values }]
+    : !Array.isArray(values)
+        ? [values]
+        : values.map((value) => typeof value === 'string' ? { label: value, value } : value);
+const nextItems = (data, prev, multiple) => {
+    const item = { label: text(data), value: data.value };
+    if (!multiple)
+        return data.isConnected ? undefined : 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, defaultSelected, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange, renderSelected = ({ label }) => label, selected, ...rest }, ref) {
+    const uComboboxRef = react.useRef(null);
+    const genId = react.useId();
+    const selectId = rest.id ? `${rest.id}-select` : genId;
+    const isControlled = selected !== undefined;
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
+    const [isEmpty, setIsEmpty] = react.useState(false);
+    const [defaultItems, setDefaultItems] = react.useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
+    const onSelectedChangeRef = react.useRef(onSelectedChange);
+    const selectedItemsRef = react.useRef(selectedItems);
+    // Keep the ref updated with the latest callback
+    react.useEffect(() => {
+        onSelectedChangeRef.current = onSelectedChange;
+    }, [onSelectedChange]);
+    react.useEffect(() => {
+        selectedItemsRef.current = selectedItems;
+    }, [selectedItems]);
+    /**
+     * 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;
+            const nextItem = nextItems(data, selectedItemsRef.current, multiple);
+            onSelectedChangeRef.current?.(nextItem || null);
+            if (!isControlled)
+                setDefaultItems(sanitizeItems(nextItem));
+        };
+        combobox?.addEventListener('comboboxbeforeselect', beforeChange);
+        return () => combobox?.removeEventListener('comboboxbeforeselect', beforeChange);
+    }, [isControlled]);
+    // Before match event listener
+    react.useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener('comboboxbeforematch', beforeMatch);
+        return () => combobox?.removeEventListener('comboboxbeforematch', beforeMatch);
+    }, [onBeforeMatch]);
+    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, handleFilter, uComboboxRef }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+});
+const SuggestionContext = react.createContext({
+    handleFilter: () => undefined,
+});
+
+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 TableComponent = Object.assign(table.Table, {
+    Head: tableHead.TableHead,
+    Body: tableBody.TableBody,
+    Row: tableRow.TableRow,
+    Cell: tableCell.TableCell,
+    HeaderCell: tableHeaderCell.TableHeaderCell,
+    Foot: tableFoot.TableFoot,
+});
+TableComponent.displayName = 'Table';
+TableComponent.Head.displayName = 'Table.Head';
+TableComponent.Body.displayName = 'Table.Body';
+TableComponent.Row.displayName = 'Table.Row';
+TableComponent.Cell.displayName = 'Table.Cell';
+TableComponent.HeaderCell.displayName = 'Table.HeaderCell';
+TableComponent.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 = TableComponent;

package/dist/cjs/components/table/table-body.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+ *
+ * @example
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ */
+const TableBody = react.forwardRef(function TableBody(rest, ref) {
+    return jsxRuntime.jsx("tbody", { ref: ref, ...rest });
+});
+
+exports.TableBody = TableBody;

package/dist/cjs/components/table/table-cell.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableCell component, used to display the cells of a table. Renders a native HTML td element.
+ *
+ * @example
+ * <TableCell>John</TableCell>
+ */
+const TableCell = react.forwardRef(function TableCell(rest, ref) {
+    return jsxRuntime.jsx("td", { ref: ref, ...rest });
+});
+
+exports.TableCell = TableCell;

package/dist/cjs/components/table/table-foot.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+ *
+ * @example
+ * <TableFoot>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>2</TableCell>
+ *   </TableRow>
+ * </TableFoot>
+ */
+const TableFoot = react.forwardRef(function TableFoot(rest, ref) {
+    return jsxRuntime.jsx("tfoot", { ref: ref, ...rest });
+});
+
+exports.TableFoot = TableFoot;

package/dist/cjs/components/table/table-head.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+ *
+ * @example
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeaderCell>Name</TableHeaderCell>
+ *     <TableHeaderCell>Age</TableHeaderCell>
+ *   </TableRow>
+ * </TableHead>
+ */
+const TableHead = react.forwardRef(function TableHead(rest, ref) {
+    return jsxRuntime.jsx("thead", { ref: ref, ...rest });
+});
+
+exports.TableHead = TableHead;

package/dist/cjs/components/table/table-header-cell.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+ *
+ * @example
+ * <TableHeaderCell>Name</TableHeaderCell>
+ */
+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', children: children }) : children }));
+});
+
+exports.TableHeaderCell = TableHeaderCell;

package/dist/cjs/components/table/table-row.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
+ *
+ * @example
+ * <TableRow>
+ *   <TableCell>John</TableCell>
+ *   <TableCell>25</TableCell>
+ * </TableRow>
+ */
+const TableRow = react.forwardRef(function TableRow(rest, ref) {
+    return jsxRuntime.jsx("tr", { ref: ref, ...rest });
+});
+
+exports.TableRow = TableRow;

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 TabsComponent = Object.assign(tabs.Tabs, {
+    List: tabsList.TabsList,
+    Tab: tabsTab.TabsTab,
+    Panel: tabsPanel.TabsPanel,
+});
+TabsComponent.Tab.displayName = 'Tabs.Tab';
+TabsComponent.List.displayName = 'Tabs.List';
+TabsComponent.Panel.displayName = 'Tabs.Panel';
+
+exports.TabsList = tabsList.TabsList;
+exports.TabsPanel = tabsPanel.TabsPanel;
+exports.TabsTab = tabsTab.TabsTab;
+exports.Tabs = TabsComponent;

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

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

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

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var tabs = require('./tabs.js');
+
+/**
+ * A single content item in a Tabs component.
+ *
+ * @example
+ * <TabsPanel value='1'>content 1</TabsPanel>
+ */
+const TabsPanel = react.forwardRef(function TabsPanel({ children, value, id, ...rest }, ref) {
+    const { value: tabsValue, tablistRef, setPanelButtonMap, } = react.useContext(tabs.Context);
+    const active = value === tabsValue;
+    const generatedId = react.useId();
+    const panelId = id ?? `tabpanel-${generatedId}`;
+    const [hasTabbableElement, setHasTabbableElement] = react.useState(false);
+    const [labelledBy, setLabelledBy] = react.useState(undefined);
+    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]);
+    /* get associated button */
+    react.useEffect(() => {
+        if (!tablistRef)
+            return;
+        const button = tablistRef.current?.querySelector(`[role="tab"][data-value="${value}"]`);
+        setLabelledBy(button ? button.id : undefined);
+        if (button) {
+            setPanelButtonMap?.((prev) => new Map(prev).set(button.id, panelId));
+        }
+    }, [tablistRef]);
+    return (jsxRuntime.jsx("div", { ref: mergedRef, id: panelId, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, "aria-labelledby": labelledBy, hidden: !active, ...rest, children: children }));
+});
+
+exports.TabsPanel = TabsPanel;

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

@@ -0,0 +1,25 @@
+'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
+ * <TabsTab value='1'>Tab 1</TabsTab>
+ */
+const TabsTab = react.forwardRef(function TabsTab({ value, id, onClick, ...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", { ref: ref, id: buttonId, "aria-selected": tabs$1.value === value, "data-value": value, role: 'tab', type: 'button', onClick: (e) => {
+                tabs$1.onChange?.(value);
+                onClick?.(e);
+            }, "aria-controls": tabs$1.panelButtonMap?.get(buttonId), ...rest }) }));
+});
+
+exports.TabsTab = TabsTab;

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

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const Context = react.createContext({});
+/**
+ * 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 = react.forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
+    const tablistRef = react.useRef(null);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    const [panelButtonMap, setPanelButtonMap] = react.useState(new Map());
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsxRuntime.jsx(Context.Provider, { value: {
+            value,
+            defaultValue,
+            onChange: onValueChange,
+            tablistRef,
+            panelButtonMap,
+            setPanelButtonMap,
+        }, children: jsxRuntime.jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
+});
+
+exports.Context = Context;
+exports.Tabs = Tabs;

package/dist/cjs/components/tag/tag.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `Tag` to display categories or statuses.
+ *
+ * @example
+ * <Tag>Melk</Tag>
+ */
+const Tag = react.forwardRef(function Tag({ className, variant = 'default', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-tag', className), ref: ref, "data-variant": variant, ...rest }));
+});
+
+exports.Tag = Tag;

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 })] }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) })), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error })] }));
+});
+
+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 ToggleGroupComponent = Object.assign(toggleGroup.ToggleGroup, {
+    Item: toggleGroupItem.ToggleGroupItem,
+});
+ToggleGroupComponent.Item.displayName = 'ToggleGroup.Item';
+
+exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
+exports.ToggleGroup = ToggleGroupComponent;

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
+ * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
+ */
+const ToggleGroupItem = react.forwardRef(function ToggleGroupItem(rest, ref) {
+    const { active, buttonProps, value, variant } = useToggleGroupitem.useToggleGroupItem(rest);
+    return (jsxRuntime.jsx(rovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(button.Button, { variant: active ? variant : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+});
+
+exports.ToggleGroupItem = ToggleGroupItem;

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

@@ -0,0 +1,42 @@
+'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, variant = 'primary', 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: {
+            variant,
+            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', "data-variant": variant, 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,34 @@
+'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 variant = toggleGroup$1.variant;
+    const buttonId = `togglegroup-item-${react.useId()}`;
+    return {
+        ...rest,
+        active: active,
+        value,
+        variant,
+        buttonProps: {
+            id: buttonId,
+            'aria-checked': active,
+            'aria-current': active,
+            role: 'radio',
+            name: toggleGroup$1.name,
+            onClick: () => {
+                toggleGroup$1.onChange?.(value);
+            },
+        },
+    };
+};
+
+exports.useToggleGroupItem = useToggleGroupItem;