@digdir/designsystemet-react 1.0.0-rc.12 → 1.0.0-rc.13

package/dist/cjs/components/Accordion/AccordionContent.js

@@ -8,6 +8,11 @@ var AccordionItem = require('./AccordionItem.js');
 var AnimateHeight = require('../../utilities/AnimateHeight/AnimateHeight.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
+/**
+ * Accordion content component, contains the content of the accordion item.
+ * @example
+ * <AccordionContent>Content</AccordionContent>
+ */
 const AccordionContent = React.forwardRef(({ children, className, ...rest }, ref) => {
     const context = React.useContext(AccordionItem.AccordionItemContext);
     if (context === null) {

package/dist/cjs/components/Accordion/AccordionHeading.js

@@ -9,6 +9,11 @@ var AccordionItem = require('./AccordionItem.js');
 var Heading = require('../Typography/Heading/Heading.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
+/**
+ * Accordion header component, contains a button to toggle the content.
+ * @example
+ * <AccordionHeader>Header</AccordionHeader>
+ */
 const AccordionHeading = React.forwardRef(({ level = 1, children, className, onHeaderClick, ...rest }, ref) => {
     const context = React.useContext(AccordionItem.AccordionItemContext);
     if (context === null) {

package/dist/cjs/components/Accordion/AccordionItem.js

@@ -6,6 +6,14 @@ var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 
 const AccordionItemContext = React.createContext(null);
+/**
+ * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * @example
+ * <AccordionItem>
+ *  <AccordionHeader>Header</AccordionHeader>
+ *  <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ */
 const AccordionItem = React.forwardRef(({ children, className, open, defaultOpen = false, ...rest }, ref) => {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
     const contentId = React.useId();

package/dist/cjs/components/Accordion/AccordionRoot.js

@@ -5,6 +5,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 
+/**
+ * Accordion root component, contains `Accordion.Item` components.
+ */
 const AccordionRoot = React.forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => {
     return (jsxRuntime.jsx("div", { className: lite.clsx('ds-accordion', border && 'ds-accordion--border', color && `ds-accordion--${color}`, className), ref: ref, ...rest }));
 });

package/dist/cjs/components/Accordion/index.js

@@ -6,6 +6,16 @@ var AccordionItem = require('./AccordionItem.js');
 var AccordionContent = require('./AccordionContent.js');
 var AccordionHeading = require('./AccordionHeading.js');
 
+/**
+ * Accordions are used to toggle the visibility of content.
+ * @example
+ * <Accordion.Root>
+ *  <Accordion.Item>
+ *   <Accordion.Heading>Heading 1</Accordion.Heading>
+ *  <Accordion.Content>Content 1</Accordion.Content>
+ * </Accordion.Item>
+ * <Accordion.Item>
+ */
 const Accordion = {};
 Accordion.Root = AccordionRoot.AccordionRoot;
 Accordion.Heading = AccordionHeading.AccordionHeading;

package/dist/cjs/components/Alert/Alert.js

@@ -19,9 +19,14 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = React.forwardRef(({ severity = 'info', elevated, iconTitle, children, size = 'md', className, ...rest }, ref) => {
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ * @example
+ * <Alert severity='info'>Dette er en informasjonsmelding</Alert>
+ */
+const Alert = React.forwardRef(({ severity = 'info', iconTitle, children, size = 'md', className, ...rest }, ref) => {
     const { Icon, title } = icons[severity];
-    return (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('ds-alert', `ds-alert--${size}`, `ds-alert--${severity}`, elevated && `ds-alert--elevated`, className), ...rest, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon, { title: iconTitle || title, className: 'ds-alert__icon' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, className: 'ds-alert__content', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('ds-alert', `ds-alert--${size}`, `ds-alert--${severity}`, className), ...rest, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon, { title: iconTitle || title, className: 'ds-alert__icon' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, className: 'ds-alert__content', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

package/dist/cjs/components/Button/Button.js

@@ -9,6 +9,8 @@ var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
  * Button used for interaction
+ * @example
+ * <Button>Click me</Button>
  */
 const Button = React.forwardRef(({ children, variant = 'primary', color = 'accent', fullWidth = false, icon = false, type = 'button', size = 'md', asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'button';

package/dist/cjs/components/Card/Card.js

@@ -6,6 +6,15 @@ var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 
+/**
+ * Card component to present content in a structured way.
+ * @example
+ * <Card>
+ *  <Card.Header>Header</Card.Header>
+ *  <Card.Content>Content</Card.Content>
+ *  <Card.Footer>Footer</Card.Footer>
+ * </Card>
+ */
 const Card = React.forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
     return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(`ds-card`, `ds-card--${color}`, isLink && `ds-card--link`, isLink && `ds-focus`, className), ...rest }));

package/dist/cjs/components/DropdownMenu/DropdownMenuContent.js

@@ -6,9 +6,9 @@ var React = require('react');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var DropdownMenuRoot = require('./DropdownMenuRoot.js');
-var floatingUi_dom = require('../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
-var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+var useIsomorphicLayoutEffect = require('../../utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);

package/dist/cjs/components/DropdownMenu/DropdownMenuRoot.js

@@ -4,6 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
+/**
+ * DropdownMenuRoot is the root component for the DropdownMenu component.
+ * @example
+ * <DropdownMenu.Root>
+ *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
+ *  <DropdownMenu.Content>
+ *    <DropdownMenu.Group heading='Heading'>
+ *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
+ *    </DropdownMenu.Group>
+ *  </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ */
 const DropdownMenuRoot = ({ open, onClose, placement = 'bottom-end', portal, size = 'md', children, }) => {
     const triggerRef = React.useRef(null);
     const [internalOpen, setInternalOpen] = React.useState(open ?? false);

package/dist/cjs/components/DropdownMenu/index.js

@@ -7,6 +7,17 @@ var DropdownMenuItem = require('./DropdownMenuItem.js');
 var DropdownMenuTrigger = require('./DropdownMenuTrigger.js');
 var DropdownMenuContent = require('./DropdownMenuContent.js');
 
+/**
+ * @example
+ * <DropdownMenu.Root>
+ *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
+ *  <DropdownMenu.Content>
+ *    <DropdownMenu.Group heading='Heading'>
+ *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
+ *    </DropdownMenu.Group>
+ *  </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ */
 const DropdownMenu = {};
 DropdownMenu.Root = DropdownMenuRoot.DropdownMenuRoot;
 DropdownMenu.Content = DropdownMenuContent.DropdownMenuContent;

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

@@ -6,6 +6,15 @@ var ErrorSummaryHeading = require('./ErrorSummaryHeading.js');
 var ErrorSummaryItem = require('./ErrorSummaryItem.js');
 var ErrorSummaryList = require('./ErrorSummaryList.js');
 
+/**
+ * @example
+ * <ErrorSummary.Root>
+ *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *  <ErrorSummary.List>
+ *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
+ *  </ErrorSummary.List>
+ * </ErrorSummary.Root>
+ */
 const ErrorSummary = {};
 ErrorSummary.Root = ErrorSummaryRoot.ErrorSummaryRoot;
 ErrorSummary.Item = ErrorSummaryItem.ErrorSummaryItem;

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
@@ -14,7 +12,5 @@ const PaginationEllipsis = React.forwardRef(({ className, ...rest }, ref) => {
     return (jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, className: lite.clsx('ds-pagination__ellipsis', className), size: size, ...rest, children: "\u2026" }));
 });
 PaginationEllipsis.displayName = 'PaginationEllipsis';
-var PaginationEllipsis$1 = PaginationEllipsis;
 
 exports.PaginationEllipsis = PaginationEllipsis;
-exports.default = PaginationEllipsis$1;

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var React = require('react');
@@ -15,7 +13,5 @@ const PaginationItem = React.forwardRef(({ asChild, className, ...rest }, ref) =
     return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
 });
 PaginationItem.displayName = 'PaginationItem';
-var PaginationItem$1 = PaginationItem;
 
 exports.PaginationItem = PaginationItem;
-exports.default = PaginationItem$1;

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var React = require('react');
@@ -16,8 +14,6 @@ const PaginationRoot = React.forwardRef(({ asChild, compact = false, size = 'md'
     return (jsxRuntime.jsx(PaginationContext.Provider, { value: { size, compact }, children: jsxRuntime.jsx(Component, { ref: ref, "aria-label": 'Pagination', ...rest }) }));
 });
 PaginationRoot.displayName = 'PaginationRoot';
-var PaginationRoot$1 = PaginationRoot;
 
 exports.PaginationContext = PaginationContext;
 exports.PaginationRoot = PaginationRoot;
-exports.default = PaginationRoot$1;

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

@@ -10,11 +10,11 @@ var PaginationNextPrev = require('./PaginationNextPrev.js');
 var PaginationRoot = require('./PaginationRoot.js');
 
 const Pagination = Pagination$1.Pagination;
-Pagination.Root = PaginationRoot.default;
+Pagination.Root = PaginationRoot.PaginationRoot;
 Pagination.Content = PaginationContent.PaginationContent;
-Pagination.Item = PaginationItem.default;
+Pagination.Item = PaginationItem.PaginationItem;
 Pagination.Button = PaginationButton.PaginationButton;
-Pagination.Ellipsis = PaginationEllipsis.default;
+Pagination.Ellipsis = PaginationEllipsis.PaginationEllipsis;
 Pagination.Previous = PaginationNextPrev.PaginationPrevious;
 Pagination.Next = PaginationNextPrev.PaginationNext;
 Pagination.Root.displayName = 'Pagination.Root';
@@ -26,10 +26,10 @@ Pagination.Previous.displayName = 'Pagination.Previous';
 Pagination.Next.displayName = 'Pagination.Next';
 
 exports.PaginationContent = PaginationContent.PaginationContent;
-exports.PaginationEllipsis = PaginationEllipsis.default;
-exports.PaginationItem = PaginationItem.default;
+exports.PaginationEllipsis = PaginationEllipsis.PaginationEllipsis;
+exports.PaginationItem = PaginationItem.PaginationItem;
 exports.PaginationButton = PaginationButton.PaginationButton;
 exports.PaginationNext = PaginationNextPrev.PaginationNext;
 exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
-exports.PaginationRoot = PaginationRoot.default;
+exports.PaginationRoot = PaginationRoot.PaginationRoot;
 exports.Pagination = Pagination;

package/dist/cjs/components/Popover/PopoverContent.js

@@ -6,10 +6,10 @@ var React = require('react');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var PopoverRoot = require('./PopoverRoot.js');
-var floatingUi_dom = require('../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
 var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
-var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+var useIsomorphicLayoutEffect = require('../../utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 function _interopNamespaceDefault(e) {

package/dist/cjs/components/Skeleton/Circle/Circle.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of circular shape */
 const Circle = ({ width, height, className, children, style, ...rest }) => {

package/dist/cjs/components/Skeleton/Rectangle/Rectangle.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of rectangle shape */
 const Rectangle = ({ width, height, className, children, style, ...rest }) => {

package/dist/cjs/components/Skeleton/Text/Text.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of text */
 const Text = ({ width, height, className, style, children, ...rest }) => {

package/dist/cjs/components/Spinner/Spinner.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 const sizeMap = {
     '2xs': 13,

package/dist/cjs/components/Tabs/Tab.js

@@ -5,13 +5,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var useTab = require('./useTab.js');
-var RovingTabindexItem = require('../../utilities/RovingTabIndex/RovingTabindexItem.js');
+var RovingFocusItem = require('../../utilities/RovingFocus/RovingFocusItem.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
+/**
+ * A single item in a Tabs component.
+ * @example
+ * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ */
 const Tab = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { size, ...useTabRest } = useTab.useTabItem(props);
-    return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { ...rest, asChild: true, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: size, children: jsxRuntime.jsx("button", { ...useTabRest, type: 'button', className: lite.clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }) }));
+    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { ...rest, asChild: true, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: size, children: jsxRuntime.jsx("button", { ...useTabRest, type: 'button', className: lite.clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }) }));
 });
 Tab.displayName = 'Tab';
 

package/dist/cjs/components/Tabs/TabContent.js

@@ -7,6 +7,13 @@ var lite = require('../../node_modules/clsx/dist/lite.js');
 var TabsRoot = require('./TabsRoot.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
+/**
+ * A single content item in a Tabs component.
+ * @example
+ * ```tsx
+ * <Tabs.Content value='1'>content 1</Tabs.Content>
+ * ```
+ */
 const TabContent = React.forwardRef(({ children, value, className, ...rest }, ref) => {
     const { value: tabsValue, size } = React.useContext(TabsRoot.TabsContext);
     const active = value == tabsValue;

package/dist/cjs/components/Tabs/TabList.js

@@ -4,10 +4,22 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
-var RovingTabindexRoot = require('../../utilities/RovingTabIndex/RovingTabindexRoot.js');
+var TabsRoot = require('./TabsRoot.js');
+var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
 
+/**
+ * The container for all `Tab` components.
+ * @example
+ * ```tsx
+ * <Tabs.List>
+ *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ * </Tabs.List>
+ * ```
+ */
 const TabList = React.forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsxRuntime.jsx(RovingTabindexRoot.RovingTabindexRoot, { role: 'tablist', className: lite.clsx('ds-tabs__tablist', className), ref: ref, ...rest, children: children }));
+    const { value } = React.useContext(TabsRoot.TabsContext);
+    return (jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, className: lite.clsx('ds-tabs__tablist', className), ref: ref, ...rest, children: children }));
 });
 TabList.displayName = 'TabList';
 

package/dist/cjs/components/Tabs/TabsRoot.js

@@ -6,6 +6,22 @@ var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 
 const TabsContext = React.createContext({});
+/**
+ * Display a group of tabs that can be toggled between.
+ * @example
+ * ```tsx
+ * <Tabs.Root 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>
+ * ```
+ */
 const TabsRoot = React.forwardRef(({ size = 'md', children, value, defaultValue, className, onChange, ...rest }, ref) => {
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
@@ -22,7 +38,7 @@ const TabsRoot = React.forwardRef(({ size = 'md', children, value, defaultValue,
             defaultValue,
             onChange: onValueChange,
             size,
-        }, children: jsxRuntime.jsx("div", { className: lite.clsx(`ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
+        }, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-tabs', `ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
 });
 TabsRoot.displayName = 'TabsRoot';
 

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

@@ -6,6 +6,22 @@ var Tab = require('./Tab.js');
 var TabList = require('./TabList.js');
 var TabContent = require('./TabContent.js');
 
+/**
+ * Display a group of tabs that can be toggled between.
+ * @example
+ * ```tsx
+ * <Tabs.Root 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>
+ * ```
+ */
 const Tabs = {};
 Tabs.Root = TabsRoot.TabsRoot;
 Tabs.Tab = Tab.Tab;

package/dist/cjs/components/Tag/Tag.js

@@ -6,6 +6,11 @@ var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
+/**
+ * Use `Tag` to display a small piece of information.
+ * @example
+ * <Tag color='success'>Success</Tag>
+ */
 const Tag = React.forwardRef(({ size = 'md', color = 'neutral', children, className, ...rest }, ref) => {
     return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("span", { className: lite.clsx('ds-tag', `ds-tag--${color}`, `ds-tag--${size}`, className), ref: ref, ...rest, children: children }) }));
 });

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

@@ -5,13 +5,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var useToggleGroupitem = require('./useToggleGroupitem.js');
-var RovingTabindexItem = require('../../../utilities/RovingTabIndex/RovingTabindexItem.js');
+var RovingFocusItem = require('../../../utilities/RovingFocus/RovingFocusItem.js');
 var Button = require('../../Button/Button.js');
 
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ */
 const ToggleGroupItem = React.forwardRef((props, ref) => {
     const { children, icon, className, ...rest } = props;
-    const { active, size = 'md', buttonProps } = useToggleGroupitem.useToggleGroupItem(props);
-    return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { asChild: true, value: rest.value, children: jsxRuntime.jsx(Button.Button, { className: lite.clsx('ds-togglegroup__item', className), icon: icon, variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
+    const { active, size = 'md', buttonProps, value } = useToggleGroupitem.useToggleGroupItem(props);
+    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(Button.Button, { className: lite.clsx('ds-togglegroup__item', className), icon: icon, variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
 });
 ToggleGroupItem.displayName = 'ToggleGroupItem';
 

package/dist/cjs/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.js

@@ -4,17 +4,19 @@
 var React = require('react');
 var ToggleGroupRoot = require('../ToggleGroupRoot.js');
 
-/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingTabIndex` */
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
 const useToggleGroupItem = (props) => {
     const { ...rest } = props;
+    const genValue = React.useId();
     const toggleGroup = React.useContext(ToggleGroupRoot.ToggleGroupContext);
-    const itemValue = props.value ?? (typeof props.children === 'string' ? props.children : '');
-    const active = toggleGroup.value == itemValue;
+    const value = props.value ?? genValue;
+    const active = toggleGroup.value == value;
     const buttonId = `togglegroup-item-${React.useId()}`;
     return {
         ...rest,
         active: active,
         size: toggleGroup?.size,
+        value,
         buttonProps: {
             id: buttonId,
             'aria-checked': active,
@@ -22,7 +24,7 @@ const useToggleGroupItem = (props) => {
             role: 'radio',
             name: toggleGroup.name,
             onClick: () => {
-                toggleGroup.onChange?.(itemValue);
+                toggleGroup.onChange?.(value);
             },
         },
     };

package/dist/cjs/components/ToggleGroup/ToggleGroupRoot.js

@@ -4,18 +4,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
-var RovingTabindexRoot = require('../../utilities/RovingTabIndex/RovingTabindexRoot.js');
+var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
 
 const ToggleGroupContext = React.createContext({});
-/** `ToggleGroup` component.
+/**
+ * Display a group of buttons that can be toggled between.
  * @example
- * ```tsx
  * <ToggleGroup.Root 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>
- * ```
  */
 const ToggleGroupRoot = React.forwardRef(({ size = 'md', children, value, defaultValue, onChange, name, className, ...rest }, ref) => {
     const nameId = React.useId();
@@ -35,7 +34,7 @@ const ToggleGroupRoot = React.forwardRef(({ size = 'md', children, value, defaul
                 name: name ?? `togglegroup-name-${nameId}`,
                 onChange: onValueChange,
                 size,
-            }, children: [name && (jsxRuntime.jsx("input", { className: 'ds-togglegroup__input', name: name, value: value })), jsxRuntime.jsx(RovingTabindexRoot.RovingTabindexRoot, { asChild: true, valueId: value, children: jsxRuntime.jsx("div", { className: 'ds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
+            }, children: [name && (jsxRuntime.jsx("input", { className: 'ds-togglegroup__input', name: name, value: value })), jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: value, children: jsxRuntime.jsx("div", { className: 'ds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
 });
 ToggleGroupRoot.displayName = 'ToggleGroupRoot';
 

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

@@ -4,6 +4,17 @@
 var ToggleGroupRoot = require('./ToggleGroupRoot.js');
 var ToggleGroupItem = require('./ToggleGroupItem/ToggleGroupItem.js');
 
+/**
+ * Display a group of buttons that can be toggled between.
+ * @example
+ * ```tsx
+ * <ToggleGroup.Root 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>
+ * ```
+ */
 const ToggleGroup = {};
 ToggleGroup.Root = ToggleGroupRoot.ToggleGroupRoot;
 ToggleGroup.Item = ToggleGroupItem.ToggleGroupItem;

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var floatingUi_dom = require('../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
 var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
@@ -31,6 +31,13 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const ARROW_HEIGHT = 7;
 const ARROW_GAP = 4;
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ */
 const Tooltip = React.forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) => {
     const [isOpen, setIsOpen] = React.useState(defaultOpen);
     const Container = portal ? floatingUi_react.FloatingPortal : React__namespace.Fragment;

package/dist/cjs/components/Typography/Heading/Heading.js

@@ -6,7 +6,12 @@ var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
 
-/** Use `Heading` to render h1-6 elements with heading text styles.  */
+/**
+ * Use `Heading` to render h1-6 elements with heading text styles.
+ *
+ * @example
+ * <Heading size='lg' level={2}>Heading</Heading>
+ */
 const Heading = React.forwardRef(({ size = 'xl', level = 1, spacing = false, className, asChild, ...rest }, ref) => {
     const Component = asChild ? index.Slot : `h${level ?? 1}`;
     return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-heading', `ds-heading--${size}`, spacing && 'ds-heading--spacing', className), ...rest }));

package/dist/cjs/components/Typography/Ingress/Ingress.js

@@ -6,7 +6,12 @@ var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
 
-/** Use `Ingress` to display text as ingress. */
+/**
+ * Use `Ingress` to display text as ingress.
+ *
+ * @example
+ * <Ingress size='lg'>Ingress</Ingress>
+ */
 const Ingress = React.forwardRef(({ size = 'md', className, spacing, asChild, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'p';
     return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(`ds-ingress`, `ds-ingress--${size}`, spacing && 'ds-ingress--spacing', className), ...rest }));