siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Dropdown/README.md

@@ -1,266 +1,266 @@
-# Dropdown Component
-
-Componente de menú desplegable del sistema de diseño Siesa UI Kit.
-
-## Características
-
-- **Múltiples tipos de items**: Con iconos, descripciones y shortcuts
-- **Headings y dividers**: Para organizar el menú
-- **Estados completos**: Default, Hover, Focus, Disabled
-- **Cierre automático**: Al hacer click fuera del menú
-- **Keyboard navigation**: Escape para cerrar
-- **Dark mode**: Soporte completo con tokens del sistema
-- **Type-safe**: TypeScript estricto con tipos exportados
-- **Accesible**: ARIA labels y atributos de accesibilidad
-
-## Uso Básico
-
-```tsx
-import { Dropdown } from '@/components/Dropdown';
-
-<Dropdown
-  placeholder="Options"
-  items={[
-    { children: 'Account' },
-    { children: 'Settings' },
-    { children: 'Logout' },
-  ]}
-/>
-```
-
-## Con Iconos
-
-```tsx
-import { Dropdown, UserIcon, CogIcon } from '@/components/Dropdown';
-
-<Dropdown
-  placeholder="Menu"
-  items={[
-    { children: 'Profile', icon: <UserIcon /> },
-    { children: 'Settings', icon: <CogIcon /> },
-  ]}
-/>
-```
-
-## Con Descripciones y Shortcuts
-
-```tsx
-<Dropdown
-  placeholder="Edit"
-  items={[
-    {
-      children: 'Profile',
-      icon: <UserIcon />,
-      description: 'View your profile',
-      shortcut: '⌘ P',
-    },
-    {
-      children: 'Settings',
-      icon: <CogIcon />,
-      description: 'Manage preferences',
-      shortcut: '⌘ ,',
-    },
-  ]}
-/>
-```
-
-## Con Headings y Dividers
-
-```tsx
-<Dropdown
-  placeholder="Account"
-  items={[
-    { isHeading: true, children: 'Account' },
-    { children: 'Profile' },
-    { children: 'Settings' },
-    { isDivider: true },
-    { isHeading: true, children: 'Actions' },
-    { children: 'Logout' },
-  ]}
-/>
-```
-
-## Controlado
-
-```tsx
-const [open, setOpen] = useState(false);
-
-<Dropdown
-  placeholder="Options"
-  open={open}
-  onOpenChange={setOpen}
-  items={[
-    { children: 'Account' },
-    { children: 'Settings' },
-  ]}
-/>
-```
-
-## Con Callbacks
-
-```tsx
-<Dropdown
-  placeholder="Actions"
-  onOpenChange={(open) => console.log('Dropdown', open ? 'opened' : 'closed')}
-  items={[
-    {
-      children: 'Edit',
-      onClick: () => console.log('Edit clicked'),
-    },
-    {
-      children: 'Delete',
-      onClick: () => console.log('Delete clicked'),
-    },
-  ]}
-/>
-```
-
-## Props
-
-### DropdownProps
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Texto del botón trigger |
-| `items` | `DropdownItemProps[]` | - | Items del menú |
-| `open` | `boolean` | - | Estado controlado (abierto/cerrado) |
-| `onOpenChange` | `(open: boolean) => void` | - | Callback cuando cambia el estado |
-| `disabled` | `boolean` | `false` | Si está deshabilitado |
-| `className` | `string` | `''` | Clases CSS adicionales para el trigger |
-| `menuClassName` | `string` | `''` | Clases CSS adicionales para el menú |
-| `ariaLabel` | `string` | - | Label para accesibilidad |
-| `placeholder` | `string` | `'Options'` | Texto cuando no hay children |
-
-### DropdownItemProps
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Contenido del item |
-| `icon` | `ReactNode` | - | Icono a la izquierda |
-| `description` | `string` | - | Descripción secundaria |
-| `shortcut` | `string` | - | Atajo de teclado |
-| `disabled` | `boolean` | `false` | Si está deshabilitado |
-| `selected` | `boolean` | `false` | Si está seleccionado |
-| `onClick` | `(event: MouseEvent) => void` | - | Handler del click |
-| `className` | `string` | `''` | Clases CSS adicionales |
-| `isDivider` | `boolean` | `false` | Si es un separador |
-| `isHeading` | `boolean` | `false` | Si es un encabezado |
-
-## Ejemplos de Uso
-
-### User Menu
-
-```tsx
-<Dropdown
-  placeholder="John Doe"
-  items={[
-    { children: 'Profile', icon: <UserIcon />, description: 'View your profile' },
-    { children: 'Settings', icon: <CogIcon />, description: 'Manage your account', shortcut: '⌘ ,' },
-    { isDivider: true },
-    { children: 'Sign out' },
-  ]}
-/>
-```
-
-### Edit Menu
-
-```tsx
-<Dropdown
-  placeholder="Edit"
-  items={[
-    { children: 'Undo', shortcut: '⌘ Z' },
-    { children: 'Redo', shortcut: '⌘ ⇧ Z' },
-    { isDivider: true },
-    { children: 'Cut', shortcut: '⌘ X' },
-    { children: 'Copy', shortcut: '⌘ C' },
-    { children: 'Paste', shortcut: '⌘ V' },
-  ]}
-/>
-```
-
-### View Menu
-
-```tsx
-<Dropdown
-  placeholder="View"
-  items={[
-    { isHeading: true, children: 'Layout' },
-    { children: 'Show Sidebar', shortcut: '⌘ B' },
-    { children: 'Show Toolbar', shortcut: '⌘ T' },
-    { isDivider: true },
-    { isHeading: true, children: 'Appearance' },
-    { children: 'Light Mode' },
-    { children: 'Dark Mode' },
-    { children: 'Auto' },
-  ]}
-/>
-```
-
-## Tokens del Sistema
-
-El componente usa los siguientes tokens del sistema:
-
-### Colores
-
-- `bg-bg-primary` / `dark:bg-dark-bg-primary` - Fondo del trigger
-- `bg-background-secondary` / `dark:bg-dark-bg-primary` - Fondo del menú
-- `text-content-primary` / `dark:text-dark-content-primary` - Texto principal
-- `text-content-secondary` / `dark:text-content-secondary` - Texto secundario
-- `text-content-tertiary` / `dark:text-content-tertiary` - Headings
-- `border-border-primary` / `dark:border-dark-border-primary` - Bordes
-
-### Spacing
-
-- `px-3` (12px) - Padding horizontal del trigger
-- `py-2` (8px) - Padding vertical del trigger
-- `px-4` (16px) - Padding horizontal de items
-- `p-1` (4px) - Padding del menú
-- `gap-3` (12px) - Gap entre elementos
-
-### Border Radius
-
-- `rounded-lg` (8px) - Trigger y items
-- `rounded-xl` (12px) - Menú
-
-### Typography
-
-- `text-sm` (14px) - Trigger y items
-- `text-xs` (12px) - Headings y shortcuts
-
-### Shadows
-
-- `shadow-menu` - Sombra del menú desplegable
-
-## Especificaciones de Figma
-
-Basado en las especificaciones de Figma del Siesa UI Kit:
-
-- **Node ID**: 4194:15134
-- **Componentes**: DropdownButton, DropdownMenu, DropdownItem, DropdownHeading, DropdownDivider
-- **Estados**: Default, Hover, Focus, Disabled
-- **Dark Mode**: Completo
-
-## Accesibilidad
-
-- Usa `aria-haspopup="true"` en el trigger
-- Usa `aria-expanded` para indicar el estado
-- Soporta `Escape` para cerrar
-- Todos los items son navegables por teclado
-- Usa `ariaLabel` para lectores de pantalla
-
-## Mejores Prácticas
-
-- Usa `isDivider: true` para separadores visuales
-- Usa `isHeading: true` para encabezados de sección
-- Agrega `description` para contexto adicional
-- Agrega `shortcut` para indicar atajos de teclado
-- Usa iconos para mejorar la claridad visual
-- Limita la cantidad de items para evitar scroll excesivo
-
-## Referencias
-
-- [Sistema de Colores](../../docs/colors.md)
-- [Sistema de Tipografía](../../docs/typography.md)
-- [Sistema de Spacing](../../docs/spacing.md)
-- [Sistema de Sombras](../../docs/shadows.md)
-- [Dark Mode Guide](../../docs/dark-mode-guide.md)
+# Dropdown Component
+
+Componente de menú desplegable del sistema de diseño Siesa UI Kit.
+
+## Características
+
+- **Múltiples tipos de items**: Con iconos, descripciones y shortcuts
+- **Headings y dividers**: Para organizar el menú
+- **Estados completos**: Default, Hover, Focus, Disabled
+- **Cierre automático**: Al hacer click fuera del menú
+- **Keyboard navigation**: Escape para cerrar
+- **Dark mode**: Soporte completo con tokens del sistema
+- **Type-safe**: TypeScript estricto con tipos exportados
+- **Accesible**: ARIA labels y atributos de accesibilidad
+
+## Uso Básico
+
+```tsx
+import { Dropdown } from '@/components/Dropdown';
+
+<Dropdown
+  placeholder="Options"
+  items={[
+    { children: 'Account' },
+    { children: 'Settings' },
+    { children: 'Logout' },
+  ]}
+/>
+```
+
+## Con Iconos
+
+```tsx
+import { Dropdown, UserIcon, CogIcon } from '@/components/Dropdown';
+
+<Dropdown
+  placeholder="Menu"
+  items={[
+    { children: 'Profile', icon: <UserIcon /> },
+    { children: 'Settings', icon: <CogIcon /> },
+  ]}
+/>
+```
+
+## Con Descripciones y Shortcuts
+
+```tsx
+<Dropdown
+  placeholder="Edit"
+  items={[
+    {
+      children: 'Profile',
+      icon: <UserIcon />,
+      description: 'View your profile',
+      shortcut: '⌘ P',
+    },
+    {
+      children: 'Settings',
+      icon: <CogIcon />,
+      description: 'Manage preferences',
+      shortcut: '⌘ ,',
+    },
+  ]}
+/>
+```
+
+## Con Headings y Dividers
+
+```tsx
+<Dropdown
+  placeholder="Account"
+  items={[
+    { isHeading: true, children: 'Account' },
+    { children: 'Profile' },
+    { children: 'Settings' },
+    { isDivider: true },
+    { isHeading: true, children: 'Actions' },
+    { children: 'Logout' },
+  ]}
+/>
+```
+
+## Controlado
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<Dropdown
+  placeholder="Options"
+  open={open}
+  onOpenChange={setOpen}
+  items={[
+    { children: 'Account' },
+    { children: 'Settings' },
+  ]}
+/>
+```
+
+## Con Callbacks
+
+```tsx
+<Dropdown
+  placeholder="Actions"
+  onOpenChange={(open) => console.log('Dropdown', open ? 'opened' : 'closed')}
+  items={[
+    {
+      children: 'Edit',
+      onClick: () => console.log('Edit clicked'),
+    },
+    {
+      children: 'Delete',
+      onClick: () => console.log('Delete clicked'),
+    },
+  ]}
+/>
+```
+
+## Props
+
+### DropdownProps
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Texto del botón trigger |
+| `items` | `DropdownItemProps[]` | - | Items del menú |
+| `open` | `boolean` | - | Estado controlado (abierto/cerrado) |
+| `onOpenChange` | `(open: boolean) => void` | - | Callback cuando cambia el estado |
+| `disabled` | `boolean` | `false` | Si está deshabilitado |
+| `className` | `string` | `''` | Clases CSS adicionales para el trigger |
+| `menuClassName` | `string` | `''` | Clases CSS adicionales para el menú |
+| `ariaLabel` | `string` | - | Label para accesibilidad |
+| `placeholder` | `string` | `'Options'` | Texto cuando no hay children |
+
+### DropdownItemProps
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Contenido del item |
+| `icon` | `ReactNode` | - | Icono a la izquierda |
+| `description` | `string` | - | Descripción secundaria |
+| `shortcut` | `string` | - | Atajo de teclado |
+| `disabled` | `boolean` | `false` | Si está deshabilitado |
+| `selected` | `boolean` | `false` | Si está seleccionado |
+| `onClick` | `(event: MouseEvent) => void` | - | Handler del click |
+| `className` | `string` | `''` | Clases CSS adicionales |
+| `isDivider` | `boolean` | `false` | Si es un separador |
+| `isHeading` | `boolean` | `false` | Si es un encabezado |
+
+## Ejemplos de Uso
+
+### User Menu
+
+```tsx
+<Dropdown
+  placeholder="John Doe"
+  items={[
+    { children: 'Profile', icon: <UserIcon />, description: 'View your profile' },
+    { children: 'Settings', icon: <CogIcon />, description: 'Manage your account', shortcut: '⌘ ,' },
+    { isDivider: true },
+    { children: 'Sign out' },
+  ]}
+/>
+```
+
+### Edit Menu
+
+```tsx
+<Dropdown
+  placeholder="Edit"
+  items={[
+    { children: 'Undo', shortcut: '⌘ Z' },
+    { children: 'Redo', shortcut: '⌘ ⇧ Z' },
+    { isDivider: true },
+    { children: 'Cut', shortcut: '⌘ X' },
+    { children: 'Copy', shortcut: '⌘ C' },
+    { children: 'Paste', shortcut: '⌘ V' },
+  ]}
+/>
+```
+
+### View Menu
+
+```tsx
+<Dropdown
+  placeholder="View"
+  items={[
+    { isHeading: true, children: 'Layout' },
+    { children: 'Show Sidebar', shortcut: '⌘ B' },
+    { children: 'Show Toolbar', shortcut: '⌘ T' },
+    { isDivider: true },
+    { isHeading: true, children: 'Appearance' },
+    { children: 'Light Mode' },
+    { children: 'Dark Mode' },
+    { children: 'Auto' },
+  ]}
+/>
+```
+
+## Tokens del Sistema
+
+El componente usa los siguientes tokens del sistema:
+
+### Colores
+
+- `bg-bg-primary` / `dark:bg-dark-bg-primary` - Fondo del trigger
+- `bg-background-secondary` / `dark:bg-dark-bg-primary` - Fondo del menú
+- `text-content-primary` / `dark:text-dark-content-primary` - Texto principal
+- `text-content-secondary` / `dark:text-content-secondary` - Texto secundario
+- `text-content-tertiary` / `dark:text-content-tertiary` - Headings
+- `border-border-primary` / `dark:border-dark-border-primary` - Bordes
+
+### Spacing
+
+- `px-3` (12px) - Padding horizontal del trigger
+- `py-2` (8px) - Padding vertical del trigger
+- `px-4` (16px) - Padding horizontal de items
+- `p-1` (4px) - Padding del menú
+- `gap-3` (12px) - Gap entre elementos
+
+### Border Radius
+
+- `rounded-lg` (8px) - Trigger y items
+- `rounded-xl` (12px) - Menú
+
+### Typography
+
+- `text-sm` (14px) - Trigger y items
+- `text-xs` (12px) - Headings y shortcuts
+
+### Shadows
+
+- `shadow-menu` - Sombra del menú desplegable
+
+## Especificaciones de Figma
+
+Basado en las especificaciones de Figma del Siesa UI Kit:
+
+- **Node ID**: 4194:15134
+- **Componentes**: DropdownButton, DropdownMenu, DropdownItem, DropdownHeading, DropdownDivider
+- **Estados**: Default, Hover, Focus, Disabled
+- **Dark Mode**: Completo
+
+## Accesibilidad
+
+- Usa `aria-haspopup="true"` en el trigger
+- Usa `aria-expanded` para indicar el estado
+- Soporta `Escape` para cerrar
+- Todos los items son navegables por teclado
+- Usa `ariaLabel` para lectores de pantalla
+
+## Mejores Prácticas
+
+- Usa `isDivider: true` para separadores visuales
+- Usa `isHeading: true` para encabezados de sección
+- Agrega `description` para contexto adicional
+- Agrega `shortcut` para indicar atajos de teclado
+- Usa iconos para mejorar la claridad visual
+- Limita la cantidad de items para evitar scroll excesivo
+
+## Referencias
+
+- [Sistema de Colores](../../docs/colors.md)
+- [Sistema de Tipografía](../../docs/typography.md)
+- [Sistema de Spacing](../../docs/spacing.md)
+- [Sistema de Sombras](../../docs/shadows.md)
+- [Dark Mode Guide](../../docs/dark-mode-guide.md)

package/src/components/Dropdown/icons.tsx

@@ -1,72 +1,72 @@
-/**
- * Iconos para el componente Dropdown
- * Usando heroicons-micro según especificaciones de Figma
- */
-
-export const ChevronDownIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path
-      fillRule="evenodd"
-      d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const CogIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path
-      fillRule="evenodd"
-      d="M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.461 3.39a.5.5 0 0 1 .639-.206l1.703.768c.433-.36.928-.649 1.466-.847l.186-1.858ZM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const UserIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
-  </svg>
-);
-
-export const BellIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path
-      fillRule="evenodd"
-      d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const CreditCardIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
-    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
-  </svg>
-);
+/**
+ * Iconos para el componente Dropdown
+ * Usando heroicons-micro según especificaciones de Figma
+ */
+
+export const ChevronDownIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const CogIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path
+      fillRule="evenodd"
+      d="M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.461 3.39a.5.5 0 0 1 .639-.206l1.703.768c.433-.36.928-.649 1.466-.847l.186-1.858ZM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const UserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
+  </svg>
+);
+
+export const BellIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path
+      fillRule="evenodd"
+      d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const CreditCardIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+  </svg>
+);