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

package/dist/esm/components/Suggestion/SuggestionClear.js

@@ -1,49 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { SuggestionContext } from './Suggestion.js';
-import { Button } from '../Button/Button.js';
-
-/**
- * Component that provides a clear button for the suggestion input.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.Clear />
- *   <Suggestion.List />
- * </Suggestion>
- */
-const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
-    const { inputRef } = useContext(SuggestionContext); //, handleValueChange
-    const handleClear = (event) => {
-        if (!inputRef?.current)
-            throw new Error('Input is missing');
-        /* narrow type to make TS happy */
-        if (!(inputRef?.current instanceof HTMLInputElement))
-            throw new Error('Input is not an input element');
-        event.preventDefault();
-        setReactInputValue(inputRef.current, '');
-        inputRef.current.focus();
-        onClick?.(event);
-    };
-    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
-});
-// Copied from https://github.com/facebook/react/issues/11488#issuecomment-1300987446
-const setReactInputValue = (input, value) => {
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-    if (nativeInputValueSetter) {
-        nativeInputValueSetter.call(input, value);
-    }
-    else {
-        throw new Error('Unable to find the native input value setter');
-    }
-    const inputEvent = new Event('input', { bubbles: true });
-    const changeEvent = new Event('change', { bubbles: true });
-    input.dispatchEvent(inputEvent);
-    input.dispatchEvent(changeEvent);
-};
-
-export { SuggestionClear, setReactInputValue };

package/dist/esm/components/Suggestion/SuggestionEmpty.js

@@ -1,21 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
-/**
- * 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 = forwardRef(function SuggestionEmpty(rest, ref) {
-    return (
-    // biome-ignore lint/a11y/noInteractiveElementToNoninteractiveRole: Empty option shoult not be interactive
-    jsx("u-option", { "data-empty": true, role: 'none', ref: ref, ...rest }));
-});
-
-export { SuggestionEmpty };

package/dist/esm/components/Suggestion/SuggestionInput.js

@@ -1,43 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { getDatalistValue, isDatalistClick } from '@u-elements/u-datalist';
-import { forwardRef, useContext, useCallback, useEffect } from 'react';
-import { SuggestionContext } from './Suggestion.js';
-import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
-import { Input } from '../Input/Input.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 = forwardRef(function SuggestionList({ value, onInput, ...rest }, ref) {
-    const { listId, inputRef, handleFilter } = useContext(SuggestionContext);
-    const mergedRefs = useMergeRefs([inputRef, ref]);
-    const updateSelected = useCallback(() => {
-        const { list, value } = inputRef?.current || {};
-        for (const option of list?.options || []) {
-            option.selected = getDatalistValue(option) === value;
-        }
-    }, []);
-    // Update also if controlled value
-    useEffect(() => {
-        updateSelected();
-        handleFilter?.(inputRef?.current);
-    }, [value]);
-    return (jsx(Input, { ref: mergedRefs, list: listId, value: value, onInput: (event) => {
-            onInput?.(event); // Should run first
-            updateSelected();
-            if (!isDatalistClick(event.nativeEvent))
-                handleFilter?.(inputRef?.current);
-        }, placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
-        , ...rest }));
-});
-
-export { SuggestionInput };

package/dist/esm/components/Suggestion/SuggestionList.js

@@ -1,28 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useEffect } from 'react';
-import '@u-elements/u-datalist';
-import { SuggestionContext } from './Suggestion.js';
-
-/**
- * Component that provides a suggestion list.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.List />
- * </Suggestion>
- */
-const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
-    const { inputRef, listId, setListId, handleFilter } = useContext(SuggestionContext);
-    useEffect(() => handleFilter?.(inputRef?.current)); // Must run on every render
-    useEffect(() => {
-        if (id && listId !== id)
-            setListId?.(id);
-    }, [listId, id, setListId]);
-    return (jsx("u-datalist", { "data-sr-singular": singular, "data-sr-plural": plural, class: className, id: listId, ref: ref, ...rest }));
-});
-
-export { SuggestionList };

package/dist/esm/components/Suggestion/SuggestionOption.js

@@ -1,10 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import '@u-elements/u-datalist';
-
-const SuggestionOption = forwardRef(function SuggestionOption({ className, ...rest }, ref) {
-    return (jsx("u-option", { class: className, ref: ref, ...rest }));
-});
-
-export { SuggestionOption };

package/dist/esm/components/Suggestion/index.js

@@ -1,37 +0,0 @@
-'use client';
-import { Suggestion } from './Suggestion.js';
-import { SuggestionClear } from './SuggestionClear.js';
-import { SuggestionEmpty } from './SuggestionEmpty.js';
-import { SuggestionInput } from './SuggestionInput.js';
-import { SuggestionList } from './SuggestionList.js';
-import { SuggestionOption } from './SuggestionOption.js';
-
-/**
- * A component that provides a suggestion list for an input field.
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.Clear />
- *   <Suggestion.List>
- *     <Suggestion.Empty>Tomt</Suggestion.Empty>
- *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
- *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
- *   </Suggestion.List>
- * </Suggestion>
- */
-const EXPERIMENTAL_Suggestion = Object.assign(Suggestion, {
-    List: SuggestionList,
-    Input: SuggestionInput,
-    Empty: SuggestionEmpty,
-    Option: SuggestionOption,
-    Clear: SuggestionClear,
-});
-EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
-EXPERIMENTAL_Suggestion.List.displayName = 'EXPERIMENTAL_Suggestion.List';
-EXPERIMENTAL_Suggestion.Input.displayName = 'EXPERIMENTAL_Suggestion.Input';
-EXPERIMENTAL_Suggestion.Empty.displayName = 'EXPERIMENTAL_Suggestion.Empty';
-EXPERIMENTAL_Suggestion.Option.displayName = 'EXPERIMENTAL_Suggestion.Option';
-EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
-
-export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption };

package/dist/esm/components/Switch/Switch.js

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

package/dist/esm/components/Table/TableBody.js

@@ -1,20 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
-/**
- * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
- *
- * @example
- * <Table.Body>
- *   <Table.Row>
- *     <Table.Cell>John</Table.Cell>
- *     <Table.Cell>25</Table.Cell>
- *   </Table.Row>
- * </Table.Body>
- */
-const TableBody = forwardRef(function TableBody(rest, ref) {
-    return jsx("tbody", { ref: ref, ...rest });
-});
-
-export { TableBody };

package/dist/esm/components/Table/TableCell.js

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

package/dist/esm/components/Table/TableFoot.js

@@ -1,20 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
-/**
- * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
- *
- * @example
- * <Table.Foot>
- *   <Table.Row>
- *     <Table.Cell>Total</Table.Cell>
- *     <Table.Cell>2</Table.Cell>
- *   </Table.Row>
- * </Table.Foot>
- */
-const TableFoot = forwardRef(function TableFoot(rest, ref) {
-    return jsx("tfoot", { ref: ref, ...rest });
-});
-
-export { TableFoot };

package/dist/esm/components/Table/TableHead.js

@@ -1,20 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
-/**
- * TableHead component, used to display the header of a table. Renders a native HTML thead element.
- *
- * @example
- * <Table.Head>
- *   <Table.Row>
- *     <Table.HeaderCell>Name</Table.HeaderCell>
- *     <Table.HeaderCell>Age</Table.HeaderCell>
- *   </Table.Row>
- * </Table.Head>
- */
-const TableHead = forwardRef(function TableHead(rest, ref) {
-    return jsx("thead", { ref: ref, ...rest });
-});
-
-export { TableHead };

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

@@ -1,15 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
-/**
- * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
- *
- * @example
- * <Table.HeaderCell>Name</Table.HeaderCell>
- */
-const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
-    return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsx("button", { type: 'button', children: children }) : children }));
-});
-
-export { TableHeaderCell };

package/dist/esm/components/Table/TableRow.js

@@ -1,18 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
-/**
- * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
- *
- * @example
- * <Table.Row>
- *   <Table.Cell>John</Table.Cell>
- *   <Table.Cell>25</Table.Cell>
- * </Table.Row>
- */
-const TableRow = forwardRef(function TableRow(rest, ref) {
-    return jsx("tr", { ref: ref, ...rest });
-});
-
-export { TableRow };

package/dist/esm/components/Table/index.js

@@ -1,51 +0,0 @@
-'use client';
-import { Table as Table$1 } from './Table.js';
-import { TableBody } from './TableBody.js';
-import { TableCell } from './TableCell.js';
-import { TableFoot } from './TableFoot.js';
-import { TableHead } from './TableHead.js';
-import { TableHeaderCell } from './TableHeaderCell.js';
-import { TableRow } from './TableRow.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$1, {
-    Head: TableHead,
-    Body: TableBody,
-    Row: TableRow,
-    Cell: TableCell,
-    HeaderCell: TableHeaderCell,
-    Foot: 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';
-
-export { Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };

package/dist/esm/components/Tabs/Tabs.js

@@ -1,40 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef, createContext, useState } from 'react';
-
-const Context = 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 = forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    let onValueChange = onChange;
-    if (!isControlled) {
-        onValueChange = (newValue) => {
-            setUncontrolledValue(newValue);
-            onChange?.(newValue);
-        };
-        value = uncontrolledValue;
-    }
-    return (jsx(Context.Provider, { value: {
-            value,
-            defaultValue,
-            onChange: onValueChange,
-        }, children: jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
-});
-
-export { Context, Tabs };

package/dist/esm/components/Tabs/TabsList.js

@@ -1,21 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { Context } from './Tabs.js';
-import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.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 = forwardRef(function TabsList({ children, ...rest }, ref) {
-    const { value } = useContext(Context);
-    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
-});
-
-export { TabsList };

package/dist/esm/components/Tabs/TabsPanel.js

@@ -1,29 +0,0 @@
-'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef, useEffect } from 'react';
-import { Context } from './Tabs.js';
-import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
-
-/**
- * A single content item in a Tabs component.
- *
- * @example
- * <Tabs.Panel value='1'>content 1</Tabs.Panel>
- */
-const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
-    const { value: tabsValue } = useContext(Context);
-    const active = value === tabsValue;
-    const [hasTabbableElement, setHasTabbableElement] = useState(false);
-    const internalRef = useRef(null);
-    const mergedRef = useMergeRefs([ref, internalRef]);
-    /* Check if the panel has any tabbable elements */
-    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 (jsx(Fragment, { children: active && (jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
-});
-
-export { TabsPanel };

package/dist/esm/components/Tabs/TabsTab.js

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

package/dist/esm/components/Tabs/index.js

@@ -1,31 +0,0 @@
-'use client';
-import { Tabs as Tabs$1 } from './Tabs.js';
-import { TabsList } from './TabsList.js';
-import { TabsPanel } from './TabsPanel.js';
-import { TabsTab } from './TabsTab.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$1, {
-    List: TabsList,
-    Tab: TabsTab,
-    Panel: TabsPanel,
-});
-Tabs.Tab.displayName = 'Tabs.Tab';
-Tabs.List.displayName = 'Tabs.List';
-Tabs.Panel.displayName = 'Tabs.Panel';
-
-export { Tabs, TabsList, TabsPanel, TabsTab };

package/dist/esm/components/Tag/Tag.js

@@ -1,16 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
-/**
- * Use `Tag` to display categories or statuses.
- *
- * @example
- * <Tag>Melk</Tag>
- */
-const Tag = forwardRef(function Tag({ className, ...rest }, ref) {
-    return jsx("span", { className: cl('ds-tag', className), ref: ref, ...rest });
-});
-
-export { Tag };

package/dist/esm/components/Textfield/Textfield.js

@@ -1,25 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Field } from '../Field/index.js';
-import { Label } from '../Label/Label.js';
-import { FieldDescription } from '../Field/FieldDescription.js';
-import { FieldAffixes, FieldAffix } from '../Field/FieldAffix.js';
-import { Textarea } from '../Textarea/Textarea.js';
-import { Input } from '../Input/Input.js';
-import { ValidationMessage } from '../ValidationMessage/ValidationMessage.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 = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
-    return (jsxs(Field, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!error && jsx(ValidationMessage, { children: error }), !!counter && (jsx(Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
-});
-
-export { Textfield };

package/dist/esm/components/ToggleGroup/ToggleGroup.js

@@ -1,38 +0,0 @@
-'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/RovingFocus/RovingFocusRoot.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-togglegroup', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
-});
-
-export { ToggleGroup, ToggleGroupContext };

package/dist/esm/components/ToggleGroup/ToggleGroupItem.js

@@ -1,18 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem.js';
-import { Button } from '../Button/Button.js';
-import { useToggleGroupItem } from './useToggleGroupitem.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/ToggleGroup/index.js

@@ -1,20 +0,0 @@
-'use client';
-import { ToggleGroup as ToggleGroup$1 } from './ToggleGroup.js';
-import { ToggleGroupItem } from './ToggleGroupItem.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$1, {
-    Item: ToggleGroupItem,
-});
-ToggleGroup.Item.displayName = 'ToggleGroup.Item';
-
-export { ToggleGroup, ToggleGroupItem };