siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Button/Button.types.ts

@@ -1,180 +1,180 @@
-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;
-}
+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;
+}

package/src/components/Button/icons.tsx

@@ -1,87 +1,48 @@
 import React from 'react';
+import {
+  PlusIcon as HeroPlus,
+  ChevronDownIcon as HeroChevronDown,
+  ArrowRightIcon as HeroArrowRight,
+  CheckIcon as HeroCheck,
+  XMarkIcon as HeroXMark,
+} from '@heroicons/react/24/outline';
 
 interface IconProps {
   className?: string;
 }
 
 /**
- * Icono Plus (heroicons-micro/plus)
+ * Icono Plus (heroicons/plus)
  */
-export const PlusIcon: React.FC<IconProps> = ({ className = '' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
-  </svg>
+export const PlusIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroPlus className={className} aria-hidden="true" />
 );
 
 /**
- * Icono ChevronDown (heroicons-micro/chevron-down)
+ * Icono ChevronDown (heroicons/chevron-down)
  */
-export const ChevronDownIcon: React.FC<IconProps> = ({ className = '' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <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 ChevronDownIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroChevronDown className={className} aria-hidden="true" />
 );
 
 /**
- * Icono ArrowRight (heroicons-micro/arrow-right)
+ * Icono ArrowRight (heroicons/arrow-right)
+ * @param {string} className Clases de Tailwind
  */
-export const ArrowRightIcon: React.FC<IconProps> = ({ className = '' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path
-      fillRule="evenodd"
-      d="M2 8c0-.414.336-.75.75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
-      clipRule="evenodd"
-    />
-  </svg>
+export const ArrowRightIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroArrowRight className={className} aria-hidden="true" />
 );
 
 /**
- * Icono Check (heroicons-micro/check)
+ * Icono Check (heroicons/check)
  */
-export const CheckIcon: React.FC<IconProps> = ({ className = '' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path
-      fillRule="evenodd"
-      d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
-      clipRule="evenodd"
-    />
-  </svg>
+export const CheckIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroCheck className={className} aria-hidden="true" />
 );
 
 /**
- * Icono X (heroicons-micro/x-mark)
+ * Icono X (heroicons/x-mark)
  */
-export const XIcon: React.FC<IconProps> = ({ className = '' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
-  </svg>
+export const XIcon: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <HeroXMark className={className} aria-hidden="true" />
 );