@uppsala-designsystem/ui 1.5.0

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

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

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

@@ -0,0 +1,15 @@
+'use client';
+import { ChipRemovable, ChipRadio, ChipCheckbox, ChipButton } from './Chips.js';
+
+const Chip = {
+    Button: ChipButton,
+    Checkbox: ChipCheckbox,
+    Radio: ChipRadio,
+    Removable: ChipRemovable,
+};
+Chip.Button.displayName = 'Chip.Button';
+Chip.Checkbox.displayName = 'Chip.Checkbox';
+Chip.Radio.displayName = 'Chip.Radio';
+Chip.Removable.displayName = 'Chip.Removable';
+
+export { Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

package/dist/esm/components/Details/Details.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
+import '@u-elements/u-details';
+
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const Details = forwardRef(function Details({ className, open, defaultOpen = false, variant = 'default', onToggle, ...rest }, ref) {
+    const detailsRef = useRef(null);
+    const initialOpen = useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
+    const mergedRefs = useMergeRefs([detailsRef, ref]);
+    const onToggleRef = useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
+    const openRef = useRef(open);
+    onToggleRef.current = onToggle;
+    openRef.current = open;
+    // Provide onToggle event and controlled state
+    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 (jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+export { Details };

package/dist/esm/components/Details/DetailsContent.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * Details content component, contains the content of the details item.
+ *
+ * @example
+ * <DetailsContent>Content</DetailsContent>
+ */
+const DetailsContent = forwardRef(function DetailsContent(rest, ref) {
+    return jsx("div", { ref: ref, ...rest });
+});
+
+export { DetailsContent };

package/dist/esm/components/Details/DetailsSummary.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * Details summary component, contains a the heading to toggle the content.
+ *
+ * @example
+ * <Details.Summary>Heading</Details.Summary>
+ */
+const DetailsSummary = forwardRef(function DetailsSummary({ className, ...rest }, ref) {
+    /* Set `className` as `class` so react is happy */
+    return (jsx("u-summary", { suppressHydrationWarning: true, ref: ref, class: className, ...rest }));
+});
+
+export { DetailsSummary };

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

@@ -0,0 +1,22 @@
+'use client';
+import { Details as Details$1 } from './Details.js';
+import { DetailsContent } from './DetailsContent.js';
+import { DetailsSummary } from './DetailsSummary.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$1, {
+    Summary: DetailsSummary,
+    Content: DetailsContent,
+});
+Details.Summary.displayName = 'Details.Summary';
+Details.Content.displayName = 'Details.Content';
+
+export { Details, DetailsContent, DetailsSummary };

package/dist/esm/components/Dialog/Dialog.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { Context } from './DialogTriggerContext.js';
+import { Button } from '../Button/Button.js';
+
+/**
+ * Dialog component, used to display a dialog dialog.
+ *
+ * @example with TriggerContext
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const dialogRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => dialogRef.current?.showModal()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
+ *   Content
+ * </Dialog>
+ */
+const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = "Stäng dialogfönster", closedby = "closerequest", modal = true, onClose, open, ...rest }, ref) {
+    const contextRef = useContext(Context);
+    const dialogRef = useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
+    const Component = asChild ? Slot : "dialog";
+    const mergedRefs = useMergeRefs([contextRef, ref, dialogRef]);
+    const showProp = modal ? "showModal" : "show";
+    useEffect(() => dialogRef.current?.[open ? showProp : "close"](), [open, showProp]); // Toggle open based on prop
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        const handleClosedby = (event) => {
+            const { clientY: y, clientX: x, target } = event;
+            if (event instanceof KeyboardEvent)
+                return (closedby === "none" &&
+                    event.key === "Escape" &&
+                    event.preventDefault()); // Skip ESC-key if closedby="none"
+            if (window.getSelection()?.toString())
+                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
+            if (dialog && target === dialog && closedby === "any") {
+                const { top, left, right, bottom } = dialog.getBoundingClientRect();
+                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
+                if (!isInDialog)
+                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
+            }
+        };
+        const handleAutoFocus = () => {
+            const autofocus = dialog?.querySelector("[autofocus]");
+            if (document.activeElement !== autofocus)
+                autofocus?.focus();
+        };
+        dialog?.addEventListener("animationend", handleAutoFocus);
+        dialog?.addEventListener("click", handleClosedby);
+        dialog?.addEventListener("keydown", handleClosedby);
+        return () => {
+            dialog?.removeEventListener("animationend", handleAutoFocus);
+            dialog?.removeEventListener("click", handleClosedby);
+            dialog?.removeEventListener("keydown", handleClosedby);
+        };
+    }, [closedby]);
+    /* handle closing */
+    useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        dialogRef.current?.addEventListener("close", handleClose);
+        return () => dialogRef.current?.removeEventListener("close", handleClose);
+    }, [onClose]);
+    return (jsxs(Component, { className: cl("ds-dialog", className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx("form", { method: "dialog", children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": "neutral", icon: true, name: "close", type: "submit", variant: "tertiary" }) })), children] }));
+});
+
+export { Dialog };

package/dist/esm/components/Dialog/DialogBlock.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 } from 'react';
+
+/**
+ * DialogBlock component, used to separate content in a Dialog.
+ *
+ * @example
+ * <Dialog>
+ *   <Dialog.Block>
+ *     Header
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Content
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Footer
+ *   </Dialog.Block>
+ * </Dialog>
+ */
+const DialogBlock = forwardRef(function DialogBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    return (jsx(Component, { className: cl('ds-dialog__block', className), ref: ref, ...rest }));
+});
+
+export { DialogBlock };

package/dist/esm/components/Dialog/DialogTrigger.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useContext } from 'react';
+import { Button } from '../Button/Button.js';
+import { Context } from './DialogTriggerContext.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 = forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
+    const contextRef = useContext(Context);
+    const Component = asChild ? Slot : 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 (jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
+});
+
+export { DialogTrigger };

package/dist/esm/components/Dialog/DialogTriggerContext.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, createContext } from 'react';
+
+const Context = createContext({
+    current: null,
+});
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTriggerContext = ({ children, }) => {
+    const contextRef = useRef(null);
+    return jsx(Context.Provider, { value: contextRef, children: children });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+export { Context, DialogTriggerContext };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Dialog as Dialog$1 } from './Dialog.js';
+import { DialogBlock } from './DialogBlock.js';
+import { DialogTrigger } from './DialogTrigger.js';
+import { DialogTriggerContext } from './DialogTriggerContext.js';
+
+/**
+ * Dialog component, used to display a Dialog dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const Dialog = Object.assign(Dialog$1, {
+    Block: DialogBlock,
+    TriggerContext: DialogTriggerContext,
+    Trigger: DialogTrigger,
+});
+Dialog.Block.displayName = 'Dialog.Block';
+Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
+Dialog.Trigger.displayName = 'Dialog.Trigger';
+
+export { Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };

package/dist/esm/components/Divider/Divider.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Divider component, used to separate content. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
+const Divider = forwardRef(function Divider({ className, ...rest }, ref) {
+    return (
+    // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
+    jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
+});
+
+export { Divider };

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/index.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/DropdownButton.js

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

package/dist/esm/components/Dropdown/DropdownHeading.js

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

package/dist/esm/components/Dropdown/DropdownItem.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const DropdownItem = forwardRef(function DropdownItem({ className, ...rest }, ref) {
+    return jsx("li", { ref: ref, ...rest });
+});
+
+export { DropdownItem };

package/dist/esm/components/Dropdown/DropdownList.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const DropdownList = forwardRef(function DropdownList({ className, ...rest }, ref) {
+    return jsx("ul", { ref: ref, ...rest });
+});
+
+export { DropdownList };

package/dist/esm/components/Dropdown/DropdownTrigger.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../Popover/index.js';
+import { PopoverTrigger } from '../Popover/PopoverTrigger.js';
+
+const DropdownTrigger = forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
+    return jsx(PopoverTrigger, { ref: ref, ...rest });
+});
+
+export { DropdownTrigger };

package/dist/esm/components/Dropdown/DropdownTriggerContext.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '../Popover/index.js';
+import { PopoverTriggerContext } from '../Popover/PopoverTriggerContext.js';
+
+/**
+ * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
+ * @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 DropdownTriggerContext = ({ children, }) => {
+    return jsx(PopoverTriggerContext, { children: children });
+};
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';
+
+export { DropdownTriggerContext };

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

@@ -0,0 +1,41 @@
+'use client';
+import { Dropdown as Dropdown$1 } from './Dropdown.js';
+import { DropdownButton } from './DropdownButton.js';
+import { DropdownHeading } from './DropdownHeading.js';
+import { DropdownItem } from './DropdownItem.js';
+import { DropdownList } from './DropdownList.js';
+import { DropdownTrigger } from './DropdownTrigger.js';
+import { DropdownTriggerContext } from './DropdownTriggerContext.js';
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example
+ * <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>
+ */
+const Dropdown = Object.assign(Dropdown$1, {
+    TriggerContext: DropdownTriggerContext,
+    Heading: DropdownHeading,
+    List: DropdownList,
+    Item: DropdownItem,
+    Button: DropdownButton,
+    Trigger: DropdownTrigger,
+});
+Dropdown.TriggerContext.displayName = 'Dropdown.TriggerContext';
+Dropdown.List.displayName = 'Dropdown.List';
+Dropdown.Heading.displayName = 'Dropdown.Heading';
+Dropdown.Item.displayName = 'Dropdown.Item';
+Dropdown.Button.displayName = 'Dropdown.Button';
+Dropdown.Trigger.displayName = 'Dropdown.Trigger';
+
+export { Dropdown, DropdownButton, DropdownHeading, DropdownItem, DropdownList, DropdownTrigger, DropdownTriggerContext };

package/dist/esm/components/ErrorSummary/ErrorSummary.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 { forwardRef, createContext, 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, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', 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, { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+});
+
+export { ErrorSummary, ErrorSummaryContext };

package/dist/esm/components/ErrorSummary/ErrorSummaryHeading.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useEffect } from 'react';
+import { ErrorSummaryContext } from './ErrorSummary.js';
+import { Heading } from '../Heading/Heading.js';
+
+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/ErrorSummary/ErrorSummaryItem.js

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