@digdir/designsystemet-react 1.0.0-next.32 → 1.0.0-next.34

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

@@ -1,26 +1,26 @@
 'use client';
 import { Pagination as Pagination$1 } from './Pagination.js';
 import { PaginationButton } from './PaginationButton.js';
-import { PaginationContent } from './PaginationContent.js';
 import { PaginationEllipsis } from './PaginationEllipsis.js';
 import { PaginationItem } from './PaginationItem.js';
+import { PaginationList } from './PaginationList.js';
 import { PaginationPrevious, PaginationNext } from './PaginationNextPrev.js';
 import { PaginationRoot } from './PaginationRoot.js';
 
 const Pagination = Pagination$1;
 Pagination.Root = PaginationRoot;
-Pagination.Content = PaginationContent;
+Pagination.List = PaginationList;
 Pagination.Item = PaginationItem;
 Pagination.Button = PaginationButton;
 Pagination.Ellipsis = PaginationEllipsis;
 Pagination.Previous = PaginationPrevious;
 Pagination.Next = PaginationNext;
 Pagination.Root.displayName = 'Pagination.Root';
-Pagination.Content.displayName = 'Pagination.Content';
+Pagination.List.displayName = 'Pagination.List';
 Pagination.Item.displayName = 'Pagination.Item';
 Pagination.Button.displayName = 'Pagination.Button';
 Pagination.Ellipsis.displayName = 'Pagination.Ellipsis';
 Pagination.Previous.displayName = 'Pagination.Previous';
 Pagination.Next.displayName = 'Pagination.Next';
 
-export { Pagination, PaginationButton, PaginationContent, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PaginationRoot };
+export { Pagination, PaginationButton, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPrevious, PaginationRoot };

package/dist/esm/components/Popover/Popover.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import { Context } from './PopoverContext.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const ARROW_HEIGHT = 7;
+const ARROW_GAP = 4;
+const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', size = 'md', variant = 'default', asChild = false, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    const popoverRef = useRef(null);
+    const mergedRefs = useMergeRefs([popoverRef, ref]);
+    const { popoverId, setPopoverId } = useContext(Context);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const controlledOpen = open ?? internalOpen;
+    // NOTE: This code is purely to add React controlled component ability to Popover API
+    useEffect(() => {
+        const popover = popoverRef.current;
+        const handleClick = (event) => {
+            const el = event.target;
+            const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
+            const isOutside = !isTrigger && !popover?.contains(el);
+            if (isTrigger) {
+                event.preventDefault(); // Prevent native Popover API
+                setInternalOpen((open) => !open);
+                onOpen?.();
+            }
+            if (isOutside) {
+                setInternalOpen(false);
+                onClose?.();
+            }
+        };
+        const handleKeydown = (event) => {
+            if (event.key !== 'Escape' || !controlledOpen)
+                return;
+            event.preventDefault(); // Prevent closing fullscreen in Safari
+            setInternalOpen(false);
+            onClose?.();
+        };
+        popover?.togglePopover?.(controlledOpen);
+        document.addEventListener('click', handleClick);
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('click', handleClick);
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [controlledOpen]);
+    // Position with floating-ui
+    useEffect(() => {
+        const popover = popoverRef.current;
+        const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
+        if (popover && trigger && controlledOpen)
+            return autoUpdate(trigger, popover, () => {
+                computePosition(trigger, popover, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        offset(ARROW_HEIGHT + ARROW_GAP), // TODO: Should this be configurable?
+                        flip({ fallbackAxisSideDirection: 'start' }),
+                        shift(),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    popover.style.translate = `${x}px ${y}px`;
+                });
+            });
+    }, [controlledOpen, placement, id]);
+    // Update context with id
+    useEffect(() => {
+        if (id)
+            setPopoverId?.(id);
+    }, [id]);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx(Component, { className: cl('ds-popover', className), "data-size": size, "data-variant": variant, id: id || popoverId, 
+            // @ts-ignore @types/react-dom does not understand popover yet
+            popover: 'manual', ref: mergedRefs, ...rest }) }));
+});
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        const arrowX = rects.reference.width / 2 + rects.reference.x - data.x;
+        const arrowY = rects.reference.height / 2 + rects.reference.y - data.y;
+        elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
+        elements.floating.style.setProperty('--ds-popover-arrow-x', `${arrowX}px`);
+        elements.floating.style.setProperty('--ds-popover-arrow-y', `${arrowY}px`);
+        return data;
+    },
+};
+
+export { Popover };

package/dist/esm/components/Popover/PopoverContext.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, createContext } from 'react';
+
+const PopoverContext = ({ children }) => {
+    const randomPopoverId = useId();
+    const [popoverId, setPopoverId] = useState(randomPopoverId);
+    return (jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
+};
+PopoverContext.displayName = 'PopoverContext';
+const Context = createContext({});
+
+export { Context, PopoverContext };

package/dist/esm/components/Popover/PopoverTrigger.js

@@ -1,23 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { forwardRef, useContext, useEffect } from 'react';
-import { PopoverContext } from './PopoverRoot.js';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useContext } from 'react';
 import { Button } from '../Button/Button.js';
+import { Context } from './PopoverContext.js';
 
-const PopoverTrigger = forwardRef(({ id, asChild, ...rest }, ref) => {
-    const { triggerRef, internalOpen, setInternalOpen, isControlled, popoverId, triggerId, setTriggerId, } = useContext(PopoverContext);
-    const mergedRefs = useMergeRefs([ref, triggerRef]);
-    useEffect(() => {
-        id && setTriggerId?.(id);
-    }, [id, setTriggerId]);
+const PopoverTrigger = forwardRef(function PopoverTrigger({ id, asChild, ...rest }, ref) {
+    const { popoverId } = useContext(Context);
     const Component = asChild ? Slot : Button;
-    return (jsx(Component, { ref: mergedRefs, onClick: () => {
-            if (!isControlled)
-                setInternalOpen(!internalOpen);
-        }, "aria-expanded": internalOpen, "aria-controls": internalOpen ? popoverId : undefined, id: triggerId, ...rest }));
+    return jsx(Component, { ref: ref, popovertarget: popoverId, ...rest });
 });
-PopoverTrigger.displayName = 'PopoverTrigger';
 
 export { PopoverTrigger };

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

@@ -1,14 +1,12 @@
 'use client';
-import { PopoverContent } from './PopoverContent.js';
-import { PopoverRoot } from './PopoverRoot.js';
+import { Popover as Popover$1 } from './Popover.js';
+import { PopoverContext } from './PopoverContext.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
 
-const Popover = {};
-Popover.Root = PopoverRoot;
-Popover.Content = PopoverContent;
+const Popover = Popover$1;
+Popover.Context = PopoverContext;
 Popover.Trigger = PopoverTrigger;
-Popover.Root.displayName = 'Popover.Root';
-Popover.Content.displayName = 'Popover.Content';
+Popover.Context.displayName = 'Popover.Context';
 Popover.Trigger.displayName = 'Popover.Trigger';
 
-export { Popover, PopoverContent, PopoverRoot, PopoverTrigger };
+export { Popover, PopoverContext, PopoverTrigger };

package/dist/esm/components/SkipLink/SkipLink.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 
 const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsx("a", { href: href, className: clsx(`ds-sr-only`, 'ds-skiplink', className), ...rest, children: jsx("p", { className: 'ds-skiplink__content', children: children }) }));
+    return (jsx("a", { href: href, className: cl(`ds-sr-only`, 'ds-skiplink', className), ...rest, children: jsx("p", { className: 'ds-skiplink__content', children: children }) }));
 };
 SkipLink.displayName = 'SkipLink';
 

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

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

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

@@ -1,11 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
+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 }));
+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,9 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
+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', 'ds-font-weight--medium', 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] }));
+const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
+    return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? (jsx("button", { type: 'button', className: 'ds-focus', children: children })) : (children) }));
 });
-TableHeaderCell.displayName = 'TableHeaderCell';
 
 export { TableHeaderCell };

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

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

package/dist/esm/components/Tabs/{TabsRoot.js → Tabs.js}

@@ -1,26 +1,26 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { createContext, forwardRef, useState } from 'react';
 
-const TabsContext = createContext({});
+const Context = createContext({});
 /**
  * Display a group of tabs that can be toggled between.
  * @example
  * ```tsx
- * <Tabs.Root onChange={(value) => console.log(value)}>
+ * <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.Content value='1'>content 1</Tabs.Content>
- *   <Tabs.Content value='2'>content 2</Tabs.Content>
- *   <Tabs.Content value='3'>content 3</Tabs.Content>
- * </Tabs.Root>
+ *   <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 TabsRoot = forwardRef(({ size = 'md', children, value, defaultValue, className, onChange, ...rest }, ref) => {
+const Tabs = forwardRef(function Tabs({ size = 'md', value, defaultValue, className, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
     let onValueChange = onChange;
@@ -31,13 +31,12 @@ const TabsRoot = forwardRef(({ size = 'md', children, value, defaultValue, class
         };
         value = uncontrolledValue;
     }
-    return (jsx(TabsContext.Provider, { value: {
+    return (jsx(Context.Provider, { value: {
             value,
             defaultValue,
             onChange: onValueChange,
             size,
-        }, children: jsx("div", { className: clsx('ds-tabs', `ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
+        }, children: jsx("div", { className: cl('ds-tabs', className), "data-size": size, ref: ref, ...rest }) }));
 });
-TabsRoot.displayName = 'TabsRoot';
 
-export { TabsContext, TabsRoot };
+export { Context, Tabs };

package/dist/esm/components/Tabs/{TabList.js → TabsList.js}

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
-import { TabsContext } from './TabsRoot.js';
+import { Context } from './Tabs.js';
 import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.js';
 
 /**
@@ -15,10 +15,9 @@ import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.js'
  * </Tabs.List>
  * ```
  */
-const TabList = forwardRef(({ children, className, ...rest }, ref) => {
-    const { value } = useContext(TabsContext);
-    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, className: clsx('ds-tabs__tablist', className), orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+const TabsList = forwardRef(function TabsList({ children, className, ...rest }, ref) {
+    const { value } = useContext(Context);
+    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, className: cl('ds-tabs__tablist', className), orientation: 'ambiguous', ref: ref, ...rest, children: children }));
 });
-TabList.displayName = 'TabList';
 
-export { TabList };
+export { TabsList };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useContext } from 'react';
+import { Context } from './Tabs.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+/**
+ * A single content item in a Tabs component.
+ * @example
+ * ```tsx
+ * <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ * ```
+ */
+const TabsPanel = forwardRef(function TabsPanel({ children, value, className, ...rest }, ref) {
+    const { value: tabsValue, size } = useContext(Context);
+    const active = value === tabsValue;
+    return (jsx(Fragment, { children: active && (jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("div", { className: cl('ds-tabs__panel', className), ref: ref, ...rest, children: children }) })) }));
+});
+
+export { TabsPanel };

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

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

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

@@ -1,33 +1,32 @@
 'use client';
-import { Tab } from './Tab.js';
-import { TabContent } from './TabContent.js';
-import { TabList } from './TabList.js';
-import { TabsRoot } from './TabsRoot.js';
+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
  * ```tsx
- * <Tabs.Root onChange={(value) => console.log(value)}>
+ * <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.Content value='1'>content 1</Tabs.Content>
- *   <Tabs.Content value='2'>content 2</Tabs.Content>
- *   <Tabs.Content value='3'>content 3</Tabs.Content>
- * </Tabs.Root>
+ *   <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 = {};
-Tabs.Root = TabsRoot;
-Tabs.Tab = Tab;
-Tabs.List = TabList;
-Tabs.Content = TabContent;
-Tabs.Root.displayName = 'Tabs.Root';
+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, TabsRoot };
+export { Tabs, TabsList, TabsPanel, TabsTab };

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

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

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

@@ -0,0 +1,38 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { createContext, forwardRef, useId, useState } 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({ size = 'md', 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,
+            size,
+        }, 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

@@ -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, size = 'md', buttonProps, value } = useToggleGroupItem(rest);
+    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps }) }));
+});
+
+export { ToggleGroupItem };

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

@@ -1,22 +1,20 @@
 'use client';
-import { ToggleGroupItem } from './ToggleGroupItem/ToggleGroupItem.js';
-import { ToggleGroupRoot } from './ToggleGroupRoot.js';
+import { ToggleGroup as ToggleGroup$1 } from './ToggleGroup.js';
+import { ToggleGroupItem } from './ToggleGroupItem.js';
 
 /**
  * Display a group of buttons that can be toggled between.
  * @example
  * ```tsx
- * <ToggleGroup.Root onChange={(value) => console.log(value)}>
+ * <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.Root>
+ * </ToggleGroup>
  * ```
  */
-const ToggleGroup = {};
-ToggleGroup.Root = ToggleGroupRoot;
+const ToggleGroup = ToggleGroup$1;
 ToggleGroup.Item = ToggleGroupItem;
-ToggleGroup.Root.displayName = 'ToggleGroup.Root';
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
-export { ToggleGroup, ToggleGroupItem, ToggleGroupRoot };
+export { ToggleGroup, ToggleGroupItem };

package/dist/esm/components/ToggleGroup/{ToggleGroupItem/useToggleGroupitem.js → useToggleGroupitem.js}

@@ -1,6 +1,6 @@
 'use client';
 import { useId, useContext } from 'react';
-import { ToggleGroupContext } from '../ToggleGroupRoot.js';
+import { ToggleGroupContext } from './ToggleGroup.js';
 
 /** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
 const useToggleGroupItem = (props) => {