siesa-ui-kit 1.0.6 → 1.0.8

package/README.md

@@ -1,89 +1,115 @@
-# 🎨 Siesa UI Kit
-
-Sistema de componentes de interfaz moderno con React, TypeScript y Tailwind CSS. Construido con un sistema de diseño completo que incluye dark mode, tokens consistentes y documentación interactiva.
-
-## 🚀 Inicio Rápido
-
-```bash
-# Instalar dependencias
-npm install
-
-# Iniciar Storybook (documentación interactiva)
-npm run storybook
-
-# Construir para producción
-npm run build
-
-# Construir Storybook para producción
-npm run build-storybook
-```
-
-## 🛠️ Tecnologías
-
-- **React 19** - Framework UI
-- **TypeScript 5** - Tipado estático
-- **Tailwind CSS 3.4** - Sistema de estilos
-- **Storybook 10** - Documentación de componentes
-- **Vite 7** - Build tool
-
-## 📖 Storybook
-
-Este proyecto utiliza **Storybook** como herramienta principal para:
-
-- 📦 Desarrollar componentes de forma aislada
-- 🎨 Visualizar todos los estados y variantes
-- 📝 Documentar props y ejemplos de uso
-- 🧪 Probar componentes interactivamente
-- 🌓 Verificar dark mode y accesibilidad
-
-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
-
-## 📚 Documentación del Sistema
-
-En la carpeta `docs/` encontrarás guías detalladas sobre:
-
-- `colors.md` - Paleta de colores y tokens
-- `typography.md` - Sistema tipográfico
-- `spacing.md` - Escala de espaciado
-- `shadows.md` - Elevaciones y sombras
-- `dark-mode-guide.md` - Implementación de dark mode
-- `icons.md` - Sistema de íconos
-- `filters.md` - Filtros y efectos
-- `border-radius.md` - Bordes redondeados
-
-## 🎨 Diseño
-
-- [Figma Design System](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit)
-
----
-
-© 2025 Siesa
+# 🎨 Siesa UI Kit
+
+Sistema de componentes de interfaz moderno con React, TypeScript y Tailwind CSS. Construido con un sistema de diseño completo que incluye dark mode, tokens consistentes y documentación interactiva.
+
+## 🚀 Inicio Rápido
+
+```bash
+# Instalar dependencias
+npm install
+
+# Iniciar Storybook (documentación interactiva)
+npm run storybook
+
+# Construir para producción
+npm run build
+
+# Construir Storybook para producción
+npm run build-storybook
+```
+
+## 🛠️ Tecnologías
+
+- **React 19** - Framework UI
+- **TypeScript 5** - Tipado estático
+- **Tailwind CSS 3.4** - Sistema de estilos
+- **Storybook 10** - Documentación de componentes
+- **Vite 7** - Build tool
+
+## 📖 Storybook
+
+Este proyecto utiliza **Storybook** como herramienta principal para:
+
+- 📦 Desarrollar componentes de forma aislada
+- 🎨 Visualizar todos los estados y variantes
+- 📝 Documentar props y ejemplos de uso
+- 🧪 Probar componentes interactivamente
+- 🌓 Verificar dark mode y accesibilidad
+
+Accede a Storybook ejecutando `npm run storybook` y abriendo http://localhost:6006
+
+## 📁 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
+- `typography.md` - Sistema tipográfico
+- `spacing.md` - Escala de espaciado
+- `shadows.md` - Elevaciones y sombras
+- `dark-mode-guide.md` - Implementación de dark mode
+- `icons.md` - Sistema de íconos
+- `filters.md` - Filtros y efectos
+- `border-radius.md` - Bordes redondeados
+
+## 🎨 Diseño
+
+- [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-solid`: Botón secundario con borde (#93d1fd) y shadow-xs
+ *   - 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,EAAc,MAAM,gBAAgB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2QxC,CAAC"}