@yuno-payments/dashboard-design-system 0.0.2 → 0.0.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.2",
+  "version": "0.0.4-beta.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,8 +18,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.12"
   },
@@ -32,10 +32,10 @@
     "@storybook/addon-vitest": "^9.1.3",
     "@storybook/react-vite": "^9.1.3",
     "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^13.4.0",
     "@types/node": "^24.3.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/atoms/button"
 
 function App() {
   return (

package/src/components/atoms/avatar/avatar.stories.tsx

@@ -0,0 +1,423 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { User, Settings, Star } from 'lucide-react'
+import { Avatar } from './index'
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Atoms/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'Image source URL for the avatar',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alternative text for the avatar image',
+    },
+    name: {
+      control: 'text',
+      description: 'Name to generate initials from when image is not available',
+    },
+    fallback: {
+      control: 'text',
+      description: 'Custom fallback content when image and name are not available',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant of the avatar',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithImage: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
+    alt: 'John Doe',
+    size: 'md',
+  },
+}
+
+export const WithInitials: Story = {
+  args: {
+    name: 'John Doe',
+    size: 'md',
+  },
+}
+
+export const WithSingleInitial: Story = {
+  args: {
+    name: 'John',
+    size: 'md',
+  },
+}
+
+export const WithCustomFallback: Story = {
+  args: {
+    fallback: 'AB',
+    size: 'md',
+  },
+}
+
+export const WithIconFallback: Story = {
+  args: {
+    fallback: <Settings className="size-1/2" />,
+    size: 'md',
+  },
+}
+
+export const DefaultFallback: Story = {
+  args: {
+    size: 'md',
+  },
+}
+
+export const ImageWithFallback: Story = {
+  args: {
+    src: 'invalid-image-url',
+    name: 'John Doe',
+    size: 'md',
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <Avatar size="sm" name="John Doe" />
+        <span className="text-xs text-muted-foreground">Small (24px)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Avatar size="md" name="John Doe" />
+        <span className="text-xs text-muted-foreground">Medium (32px)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Avatar size="lg" name="John Doe" />
+        <span className="text-xs text-muted-foreground">Large (40px)</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar component in different sizes: small (24px), medium (32px), and large (40px).',
+      },
+    },
+  },
+}
+
+export const WithImages: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar 
+        size="sm" 
+        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
+        alt="John Doe"
+      />
+      <Avatar 
+        size="md" 
+        src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face"
+        alt="Jane Smith"
+      />
+      <Avatar 
+        size="lg" 
+        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
+        alt="Mike Johnson"
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar components with different images in various sizes.',
+      },
+    },
+  },
+}
+
+export const WithInitialsVariations: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <Avatar name="John Doe" />
+        <span className="text-xs text-muted-foreground">John Doe</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Avatar name="Alice Wonderland" />
+        <span className="text-xs text-muted-foreground">Alice Wonderland</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Avatar name="Bob" />
+        <span className="text-xs text-muted-foreground">Bob</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Avatar name="María José García" />
+        <span className="text-xs text-muted-foreground">María José García</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar components showing how initials are generated from different name formats.',
+      },
+    },
+  },
+}
+
+export const FallbackTypes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <Avatar name="John Doe" />
+        <span className="text-xs text-muted-foreground">Name Initials</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Avatar fallback="AB" />
+        <span className="text-xs text-muted-foreground">Custom Text</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Avatar fallback={<Star className="size-1/2" />} />
+        <span className="text-xs text-muted-foreground">Custom Icon</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Avatar />
+        <span className="text-xs text-muted-foreground">Default Icon</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different fallback types when image is not available: name initials, custom text, custom icon, and default icon.',
+      },
+    },
+  },
+}
+
+export const InteractiveExample: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Image Loading with Fallback</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-4">
+            <Avatar 
+              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
+              name="John Doe"
+              alt="Valid image"
+            />
+            <span className="text-sm text-muted-foreground">Valid image URL</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Avatar 
+              src="invalid-image-url"
+              name="John Doe"
+              alt="Invalid image"
+            />
+            <span className="text-sm text-muted-foreground">Invalid image URL (falls back to initials)</span>
+          </div>
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Name Processing Examples</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-4">
+            <Avatar name="John Doe" />
+            <span className="text-sm text-muted-foreground">"John Doe" → JD</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Avatar name="  Alice   Wonderland  " />
+            <span className="text-sm text-muted-foreground">"  Alice   Wonderland  " → AW (handles extra spaces)</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Avatar name="J0hn D03!" />
+            <span className="text-sm text-muted-foreground">"J0hn D03!" → JD (removes numbers and special chars)</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Avatar name="Bob" />
+            <span className="text-sm text-muted-foreground">"Bob" → B (single name)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive examples showing image loading behavior and name processing logic.',
+      },
+    },
+  },
+}
+
+export const Docs: Story = {
+  render: () => (
+    <div className="max-w-4xl mx-auto space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold mb-4">Avatar Component</h1>
+        <p className="text-lg text-muted-foreground mb-6">
+          A flexible avatar component that displays user profile images, initials, or fallback icons.
+          Supports automatic fallback hierarchy: image → initials → custom fallback → default icon.
+        </p>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-semibold mb-4">Features</h2>
+        <ul className="list-disc list-inside space-y-2 text-muted-foreground">
+          <li>Multiple content types: images, initials, icons, and custom fallbacks</li>
+          <li>Automatic fallback hierarchy when image loading fails</li>
+          <li>Smart initial generation from names with sanitization</li>
+          <li>Three size variants: small (24px), medium (32px), large (40px)</li>
+          <li>Accessible with proper alt text and ARIA attributes</li>
+          <li>Consistent styling with Shadcn design tokens</li>
+          <li>TypeScript support with full type safety</li>
+        </ul>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-semibold mb-4">Usage Guidelines</h2>
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-lg font-medium mb-2">When to Use</h3>
+            <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+              <li>User profile representations in headers, cards, or lists</li>
+              <li>Author attribution in comments, posts, or articles</li>
+              <li>Team member displays in organizational charts</li>
+              <li>Contact lists and user directories</li>
+            </ul>
+          </div>
+          
+          <div>
+            <h3 className="text-lg font-medium mb-2">Best Practices</h3>
+            <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+              <li>Always provide meaningful alt text for images</li>
+              <li>Use consistent sizing within the same context</li>
+              <li>Provide names for initial generation when possible</li>
+              <li>Consider loading states for dynamic image sources</li>
+              <li>Use appropriate sizes: sm for compact lists, md for general use, lg for profiles</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-semibold mb-4">Accessibility</h2>
+        <div className="space-y-2 text-sm text-muted-foreground">
+          <p>The Avatar component follows accessibility best practices:</p>
+          <ul className="list-disc list-inside space-y-1 ml-4">
+            <li>Images include proper alt text (from alt prop, name prop, or default)</li>
+            <li>Fallback content is properly announced by screen readers</li>
+            <li>Color contrast meets WCAG guidelines for text initials</li>
+            <li>Component supports keyboard navigation when interactive</li>
+          </ul>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-semibold mb-4">Examples</h2>
+        <div className="space-y-6">
+          <div>
+            <h3 className="text-base font-medium mb-2">Sizes</h3>
+            <div className="flex items-center gap-4">
+              <Avatar size="sm" name="Small Avatar" />
+              <Avatar size="md" name="Medium Avatar" />
+              <Avatar size="lg" name="Large Avatar" />
+            </div>
+          </div>
+          
+          <div>
+            <h3 className="text-base font-medium mb-2">Content Types</h3>
+            <div className="flex items-center gap-4">
+              <Avatar 
+                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
+                alt="Profile Image"
+              />
+              <Avatar name="John Doe" />
+              <Avatar fallback={<User className="size-1/2" />} />
+              <Avatar />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-semibold mb-4">API Reference</h2>
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-base font-medium mb-2">Props</h3>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm border-collapse border border-border">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="text-left p-2 border-r border-border">Prop</th>
+                    <th className="text-left p-2 border-r border-border">Type</th>
+                    <th className="text-left p-2 border-r border-border">Default</th>
+                    <th className="text-left p-2">Description</th>
+                  </tr>
+                </thead>
+                <tbody className="text-muted-foreground">
+                  <tr className="border-b border-border">
+                    <td className="p-2 border-r border-border font-mono">src</td>
+                    <td className="p-2 border-r border-border">string</td>
+                    <td className="p-2 border-r border-border">-</td>
+                    <td className="p-2">Image source URL</td>
+                  </tr>
+                  <tr className="border-b border-border">
+                    <td className="p-2 border-r border-border font-mono">alt</td>
+                    <td className="p-2 border-r border-border">string</td>
+                    <td className="p-2 border-r border-border">-</td>
+                    <td className="p-2">Alternative text for image</td>
+                  </tr>
+                  <tr className="border-b border-border">
+                    <td className="p-2 border-r border-border font-mono">name</td>
+                    <td className="p-2 border-r border-border">string</td>
+                    <td className="p-2 border-r border-border">-</td>
+                    <td className="p-2">Name to generate initials from</td>
+                  </tr>
+                  <tr className="border-b border-border">
+                    <td className="p-2 border-r border-border font-mono">fallback</td>
+                    <td className="p-2 border-r border-border">ReactNode</td>
+                    <td className="p-2 border-r border-border">-</td>
+                    <td className="p-2">Custom fallback content</td>
+                  </tr>
+                  <tr className="border-b border-border">
+                    <td className="p-2 border-r border-border font-mono">size</td>
+                    <td className="p-2 border-r border-border">'sm' | 'md' | 'lg'</td>
+                    <td className="p-2 border-r border-border">'md'</td>
+                    <td className="p-2">Size variant</td>
+                  </tr>
+                  <tr>
+                    <td className="p-2 border-r border-border font-mono">className</td>
+                    <td className="p-2 border-r border-border">string</td>
+                    <td className="p-2 border-r border-border">-</td>
+                    <td className="p-2">Additional CSS classes</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete documentation and usage guidelines for the Avatar component.',
+      },
+    },
+  },
+}

package/src/components/atoms/avatar/avatar.test.tsx

@@ -0,0 +1,226 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import '@testing-library/jest-dom'
+import { Avatar } from './index'
+import { stringAvatar } from '../../../lib/string-avatar'
+
+const mockFn = () => vi.fn()
+
+describe('Avatar', () => {
+  describe('Image Avatar', () => {
+    it('renders with image when src is provided', () => {
+      render(<Avatar src="https://example.com/avatar.jpg" alt="User Avatar" />)
+      
+      const image = screen.getByTestId('avatar-image')
+      expect(image).toBeInTheDocument()
+      expect(image).toHaveAttribute('src', 'https://example.com/avatar.jpg')
+      expect(image).toHaveAttribute('alt', 'User Avatar')
+    })
+
+    it('falls back to initials when image fails to load', async () => {
+      render(<Avatar src="invalid-url" name="John Doe" />)
+      
+      const image = screen.getByTestId('avatar-image')
+      fireEvent.error(image)
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('avatar-fallback')).toBeInTheDocument()
+        expect(screen.getByText('JD')).toBeInTheDocument()
+      })
+    })
+
+    it('uses name as alt text when alt is not provided', () => {
+      render(<Avatar src="https://example.com/avatar.jpg" name="John Doe" />)
+      
+      const image = screen.getByTestId('avatar-image')
+      expect(image).toHaveAttribute('alt', 'John Doe')
+    })
+
+    it('uses default alt text when neither alt nor name is provided', () => {
+      render(<Avatar src="https://example.com/avatar.jpg" />)
+      
+      const image = screen.getByTestId('avatar-image')
+      expect(image).toHaveAttribute('alt', 'Avatar')
+    })
+  })
+
+  describe('Initials Avatar', () => {
+    it('renders initials when name is provided and no image', () => {
+      render(<Avatar name="John Doe" />)
+      
+      expect(screen.getByTestId('avatar-fallback')).toBeInTheDocument()
+      expect(screen.getByText('JD')).toBeInTheDocument()
+    })
+
+    it('renders single initial for single name', () => {
+      render(<Avatar name="John" />)
+      
+      expect(screen.getByText('J')).toBeInTheDocument()
+    })
+
+    it('handles names with special characters', () => {
+      render(<Avatar name="J0hn D03!" />)
+      
+      expect(screen.getByText('JD')).toBeInTheDocument()
+    })
+
+    it('handles names with extra spaces', () => {
+      render(<Avatar name="  John   Doe  " />)
+      
+      expect(screen.getByText('JD')).toBeInTheDocument()
+    })
+
+    it('handles empty or invalid names gracefully', () => {
+      render(<Avatar name="" />)
+      
+      expect(screen.getByTestId('avatar-fallback')).toBeInTheDocument()
+      expect(screen.queryByText('JD')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Fallback Avatar', () => {
+    it('renders custom fallback when provided', () => {
+      render(<Avatar fallback="AB" />)
+      
+      expect(screen.getByTestId('avatar-fallback')).toBeInTheDocument()
+      expect(screen.getByText('AB')).toBeInTheDocument()
+    })
+
+    it('renders icon fallback when no name or custom fallback', () => {
+      render(<Avatar />)
+      
+      expect(screen.getByTestId('avatar-fallback')).toBeInTheDocument()
+      const fallback = screen.getByTestId('avatar-fallback')
+      expect(fallback.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('prioritizes custom fallback over name initials', () => {
+      render(<Avatar name="John Doe" fallback="Custom" />)
+      
+      expect(screen.getByText('Custom')).toBeInTheDocument()
+      expect(screen.queryByText('JD')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Size Variants', () => {
+    it('renders small size correctly', () => {
+      render(<Avatar size="sm" name="John Doe" />)
+      
+      const avatar = screen.getByTestId('avatar')
+      expect(avatar).toHaveClass('size-6')
+    })
+
+    it('renders medium size correctly (default)', () => {
+      render(<Avatar name="John Doe" />)
+      
+      const avatar = screen.getByTestId('avatar')
+      expect(avatar).toHaveClass('size-8')
+    })
+
+    it('renders large size correctly', () => {
+      render(<Avatar size="lg" name="John Doe" />)
+      
+      const avatar = screen.getByTestId('avatar')
+      expect(avatar).toHaveClass('size-10')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has proper accessibility attributes', () => {
+      render(<Avatar name="John Doe" />)
+      
+      const avatar = screen.getByTestId('avatar')
+      expect(avatar).toBeInTheDocument()
+    })
+
+    it('supports custom className', () => {
+      render(<Avatar className="custom-class" name="John Doe" />)
+      
+      const avatar = screen.getByTestId('avatar')
+      expect(avatar).toHaveClass('custom-class')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn()
+      render(<Avatar ref={ref} name="John Doe" />)
+      
+      expect(ref).toHaveBeenCalled()
+    })
+
+    it('supports custom props', () => {
+      const onClick = mockFn()
+      render(<Avatar onClick={onClick} name="John Doe" />)
+      
+      const avatar = screen.getByTestId('avatar')
+      fireEvent.click(avatar)
+      expect(onClick).toHaveBeenCalled()
+    })
+  })
+
+  describe('Image Loading States', () => {
+    it('resets error state when src changes', async () => {
+      const { rerender } = render(<Avatar src="invalid-url" name="John Doe" />)
+      
+      const image = screen.getByTestId('avatar-image')
+      fireEvent.error(image)
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('avatar-fallback')).toBeInTheDocument()
+      })
+      
+      rerender(<Avatar src="https://example.com/new-avatar.jpg" name="John Doe" />)
+      
+      expect(screen.getByTestId('avatar-image')).toBeInTheDocument()
+      expect(screen.getByTestId('avatar-image')).toHaveAttribute('src', 'https://example.com/new-avatar.jpg')
+    })
+
+    it('handles image load event', () => {
+      render(<Avatar src="https://example.com/avatar.jpg" name="John Doe" />)
+      
+      const image = screen.getByTestId('avatar-image')
+      fireEvent.load(image)
+      
+      expect(image).toBeInTheDocument()
+    })
+  })
+})
+
+describe('stringAvatar utility', () => {
+  it('should return initials from a two-word name', () => {
+    expect(stringAvatar('John Doe')).toBe('JD')
+    expect(stringAvatar('Alice Wonderland')).toBe('AW')
+  })
+
+  it('should handle single-word names', () => {
+    expect(stringAvatar('John')).toBe('J')
+    expect(stringAvatar('Alice')).toBe('A')
+  })
+
+  it('should sanitize names by removing special characters and numbers', () => {
+    expect(stringAvatar('J0hn D03!')).toBe('JD')
+    expect(stringAvatar('A!ice123 W#0nderland')).toBe('AW')
+  })
+
+  it('should handle names with extra spaces', () => {
+    expect(stringAvatar('  John   Doe  ')).toBe('JD')
+    expect(stringAvatar(' Alice  Wonderland ')).toBe('AW')
+  })
+
+  it('should handle empty or invalid names gracefully', () => {
+    expect(stringAvatar('')).toBeUndefined()
+    expect(stringAvatar('  ')).toBeUndefined()
+    expect(stringAvatar('123')).toBeUndefined()
+    expect(stringAvatar('!@#')).toBeUndefined()
+  })
+
+  it('should handle names with multiple words', () => {
+    expect(stringAvatar('John Michael Doe')).toBe('JD')
+    expect(stringAvatar('Alice Mary Jane Wonderland')).toBe('AW')
+  })
+
+  it('should handle names with mixed case', () => {
+    expect(stringAvatar('john doe')).toBe('JD')
+    expect(stringAvatar('ALICE WONDERLAND')).toBe('AW')
+    expect(stringAvatar('JoHn DoE')).toBe('JD')
+  })
+})

package/src/components/atoms/avatar/index.tsx

@@ -0,0 +1,118 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { User } from "lucide-react"
+import { cn } from "../../../lib/utils"
+import { stringAvatar } from "../../../lib/string-avatar"
+
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "size-6",
+        md: "size-8", 
+        lg: "size-10",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+const avatarImageVariants = cva(
+  "aspect-square h-full w-full object-cover"
+)
+
+const avatarFallbackVariants = cva(
+  "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground font-medium uppercase",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+
+export interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {
+  src?: string
+  alt?: string
+  name?: string
+  fallback?: React.ReactNode
+}
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  (
+    {
+      className,
+      size,
+      src,
+      alt,
+      name,
+      fallback,
+      ...props
+    },
+    ref
+  ) => {
+    const [imageError, setImageError] = React.useState(false)
+
+    React.useEffect(() => {
+      setImageError(false)
+    }, [src])
+
+    const handleImageError = () => {
+      setImageError(true)
+    }
+
+    const showImage = src && !imageError
+    const initials = name ? stringAvatar(name) : undefined
+    
+    let displayFallback: React.ReactNode = fallback
+    if (!displayFallback && initials) {
+      displayFallback = initials
+    }
+    if (!displayFallback) {
+      displayFallback = <User className="size-1/2" />
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(avatarVariants({ size, className }))}
+        data-testid="avatar"
+        {...props}
+      >
+        {showImage && (
+          <img
+            src={src}
+            alt={alt || name || "Avatar"}
+            className={cn(avatarImageVariants())}
+            onError={handleImageError}
+            data-testid="avatar-image"
+          />
+        )}
+        {!showImage && (
+          <div
+            className={cn(avatarFallbackVariants({ size }))}
+            data-testid="avatar-fallback"
+          >
+            {displayFallback}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+Avatar.displayName = "Avatar"
+
+export { Avatar }

package/src/components/atoms/box/index.tsx

@@ -97,7 +97,7 @@ export interface BoxProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof boxVariants> {
   asChild?: boolean
-  as?: keyof JSX.IntrinsicElements
+  as?: React.ElementType
 }
 
 export const Box = React.forwardRef<HTMLDivElement, BoxProps>(

package/src/components/atoms/skeleton/skeleton.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import * as React from 'react'
 import { Skeleton } from './index'
 
 const meta: Meta<typeof Skeleton> = {

package/src/components/index.tsx

@@ -1,3 +1,4 @@
+export { Avatar } from './atoms/avatar'
 export { Button } from './atoms/button'
 export { Input } from './atoms/input'
 export { Checkbox } from './atoms/checkbox'

package/src/components/organisms/dropdown/index.tsx

@@ -393,7 +393,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           newSelected = isSelected ? valueArray : []
         } else {
           if (isSelected) {
-            newSelected = [...new Set([...prev, ...valueArray])]
+            newSelected = Array.from(new Set([...prev, ...valueArray]))
           } else {
             newSelected = prev.filter(item => !valueArray.includes(item))
           }

package/src/lib/string-avatar.ts

@@ -0,0 +1,23 @@
+export const stringAvatar = (name: string): string | undefined => {
+  const sanitizedName = name
+    .replace(/[^\w\s]/gi, '')
+    .replace(/\d+/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+
+  if (!sanitizedName) {
+    return undefined
+  }
+
+  const words = sanitizedName.split(' ').filter(word => word.length > 0)
+  
+  if (words.length === 0) {
+    return undefined
+  }
+  
+  if (words.length === 1) {
+    return words[0].charAt(0).toUpperCase()
+  }
+  
+  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase()
+}