@digdir/designsystemet-react 1.0.0-next.33 → 1.0.0-next.35

package/dist/cjs/utilities/RovingFocus/RovingFocusItem.js

@@ -2,9 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 var useRovingFocus = require('./useRovingFocus.js');
 
 /** Get the next focusable RovingFocusItem */
@@ -17,8 +17,8 @@ function getPrevFocusableValue(items, value) {
     const currIndex = items.findIndex((item) => item.value === value);
     return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
-const RovingFocusItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'div';
+const RovingFocusItem = react.forwardRef(({ value, asChild, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
     const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
     const { getOrderedItems, getRovingProps, orientation } = useRovingFocus.useRovingFocus(focusValue);
     const rovingProps = getRovingProps({
@@ -63,7 +63,7 @@ const RovingFocusItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
             }
         },
     });
-    const mergedRefs = floatingUi_react.useMergeRefs([ref, rovingProps.ref]);
+    const mergedRefs = react$1.useMergeRefs([ref, rovingProps.ref]);
     return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
 });
 

package/dist/cjs/utilities/RovingFocus/RovingFocusRoot.js

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const RovingFocusContext = React.createContext({
+const RovingFocusContext = react.createContext({
     elements: { current: new Map() },
     getOrderedItems: () => [],
     setFocusableValue: () => {
@@ -18,13 +18,13 @@ const RovingFocusContext = React.createContext({
     focusableValue: null,
     orientation: 'horizontal',
 });
-const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'div';
-    const [focusableValue, setFocusableValue] = React.useState(null);
-    const [isShiftTabbing, setIsShiftTabbing] = React.useState(false);
-    const elements = React.useRef(new Map());
-    const myRef = React.useRef();
-    const refs = floatingUi_react.useMergeRefs([ref, myRef]);
+const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const [focusableValue, setFocusableValue] = react.useState(null);
+    const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
+    const elements = react.useRef(new Map());
+    const myRef = react.useRef();
+    const refs = react$1.useMergeRefs([ref, myRef]);
     const getOrderedItems = () => {
         if (!myRef.current)
             return [];
@@ -33,7 +33,7 @@ const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, orientation =
             .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
             .map(([value, element]) => ({ value, element }));
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
         setFocusableValue(activeValue ?? null);
     }, [activeValue]);
     return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {

package/dist/cjs/utilities/RovingFocus/useRovingFocus.js

@@ -1,14 +1,14 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var RovingFocusRoot = require('./RovingFocusRoot.js');
 
 // Logic from: https://www.joshuawootonn.com/react-roving-tabindex
 // Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
 /** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
 const useRovingFocus = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = React.useContext(RovingFocusRoot.RovingFocusContext);
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = react.useContext(RovingFocusRoot.RovingFocusContext);
     return {
         getOrderedItems,
         isFocusable: focusableValue === value,

package/dist/cjs/utilities/hooks/useDebounceCallback/useDebounceCallback.js

@@ -1,11 +1,11 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 function useDebounceCallback(callback, delay = 50) {
-    const timeoutRef = React.useRef(null);
-    React.useEffect(() => {
+    const timeoutRef = react.useRef(null);
+    react.useEffect(() => {
         // Cleanup the previous timeout on re-render
         return () => {
             if (timeoutRef.current) {

package/dist/cjs/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -1,9 +1,9 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 // https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/cjs/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 
 // Inspired by Sam Selikoff
@@ -19,7 +19,7 @@ var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorp
  * ```
  */
 function useSynchronizedAnimation(animationName) {
-    const ref = React.useRef(null);
+    const ref = react.useRef(null);
     useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         const animations = document
             .getAnimations()

package/dist/esm/components/Accordion/Accordion.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
  * Accordion component, contains `Accordion.Item` components.
  */
 const Accordion = forwardRef(function Accordion({ border = false, color = 'neutral', className, ...rest }, ref) {
-    return (jsx("div", { className: clsx('ds-accordion-group', className), "data-border": border || undefined, "data-color": color, ref: ref, ...rest }));
+    return (jsx("div", { className: cl('ds-accordion-group', className), "data-border": border || undefined, "data-color": color, ref: ref, ...rest }));
 });
 
 export { Accordion };

package/dist/esm/components/Accordion/AccordionContent.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * Accordion content component, contains the content of the accordion item.
@@ -9,7 +8,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * <AccordionContent>Content</AccordionContent>
  */
 const AccordionContent = forwardRef(function AccordionContent(rest, ref) {
-    return (jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("div", { ref: ref, ...rest }) }));
+    return jsx("div", { ref: ref, ...rest });
 });
 
 export { AccordionContent };

package/dist/esm/components/Accordion/AccordionHeading.js

@@ -1,17 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
- * Accordion header component, contains a button to toggle the content.
+ * Accordion heading component, contains a button to toggle the content.
  * @example
- * <AccordionHeader>Header</AccordionHeader>
+ * <AccordionHeading>Heading</AccordionHeading>
  */
 const AccordionHeading = forwardRef(function AccordionHeading({ className, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("u-summary", { class: clsx('ds-focus ds-paragraph ds-paragraph--sm ds-line-height--md', // Very TMP fix awaiting CSS modules
-            className), ref: ref, ...rest }) }));
+    /* Set `className` as `class` so react is happy */
+    return jsx("u-summary", { ref: ref, class: className, ...rest });
 });
 
 export { AccordionHeading };

package/dist/esm/components/Accordion/AccordionItem.js

@@ -1,76 +1,40 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import '../../node_modules/@u-elements/u-details/dist/u-details.js';
+import { useMergeRefs } from '@floating-ui/react';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
+import '@u-elements/u-details';
 
 /**
- * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * Accordion item component, contains `Accordion.Heading` and `Accordion.Content` components.
  * @example
  * <AccordionItem>
- *  <AccordionHeader>Header</AccordionHeader>
+ *  <AccordionHeading>Header</AccordionHeading>
  *  <AccordionContent>Content</AccordionContent>
  * </AccordionItem>
  */
-const AccordionItem = forwardRef(function AccordionItem({ className, open, defaultOpen = false, onFound, ...rest }, ref) {
-    const [internalOpen, setInternalOpen] = useState(open ?? defaultOpen);
-    const initialOpen = useRef(internalOpen); // Allow rendering initial open state on server, but animate in browser
-    const controlledOpen = useRef(internalOpen); // Using ref so we can access it inside useEffect without unbinding/binding event listeners
+const AccordionItem = forwardRef(function AccordionItem({ className, open, defaultOpen = false, 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]);
-    controlledOpen.current = open ?? internalOpen; // Update controlledOpen on prop change
-    // Control state with a useEffect to animate on prop change and prevent native <details> toggle
+    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 summary = details?.querySelector(':scope > :is(summary,u-summary)');
-        const handleSummaryClick = (event) => {
-            event?.preventDefault(); // Prevent native <details> toggle so we can animate
-            setInternalOpen((open) => !open);
-        };
-        const handleToggle = () => {
-            if (!details || details.open === controlledOpen.current)
+        const handleToggle = (event) => {
+            if (!details || details?.open === openRef.current)
                 return;
-            onFound?.();
-            setInternalOpen(details?.open || false);
-            window.requestAnimationFrame(() => {
-                details.open = controlledOpen.current;
-            }); // Let onFound run before correcting state
+            onToggleRef.current?.(event);
+            if (openRef.current !== undefined)
+                details.open = openRef.current; // Don't update DOM unless controlled state changes
         };
         details?.addEventListener('toggle', handleToggle, true);
-        summary?.addEventListener('click', handleSummaryClick);
-        return () => {
-            details?.removeEventListener('toggle', handleToggle, true);
-            summary?.removeEventListener('click', handleSummaryClick);
-        };
+        return () => details?.removeEventListener('toggle', handleToggle, true);
     }, []);
-    useEffect(() => {
-        animateHeight(detailsRef.current, controlledOpen.current);
-    }, [controlledOpen.current]);
-    return (jsx("u-details", { class: clsx('ds-accordion__item', className), open: initialOpen.current || undefined, ref: mergedRefs, ...rest }));
+    return (jsx("u-details", { class: cl('ds-accordion__item', className), open: (open ?? initialOpen.current) || undefined, ref: mergedRefs, ...rest }));
 });
-const animateHeight = (details, open) => {
-    const content = details?.querySelector(':scope > :not(summary, u-summary)');
-    const hasContent = content instanceof HTMLElement;
-    const hasAnimate = details && 'animate' in details;
-    const hasReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    details?.setAttribute('data-chevron-open', `${open}`); // Make flip on click
-    if (hasReducedMotion || !hasAnimate || !hasContent) {
-        if (details)
-            details.open = open;
-    }
-    else if (details.open !== open) {
-        details.open = true;
-        const opened = `${content.scrollHeight}px`;
-        content.style.overflow = 'clip'; // Clip content while animating
-        content.animate({
-            height: [open ? '0px' : opened, open ? opened : '0px'],
-            paddingBlock: [open ? '0px' : '', open ? '' : '0px'],
-        }, { duration: 400, easing: 'ease-in-out' }).onfinish = () => {
-            content.style.removeProperty('overflow'); // Restore overlow
-            details.open = open;
-        };
-    }
-};
 
 export { AccordionItem };

package/dist/esm/components/Alert/Alert.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
@@ -10,7 +9,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * <Alert color='info'>Dette er en informasjonsmelding</Alert>
  */
 const Alert = forwardRef(function Alert({ color = 'info', size = 'md', className, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { className: clsx('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
+    return (jsx("div", { className: cl('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }));
 });
 
 export { Alert };

package/dist/esm/components/Avatar/Avatar.js

@@ -1,15 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef, Fragment } from 'react';
 
-const fontSizeMap = {
-    xs: 'ds-paragraph--xs',
-    sm: 'ds-heading--2xs',
-    md: 'ds-heading--sm',
-    lg: 'ds-heading--md',
-};
 /**
  * Avatars are used to represent people or entities.
  *
@@ -28,7 +22,7 @@ const fontSizeMap = {
  */
 const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, color = 'accent', size = 'md', variant = 'circle', className, children, ...rest }, ref) {
     const Component = children && typeof children !== 'string' ? Slot : Fragment;
-    return (jsx("span", { ref: ref, className: clsx('ds-avatar', fontSizeMap[size], className), "data-variant": variant, "data-color": color, "data-size": size, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
+    return (jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-color": color, "data-size": size, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
 });
 
 export { Avatar };

package/dist/esm/components/Badge/Badge.js

@@ -1,14 +1,8 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
-const paragraphSizeMap = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-};
 /**
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
@@ -24,14 +18,8 @@ const paragraphSizeMap = {
  * </Badge>
  * ```
  */
-const Badge = forwardRef(({ color = 'accent', size = 'md', placement = 'top-right', overlap = 'rectangle', count, maxCount, children, className, ...rest }, ref) => {
-    return (jsxs("div", { className: clsx('ds-badge__wrapper', className), children: [children, jsx(Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsx("span", { className: clsx('ds-badge', count && 'ds-badge--count'), ref: ref, "data-size": size, "data-color": color, ...(children
-                        ? {
-                            'data-placement': placement,
-                            'data-overlap': overlap,
-                        }
-                        : {}), ...rest, children: maxCount && count && count > maxCount ? `${maxCount}+` : count }) })] }));
+const Badge = forwardRef(function Badge({ className, color = 'accent', count, maxCount, overlap = 'rectangle', placement = 'top-right', size = 'md', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-badge', className), "data-color": color, "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-overlap": rest.children ? overlap : null, "data-placement": rest.children ? placement : null, "data-size": size, ref: ref, ...rest }));
 });
-Badge.displayName = 'Badge';
 
 export { Badge };

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const Breadcrumbs = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), "data-size": size, ref: ref, ...rest })));
+
+export { Breadcrumbs };

package/dist/esm/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 
-const BreadcrumbsItem = forwardRef(({ className, ...rest }, ref) => (jsx("li", { ref: ref, className: clsx('ds-breadcrumbs__item', className), ...rest })));
-BreadcrumbsItem.displayName = 'BreadcrumbsItem';
+const BreadcrumbsItem = forwardRef(function BreadcrumbsItem({ className, ...rest }, ref) {
+    return jsx("li", { ref: ref, ...rest });
+});
 
 export { BreadcrumbsItem };

package/dist/esm/components/Breadcrumbs/BreadcrumbsLink.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 import { Link } from '../Link/Link.js';
 
-const BreadcrumbsLink = forwardRef(({ className, ...rest }, ref) => (jsx(Link, { className: clsx(`ds-breadcrumbs__link`, className), ref: ref, ...rest })));
-BreadcrumbsLink.displayName = 'BreadcrumbsLink';
+const BreadcrumbsLink = forwardRef(function BreadcrumbsLink(rest, ref) {
+    return jsx(Link, { ref: ref, ...rest });
+});
 
 export { BreadcrumbsLink };

package/dist/esm/components/Breadcrumbs/BreadcrumbsList.js

@@ -1,21 +1,19 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { useMergeRefs } from '@floating-ui/react';
 import { forwardRef, useRef, useEffect } from 'react';
 
-const BreadcrumbsList = forwardRef(({ className, ...rest }, ref) => {
+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('a') || [];
+        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", { className: clsx('ds-breadcrumbs__list', className), ref: mergedRefs, ...rest }));
+    return jsx("ol", { ref: mergedRefs, ...rest });
 });
-BreadcrumbsList.displayName = 'BreadcrumbsList';
 
 export { BreadcrumbsList };

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

@@ -1,36 +1,29 @@
 'use client';
+import { Breadcrumbs as Breadcrumbs$1 } from './Breadcrumbs.js';
 import { BreadcrumbsItem } from './BreadcrumbsItem.js';
 import { BreadcrumbsLink } from './BreadcrumbsLink.js';
 import { BreadcrumbsList } from './BreadcrumbsList.js';
-import { BreadcrumbsNav } from './BreadcrumbsNav.js';
-import { BreadcrumbsRoot } from './BreadcrumbsRoot.js';
 
 /**
  * Breadcrumbs are used to visualize the current page path.
  * @example
- * <Breadcrumbs.Root>
+ * <Breadcrumbs aria-label="You are here:">
  *  <Breadcrumbs.Link aria-label="Go back to level 2">Level 2</Breadcrumbs.Link>
- *  <Breadcrumbs.Nav aria-label="You are here:">
- *   <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.List>
- *  </Breadcrumbs.Nav>
- * <Breadcrumbs.Root>
+ *  <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.List>
+ * <Breadcrumbs>
  */
-const Breadcrumbs = {
-    Root: BreadcrumbsRoot,
-    Nav: BreadcrumbsNav,
+const Breadcrumbs = Object.assign(Breadcrumbs$1, {
     List: BreadcrumbsList,
     Item: BreadcrumbsItem,
     Link: BreadcrumbsLink,
-};
-Breadcrumbs.Root.displayName = 'Breadcrumbs.Root';
-Breadcrumbs.Nav.displayName = 'Breadcrumbs.Nav';
+});
 Breadcrumbs.List.displayName = 'Breadcrumbs.List';
 Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
 Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
 
-export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList, BreadcrumbsNav, BreadcrumbsRoot };
+export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList };

package/dist/esm/components/Button/Button.js

@@ -1,9 +1,8 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Slottable, Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slottable, Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 import { Spinner } from '../loaders/Spinner/Spinner.js';
 
 /**
@@ -11,12 +10,14 @@ import { Spinner } from '../loaders/Spinner/Spinner.js';
  * @example
  * <Button>Click me</Button>
  */
-const Button = forwardRef(function Button({ asChild, className, children, color = 'accent', icon = false, loading = false, size = 'md', type = 'button', variant = 'primary', ...rest }, ref) {
+const Button = forwardRef(function Button({ asChild, className, children, color = 'accent', icon = false, loading = false, size = 'md', variant = 'primary', ...rest }, ref) {
     const Component = asChild ? Slot : 'button';
     const spinnerColor = color === 'accent' ? color : 'neutral';
     // Fallbacks to undefined to prevent rendering attribute="false"
-    return (jsx(Paragraph, { variant: 'short', size: size, asChild: true, children: jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: clsx('ds-button', className), "data-color": color, "data-icon": icon || undefined, "data-size": size, "data-variant": variant, ref: ref, type: type, ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
-                ), jsx(Slottable, { children: children })] }) }));
+    return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: cl('ds-button', className), "data-color": color, "data-icon": icon || undefined, "data-size": size, "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', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
+            ), jsx(Slottable, { children: children })] }));
 });
 
 export { Button };

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

@@ -1,22 +1,40 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
 
 /**
  * Card component to present content in a structured way.
  * @example
  * <Card>
- *  <Card.Header>Header</Card.Header>
- *  <Card.Content>Content</Card.Content>
- *  <Card.Footer>Footer</Card.Footer>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
+const Card = forwardRef(function Card({ asChild = false, color = 'neutral', className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { ref: ref, className: clsx(`ds-card`, isLink && `ds-focus`, className), "data-color": color, "data-link": isLink ? '' : undefined, ...rest }));
+    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-color": color, ref: mergedRefs, ...rest }));
 });
-Card.displayName = 'Card';
 
 export { Card };

package/dist/esm/components/Card/CardBlock.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/index.js

@@ -1,18 +1,10 @@
 'use client';
 import { Card as Card$1 } from './Card.js';
-import { CardContent } from './CardContent.js';
-import { CardFooter } from './CardFooter.js';
-import { CardHeader } from './CardHeader.js';
-import { CardMedia } from './CardMedia.js';
+import { CardBlock } from './CardBlock.js';
 
-const Card = Card$1;
-Card.Header = CardHeader;
-Card.Content = CardContent;
-Card.Footer = CardFooter;
-Card.Media = CardMedia;
-Card.Header.displayName = 'Card.Header';
-Card.Content.displayName = 'Card.Content';
-Card.Footer.displayName = 'Card.Footer';
-Card.Media.displayName = 'Card.Media';
+const Card = Object.assign(Card$1, {
+    Block: CardBlock,
+});
+Card.Block.displayName = 'Card.Block';
 
-export { Card, CardContent, CardFooter, CardHeader, CardMedia };
+export { Card, CardBlock };