siesa-ui-kit 1.0.0 → 1.0.1

package/README.md

@@ -38,37 +38,34 @@ Este proyecto utiliza **Storybook** como herramienta principal para:
 
 Accede a Storybook ejecutando `npm run storybook` y abriendo http://localhost:6006
 
-## 🤖 Desarrollo con IA
-
-Este proyecto fue construido utilizando **Claude (Sonnet 4.5)** con un agente especializado:
-
-### Agente Especializado
-- **Ubicación**: `.claude/agents/siesa-ui-kit-specialist.md`
-- **Propósito**: Crear y mantener componentes siguiendo el sistema de diseño
-- **Características**:
-  - Extrae specs de Figma automáticamente
-  - Aplica tokens del sistema consistentemente
-  - Garantiza dark mode completo
-  - Genera documentación y Storybook stories
-
-### Prompts Templates
-Ubicados en `.claude/prompts/component-template.md`:
-
-1. **Crear Componente Nuevo** - Genera componente completo desde cero
-2. **Corregir Componente Existente** - Actualiza componentes con mejoras
-3. **Crear Vista Completa** - Compone páginas usando componentes del sistema
-
-Cada template incluye un checklist obligatorio que garantiza:
-- ✅ Todos los archivos necesarios (.tsx, .types.ts, .stories.tsx, README.md)
-- ✅ JSDoc completo con referencias
-- ✅ Dark mode en todos los estados
-- ✅ Focus rings adaptativos
-- ✅ Tokens del sistema (sin colores hardcodeados)
-- ✅ Build sin errores
-- ✅ Stories con ejemplos completos
+## 📁 Estructura de Carpetas
+
+```
+SiesaUIKit/
+├── src/
+│   ├── components/      # Componentes reutilizables
+│   └── views/           # Vistas/páginas completas
+├── docs/                # Documentación del sistema
+├── .claude/
+│   ├── agents/          # Agentes especializados
+│   └── prompts/         # Templates de prompts
+├── .storybook/          # Configuración de Storybook
+└── tailwind.config.js   # Tokens del sistema (colores, sombras, etc.)
+```
+
+Cada componente sigue esta estructura:
+```
+Button/
+├── Button.tsx           # Implementación
+├── Button.types.ts      # Tipos TypeScript
+├── Button.stories.tsx   # Stories de Storybook
+└── index.ts             # Exports
+```
 
 ## 📚 Documentación del Sistema
 
+**Tokens** son valores de diseño predefinidos (colores, sombras, tipografía) que garantizan consistencia. En lugar de `bg-blue-500`, usas `bg-primary-custom-600`. Si el diseño cambia, solo modificas `tailwind.config.js`.
+
 En la carpeta `docs/` encontrarás guías detalladas sobre:
 
 - `colors.md` - Paleta de colores y tokens
@@ -84,6 +81,35 @@ En la carpeta `docs/` encontrarás guías detalladas sobre:
 
 - [Figma Design System](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit)
 
+## 🔌 Configuración MCP de Figma
+
+Para extraer specs de Figma automáticamente, configura el MCP server:
+
+1. Abre Figma Desktop
+2. Ejecuta en terminal:
+```bash
+claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
+```
+
+**Herramientas disponibles:**
+- `get_design_context` - Extrae código React + Tailwind de un nodo
+- `get_screenshot` - Captura screenshot de un nodo
+- `get_metadata` - Obtiene estructura XML de un frame
+- `get_variable_defs` - Obtiene variables de diseño
+
+**Uso:** Pasa el `node-id` de la URL de Figma (ej: `4001-17242`)
+
+## 🤖 Prompts Templates
+
+Ubicados en `.claude/prompts/siesa-ui-kit.md`:
+
+| Prompt | Uso |
+|--------|-----|
+| `CREA el componente [NOMBRE]` | Genera componente completo |
+| `CREA la vista [NOMBRE]` | Genera vista/página completa |
+
+El agente `@siesa-ui-kit-specialist` contiene toda la documentación técnica (tokens, dark mode, checklists).
+
 ---
 
 © 2025 Siesa

package/dist/ButtonTest.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Página de prueba para el componente Button
+ */
+export declare const ButtonTest: React.FC;
+//# sourceMappingURL=ButtonTest.d.ts.map

package/dist/ButtonTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTest.d.ts","sourceRoot":"","sources":["../src/ButtonTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EA4I9B,CAAC"}

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,23 @@
+import type { AlertProps } from './Alert.types';
+/**
+ * Alert - Componente de alerta/diálogo del sistema de diseño Siesa
+ *
+ * Componente modal para confirmaciones con soporte para:
+ * - Título y descripción
+ * - Contenido personalizado (children)
+ * - Botones de acción personalizados o por defecto
+ * - Dark mode
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   title="Are you sure you want to refund this payment?"
+ *   description="The refund will be reflected in 2 to 3 business days."
+ *   onCancel={() => console.log('Cancelled')}
+ *   onConfirm={() => console.log('Confirmed')}
+ *   confirmText="Refund"
+ * />
+ * ```
+ */
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,uGA+EjB,CAAC"}

package/dist/components/Alert/Alert.types.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Props del componente Alert
+ */
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Título del alert (texto principal en negrita)
+     */
+    title: string;
+    /**
+     * Descripción opcional (texto secundario)
+     */
+    description?: string;
+    /**
+     * Contenido opcional del body (por ejemplo, input, placeholder, etc.)
+     */
+    children?: ReactNode;
+    /**
+     * Botones de acción personalizados
+     * Si no se proveen, se mostrarán los botones por defecto (Cancel/Confirm)
+     */
+    actions?: ReactNode;
+    /**
+     * Callback cuando se hace click en Cancel
+     */
+    onCancel?: () => void;
+    /**
+     * Callback cuando se hace click en Confirm
+     */
+    onConfirm?: () => void;
+    /**
+     * Texto del botón de cancelar
+     * @default "Cancelar"
+     */
+    cancelText?: string;
+    /**
+     * Texto del botón de confirmar
+     * @default "Confirmar"
+     */
+    confirmText?: string;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+//# sourceMappingURL=Alert.types.d.ts.map

package/dist/components/Alert/Alert.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,41 @@
+import type { AvatarProps } from './Avatar.types';
+/**
+ * Avatar - Componente de avatar del sistema de diseño Siesa
+ *
+ * Componente para mostrar imágenes de usuario o iniciales con soporte para:
+ * - Tamaños: 4 (20px), 6 (24px), 8 (32px), 10 (40px)
+ * - Tipos: circular (completamente redondo) y rounded (esquinas redondeadas)
+ * - Imagen o iniciales
+ * - Dark mode completo
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Tipografía adaptativa según tamaño
+ * - Type safety con TypeScript estricto
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Con imagen
+ * <Avatar
+ *   src="/path/to/image.jpg"
+ *   alt="John Doe"
+ *   size="10"
+ *   type="circular"
+ * />
+ *
+ * // Con iniciales
+ * <Avatar
+ *   initials="JD"
+ *   size="10"
+ *   type="circular"
+ * />
+ * ```
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,MAAM,wGAmGlB,CAAC"}

package/dist/components/Avatar/Avatar.types.d.ts

@@ -0,0 +1,46 @@
+import type { ImgHTMLAttributes } from 'react';
+/**
+ * Tamaños del Avatar
+ * Basado en el sistema de espaciado de Siesa
+ */
+export type AvatarSize = '4' | '6' | '8' | '10';
+/**
+ * Tipo de forma del Avatar
+ */
+export type AvatarType = 'circular' | 'rounded';
+/**
+ * Props del componente Avatar
+ */
+export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size'> {
+    /**
+     * Tamaño del avatar
+     * - 4: 20px
+     * - 6: 24px
+     * - 8: 32px
+     * - 10: 40px
+     * @default '10'
+     */
+    size?: AvatarSize;
+    /**
+     * Tipo de forma del avatar
+     * @default 'circular'
+     */
+    type?: AvatarType;
+    /**
+     * URL de la imagen del avatar
+     */
+    src?: string;
+    /**
+     * Texto alternativo para la imagen
+     */
+    alt?: string;
+    /**
+     * Iniciales a mostrar cuando no hay imagen
+     */
+    initials?: string;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+//# sourceMappingURL=Avatar.types.d.ts.map

package/dist/components/Avatar/Avatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACpF;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,42 @@
+import type { BadgeProps } from './Badge.types';
+/**
+ * Badge del sistema de diseño Siesa
+ *
+ * Componente para mostrar etiquetas con múltiples variantes de color.
+ * Los badges mantienen sus colores vibrantes en light y dark mode para
+ * garantizar visibilidad y consistencia visual.
+ *
+ * Características implementadas:
+ * - 21 variantes de color (zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, primary, secondary, tertiary)
+ * - Icono opcional a la izquierda (12x12px)
+ * - Contador/notification badge opcional
+ * - Estados hover con transiciones suaves
+ * - Los colores se mantienen vibrantes en dark mode (según diseño Figma)
+ * - Tipografía: Label Tiny (12px Bold)
+ *
+ * Mejores prácticas implementadas:
+ * - Tokens de color de Tailwind estándar para badges
+ * - Font-family explícita (SiesaBT via font-sans)
+ * - Transiciones suaves (duration-200)
+ * - Estructura clara y mantenible
+ *
+ * @see docs/typography.md - Sistema tipográfico (Label Tiny)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4130-9382
+ *
+ * @example
+ * ```tsx
+ * // Badge simple
+ * <Badge color="blue" label="Label" />
+ *
+ * // Badge con icono
+ * <Badge color="green" label="Success" leftIcon={<CheckIcon />} />
+ *
+ * // Badge con contador
+ * <Badge color="red" label="Errors" count={5} />
+ *
+ * // Badge completo
+ * <Badge color="primary" label="Messages" leftIcon={<MailIcon />} count={12} />
+ * ```
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# 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,KAAK,EAAE,UAAU,EAAc,MAAM,eAAe,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,KAAK,uGAyOjB,CAAC"}

package/dist/components/Badge/Badge.types.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+/**
+ * Variantes de color del Badge
+ */
+export type BadgeColor = 'zinc' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'primary' | 'secondary' | 'tertiary';
+/**
+ * Props del componente Badge
+ */
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Color del badge
+     * @default 'zinc'
+     */
+    color?: BadgeColor;
+    /**
+     * Icono opcional a la izquierda
+     */
+    leftIcon?: ReactElement;
+    /**
+     * Texto del badge
+     */
+    label: string;
+    /**
+     * Número para el notification badge (opcional)
+     */
+    count?: number;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+//# sourceMappingURL=Badge.types.d.ts.map

package/dist/components/Badge/Badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,KAAK,GACL,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,UAAU,CAAC;AAEf;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import type { ButtonProps } from './Button.types';
+/**
+ * Componente Button del sistema de diseño Siesa
+ *
+ * Implementación pixel-perfect basada en Figma (node 4001-17240)
+ * con soporte completo para todos los estados, tamaños y variantes.
+ *
+ * **Variantes (type):**
+ * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)
+ *   - Sombra interna para efecto de profundidad
+ *   - Usar para acciones principales (Guardar, Enviar, Confirmar)
+ * - `outline`: Botón secundario con borde (#93d1fd) y shadow-sm
+ *   - Usar para acciones secundarias (Cancelar, Volver)
+ * - `plain`: Botón terciario sin borde visible
+ *   - Hover overlay sutil
+ *   - Usar para acciones sutiles (Cerrar, Ver más, Links)
+ *
+ * **Tamaños (size):**
+ * - `xs` (24px): Espacios muy compactos, inline actions. Padding: 8px h, 4px v
+ * - `sm` (28px): Barras de herramientas, acciones secundarias. Padding: 8px h, 4px v
+ * - `base` (32px): Tamaño estándar para la mayoría de casos. Padding: 10px h, 6px v
+ * - `l` (36px): Botones destacados, CTAs. Padding: 12px h, 8px v
+ * - `xl` (40px): Heroes, landing pages. Padding: 16px h, 8px v
+ *
+ * **Estados:**
+ * - `default`: Estado normal con colores base
+ * - `hover`: Overlay visual sutil (bg-primary-custom-500 para default)
+ * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)
+ * - `active`: Scale animation (scale-95) para feedback táctil
+ * - `disabled`: Opacity 50% con pointer-events-none
+ *
+ * **Badges de notificación:**
+ * - `badge`: Muestra un dot de notificación en la esquina superior derecha
+ * - `badgeCount`: Muestra un badge con número (99+ para >99)
+ * - `badgeColor`: Color del badge (por defecto: red - #b91c1c)
+ *
+ * **Especificaciones de Figma:**
+ * - Border radius: 6px (rounded-md)
+ * - Tipografía: Label Small (14px Bold) para sm/base/l/xl, Label Tiny (12px Bold) para xs
+ * - Iconos: 16x16px en todos los tamaños
+ * - Gap entre elementos: 8px (xs/sm/base), 12px (l/xl)
+ *
+ * **Dark Mode:**
+ * Los botones invierten colores en dark mode:
+ * - Default: fondo celeste claro (#bfe2fe), texto azul (#0e79fd), borde celeste (#93d1fd)
+ * - Outline: texto celeste (#93d1fd), borde azul (#0f6ae3)
+ * - Plain: texto celeste (#93d1fd), hover overlay blanco 20%
+ * - Focus ring adaptativo con offset oscuro
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/shadows.md - Sistema de sombras (shadow-button-inset, shadow-sm)
+ * @see docs/typography.md - Sistema tipográfico (Label Small/Tiny)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * // Botón primario con icono
+ * <Button type="default" size="base" leftIcon={<SaveIcon />}>
+ *   Guardar
+ * </Button>
+ *
+ * // Botón secundario
+ * <Button type="outline" size="base">
+ *   Cancelar
+ * </Button>
+ *
+ * // Botón solo icono para barra de herramientas
+ * <Button type="plain" size="sm" iconOnly leftIcon={<CloseIcon />} ariaLabel="Cerrar" />
+ *
+ * // Botón con badge de notificación (dot)
+ * <Button type="default" size="base" badge>
+ *   Notificaciones
+ * </Button>
+ *
+ * // Botón con badge contador
+ * <Button type="default" size="base" badgeCount={5} badgeColor="red">
+ *   Mensajes
+ * </Button>
+ * ```
+ */
+export declare const Button: React.FC<ButtonProps>;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6PxC,CAAC"}

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,162 @@
+import type { ReactNode } from 'react';
+import type { BadgeColor } from '../Badge/Badge.types';
+/**
+ * Tipo de botón según el sistema de diseño Siesa (Figma node 4001-17240)
+ *
+ * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)
+ *   - Background: primary-custom-600 (#0e79fd)
+ *   - Border: primary-inverse-border (#3c9bf6)
+ *   - Text: primary-inverse-content (#eff8ff)
+ *   - Sombra interna: shadow-button-inset
+ *
+ * - `outline`: Botón secundario con borde, sin fondo
+ *   - Background: transparent
+ *   - Border: primary-custom-300 (#93d1fd)
+ *   - Text: primary-custom-600 (#0e79fd)
+ *   - Sombra: shadow-sm
+ *
+ * - `plain`: Botón terciario sin borde visible (hover overlay)
+ *   - Background: transparent
+ *   - Border: transparent
+ *   - Text: primary-custom-600 (#0e79fd)
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
+ */
+export type ButtonType = 'default' | 'outline' | 'plain';
+/**
+ * Tamaños de botón según especificaciones de Figma (node 4001-17240)
+ *
+ * | Size | Height | Padding H | Padding V | Gap  | Font Size  |
+ * |------|--------|-----------|-----------|------|------------|
+ * | xs   | 24px   | 8px       | 4px       | 8px  | 12px (xs)  |
+ * | sm   | 28px   | 8px       | 4px       | 8px  | 14px (sm)  |
+ * | base | 32px   | 10px      | 6px       | 8px  | 14px (sm)  |
+ * | l    | 36px   | 12px      | 8px       | 12px | 14px (sm)  |
+ * | xl   | 40px   | 16px      | 8px       | 12px | 14px (sm)  |
+ *
+ * Icon-only buttons son cuadrados perfectos con el mismo width y height.
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
+ */
+export type ButtonSize = 'xs' | 'sm' | 'base' | 'l' | 'xl';
+/**
+ * Estados del botón según especificaciones de Figma
+ *
+ * - `default`: Estado normal con colores base
+ * - `hover`: Overlay visual (bg-primary-custom-500 para default, bg-hover-overlay para plain)
+ * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)
+ * - `disabled`: Opacity 50% con pointer-events-none
+ *
+ * @note Los estados hover y focus son manejados automáticamente por CSS.
+ */
+export type ButtonState = 'default' | 'hover' | 'focus' | 'disabled';
+/**
+ * Props del componente Button
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
+ */
+export interface ButtonProps {
+    /**
+     * Tipo de botón (visual) - determina la jerarquía y estilo del botón
+     *
+     * - `default`: Acción principal (Guardar, Enviar, Confirmar)
+     * - `outline`: Acción secundaria (Cancelar, Volver)
+     * - `plain`: Acción terciaria (Cerrar, Ver más, Links)
+     *
+     * @default 'default'
+     */
+    type?: ButtonType;
+    /**
+     * Tamaño del botón - determina altura, padding y tipografía
+     *
+     * - `xs`: 24px - Espacios muy compactos, inline actions
+     * - `sm`: 28px - Barras de herramientas, acciones secundarias
+     * - `base`: 32px - Tamaño estándar para la mayoría de casos
+     * - `l`: 36px - Botones destacados, CTAs
+     * - `xl`: 40px - Heroes, landing pages
+     *
+     * @default 'base'
+     */
+    size?: ButtonSize;
+    /**
+     * Si true, el botón solo muestra iconos (sin texto)
+     * El botón se vuelve cuadrado perfecto (width = height)
+     *
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Icono a mostrar antes del texto (izquierda)
+     * Todos los iconos son 16x16px según especificaciones de Figma
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Icono a mostrar después del texto (derecha)
+     * Todos los iconos son 16x16px según especificaciones de Figma
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Contenido del botón (texto o elementos React)
+     */
+    children?: ReactNode;
+    /**
+     * Si el botón está deshabilitado
+     * Aplica opacity: 50% y pointer-events: none
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Clases CSS adicionales para personalización
+     */
+    className?: string;
+    /**
+     * Función callback ejecutada al hacer click
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Tipo de botón HTML (comportamiento de formulario)
+     *
+     * - `button`: Botón normal (no envía formularios)
+     * - `submit`: Envía el formulario al hacer click
+     * - `reset`: Resetea el formulario al hacer click
+     *
+     * @default 'button'
+     */
+    htmlType?: 'button' | 'submit' | 'reset';
+    /**
+     * Si el botón ocupa todo el ancho disponible de su contenedor
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Etiqueta accesible para lectores de pantalla
+     * **Requerido** para botones iconOnly para accesibilidad
+     */
+    ariaLabel?: string;
+    /**
+     * Si true, muestra un badge de notificación (dot) en la esquina superior derecha
+     *
+     * @default false
+     */
+    badge?: boolean;
+    /**
+     * Número a mostrar en el badge de notificación
+     * Si se proporciona, muestra un badge con contador en lugar de un dot
+     * Números mayores a 99 se muestran como "99+"
+     */
+    badgeCount?: number;
+    /**
+     * Color del badge de notificación
+     * Usa los colores del sistema de diseño
+     *
+     * @default 'red' (content-extensions-red: #b91c1c)
+     */
+    badgeColor?: BadgeColor;
+    /**
+     * Atributos HTML adicionales para el elemento button
+     */
+    [key: string]: unknown;
+}
+//# sourceMappingURL=Button.types.d.ts.map

package/dist/components/Button/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC;AAE3D;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

package/dist/components/Button/icons.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+interface IconProps {
+    className?: string;
+}
+/**
+ * Icono Plus (heroicons-micro/plus)
+ */
+export declare const PlusIcon: React.FC<IconProps>;
+/**
+ * Icono ChevronDown (heroicons-micro/chevron-down)
+ */
+export declare const ChevronDownIcon: React.FC<IconProps>;
+/**
+ * Icono ArrowRight (heroicons-micro/arrow-right)
+ */
+export declare const ArrowRightIcon: React.FC<IconProps>;
+/**
+ * Icono Check (heroicons-micro/check)
+ */
+export declare const CheckIcon: React.FC<IconProps>;
+/**
+ * Icono X (heroicons-micro/x-mark)
+ */
+export declare const XIcon: React.FC<IconProps>;
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/Button/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Button/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CASxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAa/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAa9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAazC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CASrC,CAAC"}

package/{src/components/Button/index.ts → dist/components/Button/index.d.ts}

@@ -1,3 +1,4 @@
-export { Button } from './Button';
-export type { ButtonProps, ButtonType, ButtonSize, ButtonState } from './Button.types';
-export { PlusIcon, ChevronDownIcon, ArrowRightIcon, CheckIcon, XIcon } from './icons';
+export { Button } from './Button';
+export type { ButtonProps, ButtonType, ButtonSize, ButtonState } from './Button.types';
+export { PlusIcon, ChevronDownIcon, ArrowRightIcon, CheckIcon, XIcon } from './icons';
+//# sourceMappingURL=index.d.ts.map