@digdir/designsystemet-react 1.1.2 → 1.1.4

package/dist/cjs/components/Combobox/Combobox.js

@@ -6,6 +6,8 @@ var react$1 = require('@floating-ui/react');
 var reactVirtual = require('@tanstack/react-virtual');
 var cl = require('clsx/lite');
 var react = require('react');
+var omit = require('../../utilities/omit/omit.js');
+var spinner = require('../spinner/spinner.js');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
 var Custom = require('./Custom.js');
@@ -18,9 +20,7 @@ var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var useFormField = require('./useFormField/useFormField.js');
 var utilities = require('./utilities.js');
-var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
-var Spinner = require('../Spinner/Spinner.js');
-var omit = require('../../utilities/omit/omit.js');
+var useDebounceCallback = require('../../utilities/hooks/use-debounce-callback/use-debounce-callback.js');
 
 /**
  * @deprecated Use `Suggestion` instead
@@ -194,7 +194,7 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
                                         left: 0,
                                         width: '100%',
                                         transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.ComboboxCustom, { className: 'ds-combobox__loading', children: [jsxRuntime.jsx(Spinner.Spinner, { "aria-label": 'Laster', "data-size": 'sm' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.ComboboxCustom, { className: 'ds-combobox__loading', children: [jsxRuntime.jsx(spinner.Spinner, { "aria-label": 'Laster', "data-size": 'sm' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
 });
 const Combobox = react.forwardRef((props, ref) => (jsxRuntime.jsx(ComboboxIdContext.ComboboxIdProvider, { children: jsxRuntime.jsx(ComboboxComponent, { ...props, ref: ref }) })));
 Combobox.displayName = 'Combobox';

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

@@ -6,10 +6,10 @@ var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
+var omit = require('../../utilities/omit/omit.js');
+var label = require('../label/label.js');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var Label = require('../Label/Label.js');
-var omit = require('../../utilities/omit/omit.js');
 
 const ComboboxCustom = react.forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -30,7 +30,7 @@ const ComboboxCustom = react.forwardRef(({ asChild, interactive, id, className,
         },
         ref,
     ]);
-    return (jsxRuntime.jsx(Label.Label, { "data-size": size, asChild: true, children: jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: cl('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit.omit(['interactive'], rest), ...omit.omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
+    return (jsxRuntime.jsx(label.Label, { "data-size": size, asChild: true, children: jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: cl('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit.omit(['interactive'], rest), ...omit.omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
 });
 
 exports.ComboboxCustom = ComboboxCustom;

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

@@ -4,8 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
+var label = require('../label/label.js');
 var ComboboxContext = require('./ComboboxContext.js');
-var Label = require('../Label/Label.js');
 
 const ComboboxEmpty = react.forwardRef(({ children, className, ...rest }, ref) => {
     const context = react.useContext(ComboboxContext.ComboboxContext);
@@ -13,7 +13,7 @@ const ComboboxEmpty = react.forwardRef(({ children, className, ...rest }, ref) =
         throw new Error('ComboboxEmpty must be used within a Combobox');
     }
     const { filteredOptions, size } = context;
-    return (filteredOptions.length === 0 && (jsxRuntime.jsx(Label.Label, { "data-size": size, asChild: true, children: jsxRuntime.jsx("div", { ref: ref, className: cl('ds-combobox__empty', className), ...rest, children: children }) })));
+    return (filteredOptions.length === 0 && (jsxRuntime.jsx(label.Label, { "data-size": size, asChild: true, children: jsxRuntime.jsx("div", { ref: ref, className: cl('ds-combobox__empty', className), ...rest, children: children }) })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 

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

@@ -5,11 +5,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 var omit = require('../../../utilities/omit/omit.js');
+var label = require('../../label/label.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var Description = require('./Description.js');
 var SelectedIcon = require('./SelectedIcon.js');
 var useComboboxOption = require('./useComboboxOption.js');
-var Label = require('../../Label/Label.js');
 
 const ComboboxOption = react.memo(react.forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = react.useId();
@@ -24,12 +24,10 @@ const ComboboxOption = react.memo(react.forwardRef(({ value, description, childr
     }
     const { size, multiple, getItemProps } = context;
     const props = getItemProps();
-    return (jsxRuntime.jsx(Label.Label, { "data-size": 'md', asChild: true, children: jsxRuntime.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 (jsxRuntime.jsx(label.Label, { "data-size": 'md', asChild: true, children: jsxRuntime.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.omit(['displayValue'], rest), ...omit.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(Label.Label, { asChild: true, "data-size": size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description, { children: description }))] })] }) }));
+            }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit.omit(['displayValue'], rest), ...omit.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(label.Label, { asChild: true, "data-size": size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(label.Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description, { children: description }))] })] }) }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 function isComboboxOption(child) {

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

@@ -3,7 +3,7 @@
 
 var react$1 = require('@floating-ui/react');
 var react = require('react');
-var useDebounceCallback = require('../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var useDebounceCallback = require('../../../utilities/hooks/use-debounce-callback/use-debounce-callback.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');

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

@@ -3,9 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-require('../../Chip/index.js');
+require('../../chip/index.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var Chips = require('../../Chip/Chips.js');
+var chips = require('../../chip/chips.js');
 
 const ComboboxChips = () => {
     const context = react.useContext(ComboboxContext.ComboboxContext);
@@ -14,7 +14,7 @@ const ComboboxChips = () => {
     }
     const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef, } = context;
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.keys(selectedOptions).map((value) => {
-            return (jsxRuntime.jsx(Chips.ChipRemovable, { "data-size": size, disabled: disabled, onKeyDown: (e) => {
+            return (jsxRuntime.jsx(chips.ChipRemovable, { "data-size": size, disabled: disabled, onKeyDown: (e) => {
                     if (readOnly)
                         return;
                     if (disabled)

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

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
+var validationMessage = require('../../validation-message/validation-message.js');
 
 const ComboboxError = ({ size, error, formFieldProps }) => {
-    return (jsxRuntime.jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { "data-size": size, children: error }) }));
+    return (jsxRuntime.jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(validationMessage.ValidationMessage, { "data-size": size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
 

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

@@ -6,13 +6,13 @@ var react$1 = require('@floating-ui/react');
 var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
+var omit = require('../../../utilities/omit/omit.js');
+var paragraph = require('../../paragraph/paragraph.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
-var omit = require('../../../utilities/omit/omit.js');
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
     const context = react.useContext(ComboboxContext.ComboboxContext);
@@ -70,7 +70,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { "data-size": size, asChild: true, children: jsxRuntime.jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: cl('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips, {}), jsxRuntime.jsx(Paragraph.Paragraph, { "data-size": size, asChild: true, children: jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": open ? listId : undefined, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
+    return (jsxRuntime.jsx(paragraph.Paragraph, { "data-size": size, asChild: true, children: jsxRuntime.jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: cl('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips, {}), jsxRuntime.jsx(paragraph.Paragraph, { "data-size": size, asChild: true, children: jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": open ? listId : undefined, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
                                     onChange(e);
                                     !open && setOpen(true);
                                     rest.onChange?.(e);

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

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

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

@@ -2,7 +2,7 @@
 'use strict';
 
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var useDebounceCallback = require('../../utilities/hooks/use-debounce-callback/use-debounce-callback.js');
 
 const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = ComboboxIdContext.useComboboxId();

package/dist/cjs/components/avatar/avatar.js

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('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 = react.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 ? reactSlot.Slot : react.Fragment;
+    return (jsxRuntime.jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsxRuntime.jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: textChild ? jsxRuntime.jsx("span", { children: children }) : children }) }));
+});
+
+exports.Avatar = Avatar;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var badge = require('./badge.js');
+var badgePosition = require('./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.Badge, { Position: badgePosition.BadgePosition });
+Badge.Position.displayName = 'Badge.Position';
+
+exports.BadgePosition = badgePosition.BadgePosition;
+exports.Badge = Badge;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var link = require('../link/link.js');
+
+const BreadcrumbsLink = react.forwardRef(function BreadcrumbsLink(rest, ref) {
+    return jsxRuntime.jsx(link.Link, { ref: ref, ...rest });
+});
+
+exports.BreadcrumbsLink = BreadcrumbsLink;

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

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+const BreadcrumbsList = react.forwardRef(function BreadcrumbsList(rest, ref) {
+    const innerRef = react.useRef(null);
+    const mergedRefs = useMergeRefs.useMergeRefs([innerRef, ref]);
+    // Set aria-current on last link
+    react.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 jsxRuntime.jsx("ol", { ref: mergedRefs, ...rest });
+});
+
+exports.BreadcrumbsList = BreadcrumbsList;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var breadcrumbs = require('./breadcrumbs.js');
+var breadcrumbsItem = require('./breadcrumbs-item.js');
+var breadcrumbsLink = require('./breadcrumbs-link.js');
+var breadcrumbsList = require('./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.Breadcrumbs, {
+    List: breadcrumbsList.BreadcrumbsList,
+    Item: breadcrumbsItem.BreadcrumbsItem,
+    Link: breadcrumbsLink.BreadcrumbsLink,
+});
+Breadcrumbs.List.displayName = 'Breadcrumbs.List';
+Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
+Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
+
+exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
+exports.BreadcrumbsLink = breadcrumbsLink.BreadcrumbsLink;
+exports.BreadcrumbsList = breadcrumbsList.BreadcrumbsList;
+exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/button/button.js

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var spinner = require('../spinner/spinner.js');
+
+/**
+ * Button used for interaction
+ *
+ * @example
+ * <Button>Click me</Button>
+ */
+const Button = react.forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'button';
+    // Fallbacks to undefined to prevent rendering attribute="false"
+    return (jsxRuntime.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 ? (jsxRuntime.jsx(spinner.Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
+            ), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
+});
+
+exports.Button = Button;

package/dist/cjs/components/card/card.js

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var useMergeRefs = require('../../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 = react.forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const cardRef = react.useRef(null);
+    const mergedRefs = useMergeRefs.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
+    react.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 (jsxRuntime.jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+exports.Card = Card;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var card = require('./card.js');
+var cardBlock = require('./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.Card, {
+    Block: cardBlock.CardBlock,
+});
+Card.Block.displayName = 'Card.Block';
+
+exports.CardBlock = cardBlock.CardBlock;
+exports.Card = Card;

package/dist/cjs/components/checkbox/checkbox.js

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

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

@@ -0,0 +1,52 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var input = require('../input/input.js');
+
+/**
+ * Chip.Button used for interaction
+ *
+ * @example
+ * <Chip.Button>Click me</Chip.Button>
+ */
+const ChipButton = react.forwardRef(function ChipButton({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'button';
+    return (jsxRuntime.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 = react.forwardRef(function ChipRemovable(props, ref) {
+    return jsxRuntime.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 = react.forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-color': color, ...rest }, ref) {
+    const inputType = rest.type ?? 'checkbox';
+    const Component = asChild ? reactSlot.Slot : 'label';
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-color": color, ref: ref, children: [jsxRuntime.jsx(input.Input, { ...rest, type: inputType }), jsxRuntime.jsx(reactSlot.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 = react.forwardRef(function ChipRadio(props, ref) {
+    return jsxRuntime.jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+});
+
+exports.ChipButton = ChipButton;
+exports.ChipCheckbox = ChipCheckbox;
+exports.ChipRadio = ChipRadio;
+exports.ChipRemovable = ChipRemovable;

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

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var chips = require('./chips.js');
+
+const Chip = {
+    Button: chips.ChipButton,
+    Checkbox: chips.ChipCheckbox,
+    Radio: chips.ChipRadio,
+    Removable: chips.ChipRemovable,
+};
+Chip.Button.displayName = 'Chip.Button';
+Chip.Checkbox.displayName = 'Chip.Checkbox';
+Chip.Radio.displayName = 'Chip.Radio';
+Chip.Removable.displayName = 'Chip.Removable';
+
+exports.ChipButton = chips.ChipButton;
+exports.ChipCheckbox = chips.ChipCheckbox;
+exports.ChipRadio = chips.ChipRadio;
+exports.ChipRemovable = chips.ChipRemovable;
+exports.Chip = Chip;

package/dist/cjs/components/details/details.js

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+require('@u-elements/u-details');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, variant = 'default', onToggle, ...rest }, ref) {
+    const detailsRef = react.useRef(null);
+    const initialOpen = react.useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
+    const mergedRefs = useMergeRefs.useMergeRefs([detailsRef, ref]);
+    const onToggleRef = react.useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
+    const openRef = react.useRef(open);
+    onToggleRef.current = onToggle;
+    openRef.current = open;
+    // Provide onToggle event and controlled state
+    react.useEffect(() => {
+        const details = detailsRef.current;
+        const handleToggle = (event) => {
+            if (!details || details?.open === openRef.current)
+                return;
+            onToggleRef.current?.(event);
+            if (openRef.current !== undefined)
+                details.open = openRef.current; // Don't update DOM unless controlled state changes
+        };
+        details?.addEventListener('toggle', handleToggle, true);
+        return () => details?.removeEventListener('toggle', handleToggle, true);
+    }, []);
+    return (jsxRuntime.jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+exports.Details = Details;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var details = require('./details.js');
+var detailsContent = require('./details-content.js');
+var detailsSummary = require('./details-summary.js');
+
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const Details = Object.assign(details.Details, {
+    Summary: detailsSummary.DetailsSummary,
+    Content: detailsContent.DetailsContent,
+});
+Details.Summary.displayName = 'Details.Summary';
+Details.Content.displayName = 'Details.Content';
+
+exports.DetailsContent = detailsContent.DetailsContent;
+exports.DetailsSummary = detailsSummary.DetailsSummary;
+exports.Details = Details;

package/dist/cjs/components/dialog/dialog-trigger.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var button = require('../button/button.js');
+var dialogTriggerContext = require('./dialog-trigger-context.js');
+
+/**
+ * DialogTrigger component, used within a Dialog.TriggerContext to open a dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTrigger = react.forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
+    const contextRef = react.useContext(dialogTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : button.Button;
+    const openDialog = () => {
+        /* check if element has `data-modal`, it it has, use `showModal` */
+        contextRef.current?.getAttribute('data-modal') === 'true'
+            ? contextRef.current?.showModal()
+            : contextRef.current?.show();
+    };
+    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
+});
+
+exports.DialogTrigger = DialogTrigger;