@shipfox/react-ui 0.2.0 → 0.4.0

package/dist/components/avatar/avatar.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva } from 'class-variance-authority';
+import { getInitial, getPlaceholderImageUrl } from '../../utils/index.js';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/icon.js';
+export const avatarVariants = cva('relative flex shrink-0 overflow-hidden bg-background-button-neutral-default text-foreground-neutral-base ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral', {
+    variants: {
+        radius: {
+            full: 'rounded-full',
+            rounded: 'rounded-6'
+        },
+        size: {
+            '3xs': 'size-[18px]',
+            '2xs': 'size-[20px]',
+            xs: 'size-[24px]',
+            sm: 'size-[28px]',
+            md: 'size-[32px]',
+            lg: 'size-[36px]',
+            xl: 'size-[40px]',
+            '2xl': 'size-[80px]',
+            '3xl': 'size-[120px]'
+        }
+    },
+    defaultVariants: {
+        radius: 'full',
+        size: 'md'
+    }
+});
+const avatarInnerVariants = cva('flex h-full w-full items-center justify-center', {
+    variants: {
+        size: {
+            '3xs': 'text-[10px] leading-[10px]',
+            '2xs': 'text-[11px] leading-[11px]',
+            xs: 'text-xs leading-4',
+            sm: 'text-xs leading-5',
+            md: 'text-sm leading-5',
+            lg: 'text-sm leading-5',
+            xl: 'text-base leading-6',
+            '2xl': 'text-2xl leading-8',
+            '3xl': 'text-4xl leading-[56px]'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const UPLOAD_ICON_SIZE_MAP = {
+    '3xs': 'size-[10px]',
+    '2xs': 'size-[12px]',
+    xs: 'size-[14px]',
+    sm: 'size-[16px]',
+    md: 'size-[18px]',
+    lg: 'size-[20px]',
+    xl: 'size-[24px]',
+    '2xl': 'size-[40px]',
+    '3xl': 'size-[60px]'
+};
+function AvatarRoot({ className, radius, size, ...props }) {
+    return /*#__PURE__*/ _jsx(AvatarPrimitive.Root, {
+        "data-slot": "avatar",
+        className: cn(avatarVariants({
+            radius,
+            size
+        }), className),
+        ...props
+    });
+}
+function AvatarImage({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(AvatarPrimitive.Image, {
+        "data-slot": "avatar-image",
+        className: cn('aspect-square size-full', className),
+        ...props
+    });
+}
+function AvatarFallback({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(AvatarPrimitive.Fallback, {
+        "data-slot": "avatar-name",
+        className: cn('flex size-full items-center justify-center', className),
+        ...props
+    });
+}
+export function Avatar({ className, radius, size = 'md', content = 'letters', src, alt, fallback, animateOnHover = false, logoName = 'shipfox', logoClassName, ...props }) {
+    const innerClassName = 'flex h-full w-full items-center justify-center rounded-inherit relative bg-background-neutral-base dark:bg-background-components-base text-foreground-neutral-subtle';
+    const renderContent = ()=>{
+        if (content === 'image') {
+            const imageSrc = src || getPlaceholderImageUrl(fallback);
+            return /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(AvatarImage, {
+                        src: imageSrc,
+                        alt: alt || 'Avatar image',
+                        className: "object-scale-down rounded-inherit"
+                    }),
+                    /*#__PURE__*/ _jsx(AvatarFallback, {
+                        className: innerClassName,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: cn('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', avatarInnerVariants({
+                                size
+                            })),
+                            children: /*#__PURE__*/ _jsx("span", {
+                                className: "font-medium",
+                                children: getInitial(fallback)
+                            })
+                        })
+                    })
+                ]
+            });
+        }
+        if (content === 'logo') {
+            return /*#__PURE__*/ _jsx(AvatarFallback, {
+                className: cn(innerClassName, logoClassName ?? 'p-[15%]'),
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: logoName,
+                    className: "h-full w-full"
+                })
+            });
+        }
+        if (content === 'logoPlaceholder') {
+            return /*#__PURE__*/ _jsx(AvatarFallback, {
+                className: cn(innerClassName, logoClassName ?? 'p-[15%]'),
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: logoName,
+                    color: "var(--foreground-neutral-subtle, #a1a1aa)",
+                    className: "h-full w-full opacity-50"
+                })
+            });
+        }
+        if (content === 'letters') {
+            return /*#__PURE__*/ _jsx(AvatarFallback, {
+                className: innerClassName,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: cn('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', avatarInnerVariants({
+                        size
+                    })),
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: "font-medium",
+                        children: getInitial(fallback)
+                    })
+                })
+            });
+        }
+        if (content === 'upload') {
+            const iconSizeClass = UPLOAD_ICON_SIZE_MAP[size];
+            return /*#__PURE__*/ _jsx(AvatarFallback, {
+                className: innerClassName,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "imageAdd",
+                    className: cn('text-foreground-neutral-subtle', iconSizeClass)
+                })
+            });
+        }
+        return null;
+    };
+    return /*#__PURE__*/ _jsx(AvatarRoot, {
+        className: cn(animateOnHover ? 'hover:-translate-y-8 transition-transform duration-300 ease-out' : '', className),
+        radius: radius,
+        size: size,
+        ...props,
+        children: renderContent()
+    });
+}
+export { AvatarRoot, AvatarImage, AvatarFallback };
+
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps, ReactNode} from 'react';\nimport {getInitial, getPlaceholderImageUrl} from 'utils';\nimport {cn} from 'utils/cn';\nimport {Icon, type IconName} from '../icon/icon';\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden bg-background-button-neutral-default text-foreground-neutral-base ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',\n  {\n    variants: {\n      radius: {\n        full: 'rounded-full',\n        rounded: 'rounded-6',\n      },\n      size: {\n        '3xs': 'size-[18px]',\n        '2xs': 'size-[20px]',\n        xs: 'size-[24px]',\n        sm: 'size-[28px]',\n        md: 'size-[32px]',\n        lg: 'size-[36px]',\n        xl: 'size-[40px]',\n        '2xl': 'size-[80px]',\n        '3xl': 'size-[120px]',\n      },\n    },\n    defaultVariants: {\n      radius: 'full',\n      size: 'md',\n    },\n  },\n);\n\nconst avatarInnerVariants = cva('flex h-full w-full items-center justify-center', {\n  variants: {\n    size: {\n      '3xs': 'text-[10px] leading-[10px]',\n      '2xs': 'text-[11px] leading-[11px]',\n      xs: 'text-xs leading-4',\n      sm: 'text-xs leading-5',\n      md: 'text-sm leading-5',\n      lg: 'text-sm leading-5',\n      xl: 'text-base leading-6',\n      '2xl': 'text-2xl leading-8',\n      '3xl': 'text-4xl leading-[56px]',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport type AvatarContent = 'letters' | 'logo' | 'logoPlaceholder' | 'image' | 'upload';\n\nconst UPLOAD_ICON_SIZE_MAP: Record<\n  NonNullable<VariantProps<typeof avatarVariants>['size']>,\n  string\n> = {\n  '3xs': 'size-[10px]',\n  '2xs': 'size-[12px]',\n  xs: 'size-[14px]',\n  sm: 'size-[16px]',\n  md: 'size-[18px]',\n  lg: 'size-[20px]',\n  xl: 'size-[24px]',\n  '2xl': 'size-[40px]',\n  '3xl': 'size-[60px]',\n} as const;\n\nfunction AvatarRoot({\n  className,\n  radius,\n  size,\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(avatarVariants({radius, size}), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({className, ...props}: ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({className, ...props}: ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-name\"\n      className={cn('flex size-full items-center justify-center', className)}\n      {...props}\n    />\n  );\n}\n\nexport type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> &\n  VariantProps<typeof avatarVariants> & {\n    content?: AvatarContent;\n    src?: string;\n    alt?: string;\n    fallback?: string;\n    animateOnHover?: boolean;\n    logoName?: IconName;\n    logoClassName?: string;\n  };\n\nexport function Avatar({\n  className,\n  radius,\n  size = 'md',\n  content = 'letters',\n  src,\n  alt,\n  fallback,\n  animateOnHover = false,\n  logoName = 'shipfox',\n  logoClassName,\n  ...props\n}: AvatarProps) {\n  const innerClassName =\n    'flex h-full w-full items-center justify-center rounded-inherit relative bg-background-neutral-base dark:bg-background-components-base text-foreground-neutral-subtle';\n\n  const renderContent = (): ReactNode => {\n    if (content === 'image') {\n      const imageSrc = src || getPlaceholderImageUrl(fallback);\n      return (\n        <>\n          <AvatarImage\n            src={imageSrc}\n            alt={alt || 'Avatar image'}\n            className=\"object-scale-down rounded-inherit\"\n          />\n          <AvatarFallback className={innerClassName}>\n            <div\n              className={cn(\n                'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n                avatarInnerVariants({size}),\n              )}\n            >\n              <span className=\"font-medium\">{getInitial(fallback)}</span>\n            </div>\n          </AvatarFallback>\n        </>\n      );\n    }\n\n    if (content === 'logo') {\n      return (\n        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>\n          <Icon name={logoName} className=\"h-full w-full\" />\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'logoPlaceholder') {\n      return (\n        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>\n          <Icon\n            name={logoName}\n            color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n            className=\"h-full w-full opacity-50\"\n          />\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'letters') {\n      return (\n        <AvatarFallback className={innerClassName}>\n          <div\n            className={cn(\n              'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n              avatarInnerVariants({size}),\n            )}\n          >\n            <span className=\"font-medium\">{getInitial(fallback)}</span>\n          </div>\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'upload') {\n      const iconSizeClass = UPLOAD_ICON_SIZE_MAP[size as keyof typeof UPLOAD_ICON_SIZE_MAP];\n      return (\n        <AvatarFallback className={innerClassName}>\n          <Icon name=\"imageAdd\" className={cn('text-foreground-neutral-subtle', iconSizeClass)} />\n        </AvatarFallback>\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <AvatarRoot\n      className={cn(\n        animateOnHover ? 'hover:-translate-y-8 transition-transform duration-300 ease-out' : '',\n        className,\n      )}\n      radius={radius}\n      size={size}\n      {...props}\n    >\n      {renderContent()}\n    </AvatarRoot>\n  );\n}\n\nexport {AvatarRoot, AvatarImage, AvatarFallback};\n"],"names":["AvatarPrimitive","cva","getInitial","getPlaceholderImageUrl","cn","Icon","avatarVariants","variants","radius","full","rounded","size","xs","sm","md","lg","xl","defaultVariants","avatarInnerVariants","UPLOAD_ICON_SIZE_MAP","AvatarRoot","className","props","Root","data-slot","AvatarImage","Image","AvatarFallback","Fallback","Avatar","content","src","alt","fallback","animateOnHover","logoName","logoClassName","innerClassName","renderContent","imageSrc","div","span","name","color","iconSizeClass"],"mappings":"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"}

package/dist/components/avatar/avatar.stories.js

@@ -0,0 +1,267 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code } from '../../components/typography/index.js';
+import { Avatar } from './avatar.js';
+import { AvatarGroup, AvatarGroupTooltip } from './avatar-group.js';
+const contentOptions = [
+    'letters',
+    'logo',
+    'logoPlaceholder',
+    'image',
+    'upload'
+];
+const radiusOptions = [
+    'full',
+    'rounded'
+];
+const sizeOptions = [
+    '3xs',
+    '2xs',
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    '2xl',
+    '3xl'
+];
+const logoNameOptions = [
+    'shipfox',
+    'slack',
+    'stripe',
+    'github'
+];
+const meta = {
+    title: 'Components/Avatar',
+    component: Avatar,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        content: {
+            control: 'select',
+            options: contentOptions
+        },
+        radius: {
+            control: 'select',
+            options: radiusOptions
+        },
+        size: {
+            control: 'select',
+            options: sizeOptions
+        },
+        fallback: {
+            control: 'text'
+        },
+        src: {
+            control: 'text'
+        },
+        alt: {
+            control: 'text'
+        },
+        logoName: {
+            control: 'select',
+            options: logoNameOptions,
+            description: 'Logo icon name to display when content is "logo" or "logoPlaceholder"'
+        }
+    },
+    args: {
+        content: 'letters',
+        radius: 'full',
+        size: 'md',
+        fallback: 'John Doe',
+        logoName: 'shipfox'
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        content: 'logo',
+        fallback: 'Shipfox'
+    },
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-wrap items-end gap-16",
+            children: sizeOptions.map((size)=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col items-center gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Avatar, {
+                            ...args,
+                            size: size
+                        }),
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-base",
+                            children: size
+                        })
+                    ]
+                }, size))
+        })
+};
+// AvatarGroup Stories
+const avatarGroupMeta = {
+    title: 'Components/AvatarGroup',
+    component: AvatarGroup,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: sizeOptions
+        },
+        maxVisible: {
+            control: 'number'
+        }
+    },
+    args: {
+        size: 'md',
+        children: []
+    }
+};
+export const AvatarGroupDefault = {
+    args: {
+        children: []
+    },
+    render: ()=>{
+        const avatars = [
+            {
+                name: 'John Doe',
+                content: 'image'
+            },
+            {
+                name: 'Jane Smith',
+                content: 'image'
+            },
+            {
+                name: 'Bob Johnson',
+                content: 'image'
+            },
+            {
+                name: 'Alice Brown',
+                content: 'image'
+            }
+        ];
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-16",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-8",
+                children: [
+                    /*#__PURE__*/ _jsx(Code, {
+                        variant: "label",
+                        className: "text-foreground-neutral-base",
+                        children: "Default (without tooltips)"
+                    }),
+                    /*#__PURE__*/ _jsx(AvatarGroup, {
+                        size: "md",
+                        children: avatars.map((avatar)=>/*#__PURE__*/ _jsx(Avatar, {
+                                content: avatar.content,
+                                fallback: avatar.name
+                            }, avatar.name))
+                    })
+                ]
+            })
+        });
+    }
+};
+export const AvatarGroupWithTooltips = {
+    args: {
+        children: []
+    },
+    render: ()=>{
+        const avatars = [
+            {
+                name: 'John Doe',
+                content: 'image'
+            },
+            {
+                name: 'Jane Smith',
+                content: 'image'
+            },
+            {
+                name: 'Bob Johnson',
+                content: 'image'
+            },
+            {
+                name: 'Alice Brown',
+                content: 'image'
+            },
+            {
+                name: 'Carlos Vega',
+                content: 'image'
+            },
+            {
+                name: 'Linda Tran',
+                content: 'image'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-base",
+                            children: "With Tooltips"
+                        }),
+                        /*#__PURE__*/ _jsx(AvatarGroup, {
+                            size: "md",
+                            children: avatars.map((avatar)=>/*#__PURE__*/ _jsx(Avatar, {
+                                    content: avatar.content,
+                                    fallback: avatar.name,
+                                    children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                        children: avatar.name
+                                    })
+                                }, avatar.name))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-base",
+                            children: "With Tooltips (maxVisible: 4)"
+                        }),
+                        /*#__PURE__*/ _jsx(AvatarGroup, {
+                            size: "md",
+                            maxVisible: 4,
+                            children: avatars.map((avatar)=>/*#__PURE__*/ _jsx(Avatar, {
+                                    content: avatar.content,
+                                    fallback: avatar.name,
+                                    children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                        children: avatar.name
+                                    })
+                                }, avatar.name))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-base",
+                            children: "With Tooltips and Hover Animation"
+                        }),
+                        /*#__PURE__*/ _jsx(AvatarGroup, {
+                            size: "md",
+                            maxVisible: 4,
+                            animateOnHover: true,
+                            children: avatars.map((avatar)=>/*#__PURE__*/ _jsx(Avatar, {
+                                    content: avatar.content,
+                                    fallback: avatar.name,
+                                    children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                        children: avatar.name
+                                    })
+                                }, avatar.name))
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=avatar.stories.js.map

package/dist/components/avatar/avatar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/avatar/avatar.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Avatar} from './avatar';\nimport {AvatarGroup, AvatarGroupTooltip} from './avatar-group';\n\nconst contentOptions = ['letters', 'logo', 'logoPlaceholder', 'image', 'upload'] as const;\nconst radiusOptions = ['full', 'rounded'] as const;\nconst sizeOptions = ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;\nconst logoNameOptions = ['shipfox', 'slack', 'stripe', 'github'] as const;\n\nconst meta = {\n  title: 'Components/Avatar',\n  component: Avatar,\n  tags: ['autodocs'],\n  argTypes: {\n    content: {\n      control: 'select',\n      options: contentOptions,\n    },\n    radius: {\n      control: 'select',\n      options: radiusOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    fallback: {\n      control: 'text',\n    },\n    src: {\n      control: 'text',\n    },\n    alt: {\n      control: 'text',\n    },\n    logoName: {\n      control: 'select',\n      options: logoNameOptions,\n      description: 'Logo icon name to display when content is \"logo\" or \"logoPlaceholder\"',\n    },\n  },\n  args: {\n    content: 'letters',\n    radius: 'full',\n    size: 'md',\n    fallback: 'John Doe',\n    logoName: 'shipfox',\n  },\n} satisfies Meta<typeof Avatar>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {\n    content: 'logo',\n    fallback: 'Shipfox',\n  },\n\n  render: (args) => (\n    <div className=\"flex flex-wrap items-end gap-16\">\n      {sizeOptions.map((size) => (\n        <div key={size} className=\"flex flex-col items-center gap-8\">\n          <Avatar {...args} size={size} />\n          <Code variant=\"label\" className=\"text-foreground-neutral-base\">\n            {size}\n          </Code>\n        </div>\n      ))}\n    </div>\n  ),\n};\n\n// AvatarGroup Stories\nconst avatarGroupMeta = {\n  title: 'Components/AvatarGroup',\n  component: AvatarGroup,\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    maxVisible: {\n      control: 'number',\n    },\n  },\n  args: {\n    size: 'md',\n    children: [],\n  },\n} satisfies Meta<typeof AvatarGroup>;\n\nexport const AvatarGroupDefault: StoryObj<typeof avatarGroupMeta> = {\n  args: {\n    children: [],\n  },\n  render: () => {\n    const avatars = [\n      {name: 'John Doe', content: 'image'},\n      {name: 'Jane Smith', content: 'image'},\n      {name: 'Bob Johnson', content: 'image'},\n      {name: 'Alice Brown', content: 'image'},\n    ] as const;\n\n    return (\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-base\">\n            Default (without tooltips)\n          </Code>\n          <AvatarGroup size=\"md\">\n            {avatars.map((avatar) => (\n              <Avatar key={avatar.name} content={avatar.content} fallback={avatar.name} />\n            ))}\n          </AvatarGroup>\n        </div>\n      </div>\n    );\n  },\n};\n\nexport const AvatarGroupWithTooltips: StoryObj<typeof avatarGroupMeta> = {\n  args: {\n    children: [],\n  },\n  render: () => {\n    const avatars = [\n      {name: 'John Doe', content: 'image'},\n      {name: 'Jane Smith', content: 'image'},\n      {name: 'Bob Johnson', content: 'image'},\n      {name: 'Alice Brown', content: 'image'},\n      {name: 'Carlos Vega', content: 'image'},\n      {name: 'Linda Tran', content: 'image'},\n    ] as const;\n\n    return (\n      <div className=\"flex flex-col gap-16\">\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-base\">\n            With Tooltips\n          </Code>\n          <AvatarGroup size=\"md\">\n            {avatars.map((avatar) => (\n              <Avatar key={avatar.name} content={avatar.content} fallback={avatar.name}>\n                <AvatarGroupTooltip>{avatar.name}</AvatarGroupTooltip>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-base\">\n            With Tooltips (maxVisible: 4)\n          </Code>\n          <AvatarGroup size=\"md\" maxVisible={4}>\n            {avatars.map((avatar) => (\n              <Avatar key={avatar.name} content={avatar.content} fallback={avatar.name}>\n                <AvatarGroupTooltip>{avatar.name}</AvatarGroupTooltip>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n        </div>\n        <div className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-base\">\n            With Tooltips and Hover Animation\n          </Code>\n          <AvatarGroup size=\"md\" maxVisible={4} animateOnHover>\n            {avatars.map((avatar) => (\n              <Avatar key={avatar.name} content={avatar.content} fallback={avatar.name}>\n                <AvatarGroupTooltip>{avatar.name}</AvatarGroupTooltip>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["Code","Avatar","AvatarGroup","AvatarGroupTooltip","contentOptions","radiusOptions","sizeOptions","logoNameOptions","meta","title","component","tags","argTypes","content","control","options","radius","size","fallback","src","alt","logoName","description","args","Default","render","div","className","map","variant","avatarGroupMeta","maxVisible","children","AvatarGroupDefault","avatars","name","avatar","AvatarGroupWithTooltips","animateOnHover"],"mappings":"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"}

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './avatar';
+export * from './avatar-group';
+//# sourceMappingURL=index.d.ts.map

package/dist/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,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/components/avatar/index.js

@@ -0,0 +1,4 @@
+export * from './avatar.js';
+export * from './avatar-group.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/avatar/index.ts"],"sourcesContent":["export * from './avatar';\nexport * from './avatar-group';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,iBAAiB"}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,48 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../components/icon';
+import type { ComponentProps } from 'react';
+export declare const badgeVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "error" | "neutral" | "feature" | null | undefined;
+    size?: "2xs" | "xs" | null | undefined;
+    radius?: "default" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+type BaseBadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+};
+type BadgePropsWithLeftClick = BaseBadgeProps & {
+    iconLeft: IconName;
+    onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconLeftAriaLabel: string;
+    iconRight?: IconName;
+    onIconRightClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconRightAriaLabel?: string;
+};
+type BadgePropsWithRightClick = BaseBadgeProps & {
+    iconRight: IconName;
+    onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconRightAriaLabel: string;
+    iconLeft?: IconName;
+    onIconLeftClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconLeftAriaLabel?: string;
+};
+type BadgePropsWithBothClicks = BaseBadgeProps & {
+    iconLeft: IconName;
+    onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconLeftAriaLabel: string;
+    iconRight: IconName;
+    onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconRightAriaLabel: string;
+};
+type BadgePropsWithoutClicks = BaseBadgeProps & {
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    onIconLeftClick?: never;
+    onIconRightClick?: never;
+    iconLeftAriaLabel?: never;
+    iconRightAriaLabel?: never;
+};
+export type BadgeProps = BadgePropsWithLeftClick | BadgePropsWithRightClick | BadgePropsWithBothClicks | BadgePropsWithoutClicks;
+export declare function Badge({ className, variant, size, radius, asChild, children, iconLeft, iconRight, onIconLeftClick, onIconRightClick, iconLeftAriaLabel, iconRightAriaLabel, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,aAAa;;;;8EAgCzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;AAEzE,KAAK,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC,GAC1C,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,KAAK,uBAAuB,GAAG,cAAc,GAAG;IAC9C,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAClE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,KAAK,wBAAwB,GAAG,cAAc,GAAG;IAC/C,SAAS,EAAE,QAAQ,CAAC;IACpB,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,wBAAwB,GAAG,cAAc,GAAG;IAC/C,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAClE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,QAAQ,CAAC;IACpB,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,uBAAuB,GAAG,cAAc,GAAG;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,UAAU,GAClB,uBAAuB,GACvB,wBAAwB,GACxB,wBAAwB,GACxB,uBAAuB,CAAC;AAE5B,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,UAAU,2CA2CZ"}

package/dist/components/badge/badge.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+export const badgeVariants = cva('inline-flex select-none items-center justify-center font-medium transition-colors shrink-0 leading-20', {
+    variants: {
+        variant: {
+            neutral: 'bg-tag-neutral-bg text-tag-neutral-text border border-tag-neutral-border hover:bg-tag-neutral-bg-hover',
+            info: 'bg-tag-blue-bg text-tag-blue-text border border-tag-blue-border hover:bg-tag-blue-bg-hover',
+            feature: 'bg-tag-purple-bg text-tag-purple-text border border-tag-purple-border hover:bg-tag-purple-bg-hover',
+            success: 'bg-tag-success-bg text-tag-success-text border border-tag-success-border hover:bg-tag-success-bg-hover',
+            warning: 'bg-tag-warning-bg text-tag-warning-text border border-tag-warning-border hover:bg-tag-warning-bg-hover',
+            error: 'bg-tag-error-bg text-tag-error-text border border-tag-error-border hover:bg-tag-error-bg-hover'
+        },
+        size: {
+            '2xs': 'h-20 px-6 text-xs gap-4',
+            xs: 'h-24 px-8 text-xs gap-6'
+        },
+        radius: {
+            default: 'rounded-6',
+            rounded: 'rounded-full'
+        }
+    },
+    defaultVariants: {
+        variant: 'neutral',
+        size: '2xs',
+        radius: 'default'
+    }
+});
+export function Badge({ className, variant, size, radius, asChild = false, children, iconLeft, iconRight, onIconLeftClick, onIconRightClick, iconLeftAriaLabel, iconRightAriaLabel, ...props }) {
+    const Comp = asChild ? Slot : 'span';
+    const renderIcon = (iconName, position, onClick, ariaLabel)=>{
+        const isInteractive = Boolean(onClick);
+        if (isInteractive) {
+            if (!ariaLabel) {
+                // biome-ignore lint/suspicious/noConsole: Development warning for accessibility
+                console.warn(`Badge: Missing aria-label for interactive ${position} icon. Please provide icon${position === 'left' ? 'Left' : 'Right'}AriaLabel prop.`);
+                return null;
+            }
+            return /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: onClick,
+                className: "inline-flex items-center justify-center transition-colors shrink-0 hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500",
+                "aria-label": ariaLabel,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: iconName,
+                    className: "size-12"
+                })
+            });
+        }
+        return /*#__PURE__*/ _jsx(Icon, {
+            name: iconName,
+            className: "size-12"
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Comp, {
+        className: cn(badgeVariants({
+            variant,
+            size,
+            radius
+        }), className),
+        ...props,
+        children: [
+            iconLeft && renderIcon(iconLeft, 'left', onIconLeftClick, iconLeftAriaLabel),
+            children,
+            iconRight && renderIcon(iconRight, 'right', onIconRightClick, iconRightAriaLabel)
+        ]
+    });
+}
+
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const badgeVariants = cva(\n  'inline-flex select-none items-center justify-center font-medium transition-colors shrink-0 leading-20',\n  {\n    variants: {\n      variant: {\n        neutral:\n          'bg-tag-neutral-bg text-tag-neutral-text border border-tag-neutral-border hover:bg-tag-neutral-bg-hover',\n        info: 'bg-tag-blue-bg text-tag-blue-text border border-tag-blue-border hover:bg-tag-blue-bg-hover',\n        feature:\n          'bg-tag-purple-bg text-tag-purple-text border border-tag-purple-border hover:bg-tag-purple-bg-hover',\n        success:\n          'bg-tag-success-bg text-tag-success-text border border-tag-success-border hover:bg-tag-success-bg-hover',\n        warning:\n          'bg-tag-warning-bg text-tag-warning-text border border-tag-warning-border hover:bg-tag-warning-bg-hover',\n        error:\n          'bg-tag-error-bg text-tag-error-text border border-tag-error-border hover:bg-tag-error-bg-hover',\n      },\n      size: {\n        '2xs': 'h-20 px-6 text-xs gap-4',\n        xs: 'h-24 px-8 text-xs gap-6',\n      },\n      radius: {\n        default: 'rounded-6',\n        rounded: 'rounded-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: '2xs',\n      radius: 'default',\n    },\n  },\n);\n\nexport type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];\n\ntype BaseBadgeProps = ComponentProps<'span'> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean;\n  };\n\ntype BadgePropsWithLeftClick = BaseBadgeProps & {\n  iconLeft: IconName;\n  onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconLeftAriaLabel: string;\n  iconRight?: IconName;\n  onIconRightClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconRightAriaLabel?: string;\n};\n\ntype BadgePropsWithRightClick = BaseBadgeProps & {\n  iconRight: IconName;\n  onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconRightAriaLabel: string;\n  iconLeft?: IconName;\n  onIconLeftClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconLeftAriaLabel?: string;\n};\n\ntype BadgePropsWithBothClicks = BaseBadgeProps & {\n  iconLeft: IconName;\n  onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconLeftAriaLabel: string;\n  iconRight: IconName;\n  onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconRightAriaLabel: string;\n};\n\ntype BadgePropsWithoutClicks = BaseBadgeProps & {\n  iconLeft?: IconName;\n  iconRight?: IconName;\n  onIconLeftClick?: never;\n  onIconRightClick?: never;\n  iconLeftAriaLabel?: never;\n  iconRightAriaLabel?: never;\n};\n\nexport type BadgeProps =\n  | BadgePropsWithLeftClick\n  | BadgePropsWithRightClick\n  | BadgePropsWithBothClicks\n  | BadgePropsWithoutClicks;\n\nexport function Badge({\n  className,\n  variant,\n  size,\n  radius,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  onIconLeftClick,\n  onIconRightClick,\n  iconLeftAriaLabel,\n  iconRightAriaLabel,\n  ...props\n}: BadgeProps) {\n  const Comp = asChild ? Slot : 'span';\n\n  const renderIcon = (\n    iconName: IconName,\n    position: 'left' | 'right',\n    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void,\n    ariaLabel?: string,\n  ) => {\n    const isInteractive = Boolean(onClick);\n\n    if (isInteractive) {\n      if (!ariaLabel) {\n        // biome-ignore lint/suspicious/noConsole: Development warning for accessibility\n        console.warn(\n          `Badge: Missing aria-label for interactive ${position} icon. Please provide icon${position === 'left' ? 'Left' : 'Right'}AriaLabel prop.`,\n        );\n\n        return null;\n      }\n\n      return (\n        <button\n          type=\"button\"\n          onClick={onClick}\n          className=\"inline-flex items-center justify-center transition-colors shrink-0 hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500\"\n          aria-label={ariaLabel}\n        >\n          <Icon name={iconName} className=\"size-12\" />\n        </button>\n      );\n    }\n\n    return <Icon name={iconName} className=\"size-12\" />;\n  };\n\n  return (\n    <Comp className={cn(badgeVariants({variant, size, radius}), className)} {...props}>\n      {iconLeft && renderIcon(iconLeft, 'left', onIconLeftClick, iconLeftAriaLabel)}\n      {children}\n      {iconRight && renderIcon(iconRight, 'right', onIconRightClick, iconRightAriaLabel)}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","badgeVariants","variants","variant","neutral","info","feature","success","warning","error","size","xs","radius","default","rounded","defaultVariants","Badge","className","asChild","children","iconLeft","iconRight","onIconLeftClick","onIconRightClick","iconLeftAriaLabel","iconRightAriaLabel","props","Comp","renderIcon","iconName","position","onClick","ariaLabel","isInteractive","Boolean","console","warn","button","type","aria-label","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,gBAAgBH,IAC3B,yGACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,MAAM;YACNC,SACE;YACFC,SACE;YACFC,SACE;YACFC,OACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,SAAS;QACX;IACF;IACAC,iBAAiB;QACfZ,SAAS;QACTO,MAAM;QACNE,QAAQ;IACV;AACF,GACA;AAmDF,OAAO,SAASI,MAAM,EACpBC,SAAS,EACTd,OAAO,EACPO,IAAI,EACJE,MAAM,EACNM,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,kBAAkB,EAClB,GAAGC,OACQ;IACX,MAAMC,OAAOT,UAAUrB,OAAO;IAE9B,MAAM+B,aAAa,CACjBC,UACAC,UACAC,SACAC;QAEA,MAAMC,gBAAgBC,QAAQH;QAE9B,IAAIE,eAAe;YACjB,IAAI,CAACD,WAAW;gBACd,gFAAgF;gBAChFG,QAAQC,IAAI,CACV,CAAC,0CAA0C,EAAEN,SAAS,0BAA0B,EAAEA,aAAa,SAAS,SAAS,QAAQ,eAAe,CAAC;gBAG3I,OAAO;YACT;YAEA,qBACE,KAACO;gBACCC,MAAK;gBACLP,SAASA;gBACTd,WAAU;gBACVsB,cAAYP;0BAEZ,cAAA,KAACjC;oBAAKyC,MAAMX;oBAAUZ,WAAU;;;QAGtC;QAEA,qBAAO,KAAClB;YAAKyC,MAAMX;YAAUZ,WAAU;;IACzC;IAEA,qBACE,MAACU;QAAKV,WAAWjB,GAAGC,cAAc;YAACE;YAASO;YAAME;QAAM,IAAIK;QAAa,GAAGS,KAAK;;YAC9EN,YAAYQ,WAAWR,UAAU,QAAQE,iBAAiBE;YAC1DL;YACAE,aAAaO,WAAWP,WAAW,SAASE,kBAAkBE;;;AAGrE"}