siesa-ui-kit 1.0.0 → 1.0.2

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/claude/settings.local.json

@@ -1,61 +1,7 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(claude mcp add:*)",
-      "Bash(where:*)",
-      "Bash(set CLAUDE_CODE_GIT_BASH_PATH=C:UsersssanchezeAppDataLocalProgramsGitusrbinbash.exe)",
-      "Bash(setx CLAUDE_CODE_GIT_BASH_PATH \"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
-      "Bash($env:CLAUDE_CODE_GIT_BASH_PATH=\"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
-      "Bash(export CLAUDE_CODE_GIT_BASH_PATH=\"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
-      "Bash(claude mcp list:*)",
-      "Bash(claude mcp)",
-      "Bash(nul)",
-      "WebSearch",
-      "Bash(cmd /c npx -y figma-developer-mcp --help)",
-      "Bash(npx -y figma-developer-mcp:*)",
-      "Bash(claude mcp get:*)",
-      "Bash(npm install:*)",
-      "Bash(npx tailwindcss init:*)",
-      "Bash(npm run storybook:*)",
-      "Bash(taskkill:*)",
-      "Bash(npx kill-port:*)",
-      "Bash(cmd /c claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp)",
-      "Bash(dir \"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\")",
-      "Bash(dir /B:*)",
-      "WebFetch(domain:www.figma.com)",
-      "mcp__figma-desktop__get_design_context",
-      "mcp__figma-desktop__get_variable_defs",
-      "mcp__figma-desktop__get_screenshot",
-      "Bash(npm run build:*)",
-      "Bash(timeout 10 npm run dev:*)",
-      "Bash(npm run dev:*)",
-      "mcp__figma-desktop__get_metadata",
-      "Bash(netstat:*)",
-      "Bash(findstr:*)",
-      "WebFetch(domain:storybook.js.org)",
-      "Bash(if not exist docs mkdir docs)",
-      "Bash(npm uninstall:*)",
-      "Bash(move postcss.config.js postcss.config.cjs)",
-      "Bash(del .storybookpreview.ts)",
-      "Bash(python update_stories.py:*)",
-      "Bash(del update_stories.py)",
-      "Bash(timeout /t 15 /nobreak:*)",
-      "Bash(dir:*)",
-      "Bash(git mv:*)",
-      "mcp__figma__get_metadata",
-      "mcp__figma__get_design_context",
-      "mcp__figma__get_screenshot",
-      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\Navbar\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\Navbar\")",
-      "Bash(timeout:*)",
-      "Bash(ping:*)",
-      "Bash(if not exist \"public\" mkdir \"public\")",
-      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\NavigationRail\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\NavigationRail\")",
-      "Bash(mkdir:*)",
-      "Bash(find:*)",
-      "Bash(curl:*)",
-      "mcp__figma__get_variable_defs"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm login)"
+    ]
+  }
+}

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"}