@uppsala-designsystem/ui 1.5.0

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

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+
+// from https://usehooks-ts.com/react-hook/use-media-query
+const IS_SERVER = typeof window === 'undefined';
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = react.useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+
+exports.useMediaQuery = useMediaQuery;

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

@@ -0,0 +1,57 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+// https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useMergeRefs.ts
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ */
+function useMergeRefs(refs) {
+    const cleanupRef = react.useRef(undefined);
+    const refEffect = react.useCallback((instance) => {
+        const cleanups = refs.map((ref) => {
+            if (ref == null) {
+                return;
+            }
+            if (typeof ref === "function") {
+                const refCallback = ref;
+                // biome-ignore lint/suspicious/noConfusingVoidType: @types-react wants `void` here
+                const refCleanup = refCallback(instance);
+                return typeof refCleanup === "function"
+                    ? refCleanup
+                    : () => {
+                        refCallback(null);
+                    };
+            }
+            ref.current = instance;
+            return () => {
+                ref.current = null;
+            };
+        });
+        return () => {
+            for (const refCleanup of cleanups) {
+                refCleanup?.();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+    return react.useMemo(() => {
+        if (refs.every((ref) => ref == null)) {
+            return null;
+        }
+        return (value) => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = undefined;
+            }
+            if (value != null) {
+                cleanupRef.current =
+                    refEffect(value);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}
+
+exports.useMergeRefs = useMergeRefs;

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

@@ -0,0 +1,97 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const getSteps = (now, max, show) => {
+    const offset = (show - 1) / 2;
+    const start = Math.max(1, Math.min(Math.max(now - Math.floor(offset), 1), max - show + 1));
+    const end = Math.min(Math.max(now + Math.ceil(offset), show), max);
+    const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
+    if (show > 4 && start > 1)
+        pages.splice(0, 2, 1, 0);
+    if (show > 3 && end < max)
+        pages.splice(-2, 2, 0, max);
+    return pages;
+};
+/**
+ * Hook to help manage pagination state
+ *
+ * @example
+ * const { pages, nextButtonProps, prevButtonProps } = usePagination({
+ *   currentPage: page,
+ *   totalPages: 10,
+ *   showPages: 7,
+ *   setCurrentPage,
+ * })
+ *
+ * <Pagination>
+ *   <Pagination.Item>
+ *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ *   {pages.map(({ page, itemKey, buttonProps }) => (
+ *     <Pagination.Item key={itemKey}>
+ *       {typeof page === 'number' && (
+ *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+ *           {page}
+ *         </Pagination.Button>
+ *       )}
+ *     </Pagination.Item>
+ *   ))}
+ *   <Pagination.Item>
+ *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination>
+ **/
+const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages = 1, showPages = 7, }) => react.useMemo(() => {
+    const hasNext = currentPage < totalPages;
+    const hasPrev = currentPage !== 1;
+    const handleClick = (page) => (event) => {
+        if (page < 1 || page > totalPages)
+            return event.preventDefault(); // Prevent out of bounds navigation
+        onChange?.(event, page);
+        if (!event.defaultPrevented)
+            setCurrentPage?.(page); // Allow stopping change by calling event.preventDefault() in onChange
+    };
+    return {
+        /** Number of steps */
+        pages: getSteps(currentPage, totalPages, showPages).map((page, index) => ({
+            /**
+             * Page number or "ellipsis" for the ellipsis item
+             */
+            page: page || "ellipsis",
+            /**
+             * Unique key for the item
+             */
+            itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
+            /**
+             * Properties to spread on Pagination.Button
+             */
+            buttonProps: (page
+                ? {
+                    "aria-current": page === currentPage ? "page" : undefined,
+                    onClick: handleClick(page),
+                    variant: page === currentPage ? "primary" : "tertiary",
+                }
+                : null),
+        })),
+        /** Properties to spread on Pagination.Button used for previous naviagation */
+        prevButtonProps: {
+            "aria-disabled": !hasPrev, // Using aria-disabled to support all HTML elements because of potential asChild
+            onClick: handleClick(currentPage - 1),
+            variant: "tertiary",
+        },
+        /** Properties to spread on Pagination.Button used for next naviagation */
+        nextButtonProps: {
+            "aria-disabled": !hasNext, // Using aria-disabled to support all HTML elements because of potential asChild
+            onClick: handleClick(currentPage + 1),
+            variant: "tertiary",
+        },
+        /** Indication if previous page action should be shown or not */
+        hasPrev,
+        /** Indication if next page action should be shown or not */
+        hasNext,
+    };
+}, [currentPage, totalPages, showPages]);
+
+exports.usePagination = usePagination;

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

@@ -0,0 +1,99 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+
+/**
+ * useRadioGroup is used to group multiple <Radio> components
+ * @example
+ * const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+ *   disabled: false,
+ *   error: 'Validation message text',
+ *   name: 'group-name',
+ *   onChange: (nextValue, prevValue) => {},
+ *   readOnly: false,
+ *   required: true,
+ *   value: '',
+ * });
+ */
+function useRadioGroup({ error, readOnly, required, disabled, name, onChange, value: initalValue = '', } = {}) {
+    const [groupValue, setGroupValue] = react.useState(initalValue);
+    const errorId = react.useId();
+    const namedId = react.useId();
+    const radioGroupName = name || namedId;
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Radio` component.
+         * @example
+         * <Radio label="Option 1" {...getRadioProps('option-1')} />
+         */
+        getRadioProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue;
+            const { ref = undefined, value = '', ...rest } = props;
+            const localRef = react.useRef(null);
+            const mergedRefs = react$1.useMergeRefs([ref, localRef]);
+            const handleChange = () => {
+                const input = localRef.current;
+                const isInput = input instanceof HTMLInputElement;
+                if (isInput && input.name === radioGroupName) {
+                    setGroupValue((prevValue) => {
+                        onChange?.(input.value, prevValue);
+                        return input.value;
+                    });
+                }
+            };
+            react.useEffect(() => {
+                if (!localRef.current)
+                    return;
+                localRef.current.checked = value === groupValue;
+            }, [groupValue, value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                name: radioGroupName,
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                value,
+                ref: mergedRefs,
+                required: required || rest.required,
+                readOnly: readOnly || rest.readOnly,
+                disabled: disabled || rest.disabled,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    handleChange();
+                },
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+exports.useRadioGroup = useRadioGroup;

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

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+
+// Inspired by Sam Selikoff
+// https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+function useSynchronizedAnimation(animationName) {
+    const ref = react.useRef(null);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const animations = document
+            .getAnimations()
+            .filter((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const firstOfType = animations.find((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+        if (myAnimation && myAnimation === firstOfType) {
+            myAnimation.currentTime = 0;
+        }
+        if (myAnimation &&
+            firstOfType?.currentTime &&
+            myAnimation !== firstOfType) {
+            myAnimation.currentTime = firstOfType.currentTime;
+        }
+        return () => {
+            if (myAnimation && firstOfType?.currentTime) {
+                myAnimation.currentTime = firstOfType.currentTime;
+            }
+        };
+    }, [animationName]);
+    return ref;
+}
+
+exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/cjs/utilities/omit/omit.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+/**
+ * Returns a partial copy of an object omitting the keys specified.
+ * @param {Array} names an array of String property names to omit from the new object
+ * @param {Object} obj The object to copy from
+ * @return {Object} A new object with properties from `names` not on it.
+ * @example omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}
+ */
+const omit = (names, obj) => {
+    const result = {};
+    const index = {};
+    let idx = 0;
+    const len = names.length;
+    while (idx < len) {
+        index[names[idx]] = 1;
+        idx += 1;
+    }
+    for (const prop in obj) {
+        if (!Object.prototype.hasOwnProperty.call(index, prop)) {
+            result[prop] = obj[prop];
+        }
+    }
+    return result;
+};
+
+exports.omit = omit;

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'>Detta är ett informationsmeddelande</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,29 @@
+'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 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: children }) }));
+});
+
+export { Avatar };

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

@@ -0,0 +1,14 @@
+'use client';
+import { Badge as Badge$1 } from './Badge.js';
+import { BadgePosition } from './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, { Position: BadgePosition });
+Badge.Position.displayName = 'Badge.Position';
+
+export { Badge, BadgePosition };

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du är här:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tillbaka till 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(({ "aria-label": ariaLabel = "Du är här:", className, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, className: cl("ds-breadcrumbs", className), ref: ref, ...rest })));
+
+export { Breadcrumbs };

package/dist/esm/components/Breadcrumbs/BreadcrumbsItem.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/BreadcrumbsLink.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/BreadcrumbsList.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { forwardRef, useRef, useEffect } from 'react';
+
+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 as Breadcrumbs$1 } from './Breadcrumbs.js';
+import { BreadcrumbsItem } from './BreadcrumbsItem.js';
+import { BreadcrumbsLink } from './BreadcrumbsLink.js';
+import { BreadcrumbsList } from './BreadcrumbsList.js';
+
+/**
+ * `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 = Object.assign(Breadcrumbs$1, {
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+});
+Breadcrumbs.List.displayName = 'Breadcrumbs.List';
+Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
+Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
+
+export { 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: children })] }));
+});
+
+export { Button };

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

@@ -0,0 +1,41 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
+
+/**
+ * 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/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 };