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

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

@@ -1,14 +1,11 @@
 '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 { forwardRef, useContext } from 'react';
-import { PaginationContext } from './PaginationRoot.js';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
 
-const PaginationList = forwardRef(function PaginationList({ asChild, className, ...rest }, ref) {
-    const { size } = useContext(PaginationContext);
+const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'ul';
-    return (jsx(Component, { className: clsx('ds-pagination', className), "data-size": size, ref: ref, ...rest }));
+    return jsx(Component, { ref: ref, ...rest });
 });
 
 export { PaginationList };

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

@@ -1,26 +1,16 @@
 'use client';
 import { Pagination as Pagination$1 } from './Pagination.js';
 import { PaginationButton } from './PaginationButton.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.List = PaginationList;
-Pagination.Item = PaginationItem;
-Pagination.Button = PaginationButton;
-Pagination.Ellipsis = PaginationEllipsis;
-Pagination.Previous = PaginationPrevious;
-Pagination.Next = PaginationNext;
-Pagination.Root.displayName = 'Pagination.Root';
+const Pagination = Object.assign(Pagination$1, {
+    List: PaginationList,
+    Item: PaginationItem,
+    Button: PaginationButton,
+});
 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, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPrevious, PaginationRoot };
+export { Pagination, PaginationButton, PaginationItem, PaginationList };

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

@@ -1,63 +1,58 @@
 'use client';
-import { useState, useEffect } from 'react';
+import { useMemo } from 'react';
 
-const getSteps = ({ compact, currentPage, totalPages, }) => {
-    /**  Number of always visible pages at the start and end. */
-    const boundaryCount = 1;
-    /** Number of always visible pages before and after the current page. */
-    const siblingCount = compact ? 0 : 1;
-    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    if (totalPages <= (boundaryCount + siblingCount) * 2 + 3)
-        return range(1, totalPages);
-    const startPages = range(1, boundaryCount);
-    const endPages = range(totalPages - boundaryCount + 1, totalPages);
-    const siblingsStart = Math.max(Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
-    const siblingsEnd = siblingsStart + siblingCount * 2;
-    return [
-        ...startPages,
-        siblingsStart - (startPages[startPages.length - 1] ?? 0) === 2
-            ? siblingsStart - 1
-            : 'ellipsis',
-        ...range(siblingsStart, siblingsEnd),
-        (endPages[0] ?? totalPages + 1) - siblingsEnd === 2
-            ? siblingsEnd + 1
-            : 'ellipsis',
-        ...endPages,
-    ];
+const getSteps = (now, max, show) => {
+    const offset = (show - 1) / 2;
+    const start = Math.min(Math.max(now - Math.floor(offset), 1), max - show + 1);
+    const end = Math.min(Math.max(now + Math.ceil(offset), show), max);
+    const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
+    if (show > 4 && start > 1)
+        pages.splice(0, 2, 1, 0);
+    if (show > 3 && end < max)
+        pages.splice(-2, 2, 0, max);
+    return pages;
 };
 /** Hook to help manage pagination state */
-const usePagination = ({ totalPages, currentPage: currentPageProps = 1, compact, }) => {
-    const [currentPage, setCurrentPage] = useState(currentPageProps);
-    useEffect(() => {
-        setCurrentPage(currentPageProps);
-    }, [currentPageProps]);
-    const pages = getSteps({ currentPage, totalPages, compact });
-    const showNextPage = currentPage < totalPages;
-    const showPreviousPage = currentPage !== 1;
-    const nextPage = () => {
-        setCurrentPage(currentPage + 1 <= totalPages ? currentPage + 1 : totalPages);
-    };
-    const previousPage = () => {
-        setCurrentPage(currentPage - 1 > 0 ? currentPage - 1 : 1);
+const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages, showPages = 7, }) => useMemo(() => {
+    const hasNext = currentPage < totalPages;
+    const hasPrev = currentPage !== 1;
+    const handleClick = (page) => (event) => {
+        if (page < 1 || page > totalPages)
+            return event.preventDefault(); // Prevent out of bounds navigation
+        onChange?.(event, page);
+        if (!event.defaultPrevented)
+            setCurrentPage?.(page); // Allow stopping change by calling event.preventDefault() in onChange
     };
     return {
         /** Number of steps */
-        pages,
-        /** Current active page  */
-        currentPage,
-        /** Set active page */
-        setCurrentPage,
-        /** Decrements active page by 1 */
-        previousPage,
-        /** Increments active page by 1 */
-        nextPage,
-        /** Total amount of pages */
-        totalPages,
-        /** Indication if next page action should be shown or not */
-        showNextPage,
+        pages: getSteps(currentPage, totalPages, showPages).map((page, index) => ({
+            page: page || '',
+            itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
+            buttonProps: {
+                'aria-current': page === currentPage ? 'page' : undefined,
+                'aria-hidden': !page || undefined, // Hide ellipsis from screen reader
+                onClick: handleClick(page),
+                tabIndex: page ? undefined : -1, // Hide ellipsis keyboard
+                variant: page === currentPage ? 'primary' : 'tertiary',
+            },
+        })),
+        /** Properties to spread on Pagination.Button used for previous naviagation */
+        prevButtonProps: {
+            'aria-disabled': !hasPrev, // Using aria-disabled to support all HTML elements because of potential asChild
+            onClick: handleClick(currentPage - 1),
+            variant: 'tertiary',
+        },
+        /** Properties to spread on Pagination.Button used for next naviagation */
+        nextButtonProps: {
+            'aria-disabled': !hasNext, // Using aria-disabled to support all HTML elements because of potential asChild
+            onClick: handleClick(currentPage + 1),
+            variant: 'tertiary',
+        },
         /** Indication if previous page action should be shown or not */
-        showPreviousPage,
+        hasPrev,
+        /** Indication if next page action should be shown or not */
+        hasNext,
     };
-};
+}, [currentPage, totalPages, showPages]);
 
 export { usePagination };

package/dist/esm/components/Paragraph/Paragraph.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Paragraph` to display text with paragraph text styles.
+ *
+ * @example
+ * <Paragraph size='lg'>Paragraph</Paragraph>
+ */
+const Paragraph = forwardRef(function Paragraph({ className, size = 'md', asChild, variant = 'default', ...rest }, ref) {
+    const Component = asChild ? Slot : 'p';
+    return (jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-size": size, "data-variant": variant, ...rest }));
+});
+
+export { Paragraph };

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

@@ -1,15 +1,16 @@
 '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,9 +73,9 @@ 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, 
-            // @ts-ignore @types/react-dom does not understand popover yet
-            popover: 'manual', ref: mergedRefs, ...rest }) }));
+    return (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',

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,10 +1,10 @@
 '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';
 
-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 }) }));
-};
-SkipLink.displayName = 'SkipLink';
+const SkipLink = forwardRef(function SkipLink({ children, className, ...rest }, ref) {
+    return (jsx("a", { className: cl('ds-skiplink', className), ...rest, ref: ref, children: children }));
+});
 
 export { SkipLink };

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

@@ -1,11 +1,10 @@
 '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("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,20 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useContext } from 'react';
+import { Context } from './Tabs.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("div", { className: cl('ds-tabs__panel', className), ref: ref, ...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 cl from 'clsx/lite';
+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({ className, value, ...rest }, ref) {
+    const tabs = useContext(Context);
+    const buttonId = `tab-${useId()}`;
+    return (jsx(RovingFocusItem, { value: value, ...rest, asChild: true, 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,8 +1,7 @@
 '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';
 
 /**
  * Use `Tag` to display a small piece of information.
@@ -10,7 +9,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("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 };

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) => {

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,11 +1,8 @@
 'use client';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
-import { useFloating, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingArrow, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingArrow, FloatingPortal } from '@floating-ui/react';
+import cl from 'clsx/lite';
 import { forwardRef, useState, useRef, Fragment, cloneElement } from 'react';
-import { autoUpdate } from '../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset, flip, shift, arrow } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const ARROW_HEIGHT = 7;
 const ARROW_GAP = 4;
@@ -63,11 +60,11 @@ const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150,
     }
     return (jsxs(Fragment$1, { children: [cloneElement(children, getReferenceProps({
                 ref: childMergedRef,
-            })), internalOpen && (jsx(Container, { children: jsx(Paragraph, { size: 'xs', asChild: true, children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                            className: clsx('ds-tooltip', className),
-                            ref: mergedRef,
-                            ...rest,
-                        }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'ds-tooltip__arrow', height: ARROW_HEIGHT })] }) }) }))] }));
+            })), internalOpen && (jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
+                        className: cl('ds-tooltip', className),
+                        ref: mergedRef,
+                        ...rest,
+                    }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'ds-tooltip__arrow', height: ARROW_HEIGHT })] }) }))] }));
 });
 Tooltip.displayName = 'Tooltip';
 

package/dist/esm/components/ValidationMessage/ValidationMessage.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/** Use `ValidationMessage` to display validation text */
+const ValidationMessage = forwardRef(function ValidationMessage({ size = 'md', className, asChild, error = true, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    return (jsx(Component, { className: cl(`ds-validation-message--${size}`, className), "data-error": error || undefined, ref: ref, ...rest }));
+});
+
+export { ValidationMessage };

package/dist/esm/components/form/CharacterCounter.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ErrorMessage } from '../Typography/ErrorMessage/ErrorMessage.js';
+import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
 
 const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
 const defaultSrLabel = (maxCount) => `Tekstfelt med plass til ${maxCount} tegn`;
@@ -8,7 +8,7 @@ const CharacterCounter = ({ label = defaultLabel, srLabel: propsSrLabel, maxCoun
     const currentCount = maxCount - value.length;
     const hasExceededLimit = value.length > maxCount;
     const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
-    return (jsxs(Fragment, { children: [jsx("span", { className: `ds-sr-only`, id: id, children: srLabel }), jsx(ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
+    return (jsxs(Fragment, { children: [jsx("span", { className: `ds-sr-only`, id: id, children: srLabel }), jsx(ValidationMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
 };
 CharacterCounter.displayName = 'CharacterCounter';