@uppsala-designsystem/ui 1.5.0

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

@@ -0,0 +1,31 @@
+'use client';
+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
+ * <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.Panel.displayName = 'Tabs.Panel';
+
+export { Tabs, TabsList, TabsPanel, TabsTab };

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

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * 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 });
+});
+
+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/Timeline/Timeline.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Timeline component for displaying a process or sequence of steps.
+ *
+ * @example
+ * <Timeline>
+ *   <Timeline.Item>
+ *     <Details>
+ *       <Details.Summary>Step 1</Details.Summary>
+ *       <Details.Content>Content</Details.Content>
+ *     </Details>
+ *   </Timeline.Item>
+ * </Timeline>
+ */
+const Timeline = forwardRef(function Timeline({ className, ...rest }, ref) {
+    return (jsx("ol", { className: cl('ds-timeline', className), ref: ref, ...rest }));
+});
+
+export { Timeline };

package/dist/esm/components/Timeline/TimelineItem.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Timeline item/chapter component, represents a single step in the timeline.
+ *
+ * @example
+ * <Timeline.Item>
+ *   <Details>
+ *     <Details.Summary>Step heading</Details.Summary>
+ *     <Details.Content>Step content</Details.Content>
+ *   </Details>
+ * </Timeline.Item>
+ */
+const TimelineItem = forwardRef(function TimelineItem({ className, ...rest }, ref) {
+    return (jsx("li", { className: cl('ds-timeline__item', className), ref: ref, ...rest }));
+});
+
+export { TimelineItem };

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

@@ -0,0 +1,24 @@
+'use client';
+import { Timeline as Timeline$1 } from './Timeline.js';
+import { TimelineItem } from './TimelineItem.js';
+
+/**
+ * Timeline component for displaying a process or sequence of steps.
+ * Compose with `Details` for expandable chapters.
+ *
+ * @example
+ * <Timeline>
+ *   <Timeline.Item>
+ *     <Details>
+ *       <Details.Summary>Step 1</Details.Summary>
+ *       <Details.Content>Content here</Details.Content>
+ *     </Details>
+ *   </Timeline.Item>
+ * </Timeline>
+ */
+const Timeline = Object.assign(Timeline$1, {
+    Item: TimelineItem,
+});
+Timeline.Item.displayName = 'Timeline.Item';
+
+export { Timeline, TimelineItem };

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

@@ -0,0 +1,126 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useState, useRef, useCallback, useEffect, createContext } 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({ children, value, defaultValue, onChange, name, animated = true, className, ...rest }, ref) {
+    const nameId = useId();
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const containerRef = useRef(null);
+    const indicatorRef = useRef(null);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+    }
+    const updateIndicator = useCallback(() => {
+        if (!animated)
+            return;
+        const container = containerRef.current;
+        const indicator = indicatorRef.current;
+        if (!container || !indicator)
+            return;
+        if (currentValue === undefined) {
+            indicator.style.display = "none";
+            return;
+        }
+        const activeButton = container.querySelector('button[aria-checked="true"]');
+        if (activeButton) {
+            // Prefer layout metrics relative to the container to avoid
+            // transform/zoom-related drift in viewport-based rect calculations.
+            let left = activeButton.offsetLeft;
+            let top = activeButton.offsetTop;
+            let width = activeButton.offsetWidth;
+            let height = activeButton.offsetHeight;
+            if (width === 0 || height === 0) {
+                const containerRect = container.getBoundingClientRect();
+                const buttonRect = activeButton.getBoundingClientRect();
+                left = buttonRect.left - containerRect.left;
+                top = buttonRect.top - containerRect.top;
+                width = buttonRect.width;
+                height = buttonRect.height;
+            }
+            const safeLeft = Math.max(0, left);
+            const safeTop = Math.max(0, top);
+            const containerWidth = container.clientWidth || container.offsetWidth;
+            const containerHeight = container.clientHeight || container.offsetHeight;
+            const hasContainerMetrics = containerWidth > 0 && containerHeight > 0;
+            const maxWidth = hasContainerMetrics
+                ? Math.max(0, containerWidth - safeLeft)
+                : Number.POSITIVE_INFINITY;
+            const maxHeight = hasContainerMetrics
+                ? Math.max(0, containerHeight - safeTop)
+                : Number.POSITIVE_INFINITY;
+            const safeWidth = Math.max(0, Math.min(width, maxWidth));
+            const safeHeight = Math.max(0, Math.min(height, maxHeight));
+            if (safeWidth === 0 || safeHeight === 0) {
+                indicator.style.display = "none";
+                return;
+            }
+            indicator.style.left = `${safeLeft}px`;
+            indicator.style.top = `${safeTop}px`;
+            indicator.style.width = `${safeWidth}px`;
+            indicator.style.height = `${safeHeight}px`;
+            indicator.style.display = "block";
+        }
+        else {
+            indicator.style.display = "none";
+        }
+    }, [animated, currentValue]);
+    useEffect(() => {
+        if (!animated)
+            return;
+        updateIndicator();
+    }, [animated, updateIndicator]);
+    useEffect(() => {
+        if (!animated)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const observer = new ResizeObserver(() => {
+            updateIndicator();
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [animated, updateIndicator]);
+    useEffect(() => {
+        if (!animated || typeof window === "undefined")
+            return;
+        const handleWindowResize = () => {
+            updateIndicator();
+        };
+        window.addEventListener("resize", handleWindowResize);
+        return () => window.removeEventListener("resize", handleWindowResize);
+    }, [animated, updateIndicator]);
+    return (jsx(ToggleGroupContext.Provider, { value: {
+            value: currentValue,
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+        }, children: jsx(RovingFocusRoot, { asChild: true, activeValue: currentValue, orientation: "ambiguous", children: jsxs("div", { className: cl("ds-togglegroup", className), role: "radiogroup", ref: (node) => {
+                    containerRef.current = node;
+                    if (typeof ref === "function")
+                        ref(node);
+                    else if (ref)
+                        ref.current = node;
+                }, ...rest, children: [animated && (jsx("div", { ref: indicatorRef, className: "ds-togglegroup__indicator", "aria-hidden": "true", style: { display: "none" } })), name && jsx("input", { type: "hidden", name: name, value: currentValue }), 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, 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

@@ -0,0 +1,20 @@
+'use client';
+import { ToggleGroup as ToggleGroup$1 } from './ToggleGroup.js';
+import { ToggleGroupItem } from './ToggleGroupItem.js';
+
+/**
+ * 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

@@ -0,0 +1,120 @@
+'use client';
+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';
+
+/**
+ * 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;
+    }
+    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 })] }));
+});
+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 };

package/dist/esm/index.js

@@ -0,0 +1,112 @@
+'use client';
+export { Alert } from './components/Alert/Alert.js';
+export { Avatar } from './components/Avatar/Avatar.js';
+export { Badge } from './components/Badge/index.js';
+export { BadgePosition } from './components/Badge/BadgePosition.js';
+export { Breadcrumbs } from './components/Breadcrumbs/index.js';
+export { BreadcrumbsList } from './components/Breadcrumbs/BreadcrumbsList.js';
+export { BreadcrumbsItem } from './components/Breadcrumbs/BreadcrumbsItem.js';
+export { BreadcrumbsLink } from './components/Breadcrumbs/BreadcrumbsLink.js';
+export { Button } from './components/Button/Button.js';
+export { Card } from './components/Card/index.js';
+export { CardBlock } from './components/Card/CardBlock.js';
+export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { Chip } from './components/Chip/index.js';
+export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/Chip/Chips.js';
+export { Details } from './components/Details/index.js';
+export { DetailsContent } from './components/Details/DetailsContent.js';
+export { DetailsSummary } from './components/Details/DetailsSummary.js';
+export { Dialog } from './components/Dialog/index.js';
+export { DialogBlock } from './components/Dialog/DialogBlock.js';
+export { DialogTriggerContext } from './components/Dialog/DialogTriggerContext.js';
+export { DialogTrigger } from './components/Dialog/DialogTrigger.js';
+export { Divider } from './components/Divider/Divider.js';
+export { Dropdown } from './components/Dropdown/index.js';
+export { DropdownTriggerContext } from './components/Dropdown/DropdownTriggerContext.js';
+export { DropdownList } from './components/Dropdown/DropdownList.js';
+export { DropdownHeading } from './components/Dropdown/DropdownHeading.js';
+export { DropdownItem } from './components/Dropdown/DropdownItem.js';
+export { DropdownButton } from './components/Dropdown/DropdownButton.js';
+export { DropdownTrigger } from './components/Dropdown/DropdownTrigger.js';
+export { ErrorSummary } from './components/ErrorSummary/index.js';
+export { ErrorSummaryItem } from './components/ErrorSummary/ErrorSummaryItem.js';
+export { ErrorSummaryHeading } from './components/ErrorSummary/ErrorSummaryHeading.js';
+export { ErrorSummaryList } from './components/ErrorSummary/ErrorSummaryList.js';
+export { ErrorSummaryLink } from './components/ErrorSummary/ErrorSummaryLink.js';
+export { Field } from './components/Field/index.js';
+export { FieldDescription } from './components/Field/FieldDescription.js';
+export { FieldAffix, FieldAffixes } from './components/Field/FieldAffix.js';
+export { FieldCounter } from './components/Field/FieldCounter.js';
+export { Fieldset } from './components/Fieldset/index.js';
+export { FieldsetLegend } from './components/Fieldset/FieldsetLegend.js';
+export { FieldsetDescription } from './components/Fieldset/FieldsetDescription.js';
+export { Heading } from './components/Heading/Heading.js';
+export { InfoCard } from './components/InfoCard/InfoCard.js';
+export { Input } from './components/Input/Input.js';
+export { Label } from './components/Label/Label.js';
+export { Link } from './components/Link/Link.js';
+export { List } from './components/List/index.js';
+export { ListOrdered, ListUnordered } from './components/List/Lists.js';
+export { ListItem } from './components/List/ListItem.js';
+export { Pagination } from './components/Pagination/index.js';
+export { PaginationList } from './components/Pagination/PaginationList.js';
+export { PaginationItem } from './components/Pagination/PaginationItem.js';
+export { PaginationButton } from './components/Pagination/PaginationButton.js';
+export { Paragraph } from './components/Paragraph/Paragraph.js';
+export { Popover } from './components/Popover/index.js';
+export { PopoverTriggerContext } from './components/Popover/PopoverTriggerContext.js';
+export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
+export { Radio } from './components/Radio/Radio.js';
+export { SearchClear } from './components/Search/SearchClear.js';
+export { SearchButton } from './components/Search/SearchButton.js';
+export { SearchInput } from './components/Search/SearchInput.js';
+export { Search } from './components/Search/index.js';
+export { Select } from './components/Select/index.js';
+export { SelectOption } from './components/Select/SelectOption.js';
+export { SelectOptgroup } from './components/Select/SelectOptgroup.js';
+export { Skeleton } from './components/Skeleton/Skeleton.js';
+export { SkipLink } from './components/SkipLink/SkipLink.js';
+export { Spinner } from './components/Spinner/Spinner.js';
+export { EXPERIMENTAL_Suggestion, Suggestion } from './components/Suggestion/index.js';
+export { SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionList } from './components/Suggestion/SuggestionList.js';
+export { SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionInput } from './components/Suggestion/SuggestionInput.js';
+export { SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionEmpty } from './components/Suggestion/SuggestionEmpty.js';
+export { SuggestionOption as EXPERIMENTAL_SuggestionOption, SuggestionOption } from './components/Suggestion/SuggestionOption.js';
+export { SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionClear } from './components/Suggestion/SuggestionClear.js';
+export { SuggestionChips as EXPERIMENTAL_SuggestionChips, SuggestionChips } from './components/Suggestion/SuggestionChips.js';
+export { Switch } from './components/Switch/Switch.js';
+export { Table } from './components/Table/index.js';
+export { TableHead } from './components/Table/TableHead.js';
+export { TableBody } from './components/Table/TableBody.js';
+export { TableRow } from './components/Table/TableRow.js';
+export { TableCell } from './components/Table/TableCell.js';
+export { TableHeaderCell } from './components/Table/TableHeaderCell.js';
+export { TableFoot } from './components/Table/TableFoot.js';
+export { Tabs } from './components/Tabs/index.js';
+export { TabsTab } from './components/Tabs/TabsTab.js';
+export { TabsList } from './components/Tabs/TabsList.js';
+export { TabsPanel } from './components/Tabs/TabsPanel.js';
+export { Tag } from './components/Tag/Tag.js';
+export { Textarea } from './components/Textarea/Textarea.js';
+export { Textfield } from './components/Textfield/Textfield.js';
+export { Timeline } from './components/Timeline/index.js';
+export { TimelineItem } from './components/Timeline/TimelineItem.js';
+export { ToggleGroup } from './components/ToggleGroup/index.js';
+export { ToggleGroupItem } from './components/ToggleGroup/ToggleGroupItem.js';
+export { Tooltip } from './components/Tooltip/Tooltip.js';
+export { ValidationMessage } from './components/ValidationMessage/ValidationMessage.js';
+export { Container } from './layouts/Container/Container.js';
+export { GridCol } from './layouts/Grid/GridCol.js';
+export { GridRow } from './layouts/Grid/GridRow.js';
+export { omit } from './utilities/omit/omit.js';
+export { useCheckboxGroup } from './utilities/hooks/useCheckboxGroup/useCheckboxGroup.js';
+export { useDebounceCallback } from './utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+export { useIsomorphicLayoutEffect } from './utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export { useMediaQuery } from './utilities/hooks/useMediaQuery/useMediaQuery.js';
+export { useMergeRefs } from './utilities/hooks/useMergeRefs/useMergeRefs.js';
+export { usePagination } from './utilities/hooks/usePagination/usePagination.js';
+export { useRadioGroup } from './utilities/hooks/useRadioGroup/useRadioGroup.js';
+export { useSynchronizedAnimation } from './utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+export { RovingFocusRoot } from './utilities/RovingFocus/RovingFocusRoot.js';
+export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
+export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';

package/dist/esm/layouts/Container/Container.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Container` to position the content.
+ * Renders a native `div` element.
+ *
+ * @example
+ * <Container>Content</Container>
+ */
+const Container = forwardRef(function Container({ className, ...rest }, ref) {
+    return (jsx("div", { ref: ref, className: cl(`ds-container`, className), ...rest }));
+});
+
+export { Container };

package/dist/esm/layouts/Grid/GridCol.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const GridCol = forwardRef(function GridCol({ xs, sm, md, lg, xl, xxl, className, ...rest }, ref) {
+    return (jsx("div", { ref: ref, className: cl(`${xs ? `ds-col-${xs}` : "ds-col-12"}`, sm && `ds-col-sm-${sm}`, md && `ds-col-md-${md}`, lg && `ds-col-lg-${lg}`, xl && `ds-col-xl-${xl}`, xxl && `ds-col-xxl-${xxl}`, className), ...rest }));
+});
+
+export { GridCol };

package/dist/esm/layouts/Grid/GridRow.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const GridRow = forwardRef(function GridRow({ className, ...rest }, ref) {
+    return (jsx("div", { ref: ref, className: cl("ds-grid-row", className), ...rest }));
+});
+
+export { GridRow };