@shipfox/react-ui 0.3.0 → 0.4.0

package/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import '../index.css';
 import type {Decorator, Preview} from '@storybook/react';
-import {ThemeProvider} from '../src/components/theme-provider';
+import {ThemeProvider} from '../src/components/theme';
 
 const withTheme: Decorator = (Story, context) => {
   return <ThemeProvider defaultTheme={context.globals.theme}>{Story()}</ThemeProvider>;

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.3.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.4.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
 > swc
 
-Successfully compiled: 61 files with swc (164.23ms)
+Successfully compiled: 103 files with swc (58.6ms)

package/.turbo/turbo-check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.3.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.4.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
 > biome-check --fix
 
-Checked 77 files in 116ms. No fixes applied.
+Checked 119 files in 309ms. No fixes applied.

package/.turbo/turbo-type.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.3.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.4.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
 > tsc-emit
 

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @shipfox/react-ui
 
+## 0.4.0
+
+### Minor Changes
+
+- 2cfbf33: Add Codeblock components
+- dd023e1: Add checkbox and label components
+- a808a32: Add toast components and refactor
+- feeb725: Add Item and DynamicItem components
+- 34000b7: Add Badge component
+- 090e011: Add tooltip component
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/components/alert/alert.d.ts

@@ -1,10 +1,10 @@
 import { type VariantProps } from 'class-variance-authority';
 import type { ComponentProps } from 'react';
 declare const alertVariants: (props?: ({
-    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "info" | "default" | "success" | "warning" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const closeIconVariants: (props?: ({
-    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "info" | "default" | "success" | "warning" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;
 declare function Alert({ className, variant, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/alert/alert.js

@@ -9,7 +9,7 @@ const alertVariants = cva('relative w-full rounded-l-4 rounded-r-8 px-16 py-12 t
             info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',
             success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',
             warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',
-            destructive: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border'
+            error: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border'
         }
     },
     defaultVariants: {
@@ -23,7 +23,7 @@ const alertLineVariants = cva('w-4 self-stretch rounded-full', {
             info: 'bg-tag-blue-icon',
             success: 'bg-tag-success-icon',
             warning: 'bg-tag-warning-icon',
-            destructive: 'bg-tag-error-icon'
+            error: 'bg-tag-error-icon'
         }
     },
     defaultVariants: {
@@ -37,7 +37,7 @@ const closeIconVariants = cva('w-16 h-16', {
             info: 'text-tag-blue-icon',
             success: 'text-tag-success-icon',
             warning: 'text-tag-warning-icon',
-            destructive: 'text-tag-error-icon'
+            error: 'text-tag-error-icon'
         }
     },
     defaultVariants: {

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nconst alertVariants = cva(\n  'relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border',\n  {\n    variants: {\n      variant: {\n        default: 'bg-tag-neutral-bg text-foreground-neutral-base border-tag-neutral-border',\n        info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',\n        success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',\n        warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',\n        destructive: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nconst alertLineVariants = cva('w-4 self-stretch rounded-full', {\n  variants: {\n    variant: {\n      default: 'bg-tag-neutral-icon',\n      info: 'bg-tag-blue-icon',\n      success: 'bg-tag-success-icon',\n      warning: 'bg-tag-warning-icon',\n      destructive: 'bg-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst closeIconVariants = cva('w-16 h-16', {\n  variants: {\n    variant: {\n      default: 'text-tag-neutral-icon',\n      info: 'text-tag-blue-icon',\n      success: 'text-tag-success-icon',\n      warning: 'text-tag-warning-icon',\n      destructive: 'text-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\ntype AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;\n\nfunction Alert({className, variant, children, ...props}: AlertProps) {\n  return (\n    <div className=\"w-full flex items-start gap-4\">\n      <div data-slot=\"alert-line\" className={cn(alertLineVariants({variant}))} aria-hidden=\"true\" />\n      <div\n        data-slot=\"alert\"\n        role=\"alert\"\n        className={cn(alertVariants({variant}), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction AlertContent({className, ...props}: ComponentProps<'div'>) {\n  return <div data-slot=\"alert-content\" className={cn('flex-1 min-w-0', className)} {...props} />;\n}\n\nfunction AlertTitle({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'text-xs leading-20 text-foreground-neutral-base [&_p]:leading-relaxed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertActions({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-actions\"\n      className={cn('flex items-center gap-8 mt-8', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({className, ...props}: ComponentProps<'button'>) {\n  return (\n    <button\n      data-slot=\"alert-action\"\n      type=\"button\"\n      className={cn(\n        'bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertClose({\n  className,\n  variant = 'default',\n  ...props\n}: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>) {\n  return (\n    <button\n      data-slot=\"alert-close\"\n      type=\"button\"\n      className={cn(\n        'absolute cursor-pointer top-12 right-12 rounded-4 p-4 bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n        className,\n      )}\n      aria-label=\"Close\"\n      {...props}\n    >\n      <Icon name=\"close\" className={cn(closeIconVariants({variant}))} />\n    </button>\n  );\n}\n\nexport {Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose};\n"],"names":["cva","Icon","cn","alertVariants","variants","variant","default","info","success","warning","destructive","defaultVariants","alertLineVariants","closeIconVariants","Alert","className","children","props","div","data-slot","aria-hidden","role","AlertContent","AlertTitle","AlertDescription","AlertActions","AlertAction","button","type","AlertClose","aria-label","name"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAO,kBAAkB;AAErC,SAAQC,EAAE,QAAO,WAAW;AAE5B,MAAMC,gBAAgBH,IACpB,8FACA;IACEI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,aAAa;QACf;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAGF,MAAMO,oBAAoBZ,IAAI,iCAAiC;IAC7DI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,aAAa;QACf;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAEA,MAAMQ,oBAAoBb,IAAI,aAAa;IACzCI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,aAAa;QACf;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAIA,SAASS,MAAM,EAACC,SAAS,EAAEV,OAAO,EAAEW,QAAQ,EAAE,GAAGC,OAAkB;IACjE,qBACE,MAACC;QAAIH,WAAU;;0BACb,KAACG;gBAAIC,aAAU;gBAAaJ,WAAWb,GAAGU,kBAAkB;oBAACP;gBAAO;gBAAKe,eAAY;;0BACrF,KAACF;gBACCC,aAAU;gBACVE,MAAK;gBACLN,WAAWb,GAAGC,cAAc;oBAACE;gBAAO,IAAIU;gBACvC,GAAGE,KAAK;0BAERD;;;;AAIT;AAEA,SAASM,aAAa,EAACP,SAAS,EAAE,GAAGE,OAA6B;IAChE,qBAAO,KAACC;QAAIC,aAAU;QAAgBJ,WAAWb,GAAG,kBAAkBa;QAAa,GAAGE,KAAK;;AAC7F;AAEA,SAASM,WAAW,EAACR,SAAS,EAAE,GAAGE,OAA6B;IAC9D,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GAAG,oEAAoEa;QACjF,GAAGE,KAAK;;AAGf;AAEA,SAASO,iBAAiB,EAACT,SAAS,EAAE,GAAGE,OAA6B;IACpE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GACT,yEACAa;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASQ,aAAa,EAACV,SAAS,EAAE,GAAGE,OAA6B;IAChE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GAAG,gCAAgCa;QAC7C,GAAGE,KAAK;;AAGf;AAEA,SAASS,YAAY,EAACX,SAAS,EAAE,GAAGE,OAAgC;IAClE,qBACE,KAACU;QACCR,aAAU;QACVS,MAAK;QACLb,WAAWb,GACT,8RACAa;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASY,WAAW,EAClBd,SAAS,EACTV,UAAU,SAAS,EACnB,GAAGY,OAC+D;IAClE,qBACE,KAACU;QACCR,aAAU;QACVS,MAAK;QACLb,WAAWb,GACT,sUACAa;QAEFe,cAAW;QACV,GAAGb,KAAK;kBAET,cAAA,KAAChB;YAAK8B,MAAK;YAAQhB,WAAWb,GAAGW,kBAAkB;gBAACR;YAAO;;;AAGjE;AAEA,SAAQS,KAAK,EAAEQ,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,WAAW,EAAEG,UAAU,GAAE"}
+{"version":3,"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nconst alertVariants = cva(\n  'relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border',\n  {\n    variants: {\n      variant: {\n        default: 'bg-tag-neutral-bg text-foreground-neutral-base border-tag-neutral-border',\n        info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',\n        success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',\n        warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',\n        error: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nconst alertLineVariants = cva('w-4 self-stretch rounded-full', {\n  variants: {\n    variant: {\n      default: 'bg-tag-neutral-icon',\n      info: 'bg-tag-blue-icon',\n      success: 'bg-tag-success-icon',\n      warning: 'bg-tag-warning-icon',\n      error: 'bg-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst closeIconVariants = cva('w-16 h-16', {\n  variants: {\n    variant: {\n      default: 'text-tag-neutral-icon',\n      info: 'text-tag-blue-icon',\n      success: 'text-tag-success-icon',\n      warning: 'text-tag-warning-icon',\n      error: 'text-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\ntype AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;\n\nfunction Alert({className, variant, children, ...props}: AlertProps) {\n  return (\n    <div className=\"w-full flex items-start gap-4\">\n      <div data-slot=\"alert-line\" className={cn(alertLineVariants({variant}))} aria-hidden=\"true\" />\n      <div\n        data-slot=\"alert\"\n        role=\"alert\"\n        className={cn(alertVariants({variant}), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction AlertContent({className, ...props}: ComponentProps<'div'>) {\n  return <div data-slot=\"alert-content\" className={cn('flex-1 min-w-0', className)} {...props} />;\n}\n\nfunction AlertTitle({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'text-xs leading-20 text-foreground-neutral-base [&_p]:leading-relaxed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertActions({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-actions\"\n      className={cn('flex items-center gap-8 mt-8', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({className, ...props}: ComponentProps<'button'>) {\n  return (\n    <button\n      data-slot=\"alert-action\"\n      type=\"button\"\n      className={cn(\n        'bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertClose({\n  className,\n  variant = 'default',\n  ...props\n}: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>) {\n  return (\n    <button\n      data-slot=\"alert-close\"\n      type=\"button\"\n      className={cn(\n        'absolute cursor-pointer top-12 right-12 rounded-4 p-4 bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n        className,\n      )}\n      aria-label=\"Close\"\n      {...props}\n    >\n      <Icon name=\"close\" className={cn(closeIconVariants({variant}))} />\n    </button>\n  );\n}\n\nexport {Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose};\n"],"names":["cva","Icon","cn","alertVariants","variants","variant","default","info","success","warning","error","defaultVariants","alertLineVariants","closeIconVariants","Alert","className","children","props","div","data-slot","aria-hidden","role","AlertContent","AlertTitle","AlertDescription","AlertActions","AlertAction","button","type","AlertClose","aria-label","name"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAO,kBAAkB;AAErC,SAAQC,EAAE,QAAO,WAAW;AAE5B,MAAMC,gBAAgBH,IACpB,8FACA;IACEI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAGF,MAAMO,oBAAoBZ,IAAI,iCAAiC;IAC7DI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAEA,MAAMQ,oBAAoBb,IAAI,aAAa;IACzCI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAIA,SAASS,MAAM,EAACC,SAAS,EAAEV,OAAO,EAAEW,QAAQ,EAAE,GAAGC,OAAkB;IACjE,qBACE,MAACC;QAAIH,WAAU;;0BACb,KAACG;gBAAIC,aAAU;gBAAaJ,WAAWb,GAAGU,kBAAkB;oBAACP;gBAAO;gBAAKe,eAAY;;0BACrF,KAACF;gBACCC,aAAU;gBACVE,MAAK;gBACLN,WAAWb,GAAGC,cAAc;oBAACE;gBAAO,IAAIU;gBACvC,GAAGE,KAAK;0BAERD;;;;AAIT;AAEA,SAASM,aAAa,EAACP,SAAS,EAAE,GAAGE,OAA6B;IAChE,qBAAO,KAACC;QAAIC,aAAU;QAAgBJ,WAAWb,GAAG,kBAAkBa;QAAa,GAAGE,KAAK;;AAC7F;AAEA,SAASM,WAAW,EAACR,SAAS,EAAE,GAAGE,OAA6B;IAC9D,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GAAG,oEAAoEa;QACjF,GAAGE,KAAK;;AAGf;AAEA,SAASO,iBAAiB,EAACT,SAAS,EAAE,GAAGE,OAA6B;IACpE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GACT,yEACAa;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASQ,aAAa,EAACV,SAAS,EAAE,GAAGE,OAA6B;IAChE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GAAG,gCAAgCa;QAC7C,GAAGE,KAAK;;AAGf;AAEA,SAASS,YAAY,EAACX,SAAS,EAAE,GAAGE,OAAgC;IAClE,qBACE,KAACU;QACCR,aAAU;QACVS,MAAK;QACLb,WAAWb,GACT,8RACAa;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASY,WAAW,EAClBd,SAAS,EACTV,UAAU,SAAS,EACnB,GAAGY,OAC+D;IAClE,qBACE,KAACU;QACCR,aAAU;QACVS,MAAK;QACLb,WAAWb,GACT,sUACAa;QAEFe,cAAW;QACV,GAAGb,KAAK;kBAET,cAAA,KAAChB;YAAK8B,MAAK;YAAQhB,WAAWb,GAAGW,kBAAkB;gBAACR;YAAO;;;AAGjE;AAEA,SAAQS,KAAK,EAAEQ,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,WAAW,EAAEG,UAAU,GAAE"}

package/dist/components/alert/alert.stories.js

@@ -15,7 +15,7 @@ const meta = {
                 'info',
                 'success',
                 'warning',
-                'destructive'
+                'error'
             ]
         }
     },
@@ -29,7 +29,7 @@ const variants = [
     'info',
     'success',
     'warning',
-    'destructive'
+    'error'
 ];
 export const Default = {
     render: (args)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/alert/alert.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Header} from 'components/typography';\nimport {\n  Alert,\n  AlertAction,\n  AlertActions,\n  AlertClose,\n  AlertContent,\n  AlertDescription,\n  AlertTitle,\n} from './alert';\n\nconst meta = {\n  title: 'Components/Alert',\n  component: Alert,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['default', 'info', 'success', 'warning', 'destructive'],\n    },\n  },\n  args: {\n    variant: 'default',\n  },\n} satisfies Meta<typeof Alert>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst variants = ['default', 'info', 'success', 'warning', 'destructive'] as const;\n\nexport const Default: Story = {\n  render: (args) => {\n    return (\n      <Alert {...args}>\n        <AlertContent>\n          <AlertTitle>Title</AlertTitle>\n          <AlertDescription>Description</AlertDescription>\n          <AlertActions>\n            <AlertAction>Download</AlertAction>\n            <AlertAction>View</AlertAction>\n          </AlertActions>\n        </AlertContent>\n        <AlertClose variant={args.variant} />\n      </Alert>\n    );\n  },\n};\n\nexport const DesignMock: Story = {\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n        <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n          ALERTS\n        </Header>\n        <div className=\"flex flex-col gap-16\">\n          {variants.map((variant) => (\n            <Alert key={variant} variant={variant}>\n              <AlertContent>\n                <AlertTitle>Title</AlertTitle>\n                <AlertDescription>Description</AlertDescription>\n                <AlertActions>\n                  <AlertAction>Download</AlertAction>\n                  <AlertAction>View</AlertAction>\n                </AlertActions>\n              </AlertContent>\n              <AlertClose variant={variant} />\n            </Alert>\n          ))}\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["Header","Alert","AlertAction","AlertActions","AlertClose","AlertContent","AlertDescription","AlertTitle","meta","title","component","tags","argTypes","variant","control","options","args","variants","Default","render","DesignMock","div","className","map"],"mappings":";AACA,SAAQA,MAAM,QAAO,wBAAwB;AAC7C,SACEC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,UAAU,QACL,UAAU;AAEjB,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWT;IACXU,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAS;gBAAC;gBAAW;gBAAQ;gBAAW;gBAAW;aAAc;QACnE;IACF;IACAC,MAAM;QACJH,SAAS;IACX;AACF;AAEA,eAAeL,KAAK;AAIpB,MAAMS,WAAW;IAAC;IAAW;IAAQ;IAAW;IAAW;CAAc;AAEzE,OAAO,MAAMC,UAAiB;IAC5BC,QAAQ,CAACH;QACP,qBACE,MAACf;YAAO,GAAGe,IAAI;;8BACb,MAACX;;sCACC,KAACE;sCAAW;;sCACZ,KAACD;sCAAiB;;sCAClB,MAACH;;8CACC,KAACD;8CAAY;;8CACb,KAACA;8CAAY;;;;;;8BAGjB,KAACE;oBAAWS,SAASG,KAAKH,OAAO;;;;IAGvC;AACF,EAAE;AAEF,OAAO,MAAMO,aAAoB;IAC/BD,QAAQ;QACN,qBACE,MAACE;YAAIC,WAAU;;8BACb,KAACtB;oBAAOa,SAAQ;oBAAKS,WAAU;8BAAiC;;8BAGhE,KAACD;oBAAIC,WAAU;8BACZL,SAASM,GAAG,CAAC,CAACV,wBACb,MAACZ;4BAAoBY,SAASA;;8CAC5B,MAACR;;sDACC,KAACE;sDAAW;;sDACZ,KAACD;sDAAiB;;sDAClB,MAACH;;8DACC,KAACD;8DAAY;;8DACb,KAACA;8DAAY;;;;;;8CAGjB,KAACE;oCAAWS,SAASA;;;2BATXA;;;;IAetB;AACF,EAAE"}
+{"version":3,"sources":["../../../src/components/alert/alert.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Header} from 'components/typography';\nimport {\n  Alert,\n  AlertAction,\n  AlertActions,\n  AlertClose,\n  AlertContent,\n  AlertDescription,\n  AlertTitle,\n} from './alert';\n\nconst meta = {\n  title: 'Components/Alert',\n  component: Alert,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['default', 'info', 'success', 'warning', 'error'],\n    },\n  },\n  args: {\n    variant: 'default',\n  },\n} satisfies Meta<typeof Alert>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst variants = ['default', 'info', 'success', 'warning', 'error'] as const;\n\nexport const Default: Story = {\n  render: (args) => {\n    return (\n      <Alert {...args}>\n        <AlertContent>\n          <AlertTitle>Title</AlertTitle>\n          <AlertDescription>Description</AlertDescription>\n          <AlertActions>\n            <AlertAction>Download</AlertAction>\n            <AlertAction>View</AlertAction>\n          </AlertActions>\n        </AlertContent>\n        <AlertClose variant={args.variant} />\n      </Alert>\n    );\n  },\n};\n\nexport const DesignMock: Story = {\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n        <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n          ALERTS\n        </Header>\n        <div className=\"flex flex-col gap-16\">\n          {variants.map((variant) => (\n            <Alert key={variant} variant={variant}>\n              <AlertContent>\n                <AlertTitle>Title</AlertTitle>\n                <AlertDescription>Description</AlertDescription>\n                <AlertActions>\n                  <AlertAction>Download</AlertAction>\n                  <AlertAction>View</AlertAction>\n                </AlertActions>\n              </AlertContent>\n              <AlertClose variant={variant} />\n            </Alert>\n          ))}\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["Header","Alert","AlertAction","AlertActions","AlertClose","AlertContent","AlertDescription","AlertTitle","meta","title","component","tags","argTypes","variant","control","options","args","variants","Default","render","DesignMock","div","className","map"],"mappings":";AACA,SAAQA,MAAM,QAAO,wBAAwB;AAC7C,SACEC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,UAAU,QACL,UAAU;AAEjB,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWT;IACXU,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAS;gBAAC;gBAAW;gBAAQ;gBAAW;gBAAW;aAAQ;QAC7D;IACF;IACAC,MAAM;QACJH,SAAS;IACX;AACF;AAEA,eAAeL,KAAK;AAIpB,MAAMS,WAAW;IAAC;IAAW;IAAQ;IAAW;IAAW;CAAQ;AAEnE,OAAO,MAAMC,UAAiB;IAC5BC,QAAQ,CAACH;QACP,qBACE,MAACf;YAAO,GAAGe,IAAI;;8BACb,MAACX;;sCACC,KAACE;sCAAW;;sCACZ,KAACD;sCAAiB;;sCAClB,MAACH;;8CACC,KAACD;8CAAY;;8CACb,KAACA;8CAAY;;;;;;8BAGjB,KAACE;oBAAWS,SAASG,KAAKH,OAAO;;;;IAGvC;AACF,EAAE;AAEF,OAAO,MAAMO,aAAoB;IAC/BD,QAAQ;QACN,qBACE,MAACE;YAAIC,WAAU;;8BACb,KAACtB;oBAAOa,SAAQ;oBAAKS,WAAU;8BAAiC;;8BAGhE,KAACD;oBAAIC,WAAU;8BACZL,SAASM,GAAG,CAAC,CAACV,wBACb,MAACZ;4BAAoBY,SAASA;;8CAC5B,MAACR;;sDACC,KAACE;sDAAW;;sDACZ,KAACD;sDAAiB;;sDAClB,MAACH;;8DACC,KAACD;8DAAY;;8DACb,KAACA;8DAAY;;;;;;8CAGjB,KAACE;oCAAWS,SAASA;;;2BATXA;;;;IAetB;AACF,EAAE"}

package/dist/components/avatar/avatar-group.js

@@ -10,8 +10,8 @@ const avatarGroupVariants = cva('flex items-start', {
             '3xs': '-space-x-4',
             '2xs': '-space-x-4',
             xs: '-space-x-4',
-            sm: '-space-x-4',
-            md: '-space-x-4',
+            sm: '-space-x-6',
+            md: '-space-x-6',
             lg: '-space-x-6',
             xl: '-space-x-6',
             '2xl': '-space-x-12',
@@ -47,7 +47,7 @@ function AvatarContainer({ children, zIndex, tooltipContent, tooltipProps, anima
                 asChild: true,
                 children: /*#__PURE__*/ _jsx("div", {
                     "data-slot": "avatar-container",
-                    className: cn('relative', animateOnHover && 'transition-transform duration-300 ease-out hover:-translate-y-2'),
+                    className: cn('relative', animateOnHover && 'transition-transform duration-300 ease-in-out hover:-translate-y-4'),
                     style: {
                         zIndex
                     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {\n  Children,\n  type ComponentProps,\n  cloneElement,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport {cn} from 'utils/cn';\nimport {TooltipContent, TooltipProvider, TooltipTrigger} from '../tooltip/tooltip';\n\nconst avatarGroupVariants = cva('flex items-start', {\n  variants: {\n    size: {\n      '3xs': '-space-x-4',\n      '2xs': '-space-x-4',\n      xs: '-space-x-4',\n      sm: '-space-x-4',\n      md: '-space-x-4',\n      lg: '-space-x-6',\n      xl: '-space-x-6',\n      '2xl': '-space-x-12',\n      '3xl': '-space-x-12',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst avatarGroupOverflowVariants = cva(\n  'flex shrink-0 items-center justify-center rounded-full bg-background-components-base text-foreground-neutral-subtle font-medium ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',\n  {\n    variants: {\n      size: {\n        '3xs': 'size-[18px] text-[10px] leading-[10px]',\n        '2xs': 'size-[20px] text-[11px] leading-[11px]',\n        xs: 'size-[24px] text-xs leading-4',\n        sm: 'size-[28px] text-xs leading-5',\n        md: 'size-[32px] text-sm leading-5',\n        lg: 'size-[36px] text-sm leading-5',\n        xl: 'size-[40px] text-base leading-6',\n        '2xl': 'size-[80px] text-2xl leading-8',\n        '3xl': 'size-[120px] text-4xl leading-[56px]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\ntype TooltipContentProps = ComponentProps<typeof TooltipContent>;\n\ntype AvatarContainerProps = {\n  children: ReactNode;\n  zIndex: number;\n  tooltipContent?: ReactNode;\n  tooltipProps?: Partial<TooltipContentProps>;\n  animateOnHover?: boolean;\n};\n\nfunction AvatarContainer({\n  children,\n  zIndex,\n  tooltipContent,\n  tooltipProps,\n  animateOnHover = false,\n}: AvatarContainerProps) {\n  return (\n    <TooltipPrimitive.Root>\n      <TooltipTrigger asChild>\n        <div\n          data-slot=\"avatar-container\"\n          className={cn(\n            'relative',\n            animateOnHover && 'transition-transform duration-300 ease-out hover:-translate-y-2',\n          )}\n          style={{zIndex}}\n        >\n          {children}\n        </div>\n      </TooltipTrigger>\n      {tooltipContent && (\n        <AvatarGroupTooltip {...tooltipProps}>{tooltipContent}</AvatarGroupTooltip>\n      )}\n    </TooltipPrimitive.Root>\n  );\n}\n\nfunction getTooltipContent(children: ReactNode): ReactNode | null {\n  const tooltip = Children.toArray(children).find(\n    (child) =>\n      typeof child === 'object' &&\n      child !== null &&\n      'type' in child &&\n      child.type === AvatarGroupTooltip,\n  ) as ReactElement<ComponentProps<typeof AvatarGroupTooltip>> | undefined;\n\n  return tooltip?.props.children || null;\n}\n\ntype AvatarGroupTooltipProps = TooltipContentProps;\n\nfunction AvatarGroupTooltip(props: AvatarGroupTooltipProps) {\n  return <TooltipContent {...props} />;\n}\n\ntype AvatarGroupProps = ComponentProps<'div'> &\n  VariantProps<typeof avatarGroupVariants> & {\n    children: ReactElement[];\n    maxVisible?: number;\n    animateOnHover?: boolean;\n    tooltipProps?: Partial<TooltipContentProps>;\n  };\n\nexport function AvatarGroup({\n  className,\n  size = 'md',\n  children,\n  maxVisible,\n  animateOnHover = false,\n  tooltipProps = {side: 'top', sideOffset: 8},\n  ...props\n}: AvatarGroupProps) {\n  const normalizedSize = size ?? 'md';\n\n  const childrenArray = Children.toArray(children) as ReactElement[];\n\n  const {visibleCount, visibleAvatars, overflowCount} = useMemo(() => {\n    const count =\n      maxVisible !== undefined ? Math.min(maxVisible, childrenArray.length) : childrenArray.length;\n    return {\n      visibleCount: count,\n      visibleAvatars: childrenArray.slice(0, count),\n      overflowCount: childrenArray.length - count,\n    };\n  }, [childrenArray, maxVisible]);\n\n  return (\n    <TooltipProvider delayDuration={0}>\n      <div\n        className={cn(avatarGroupVariants({size: normalizedSize}), className)}\n        data-slot=\"avatar-group\"\n        {...props}\n      >\n        {visibleAvatars.map((child, index) => {\n          const zIndex = index + 1;\n          const childProps = 'props' in child ? (child.props as {children?: ReactNode}) : {};\n          const tooltipContent = getTooltipContent(childProps.children);\n\n          return (\n            <AvatarContainer\n              key={child.key || index}\n              zIndex={zIndex}\n              tooltipContent={tooltipContent}\n              tooltipProps={tooltipProps}\n              animateOnHover={animateOnHover}\n            >\n              {cloneElement(child, {\n                ...childProps,\n                children: tooltipContent ? undefined : childProps.children,\n              } as Partial<typeof childProps>)}\n            </AvatarContainer>\n          );\n        })}\n        {overflowCount > 0 && (\n          <div\n            className={cn(\n              'relative',\n              avatarGroupOverflowVariants({size: normalizedSize}),\n              'rounded-full',\n            )}\n            style={{zIndex: visibleCount + 1}}\n          >\n            +{overflowCount}\n          </div>\n        )}\n      </div>\n    </TooltipProvider>\n  );\n}\n\nexport {AvatarGroupTooltip, type AvatarGroupTooltipProps};\n"],"names":["TooltipPrimitive","cva","Children","cloneElement","useMemo","cn","TooltipContent","TooltipProvider","TooltipTrigger","avatarGroupVariants","variants","size","xs","sm","md","lg","xl","defaultVariants","avatarGroupOverflowVariants","AvatarContainer","children","zIndex","tooltipContent","tooltipProps","animateOnHover","Root","asChild","div","data-slot","className","style","AvatarGroupTooltip","getTooltipContent","tooltip","toArray","find","child","type","props","AvatarGroup","maxVisible","side","sideOffset","normalizedSize","childrenArray","visibleCount","visibleAvatars","overflowCount","count","undefined","Math","min","length","slice","delayDuration","map","index","childProps","key"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {\n  Children,\n  type ComponentProps,\n  cloneElement,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport {cn} from 'utils/cn';\nimport {TooltipContent, TooltipProvider, TooltipTrigger} from '../tooltip/tooltip';\n\nconst avatarGroupVariants = cva('flex items-start', {\n  variants: {\n    size: {\n      '3xs': '-space-x-4',\n      '2xs': '-space-x-4',\n      xs: '-space-x-4',\n      sm: '-space-x-6',\n      md: '-space-x-6',\n      lg: '-space-x-6',\n      xl: '-space-x-6',\n      '2xl': '-space-x-12',\n      '3xl': '-space-x-12',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst avatarGroupOverflowVariants = cva(\n  'flex shrink-0 items-center justify-center rounded-full bg-background-components-base text-foreground-neutral-subtle font-medium ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',\n  {\n    variants: {\n      size: {\n        '3xs': 'size-[18px] text-[10px] leading-[10px]',\n        '2xs': 'size-[20px] text-[11px] leading-[11px]',\n        xs: 'size-[24px] text-xs leading-4',\n        sm: 'size-[28px] text-xs leading-5',\n        md: 'size-[32px] text-sm leading-5',\n        lg: 'size-[36px] text-sm leading-5',\n        xl: 'size-[40px] text-base leading-6',\n        '2xl': 'size-[80px] text-2xl leading-8',\n        '3xl': 'size-[120px] text-4xl leading-[56px]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\ntype TooltipContentProps = ComponentProps<typeof TooltipContent>;\n\ntype AvatarContainerProps = {\n  children: ReactNode;\n  zIndex: number;\n  tooltipContent?: ReactNode;\n  tooltipProps?: Partial<TooltipContentProps>;\n  animateOnHover?: boolean;\n};\n\nfunction AvatarContainer({\n  children,\n  zIndex,\n  tooltipContent,\n  tooltipProps,\n  animateOnHover = false,\n}: AvatarContainerProps) {\n  return (\n    <TooltipPrimitive.Root>\n      <TooltipTrigger asChild>\n        <div\n          data-slot=\"avatar-container\"\n          className={cn(\n            'relative',\n            animateOnHover && 'transition-transform duration-300 ease-in-out hover:-translate-y-4',\n          )}\n          style={{zIndex}}\n        >\n          {children}\n        </div>\n      </TooltipTrigger>\n      {tooltipContent && (\n        <AvatarGroupTooltip {...tooltipProps}>{tooltipContent}</AvatarGroupTooltip>\n      )}\n    </TooltipPrimitive.Root>\n  );\n}\n\nfunction getTooltipContent(children: ReactNode): ReactNode | null {\n  const tooltip = Children.toArray(children).find(\n    (child) =>\n      typeof child === 'object' &&\n      child !== null &&\n      'type' in child &&\n      child.type === AvatarGroupTooltip,\n  ) as ReactElement<ComponentProps<typeof AvatarGroupTooltip>> | undefined;\n\n  return tooltip?.props.children || null;\n}\n\ntype AvatarGroupTooltipProps = TooltipContentProps;\n\nfunction AvatarGroupTooltip(props: AvatarGroupTooltipProps) {\n  return <TooltipContent {...props} />;\n}\n\ntype AvatarGroupProps = ComponentProps<'div'> &\n  VariantProps<typeof avatarGroupVariants> & {\n    children: ReactElement[];\n    maxVisible?: number;\n    animateOnHover?: boolean;\n    tooltipProps?: Partial<TooltipContentProps>;\n  };\n\nexport function AvatarGroup({\n  className,\n  size = 'md',\n  children,\n  maxVisible,\n  animateOnHover = false,\n  tooltipProps = {side: 'top', sideOffset: 8},\n  ...props\n}: AvatarGroupProps) {\n  const normalizedSize = size ?? 'md';\n\n  const childrenArray = Children.toArray(children) as ReactElement[];\n\n  const {visibleCount, visibleAvatars, overflowCount} = useMemo(() => {\n    const count =\n      maxVisible !== undefined ? Math.min(maxVisible, childrenArray.length) : childrenArray.length;\n    return {\n      visibleCount: count,\n      visibleAvatars: childrenArray.slice(0, count),\n      overflowCount: childrenArray.length - count,\n    };\n  }, [childrenArray, maxVisible]);\n\n  return (\n    <TooltipProvider delayDuration={0}>\n      <div\n        className={cn(avatarGroupVariants({size: normalizedSize}), className)}\n        data-slot=\"avatar-group\"\n        {...props}\n      >\n        {visibleAvatars.map((child, index) => {\n          const zIndex = index + 1;\n          const childProps = 'props' in child ? (child.props as {children?: ReactNode}) : {};\n          const tooltipContent = getTooltipContent(childProps.children);\n\n          return (\n            <AvatarContainer\n              key={child.key || index}\n              zIndex={zIndex}\n              tooltipContent={tooltipContent}\n              tooltipProps={tooltipProps}\n              animateOnHover={animateOnHover}\n            >\n              {cloneElement(child, {\n                ...childProps,\n                children: tooltipContent ? undefined : childProps.children,\n              } as Partial<typeof childProps>)}\n            </AvatarContainer>\n          );\n        })}\n        {overflowCount > 0 && (\n          <div\n            className={cn(\n              'relative',\n              avatarGroupOverflowVariants({size: normalizedSize}),\n              'rounded-full',\n            )}\n            style={{zIndex: visibleCount + 1}}\n          >\n            +{overflowCount}\n          </div>\n        )}\n      </div>\n    </TooltipProvider>\n  );\n}\n\nexport {AvatarGroupTooltip, type AvatarGroupTooltipProps};\n"],"names":["TooltipPrimitive","cva","Children","cloneElement","useMemo","cn","TooltipContent","TooltipProvider","TooltipTrigger","avatarGroupVariants","variants","size","xs","sm","md","lg","xl","defaultVariants","avatarGroupOverflowVariants","AvatarContainer","children","zIndex","tooltipContent","tooltipProps","animateOnHover","Root","asChild","div","data-slot","className","style","AvatarGroupTooltip","getTooltipContent","tooltip","toArray","find","child","type","props","AvatarGroup","maxVisible","side","sideOffset","normalizedSize","childrenArray","visibleCount","visibleAvatars","overflowCount","count","undefined","Math","min","length","slice","delayDuration","map","index","childProps","key"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { type VariantProps } from 'class-variance-authority';
 import type { ComponentProps } from 'react';
+import { type IconName } from '../icon/icon';
 export declare const avatarVariants: (props?: ({
     radius?: "full" | "rounded" | null | undefined;
     size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
@@ -15,7 +16,9 @@ export type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & VariantP
     alt?: string;
     fallback?: string;
     animateOnHover?: boolean;
+    logoName?: IconName;
+    logoClassName?: string;
 };
-export declare function Avatar({ className, radius, size, content, src, alt, fallback, animateOnHover, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ className, radius, size, content, src, alt, fallback, animateOnHover, logoName, logoClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 export { AvatarRoot, AvatarImage, AvatarFallback };
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAY,MAAM,OAAO,CAAC;AAKrD,eAAO,MAAM,cAAc;;;8EAyB1B,CAAC;AAqBF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAiBxF,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAM,EACN,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQnF;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQvF;AAED,iBAAS,cAAc,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAQ7F;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GACnE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,MAAM,EACN,IAAW,EACX,OAAmB,EACnB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,WAAW,2CAwFb;AAED,OAAO,EAAC,UAAU,EAAE,WAAW,EAAE,cAAc,EAAC,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAY,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,cAAc;;;8EAyB1B,CAAC;AAqBF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAiBxF,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAM,EACN,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQnF;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQvF;AAED,iBAAS,cAAc,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAQ7F;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GACnE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,MAAM,EACN,IAAW,EACX,OAAmB,EACnB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,cAAsB,EACtB,QAAoB,EACpB,aAAa,EACb,GAAG,KAAK,EACT,EAAE,WAAW,2CAwFb;AAED,OAAO,EAAC,UAAU,EAAE,WAAW,EAAE,cAAc,EAAC,CAAC"}

package/dist/components/avatar/avatar.js

@@ -80,7 +80,7 @@ function AvatarFallback({ className, ...props }) {
         ...props
     });
 }
-export function Avatar({ className, radius, size = 'md', content = 'letters', src, alt, fallback, animateOnHover = false, ...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') {
@@ -109,21 +109,20 @@ export function Avatar({ className, radius, size = 'md', content = 'letters', sr
         }
         if (content === 'logo') {
             return /*#__PURE__*/ _jsx(AvatarFallback, {
-                className: cn(innerClassName, 'p-[15%]'),
+                className: cn(innerClassName, logoClassName ?? 'p-[15%]'),
                 children: /*#__PURE__*/ _jsx(Icon, {
-                    name: "shipfoxLogo",
-                    color: "#FF4B00",
-                    className: "h-full w-full p-2"
+                    name: logoName,
+                    className: "h-full w-full"
                 })
             });
         }
         if (content === 'logoPlaceholder') {
             return /*#__PURE__*/ _jsx(AvatarFallback, {
-                className: cn(innerClassName, 'p-[15%]'),
+                className: cn(innerClassName, logoClassName ?? 'p-[15%]'),
                 children: /*#__PURE__*/ _jsx(Icon, {
-                    name: "shipfoxLogo",
+                    name: logoName,
                     color: "var(--foreground-neutral-subtle, #a1a1aa)",
-                    className: "h-full w-full p-2 opacity-50"
+                    className: "h-full w-full opacity-50"
                 })
             });
         }

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

@@ -1 +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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"}
+{"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

@@ -24,6 +24,12 @@ const sizeOptions = [
     '2xl',
     '3xl'
 ];
+const logoNameOptions = [
+    'shipfox',
+    'slack',
+    'stripe',
+    'github'
+];
 const meta = {
     title: 'Components/Avatar',
     component: Avatar,
@@ -51,20 +57,26 @@ const meta = {
         },
         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'
+        fallback: 'John Doe',
+        logoName: 'shipfox'
     }
 };
 export default meta;
 export const Default = {
     args: {
-        content: 'upload',
-        fallback: 'Kyle Nguyen'
+        content: 'logo',
+        fallback: 'Shipfox'
     },
     render: (args)=>/*#__PURE__*/ _jsx("div", {
             className: "flex flex-wrap items-end gap-16",

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

@@ -1 +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":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAO,WAAW;AAChC,SAAQC,WAAW,EAAEC,kBAAkB,QAAO,iBAAiB;AAE/D,MAAMC,iBAAiB;IAAC;IAAW;IAAQ;IAAmB;IAAS;CAAS;AAChF,MAAMC,gBAAgB;IAAC;IAAQ;CAAU;AACzC,MAAMC,cAAc;IAAC;IAAO;IAAO;IAAM;IAAM;IAAM;IAAM;IAAM;IAAO;CAAM;AAE9E,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWR;IACXS,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAASV;QACX;QACAW,QAAQ;YACNF,SAAS;YACTC,SAAST;QACX;QACAW,MAAM;YACJH,SAAS;YACTC,SAASR;QACX;QACAW,UAAU;YACRJ,SAAS;QACX;QACAK,KAAK;YACHL,SAAS;QACX;QACAM,KAAK;YACHN,SAAS;QACX;IACF;IACAO,MAAM;QACJR,SAAS;QACTG,QAAQ;QACRC,MAAM;QACNC,UAAU;IACZ;AACF;AAEA,eAAeV,KAAK;AAGpB,OAAO,MAAMc,UAAiB;IAC5BD,MAAM;QACJR,SAAS;QACTK,UAAU;IACZ;IAEAK,QAAQ,CAACF,qBACP,KAACG;YAAIC,WAAU;sBACZlB,YAAYmB,GAAG,CAAC,CAACT,qBAChB,MAACO;oBAAeC,WAAU;;sCACxB,KAACvB;4BAAQ,GAAGmB,IAAI;4BAAEJ,MAAMA;;sCACxB,KAAChB;4BAAK0B,SAAQ;4BAAQF,WAAU;sCAC7BR;;;mBAHKA;;AASlB,EAAE;AAEF,sBAAsB;AACtB,MAAMW,kBAAkB;IACtBnB,OAAO;IACPC,WAAWP;IACXQ,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRK,MAAM;YACJH,SAAS;YACTC,SAASR;QACX;QACAsB,YAAY;YACVf,SAAS;QACX;IACF;IACAO,MAAM;QACJJ,MAAM;QACNa,UAAU,EAAE;IACd;AACF;AAEA,OAAO,MAAMC,qBAAuD;IAClEV,MAAM;QACJS,UAAU,EAAE;IACd;IACAP,QAAQ;QACN,MAAMS,UAAU;YACd;gBAACC,MAAM;gBAAYpB,SAAS;YAAO;YACnC;gBAACoB,MAAM;gBAAcpB,SAAS;YAAO;YACrC;gBAACoB,MAAM;gBAAepB,SAAS;YAAO;YACtC;gBAACoB,MAAM;gBAAepB,SAAS;YAAO;SACvC;QAED,qBACE,KAACW;YAAIC,WAAU;sBACb,cAAA,MAACD;gBAAIC,WAAU;;kCACb,KAACxB;wBAAK0B,SAAQ;wBAAQF,WAAU;kCAA+B;;kCAG/D,KAACtB;wBAAYc,MAAK;kCACfe,QAAQN,GAAG,CAAC,CAACQ,uBACZ,KAAChC;gCAAyBW,SAASqB,OAAOrB,OAAO;gCAAEK,UAAUgB,OAAOD,IAAI;+BAA3DC,OAAOD,IAAI;;;;;IAMpC;AACF,EAAE;AAEF,OAAO,MAAME,0BAA4D;IACvEd,MAAM;QACJS,UAAU,EAAE;IACd;IACAP,QAAQ;QACN,MAAMS,UAAU;YACd;gBAACC,MAAM;gBAAYpB,SAAS;YAAO;YACnC;gBAACoB,MAAM;gBAAcpB,SAAS;YAAO;YACrC;gBAACoB,MAAM;gBAAepB,SAAS;YAAO;YACtC;gBAACoB,MAAM;gBAAepB,SAAS;YAAO;YACtC;gBAACoB,MAAM;gBAAepB,SAAS;YAAO;YACtC;gBAACoB,MAAM;gBAAcpB,SAAS;YAAO;SACtC;QAED,qBACE,MAACW;YAAIC,WAAU;;8BACb,MAACD;oBAAIC,WAAU;;sCACb,KAACxB;4BAAK0B,SAAQ;4BAAQF,WAAU;sCAA+B;;sCAG/D,KAACtB;4BAAYc,MAAK;sCACfe,QAAQN,GAAG,CAAC,CAACQ,uBACZ,KAAChC;oCAAyBW,SAASqB,OAAOrB,OAAO;oCAAEK,UAAUgB,OAAOD,IAAI;8CACtE,cAAA,KAAC7B;kDAAoB8B,OAAOD,IAAI;;mCADrBC,OAAOD,IAAI;;;;8BAM9B,MAACT;oBAAIC,WAAU;;sCACb,KAACxB;4BAAK0B,SAAQ;4BAAQF,WAAU;sCAA+B;;sCAG/D,KAACtB;4BAAYc,MAAK;4BAAKY,YAAY;sCAChCG,QAAQN,GAAG,CAAC,CAACQ,uBACZ,KAAChC;oCAAyBW,SAASqB,OAAOrB,OAAO;oCAAEK,UAAUgB,OAAOD,IAAI;8CACtE,cAAA,KAAC7B;kDAAoB8B,OAAOD,IAAI;;mCADrBC,OAAOD,IAAI;;;;8BAM9B,MAACT;oBAAIC,WAAU;;sCACb,KAACxB;4BAAK0B,SAAQ;4BAAQF,WAAU;sCAA+B;;sCAG/D,KAACtB;4BAAYc,MAAK;4BAAKY,YAAY;4BAAGO,cAAc;sCACjDJ,QAAQN,GAAG,CAAC,CAACQ,uBACZ,KAAChC;oCAAyBW,SAASqB,OAAOrB,OAAO;oCAAEK,UAAUgB,OAAOD,IAAI;8CACtE,cAAA,KAAC7B;kDAAoB8B,OAAOD,IAAI;;mCADrBC,OAAOD,IAAI;;;;;;IAQpC;AACF,EAAE"}
+{"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/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