@digdir/designsystemet-react 0.0.0-next-20250603060245 → 0.0.0-react-side-effects-20260113071010

package/dist/esm/components/dropdown/dropdown-trigger.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { PopoverTrigger } from '../popover/popover-trigger.js';
+
+/**
+ * DropdownTrigger component, used within a Dropdown.TriggerContext to open a Dropdown.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
+const DropdownTrigger = forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
+    return jsx(PopoverTrigger, { ref: ref, ...rest });
+});
+
+export { DropdownTrigger };

package/dist/esm/components/dropdown/dropdown.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { Popover } from '../popover/popover.js';
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
+ */
+const Dropdown = forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
+    return (jsx(Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
+});
+
+export { Dropdown };

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

@@ -0,0 +1,52 @@
+'use client';
+import { Dropdown } from './dropdown.js';
+import { DropdownButton } from './dropdown-button.js';
+import { DropdownHeading } from './dropdown-heading.js';
+import { DropdownItem } from './dropdown-item.js';
+import { DropdownList } from './dropdown-list.js';
+import { DropdownTrigger } from './dropdown-trigger.js';
+import { DropdownTriggerContext } from './dropdown-trigger-context.js';
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
+ */
+const DropdownComponent = Object.assign(Dropdown, {
+    TriggerContext: DropdownTriggerContext,
+    Heading: DropdownHeading,
+    List: DropdownList,
+    Item: DropdownItem,
+    Button: DropdownButton,
+    Trigger: DropdownTrigger,
+});
+DropdownComponent.TriggerContext.displayName = 'Dropdown.TriggerContext';
+DropdownComponent.List.displayName = 'Dropdown.List';
+DropdownComponent.Heading.displayName = 'Dropdown.Heading';
+DropdownComponent.Item.displayName = 'Dropdown.Item';
+DropdownComponent.Button.displayName = 'Dropdown.Button';
+DropdownComponent.Trigger.displayName = 'Dropdown.Trigger';
+
+export { DropdownComponent as Dropdown, DropdownButton, DropdownHeading, DropdownItem, DropdownList, DropdownTrigger, DropdownTriggerContext };

package/dist/esm/components/error-summary/error-summary-heading.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useEffect } from 'react';
+import { Heading } from '../heading/heading.js';
+import { ErrorSummaryContext } from './error-summary.js';
+
+/**
+ * ErrorSummary heading component, used to display a heading for the error summary.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryHeading>Heading</ErrorSummaryHeading>
+ * </ErrorSummary>
+ */
+const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
+    const { headingId, setHeadingId } = useContext(ErrorSummaryContext);
+    useEffect(() => {
+        if (id && headingId !== id)
+            setHeadingId(id);
+    }, [headingId, id, setHeadingId]);
+    return jsx(Heading, { id: headingId, ref: ref, ...rest });
+});
+
+export { ErrorSummaryHeading };

package/dist/esm/components/error-summary/error-summary-item.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../list/index.js';
+import { ListItem } from '../list/list-item.js';
+
+/**
+ * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
+ *
+ * @example
+ * <ErrorSummaryItem>
+ *  <ErrorSummaryLink href="#">
+ *    Link to error
+ *  </ErrorSummaryLink>
+ * </ErrorSummaryItem>
+ */
+const ErrorSummaryItem = forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
+    return jsx(ListItem, { ref: ref, ...rest });
+});
+
+export { ErrorSummaryItem };

package/dist/esm/components/error-summary/error-summary-link.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Link } from '../link/link.js';
+
+/**
+ * ErrorSummary link component, used to link to a specific error. Used within an ErrorSummary.Item.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryItem>
+ *     <ErrorSummaryLink href='#'>Error 1</ErrorSummaryLink>
+ *   </ErrorSummaryItem>
+ * </ErrorSummary>
+ */
+const ErrorSummaryLink = forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
+    return jsx(Link, { ref: ref, "data-color": 'neutral', ...rest });
+});
+
+export { ErrorSummaryLink };

package/dist/esm/components/error-summary/error-summary-list.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { List as ListComponent } from '../list/index.js';
+
+/**
+ * ErrorSummary list component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummaryList = forwardRef(function ErrorSummaryList({ ...rest }, ref) {
+    return jsx(ListComponent.Unordered, { ...rest, ref: ref });
+});
+
+export { ErrorSummaryList };

package/dist/esm/components/error-summary/error-summary.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { createContext, forwardRef, useId, useState } from 'react';
+
+const ErrorSummaryContext = createContext({
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummary = forwardRef(function ErrorSummary({ asChild, className, ...rest }, ref) {
+    const randomId = useId();
+    const [headingId, setHeadingId] = useState(randomId);
+    const Component = asChild ? Slot : 'div';
+    return (jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsx(Component, { tabIndex: -1, "aria-labelledby": headingId, className: cl('ds-error-summary', className), ref: ref, ...rest }) }));
+});
+
+export { ErrorSummary, ErrorSummaryContext };

package/dist/esm/components/error-summary/index.js

@@ -0,0 +1,35 @@
+'use client';
+import { ErrorSummary } from './error-summary.js';
+import { ErrorSummaryHeading } from './error-summary-heading.js';
+import { ErrorSummaryItem } from './error-summary-item.js';
+import { ErrorSummaryLink } from './error-summary-link.js';
+import { ErrorSummaryList } from './error-summary-list.js';
+
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummaryComponent = Object.assign(ErrorSummary, {
+    Heading: ErrorSummaryHeading,
+    Item: ErrorSummaryItem,
+    List: ErrorSummaryList,
+    Link: ErrorSummaryLink,
+});
+ErrorSummaryComponent.Item.displayName = 'ErrorSummary.Item';
+ErrorSummaryComponent.Heading.displayName = 'ErrorSummary.Heading';
+ErrorSummaryComponent.List.displayName = 'ErrorSummary.List';
+ErrorSummaryComponent.Link.displayName = 'ErrorSummary.Link';
+
+export { ErrorSummaryComponent as ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };

package/dist/esm/components/field/field-counter.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
+import { Paragraph } from '../paragraph/paragraph.js';
+import { ValidationMessage } from '../validation-message/validation-message.js';
+import { isInputLike } from './field-observer.js';
+
+const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
+const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', hint = 'Maks %d tegn tillatt.', ...rest }, ref) {
+    const [count, setCount] = useState(0);
+    const [liveRegionText, setLiveRegionText] = useState('');
+    const fieldInputRef = useRef(null);
+    const counterRef = useRef(null);
+    const hasExceededLimit = count > limit;
+    const remainder = limit - count;
+    const debouncedSetLiveRegionText = useDebounceCallback((text) => setLiveRegionText(text), 1200);
+    // Listen to native input events (user typing) to update the counter in real time
+    useEffect(() => {
+        const field = counterRef.current?.closest('.ds-field');
+        const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
+        const onInput = ({ target }) => {
+            if (isInputLike(target))
+                setCount(target.value.length);
+        };
+        if (input)
+            onInput({ target: input }); // Initial setup
+        fieldInputRef.current = input;
+        field?.addEventListener('input', onInput);
+        return () => field?.removeEventListener('input', onInput);
+    }, []);
+    /* React does not dispatch a native input event when the value prop changes externally.
+    Since the parent re-renders this component when value changes, we can sync on render. */
+    useEffect(() => {
+        if (fieldInputRef.current) {
+            const valueLength = fieldInputRef.current.value.length;
+            setCount((prev) => (prev === valueLength ? prev : valueLength));
+        }
+    });
+    // Update live region text when count or limit changes
+    useEffect(() => {
+        debouncedSetLiveRegionText(label(hasExceededLimit ? over : under, remainder));
+    }, [count, limit, over, under, hasExceededLimit, remainder]);
+    return (jsxs(Fragment, { children: [jsx("div", { className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: liveRegionText }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, "aria-hidden": 'true', "data-field": null, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "aria-hidden": 'true', children: label(under, remainder) })), jsx("div", { className: 'ds-sr-only', "aria-hidden": 'true', "data-field": 'description', children: label(hint, limit) })] }));
+});
+
+export { FieldCounter };

package/dist/esm/components/field/field-description.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * Field description component, used to provide additional information below the input.
+ *
+ * @example
+ * <FieldDescription>Additional information</FieldDescription>
+ */
+const FieldDescription = forwardRef(function FieldDescription(rest, ref) {
+    return jsx("div", { "data-field": 'description', ref: ref, ...rest });
+});
+
+export { FieldDescription };

package/dist/esm/components/field/field-observer.js

@@ -0,0 +1,107 @@
+'use client';
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    const typeCounter = new Map(); // Track count for each data-field type
+    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+    let input = null;
+    let describedby = '';
+    const process = (mutations) => {
+        const changed = [];
+        const removed = [];
+        // Merge MutationRecords
+        for (const mutation of mutations) {
+            if (mutation.attributeName)
+                changed.push(mutation.target ?? fieldElement);
+            changed.push(...(mutation.addedNodes || []));
+            removed.push(...(mutation.removedNodes || []));
+        }
+        // Register elements
+        for (const el of changed) {
+            if (!isElement(el))
+                continue;
+            if (isLabel(el))
+                elements.set(el, el.htmlFor);
+            else if (el.hasAttribute('data-field'))
+                elements.set(el, el.id);
+            else if (isInputLike(el) && !el.hidden) {
+                input = el;
+                describedby = el.getAttribute('aria-describedby') || '';
+            }
+        }
+        // Reset removed elements
+        for (const el of removed) {
+            if (!isElement(el))
+                continue;
+            if (input === el)
+                input = null;
+            if (elements.has(el)) {
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        // Reset type counters since we reprocess all elements
+        typeCounter.clear();
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            let id;
+            if (descriptionType) {
+                // Increment type counter for this type
+                const count = (typeCounter.get(descriptionType) || 0) + 1;
+                typeCounter.set(descriptionType, count);
+                id = `${inputId}:${descriptionType}:${count}`;
+            }
+            else {
+                id = inputId;
+            }
+            if (!value)
+                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+            if (!describedbyIds.includes(el.id)) {
+                if (descriptionType === 'validation')
+                    describedbyIds.unshift(el.id); // Validations to the front
+                else if (descriptionType)
+                    describedbyIds.push(el.id); // Other descriptions to the back
+            }
+        }
+        setAttr(input, 'id', inputId);
+        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
+    };
+    const observer = createOptimizedMutationObserver(process);
+    observer.observe(fieldElement, {
+        attributeFilter: ['id', 'for', 'aria-describedby'],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
+    observer.takeRecords(); // Clear initial setup queue
+    return () => observer.disconnect();
+}
+// Utilities
+const isElement = (node) => node instanceof Element;
+const isLabel = (node) => node instanceof HTMLLabelElement;
+const isInputLike = (node) => node instanceof HTMLElement &&
+    'validity' in node &&
+    !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
+const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback) {
+    const queue = [];
+    const observer = new MutationObserver((mutations) => {
+        if (!queue.length)
+            requestAnimationFrame(process);
+        queue.push(...mutations);
+    });
+    const process = () => {
+        callback(queue, observer);
+        queue.length = 0; // Reset queue
+        observer.takeRecords(); // Clear queue due to DOM changes in callback
+    };
+    return observer;
+}
+
+export { fieldObserver, isElement, isInputLike, isLabel };

package/dist/esm/components/field/field.js

@@ -0,0 +1,28 @@
+'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';
+import { fieldObserver } from './field-observer.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    const fieldRef = useRef(null);
+    const mergedRefs = useMergeRefs([fieldRef, ref]);
+    useEffect(() => fieldObserver(fieldRef.current), []);
+    return (jsx(Component, { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+export { Field };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Field } from './field.js';
+import { FieldAffix, FieldAffixes } from './field-affix.js';
+import { FieldCounter } from './field-counter.js';
+import { FieldDescription } from './field-description.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const FieldComponent = Object.assign(Field, {
+    Description: FieldDescription,
+    Affixes: FieldAffixes,
+    Affix: FieldAffix,
+    Counter: FieldCounter,
+});
+FieldComponent.Description.displayName = 'Field.Description';
+FieldComponent.Affixes.displayName = 'Field.Affixes';
+FieldComponent.Affix.displayName = 'Field.Affix';
+FieldComponent.Counter.displayName = 'Field.Counter';
+
+export { FieldComponent as Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

package/dist/esm/components/fieldset/fieldset-description.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Paragraph } from '../paragraph/paragraph.js';
+
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <FieldsetDescription>
+ *   Gi en kort beskrivelse i begge feltene
+ * </FieldsetDescription>
+ */
+const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
+    return jsx(Paragraph, { ref: ref, ...rest });
+});
+
+export { FieldsetDescription };

package/dist/esm/components/fieldset/fieldset-legend.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Label } from '../label/label.js';
+
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
+ */
+const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
+    return (jsx(Label, { asChild: true, children: jsx("legend", { ref: ref, ...rest }) }));
+});
+
+export { FieldsetLegend };

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

@@ -0,0 +1,28 @@
+'use client';
+import { Fieldset } from './fieldset.js';
+import { FieldsetDescription } from './fieldset-description.js';
+import { FieldsetLegend } from './fieldset-legend.js';
+
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const FieldsetComponent = Object.assign(Fieldset, {
+    Legend: FieldsetLegend,
+    Description: FieldsetDescription,
+});
+FieldsetComponent.Legend.displayName = 'Fieldset.Legend';
+FieldsetComponent.Description.displayName = 'Fieldset.Description';
+
+export { FieldsetComponent as Fieldset, FieldsetDescription, FieldsetLegend };

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

@@ -0,0 +1,14 @@
+'use client';
+import { ListItem } from './list-item.js';
+import { ListOrdered, ListUnordered } from './lists.js';
+
+const ListComponent = {
+    Item: ListItem,
+    Ordered: ListOrdered,
+    Unordered: ListUnordered,
+};
+ListComponent.Item.displayName = 'List.Item';
+ListComponent.Ordered.displayName = 'List.Ordered';
+ListComponent.Unordered.displayName = 'List.Unordered';
+
+export { ListComponent as List, ListItem, ListOrdered, ListUnordered };

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * Component that provides a list item.
+ *
+ * @example
+ * <List.Item>Item</List.Item>
+ */
+const ListItem = forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'li';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { ListItem };

package/dist/esm/components/list/lists.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const render = (tagName, { asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : tagName;
+    return jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
+};
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <ListUnordered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListUnordered>
+ */
+const ListUnordered = forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
+});
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <ListOrdered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListOrdered>
+ */
+const ListOrdered = forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
+});
+
+export { ListOrdered, ListUnordered };