@shipfox/react-ui 0.2.0 → 0.3.0

package/dist/components/avatar/avatar.js

@@ -0,0 +1,166 @@
+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, ...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, 'p-[15%]'),
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "shipfoxLogo",
+                    color: "#FF4B00",
+                    className: "h-full w-full p-2"
+                })
+            });
+        }
+        if (content === 'logoPlaceholder') {
+            return /*#__PURE__*/ _jsx(AvatarFallback, {
+                className: cn(innerClassName, 'p-[15%]'),
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "shipfoxLogo",
+                    color: "var(--foreground-neutral-subtle, #a1a1aa)",
+                    className: "h-full w-full p-2 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} 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  };\n\nexport function Avatar({\n  className,\n  radius,\n  size = 'md',\n  content = 'letters',\n  src,\n  alt,\n  fallback,\n  animateOnHover = false,\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, 'p-[15%]')}>\n          <Icon name=\"shipfoxLogo\" color=\"#FF4B00\" className=\"h-full w-full p-2\" />\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'logoPlaceholder') {\n      return (\n        <AvatarFallback className={cn(innerClassName, 'p-[15%]')}>\n          <Icon\n            name=\"shipfoxLogo\"\n            color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n            className=\"h-full w-full p-2 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","innerClassName","renderContent","imageSrc","div","span","name","color","iconSizeClass"],"mappings":"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"}

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

@@ -0,0 +1,255 @@
+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 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'
+        }
+    },
+    args: {
+        content: 'letters',
+        radius: 'full',
+        size: 'md',
+        fallback: 'John Doe'
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        content: 'upload',
+        fallback: 'Kyle Nguyen'
+    },
+    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;\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  },\n  args: {\n    content: 'letters',\n    radius: 'full',\n    size: 'md',\n    fallback: 'John Doe',\n  },\n} satisfies Meta<typeof Avatar>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {\n    content: 'upload',\n    fallback: 'Kyle Nguyen',\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","meta","title","component","tags","argTypes","content","control","options","radius","size","fallback","src","alt","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/icon/custom/index.d.ts

@@ -6,6 +6,7 @@ export * from './component-line';
 export * from './ellipse-mini-solid';
 export * from './info-tooltip-fill';
 export * from './resize';
+export * from './shipfox-logo';
 export * from './spinner';
 export * from './thunder';
 export * from './x-circle-solid';

package/dist/components/icon/custom/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/components/icon/custom/index.js

@@ -6,6 +6,7 @@ export * from './component-line.js';
 export * from './ellipse-mini-solid.js';
 export * from './info-tooltip-fill.js';
 export * from './resize.js';
+export * from './shipfox-logo.js';
 export * from './spinner.js';
 export * from './thunder.js';
 export * from './x-circle-solid.js';

package/dist/components/icon/custom/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/icon/custom/index.ts"],"sourcesContent":["export * from './badge';\nexport * from './check-circle-solid';\nexport * from './circle-dotted-line';\nexport * from './component-fill';\nexport * from './component-line';\nexport * from './ellipse-mini-solid';\nexport * from './info-tooltip-fill';\nexport * from './resize';\nexport * from './spinner';\nexport * from './thunder';\nexport * from './x-circle-solid';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,uBAAuB;AACrC,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../../src/components/icon/custom/index.ts"],"sourcesContent":["export * from './badge';\nexport * from './check-circle-solid';\nexport * from './circle-dotted-line';\nexport * from './component-fill';\nexport * from './component-line';\nexport * from './ellipse-mini-solid';\nexport * from './info-tooltip-fill';\nexport * from './resize';\nexport * from './shipfox-logo';\nexport * from './spinner';\nexport * from './thunder';\nexport * from './x-circle-solid';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,uBAAuB;AACrC,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,mBAAmB"}

package/dist/components/icon/custom/shipfox-logo.d.ts

@@ -0,0 +1,8 @@
+import type { RemixiconComponentType } from '@remixicon/react';
+import type { ComponentProps } from 'react';
+type ShipfoxLogoProps = ComponentProps<RemixiconComponentType> & {
+    color?: string;
+};
+export declare function ShipfoxLogo({ color, ...props }: ShipfoxLogoProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shipfox-logo.d.ts.map

package/dist/components/icon/custom/shipfox-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shipfox-logo.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/custom/shipfox-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAE1C,KAAK,gBAAgB,GAAG,cAAc,CAAC,sBAAsB,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAC,KAAiB,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAY1E"}

package/dist/components/icon/custom/shipfox-logo.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ShipfoxLogo({ color = '#FF4B00', ...props }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        viewBox: "0 0 88 88",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Shipfox Logo"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M17.9759 32.3751L39.0987 74.1549C41.1536 78.2196 46.847 78.2196 48.902 74.1549L70.0247 32.3751L81.2835 38.122C84.6511 39.8409 85.3794 44.4228 82.7171 47.1406L47.9008 82.684C45.7466 84.8831 42.254 84.8831 40.0999 82.684L5.28351 47.1406C2.62124 44.4227 3.34957 39.8409 6.7171 38.122L17.9759 32.3751ZM44.0003 19.0912L73.0051 4.28593C77.7786 1.84936 82.8214 7.06388 80.3737 11.9054L70.0247 32.3751L44.0003 19.0912ZM44.0003 19.0912L14.9955 4.28593C10.2221 1.84936 5.17926 7.06388 7.62699 11.9054L17.9759 32.3751L44.0003 19.0912Z",
+                fill: color
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=shipfox-logo.js.map

package/dist/components/icon/custom/shipfox-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/icon/custom/shipfox-logo.tsx"],"sourcesContent":["import type {RemixiconComponentType} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\n\ntype ShipfoxLogoProps = ComponentProps<RemixiconComponentType> & {\n  color?: string;\n};\n\nexport function ShipfoxLogo({color = '#FF4B00', ...props}: ShipfoxLogoProps) {\n  return (\n    <svg viewBox=\"0 0 88 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <title>Shipfox Logo</title>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M17.9759 32.3751L39.0987 74.1549C41.1536 78.2196 46.847 78.2196 48.902 74.1549L70.0247 32.3751L81.2835 38.122C84.6511 39.8409 85.3794 44.4228 82.7171 47.1406L47.9008 82.684C45.7466 84.8831 42.254 84.8831 40.0999 82.684L5.28351 47.1406C2.62124 44.4227 3.34957 39.8409 6.7171 38.122L17.9759 32.3751ZM44.0003 19.0912L73.0051 4.28593C77.7786 1.84936 82.8214 7.06388 80.3737 11.9054L70.0247 32.3751L44.0003 19.0912ZM44.0003 19.0912L14.9955 4.28593C10.2221 1.84936 5.17926 7.06388 7.62699 11.9054L17.9759 32.3751L44.0003 19.0912Z\"\n        fill={color}\n      />\n    </svg>\n  );\n}\n"],"names":["ShipfoxLogo","color","props","svg","viewBox","fill","xmlns","title","path","fillRule","clipRule","d"],"mappings":";AAOA,OAAO,SAASA,YAAY,EAACC,QAAQ,SAAS,EAAE,GAAGC,OAAwB;IACzE,qBACE,MAACC;QAAIC,SAAQ;QAAYC,MAAK;QAAOC,OAAM;QAA8B,GAAGJ,KAAK;;0BAC/E,KAACK;0BAAM;;0BACP,KAACC;gBACCC,UAAS;gBACTC,UAAS;gBACTC,GAAE;gBACFN,MAAMJ;;;;AAId"}

package/dist/components/icon/icon.d.ts

@@ -1,6 +1,6 @@
 import { type RemixiconComponentType, RiGoogleFill } from '@remixicon/react';
 import type { ComponentProps } from 'react';
-import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, SpinnerIcon, ThunderIcon, XCircleSolidIcon } from './custom';
+import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, ShipfoxLogo, SpinnerIcon, ThunderIcon, XCircleSolidIcon } from './custom';
 declare const iconsMap: {
     readonly google: RemixiconComponentType;
     readonly microsoft: RemixiconComponentType;
@@ -15,6 +15,9 @@ declare const iconsMap: {
     readonly spinner: typeof SpinnerIcon;
     readonly ellipseMiniSolid: typeof EllipseMiniSolidIcon;
     readonly componentLine: typeof ComponentLineIcon;
+    readonly imageAdd: RemixiconComponentType;
+    readonly close: RemixiconComponentType;
+    readonly shipfoxLogo: typeof ShipfoxLogo;
 };
 export type IconName = keyof typeof iconsMap;
 export declare const iconNames: IconName[];

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,sBAAsB,EAAE,YAAY,EAAkB,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;CAc6C,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAEhE,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAG/C"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAE3B,YAAY,EAGb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;CAiB6C,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAEhE,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAG/C"}

package/dist/components/icon/icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RiGoogleFill, RiMicrosoftFill } from '@remixicon/react';
-import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, SpinnerIcon, ThunderIcon, XCircleSolidIcon } from './custom/index.js';
+import { RiCloseLine, RiGoogleFill, RiImageAddFill, RiMicrosoftFill } from '@remixicon/react';
+import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, ShipfoxLogo, SpinnerIcon, ThunderIcon, XCircleSolidIcon } from './custom/index.js';
 const iconsMap = {
     google: RiGoogleFill,
     microsoft: RiMicrosoftFill,
@@ -14,7 +14,10 @@ const iconsMap = {
     infoTooltipFill: InfoTooltipFillIcon,
     spinner: SpinnerIcon,
     ellipseMiniSolid: EllipseMiniSolidIcon,
-    componentLine: ComponentLineIcon
+    componentLine: ComponentLineIcon,
+    imageAdd: RiImageAddFill,
+    close: RiCloseLine,
+    shipfoxLogo: ShipfoxLogo
 };
 export const iconNames = Object.keys(iconsMap);
 export function Icon({ name, ...props }) {

package/dist/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import {type RemixiconComponentType, RiGoogleFill, RiMicrosoftFill} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\nimport {\n  BadgeIcon,\n  CheckCircleSolidIcon,\n  CircleDottedLineIcon,\n  ComponentFillIcon,\n  ComponentLineIcon,\n  EllipseMiniSolidIcon,\n  InfoTooltipFillIcon,\n  ResizeIcon,\n  SpinnerIcon,\n  ThunderIcon,\n  XCircleSolidIcon,\n} from './custom';\n\nconst iconsMap = {\n  google: RiGoogleFill,\n  microsoft: RiMicrosoftFill,\n  badge: BadgeIcon,\n  checkCircleSolid: CheckCircleSolidIcon,\n  circleDottedLine: CircleDottedLineIcon,\n  componentFill: ComponentFillIcon,\n  xCircleSolid: XCircleSolidIcon,\n  thunder: ThunderIcon,\n  resize: ResizeIcon,\n  infoTooltipFill: InfoTooltipFillIcon,\n  spinner: SpinnerIcon,\n  ellipseMiniSolid: EllipseMiniSolidIcon,\n  componentLine: ComponentLineIcon,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nexport type IconName = keyof typeof iconsMap;\nexport const iconNames = Object.keys(iconsMap) as IconName[];\n\ntype BaseIconProps = ComponentProps<typeof RiGoogleFill>;\ntype IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;\n\nexport function Icon({name, ...props}: IconProps) {\n  const IconComponent = iconsMap[name];\n  return <IconComponent {...props} />;\n}\n"],"names":["RiGoogleFill","RiMicrosoftFill","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","SpinnerIcon","ThunderIcon","XCircleSolidIcon","iconsMap","google","microsoft","badge","checkCircleSolid","circleDottedLine","componentFill","xCircleSolid","thunder","resize","infoTooltipFill","spinner","ellipseMiniSolid","componentLine","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AAAA,SAAqCA,YAAY,EAAEC,eAAe,QAAO,mBAAmB;AAE5F,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAElB,MAAMC,WAAW;IACfC,QAAQd;IACRe,WAAWd;IACXe,OAAOd;IACPe,kBAAkBd;IAClBe,kBAAkBd;IAClBe,eAAed;IACfe,cAAcR;IACdS,SAASV;IACTW,QAAQb;IACRc,iBAAiBf;IACjBgB,SAASd;IACTe,kBAAkBlB;IAClBmB,eAAepB;AACjB;AAGA,OAAO,MAAMqB,YAAYC,OAAOC,IAAI,CAAChB,UAAwB;AAK7D,OAAO,SAASiB,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBpB,QAAQ,CAACkB,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}
+{"version":3,"sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import {\n  type RemixiconComponentType,\n  RiCloseLine,\n  RiGoogleFill,\n  RiImageAddFill,\n  RiMicrosoftFill,\n} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\nimport {\n  BadgeIcon,\n  CheckCircleSolidIcon,\n  CircleDottedLineIcon,\n  ComponentFillIcon,\n  ComponentLineIcon,\n  EllipseMiniSolidIcon,\n  InfoTooltipFillIcon,\n  ResizeIcon,\n  ShipfoxLogo,\n  SpinnerIcon,\n  ThunderIcon,\n  XCircleSolidIcon,\n} from './custom';\n\nconst iconsMap = {\n  google: RiGoogleFill,\n  microsoft: RiMicrosoftFill,\n  badge: BadgeIcon,\n  checkCircleSolid: CheckCircleSolidIcon,\n  circleDottedLine: CircleDottedLineIcon,\n  componentFill: ComponentFillIcon,\n  xCircleSolid: XCircleSolidIcon,\n  thunder: ThunderIcon,\n  resize: ResizeIcon,\n  infoTooltipFill: InfoTooltipFillIcon,\n  spinner: SpinnerIcon,\n  ellipseMiniSolid: EllipseMiniSolidIcon,\n  componentLine: ComponentLineIcon,\n  imageAdd: RiImageAddFill,\n  close: RiCloseLine,\n  shipfoxLogo: ShipfoxLogo,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nexport type IconName = keyof typeof iconsMap;\nexport const iconNames = Object.keys(iconsMap) as IconName[];\n\ntype BaseIconProps = ComponentProps<typeof RiGoogleFill>;\ntype IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;\n\nexport function Icon({name, ...props}: IconProps) {\n  const IconComponent = iconsMap[name];\n  return <IconComponent {...props} />;\n}\n"],"names":["RiCloseLine","RiGoogleFill","RiImageAddFill","RiMicrosoftFill","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","ShipfoxLogo","SpinnerIcon","ThunderIcon","XCircleSolidIcon","iconsMap","google","microsoft","badge","checkCircleSolid","circleDottedLine","componentFill","xCircleSolid","thunder","resize","infoTooltipFill","spinner","ellipseMiniSolid","componentLine","imageAdd","close","shipfoxLogo","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AAAA,SAEEA,WAAW,EACXC,YAAY,EACZC,cAAc,EACdC,eAAe,QACV,mBAAmB;AAE1B,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,WAAW,EACXC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAElB,MAAMC,WAAW;IACfC,QAAQhB;IACRiB,WAAWf;IACXgB,OAAOf;IACPgB,kBAAkBf;IAClBgB,kBAAkBf;IAClBgB,eAAef;IACfgB,cAAcR;IACdS,SAASV;IACTW,QAAQd;IACRe,iBAAiBhB;IACjBiB,SAASd;IACTe,kBAAkBnB;IAClBoB,eAAerB;IACfsB,UAAU5B;IACV6B,OAAO/B;IACPgC,aAAapB;AACf;AAGA,OAAO,MAAMqB,YAAYC,OAAOC,IAAI,CAACnB,UAAwB;AAK7D,OAAO,SAASoB,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBvB,QAAQ,CAACqB,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}

package/dist/components/index.d.ts

@@ -1,5 +1,8 @@
+export * from './alert';
+export * from './avatar';
 export * from './button';
 export * from './icon';
+export * from './inline-tips';
 export * from './textarea';
 export * from './theme-provider';
 export * from './typography';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}