@digdir/designsystemet-react 1.0.0-rc.9 → 1.0.1

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

@@ -0,0 +1,18 @@
+'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/Table.js

@@ -1,12 +1,35 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 
-const Table = React.forwardRef(({ zebra = false, stickyHeader = false, border = false, size = 'md', className, children, ...rest }, ref) => {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx('ds-table', `ds-table--${size}`, zebra && 'ds-table--zebra', stickyHeader && 'ds-table--sticky-header', border && 'ds-table--border', className), ...rest, children: children }) }));
+/**
+ * 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 = forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, className, children, ...rest }, ref) {
+    return (jsx("table", { className: cl('ds-table', className), "data-border": border || undefined, "data-hover": hover || undefined, "data-sticky-header": stickyHeader || undefined, "data-zebra": zebra || undefined, ref: ref, ...rest, children: children }));
 });
-Table.displayName = 'Table';
 
 export { Table };

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

@@ -1,10 +1,20 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
+import { forwardRef } from 'react';
 
-const TableBody = React.forwardRef(({ children, ...rest }, ref) => {
-    return (jsx("tbody", { ref: ref, ...rest, children: children }));
+/**
+ * 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 });
 });
-TableBody.displayName = 'TableBody';
 
 export { TableBody };

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

@@ -1,11 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
 
-const TableCell = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("td", { ref: ref, className: clsx('ds-table__cell', className), ...rest, children: children }));
+/**
+ * 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 });
 });
-TableCell.displayName = 'TableCell';
 
 export { TableCell };

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

@@ -0,0 +1,20 @@
+'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,11 +1,20 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
 
-const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("thead", { ref: ref, className: clsx('ds-table__head', className), ...rest, children: children }));
+/**
+ * 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 });
 });
-TableHead.displayName = 'TableHead';
 
 export { TableHead };

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

@@ -1,17 +1,15 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 
-const SORT_ICON = {
-    ascending: jsx(ChevronUpIcon, {}),
-    descending: jsx(ChevronDownIcon, {}),
-};
-const TableHeaderCell = React.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
-    const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsx(ChevronUpDownIcon, {}));
-    return (jsxs("th", { className: clsx('ds-table__header__cell', sortable && 'ds-table__header__cell--sortable', sort && `ds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `ds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+/**
+ * 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 }));
 });
-TableHeaderCell.displayName = 'TableHeaderCell';
 
 export { TableHeaderCell };

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

@@ -1,11 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
 
-const TableRow = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("tr", { className: clsx('ds-table__row', className), ref: ref, ...rest, children: children }));
+/**
+ * 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 });
 });
-TableRow.displayName = 'TableRow';
 
 export { TableRow };

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

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

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

@@ -1,10 +1,25 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, forwardRef, useState } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
+import { forwardRef, createContext, useState } from 'react';
 
-const TabsContext = createContext({});
-const Tabs = forwardRef(({ size = 'md', children, value, defaultValue, className, onChange, ...rest }, ref) => {
+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;
@@ -15,13 +30,11 @@ const Tabs = forwardRef(({ size = 'md', children, value, defaultValue, className
         };
         value = uncontrolledValue;
     }
-    return (jsx(TabsContext.Provider, { value: {
+    return (jsx(Context.Provider, { value: {
             value,
             defaultValue,
             onChange: onValueChange,
-            size,
-        }, children: jsx("div", { className: clsx(`ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
+        }, children: jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
 });
-Tabs.displayName = 'Tabs';
 
-export { Tabs, TabsContext };
+export { Context, Tabs };

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

@@ -0,0 +1,21 @@
+'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

@@ -0,0 +1,29 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useRef, useEffect } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { Context } from './Tabs.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

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

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

@@ -1,12 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
-const Tag = forwardRef(({ size = 'md', color = 'neutral', children, className, ...rest }, ref) => {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: clsx('ds-tag', `ds-tag--${color}`, `ds-tag--${size}`, className), ref: ref, ...rest, children: children }) }));
+/**
+ * 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 });
 });
-Tag.displayName = 'Tag';
 
 export { Tag };

package/dist/esm/components/Textarea/Textarea.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Native HTML textarea element.
+ *
+ * @example
+ * <Textarea />
+ */
+const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
+    return (jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
+});
+
+export { Textarea };

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

@@ -0,0 +1,25 @@
+'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,21 +1,21 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, forwardRef, useId, useState } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { RovingTabindexRoot } from '../../utilities/RovingTabIndex/RovingTabindexRoot.js';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useState, createContext } from 'react';
+import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.js';
 
 const ToggleGroupContext = createContext({});
-/** `ToggleGroup` component.
+/**
+ * Display a group of buttons that can be toggled between.
+ *
  * @example
- * ```tsx
  * <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(({ size = 'md', children, value, defaultValue, onChange, name, className, ...rest }, ref) => {
+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);
@@ -27,14 +27,12 @@ const ToggleGroup = forwardRef(({ size = 'md', children, value, defaultValue, on
         };
         value = uncontrolledValue;
     }
-    return (jsx("div", { className: clsx('ds-togglegroup', className), ref: ref, ...rest, children: jsxs(ToggleGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                name: name ?? `togglegroup-name-${nameId}`,
-                onChange: onValueChange,
-                size,
-            }, children: [name && (jsx("input", { className: 'ds-togglegroup__input', name: name, value: value })), jsx(RovingTabindexRoot, { asChild: true, valueId: value, children: jsx("div", { className: 'ds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
+    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] }) }) }));
 });
-ToggleGroup.displayName = 'ToggleGroup';
 
 export { ToggleGroup, ToggleGroupContext };

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

@@ -0,0 +1,18 @@
+'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,9 +1,20 @@
 'use client';
 import { ToggleGroup as ToggleGroup$1 } from './ToggleGroup.js';
-import { ToggleGroupItem } from './ToggleGroupItem/ToggleGroupItem.js';
+import { ToggleGroupItem } from './ToggleGroupItem.js';
 
-const ToggleGroup = ToggleGroup$1;
-ToggleGroup.Item = ToggleGroupItem;
+/**
+ * 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 };

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

@@ -0,0 +1,30 @@
+'use client';
+import { useId, useContext } from 'react';
+import { ToggleGroupContext } from './ToggleGroup.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 };