@digdir/designsystemet-react 1.0.0-rc.9 → 1.0.1

package/dist/esm/utilities/hooks/useCheckboxGroup/useCheckboxGroup.js

@@ -0,0 +1,119 @@
+'use client';
+import { useMergeRefs } from '@floating-ui/react';
+import { useState, useId, useRef, useEffect } from 'react';
+
+const toggleIndeterminate = (getIndeterminateInputs, getInputs) => {
+    const inputs = getIndeterminateInputs();
+    const checked = !!getInputs(true).length;
+    const unchecked = !!getInputs(false).length;
+    for (const input of inputs) {
+        input.indeterminate = unchecked && checked;
+        input.checked = !unchecked && checked;
+    }
+};
+function useCheckboxGroup(props) {
+    const { error, name: groupName, onChange, value = [], disabled, readOnly, required, } = props || {};
+    const [groupValue, setGroupValue] = useState(value);
+    const namedId = useId();
+    const errorId = useId();
+    const checkboxRefs = useRef(new Set());
+    const indeterminateRefs = useRef(new Set());
+    const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+    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 `Checkbox` component.
+         * Accepts value or object
+         * @example
+         * <Checkbox {...getCheckboxProps('value')} />
+         *
+         * @example allow indeterminate
+         * <Checkbox {...getCheckboxProps({ value: 'all', allowIndeterminate: true })} />
+         */
+        getCheckboxProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue || {};
+            const { allowIndeterminate = false, ref = undefined, value = '', ...rest } = props;
+            const inputRef = useRef(null);
+            const mergedRefs = useMergeRefs([ref, inputRef]);
+            const handleChange = () => {
+                const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+                setGroupValue(nextGroupValue);
+                onChange?.(nextGroupValue, groupValue);
+            };
+            const indeterminateChange = () => {
+                if (!inputRef.current)
+                    return;
+                const checked = !!inputRef.current.checked;
+                for (const input of getInputs(!checked)) {
+                    /* We use click to send both event and change checked state */
+                    input.click();
+                }
+            };
+            useEffect(() => {
+                if (!allowIndeterminate)
+                    return;
+                toggleIndeterminate(getIndeterminateInputs, getInputs);
+            }, [groupValue]);
+            useEffect(() => {
+                if (!inputRef.current)
+                    return;
+                const input = inputRef.current;
+                const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
+                refs.current.add(input);
+                if (getIndeterminateInputs().length)
+                    toggleIndeterminate(getIndeterminateInputs, getInputs);
+                return () => {
+                    refs.current.delete(input);
+                };
+            }, [value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                checked: allowIndeterminate ? undefined : groupValue.includes(value),
+                name: rest.name || groupName || namedId,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    allowIndeterminate && indeterminateChange();
+                    handleChange();
+                },
+                ref: mergedRefs,
+                value,
+                disabled: disabled || rest.disabled,
+                readOnly: readOnly || rest.readOnly,
+                required: required || rest.required,
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+export { useCheckboxGroup };

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

@@ -0,0 +1,25 @@
+'use client';
+import { useRef, useEffect } from 'react';
+
+function useDebounceCallback(callback, delay = 50) {
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        // Cleanup the previous timeout on re-render
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const debouncedCallback = (...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = window.setTimeout(() => {
+            callback(...args);
+        }, delay);
+    };
+    return debouncedCallback;
+}
+
+export { useDebounceCallback };

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

@@ -0,0 +1,7 @@
+'use client';
+import { useLayoutEffect, useEffect } from 'react';
+
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };

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

@@ -0,0 +1,47 @@
+'use client';
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../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] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    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;
+}
+
+export { useMediaQuery };

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

@@ -0,0 +1,95 @@
+'use client';
+import { useMemo } from 'react';
+
+const getSteps = (now, max, show) => {
+    const offset = (show - 1) / 2;
+    const start = 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, }) => 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]);
+
+export { usePagination };

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

@@ -0,0 +1,97 @@
+'use client';
+import { useMergeRefs } from '@floating-ui/react';
+import { useState, useId, useRef, useEffect } from '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] = useState(initalValue);
+    const errorId = useId();
+    const namedId = 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 = useRef(null);
+            const mergedRefs = 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;
+                    });
+                }
+            };
+            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,
+        },
+    };
+}
+
+export { useRadioGroup };

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

@@ -0,0 +1,46 @@
+'use client';
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../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 = useRef(null);
+    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;
+}
+
+export { useSynchronizedAnimation };

package/dist/react-types.d.ts

@@ -0,0 +1,11 @@
+import type { Size } from '@digdir/designsystemet-react';
+import type { Color } from '@digdir/designsystemet-react/colors';
+
+declare global {
+  namespace React {
+    interface HTMLAttributes<T> {
+      'data-size'?: Size | (string & {});
+      'data-color'?: Color | (string & {});
+    }
+  }
+}

package/dist/types/colors.d.ts

@@ -0,0 +1,24 @@
+declare const emptyObjectSymbol: unique symbol;
+type EmptyObject = {
+    [emptyObjectSymbol]?: never;
+};
+/**
+ * Base interface for available colors in the design system.
+ * The CLI will generate augmentations of this interface to allow
+ * type safety of custom color names.
+ */
+export interface MainAndSupportColors {
+}
+/**
+ * If {@link MainAndSupportColors} has been extended to include color names, return T,
+ * otherwise return the arbitrary string type.
+ */
+type ColorWithFallback<T> = MainAndSupportColors extends EmptyObject ? string : T;
+export type SeverityInfo = 'info';
+export type SeveritySuccess = 'success';
+export type SeverityWarning = 'warning';
+export type SeverityDanger = 'danger';
+export type SeverityColors = SeverityInfo | SeveritySuccess | SeverityWarning | SeverityDanger;
+export type Color = ColorWithFallback<'neutral' | keyof MainAndSupportColors>;
+export {};
+//# sourceMappingURL=colors.d.ts.map

package/dist/types/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,iBAAiB,EAAE,OAAO,MAAM,CAAC;AAC/C,KAAK,WAAW,GAAG;IAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEnD;;;;GAIG;AAGH,MAAM,WAAW,oBAAoB;CAAG;AAExC;;;GAGG;AACH,KAAK,iBAAiB,CAAC,CAAC,IAAI,oBAAoB,SAAS,WAAW,GAChE,MAAM,GACN,CAAC,CAAC;AAEN,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAClC,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;AACxC,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;AACxC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,cAAc,GACtB,YAAY,GACZ,eAAe,GACf,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,MAAM,KAAK,GAAG,iBAAiB,CAAC,SAAS,GAAG,MAAM,oBAAoB,CAAC,CAAC"}

package/dist/types/components/Alert/Alert.d.ts

@@ -1,40 +1,27 @@
 import type { HTMLAttributes } from 'react';
-type Severity = 'info' | 'warning' | 'success' | 'danger';
-export type AlertProps = {
-    /** Sets color & icon according to severity */
-    severity?: Severity;
-    /** Adds a shadow to elevate the component */
-    elevated?: boolean;
-    /** Sets `title` on the icon.
-     *
-     * Use this to inform screenreaders of severity.
-     *  Defaults to Norwegian. */
-    iconTitle?: string;
+import type { SeverityColors } from '../../colors';
+import type { DefaultProps } from '../../types';
+import type { MergeRight } from '../../utilities';
+export type AlertProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
     /**
-     * Sets the size of the alert.
-     * Does not affect font size.
+     * Sets color and icon.
      *
-     * @default md
+     * @default 'info'
      */
-    size?: 'sm' | 'md' | 'lg';
-} & HTMLAttributes<HTMLDivElement>;
-export declare const Alert: import("react").ForwardRefExoticComponent<{
-    /** Sets color & icon according to severity */
-    severity?: Severity | undefined;
-    /** Adds a shadow to elevate the component */
-    elevated?: boolean | undefined;
-    /** Sets `title` on the icon.
-     *
-     * Use this to inform screenreaders of severity.
-     *  Defaults to Norwegian. */
-    iconTitle?: string | undefined;
+    'data-color'?: SeverityColors;
+}>;
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
+ * @example
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
+ */
+export declare const Alert: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "data-color"> & {
     /**
-     * Sets the size of the alert.
-     * Does not affect font size.
+     * Sets color and icon.
      *
-     * @default md
+     * @default 'info'
      */
-    size?: "sm" | "md" | "lg" | undefined;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
+    'data-color'?: SeverityColors;
+} & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Alert.d.ts.map

package/dist/types/components/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA4B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;iCAG6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AACnC,eAAO,MAAM,KAAK;IAjBhB,8CAA8C;;IAE9C,6CAA6C;;IAE7C;;;iCAG6B;;IAE7B;;;;;OAKG;;mFA8CJ,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,EAC7C;IACE;;;;OAIG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,CACF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,KAAK;IAfd;;;;OAIG;mBACY,cAAc;wCAsB/B,CAAC"}

package/dist/types/components/Alert/index.d.ts

@@ -1,2 +1,3 @@
-export * from './Alert';
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/components/Avatar/Avatar.d.ts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { DefaultProps, Size } from '../../types';
+import type { MergeRight } from '../../utilities';
+export type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
+    /**
+     * The name of the person the avatar represents.
+     */
+    'aria-label': string;
+    /**
+     * The size of the avatar.
+     */
+    'data-size'?: 'xs' | Size;
+    /**
+     * The shape of the avatar.
+     *
+     * @default 'circle'
+     */
+    variant?: 'circle' | 'square';
+    /**
+     * Initials to display inside the avatar.
+     */
+    initials?: string;
+    /**
+     * Image, icon or initials to display inside the avatar.
+     *
+     * Gets `aria-hidden="true"`
+     */
+    children?: ReactNode;
+}>;
+/**
+ * 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>
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "data-size" | "aria-label" | "children" | "variant" | "initials"> & {
+    /**
+     * The name of the person the avatar represents.
+     */
+    'aria-label': string;
+    /**
+     * The size of the avatar.
+     */
+    'data-size'?: "xs" | Size;
+    /**
+     * The shape of the avatar.
+     *
+     * @default 'circle'
+     */
+    variant?: "circle" | "square";
+    /**
+     * Initials to display inside the avatar.
+     */
+    initials?: string;
+    /**
+     * Image, icon or initials to display inside the avatar.
+     *
+     * Gets `aria-hidden="true"`
+     */
+    children?: ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/types/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C;IACE;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;IA3Cf;;OAEG;kBACW,MAAM;IACpB;;OAEG;kBACW,IAAI,GAAG,IAAI;IACzB;;;;OAIG;cACO,QAAQ,GAAG,QAAQ;IAC7B;;OAEG;eACQ,MAAM;IACjB;;;;OAIG;eACQ,SAAS;yCAiDtB,CAAC"}

package/dist/types/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}