@nlabs/gothamui 1.8.0

package/lib/components/Avatar/Avatar.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '@nlabs/utils';
+import { createContext, useContext, useMemo, useState } from 'react';
+const AvatarContext = /*#__PURE__*/ createContext(null);
+const sizeClasses = {
+    default: 'size-8',
+    lg: 'size-10',
+    sm: 'size-6'
+};
+const badgeClasses = {
+    default: 'size-2.5 [&>svg]:size-2',
+    lg: 'size-3 [&>svg]:size-2',
+    sm: 'size-2 [&>svg]:hidden'
+};
+const textClasses = {
+    default: 'text-sm',
+    lg: 'text-sm',
+    sm: 'text-xs'
+};
+const avatarClasses = 'relative inline-grid shrink-0 align-middle outline-none *:col-start-1 *:row-start-1';
+const fallbackClasses = 'flex size-full items-center justify-center bg-zinc-100 font-medium text-zinc-600 ring-1 ring-zinc-950/5 dark:bg-zinc-800 dark:text-zinc-300 dark:ring-white/10';
+const shapeClasses = {
+    round: 'rounded-full *:rounded-full',
+    square: 'rounded-lg *:rounded-lg'
+};
+const useAvatarContext = ()=>{
+    const context = useContext(AvatarContext);
+    if (!context) {
+        throw new Error('Avatar components must be used within Avatar.');
+    }
+    return context;
+};
+const useAvatarValue = (size, square)=>{
+    const [imageLoaded, setImageLoaded] = useState(false);
+    return useMemo(()=>({
+            imageLoaded,
+            registerImageLoaded: setImageLoaded,
+            size,
+            square
+        }), [
+        imageLoaded,
+        size,
+        square
+    ]);
+};
+const renderAvatarContent = ({ alt, children, initials, onError, onLoad, src })=>children ?? /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            src ? /*#__PURE__*/ _jsx(AvatarImage, {
+                alt: alt,
+                onError: onError,
+                onLoad: onLoad,
+                src: src
+            }) : null,
+            initials ? /*#__PURE__*/ _jsx(AvatarFallback, {
+                children: initials
+            }) : null
+        ]
+    });
+export const Avatar = ({ alt = '', children, className, initials, onError, onLoad, size = 'default', square = false, src, ...props })=>{
+    const value = useAvatarValue(size, square);
+    return /*#__PURE__*/ _jsx(AvatarContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: cn(avatarClasses, square ? shapeClasses.square : shapeClasses.round, sizeClasses[size], className),
+            "data-size": size,
+            "data-slot": "avatar",
+            "data-square": square ? 'true' : undefined,
+            ...props,
+            children: renderAvatarContent({
+                alt,
+                children,
+                initials,
+                onError,
+                onLoad,
+                src
+            })
+        })
+    });
+};
+export const AvatarImage = ({ alt = '', className, onError, onLoad, ...props })=>{
+    const { registerImageLoaded } = useAvatarContext();
+    return /*#__PURE__*/ _jsx("img", {
+        alt: alt,
+        className: cn('size-full object-cover', className),
+        "data-slot": "avatar-image",
+        onError: (event)=>{
+            registerImageLoaded(false);
+            onError?.(event);
+        },
+        onLoad: (event)=>{
+            registerImageLoaded(true);
+            onLoad?.(event);
+        },
+        ...props
+    });
+};
+export const AvatarFallback = ({ children, className, ...props })=>{
+    const { imageLoaded, size } = useAvatarContext();
+    if (imageLoaded) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn(fallbackClasses, textClasses[size], className),
+        "data-slot": "avatar-fallback",
+        ...props,
+        children: children
+    });
+};
+export const AvatarBadge = ({ className, ...props })=>{
+    const { size } = useAvatarContext();
+    return /*#__PURE__*/ _jsx("span", {
+        className: cn('absolute right-0 bottom-0 z-10 inline-flex translate-x-1/4 translate-y-1/4 items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-white select-none dark:ring-zinc-900', badgeClasses[size], className),
+        "data-slot": "avatar-badge",
+        ...props
+    });
+};
+export const AvatarButton = ({ alt = '', children, className, initials, onError, onLoad, size = 'default', square = false, src, type = 'button', ...props })=>{
+    const value = useAvatarValue(size, square);
+    return /*#__PURE__*/ _jsx(AvatarContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ _jsx("button", {
+            className: cn(avatarClasses, 'cursor-pointer disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-[3px] focus-visible:ring-ring/50', square ? shapeClasses.square : shapeClasses.round, sizeClasses[size], className),
+            "data-size": size,
+            "data-slot": "avatar-button",
+            "data-square": square ? 'true' : undefined,
+            type: type,
+            ...props,
+            children: renderAvatarContent({
+                alt,
+                children,
+                initials,
+                onError,
+                onLoad,
+                src
+            })
+        })
+    });
+};
+export const AvatarGroup = ({ className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-white *:data-[slot=avatar-button]:ring-2 *:data-[slot=avatar-button]:ring-white dark:*:data-[slot=avatar]:ring-zinc-900 dark:*:data-[slot=avatar-button]:ring-zinc-900', className),
+        "data-slot": "avatar-group",
+        ...props
+    });
+export const AvatarGroupCount = ({ children, className, ...props })=>{
+    const countLabel = children ?? '+0';
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('relative flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-100 text-sm font-medium text-zinc-600 ring-2 ring-white dark:bg-zinc-800 dark:text-zinc-300 dark:ring-zinc-900 [&>svg]:size-4', className),
+        "data-slot": "avatar-group-count",
+        ...props,
+        children: countLabel
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0F2YXRhci9BdmF0YXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Y259IGZyb20gJ0BubGFicy91dGlscyc7XG5pbXBvcnQge2NyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHQsIHVzZU1lbW8sIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtCdXR0b25IVE1MQXR0cmlidXRlcywgSFRNTEF0dHJpYnV0ZXMsIEltZ0hUTUxBdHRyaWJ1dGVzLCBSZWFjdE5vZGUsIFN5bnRoZXRpY0V2ZW50fSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCB0eXBlIEF2YXRhclNpemUgPSAnZGVmYXVsdCcgfCAnc20nIHwgJ2xnJztcblxudHlwZSBBdmF0YXJDb250ZXh0VHlwZSA9IHtcbiAgcmVhZG9ubHkgaW1hZ2VMb2FkZWQ6IGJvb2xlYW47XG4gIHJlYWRvbmx5IHJlZ2lzdGVySW1hZ2VMb2FkZWQ6IChsb2FkZWQ6IGJvb2xlYW4pID0+IHZvaWQ7XG4gIHJlYWRvbmx5IHNpemU6IEF2YXRhclNpemU7XG4gIHJlYWRvbmx5IHNxdWFyZTogYm9vbGVhbjtcbn07XG5cbmNvbnN0IEF2YXRhckNvbnRleHQgPSBjcmVhdGVDb250ZXh0PEF2YXRhckNvbnRleHRUeXBlIHwgbnVsbD4obnVsbCk7XG5cbmNvbnN0IHNpemVDbGFzc2VzOiBSZWNvcmQ8QXZhdGFyU2l6ZSwgc3RyaW5nPiA9IHtcbiAgZGVmYXVsdDogJ3NpemUtOCcsXG4gIGxnOiAnc2l6ZS0xMCcsXG4gIHNtOiAnc2l6ZS02J1xufTtcblxuY29uc3QgYmFkZ2VDbGFzc2VzOiBSZWNvcmQ8QXZhdGFyU2l6ZSwgc3RyaW5nPiA9IHtcbiAgZGVmYXVsdDogJ3NpemUtMi41IFsmPnN2Z106c2l6ZS0yJyxcbiAgbGc6ICdzaXplLTMgWyY+c3ZnXTpzaXplLTInLFxuICBzbTogJ3NpemUtMiBbJj5zdmddOmhpZGRlbidcbn07XG5cbmNvbnN0IHRleHRDbGFzc2VzOiBSZWNvcmQ8QXZhdGFyU2l6ZSwgc3RyaW5nPiA9IHtcbiAgZGVmYXVsdDogJ3RleHQtc20nLFxuICBsZzogJ3RleHQtc20nLFxuICBzbTogJ3RleHQteHMnXG59O1xuXG5jb25zdCBhdmF0YXJDbGFzc2VzID0gJ3JlbGF0aXZlIGlubGluZS1ncmlkIHNocmluay0wIGFsaWduLW1pZGRsZSBvdXRsaW5lLW5vbmUgKjpjb2wtc3RhcnQtMSAqOnJvdy1zdGFydC0xJztcbmNvbnN0IGZhbGxiYWNrQ2xhc3NlcyA9ICdmbGV4IHNpemUtZnVsbCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgYmctemluYy0xMDAgZm9udC1tZWRpdW0gdGV4dC16aW5jLTYwMCByaW5nLTEgcmluZy16aW5jLTk1MC81IGRhcms6YmctemluYy04MDAgZGFyazp0ZXh0LXppbmMtMzAwIGRhcms6cmluZy13aGl0ZS8xMCc7XG5cbmNvbnN0IHNoYXBlQ2xhc3NlcyA9IHtcbiAgcm91bmQ6ICdyb3VuZGVkLWZ1bGwgKjpyb3VuZGVkLWZ1bGwnLFxuICBzcXVhcmU6ICdyb3VuZGVkLWxnICo6cm91bmRlZC1sZydcbn07XG5cbmNvbnN0IHVzZUF2YXRhckNvbnRleHQgPSAoKSA9PiB7XG4gIGNvbnN0IGNvbnRleHQgPSB1c2VDb250ZXh0KEF2YXRhckNvbnRleHQpO1xuXG4gIGlmICghY29udGV4dCkge1xuICAgIHRocm93IG5ldyBFcnJvcignQXZhdGFyIGNvbXBvbmVudHMgbXVzdCBiZSB1c2VkIHdpdGhpbiBBdmF0YXIuJyk7XG4gIH1cblxuICByZXR1cm4gY29udGV4dDtcbn07XG5cbmNvbnN0IHVzZUF2YXRhclZhbHVlID0gKHNpemU6IEF2YXRhclNpemUsIHNxdWFyZTogYm9vbGVhbikgPT4ge1xuICBjb25zdCBbaW1hZ2VMb2FkZWQsIHNldEltYWdlTG9hZGVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICByZXR1cm4gdXNlTWVtbygoKSA9PiAoe1xuICAgIGltYWdlTG9hZGVkLFxuICAgIHJlZ2lzdGVySW1hZ2VMb2FkZWQ6IHNldEltYWdlTG9hZGVkLFxuICAgIHNpemUsXG4gICAgc3F1YXJlXG4gIH0pLCBbaW1hZ2VMb2FkZWQsIHNpemUsIHNxdWFyZV0pO1xufTtcblxuY29uc3QgcmVuZGVyQXZhdGFyQ29udGVudCA9ICh7XG4gIGFsdCxcbiAgY2hpbGRyZW4sXG4gIGluaXRpYWxzLFxuICBvbkVycm9yLFxuICBvbkxvYWQsXG4gIHNyY1xufToge1xuICByZWFkb25seSBhbHQ6IHN0cmluZztcbiAgcmVhZG9ubHkgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIHJlYWRvbmx5IGluaXRpYWxzPzogUmVhY3ROb2RlO1xuICByZWFkb25seSBvbkVycm9yPzogKGV2ZW50OiBTeW50aGV0aWNFdmVudDxIVE1MSW1hZ2VFbGVtZW50PikgPT4gdm9pZDtcbiAgcmVhZG9ubHkgb25Mb2FkPzogKGV2ZW50OiBTeW50aGV0aWNFdmVudDxIVE1MSW1hZ2VFbGVtZW50PikgPT4gdm9pZDtcbiAgcmVhZG9ubHkgc3JjPzogc3RyaW5nO1xufSkgPT4gY2hpbGRyZW4gPz8gKFxuICA8PlxuICAgIHtzcmMgPyAoXG4gICAgICA8QXZhdGFySW1hZ2VcbiAgICAgICAgYWx0PXthbHR9XG4gICAgICAgIG9uRXJyb3I9e29uRXJyb3J9XG4gICAgICAgIG9uTG9hZD17b25Mb2FkfVxuICAgICAgICBzcmM9e3NyY31cbiAgICAgIC8+XG4gICAgKSA6IG51bGx9XG4gICAge2luaXRpYWxzID8gPEF2YXRhckZhbGxiYWNrPntpbml0aWFsc308L0F2YXRhckZhbGxiYWNrPiA6IG51bGx9XG4gIDwvPlxuKTtcblxudHlwZSBBdmF0YXJJbWFnZUV2ZW50SGFuZGxlciA9IChldmVudDogU3ludGhldGljRXZlbnQ8SFRNTEltYWdlRWxlbWVudD4pID0+IHZvaWQ7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQXZhdGFyUHJvcHMgZXh0ZW5kcyBPbWl0PEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PiwgJ29uRXJyb3InIHwgJ29uTG9hZCc+IHtcbiAgcmVhZG9ubHkgYWx0Pzogc3RyaW5nO1xuICByZWFkb25seSBpbml0aWFscz86IFJlYWN0Tm9kZTtcbiAgcmVhZG9ubHkgb25FcnJvcj86IEF2YXRhckltYWdlRXZlbnRIYW5kbGVyO1xuICByZWFkb25seSBvbkxvYWQ/OiBBdmF0YXJJbWFnZUV2ZW50SGFuZGxlcjtcbiAgcmVhZG9ubHkgc2l6ZT86IEF2YXRhclNpemU7XG4gIHJlYWRvbmx5IHNxdWFyZT86IGJvb2xlYW47XG4gIHJlYWRvbmx5IHNyYz86IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IEF2YXRhciA9ICh7XG4gIGFsdCA9ICcnLFxuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBpbml0aWFscyxcbiAgb25FcnJvcixcbiAgb25Mb2FkLFxuICBzaXplID0gJ2RlZmF1bHQnLFxuICBzcXVhcmUgPSBmYWxzZSxcbiAgc3JjLFxuICAuLi5wcm9wc1xufTogQXZhdGFyUHJvcHMpID0+IHtcbiAgY29uc3QgdmFsdWUgPSB1c2VBdmF0YXJWYWx1ZShzaXplLCBzcXVhcmUpO1xuXG4gIHJldHVybiAoXG4gICAgPEF2YXRhckNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e3ZhbHVlfT5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgICBhdmF0YXJDbGFzc2VzLFxuICAgICAgICAgIHNxdWFyZSA/IHNoYXBlQ2xhc3Nlcy5zcXVhcmUgOiBzaGFwZUNsYXNzZXMucm91bmQsXG4gICAgICAgICAgc2l6ZUNsYXNzZXNbc2l6ZV0sXG4gICAgICAgICAgY2xhc3NOYW1lXG4gICAgICAgICl9XG4gICAgICAgIGRhdGEtc2l6ZT17c2l6ZX1cbiAgICAgICAgZGF0YS1zbG90PVwiYXZhdGFyXCJcbiAgICAgICAgZGF0YS1zcXVhcmU9e3NxdWFyZSA/ICd0cnVlJyA6IHVuZGVmaW5lZH1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICB7cmVuZGVyQXZhdGFyQ29udGVudCh7XG4gICAgICAgICAgYWx0LFxuICAgICAgICAgIGNoaWxkcmVuLFxuICAgICAgICAgIGluaXRpYWxzLFxuICAgICAgICAgIG9uRXJyb3IsXG4gICAgICAgICAgb25Mb2FkLFxuICAgICAgICAgIHNyY1xuICAgICAgICB9KX1cbiAgICAgIDwvZGl2PlxuICAgIDwvQXZhdGFyQ29udGV4dC5Qcm92aWRlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBBdmF0YXJJbWFnZSA9ICh7XG4gIGFsdCA9ICcnLFxuICBjbGFzc05hbWUsXG4gIG9uRXJyb3IsXG4gIG9uTG9hZCxcbiAgLi4ucHJvcHNcbn06IEltZ0hUTUxBdHRyaWJ1dGVzPEhUTUxJbWFnZUVsZW1lbnQ+KSA9PiB7XG4gIGNvbnN0IHtyZWdpc3RlckltYWdlTG9hZGVkfSA9IHVzZUF2YXRhckNvbnRleHQoKTtcblxuICByZXR1cm4gKFxuICAgIDxpbWdcbiAgICAgIGFsdD17YWx0fVxuICAgICAgY2xhc3NOYW1lPXtjbignc2l6ZS1mdWxsIG9iamVjdC1jb3ZlcicsIGNsYXNzTmFtZSl9XG4gICAgICBkYXRhLXNsb3Q9XCJhdmF0YXItaW1hZ2VcIlxuICAgICAgb25FcnJvcj17KGV2ZW50KSA9PiB7XG4gICAgICAgIHJlZ2lzdGVySW1hZ2VMb2FkZWQoZmFsc2UpO1xuICAgICAgICBvbkVycm9yPy4oZXZlbnQpO1xuICAgICAgfX1cbiAgICAgIG9uTG9hZD17KGV2ZW50KSA9PiB7XG4gICAgICAgIHJlZ2lzdGVySW1hZ2VMb2FkZWQodHJ1ZSk7XG4gICAgICAgIG9uTG9hZD8uKGV2ZW50KTtcbiAgICAgIH19XG4gICAgICB7Li4ucHJvcHN9XG4gICAgLz5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBBdmF0YXJGYWxsYmFjayA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG4gIC4uLnByb3BzXG59OiBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4pID0+IHtcbiAgY29uc3Qge2ltYWdlTG9hZGVkLCBzaXplfSA9IHVzZUF2YXRhckNvbnRleHQoKTtcblxuICBpZiAoaW1hZ2VMb2FkZWQpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgZmFsbGJhY2tDbGFzc2VzLFxuICAgICAgICB0ZXh0Q2xhc3Nlc1tzaXplXSxcbiAgICAgICAgY2xhc3NOYW1lXG4gICAgICApfVxuICAgICAgZGF0YS1zbG90PVwiYXZhdGFyLWZhbGxiYWNrXCJcbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgQXZhdGFyQmFkZ2UgPSAoe2NsYXNzTmFtZSwgLi4ucHJvcHN9OiBIVE1MQXR0cmlidXRlczxIVE1MU3BhbkVsZW1lbnQ+KSA9PiB7XG4gIGNvbnN0IHtzaXplfSA9IHVzZUF2YXRhckNvbnRleHQoKTtcblxuICByZXR1cm4gKFxuICAgIDxzcGFuXG4gICAgICBjbGFzc05hbWU9e2NuKFxuICAgICAgICAnYWJzb2x1dGUgcmlnaHQtMCBib3R0b20tMCB6LTEwIGlubGluZS1mbGV4IHRyYW5zbGF0ZS14LTEvNCB0cmFuc2xhdGUteS0xLzQgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHJvdW5kZWQtZnVsbCBiZy1wcmltYXJ5IHRleHQtcHJpbWFyeS1mb3JlZ3JvdW5kIHJpbmctMiByaW5nLXdoaXRlIHNlbGVjdC1ub25lIGRhcms6cmluZy16aW5jLTkwMCcsXG4gICAgICAgIGJhZGdlQ2xhc3Nlc1tzaXplXSxcbiAgICAgICAgY2xhc3NOYW1lXG4gICAgICApfVxuICAgICAgZGF0YS1zbG90PVwiYXZhdGFyLWJhZGdlXCJcbiAgICAgIHsuLi5wcm9wc31cbiAgICAvPlxuICApO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBBdmF0YXJCdXR0b25Qcm9wcyBleHRlbmRzIE9taXQ8QnV0dG9uSFRNTEF0dHJpYnV0ZXM8SFRNTEJ1dHRvbkVsZW1lbnQ+LCAnb25FcnJvcicgfCAnb25Mb2FkJz4ge1xuICByZWFkb25seSBhbHQ/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGluaXRpYWxzPzogUmVhY3ROb2RlO1xuICByZWFkb25seSBvbkVycm9yPzogQXZhdGFySW1hZ2VFdmVudEhhbmRsZXI7XG4gIHJlYWRvbmx5IG9uTG9hZD86IEF2YXRhckltYWdlRXZlbnRIYW5kbGVyO1xuICByZWFkb25seSBzaXplPzogQXZhdGFyU2l6ZTtcbiAgcmVhZG9ubHkgc3F1YXJlPzogYm9vbGVhbjtcbiAgcmVhZG9ubHkgc3JjPzogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgQXZhdGFyQnV0dG9uID0gKHtcbiAgYWx0ID0gJycsXG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG4gIGluaXRpYWxzLFxuICBvbkVycm9yLFxuICBvbkxvYWQsXG4gIHNpemUgPSAnZGVmYXVsdCcsXG4gIHNxdWFyZSA9IGZhbHNlLFxuICBzcmMsXG4gIHR5cGUgPSAnYnV0dG9uJyxcbiAgLi4ucHJvcHNcbn06IEF2YXRhckJ1dHRvblByb3BzKSA9PiB7XG4gIGNvbnN0IHZhbHVlID0gdXNlQXZhdGFyVmFsdWUoc2l6ZSwgc3F1YXJlKTtcblxuICByZXR1cm4gKFxuICAgIDxBdmF0YXJDb250ZXh0LlByb3ZpZGVyIHZhbHVlPXt2YWx1ZX0+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgYXZhdGFyQ2xhc3NlcyxcbiAgICAgICAgICAnY3Vyc29yLXBvaW50ZXIgZGlzYWJsZWQ6cG9pbnRlci1ldmVudHMtbm9uZSBkaXNhYmxlZDpvcGFjaXR5LTUwIGZvY3VzLXZpc2libGU6cmluZy1bM3B4XSBmb2N1cy12aXNpYmxlOnJpbmctcmluZy81MCcsXG4gICAgICAgICAgc3F1YXJlID8gc2hhcGVDbGFzc2VzLnNxdWFyZSA6IHNoYXBlQ2xhc3Nlcy5yb3VuZCxcbiAgICAgICAgICBzaXplQ2xhc3Nlc1tzaXplXSxcbiAgICAgICAgICBjbGFzc05hbWVcbiAgICAgICAgKX1cbiAgICAgICAgZGF0YS1zaXplPXtzaXplfVxuICAgICAgICBkYXRhLXNsb3Q9XCJhdmF0YXItYnV0dG9uXCJcbiAgICAgICAgZGF0YS1zcXVhcmU9e3NxdWFyZSA/ICd0cnVlJyA6IHVuZGVmaW5lZH1cbiAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICB7cmVuZGVyQXZhdGFyQ29udGVudCh7XG4gICAgICAgICAgYWx0LFxuICAgICAgICAgIGNoaWxkcmVuLFxuICAgICAgICAgIGluaXRpYWxzLFxuICAgICAgICAgIG9uRXJyb3IsXG4gICAgICAgICAgb25Mb2FkLFxuICAgICAgICAgIHNyY1xuICAgICAgICB9KX1cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvQXZhdGFyQ29udGV4dC5Qcm92aWRlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBBdmF0YXJHcm91cCA9ICh7Y2xhc3NOYW1lLCAuLi5wcm9wc306IEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PikgPT4gKFxuICA8ZGl2XG4gICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICdncm91cC9hdmF0YXItZ3JvdXAgZmxleCAtc3BhY2UteC0yICo6ZGF0YS1bc2xvdD1hdmF0YXJdOnJpbmctMiAqOmRhdGEtW3Nsb3Q9YXZhdGFyXTpyaW5nLXdoaXRlICo6ZGF0YS1bc2xvdD1hdmF0YXItYnV0dG9uXTpyaW5nLTIgKjpkYXRhLVtzbG90PWF2YXRhci1idXR0b25dOnJpbmctd2hpdGUgZGFyazoqOmRhdGEtW3Nsb3Q9YXZhdGFyXTpyaW5nLXppbmMtOTAwIGRhcms6KjpkYXRhLVtzbG90PWF2YXRhci1idXR0b25dOnJpbmctemluYy05MDAnLFxuICAgICAgY2xhc3NOYW1lXG4gICAgKX1cbiAgICBkYXRhLXNsb3Q9XCJhdmF0YXItZ3JvdXBcIlxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXJHcm91cENvdW50ID0gKHtcbiAgY2hpbGRyZW4sXG4gIGNsYXNzTmFtZSxcbiAgLi4ucHJvcHNcbn06IEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICBjb25zdCBjb3VudExhYmVsOiBSZWFjdE5vZGUgPSBjaGlsZHJlbiA/PyAnKzAnO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtjbigncmVsYXRpdmUgZmxleCBzaXplLTggc2hyaW5rLTAgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHJvdW5kZWQtZnVsbCBiZy16aW5jLTEwMCB0ZXh0LXNtIGZvbnQtbWVkaXVtIHRleHQtemluYy02MDAgcmluZy0yIHJpbmctd2hpdGUgZGFyazpiZy16aW5jLTgwMCBkYXJrOnRleHQtemluYy0zMDAgZGFyazpyaW5nLXppbmMtOTAwIFsmPnN2Z106c2l6ZS00JywgY2xhc3NOYW1lKX1cbiAgICAgIGRhdGEtc2xvdD1cImF2YXRhci1ncm91cC1jb3VudFwiXG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NvdW50TGFiZWx9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbImNuIiwiY3JlYXRlQ29udGV4dCIsInVzZUNvbnRleHQiLCJ1c2VNZW1vIiwidXNlU3RhdGUiLCJBdmF0YXJDb250ZXh0Iiwic2l6ZUNsYXNzZXMiLCJkZWZhdWx0IiwibGciLCJzbSIsImJhZGdlQ2xhc3NlcyIsInRleHRDbGFzc2VzIiwiYXZhdGFyQ2xhc3NlcyIsImZhbGxiYWNrQ2xhc3NlcyIsInNoYXBlQ2xhc3NlcyIsInJvdW5kIiwic3F1YXJlIiwidXNlQXZhdGFyQ29udGV4dCIsImNvbnRleHQiLCJFcnJvciIsInVzZUF2YXRhclZhbHVlIiwic2l6ZSIsImltYWdlTG9hZGVkIiwic2V0SW1hZ2VMb2FkZWQiLCJyZWdpc3RlckltYWdlTG9hZGVkIiwicmVuZGVyQXZhdGFyQ29udGVudCIsImFsdCIsImNoaWxkcmVuIiwiaW5pdGlhbHMiLCJvbkVycm9yIiwib25Mb2FkIiwic3JjIiwiQXZhdGFySW1hZ2UiLCJBdmF0YXJGYWxsYmFjayIsIkF2YXRhciIsImNsYXNzTmFtZSIsInByb3BzIiwidmFsdWUiLCJQcm92aWRlciIsImRpdiIsImRhdGEtc2l6ZSIsImRhdGEtc2xvdCIsImRhdGEtc3F1YXJlIiwidW5kZWZpbmVkIiwiaW1nIiwiZXZlbnQiLCJBdmF0YXJCYWRnZSIsInNwYW4iLCJBdmF0YXJCdXR0b24iLCJ0eXBlIiwiYnV0dG9uIiwiQXZhdGFyR3JvdXAiLCJBdmF0YXJHcm91cENvdW50IiwiY291bnRMYWJlbCJdLCJtYXBwaW5ncyI6IjtBQUFBLFNBQVFBLEVBQUUsUUFBTyxlQUFlO0FBQ2hDLFNBQVFDLGFBQWEsRUFBRUMsVUFBVSxFQUFFQyxPQUFPLEVBQUVDLFFBQVEsUUFBTyxRQUFRO0FBYW5FLE1BQU1DLDhCQUFnQkosY0FBd0M7QUFFOUQsTUFBTUssY0FBMEM7SUFDOUNDLFNBQVM7SUFDVEMsSUFBSTtJQUNKQyxJQUFJO0FBQ047QUFFQSxNQUFNQyxlQUEyQztJQUMvQ0gsU0FBUztJQUNUQyxJQUFJO0lBQ0pDLElBQUk7QUFDTjtBQUVBLE1BQU1FLGNBQTBDO0lBQzlDSixTQUFTO0lBQ1RDLElBQUk7SUFDSkMsSUFBSTtBQUNOO0FBRUEsTUFBTUcsZ0JBQWdCO0FBQ3RCLE1BQU1DLGtCQUFrQjtBQUV4QixNQUFNQyxlQUFlO0lBQ25CQyxPQUFPO0lBQ1BDLFFBQVE7QUFDVjtBQUVBLE1BQU1DLG1CQUFtQjtJQUN2QixNQUFNQyxVQUFVaEIsV0FBV0c7SUFFM0IsSUFBSSxDQUFDYSxTQUFTO1FBQ1osTUFBTSxJQUFJQyxNQUFNO0lBQ2xCO0lBRUEsT0FBT0Q7QUFDVDtBQUVBLE1BQU1FLGlCQUFpQixDQUFDQyxNQUFrQkw7SUFDeEMsTUFBTSxDQUFDTSxhQUFhQyxlQUFlLEdBQUduQixTQUFTO0lBRS9DLE9BQU9ELFFBQVEsSUFBTyxDQUFBO1lBQ3BCbUI7WUFDQUUscUJBQXFCRDtZQUNyQkY7WUFDQUw7UUFDRixDQUFBLEdBQUk7UUFBQ007UUFBYUQ7UUFBTUw7S0FBTztBQUNqQztBQUVBLE1BQU1TLHNCQUFzQixDQUFDLEVBQzNCQyxHQUFHLEVBQ0hDLFFBQVEsRUFDUkMsUUFBUSxFQUNSQyxPQUFPLEVBQ1BDLE1BQU0sRUFDTkMsR0FBRyxFQVFKLEdBQUtKLDBCQUNKOztZQUNHSSxvQkFDQyxLQUFDQztnQkFDQ04sS0FBS0E7Z0JBQ0xHLFNBQVNBO2dCQUNUQyxRQUFRQTtnQkFDUkMsS0FBS0E7aUJBRUw7WUFDSEgseUJBQVcsS0FBQ0s7MEJBQWdCTDtpQkFBNkI7OztBQWdCOUQsT0FBTyxNQUFNTSxTQUFTLENBQUMsRUFDckJSLE1BQU0sRUFBRSxFQUNSQyxRQUFRLEVBQ1JRLFNBQVMsRUFDVFAsUUFBUSxFQUNSQyxPQUFPLEVBQ1BDLE1BQU0sRUFDTlQsT0FBTyxTQUFTLEVBQ2hCTCxTQUFTLEtBQUssRUFDZGUsR0FBRyxFQUNILEdBQUdLLE9BQ1M7SUFDWixNQUFNQyxRQUFRakIsZUFBZUMsTUFBTUw7SUFFbkMscUJBQ0UsS0FBQ1gsY0FBY2lDLFFBQVE7UUFBQ0QsT0FBT0E7a0JBQzdCLGNBQUEsS0FBQ0U7WUFDQ0osV0FBV25DLEdBQ1RZLGVBQ0FJLFNBQVNGLGFBQWFFLE1BQU0sR0FBR0YsYUFBYUMsS0FBSyxFQUNqRFQsV0FBVyxDQUFDZSxLQUFLLEVBQ2pCYztZQUVGSyxhQUFXbkI7WUFDWG9CLGFBQVU7WUFDVkMsZUFBYTFCLFNBQVMsU0FBUzJCO1lBQzlCLEdBQUdQLEtBQUs7c0JBRVJYLG9CQUFvQjtnQkFDbkJDO2dCQUNBQztnQkFDQUM7Z0JBQ0FDO2dCQUNBQztnQkFDQUM7WUFDRjs7O0FBSVIsRUFBRTtBQUVGLE9BQU8sTUFBTUMsY0FBYyxDQUFDLEVBQzFCTixNQUFNLEVBQUUsRUFDUlMsU0FBUyxFQUNUTixPQUFPLEVBQ1BDLE1BQU0sRUFDTixHQUFHTSxPQUNpQztJQUNwQyxNQUFNLEVBQUNaLG1CQUFtQixFQUFDLEdBQUdQO0lBRTlCLHFCQUNFLEtBQUMyQjtRQUNDbEIsS0FBS0E7UUFDTFMsV0FBV25DLEdBQUcsMEJBQTBCbUM7UUFDeENNLGFBQVU7UUFDVlosU0FBUyxDQUFDZ0I7WUFDUnJCLG9CQUFvQjtZQUNwQkssVUFBVWdCO1FBQ1o7UUFDQWYsUUFBUSxDQUFDZTtZQUNQckIsb0JBQW9CO1lBQ3BCTSxTQUFTZTtRQUNYO1FBQ0MsR0FBR1QsS0FBSzs7QUFHZixFQUFFO0FBRUYsT0FBTyxNQUFNSCxpQkFBaUIsQ0FBQyxFQUM3Qk4sUUFBUSxFQUNSUSxTQUFTLEVBQ1QsR0FBR0MsT0FDNEI7SUFDL0IsTUFBTSxFQUFDZCxXQUFXLEVBQUVELElBQUksRUFBQyxHQUFHSjtJQUU1QixJQUFJSyxhQUFhO1FBQ2YsT0FBTztJQUNUO0lBRUEscUJBQ0UsS0FBQ2lCO1FBQ0NKLFdBQVduQyxHQUNUYSxpQkFDQUYsV0FBVyxDQUFDVSxLQUFLLEVBQ2pCYztRQUVGTSxhQUFVO1FBQ1QsR0FBR0wsS0FBSztrQkFFUlQ7O0FBR1AsRUFBRTtBQUVGLE9BQU8sTUFBTW1CLGNBQWMsQ0FBQyxFQUFDWCxTQUFTLEVBQUUsR0FBR0MsT0FBdUM7SUFDaEYsTUFBTSxFQUFDZixJQUFJLEVBQUMsR0FBR0o7SUFFZixxQkFDRSxLQUFDOEI7UUFDQ1osV0FBV25DLEdBQ1QsMk1BQ0FVLFlBQVksQ0FBQ1csS0FBSyxFQUNsQmM7UUFFRk0sYUFBVTtRQUNULEdBQUdMLEtBQUs7O0FBR2YsRUFBRTtBQVlGLE9BQU8sTUFBTVksZUFBZSxDQUFDLEVBQzNCdEIsTUFBTSxFQUFFLEVBQ1JDLFFBQVEsRUFDUlEsU0FBUyxFQUNUUCxRQUFRLEVBQ1JDLE9BQU8sRUFDUEMsTUFBTSxFQUNOVCxPQUFPLFNBQVMsRUFDaEJMLFNBQVMsS0FBSyxFQUNkZSxHQUFHLEVBQ0hrQixPQUFPLFFBQVEsRUFDZixHQUFHYixPQUNlO0lBQ2xCLE1BQU1DLFFBQVFqQixlQUFlQyxNQUFNTDtJQUVuQyxxQkFDRSxLQUFDWCxjQUFjaUMsUUFBUTtRQUFDRCxPQUFPQTtrQkFDN0IsY0FBQSxLQUFDYTtZQUNDZixXQUFXbkMsR0FDVFksZUFDQSx1SEFDQUksU0FBU0YsYUFBYUUsTUFBTSxHQUFHRixhQUFhQyxLQUFLLEVBQ2pEVCxXQUFXLENBQUNlLEtBQUssRUFDakJjO1lBRUZLLGFBQVduQjtZQUNYb0IsYUFBVTtZQUNWQyxlQUFhMUIsU0FBUyxTQUFTMkI7WUFDL0JNLE1BQU1BO1lBQ0wsR0FBR2IsS0FBSztzQkFFUlgsb0JBQW9CO2dCQUNuQkM7Z0JBQ0FDO2dCQUNBQztnQkFDQUM7Z0JBQ0FDO2dCQUNBQztZQUNGOzs7QUFJUixFQUFFO0FBRUYsT0FBTyxNQUFNb0IsY0FBYyxDQUFDLEVBQUNoQixTQUFTLEVBQUUsR0FBR0MsT0FBc0MsaUJBQy9FLEtBQUNHO1FBQ0NKLFdBQVduQyxHQUNULG1RQUNBbUM7UUFFRk0sYUFBVTtRQUNULEdBQUdMLEtBQUs7T0FFWDtBQUVGLE9BQU8sTUFBTWdCLG1CQUFtQixDQUFDLEVBQy9CekIsUUFBUSxFQUNSUSxTQUFTLEVBQ1QsR0FBR0MsT0FDNEI7SUFDL0IsTUFBTWlCLGFBQXdCMUIsWUFBWTtJQUUxQyxxQkFDRSxLQUFDWTtRQUNDSixXQUFXbkMsR0FBRyxnTkFBZ05tQztRQUM5Tk0sYUFBVTtRQUNULEdBQUdMLEtBQUs7a0JBRVJpQjs7QUFHUCxFQUFFIn0=

package/lib/components/Avatar/Avatar.stories.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { interactWithCanvas } from '../../utils/storyInteractions.js';
+import { Avatar, AvatarBadge, AvatarButton, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from './Avatar.js';
+const meta = {
+    argTypes: {
+        alt: {
+            control: 'text'
+        },
+        initials: {
+            control: 'text'
+        },
+        size: {
+            control: 'select',
+            options: [
+                'sm',
+                'default',
+                'lg'
+            ]
+        },
+        square: {
+            control: 'boolean'
+        },
+        src: {
+            control: 'text'
+        }
+    },
+    component: Avatar,
+    parameters: {
+        layout: 'centered'
+    },
+    title: 'Components/Avatar'
+};
+export default meta;
+export const Default = {
+    args: {
+        alt: 'Bruce Wayne',
+        initials: 'BW',
+        size: 'default',
+        square: false
+    },
+    play: interactWithCanvas
+};
+export const WithImage = {
+    args: {
+        alt: 'Selina Kyle',
+        initials: 'SK',
+        size: 'lg',
+        square: false,
+        src: 'https://i.pravatar.cc/160?img=47'
+    },
+    play: interactWithCanvas
+};
+export const WithBadge = {
+    args: {
+        alt: 'Selina Kyle',
+        initials: 'SK',
+        size: 'lg'
+    },
+    play: interactWithCanvas,
+    render: (args)=>/*#__PURE__*/ _jsxs(Avatar, {
+            ...args,
+            children: [
+                args.src ? /*#__PURE__*/ _jsx(AvatarImage, {
+                    alt: args.alt,
+                    src: args.src
+                }) : /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: args.initials
+                }),
+                /*#__PURE__*/ _jsx(AvatarBadge, {})
+            ]
+        })
+};
+export const Group = {
+    play: interactWithCanvas,
+    render: ()=>/*#__PURE__*/ _jsxs(AvatarGroup, {
+            children: [
+                /*#__PURE__*/ _jsx(Avatar, {
+                    initials: "BW"
+                }),
+                /*#__PURE__*/ _jsx(Avatar, {
+                    initials: "SK"
+                }),
+                /*#__PURE__*/ _jsx(Avatar, {
+                    initials: "DG"
+                }),
+                /*#__PURE__*/ _jsx(AvatarGroupCount, {
+                    children: "+3"
+                })
+            ]
+        })
+};
+export const Button = {
+    args: {
+        alt: 'Open profile',
+        initials: 'OP',
+        size: 'default'
+    },
+    play: interactWithCanvas,
+    render: (args)=>/*#__PURE__*/ _jsx(AvatarButton, {
+            ...args
+        })
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0F2YXRhci9BdmF0YXIuc3Rvcmllcy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7aW50ZXJhY3RXaXRoQ2FudmFzfSBmcm9tICcuLi8uLi91dGlscy9zdG9yeUludGVyYWN0aW9ucy5qcyc7XG5pbXBvcnQge0F2YXRhciwgQXZhdGFyQmFkZ2UsIEF2YXRhckJ1dHRvbiwgQXZhdGFyRmFsbGJhY2ssIEF2YXRhckdyb3VwLCBBdmF0YXJHcm91cENvdW50LCBBdmF0YXJJbWFnZX0gZnJvbSAnLi9BdmF0YXIuanMnO1xuXG5pbXBvcnQgdHlwZSB7TWV0YSwgU3RvcnlPYmp9IGZyb20gJ0BubGFicy9sZXgvc3Rvcnlib29rJztcbmltcG9ydCB0eXBlIHtDb21wb25lbnRQcm9wc30gZnJvbSAncmVhY3QnO1xuXG5jb25zdCBtZXRhOiBNZXRhPHR5cGVvZiBBdmF0YXI+ID0ge1xuICBhcmdUeXBlczoge1xuICAgIGFsdDoge1xuICAgICAgY29udHJvbDogJ3RleHQnXG4gICAgfSxcbiAgICBpbml0aWFsczoge1xuICAgICAgY29udHJvbDogJ3RleHQnXG4gICAgfSxcbiAgICBzaXplOiB7XG4gICAgICBjb250cm9sOiAnc2VsZWN0JyxcbiAgICAgIG9wdGlvbnM6IFsnc20nLCAnZGVmYXVsdCcsICdsZyddXG4gICAgfSxcbiAgICBzcXVhcmU6IHtcbiAgICAgIGNvbnRyb2w6ICdib29sZWFuJ1xuICAgIH0sXG4gICAgc3JjOiB7XG4gICAgICBjb250cm9sOiAndGV4dCdcbiAgICB9XG4gIH0sXG4gIGNvbXBvbmVudDogQXZhdGFyLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAnY2VudGVyZWQnXG4gIH0sXG4gIHRpdGxlOiAnQ29tcG9uZW50cy9BdmF0YXInXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xuXG50eXBlIFN0b3J5ID0gU3RvcnlPYmo8dHlwZW9mIEF2YXRhcj47XG5cbmV4cG9ydCBjb25zdCBEZWZhdWx0OiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGFsdDogJ0JydWNlIFdheW5lJyxcbiAgICBpbml0aWFsczogJ0JXJyxcbiAgICBzaXplOiAnZGVmYXVsdCcsXG4gICAgc3F1YXJlOiBmYWxzZVxuICB9LFxuICBwbGF5OiBpbnRlcmFjdFdpdGhDYW52YXNcbn07XG5cbmV4cG9ydCBjb25zdCBXaXRoSW1hZ2U6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgYWx0OiAnU2VsaW5hIEt5bGUnLFxuICAgIGluaXRpYWxzOiAnU0snLFxuICAgIHNpemU6ICdsZycsXG4gICAgc3F1YXJlOiBmYWxzZSxcbiAgICBzcmM6ICdodHRwczovL2kucHJhdmF0YXIuY2MvMTYwP2ltZz00NydcbiAgfSxcbiAgcGxheTogaW50ZXJhY3RXaXRoQ2FudmFzXG59O1xuXG5leHBvcnQgY29uc3QgV2l0aEJhZGdlOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGFsdDogJ1NlbGluYSBLeWxlJyxcbiAgICBpbml0aWFsczogJ1NLJyxcbiAgICBzaXplOiAnbGcnXG4gIH0sXG4gIHBsYXk6IGludGVyYWN0V2l0aENhbnZhcyxcbiAgcmVuZGVyOiAoYXJnczogQ29tcG9uZW50UHJvcHM8dHlwZW9mIEF2YXRhcj4pID0+IChcbiAgICA8QXZhdGFyIHsuLi5hcmdzfT5cbiAgICAgIHthcmdzLnNyYyA/IDxBdmF0YXJJbWFnZSBhbHQ9e2FyZ3MuYWx0fSBzcmM9e2FyZ3Muc3JjfSAvPiA6IDxBdmF0YXJGYWxsYmFjaz57YXJncy5pbml0aWFsc308L0F2YXRhckZhbGxiYWNrPn1cbiAgICAgIDxBdmF0YXJCYWRnZSAvPlxuICAgIDwvQXZhdGFyPlxuICApXG59O1xuXG5leHBvcnQgY29uc3QgR3JvdXA6IFN0b3J5ID0ge1xuICBwbGF5OiBpbnRlcmFjdFdpdGhDYW52YXMsXG4gIHJlbmRlcjogKCkgPT4gKFxuICAgIDxBdmF0YXJHcm91cD5cbiAgICAgIDxBdmF0YXIgaW5pdGlhbHM9XCJCV1wiIC8+XG4gICAgICA8QXZhdGFyIGluaXRpYWxzPVwiU0tcIiAvPlxuICAgICAgPEF2YXRhciBpbml0aWFscz1cIkRHXCIgLz5cbiAgICAgIDxBdmF0YXJHcm91cENvdW50PiszPC9BdmF0YXJHcm91cENvdW50PlxuICAgIDwvQXZhdGFyR3JvdXA+XG4gIClcbn07XG5cbmV4cG9ydCBjb25zdCBCdXR0b246IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgYWx0OiAnT3BlbiBwcm9maWxlJyxcbiAgICBpbml0aWFsczogJ09QJyxcbiAgICBzaXplOiAnZGVmYXVsdCdcbiAgfSxcbiAgcGxheTogaW50ZXJhY3RXaXRoQ2FudmFzLFxuICByZW5kZXI6IChhcmdzOiBDb21wb25lbnRQcm9wczx0eXBlb2YgQXZhdGFyPikgPT4gPEF2YXRhckJ1dHRvbiB7Li4uKGFyZ3MgYXMgYW55KX0gLz5cbn07XG4iXSwibmFtZXMiOlsiUmVhY3QiLCJpbnRlcmFjdFdpdGhDYW52YXMiLCJBdmF0YXIiLCJBdmF0YXJCYWRnZSIsIkF2YXRhckJ1dHRvbiIsIkF2YXRhckZhbGxiYWNrIiwiQXZhdGFyR3JvdXAiLCJBdmF0YXJHcm91cENvdW50IiwiQXZhdGFySW1hZ2UiLCJtZXRhIiwiYXJnVHlwZXMiLCJhbHQiLCJjb250cm9sIiwiaW5pdGlhbHMiLCJzaXplIiwib3B0aW9ucyIsInNxdWFyZSIsInNyYyIsImNvbXBvbmVudCIsInBhcmFtZXRlcnMiLCJsYXlvdXQiLCJ0aXRsZSIsIkRlZmF1bHQiLCJhcmdzIiwicGxheSIsIldpdGhJbWFnZSIsIldpdGhCYWRnZSIsInJlbmRlciIsIkdyb3VwIiwiQnV0dG9uIl0sIm1hcHBpbmdzIjoiO0FBQUEsT0FBT0EsV0FBVyxRQUFRO0FBQzFCLFNBQVFDLGtCQUFrQixRQUFPLG1DQUFtQztBQUNwRSxTQUFRQyxNQUFNLEVBQUVDLFdBQVcsRUFBRUMsWUFBWSxFQUFFQyxjQUFjLEVBQUVDLFdBQVcsRUFBRUMsZ0JBQWdCLEVBQUVDLFdBQVcsUUFBTyxjQUFjO0FBSzFILE1BQU1DLE9BQTRCO0lBQ2hDQyxVQUFVO1FBQ1JDLEtBQUs7WUFDSEMsU0FBUztRQUNYO1FBQ0FDLFVBQVU7WUFDUkQsU0FBUztRQUNYO1FBQ0FFLE1BQU07WUFDSkYsU0FBUztZQUNURyxTQUFTO2dCQUFDO2dCQUFNO2dCQUFXO2FBQUs7UUFDbEM7UUFDQUMsUUFBUTtZQUNOSixTQUFTO1FBQ1g7UUFDQUssS0FBSztZQUNITCxTQUFTO1FBQ1g7SUFDRjtJQUNBTSxXQUFXaEI7SUFDWGlCLFlBQVk7UUFDVkMsUUFBUTtJQUNWO0lBQ0FDLE9BQU87QUFDVDtBQUVBLGVBQWVaLEtBQUs7QUFJcEIsT0FBTyxNQUFNYSxVQUFpQjtJQUM1QkMsTUFBTTtRQUNKWixLQUFLO1FBQ0xFLFVBQVU7UUFDVkMsTUFBTTtRQUNORSxRQUFRO0lBQ1Y7SUFDQVEsTUFBTXZCO0FBQ1IsRUFBRTtBQUVGLE9BQU8sTUFBTXdCLFlBQW1CO0lBQzlCRixNQUFNO1FBQ0paLEtBQUs7UUFDTEUsVUFBVTtRQUNWQyxNQUFNO1FBQ05FLFFBQVE7UUFDUkMsS0FBSztJQUNQO0lBQ0FPLE1BQU12QjtBQUNSLEVBQUU7QUFFRixPQUFPLE1BQU15QixZQUFtQjtJQUM5QkgsTUFBTTtRQUNKWixLQUFLO1FBQ0xFLFVBQVU7UUFDVkMsTUFBTTtJQUNSO0lBQ0FVLE1BQU12QjtJQUNOMEIsUUFBUSxDQUFDSixxQkFDUCxNQUFDckI7WUFBUSxHQUFHcUIsSUFBSTs7Z0JBQ2JBLEtBQUtOLEdBQUcsaUJBQUcsS0FBQ1Q7b0JBQVlHLEtBQUtZLEtBQUtaLEdBQUc7b0JBQUVNLEtBQUtNLEtBQUtOLEdBQUc7bUNBQU8sS0FBQ1o7OEJBQWdCa0IsS0FBS1YsUUFBUTs7OEJBQzFGLEtBQUNWOzs7QUFHUCxFQUFFO0FBRUYsT0FBTyxNQUFNeUIsUUFBZTtJQUMxQkosTUFBTXZCO0lBQ04wQixRQUFRLGtCQUNOLE1BQUNyQjs7OEJBQ0MsS0FBQ0o7b0JBQU9XLFVBQVM7OzhCQUNqQixLQUFDWDtvQkFBT1csVUFBUzs7OEJBQ2pCLEtBQUNYO29CQUFPVyxVQUFTOzs4QkFDakIsS0FBQ047OEJBQWlCOzs7O0FBR3hCLEVBQUU7QUFFRixPQUFPLE1BQU1zQixTQUFnQjtJQUMzQk4sTUFBTTtRQUNKWixLQUFLO1FBQ0xFLFVBQVU7UUFDVkMsTUFBTTtJQUNSO0lBQ0FVLE1BQU12QjtJQUNOMEIsUUFBUSxDQUFDSixxQkFBd0MsS0FBQ25CO1lBQWMsR0FBSW1CLElBQUk7O0FBQzFFLEVBQUUifQ==

package/lib/components/Badge/Badge.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+export interface BadgeProps extends HTMLAttributes<HTMLElement> {
+    readonly as?: ElementType;
+    readonly asChild?: boolean;
+    readonly children?: ReactNode;
+    readonly variant?: BadgeVariant;
+}
+export declare const Badge: ({ as, asChild, children, className, variant, ...props }: BadgeProps) => import("react").JSX.Element | null;

package/lib/components/Badge/Badge.js

@@ -0,0 +1,22 @@
+import { cn } from '@nlabs/utils';
+import { renderWithAsChild } from '../ComponentUtils/renderWithAsChild.js';
+const variantClasses = {
+    default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+    destructive: 'bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90',
+    ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+    link: 'text-primary underline-offset-4 [a&]:hover:underline',
+    outline: 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+    secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90'
+};
+export const Badge = ({ as, asChild = false, children, className, variant = 'default', ...props })=>renderWithAsChild({
+        as: as ?? 'span',
+        asChild,
+        children,
+        className: cn('inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3', variantClasses[variant], className),
+        ...props
+    }, {
+        'data-slot': 'badge',
+        'data-variant': variant
+    });
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0JhZGdlL0JhZGdlLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge2NufSBmcm9tICdAbmxhYnMvdXRpbHMnO1xuXG5pbXBvcnQge3JlbmRlcldpdGhBc0NoaWxkfSBmcm9tICcuLi9Db21wb25lbnRVdGlscy9yZW5kZXJXaXRoQXNDaGlsZC5qcyc7XG5cbmltcG9ydCB0eXBlIHtFbGVtZW50VHlwZSwgSFRNTEF0dHJpYnV0ZXMsIFJlYWN0Tm9kZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgdHlwZSBCYWRnZVZhcmlhbnQgPSAnZGVmYXVsdCcgfCAnc2Vjb25kYXJ5JyB8ICdkZXN0cnVjdGl2ZScgfCAnb3V0bGluZScgfCAnZ2hvc3QnIHwgJ2xpbmsnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEJhZGdlUHJvcHMgZXh0ZW5kcyBIVE1MQXR0cmlidXRlczxIVE1MRWxlbWVudD4ge1xuICByZWFkb25seSBhcz86IEVsZW1lbnRUeXBlO1xuICByZWFkb25seSBhc0NoaWxkPzogYm9vbGVhbjtcbiAgcmVhZG9ubHkgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIHJlYWRvbmx5IHZhcmlhbnQ/OiBCYWRnZVZhcmlhbnQ7XG59XG5cbmNvbnN0IHZhcmlhbnRDbGFzc2VzOiBSZWNvcmQ8QmFkZ2VWYXJpYW50LCBzdHJpbmc+ID0ge1xuICBkZWZhdWx0OiAnYmctcHJpbWFyeSB0ZXh0LXByaW1hcnktZm9yZWdyb3VuZCBbYSZdOmhvdmVyOmJnLXByaW1hcnkvOTAnLFxuICBkZXN0cnVjdGl2ZTogJ2JnLWRlc3RydWN0aXZlIHRleHQtZGVzdHJ1Y3RpdmUtZm9yZWdyb3VuZCBbYSZdOmhvdmVyOmJnLWRlc3RydWN0aXZlLzkwJyxcbiAgZ2hvc3Q6ICdbYSZdOmhvdmVyOmJnLWFjY2VudCBbYSZdOmhvdmVyOnRleHQtYWNjZW50LWZvcmVncm91bmQnLFxuICBsaW5rOiAndGV4dC1wcmltYXJ5IHVuZGVybGluZS1vZmZzZXQtNCBbYSZdOmhvdmVyOnVuZGVybGluZScsXG4gIG91dGxpbmU6ICdib3JkZXItYm9yZGVyIHRleHQtZm9yZWdyb3VuZCBbYSZdOmhvdmVyOmJnLWFjY2VudCBbYSZdOmhvdmVyOnRleHQtYWNjZW50LWZvcmVncm91bmQnLFxuICBzZWNvbmRhcnk6ICdiZy1zZWNvbmRhcnkgdGV4dC1zZWNvbmRhcnktZm9yZWdyb3VuZCBbYSZdOmhvdmVyOmJnLXNlY29uZGFyeS85MCdcbn07XG5cbmV4cG9ydCBjb25zdCBCYWRnZSA9ICh7XG4gIGFzLFxuICBhc0NoaWxkID0gZmFsc2UsXG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG4gIHZhcmlhbnQgPSAnZGVmYXVsdCcsXG4gIC4uLnByb3BzXG59OiBCYWRnZVByb3BzKSA9PiByZW5kZXJXaXRoQXNDaGlsZChcbiAge1xuICAgIGFzOiBhcyA/PyAnc3BhbicsXG4gICAgYXNDaGlsZCxcbiAgICBjaGlsZHJlbixcbiAgICBjbGFzc05hbWU6IGNuKFxuICAgICAgJ2lubGluZS1mbGV4IHctZml0IHNocmluay0wIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBnYXAtMSBvdmVyZmxvdy1oaWRkZW4gcm91bmRlZC1mdWxsIGJvcmRlciBib3JkZXItdHJhbnNwYXJlbnQgcHgtMiBweS0wLjUgdGV4dC14cyBmb250LW1lZGl1bSB3aGl0ZXNwYWNlLW5vd3JhcCB0cmFuc2l0aW9uLVtjb2xvcixib3gtc2hhZG93XSBmb2N1cy12aXNpYmxlOnJpbmctWzNweF0gZm9jdXMtdmlzaWJsZTpyaW5nLXJpbmcvNTAgYXJpYS1pbnZhbGlkOmJvcmRlci1kZXN0cnVjdGl2ZSBhcmlhLWludmFsaWQ6cmluZy1kZXN0cnVjdGl2ZS8yMCBkYXJrOmFyaWEtaW52YWxpZDpyaW5nLWRlc3RydWN0aXZlLzQwIFsmPnN2Z106cG9pbnRlci1ldmVudHMtbm9uZSBbJj5zdmddOnNpemUtMycsXG4gICAgICB2YXJpYW50Q2xhc3Nlc1t2YXJpYW50XSxcbiAgICAgIGNsYXNzTmFtZVxuICAgICksXG4gICAgLi4ucHJvcHNcbiAgfSxcbiAge1xuICAgICdkYXRhLXNsb3QnOiAnYmFkZ2UnLFxuICAgICdkYXRhLXZhcmlhbnQnOiB2YXJpYW50XG4gIH1cbik7XG4iXSwibmFtZXMiOlsiY24iLCJyZW5kZXJXaXRoQXNDaGlsZCIsInZhcmlhbnRDbGFzc2VzIiwiZGVmYXVsdCIsImRlc3RydWN0aXZlIiwiZ2hvc3QiLCJsaW5rIiwib3V0bGluZSIsInNlY29uZGFyeSIsIkJhZGdlIiwiYXMiLCJhc0NoaWxkIiwiY2hpbGRyZW4iLCJjbGFzc05hbWUiLCJ2YXJpYW50IiwicHJvcHMiXSwibWFwcGluZ3MiOiJBQUFBLFNBQVFBLEVBQUUsUUFBTyxlQUFlO0FBRWhDLFNBQVFDLGlCQUFpQixRQUFPLHlDQUF5QztBQWF6RSxNQUFNQyxpQkFBK0M7SUFDbkRDLFNBQVM7SUFDVEMsYUFBYTtJQUNiQyxPQUFPO0lBQ1BDLE1BQU07SUFDTkMsU0FBUztJQUNUQyxXQUFXO0FBQ2I7QUFFQSxPQUFPLE1BQU1DLFFBQVEsQ0FBQyxFQUNwQkMsRUFBRSxFQUNGQyxVQUFVLEtBQUssRUFDZkMsUUFBUSxFQUNSQyxTQUFTLEVBQ1RDLFVBQVUsU0FBUyxFQUNuQixHQUFHQyxPQUNRLEdBQUtkLGtCQUNoQjtRQUNFUyxJQUFJQSxNQUFNO1FBQ1ZDO1FBQ0FDO1FBQ0FDLFdBQVdiLEdBQ1QsNllBQ0FFLGNBQWMsQ0FBQ1ksUUFBUSxFQUN2QkQ7UUFFRixHQUFHRSxLQUFLO0lBQ1YsR0FDQTtRQUNFLGFBQWE7UUFDYixnQkFBZ0JEO0lBQ2xCLEdBQ0EifQ==

package/lib/components/Badge/Badge.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { interactWithCanvas } from '../../utils/storyInteractions.js';
+import { Badge } from './Badge.js';
+const meta = {
+    argTypes: {
+        as: {
+            control: 'select',
+            options: [
+                'span',
+                'a',
+                'button'
+            ]
+        },
+        children: {
+            control: 'text'
+        },
+        variant: {
+            control: 'select',
+            options: [
+                'default',
+                'secondary',
+                'destructive',
+                'outline',
+                'ghost',
+                'link'
+            ]
+        }
+    },
+    component: Badge,
+    parameters: {
+        layout: 'centered'
+    },
+    title: 'Components/Badge'
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Stable',
+        variant: 'default'
+    },
+    play: interactWithCanvas
+};
+export const Link = {
+    args: {
+        as: 'a',
+        children: 'Read docs',
+        href: '#',
+        variant: 'link'
+    },
+    play: interactWithCanvas
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0JhZGdlL0JhZGdlLnN0b3JpZXMudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQge2ludGVyYWN0V2l0aENhbnZhc30gZnJvbSAnLi4vLi4vdXRpbHMvc3RvcnlJbnRlcmFjdGlvbnMuanMnO1xuaW1wb3J0IHtCYWRnZX0gZnJvbSAnLi9CYWRnZS5qcyc7XG5cbmltcG9ydCB0eXBlIHtNZXRhLCBTdG9yeU9ian0gZnJvbSAnQG5sYWJzL2xleC9zdG9yeWJvb2snO1xuXG5jb25zdCBtZXRhOiBNZXRhPHR5cGVvZiBCYWRnZT4gPSB7XG4gIGFyZ1R5cGVzOiB7XG4gICAgYXM6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgb3B0aW9uczogWydzcGFuJywgJ2EnLCAnYnV0dG9uJ11cbiAgICB9LFxuICAgIGNoaWxkcmVuOiB7XG4gICAgICBjb250cm9sOiAndGV4dCdcbiAgICB9LFxuICAgIHZhcmlhbnQ6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgb3B0aW9uczogWydkZWZhdWx0JywgJ3NlY29uZGFyeScsICdkZXN0cnVjdGl2ZScsICdvdXRsaW5lJywgJ2dob3N0JywgJ2xpbmsnXVxuICAgIH1cbiAgfSxcbiAgY29tcG9uZW50OiBCYWRnZSxcbiAgcGFyYW1ldGVyczoge1xuICAgIGxheW91dDogJ2NlbnRlcmVkJ1xuICB9LFxuICB0aXRsZTogJ0NvbXBvbmVudHMvQmFkZ2UnXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xuXG50eXBlIFN0b3J5ID0gU3RvcnlPYmo8dHlwZW9mIEJhZGdlPjtcblxuZXhwb3J0IGNvbnN0IERlZmF1bHQ6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgY2hpbGRyZW46ICdTdGFibGUnLFxuICAgIHZhcmlhbnQ6ICdkZWZhdWx0J1xuICB9LFxuICBwbGF5OiBpbnRlcmFjdFdpdGhDYW52YXNcbn07XG5cbmV4cG9ydCBjb25zdCBMaW5rOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGFzOiAnYScsXG4gICAgY2hpbGRyZW46ICdSZWFkIGRvY3MnLFxuICAgIGhyZWY6ICcjJyxcbiAgICB2YXJpYW50OiAnbGluaydcbiAgfSBhcyBuZXZlcixcbiAgcGxheTogaW50ZXJhY3RXaXRoQ2FudmFzXG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0IiwiaW50ZXJhY3RXaXRoQ2FudmFzIiwiQmFkZ2UiLCJtZXRhIiwiYXJnVHlwZXMiLCJhcyIsImNvbnRyb2wiLCJvcHRpb25zIiwiY2hpbGRyZW4iLCJ2YXJpYW50IiwiY29tcG9uZW50IiwicGFyYW1ldGVycyIsImxheW91dCIsInRpdGxlIiwiRGVmYXVsdCIsImFyZ3MiLCJwbGF5IiwiTGluayIsImhyZWYiXSwibWFwcGluZ3MiOiJBQUFBLE9BQU9BLFdBQVcsUUFBUTtBQUMxQixTQUFRQyxrQkFBa0IsUUFBTyxtQ0FBbUM7QUFDcEUsU0FBUUMsS0FBSyxRQUFPLGFBQWE7QUFJakMsTUFBTUMsT0FBMkI7SUFDL0JDLFVBQVU7UUFDUkMsSUFBSTtZQUNGQyxTQUFTO1lBQ1RDLFNBQVM7Z0JBQUM7Z0JBQVE7Z0JBQUs7YUFBUztRQUNsQztRQUNBQyxVQUFVO1lBQ1JGLFNBQVM7UUFDWDtRQUNBRyxTQUFTO1lBQ1BILFNBQVM7WUFDVEMsU0FBUztnQkFBQztnQkFBVztnQkFBYTtnQkFBZTtnQkFBVztnQkFBUzthQUFPO1FBQzlFO0lBQ0Y7SUFDQUcsV0FBV1I7SUFDWFMsWUFBWTtRQUNWQyxRQUFRO0lBQ1Y7SUFDQUMsT0FBTztBQUNUO0FBRUEsZUFBZVYsS0FBSztBQUlwQixPQUFPLE1BQU1XLFVBQWlCO0lBQzVCQyxNQUFNO1FBQ0pQLFVBQVU7UUFDVkMsU0FBUztJQUNYO0lBQ0FPLE1BQU1mO0FBQ1IsRUFBRTtBQUVGLE9BQU8sTUFBTWdCLE9BQWM7SUFDekJGLE1BQU07UUFDSlYsSUFBSTtRQUNKRyxVQUFVO1FBQ1ZVLE1BQU07UUFDTlQsU0FBUztJQUNYO0lBQ0FPLE1BQU1mO0FBQ1IsRUFBRSJ9

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,19 @@
+import type { AnchorHTMLAttributes, ComponentType, ReactElement, SVGProps } from 'react';
+export type BreadcrumbsVariant = 'contained' | 'chevrons' | 'full';
+export interface BreadcrumbItem {
+    readonly current?: boolean;
+    readonly href?: string;
+    readonly label: string;
+}
+export interface BreadcrumbsProps {
+    readonly className?: string;
+    readonly homeAriaLabel?: string;
+    readonly homeHref?: string;
+    readonly homeIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    readonly homeLabel?: string;
+    readonly itemClassName?: string;
+    readonly items: readonly BreadcrumbItem[];
+    readonly linkComponent?: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => ReactElement;
+    readonly variant?: BreadcrumbsVariant;
+}
+export declare const Breadcrumbs: ({ className, homeAriaLabel, homeHref, homeIcon: HomeIcon, homeLabel, itemClassName, items, linkComponent: LinkComponent, variant }: BreadcrumbsProps) => import("react").JSX.Element | null;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@nlabs/utils';
+import { ChevronRight, House } from 'lucide-react';
+const DefaultLink = (props)=>/*#__PURE__*/ _jsx("a", {
+        ...props
+    });
+export const Breadcrumbs = ({ className, homeAriaLabel = 'Home', homeHref = '#', homeIcon: HomeIcon = House, homeLabel = 'Home', itemClassName, items, linkComponent: LinkComponent = DefaultLink, variant = 'contained' })=>{
+    if (items.length === 0) {
+        return null;
+    }
+    const listClassName = variant === 'contained' ? 'flex space-x-4 rounded-md bg-white px-6 shadow-sm dark:bg-gray-800/50 dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10' : variant === 'full' ? 'mx-auto flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8' : 'flex items-center space-x-4';
+    const navClassName = variant === 'full' ? 'flex border-b border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50' : 'flex';
+    const homeLinkClassName = variant === 'chevrons' ? 'text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-300' : 'text-gray-400 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300';
+    const separatorClassName = variant === 'chevrons' ? 'size-5 shrink-0 text-gray-400 dark:text-gray-500' : 'h-full w-6 shrink-0 text-gray-200 dark:text-white/10';
+    return /*#__PURE__*/ _jsx("nav", {
+        "aria-label": "Breadcrumb",
+        className: cn(navClassName, className),
+        children: /*#__PURE__*/ _jsxs("ol", {
+            role: "list",
+            className: listClassName,
+            children: [
+                /*#__PURE__*/ _jsx("li", {
+                    className: "flex",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center",
+                        children: /*#__PURE__*/ _jsxs(LinkComponent, {
+                            "aria-label": homeAriaLabel,
+                            className: homeLinkClassName,
+                            href: homeHref,
+                            children: [
+                                /*#__PURE__*/ _jsx(HomeIcon, {
+                                    "aria-hidden": "true",
+                                    className: "size-5 shrink-0"
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "sr-only",
+                                    children: homeLabel
+                                })
+                            ]
+                        })
+                    })
+                }),
+                items.map((item, index)=>{
+                    const isCurrent = item.current ?? index === items.length - 1;
+                    return /*#__PURE__*/ _jsx("li", {
+                        className: cn('flex', itemClassName),
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center",
+                            children: [
+                                /*#__PURE__*/ _jsx(ChevronRight, {
+                                    "aria-hidden": "true",
+                                    className: separatorClassName,
+                                    strokeWidth: 1.5
+                                }),
+                                item.href ? /*#__PURE__*/ _jsx(LinkComponent, {
+                                    "aria-current": isCurrent ? 'page' : undefined,
+                                    className: "ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+                                    href: item.href,
+                                    children: item.label
+                                }) : /*#__PURE__*/ _jsx("span", {
+                                    "aria-current": isCurrent ? 'page' : undefined,
+                                    className: "ml-4 text-sm font-medium text-gray-500 dark:text-gray-400",
+                                    children: item.label
+                                })
+                            ]
+                        })
+                    }, `${item.label}-${index}`);
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWJzL0JyZWFkY3J1bWJzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge2NufSBmcm9tICdAbmxhYnMvdXRpbHMnO1xuaW1wb3J0IHtDaGV2cm9uUmlnaHQsIEhvdXNlfSBmcm9tICdsdWNpZGUtcmVhY3QnO1xuXG5pbXBvcnQgdHlwZSB7QW5jaG9ySFRNTEF0dHJpYnV0ZXMsIENvbXBvbmVudFR5cGUsIFJlYWN0RWxlbWVudCwgU1ZHUHJvcHN9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IHR5cGUgQnJlYWRjcnVtYnNWYXJpYW50ID0gJ2NvbnRhaW5lZCcgfCAnY2hldnJvbnMnIHwgJ2Z1bGwnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEJyZWFkY3J1bWJJdGVtIHtcbiAgcmVhZG9ubHkgY3VycmVudD86IGJvb2xlYW47XG4gIHJlYWRvbmx5IGhyZWY/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGxhYmVsOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQnJlYWRjcnVtYnNQcm9wcyB7XG4gIHJlYWRvbmx5IGNsYXNzTmFtZT86IHN0cmluZztcbiAgcmVhZG9ubHkgaG9tZUFyaWFMYWJlbD86IHN0cmluZztcbiAgcmVhZG9ubHkgaG9tZUhyZWY/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGhvbWVJY29uPzogQ29tcG9uZW50VHlwZTxTVkdQcm9wczxTVkdTVkdFbGVtZW50Pj47XG4gIHJlYWRvbmx5IGhvbWVMYWJlbD86IHN0cmluZztcbiAgcmVhZG9ubHkgaXRlbUNsYXNzTmFtZT86IHN0cmluZztcbiAgcmVhZG9ubHkgaXRlbXM6IHJlYWRvbmx5IEJyZWFkY3J1bWJJdGVtW107XG4gIHJlYWRvbmx5IGxpbmtDb21wb25lbnQ/OiAocHJvcHM6IEFuY2hvckhUTUxBdHRyaWJ1dGVzPEhUTUxBbmNob3JFbGVtZW50PikgPT4gUmVhY3RFbGVtZW50O1xuICByZWFkb25seSB2YXJpYW50PzogQnJlYWRjcnVtYnNWYXJpYW50O1xufVxuXG5jb25zdCBEZWZhdWx0TGluayA9IChwcm9wczogQW5jaG9ySFRNTEF0dHJpYnV0ZXM8SFRNTEFuY2hvckVsZW1lbnQ+KSA9PiA8YSB7Li4ucHJvcHN9IC8+O1xuXG5leHBvcnQgY29uc3QgQnJlYWRjcnVtYnMgPSAoe1xuICBjbGFzc05hbWUsXG4gIGhvbWVBcmlhTGFiZWwgPSAnSG9tZScsXG4gIGhvbWVIcmVmID0gJyMnLFxuICBob21lSWNvbjogSG9tZUljb24gPSBIb3VzZSxcbiAgaG9tZUxhYmVsID0gJ0hvbWUnLFxuICBpdGVtQ2xhc3NOYW1lLFxuICBpdGVtcyxcbiAgbGlua0NvbXBvbmVudDogTGlua0NvbXBvbmVudCA9IERlZmF1bHRMaW5rLFxuICB2YXJpYW50ID0gJ2NvbnRhaW5lZCdcbn06IEJyZWFkY3J1bWJzUHJvcHMpID0+IHtcbiAgaWYoaXRlbXMubGVuZ3RoID09PSAwKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICBjb25zdCBsaXN0Q2xhc3NOYW1lID0gdmFyaWFudCA9PT0gJ2NvbnRhaW5lZCdcbiAgICA/ICdmbGV4IHNwYWNlLXgtNCByb3VuZGVkLW1kIGJnLXdoaXRlIHB4LTYgc2hhZG93LXNtIGRhcms6YmctZ3JheS04MDAvNTAgZGFyazpzaGFkb3ctbm9uZSBkYXJrOm91dGxpbmUgZGFyazotb3V0bGluZS1vZmZzZXQtMSBkYXJrOm91dGxpbmUtd2hpdGUvMTAnXG4gICAgOiB2YXJpYW50ID09PSAnZnVsbCdcbiAgICAgID8gJ214LWF1dG8gZmxleCB3LWZ1bGwgbWF4LXctKC0tYnJlYWtwb2ludC14bCkgc3BhY2UteC00IHB4LTQgc206cHgtNiBsZzpweC04J1xuICAgICAgOiAnZmxleCBpdGVtcy1jZW50ZXIgc3BhY2UteC00JztcblxuICBjb25zdCBuYXZDbGFzc05hbWUgPSB2YXJpYW50ID09PSAnZnVsbCdcbiAgICA/ICdmbGV4IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMCBiZy13aGl0ZSBkYXJrOmJvcmRlci13aGl0ZS8xMCBkYXJrOmJnLWdyYXktODAwLzUwJ1xuICAgIDogJ2ZsZXgnO1xuXG4gIGNvbnN0IGhvbWVMaW5rQ2xhc3NOYW1lID0gdmFyaWFudCA9PT0gJ2NoZXZyb25zJ1xuICAgID8gJ3RleHQtZ3JheS00MDAgaG92ZXI6dGV4dC1ncmF5LTUwMCBkYXJrOnRleHQtZ3JheS01MDAgZGFyazpob3Zlcjp0ZXh0LWdyYXktMzAwJ1xuICAgIDogJ3RleHQtZ3JheS00MDAgaG92ZXI6dGV4dC1ncmF5LTUwMCBkYXJrOnRleHQtZ3JheS00MDAgZGFyazpob3Zlcjp0ZXh0LWdyYXktMzAwJztcblxuICBjb25zdCBzZXBhcmF0b3JDbGFzc05hbWUgPSB2YXJpYW50ID09PSAnY2hldnJvbnMnXG4gICAgPyAnc2l6ZS01IHNocmluay0wIHRleHQtZ3JheS00MDAgZGFyazp0ZXh0LWdyYXktNTAwJ1xuICAgIDogJ2gtZnVsbCB3LTYgc2hyaW5rLTAgdGV4dC1ncmF5LTIwMCBkYXJrOnRleHQtd2hpdGUvMTAnO1xuXG4gIHJldHVybiAoXG4gICAgPG5hdlxuICAgICAgYXJpYS1sYWJlbD1cIkJyZWFkY3J1bWJcIlxuICAgICAgY2xhc3NOYW1lPXtjbihuYXZDbGFzc05hbWUsIGNsYXNzTmFtZSl9XG4gICAgPlxuICAgICAgPG9sXG4gICAgICAgIHJvbGU9XCJsaXN0XCJcbiAgICAgICAgY2xhc3NOYW1lPXtsaXN0Q2xhc3NOYW1lfVxuICAgICAgPlxuICAgICAgICA8bGkgY2xhc3NOYW1lPVwiZmxleFwiPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiZmxleCBpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICAgIDxMaW5rQ29tcG9uZW50XG4gICAgICAgICAgICAgIGFyaWEtbGFiZWw9e2hvbWVBcmlhTGFiZWx9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17aG9tZUxpbmtDbGFzc05hbWV9XG4gICAgICAgICAgICAgIGhyZWY9e2hvbWVIcmVmfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8SG9tZUljb25cbiAgICAgICAgICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT1cInNpemUtNSBzaHJpbmstMFwiXG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cInNyLW9ubHlcIj57aG9tZUxhYmVsfTwvc3Bhbj5cbiAgICAgICAgICAgIDwvTGlua0NvbXBvbmVudD5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9saT5cblxuICAgICAgICB7aXRlbXMubWFwKChpdGVtLCBpbmRleCkgPT4ge1xuICAgICAgICAgIGNvbnN0IGlzQ3VycmVudCA9IGl0ZW0uY3VycmVudCA/PyBpbmRleCA9PT0gaXRlbXMubGVuZ3RoIC0gMTtcblxuICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8bGlcbiAgICAgICAgICAgICAga2V5PXtgJHtpdGVtLmxhYmVsfS0ke2luZGV4fWB9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oJ2ZsZXgnLCBpdGVtQ2xhc3NOYW1lKX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgICAgIDxDaGV2cm9uUmlnaHRcbiAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e3NlcGFyYXRvckNsYXNzTmFtZX1cbiAgICAgICAgICAgICAgICAgIHN0cm9rZVdpZHRoPXsxLjV9XG4gICAgICAgICAgICAgICAgLz5cblxuICAgICAgICAgICAgICAgIHtpdGVtLmhyZWYgPyAoXG4gICAgICAgICAgICAgICAgICA8TGlua0NvbXBvbmVudFxuICAgICAgICAgICAgICAgICAgICBhcmlhLWN1cnJlbnQ9e2lzQ3VycmVudCA/ICdwYWdlJyA6IHVuZGVmaW5lZH1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPVwibWwtNCB0ZXh0LXNtIGZvbnQtbWVkaXVtIHRleHQtZ3JheS01MDAgaG92ZXI6dGV4dC1ncmF5LTcwMCBkYXJrOnRleHQtZ3JheS00MDAgZGFyazpob3Zlcjp0ZXh0LWdyYXktMjAwXCJcbiAgICAgICAgICAgICAgICAgICAgaHJlZj17aXRlbS5ocmVmfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7aXRlbS5sYWJlbH1cbiAgICAgICAgICAgICAgICAgIDwvTGlua0NvbXBvbmVudD5cbiAgICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICAgICAgYXJpYS1jdXJyZW50PXtpc0N1cnJlbnQgPyAncGFnZScgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT1cIm1sLTQgdGV4dC1zbSBmb250LW1lZGl1bSB0ZXh0LWdyYXktNTAwIGRhcms6dGV4dC1ncmF5LTQwMFwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIHtpdGVtLmxhYmVsfVxuICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICApO1xuICAgICAgICB9KX1cbiAgICAgIDwvb2w+XG4gICAgPC9uYXY+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbImNuIiwiQ2hldnJvblJpZ2h0IiwiSG91c2UiLCJEZWZhdWx0TGluayIsInByb3BzIiwiYSIsIkJyZWFkY3J1bWJzIiwiY2xhc3NOYW1lIiwiaG9tZUFyaWFMYWJlbCIsImhvbWVIcmVmIiwiaG9tZUljb24iLCJIb21lSWNvbiIsImhvbWVMYWJlbCIsIml0ZW1DbGFzc05hbWUiLCJpdGVtcyIsImxpbmtDb21wb25lbnQiLCJMaW5rQ29tcG9uZW50IiwidmFyaWFudCIsImxlbmd0aCIsImxpc3RDbGFzc05hbWUiLCJuYXZDbGFzc05hbWUiLCJob21lTGlua0NsYXNzTmFtZSIsInNlcGFyYXRvckNsYXNzTmFtZSIsIm5hdiIsImFyaWEtbGFiZWwiLCJvbCIsInJvbGUiLCJsaSIsImRpdiIsImhyZWYiLCJhcmlhLWhpZGRlbiIsInNwYW4iLCJtYXAiLCJpdGVtIiwiaW5kZXgiLCJpc0N1cnJlbnQiLCJjdXJyZW50Iiwic3Ryb2tlV2lkdGgiLCJhcmlhLWN1cnJlbnQiLCJ1bmRlZmluZWQiLCJsYWJlbCJdLCJtYXBwaW5ncyI6IjtBQUFBLFNBQVFBLEVBQUUsUUFBTyxlQUFlO0FBQ2hDLFNBQVFDLFlBQVksRUFBRUMsS0FBSyxRQUFPLGVBQWU7QUF3QmpELE1BQU1DLGNBQWMsQ0FBQ0Msc0JBQW1ELEtBQUNDO1FBQUcsR0FBR0QsS0FBSzs7QUFFcEYsT0FBTyxNQUFNRSxjQUFjLENBQUMsRUFDMUJDLFNBQVMsRUFDVEMsZ0JBQWdCLE1BQU0sRUFDdEJDLFdBQVcsR0FBRyxFQUNkQyxVQUFVQyxXQUFXVCxLQUFLLEVBQzFCVSxZQUFZLE1BQU0sRUFDbEJDLGFBQWEsRUFDYkMsS0FBSyxFQUNMQyxlQUFlQyxnQkFBZ0JiLFdBQVcsRUFDMUNjLFVBQVUsV0FBVyxFQUNKO0lBQ2pCLElBQUdILE1BQU1JLE1BQU0sS0FBSyxHQUFHO1FBQ3JCLE9BQU87SUFDVDtJQUVBLE1BQU1DLGdCQUFnQkYsWUFBWSxjQUM5QixxSkFDQUEsWUFBWSxTQUNWLCtFQUNBO0lBRU4sTUFBTUcsZUFBZUgsWUFBWSxTQUM3QixvRkFDQTtJQUVKLE1BQU1JLG9CQUFvQkosWUFBWSxhQUNsQyxrRkFDQTtJQUVKLE1BQU1LLHFCQUFxQkwsWUFBWSxhQUNuQyxxREFDQTtJQUVKLHFCQUNFLEtBQUNNO1FBQ0NDLGNBQVc7UUFDWGpCLFdBQVdQLEdBQUdvQixjQUFjYjtrQkFFNUIsY0FBQSxNQUFDa0I7WUFDQ0MsTUFBSztZQUNMbkIsV0FBV1k7OzhCQUVYLEtBQUNRO29CQUFHcEIsV0FBVTs4QkFDWixjQUFBLEtBQUNxQjt3QkFBSXJCLFdBQVU7a0NBQ2IsY0FBQSxNQUFDUzs0QkFDQ1EsY0FBWWhCOzRCQUNaRCxXQUFXYzs0QkFDWFEsTUFBTXBCOzs4Q0FFTixLQUFDRTtvQ0FDQ21CLGVBQVk7b0NBQ1p2QixXQUFVOzs4Q0FFWixLQUFDd0I7b0NBQUt4QixXQUFVOzhDQUFXSzs7Ozs7O2dCQUtoQ0UsTUFBTWtCLEdBQUcsQ0FBQyxDQUFDQyxNQUFNQztvQkFDaEIsTUFBTUMsWUFBWUYsS0FBS0csT0FBTyxJQUFJRixVQUFVcEIsTUFBTUksTUFBTSxHQUFHO29CQUUzRCxxQkFDRSxLQUFDUzt3QkFFQ3BCLFdBQVdQLEdBQUcsUUFBUWE7a0NBRXRCLGNBQUEsTUFBQ2U7NEJBQUlyQixXQUFVOzs4Q0FDYixLQUFDTjtvQ0FDQzZCLGVBQVk7b0NBQ1p2QixXQUFXZTtvQ0FDWGUsYUFBYTs7Z0NBR2RKLEtBQUtKLElBQUksaUJBQ1IsS0FBQ2I7b0NBQ0NzQixnQkFBY0gsWUFBWSxTQUFTSTtvQ0FDbkNoQyxXQUFVO29DQUNWc0IsTUFBTUksS0FBS0osSUFBSTs4Q0FFZEksS0FBS08sS0FBSzttREFHYixLQUFDVDtvQ0FDQ08sZ0JBQWNILFlBQVksU0FBU0k7b0NBQ25DaEMsV0FBVTs4Q0FFVDBCLEtBQUtPLEtBQUs7Ozs7dUJBdkJaLEdBQUdQLEtBQUtPLEtBQUssQ0FBQyxDQUFDLEVBQUVOLE9BQU87Z0JBNkJuQzs7OztBQUlSLEVBQUUifQ==

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumbs as BreadcrumbsComponent } from './Breadcrumbs.js';
+import { interactWithCanvas } from '../../utils/storyInteractions.js';
+const meta = {
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: [
+                'contained',
+                'full',
+                'chevrons'
+            ]
+        }
+    },
+    component: BreadcrumbsComponent,
+    parameters: {
+        layout: 'centered'
+    },
+    title: 'Components/Breadcrumbs'
+};
+export default meta;
+export const Contained = {
+    args: {
+        homeHref: '#',
+        items: [
+            {
+                href: '#',
+                label: 'Projects'
+            },
+            {
+                current: true,
+                href: '#',
+                label: 'Project Nero'
+            }
+        ],
+        variant: 'contained'
+    },
+    play: interactWithCanvas,
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-full max-w-4xl p-6",
+            children: /*#__PURE__*/ _jsx(BreadcrumbsComponent, {
+                ...args
+            })
+        })
+};
+export const Full = {
+    args: {
+        homeHref: '#',
+        items: [
+            {
+                href: '#',
+                label: 'Projects'
+            },
+            {
+                current: true,
+                href: '#',
+                label: 'Project Nero'
+            }
+        ],
+        variant: 'full'
+    },
+    play: interactWithCanvas,
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-full max-w-6xl p-6",
+            children: /*#__PURE__*/ _jsx(BreadcrumbsComponent, {
+                ...args
+            })
+        })
+};
+export const Chevrons = {
+    args: {
+        homeHref: '#',
+        items: [
+            {
+                href: '#',
+                label: 'Projects'
+            },
+            {
+                current: true,
+                href: '#',
+                label: 'Project Nero'
+            }
+        ],
+        variant: 'chevrons'
+    },
+    play: interactWithCanvas,
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-full max-w-4xl p-6",
+            children: /*#__PURE__*/ _jsx(BreadcrumbsComponent, {
+                ...args
+            })
+        })
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWJzL0JyZWFkY3J1bWJzLnN0b3JpZXMudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QnJlYWRjcnVtYnMgYXMgQnJlYWRjcnVtYnNDb21wb25lbnR9IGZyb20gJy4vQnJlYWRjcnVtYnMuanMnO1xuaW1wb3J0IHtpbnRlcmFjdFdpdGhDYW52YXN9IGZyb20gJy4uLy4uL3V0aWxzL3N0b3J5SW50ZXJhY3Rpb25zLmpzJztcblxuaW1wb3J0IHR5cGUge01ldGEsIFN0b3J5T2JqfSBmcm9tICdAbmxhYnMvbGV4L3N0b3J5Ym9vayc7XG5cbmNvbnN0IG1ldGE6IE1ldGE8dHlwZW9mIEJyZWFkY3J1bWJzQ29tcG9uZW50PiA9IHtcbiAgYXJnVHlwZXM6IHtcbiAgICB2YXJpYW50OiB7XG4gICAgICBjb250cm9sOiAnc2VsZWN0JyxcbiAgICAgIG9wdGlvbnM6IFsnY29udGFpbmVkJywgJ2Z1bGwnLCAnY2hldnJvbnMnXVxuICAgIH1cbiAgfSxcbiAgY29tcG9uZW50OiBCcmVhZGNydW1ic0NvbXBvbmVudCxcbiAgcGFyYW1ldGVyczoge1xuICAgIGxheW91dDogJ2NlbnRlcmVkJ1xuICB9LFxuICB0aXRsZTogJ0NvbXBvbmVudHMvQnJlYWRjcnVtYnMnXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xuXG50eXBlIFN0b3J5ID0gU3RvcnlPYmo8dHlwZW9mIEJyZWFkY3J1bWJzQ29tcG9uZW50PjtcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lZDogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBob21lSHJlZjogJyMnLFxuICAgIGl0ZW1zOiBbXG4gICAgICB7aHJlZjogJyMnLCBsYWJlbDogJ1Byb2plY3RzJ30sXG4gICAgICB7Y3VycmVudDogdHJ1ZSwgaHJlZjogJyMnLCBsYWJlbDogJ1Byb2plY3QgTmVybyd9XG4gICAgXSxcbiAgICB2YXJpYW50OiAnY29udGFpbmVkJ1xuICB9LFxuICBwbGF5OiBpbnRlcmFjdFdpdGhDYW52YXMsXG4gIHJlbmRlcjogKGFyZ3MpID0+IChcbiAgICA8ZGl2IGNsYXNzTmFtZT1cInctZnVsbCBtYXgtdy00eGwgcC02XCI+XG4gICAgICA8QnJlYWRjcnVtYnNDb21wb25lbnQgey4uLmFyZ3N9IC8+XG4gICAgPC9kaXY+XG4gIClcbn07XG5cbmV4cG9ydCBjb25zdCBGdWxsOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGhvbWVIcmVmOiAnIycsXG4gICAgaXRlbXM6IFtcbiAgICAgIHtocmVmOiAnIycsIGxhYmVsOiAnUHJvamVjdHMnfSxcbiAgICAgIHtjdXJyZW50OiB0cnVlLCBocmVmOiAnIycsIGxhYmVsOiAnUHJvamVjdCBOZXJvJ31cbiAgICBdLFxuICAgIHZhcmlhbnQ6ICdmdWxsJ1xuICB9LFxuICBwbGF5OiBpbnRlcmFjdFdpdGhDYW52YXMsXG4gIHJlbmRlcjogKGFyZ3MpID0+IChcbiAgICA8ZGl2IGNsYXNzTmFtZT1cInctZnVsbCBtYXgtdy02eGwgcC02XCI+XG4gICAgICA8QnJlYWRjcnVtYnNDb21wb25lbnQgey4uLmFyZ3N9IC8+XG4gICAgPC9kaXY+XG4gIClcbn07XG5cbmV4cG9ydCBjb25zdCBDaGV2cm9uczogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBob21lSHJlZjogJyMnLFxuICAgIGl0ZW1zOiBbXG4gICAgICB7aHJlZjogJyMnLCBsYWJlbDogJ1Byb2plY3RzJ30sXG4gICAgICB7Y3VycmVudDogdHJ1ZSwgaHJlZjogJyMnLCBsYWJlbDogJ1Byb2plY3QgTmVybyd9XG4gICAgXSxcbiAgICB2YXJpYW50OiAnY2hldnJvbnMnXG4gIH0sXG4gIHBsYXk6IGludGVyYWN0V2l0aENhbnZhcyxcbiAgcmVuZGVyOiAoYXJncykgPT4gKFxuICAgIDxkaXYgY2xhc3NOYW1lPVwidy1mdWxsIG1heC13LTR4bCBwLTZcIj5cbiAgICAgIDxCcmVhZGNydW1ic0NvbXBvbmVudCB7Li4uYXJnc30gLz5cbiAgICA8L2Rpdj5cbiAgKVxufTtcbiJdLCJuYW1lcyI6WyJCcmVhZGNydW1icyIsIkJyZWFkY3J1bWJzQ29tcG9uZW50IiwiaW50ZXJhY3RXaXRoQ2FudmFzIiwibWV0YSIsImFyZ1R5cGVzIiwidmFyaWFudCIsImNvbnRyb2wiLCJvcHRpb25zIiwiY29tcG9uZW50IiwicGFyYW1ldGVycyIsImxheW91dCIsInRpdGxlIiwiQ29udGFpbmVkIiwiYXJncyIsImhvbWVIcmVmIiwiaXRlbXMiLCJocmVmIiwibGFiZWwiLCJjdXJyZW50IiwicGxheSIsInJlbmRlciIsImRpdiIsImNsYXNzTmFtZSIsIkZ1bGwiLCJDaGV2cm9ucyJdLCJtYXBwaW5ncyI6IjtBQUFBLFNBQVFBLGVBQWVDLG9CQUFvQixRQUFPLG1CQUFtQjtBQUNyRSxTQUFRQyxrQkFBa0IsUUFBTyxtQ0FBbUM7QUFJcEUsTUFBTUMsT0FBMEM7SUFDOUNDLFVBQVU7UUFDUkMsU0FBUztZQUNQQyxTQUFTO1lBQ1RDLFNBQVM7Z0JBQUM7Z0JBQWE7Z0JBQVE7YUFBVztRQUM1QztJQUNGO0lBQ0FDLFdBQVdQO0lBQ1hRLFlBQVk7UUFDVkMsUUFBUTtJQUNWO0lBQ0FDLE9BQU87QUFDVDtBQUVBLGVBQWVSLEtBQUs7QUFJcEIsT0FBTyxNQUFNUyxZQUFtQjtJQUM5QkMsTUFBTTtRQUNKQyxVQUFVO1FBQ1ZDLE9BQU87WUFDTDtnQkFBQ0MsTUFBTTtnQkFBS0MsT0FBTztZQUFVO1lBQzdCO2dCQUFDQyxTQUFTO2dCQUFNRixNQUFNO2dCQUFLQyxPQUFPO1lBQWM7U0FDakQ7UUFDRFosU0FBUztJQUNYO0lBQ0FjLE1BQU1qQjtJQUNOa0IsUUFBUSxDQUFDUCxxQkFDUCxLQUFDUTtZQUFJQyxXQUFVO3NCQUNiLGNBQUEsS0FBQ3JCO2dCQUFzQixHQUFHWSxJQUFJOzs7QUFHcEMsRUFBRTtBQUVGLE9BQU8sTUFBTVUsT0FBYztJQUN6QlYsTUFBTTtRQUNKQyxVQUFVO1FBQ1ZDLE9BQU87WUFDTDtnQkFBQ0MsTUFBTTtnQkFBS0MsT0FBTztZQUFVO1lBQzdCO2dCQUFDQyxTQUFTO2dCQUFNRixNQUFNO2dCQUFLQyxPQUFPO1lBQWM7U0FDakQ7UUFDRFosU0FBUztJQUNYO0lBQ0FjLE1BQU1qQjtJQUNOa0IsUUFBUSxDQUFDUCxxQkFDUCxLQUFDUTtZQUFJQyxXQUFVO3NCQUNiLGNBQUEsS0FBQ3JCO2dCQUFzQixHQUFHWSxJQUFJOzs7QUFHcEMsRUFBRTtBQUVGLE9BQU8sTUFBTVcsV0FBa0I7SUFDN0JYLE1BQU07UUFDSkMsVUFBVTtRQUNWQyxPQUFPO1lBQ0w7Z0JBQUNDLE1BQU07Z0JBQUtDLE9BQU87WUFBVTtZQUM3QjtnQkFBQ0MsU0FBUztnQkFBTUYsTUFBTTtnQkFBS0MsT0FBTztZQUFjO1NBQ2pEO1FBQ0RaLFNBQVM7SUFDWDtJQUNBYyxNQUFNakI7SUFDTmtCLFFBQVEsQ0FBQ1AscUJBQ1AsS0FBQ1E7WUFBSUMsV0FBVTtzQkFDYixjQUFBLEtBQUNyQjtnQkFBc0IsR0FBR1ksSUFBSTs7O0FBR3BDLEVBQUUifQ==

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonHTMLAttributes, ElementType, ReactNode, Ref } from 'react';
+import type { GothamColor } from '../../utils/colorUtils.js';
+import type { GothamSize } from '../../utils/sizeUtils.js';
+export type ButtonType = 'button' | 'reset' | 'submit';
+export type ButtonVariant = 'text' | 'solid' | 'outline' | 'contained' | 'outlined';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color' | 'onClick' | 'type'> {
+    readonly as?: ElementType;
+    readonly asChild?: boolean;
+    readonly backgroundColor?: GothamColor;
+    readonly children?: ReactNode;
+    readonly color?: GothamColor;
+    readonly hasNotification?: boolean;
+    readonly hasShadow?: boolean;
+    readonly icon?: ReactNode;
+    readonly isLoading?: boolean;
+    readonly label?: string;
+    readonly labelColor?: GothamColor;
+    readonly onClick?: (event?: unknown) => void;
+    readonly ref?: Ref<HTMLButtonElement>;
+    readonly rounded?: number;
+    readonly size?: GothamSize;
+    readonly type?: ButtonType;
+    readonly variant?: ButtonVariant;
+}
+export declare const Button: ({ as, asChild, backgroundColor, children, className, color, disabled, hasNotification, hasShadow, icon, isLoading, label, labelColor, onClick, ref, rounded, size, style, type, variant, ...props }: ButtonProps) => import("react").JSX.Element | null;