siesa-ui-kit 1.0.2 → 1.0.3

package/src/components/Dropdown/README.md

@@ -1,266 +0,0 @@
-# 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 +0,0 @@
-/**
- * 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

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

@@ -1,317 +0,0 @@
-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',
-  },
-};