siesa-ui-kit 1.0.1 → 1.0.2

package/src/components/Dropdown/README.md

@@ -0,0 +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)

package/src/components/Dropdown/icons.tsx

@@ -0,0 +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>
+);

package/src/components/Dropdown/index.ts

@@ -0,0 +1,8 @@
+export { Dropdown, DropdownItem, DropdownHeading, DropdownDivider } from './Dropdown';
+export type {
+  DropdownProps,
+  DropdownItemProps,
+  DropdownHeadingProps,
+  DropdownDividerProps,
+} from './Dropdown.types';
+export { ChevronDownIcon, CogIcon, UserIcon, BellIcon, CreditCardIcon } from './icons';

package/src/components/DropdownItemCollapsible/DropdownItemCollapsible.stories.tsx

@@ -0,0 +1,317 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownItemCollapsible } from './DropdownItemCollapsible';
+import { UserIcon } from './icons';
+
+const meta = {
+  title: 'Components/DropdownItemCollapsible',
+  component: DropdownItemCollapsible,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'light',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownItemCollapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Item colapsable básico sin encabezado ni divisor
+ * Muestra estructura simple con header colapsable
+ */
+export const Basic: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Users"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        {
+          label: 'Active Users',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Inactive Users',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Users',
+  },
+};
+
+/**
+ * Item colapsable con encabezado de sección
+ * Útil para agrupar items relacionados
+ */
+export const WithHeading: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Customers"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      showHeading={true}
+      headingLabel="SECTION 1"
+      children={[
+        {
+          label: 'Enterprise',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'SMB',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Startup',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+      showDivider={true}
+    />
+  ),
+  args: {
+    label: 'Customers',
+  },
+};
+
+/**
+ * Item colapsable expandido por defecto
+ */
+export const DefaultOpen: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Departments"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      defaultOpen={true}
+      children={[
+        {
+          label: 'Sales',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Marketing',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Engineering',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Operations',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Departments',
+  },
+};
+
+/**
+ * Item deshabilitado
+ * No se puede expandir ni interactuar
+ */
+export const Disabled: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Archived"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      disabled={true}
+      children={[
+        {
+          label: 'Old Item 1',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Old Item 2',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Archived',
+  },
+};
+
+/**
+ * Item simple sin items anidados (no colapsable)
+ * Actúa como un botón normal
+ */
+export const Simple: Story = {
+  args: {
+    label: 'Single Item',
+    icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+    isCollapsible: false,
+  },
+};
+
+/**
+ * Item sin icono
+ */
+export const WithoutIcon: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="No Icon Item"
+      children={[
+        {
+          label: 'Child 1',
+        },
+        {
+          label: 'Child 2',
+        },
+        {
+          label: 'Child 3',
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'No Icon Item',
+  },
+};
+
+/**
+ * Items anidados sin iconos
+ */
+export const ChildrenWithoutIcons: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Groups"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        {
+          label: 'Admins',
+        },
+        {
+          label: 'Users',
+        },
+        {
+          label: 'Guests',
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Groups',
+  },
+};
+
+/**
+ * Múltiples items colapsables para simular dropdown completo
+ */
+export const MultipleItems: Story = {
+  args: {
+    label: 'Multi Demo',
+  },
+  render: () => (
+    <div className="flex flex-col gap-0 w-56 bg-bg-primary dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary p-2">
+      <DropdownItemCollapsible
+        label="Users"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showHeading={true}
+        headingLabel="RESOURCES"
+        showDivider={true}
+        children={[
+          {
+            label: 'Active Users',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Inactive Users',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+        ]}
+      />
+
+      <DropdownItemCollapsible
+        label="Departments"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showDivider={true}
+        children={[
+          {
+            label: 'Sales',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Marketing',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Engineering',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+        ]}
+      />
+
+      <DropdownItemCollapsible
+        label="Settings"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showDivider={false}
+        isCollapsible={false}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Ejemplo con callbacks
+ */
+export const WithCallbacks: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Actions"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      defaultOpen={false}
+      children={[
+        {
+          label: 'Edit',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          onClick: () => console.log('Edit clicked'),
+        },
+        {
+          label: 'Delete',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          onClick: () => console.log('Delete clicked'),
+        },
+        {
+          label: 'Archive',
+          disabled: true,
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+      onOpenChange={(open) => console.log('Toggle state:', open)}
+    />
+  ),
+  args: {
+    label: 'Actions',
+  },
+};
+
+/**
+ * Item con muchos items anidados
+ */
+export const ManyChildren: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Countries"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        { label: 'United States' },
+        { label: 'Canada' },
+        { label: 'Mexico' },
+        { label: 'Brazil' },
+        { label: 'Argentina' },
+        { label: 'Chile' },
+        { label: 'Colombia' },
+        { label: 'Peru' },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Countries',
+  },
+};