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

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

@@ -1,22 +1,51 @@
 'use client';
 import { Table as Table$1 } from './Table.js';
-import { TableHead } from './TableHead.js';
 import { TableBody } from './TableBody.js';
-import { TableRow } from './TableRow.js';
 import { TableCell } from './TableCell.js';
+import { TableFoot } from './TableFoot.js';
+import { TableHead } from './TableHead.js';
 import { TableHeaderCell } from './TableHeaderCell.js';
+import { TableRow } from './TableRow.js';
 
-const Table = Table$1;
-Table.Head = TableHead;
-Table.Body = TableBody;
-Table.Row = TableRow;
-Table.Cell = TableCell;
-Table.HeaderCell = TableHeaderCell;
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
+const Table = Object.assign(Table$1, {
+    Head: TableHead,
+    Body: TableBody,
+    Row: TableRow,
+    Cell: TableCell,
+    HeaderCell: TableHeaderCell,
+    Foot: TableFoot,
+});
 Table.displayName = 'Table';
 Table.Head.displayName = 'Table.Head';
 Table.Body.displayName = 'Table.Body';
 Table.Row.displayName = 'Table.Row';
 Table.Cell.displayName = 'Table.Cell';
 Table.HeaderCell.displayName = 'Table.HeaderCell';
+Table.Foot.displayName = 'Table.Foot';
 
-export { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow };
+export { Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };

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

@@ -1,10 +1,25 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, forwardRef, useState } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
+import { forwardRef, createContext, useState } from 'react';
 
-const TabsContext = createContext({});
-const Tabs = forwardRef(({ size = 'md', children, value, defaultValue, className, onChange, ...rest }, ref) => {
+const Context = createContext({});
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
     let onValueChange = onChange;
@@ -15,13 +30,11 @@ const Tabs = forwardRef(({ size = 'md', children, value, defaultValue, className
         };
         value = uncontrolledValue;
     }
-    return (jsx(TabsContext.Provider, { value: {
+    return (jsx(Context.Provider, { value: {
             value,
             defaultValue,
             onChange: onValueChange,
-            size,
-        }, children: jsx("div", { className: clsx(`ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
+        }, children: jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
 });
-Tabs.displayName = 'Tabs';
 
-export { Tabs, TabsContext };
+export { Context, Tabs };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { Context } from './Tabs.js';
+import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.js';
+
+/**
+ * The container for all `Tab` components.
+ *
+ * @example
+ * <Tabs.List>
+ *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ * </Tabs.List>
+ */
+const TabsList = forwardRef(function TabsList({ children, ...rest }, ref) {
+    const { value } = useContext(Context);
+    return (jsx(RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+});
+
+export { TabsList };

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

@@ -0,0 +1,29 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useRef, useEffect } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { Context } from './Tabs.js';
+
+/**
+ * A single content item in a Tabs component.
+ *
+ * @example
+ * <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ */
+const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
+    const { value: tabsValue } = useContext(Context);
+    const active = value === tabsValue;
+    const [hasTabbableElement, setHasTabbableElement] = useState(false);
+    const internalRef = useRef(null);
+    const mergedRef = useMergeRefs([ref, internalRef]);
+    /* Check if the panel has any tabbable elements */
+    useEffect(() => {
+        if (!internalRef.current)
+            return;
+        const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        setHasTabbableElement(tabbableElements.length > 0);
+    }, [children]);
+    return (jsx(Fragment, { children: active && (jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
+});
+
+export { TabsPanel };

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

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

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

@@ -1,15 +1,31 @@
 'use client';
 import { Tabs as Tabs$1 } from './Tabs.js';
-import { Tab } from './Tab.js';
-import { TabList } from './TabList.js';
-import { TabContent } from './TabContent.js';
+import { TabsList } from './TabsList.js';
+import { TabsPanel } from './TabsPanel.js';
+import { TabsTab } from './TabsTab.js';
 
-const Tabs = Tabs$1;
-Tabs.Tab = Tab;
-Tabs.List = TabList;
-Tabs.Content = TabContent;
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = Object.assign(Tabs$1, {
+    List: TabsList,
+    Tab: TabsTab,
+    Panel: TabsPanel,
+});
 Tabs.Tab.displayName = 'Tabs.Tab';
 Tabs.List.displayName = 'Tabs.List';
-Tabs.Content.displayName = 'Tabs.Content';
+Tabs.Panel.displayName = 'Tabs.Panel';
 
-export { Tab, TabContent, TabList, Tabs };
+export { Tabs, TabsList, TabsPanel, TabsTab };

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

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

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

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

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field } from '../Field/index.js';
+import { Label } from '../Label/Label.js';
+import { FieldDescription } from '../Field/FieldDescription.js';
+import { FieldAffixes, FieldAffix } from '../Field/FieldAffix.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { Input } from '../Input/Input.js';
+import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
+
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
+ * @example
+ * <Textfield label="Textfield label">
+ */
+const Textfield = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxs(Field, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!error && jsx(ValidationMessage, { children: error }), !!counter && (jsx(Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
+});
+
+export { Textfield };

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

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

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem.js';
+import { Button } from '../Button/Button.js';
+import { useToggleGroupItem } from './useToggleGroupitem.js';
+
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ */
+const ToggleGroupItem = forwardRef(function ToggleGroupItem(rest, ref) {
+    const { active, buttonProps, value } = useToggleGroupItem(rest);
+    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+});
+
+export { ToggleGroupItem };

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

@@ -1,9 +1,20 @@
 'use client';
 import { ToggleGroup as ToggleGroup$1 } from './ToggleGroup.js';
-import { ToggleGroupItem } from './ToggleGroupItem/ToggleGroupItem.js';
+import { ToggleGroupItem } from './ToggleGroupItem.js';
 
-const ToggleGroup = ToggleGroup$1;
-ToggleGroup.Item = ToggleGroupItem;
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+const ToggleGroup = Object.assign(ToggleGroup$1, {
+    Item: ToggleGroupItem,
+});
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
 export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,30 @@
+'use client';
+import { useId, useContext } from 'react';
+import { ToggleGroupContext } from './ToggleGroup.js';
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
+const useToggleGroupItem = (props) => {
+    const { ...rest } = props;
+    const genValue = useId();
+    const toggleGroup = useContext(ToggleGroupContext);
+    const value = props.value ?? genValue;
+    const active = toggleGroup.value === value;
+    const buttonId = `togglegroup-item-${useId()}`;
+    return {
+        ...rest,
+        active: active,
+        value,
+        buttonProps: {
+            id: buttonId,
+            'aria-checked': active,
+            'aria-current': active,
+            role: 'radio',
+            name: toggleGroup.name,
+            onClick: () => {
+                toggleGroup.onChange?.(value);
+            },
+        },
+    };
+};
+
+export { useToggleGroupItem };

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

@@ -1,68 +1,120 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { forwardRef, useState, cloneElement } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { useFloating, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingArrow, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { autoUpdate, flip, shift } from '../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
-import { arrow } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useState, useRef, useEffect, Fragment, version } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
 
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
-const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) => {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-    const Container = portal ? FloatingPortal : React.Fragment;
-    const arrowRef = React.useRef(null);
-    const internalOpen = userOpen ?? isOpen;
-    const { refs, floatingStyles, context } = useFloating({
-        open: internalOpen,
-        onOpenChange: setIsOpen,
-        placement,
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(ARROW_HEIGHT + ARROW_GAP),
-            flip({
-                fallbackAxisSideDirection: 'start',
-            }),
-            shift(),
-            arrow({
-                element: arrowRef,
-            }),
-        ],
-    });
-    const { styles: animationStyles } = useTransitionStyles(context, {
-        initial: {
-            opacity: 0,
-        },
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        // Event listeners to change the open state
-        useHover(context, { move: false, delay }),
-        useFocus(context),
-        useDismiss(context),
-        useRole(context, { role: 'tooltip' }),
-    ]);
-    const mergedRef = useMergeRefs([ref, refs.setFloating]);
-    const childMergedRef = useMergeRefs([
-        children
-            .ref,
-        refs.setReference,
-    ]);
-    if (!children ||
-        children?.type === React.Fragment ||
-        children === React.Fragment) {
-        console.error('<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>');
+/**
+ * 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>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+const Tooltip = forwardRef(function Tooltip({ id, children, content, placement = 'top', open, className, ...rest }, ref) {
+    const randomTooltipId = useId();
+    const [internalOpen, setInternalOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const mergedRefs = useMergeRefs([tooltipRef, ref]);
+    const controlledOpen = open ?? internalOpen;
+    const setOpen = () => {
+        setInternalOpen(true);
+    };
+    const setClose = () => {
+        setInternalOpen(false);
+    };
+    // Position with floating-ui
+    useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const trigger = triggerRef.current;
+        tooltip?.togglePopover?.(controlledOpen);
+        if (tooltip)
+            tooltip.style.opacity = controlledOpen ? '1' : '0';
+        if (tooltip && trigger && controlledOpen) {
+            return autoUpdate(trigger, tooltip, () => {
+                computePosition(trigger, tooltip, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        flip({
+                            fallbackAxisSideDirection: 'start',
+                        }),
+                        shift(),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    tooltip.style.translate = `${x}px ${y}px`;
+                });
+            });
+        }
+    }, [controlledOpen, placement]);
+    /* Add listener for ESC to dismiss */
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setInternalOpen(false);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    /* If children is only a string, make a span */
+    const ChildContainer = typeof children === 'string' ? 'span' : Slot;
+    /* Make sure it is valid */
+    if (typeof children !== 'string' && children.type === Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps({
-                ref: childMergedRef,
-            })), internalOpen && (jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                        className: clsx('ds-tooltip', 'ds-paragraph--xs', className),
-                        ref: mergedRef,
-                        ...rest,
-                    }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'ds-tooltip__arrow', height: ARROW_HEIGHT })] }) }))] }));
+    const popoverProps = {
+        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [version.startsWith('19')
+            ? 'popoverTargetAction'
+            : 'popovertargetaction']: 'show',
+    };
+    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
+                // @ts-ignore @types/react-dom does not understand popover yet
+                popover: 'manual', ...rest, children: content })] }));
 });
-Tooltip.displayName = 'Tooltip';
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        switch (placement) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
+        return data;
+    },
+};
 
 export { Tooltip };

package/dist/esm/components/ValidationMessage/ValidationMessage.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 `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
+const ValidationMessage = forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'p';
+    return (jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, ...rest }));
+});
+
+export { ValidationMessage };