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

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

@@ -1,6 +1,9 @@
 'use client';
+import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import 'react';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.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 } 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:'>
+ *  <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 BreadcrumbsComponent = Object.assign(Breadcrumbs, {
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+});
+BreadcrumbsComponent.List.displayName = 'Breadcrumbs.List';
+BreadcrumbsComponent.Item.displayName = 'Breadcrumbs.Item';
+BreadcrumbsComponent.Link.displayName = 'Breadcrumbs.Link';
+
+export { BreadcrumbsComponent as 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: icon && loading ? null : 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 } 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 CardComponent = Object.assign(Card, {
+    Block: CardBlock,
+});
+CardComponent.Block.displayName = 'Card.Block';
+
+export { CardComponent as 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 as FieldComponent } 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(FieldComponent, { "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 { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './chips.js';
+
+const ChipComponent = {
+    Button: ChipButton,
+    Checkbox: ChipCheckbox,
+    Radio: ChipRadio,
+    Removable: ChipRemovable,
+};
+ChipComponent.Button.displayName = 'Chip.Button';
+ChipComponent.Checkbox.displayName = 'Chip.Checkbox';
+ChipComponent.Radio.displayName = 'Chip.Radio';
+ChipComponent.Removable.displayName = 'Chip.Removable';
+
+export { ChipComponent as 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 cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+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/index.js

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

package/dist/esm/components/dialog/dialog-trigger-context.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef } 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/dialog-trigger.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 './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 = 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/dialog.js

@@ -0,0 +1,93 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Button } from '../button/button.js';
+import { Context } from './dialog-trigger-context.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, placement = 'center', closeButton = 'Lukk dialogvindu', 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]); // Toggle open based on prop
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        const handleClosedby = (event) => {
+            if (event.defaultPrevented)
+                return; // Skip if default action is prevented
+            const { clientY: y, clientX: x, target } = event;
+            /* Check if clicked element or its closest parent has data-command='close' */
+            if (target instanceof Element && event.type === 'click') {
+                const closeElement = target.closest('[data-command="close"]');
+                if (closeElement)
+                    return dialog?.close();
+            }
+            // if the browser supports closedBy, we let the browser handle it
+            // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy
+            if (dialog && 'closedBy' in dialog)
+                return;
+            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);
+        const currentRef = dialogRef.current;
+        currentRef?.addEventListener('close', handleClose);
+        return () => currentRef?.removeEventListener('close', handleClose);
+    }, [onClose]);
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-placement": placement, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
+});
+
+export { Dialog };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Dialog } from './dialog.js';
+import { DialogBlock } from './dialog-block.js';
+import { DialogTrigger } from './dialog-trigger.js';
+import { DialogTriggerContext } from './dialog-trigger-context.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 DialogComponent = Object.assign(Dialog, {
+    Block: DialogBlock,
+    TriggerContext: DialogTriggerContext,
+    Trigger: DialogTrigger,
+});
+DialogComponent.Block.displayName = 'Dialog.Block';
+DialogComponent.TriggerContext.displayName = 'Dialog.TriggerContext';
+DialogComponent.Trigger.displayName = 'Dialog.Trigger';
+
+export { DialogComponent as Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/button.js';
+
+/**
+ * DropdownButton component, used to display a button in the DropdownItem.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
+const DropdownButton = forwardRef(function DropdownButton({ ...rest }, ref) {
+    return jsx(Button, { ref: ref, variant: 'tertiary', ...rest });
+});
+
+export { DropdownButton };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Heading } from '../heading/heading.js';
+
+/**
+ * DropdownHeading component, used to display a heading in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownHeading>Heading</DropdownHeading>
+ * </Dropdown>
+ */
+const DropdownHeading = forwardRef(function DropdownHeading({ className, ...rest }, ref) {
+    return jsx(Heading, { ref: ref, ...rest });
+});
+
+export { DropdownHeading };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * DropdownItem component, used to display an item in the Dropdown. Used within a DropdownList.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
+const DropdownItem = forwardRef(function DropdownItem({ className, ...rest }, ref) {
+    return jsx("li", { ref: ref, ...rest });
+});
+
+export { DropdownItem };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * DropdownList component, used to display a list of items in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
+const DropdownList = forwardRef(function DropdownList({ className, ...rest }, ref) {
+    return jsx("ul", { ref: ref, ...rest });
+});
+
+export { DropdownList };

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { PopoverTriggerContext } from '../popover/popover-trigger-context.js';
+
+/**
+ * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
+ * @example
+ * <DropdownTriggerContext>
+ *  <DropdownTrigger>Dropdown</DropdownTrigger>
+ *  <Dropdown>
+ *   <DropdownHeading>Heading</DropdownHeading>
+ *    <DropdownList>
+ *      <DropdownItem>
+ *        <DropdownButton>Button</DropdownButton>
+ *      </DropdownItem>
+ *    </DropdownList>
+ *  </Dropdown>
+ * </DropdownTriggerContext>
+ */
+const DropdownTriggerContext = ({ children, }) => {
+    return jsx(PopoverTriggerContext, { children: children });
+};
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';
+
+export { DropdownTriggerContext };