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

package/dist/esm/components/ErrorSummary/ErrorSummaryHeading.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useEffect } from 'react';
-import { ErrorSummaryContext } from './ErrorSummaryRoot.js';
+import { ErrorSummaryContext } from './ErrorSummary.js';
 import { Heading } from '../Typography/Heading/Heading.js';
 
 const HEADING_SIZE_MAP = {
@@ -15,8 +15,7 @@ const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading({ className,
         if (id && headingId !== id)
             setHeadingId(id);
     }, [headingId, id, setHeadingId]);
-    return (jsx(Heading, { className: 'ds-error-summary__heading', id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], spacing: true, ref: ref, ...rest }));
+    return (jsx(Heading, { id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], spacing: true, ref: ref, ...rest }));
 });
-ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
 
 export { ErrorSummaryHeading };

package/dist/esm/components/ErrorSummary/ErrorSummaryList.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { List } from '../List/index.js';
-import { ErrorSummaryContext } from './ErrorSummaryRoot.js';
+import { ErrorSummaryContext } from './ErrorSummary.js';
 
 const ErrorSummaryList = forwardRef(function ErrorSummaryList({ ...rest }, ref) {
     const { size } = useContext(ErrorSummaryContext);

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

@@ -1,26 +1,25 @@
 'use client';
+import { ErrorSummary as ErrorSummary$1 } from './ErrorSummary.js';
 import { ErrorSummaryHeading } from './ErrorSummaryHeading.js';
 import { ErrorSummaryItem } from './ErrorSummaryItem.js';
 import { ErrorSummaryList } from './ErrorSummaryList.js';
-import { ErrorSummaryRoot } from './ErrorSummaryRoot.js';
 
 /**
  * @example
- * <ErrorSummary.Root>
+ * <ErrorSummary>
  *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
  *  <ErrorSummary.List>
  *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
  *  </ErrorSummary.List>
- * </ErrorSummary.Root>
+ * </ErrorSummary>
  */
-const ErrorSummary = {};
-ErrorSummary.Root = ErrorSummaryRoot;
-ErrorSummary.Item = ErrorSummaryItem;
-ErrorSummary.Heading = ErrorSummaryHeading;
-ErrorSummary.List = ErrorSummaryList;
-ErrorSummary.Root.displayName = 'ErrorSummary.Root';
+const ErrorSummary = Object.assign(ErrorSummary$1, {
+    Heading: ErrorSummaryHeading,
+    Item: ErrorSummaryItem,
+    List: ErrorSummaryList,
+});
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
 
-export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryList, ErrorSummaryRoot };
+export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryList };

package/dist/esm/components/HelpText/HelpText.js

@@ -1,17 +1,11 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef, useState, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 import { Popover } from '../Popover/index.js';
-import { HelpTextIcon } from './HelpTextIcon.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
-const HelpText = forwardRef(function HelpText({ title, placement = 'right', size = 'md', className, children, ...rest }, ref) {
-    const [open, setOpen] = useState(false);
-    const randomId = useId();
-    return (jsxs(Fragment, { children: [jsxs("button", { className: clsx(`ds-helptext--${size}`, 'ds-helptext__button', `ds-focus`, className), onClick: () => setOpen(!open), 
-                // @ts-ignore
-                popovertarget: randomId, ref: ref, ...rest, children: [jsx(HelpTextIcon, { filled: true, className: clsx(`ds-helptext__icon`, `ds-helptext__icon--filled`, className), openState: open }), jsx(HelpTextIcon, { className: clsx(`ds-helptext__icon`, className), openState: open }), jsx("span", { className: `ds-sr-only`, children: title })] }), jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Popover, { id: randomId, className: 'ds-helptext__content', onClose: () => setOpen(false), open: open, placement: placement, size: size, variant: 'info', children: children }) })] }));
+const HelpText = forwardRef(function HelpText({ placement = 'right', size = 'md', className, children, ...rest }, ref) {
+    return (jsxs(Popover.Context, { children: [jsx(Popover.Trigger, { className: cl('ds-helptext', className), ref: ref, size: size, variant: 'tertiary', ...rest }), jsx(Popover, { placement: placement, size: size, variant: 'info', children: children })] }));
 });
 
 export { HelpText };

package/dist/esm/components/Link/Link.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const Link = forwardRef(({ asChild, className, color = 'accent', ...rest }, ref) => {
     const Component = asChild ? Slot : 'a';
-    return (jsx(Component, { className: clsx('ds-link', className), "data-color": color, ref: ref, ...rest }));
+    return (jsx(Component, { className: cl('ds-link', className), "data-color": color, ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

package/dist/esm/components/List/ListItem.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
 const ListItem = forwardRef(function ListItem({ asChild, ...rest }, ref) {

package/dist/esm/components/List/Lists.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const render = (tagName, { asChild, className, size = 'md', ...rest }, ref) => {
     const Component = asChild ? Slot : tagName;
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: clsx(`ds-list`, className), "data-size": size, ref: ref, ...rest }) }));
+    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: cl(`ds-list`, className), "data-size": size, ref: ref, ...rest }) }));
 };
 const ListUnordered = forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);

package/dist/esm/components/Modal/ModaContent.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const ModalContent = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { ref: ref, className: clsx('ds-modal__content', className), ...rest }));
+    return (jsx(Component, { ref: ref, className: cl('ds-modal__content', className), ...rest }));
 });
 ModalContent.displayName = 'ModalContent';
 

package/dist/esm/components/Modal/ModalDialog.js

@@ -1,8 +1,8 @@
 '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 { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useEffect } from 'react';
 import { ModalContext } from './ModalRoot.js';
 import { useModalState } from './useModalState.js';
@@ -64,7 +64,7 @@ const ModalDialog = forwardRef(({ onInteractOutside, onClose, onBeforeClose, asC
         }
         modalRef.current?.close();
     };
-    return (jsx(Component, { ref: mergedRefs, className: clsx('ds-modal', className), onCancel: onCancel, ...rest, children: children }));
+    return (jsx(Component, { ref: mergedRefs, className: cl('ds-modal', className), onCancel: onCancel, ...rest, children: children }));
 });
 ModalDialog.displayName = 'ModalDialog';
 

package/dist/esm/components/Modal/ModalFooter.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const ModalFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'footer';
-    return (jsx(Component, { ref: ref, className: clsx('ds-modal__footer', className), ...rest }));
+    return (jsx(Component, { ref: ref, className: cl('ds-modal__footer', className), ...rest }));
 });
 ModalFooter.displayName = 'ModalFooter';
 

package/dist/esm/components/Modal/ModalHeader.js

@@ -1,18 +1,17 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { XMarkIcon } from '@navikt/aksel-icons';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
+import { Button } from '../Button/Button.js';
 import { ModalContext } from './ModalRoot.js';
 import { Heading } from '../Typography/Heading/Heading.js';
-import { Button } from '../Button/Button.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const ModalHeader = forwardRef(({ closeButton = true, closeButtonTitle = 'close modal', children, subtitle, asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'div';
     const { closeModal } = useContext(ModalContext);
-    return (jsxs(Component, { ref: ref, className: clsx('ds-modal__header', !closeButton && 'ds-modal__header--no-button', className), ...rest, children: [subtitle && (jsx(Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsx(Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsx(Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: () => closeModal?.(), autoFocus: true, icon: true, className: 'ds-modal__header__button', title: closeButtonTitle, children: jsx(XMarkIcon, { title: closeButtonTitle, fontSize: '1.5em' }) }))] }));
+    return (jsxs(Component, { ref: ref, className: cl('ds-modal__header', className), ...rest, children: [subtitle && (jsx(Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsx(Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsx(Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: () => closeModal?.(), autoFocus: true, icon: true, className: 'ds-modal__header__button', title: closeButtonTitle }))] }));
 });
 ModalHeader.displayName = 'ModalHeader';
 

package/dist/esm/components/Modal/ModalTrigger.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useContext } from 'react';
-import { ModalContext } from './ModalRoot.js';
 import { Button } from '../Button/Button.js';
+import { ModalContext } from './ModalRoot.js';
 
 const ModalTrigger = forwardRef(({ asChild, ...rest }, ref) => {
     const { modalRef, open } = useContext(ModalContext);

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { PaginationContext } from './PaginationRoot.js';
 import { Button } from '../Button/Button.js';
+import { PaginationContext } from './PaginationRoot.js';
 
 const PaginationButton = forwardRef(function PaginationButton({ isActive, ...rest }, ref) {
     const { size } = useContext(PaginationContext);

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

@@ -1,13 +1,13 @@
 '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 { PaginationContext } from './PaginationRoot.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const PaginationEllipsis = forwardRef(function PaginationEllipsis({ className, ...rest }, ref) {
     const { size } = useContext(PaginationContext);
-    return (jsx(Paragraph, { ref: ref, className: clsx('ds-pagination__ellipsis', className), size: size, ...rest, children: "\u2026" }));
+    return (jsx(Paragraph, { ref: ref, className: cl('ds-pagination__ellipsis', className), size: size, ...rest, children: "\u2026" }));
 });
 
 export { PaginationEllipsis };

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { PaginationContext } from './PaginationRoot.js';
 
 const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';
     const { size, compact } = useContext(PaginationContext);
-    return (jsx(Component, { ref: ref, className: clsx('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
+    return (jsx(Component, { ref: ref, className: cl('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
 });
 
 export { PaginationItem };

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { PaginationContext } from './PaginationRoot.js';
 
 const PaginationList = forwardRef(function PaginationList({ asChild, className, ...rest }, ref) {
     const { size } = useContext(PaginationContext);
     const Component = asChild ? Slot : 'ul';
-    return (jsx(Component, { className: clsx('ds-pagination', className), "data-size": size, ref: ref, ...rest }));
+    return (jsx(Component, { className: cl('ds-pagination', className), "data-size": size, ref: ref, ...rest }));
 });
 
 export { PaginationList };

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '@radix-ui/react-slot';
 import { createContext, forwardRef } from 'react';
 
 const PaginationContext = createContext({

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

@@ -1,15 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { autoUpdate, computePosition, offset, flip, shift } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+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', ...rest }, ref) {
+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);
@@ -72,7 +74,7 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
         if (id)
             setPopoverId?.(id);
     }, [id]);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { className: clsx('ds-popover', className), "data-size": size, "data-variant": variant, id: id || popoverId, 
+    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 }) }));
 });

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useContext } from 'react';
-import { Context } from './PopoverContext.js';
 import { Button } from '../Button/Button.js';
+import { Context } from './PopoverContext.js';
 
 const PopoverTrigger = forwardRef(function PopoverTrigger({ id, asChild, ...rest }, ref) {
     const { popoverId } = useContext(Context);

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,11 +1,11 @@
 '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';
 
 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: clsx('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 }) }));
+    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 }) }));
 });
 
 export { Table };

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';
 
@@ -10,7 +10,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * <Tag color='success'>Success</Tag>
  */
 const Tag = forwardRef(function Tag({ size = 'md', color = 'neutral', className, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: clsx('ds-tag', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: cl('ds-tag', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
 });
 
 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 };