@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

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

@@ -0,0 +1,34 @@
+'use client';
+import cl from 'clsx/lite';
+import { useContext, useId } from 'react';
+import { FieldsetContext } from './FieldsetContext.js';
+
+/**
+ * Handles props and their state for various form-fields in context with Fieldset
+ */
+const useFormField = (props, prefix) => {
+    const fieldset = useContext(FieldsetContext);
+    const randomId = useId();
+    const id = props.id ?? `${prefix}-${randomId}`;
+    const errorId = props.errorId ?? `${prefix}-error-${randomId}`;
+    const descriptionId = `${prefix}-description-${randomId}`;
+    const size = props.size ?? fieldset?.size ?? 'md';
+    const disabled = fieldset?.disabled || props?.disabled;
+    const hasError = !disabled && !!(props.error || fieldset?.error);
+    return {
+        hasError,
+        errorId,
+        descriptionId,
+        size,
+        inputProps: {
+            id,
+            disabled,
+            'aria-invalid': hasError ? true : undefined,
+            'aria-describedby': cl(props['aria-describedby'], !!props?.description &&
+                typeof props?.description === 'string' &&
+                descriptionId, hasError && !fieldset?.error && errorId, hasError && !!fieldset?.error && fieldset?.errorId) || undefined,
+        },
+    };
+};
+
+export { useFormField };

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

@@ -0,0 +1,34 @@
+'use client';
+import { isValidElement } from 'react';
+import { ComboboxCustom } from './Custom.js';
+
+function isComboboxCustom(child) {
+    return isValidElement(child) && child.type === ComboboxCustom;
+}
+function isInteractiveComboboxCustom(child) {
+    return isComboboxCustom(child) && child.props.interactive === true;
+}
+const INTERNAL_OPTION_PREFIX = 'internal-option-';
+/**
+ * We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
+ * @param value
+ * @returns
+ */
+const prefix = (value) => {
+    return INTERNAL_OPTION_PREFIX + value;
+};
+const removePrefix = (value) => {
+    return value.slice(INTERNAL_OPTION_PREFIX.length);
+};
+const setReactInputValue = (input, value) => {
+    const previousValue = input.value;
+    input.value = value;
+    const tracker = input._valueTracker;
+    if (typeof tracker !== 'undefined') {
+        tracker.setValue(previousValue);
+    }
+    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+};
+
+export { isComboboxCustom, isInteractiveComboboxCustom, prefix, removePrefix, setReactInputValue };

package/dist/esm/components/alert/alert.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
+ * @example
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
+ */
+const Alert = forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
+    return (jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));
+});
+
+export { Alert };

package/dist/esm/components/avatar/avatar.js

@@ -0,0 +1,31 @@
+'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, 'data-tooltip': dataTooltip, variant = 'circle', className, children, initials, asChild, ...rest }, ref) {
+    const OuterComponent = asChild ? Slot : 'span';
+    const useSlot = children && typeof children !== 'string';
+    const textChild = children && typeof children === 'string';
+    const Component = useSlot ? Slot : Fragment;
+    return (jsx(OuterComponent, { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: asChild ? undefined : 'img', "aria-label": ariaLabel || dataTooltip, "data-tooltip": dataTooltip, tabIndex: dataTooltip ? 0 : undefined, ...rest, children: jsx(Component, { ...(useSlot && !asChild ? { 'aria-hidden': true } : {}), children: textChild ? jsx("span", { children: children }) : children }) }));
+});
+
+export { Avatar };

package/dist/esm/components/avatar-stack/avatar-stack.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, Children } from 'react';
+
+/**
+ * Use `AvatarStack` to constrain Avatars into a stack.
+ *
+ * @example
+ * <EXPERIMENTAL_AvatarStack>
+ *   <Avatar aria-label='name'>
+ *     <img src={cat1} alt='' />
+ *   </Avatar>
+ *   <Avatar aria-label='name'>
+ *     <BriefcaseIcon />
+ *   </Avatar>
+ *   <Avatar aria-label='name' initials='sm' />
+ * </EXPERIMENTAL_AvatarStack>
+ */
+const EXPERIMENTAL_AvatarStack = forwardRef(function AvatarStack({ className, gap, suffix, avatarSize, overlap, expandable, children, ...rest }, ref) {
+    const style = {
+        ...(rest.style || {}),
+        '--dsc-avatar-stack-gap': gap !== undefined ? `${gap}` : undefined,
+        '--dsc-avatar-stack-size': avatarSize ? `${avatarSize}` : undefined,
+        '--dsc-avatar-stack-overlap': overlap !== undefined ? `${overlap}` : undefined,
+        '--dsc-avatar-count': expandable === 'fixed' ? Children.count(children) : undefined,
+    };
+    return (jsx("span", { tabIndex: rest.tabIndex !== undefined ? rest.tabIndex : expandable ? 0 : undefined, ref: ref, className: cl(`ds-avatar-stack`, className), style: style, "data-expandable": expandable, "data-suffix": suffix, ...rest, children: children }));
+});
+
+export { EXPERIMENTAL_AvatarStack };

package/dist/esm/components/badge/badge-position.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from '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 = forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
+});
+
+export { BadgePosition };

package/dist/esm/components/badge/badge.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ *
+ * @example with children
+ * <Badge count={5} maxCount={10}>
+ *   <Icon />
+ * </Badge>
+ */
+const Badge = forwardRef(function Badge({ className, count, maxCount, variant = 'base', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-variant": variant, ref: ref, ...rest }));
+});
+
+export { Badge };

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-item.js

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

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

@@ -0,0 +1,11 @@
+'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, { suppressHydrationWarning // Since <ds-breadcrumbs> adds aria-current="page"
+        : true, ref: ref, ...rest }));
+});
+
+export { BreadcrumbsLink };

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

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

package/dist/esm/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
+import cl from 'clsx/lite';
+import { forwardRef } from '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 = forwardRef(({ className, ...rest }, ref) => (jsx("ds-breadcrumbs", { suppressHydrationWarning: true, class: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
+
+export { Breadcrumbs };

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,29 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, version } 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, popoverTarget, popovertarget, commandfor, commandFor, ...rest }, ref) {
+    const Component = asChild ? Slot : 'button';
+    const popoverVal = popoverTarget ?? popovertarget;
+    const popoverKey = version.startsWith('19')
+        ? 'popoverTarget'
+        : 'popovertarget';
+    const commandForVal = commandFor ?? commandfor;
+    // Fallbacks to undefined to prevent rendering attribute="false"
+    return (jsxs(Component, { suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup etc.
+        : true, "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, commandfor: commandForVal, "data-variant": variant, ref: ref, 
+        /* don't set type when we use `asChild` */
+        type: asChild ? undefined : 'button', [popoverKey]: popoverVal, ...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-block.js

@@ -0,0 +1,12 @@
+'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 CardBlock = forwardRef(function CardBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    return (jsx(Component, { className: cl(`ds-card__block`, className), ref: ref, ...rest }));
+});
+
+export { CardBlock };

package/dist/esm/components/card/card.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useId, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+
+const ATTR_CLICKDELEGATE = 'data-clickdelegatefor';
+const SELECTOR_LINK = `:is(h1,h2,h3,h4,h5,h6) a`;
+const SELECTOR_SKIP = 'a,button,label,details,dialog,[role="button"],[popover],[contenteditable]';
+/**
+ * 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 linkGeneratedId = useId();
+    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 link = card?.querySelector(SELECTOR_LINK);
+        const skip = !link || link.parentElement?.closest(SELECTOR_SKIP); // Using parentElement as link variable will always match a selector
+        const id = link?.id;
+        if (card?.hasAttribute(ATTR_CLICKDELEGATE) || skip)
+            return; // Already delegated or skipped
+        link.id = id || linkGeneratedId;
+        card?.setAttribute(ATTR_CLICKDELEGATE, link.id);
+        return () => {
+            if (id && link)
+                link.id = id;
+            else
+                link?.removeAttribute('id');
+            card?.removeAttribute(ATTR_CLICKDELEGATE);
+        };
+    }, []);
+    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, children, className, description, error, label, position, style, variant, ...rest }, ref) {
+    return (jsxs(FieldComponent, { "data-size": size, "data-variant": variant, "data-position": position, 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-content.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/details-summary.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(rest, ref) {
+    return (jsx("summary", { suppressHydrationWarning // Since <details> polyfill adds attributes
+        : true, ref: ref, ...rest }));
+});
+
+export { DetailsSummary };

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 '@digdir/designsystemet-web';
+
+/**
+ * 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("details", { className: 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-block.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 };