@digdir/designsystemet-react 1.0.0-next.47 → 1.0.0-next.49

package/dist/cjs/components/Alert/Alert.js

@@ -7,8 +7,9 @@ var react = require('react');
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
  * @example
- * <Alert color='info'>Dette er en informasjonsmelding</Alert>
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
  */
 const Alert = react.forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
     return (jsxRuntime.jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));

package/dist/cjs/components/Badge/Badge.js

@@ -9,19 +9,15 @@ var react = require('react');
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
  * @example without children
- * ```jsx
- * <Badge color='accent' count={5} />
- * ```
+ * <Badge count={5} maxCount={10} />
  *
  * @example with children
- * ```jsx
- * <Badge color='accent'>
- *  <Icon />
+ * <Badge count={5} maxCount={10}>
+ *   <Icon />
  * </Badge>
- * ```
  */
-const Badge = react.forwardRef(function Badge({ className, count, maxCount, ...rest }, ref) {
-    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, ref: ref, ...rest }));
+const Badge = react.forwardRef(function Badge({ className, count, maxCount, 'data-variant': variant = 'base', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-variant": variant, ref: ref, ...rest }));
 });
 
 exports.Badge = Badge;

package/dist/cjs/components/Badge/BadgePosition.js

@@ -5,6 +5,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
 const BadgePosition = react.forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
     return (jsxRuntime.jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
 });

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

@@ -4,6 +4,12 @@
 var Badge$1 = require('./Badge.js');
 var BadgePosition = require('./BadgePosition.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.Badge, { Position: BadgePosition.BadgePosition });
 Badge.Position.displayName = 'Badge.Position';
 

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -5,6 +5,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * `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 = react.forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
 
 exports.Breadcrumbs = Breadcrumbs;

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

@@ -7,17 +7,22 @@ var BreadcrumbsLink = require('./BreadcrumbsLink.js');
 var BreadcrumbsList = require('./BreadcrumbsList.js');
 
 /**
- * Breadcrumbs are used to visualize the current page path.
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
  * @example
- * <Breadcrumbs aria-label="You are here:">
- *  <Breadcrumbs.Link aria-label="Go back to level 2">Level 2</Breadcrumbs.Link>
+ * <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>Level 1</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 2</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 3</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 4</Breadcrumbs.Link></Breadcrumbs.Item>
+ *    <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>
+ * </Breadcrumbs>
  */
 const Breadcrumbs = Object.assign(Breadcrumbs$1.Breadcrumbs, {
     List: BreadcrumbsList.BreadcrumbsList,

package/dist/cjs/components/Button/Button.js

@@ -9,6 +9,7 @@ var Spinner = require('../Spinner/Spinner.js');
 
 /**
  * Button used for interaction
+ *
  * @example
  * <Button>Click me</Button>
  */
@@ -17,7 +18,7 @@ const Button = react.forwardRef(function Button({ asChild, className, children,
     // Fallbacks to undefined to prevent rendering attribute="false"
     return (jsxRuntime.jsxs(Component, { "aria-busy": 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', "data-size": 'sm' })) : (loading // Allow custom loading spinner
+        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 })] }));
 });
 

package/dist/cjs/components/Card/Card.js

@@ -9,6 +9,7 @@ var react = require('react');
 
 /**
  * Card component to present content in a structured way.
+ *
  * @example
  * <Card>
  *  <Card.Block>Header</Card.Block>
@@ -16,7 +17,7 @@ var react = require('react');
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = react.forwardRef(function Card({ asChild = false, 'data-color': color = 'neutral', className, ...rest }, ref) {
+const Card = react.forwardRef(function Card({ asChild = false, 'data-variant': variant = 'default', className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const cardRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([cardRef, ref]);
@@ -36,7 +37,7 @@ const Card = react.forwardRef(function Card({ asChild = false, 'data-color': col
         card?.addEventListener('click', handleClick);
         return () => card?.removeEventListener('click', handleClick);
     }, []);
-    return (jsxRuntime.jsx(Component, { className: cl(`ds-card`, className), "data-color": color, ref: mergedRefs, ...rest }));
+    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

@@ -4,6 +4,16 @@
 var Card$1 = require('./Card.js');
 var CardBlock = require('./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.Card, {
     Block: CardBlock.CardBlock,
 });

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -10,11 +10,12 @@ var ValidationMessage = require('../ValidationMessage/ValidationMessage.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, description, validation, ...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 && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!validation && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: validation })] }));
+const Checkbox = react.forwardRef(function Checkbox({ 'data-size': size, className, style, children, label, 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 && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!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

@@ -9,6 +9,7 @@ var Input = require('../Input/Input.js');
 
 /**
  * Chip.Button used for interaction
+ *
  * @example
  * <Chip.Button>Click me</Chip.Button>
  */

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

@@ -18,10 +18,13 @@ var useCombobox = require('./useCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var utilities = require('./utilities.js');
+var Spinner = require('../Spinner/Spinner.js');
 var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var omit = require('../../utilities/omit/omit.js');
-var Spinner = require('../Spinner/Spinner.js');
 
+/**
+ * @deprecated Use `Suggestion` instead
+ */
 const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = react.useRef(null);
     const portalRef = react.useRef(null);
@@ -44,7 +47,6 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
     });
     const formFieldProps = useFormField.useFormField({
         disabled,
-        readOnly,
         error,
         errorId,
         size,
@@ -130,7 +132,6 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
         open,
         interactiveChildren,
         setOpen,
-        setInputValue,
         handleSelectOption: debouncedHandleSelectOption,
     });
     const rowVirtualizer = reactVirtual.useVirtualizer({
@@ -178,7 +179,7 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
             setListRef: (index, node) => {
                 listRef.current[index] = node;
             },
-        }, children: [jsxRuntime.jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(react$1.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxRuntime.jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId || '', error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(react$1.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,

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

@@ -8,8 +8,8 @@ var cl = require('clsx/lite');
 var react = require('react');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var omit = require('../../utilities/omit/omit.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) {

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

@@ -5,6 +5,9 @@ var Combobox$1 = require('./Combobox.js');
 var Empty = require('./Empty.js');
 var Option = require('./Option/Option.js');
 
+/**
+ * @deprecated Use `Suggestion` instead
+ */
 const Combobox = Combobox$1.Combobox;
 Combobox.Option = Option.ComboboxOption;
 Combobox.Empty = Empty.ComboboxEmpty;

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

@@ -25,7 +25,7 @@ const ComboboxChips = () => {
                             option: selectedOptions[value],
                             remove: true,
                         });
-                        inputRef.current?.focus();
+                        inputRef?.current?.focus();
                     }
                 }, onClick: () => {
                     if (readOnly)

package/dist/cjs/components/Details/Details.js

@@ -9,13 +9,14 @@ require('@u-elements/u-details');
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <DetailsSummary>Header</DetailsSummary>
- *  <DetailsContent>Content</DetailsContent>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
-const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, onToggle, ...rest }, ref) {
+const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, 'data-variant': 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 = react$1.useMergeRefs([detailsRef, ref]);
@@ -36,7 +37,7 @@ const Details = react.forwardRef(function Details({ className, open, defaultOpen
         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, ref: mergedRefs, ...rest }));
+    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/DetailsContent.js

@@ -6,6 +6,7 @@ var react = require('react');
 
 /**
  * Details content component, contains the content of the details item.
+ *
  * @example
  * <DetailsContent>Content</DetailsContent>
  */

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

@@ -6,6 +6,7 @@ var react = require('react');
 
 /**
  * Details summary component, contains a the heading to toggle the content.
+ *
  * @example
  * <Details.Summary>Heading</Details.Summary>
  */

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

@@ -6,11 +6,12 @@ var DetailsContent = require('./DetailsContent.js');
 var DetailsSummary = require('./DetailsSummary.js');
 
 /**
- * Details are used to toggle the visibility of content.
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <Details.Summary>Heading 1</Details.Summary>
- *  <Details.Content>Content 1</Details.Content>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 const Details = Object.assign(Details$1.Details, {

package/dist/cjs/components/Dialog/Dialog.js

@@ -0,0 +1,74 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var DialogTriggerContext = require('./DialogTriggerContext.js');
+var Button = require('../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?.showDialog()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
+ *   Content
+ * </Dialog>
+ */
+const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
+    const contextRef = react.useContext(DialogTriggerContext.Context);
+    const dialogRef = react.useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
+    const Component = asChild ? reactSlot.Slot : 'dialog';
+    const mergedRefs = react$1.useMergeRefs([contextRef, ref, dialogRef]);
+    react.useEffect(() => dialogRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
+    react.useEffect(() => {
+        const dialog = dialogRef.current;
+        const handleBackdropClick = ({ clientY: y, clientX: x, target, }) => {
+            if (window.getSelection()?.toString())
+                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
+            if (dialog && target === dialog && backdropClose) {
+                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', handleBackdropClick);
+        return () => {
+            dialog?.removeEventListener('animationend', handleAutoFocus);
+            dialog?.removeEventListener('click', handleBackdropClick);
+        };
+    }, [backdropClose]);
+    /* handle closing */
+    react.useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        dialogRef.current?.addEventListener('close', handleClose);
+        return () => dialogRef.current?.removeEventListener('close', handleClose);
+    }, [onClose]);
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(Button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+});
+
+exports.Dialog = Dialog;

package/dist/cjs/components/Dialog/DialogBlock.js

@@ -0,0 +1,30 @@
+'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');
+
+/**
+ * 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 = react.forwardRef(function DialogBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-dialog__block', className), ref: ref, ...rest }));
+});
+
+exports.DialogBlock = DialogBlock;

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

@@ -0,0 +1,27 @@
+'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('./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 = react.forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
+    const contextRef = react.useContext(DialogTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : Button.Button;
+    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: () => contextRef?.current?.showModal(), ref: ref, ...rest }));
+});
+
+exports.DialogTrigger = DialogTrigger;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Context = react.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 = react.useRef(null);
+    return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+exports.Context = Context;
+exports.DialogTriggerContext = DialogTriggerContext;

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

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var Dialog$1 = require('./Dialog.js');
+var DialogBlock = require('./DialogBlock.js');
+var DialogTrigger = require('./DialogTrigger.js');
+var DialogTriggerContext = require('./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.Dialog, {
+    Block: DialogBlock.DialogBlock,
+    TriggerContext: DialogTriggerContext.DialogTriggerContext,
+    Trigger: DialogTrigger.DialogTrigger,
+});
+Dialog.Block.displayName = 'Dialog.Block';
+Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
+Dialog.Trigger.displayName = 'Dialog.Trigger';
+
+exports.DialogBlock = DialogBlock.DialogBlock;
+exports.DialogTrigger = DialogTrigger.DialogTrigger;
+exports.DialogTriggerContext = DialogTriggerContext.DialogTriggerContext;
+exports.Dialog = Dialog;

package/dist/cjs/components/Divider/Divider.js

@@ -5,6 +5,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Divider component, used to separate content. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
 const Divider = react.forwardRef(function Divider({ className, ...rest }, ref) {
     return (
     // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -6,6 +6,33 @@ var cl = require('clsx/lite');
 var react = require('react');
 var index = require('../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 = react.forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
     return (jsxRuntime.jsx(index.Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
 });

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

@@ -7,13 +7,16 @@ var PopoverTriggerContext = require('../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>Button 1</Dropdown.Item>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
  *    </Dropdown.List>
  *  </Dropdown>
  * </Dropdown.TriggerContext>