@digdir/designsystemet-react 1.1.3 → 1.1.5

package/dist/cjs/utilities/hooks/use-synchronized-animation/use-synchronized-animation.js

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var useIsomorphicLayoutEffect = require('../use-isomorphic-layout-effect/use-isomorphic-layout-effect.js');
+
+// Inspired by Sam Selikoff
+// https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+function useSynchronizedAnimation(animationName) {
+    const ref = react.useRef(null);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const animations = document
+            .getAnimations()
+            .filter((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const firstOfType = animations.find((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+        if (myAnimation && myAnimation === firstOfType) {
+            myAnimation.currentTime = 0;
+        }
+        if (myAnimation &&
+            firstOfType?.currentTime &&
+            myAnimation !== firstOfType) {
+            myAnimation.currentTime = firstOfType.currentTime;
+        }
+        return () => {
+            if (myAnimation && firstOfType?.currentTime) {
+                myAnimation.currentTime = firstOfType.currentTime;
+            }
+        };
+    }, [animationName]);
+    return ref;
+}
+
+exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/cjs/utilities/roving-focus/roving-focus-item.js

@@ -0,0 +1,72 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var useRovingFocus = require('./use-roving-focus.js');
+var useMergeRefs = require('../hooks/use-merge-refs/use-merge-refs.js');
+
+/** Get the next focusable RovingFocusItem */
+function getNextFocusableValue(items, value) {
+    const currIndex = items.findIndex((item) => item.value === value);
+    return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
+}
+/** Get the previous focusable RovingFocusItem */
+function getPrevFocusableValue(items, value) {
+    const currIndex = items.findIndex((item) => item.value === value);
+    return items.at(currIndex === 0 ? -1 : currIndex - 1);
+}
+const RovingFocusItem = react.forwardRef(({ value, asChild, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
+    const { getOrderedItems, getRovingProps, orientation } = useRovingFocus.useRovingFocus(focusValue);
+    const rovingProps = getRovingProps({
+        onKeyDown: (e) => {
+            rest?.onKeyDown?.(e);
+            const items = getOrderedItems();
+            let nextItem;
+            switch (orientation) {
+                case 'horizontal':
+                    if (e.key === 'ArrowRight') {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (e.key === 'ArrowLeft') {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
+                    break;
+                case 'vertical':
+                    if (e.key === 'ArrowDown') {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (e.key === 'ArrowUp') {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
+                    break;
+                case 'ambiguous':
+                    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
+            }
+            if (e.key === 'Home') {
+                nextItem = items[0];
+            }
+            if (e.key === 'End') {
+                nextItem = items[items.length - 1];
+            }
+            if (nextItem) {
+                e.preventDefault();
+                nextItem.element.focus();
+            }
+        },
+    });
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, rovingProps.ref]);
+    return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
+});
+
+exports.RovingFocusItem = RovingFocusItem;
+exports.getNextFocusableValue = getNextFocusableValue;
+exports.getPrevFocusableValue = getPrevFocusableValue;

package/dist/cjs/utilities/roving-focus/roving-focus-root.js

@@ -0,0 +1,72 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var useMergeRefs = require('../hooks/use-merge-refs/use-merge-refs.js');
+
+const RovingFocusContext = react.createContext({
+    elements: { current: new Map() },
+    getOrderedItems: () => [],
+    setFocusableValue: () => {
+        /* intentionally empty */
+    },
+    onShiftTab: () => {
+        /* intentionally empty */
+    },
+    focusableValue: null,
+    orientation: 'horizontal',
+});
+const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const [focusableValue, setFocusableValue] = react.useState(null);
+    const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
+    const elements = react.useRef(new Map());
+    const myRef = react.useRef(null);
+    const refs = useMergeRefs.useMergeRefs([ref, myRef]);
+    const getOrderedItems = () => {
+        if (!myRef.current)
+            return [];
+        const elementsFromDOM = Array.from(myRef.current.querySelectorAll('[data-roving-tabindex-item]'));
+        return Array.from(elements.current)
+            .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
+            .map(([value, element]) => ({ value, element }));
+    };
+    react.useEffect(() => {
+        setFocusableValue(activeValue ?? null);
+    }, [activeValue]);
+    return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {
+            elements,
+            getOrderedItems,
+            focusableValue,
+            setFocusableValue,
+            onShiftTab: () => {
+                setIsShiftTabbing(true);
+            },
+            orientation,
+        }, children: jsxRuntime.jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
+                onBlur?.(e);
+                setIsShiftTabbing(false);
+                setFocusableValue(activeValue ?? null);
+            }, onFocus: (e) => {
+                onFocus?.(e);
+                if (e.target !== e.currentTarget)
+                    return;
+                const orderedItems = getOrderedItems();
+                if (orderedItems.length === 0)
+                    return;
+                if (focusableValue != null) {
+                    elements.current.get(focusableValue)?.focus();
+                }
+                else if (activeValue != null) {
+                    elements.current.get(activeValue)?.focus();
+                }
+                else {
+                    orderedItems.at(0)?.element.focus();
+                }
+            }, ref: refs }) }));
+});
+
+exports.RovingFocusContext = RovingFocusContext;
+exports.RovingFocusRoot = RovingFocusRoot;

package/dist/cjs/utilities/roving-focus/use-roving-focus.js

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var rovingFocusRoot = require('./roving-focus-root.js');
+
+// Logic from: https://www.joshuawootonn.com/react-roving-tabindex
+// Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
+/** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+const useRovingFocus = (value) => {
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = react.useContext(rovingFocusRoot.RovingFocusContext);
+    return {
+        getOrderedItems,
+        isFocusable: focusableValue === value,
+        orientation,
+        getRovingProps: (props) => ({
+            ...props,
+            ref: (element) => {
+                if (element) {
+                    elements.current.set(value, element);
+                }
+                else {
+                    elements.current.delete(value);
+                }
+            },
+            onKeyDown: (e) => {
+                props?.onKeyDown?.(e);
+                if (e.shiftKey && e.key === 'Tab') {
+                    onShiftTab();
+                    return;
+                }
+            },
+            onFocus: (e) => {
+                props?.onFocus?.(e);
+                setFocusableValue(value);
+            },
+            'data-roving-tabindex-item': true,
+            tabIndex: focusableValue === value ? 0 : -1,
+        }),
+    };
+};
+
+exports.useRovingFocus = useRovingFocus;

package/dist/esm/components/Combobox/Combobox.js

@@ -4,6 +4,8 @@ import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useState, useEffect } from 'react';
+import { omit } from '../../utilities/omit/omit.js';
+import { Spinner } from '../spinner/spinner.js';
 import { ComboboxContext } from './ComboboxContext.js';
 import { ComboboxIdProvider } from './ComboboxIdContext.js';
 import { ComboboxCustom } from './Custom.js';
@@ -16,9 +18,7 @@ import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
 import { useFormField } from './useFormField/useFormField.js';
 import { prefix, setReactInputValue, removePrefix } from './utilities.js';
-import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
-import { Spinner } from '../Spinner/Spinner.js';
-import { omit } from '../../utilities/omit/omit.js';
+import { useDebounceCallback } from '../../utilities/hooks/use-debounce-callback/use-debounce-callback.js';
 
 /**
  * @deprecated Use `Suggestion` instead

package/dist/esm/components/Combobox/Custom.js

@@ -4,10 +4,10 @@ import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useId, useContext, useMemo } from 'react';
+import { omit } from '../../utilities/omit/omit.js';
+import { Label } from '../label/label.js';
 import { ComboboxContext } from './ComboboxContext.js';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { Label } from '../Label/Label.js';
-import { omit } from '../../utilities/omit/omit.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {

package/dist/esm/components/Combobox/Empty.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
+import { Label } from '../label/label.js';
 import { ComboboxContext } from './ComboboxContext.js';
-import { Label } from '../Label/Label.js';
 
 const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(ComboboxContext);

package/dist/esm/components/Combobox/Option/Option.js

@@ -3,11 +3,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { memo, forwardRef, useId, useContext, isValidElement } from 'react';
 import { omit } from '../../../utilities/omit/omit.js';
+import { Label } from '../../label/label.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import ComboboxOptionDescription from './Description.js';
 import { SelectedIcon } from './SelectedIcon.js';
 import { useComboboxOption } from './useComboboxOption.js';
-import { Label } from '../../Label/Label.js';
 
 const ComboboxOption = memo(forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = useId();
@@ -22,9 +22,7 @@ const ComboboxOption = memo(forwardRef(({ value, description, children, classNam
     }
     const { size, multiple, getItemProps } = context;
     const props = getItemProps();
-    return (jsx(Label, { "data-size": 'md', asChild: true, children: jsxs("button", { ref: ref, id: id, 
-            // biome-ignore lint/a11y/useSemanticElements: biome wants me to use the <option> element
-            role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+    return (jsx(Label, { "data-size": 'md', asChild: true, children: jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
                 onOptionClick();
                 rest.onClick?.(e);
             }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, "data-size": size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }) }));

package/dist/esm/components/Combobox/Option/useComboboxOption.js

@@ -1,7 +1,7 @@
 'use client';
 import { useMergeRefs } from '@floating-ui/react';
 import { useId, useContext, useMemo, useEffect } from 'react';
-import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { useDebounceCallback } from '../../../utilities/hooks/use-debounce-callback/use-debounce-callback.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';

package/dist/esm/components/Combobox/internal/ComboboxChips.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import '../../Chip/index.js';
+import '../../chip/index.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import { ChipRemovable } from '../../Chip/Chips.js';
+import { ChipRemovable } from '../../chip/chips.js';
 
 const ComboboxChips = () => {
     const context = useContext(ComboboxContext);

package/dist/esm/components/Combobox/internal/ComboboxError.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
+import { ValidationMessage } from '../../validation-message/validation-message.js';
 
 const ComboboxError = ({ size, error, formFieldProps }) => {
     return (jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ValidationMessage, { "data-size": size, children: error }) }));

package/dist/esm/components/Combobox/internal/ComboboxInput.js

@@ -4,13 +4,13 @@ import { useMergeRefs } from '@floating-ui/react';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import { useContext, useRef } from 'react';
+import { omit } from '../../../utilities/omit/omit.js';
+import { Paragraph } from '../../paragraph/paragraph.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
-import { omit } from '../../../utilities/omit/omit.js';
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
     const context = useContext(ComboboxContext);

package/dist/esm/components/Combobox/internal/ComboboxLabel.js

@@ -2,8 +2,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
-import { Label } from '../../Label/Label.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { Label } from '../../label/label.js';
+import { Paragraph } from '../../paragraph/paragraph.js';
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
     return (jsxs(Fragment, { children: [label && (jsxs(Label, { "data-size": size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, "data-size": size, children: jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));

package/dist/esm/components/Combobox/useComboboxKeyboard.js

@@ -1,6 +1,6 @@
 'use client';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { useDebounceCallback } from '../../utilities/hooks/use-debounce-callback/use-debounce-callback.js';
 
 const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = useComboboxId();

package/dist/esm/components/avatar/avatar.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, Fragment } from 'react';
+
+/**
+ * Avatars are used to represent people or entities.
+ *
+ * @example
+ * <Avatar aria-label="John Doe" initials="JD" />
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <img src='…' alt='John Doe' />
+ * </Avatar>
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <Icon />
+ * </Avatar>
+ */
+const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, ...rest }, ref) {
+    const useSlot = children && typeof children !== 'string';
+    const textChild = children && typeof children === 'string';
+    const Component = useSlot ? Slot : Fragment;
+    return (jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: textChild ? jsx("span", { children: children }) : children }) }));
+});
+
+export { Avatar };

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

@@ -0,0 +1,14 @@
+'use client';
+import { Badge as Badge$1 } from './badge.js';
+import { BadgePosition } from './badge-position.js';
+
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
+const Badge = Object.assign(Badge$1, { Position: BadgePosition });
+Badge.Position.displayName = 'Badge.Position';
+
+export { Badge, BadgePosition };

package/dist/esm/components/breadcrumbs/breadcrumbs-link.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Link } from '../link/link.js';
+
+const BreadcrumbsLink = forwardRef(function BreadcrumbsLink(rest, ref) {
+    return jsx(Link, { ref: ref, ...rest });
+});
+
+export { BreadcrumbsLink };

package/dist/esm/components/breadcrumbs/breadcrumbs-list.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+
+const BreadcrumbsList = forwardRef(function BreadcrumbsList(rest, ref) {
+    const innerRef = useRef(null);
+    const mergedRefs = useMergeRefs([innerRef, ref]);
+    // Set aria-current on last link
+    useEffect(() => {
+        const links = innerRef.current?.querySelectorAll(':scope > * > *') || [];
+        const lastLink = links[links?.length - 1];
+        lastLink?.setAttribute('aria-current', 'page');
+        return () => lastLink?.removeAttribute('aria-current'); // Remove on re-render as React can re-use DOM elements
+    });
+    return jsx("ol", { ref: mergedRefs, ...rest });
+});
+
+export { BreadcrumbsList };

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

@@ -0,0 +1,34 @@
+'use client';
+import { Breadcrumbs as Breadcrumbs$1 } from './breadcrumbs.js';
+import { BreadcrumbsItem } from './breadcrumbs-item.js';
+import { BreadcrumbsLink } from './breadcrumbs-link.js';
+import { BreadcrumbsList } from './breadcrumbs-list.js';
+
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
+const Breadcrumbs = Object.assign(Breadcrumbs$1, {
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+});
+Breadcrumbs.List.displayName = 'Breadcrumbs.List';
+Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
+Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
+
+export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList };

package/dist/esm/components/button/button.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { Spinner } from '../spinner/spinner.js';
+
+/**
+ * Button used for interaction
+ *
+ * @example
+ * <Button>Click me</Button>
+ */
+const Button = forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
+    const Component = asChild ? Slot : 'button';
+    // Fallbacks to undefined to prevent rendering attribute="false"
+    return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
+        /* don't set type when we use `asChild` */
+        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
+            ), jsx(Slottable, { children: children })] }));
+});
+
+export { Button };

package/dist/esm/components/card/card.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
+const Card = forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    const cardRef = useRef(null);
+    const mergedRefs = useMergeRefs([cardRef, ref]);
+    // Forward click on card to heading links for better accessibility
+    // https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
+    useEffect(() => {
+        const card = cardRef.current;
+        const handleClick = ({ ctrlKey, metaKey, target }) => {
+            const link = card?.querySelector(':is(h1,h2,h3,h4,h5,h6) a');
+            if (!link || link?.contains(target))
+                return; // Let links handle their own clicks
+            if (ctrlKey || metaKey)
+                window.open(link.href, '', 'noreferrer');
+            else
+                link.click(); // Using link.click instead of window.location.href as this will trigger the browser's handling of rel=, target=, etc.
+        };
+        card?.addEventListener('click', handleClick);
+        return () => card?.removeEventListener('click', handleClick);
+    }, []);
+    return (jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+export { Card };

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

@@ -0,0 +1,20 @@
+'use client';
+import { Card as Card$1 } from './card.js';
+import { CardBlock } from './card-block.js';
+
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
+const Card = Object.assign(Card$1, {
+    Block: CardBlock,
+});
+Card.Block.displayName = 'Card.Block';
+
+export { Card, CardBlock };

package/dist/esm/components/checkbox/checkbox.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field } from '../field/index.js';
+import { Input } from '../input/input.js';
+import { Label } from '../label/label.js';
+import { ValidationMessage } from '../validation-message/validation-message.js';
+
+/**
+ * Checkbox used to select multiple options.
+ *
+ * @example
+ * <Checkbox label="I agree" value="agree" />
+ */
+const Checkbox = forwardRef(function Checkbox({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
+});
+
+export { Checkbox };

package/dist/esm/components/chip/chips.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { Input } from '../input/input.js';
+
+/**
+ * Chip.Button used for interaction
+ *
+ * @example
+ * <Chip.Button>Click me</Chip.Button>
+ */
+const ChipButton = forwardRef(function ChipButton({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'button';
+    return (jsx(Component, { className: cl('ds-chip', className), type: asChild ? undefined : 'button', ref: ref, ...rest }));
+});
+/**
+ * Chip.Removable used for interaction
+ * @example
+ * <Chip.Removable>Click to remove me</Chip.Removable>
+ */
+const ChipRemovable = forwardRef(function ChipRemovable(props, ref) {
+    return jsx(ChipButton, { "data-removable": true, ref: ref, ...props });
+});
+/**
+ * Chip.Checkbox used for multiselection
+ * @example
+ * <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
+ * <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
+ */
+const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-color': color, ...rest }, ref) {
+    const inputType = rest.type ?? 'checkbox';
+    const Component = asChild ? Slot : 'label';
+    return (jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-color": color, ref: ref, children: [jsx(Input, { ...rest, type: inputType }), jsx(Slottable, { children: children })] }));
+});
+/**
+ * Chip.Radio used for single selection
+ * @example
+ * <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
+ * <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
+ */
+const ChipRadio = forwardRef(function ChipRadio(props, ref) {
+    return jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+});
+
+export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };