siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Button/Button.tsx

@@ -1,337 +0,0 @@
-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 const Button: React.FC<ButtonProps> = ({
-  type = 'default',
-  size = 'base',
-  iconOnly = false,
-  leftIcon,
-  rightIcon,
-  children,
-  disabled = false,
-  className = '',
-  onClick,
-  htmlType = 'button',
-  fullWidth = false,
-  ariaLabel,
-  badge = false,
-  badgeCount,
-  badgeColor = 'red',
-  ...rest
-}) => {
-  // ===== CLASES DE TAMAÑO =====
-  const sizeClasses = {
-    xs: iconOnly ? 'h-6 w-6 p-1' : 'h-6 py-1 px-2 gap-2',
-    sm: iconOnly ? 'h-7 w-7 p-1.5' : 'h-7 py-1 px-2 gap-2',
-    base: iconOnly ? 'h-8 w-8 p-2' : 'h-8 py-1.5 px-2.5 gap-2',
-    l: iconOnly ? 'h-9 w-9 p-2.5' : 'h-9 py-2 px-3 gap-3',
-    xl: iconOnly ? 'h-10 w-10 p-3' : 'h-10 py-2 px-4 gap-3',
-  };
-
-  // ===== CLASES DE TAMAÑO DE ICONO =====
-  const iconSizeClasses = {
-    xs: 'w-4 h-4',
-    sm: 'w-4 h-4',
-    base: 'w-4 h-4',
-    l: 'w-4 h-4',
-    xl: 'w-4 h-4',
-  };
-
-  // ===== CLASES DE TAMAÑO DE TEXTO =====
-  // Usando el sistema de tipografía Label del design system (typography.md)
-  const textSizeClasses = {
-    xs: 'text-xs',   // Label Tiny - 12px
-    sm: 'text-sm',   // Label Small - 14px
-    base: 'text-sm', // Label Small - 14px (default para base)
-    l: 'text-sm',    // Label Small - 14px (corregido según Figma)
-    xl: 'text-sm',   // Label Small - 14px (corregido según Figma)
-  };
-
-  // ===== CLASES DE TIPO (Default, Outline, Plain) =====
-  // Especificaciones de Figma node 4001-17240
-  // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
-  // Dark mode: Los botones invierten colores (fondo claro, texto oscuro)
-  // - Light: fondo #0e79fd (azul), texto #eff8ff (blanco)
-  // - Dark: fondo #bfe2fe (celeste claro), texto #0e79fd (azul)
-  const typeClasses = {
-    default: `
-      bg-primary-custom-600
-      text-primary-inverse-content
-      border
-      border-primary-inverse-border
-      shadow-button-inset
-      hover:bg-primary-custom-500
-      active:scale-95
-      transition-all
-      duration-150
-      dark:bg-dark-bg-inverse
-      dark:text-dark-content-inverse
-      dark:border-dark-border-inverse
-      dark:hover:bg-dark-bg-inverse/90
-    `,
-    outline: `
-      bg-transparent
-      text-primary-custom-600
-      border
-      border-primary-custom-300
-      shadow-sm
-      hover:bg-primary-custom-100
-      active:scale-95
-      transition-all
-      duration-150
-      dark:text-dark-content-custom
-      dark:border-dark-border-custom
-      dark:hover:bg-dark-bg-custom/20
-    `,
-    plain: `
-      bg-transparent
-      text-primary-custom-600
-      border
-      border-transparent
-      hover:bg-hover-overlay
-      active:scale-95
-      transition-all
-      duration-150
-      dark:text-dark-content-custom
-      dark:hover:bg-hover-overlay-dark
-    `,
-  };
-
-  // ===== CLASES BASE =====
-  // Especificaciones de Figma: Focus ring = 4px spread primary-custom-400 + 2px offset primary-custom-100
-  // Dark mode: Focus ring adaptativo con offset oscuro
-  const baseClasses = `
-    inline-flex
-    items-center
-    justify-center
-    rounded-md
-    font-bold
-    whitespace-nowrap
-    focus:outline-none
-    focus:ring-4
-    focus:ring-primary-custom-400
-    focus:ring-offset-2
-    focus:ring-offset-primary-custom-100
-    dark:focus:ring-dark-border-custom
-    dark:focus:ring-offset-dark-bg-primary
-    disabled:opacity-50
-    disabled:cursor-not-allowed
-    disabled:pointer-events-none
-  `;
-
-  // ===== CLASE FULL WIDTH =====
-  const widthClass = fullWidth ? 'w-full' : '';
-
-  // ===== COMBINAR TODAS LAS CLASES =====
-  const buttonClasses = [
-    baseClasses,
-    sizeClasses[size],
-    typeClasses[type],
-    widthClass,
-    className,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== RENDERIZAR ICONO =====
-  const renderIcon = (icon: React.ReactNode) => {
-    if (!icon) return null;
-    return (
-      <span className={`inline-flex items-center justify-center ${iconSizeClasses[size]}`}>
-        {icon}
-      </span>
-    );
-  };
-
-  // ===== RENDERIZAR CONTENIDO =====
-  const renderContent = () => {
-    // Si es iconOnly, solo mostrar leftIcon
-    if (iconOnly) {
-      return renderIcon(leftIcon);
-    }
-
-    // Si tiene texto y/o iconos
-    return (
-      <>
-        {leftIcon && renderIcon(leftIcon)}
-        {children && <span className={textSizeClasses[size]}>{children}</span>}
-        {rightIcon && renderIcon(rightIcon)}
-      </>
-    );
-  };
-
-  // ===== MAPA DE COLORES DE BADGE =====
-  // Basado en el componente Badge existente
-  const badgeColorClasses: Record<string, { bg: string; text: string }> = {
-    zinc: { bg: 'bg-zinc-600', text: 'text-white' },
-    red: { bg: 'bg-red-700', text: 'text-white' },
-    orange: { bg: 'bg-orange-700', text: 'text-white' },
-    amber: { bg: 'bg-amber-700', text: 'text-white' },
-    yellow: { bg: 'bg-yellow-700', text: 'text-white' },
-    lime: { bg: 'bg-lime-700', text: 'text-white' },
-    green: { bg: 'bg-green-700', text: 'text-white' },
-    emerald: { bg: 'bg-emerald-700', text: 'text-white' },
-    teal: { bg: 'bg-teal-700', text: 'text-white' },
-    cyan: { bg: 'bg-cyan-700', text: 'text-white' },
-    sky: { bg: 'bg-sky-700', text: 'text-white' },
-    blue: { bg: 'bg-blue-700', text: 'text-white' },
-    indigo: { bg: 'bg-indigo-700', text: 'text-white' },
-    violet: { bg: 'bg-violet-700', text: 'text-white' },
-    purple: { bg: 'bg-purple-700', text: 'text-white' },
-    fuchsia: { bg: 'bg-fuchsia-700', text: 'text-white' },
-    pink: { bg: 'bg-pink-700', text: 'text-white' },
-    rose: { bg: 'bg-rose-700', text: 'text-white' },
-    primary: { bg: 'bg-primary-custom-600', text: 'text-white' },
-    secondary: { bg: 'bg-zinc-600', text: 'text-white' },
-    tertiary: { bg: 'bg-zinc-600', text: 'text-white' },
-  };
-
-  const badgeColors = badgeColorClasses[badgeColor] || badgeColorClasses.red;
-
-  // ===== RENDERIZAR BADGE =====
-  const renderBadge = () => {
-    // Si no hay badge ni badgeCount, no renderizar nada
-    if (!badge && badgeCount === undefined) return null;
-
-    // Si hay badgeCount, renderizar badge con número
-    if (badgeCount !== undefined) {
-      return (
-        <span
-          className={`
-            absolute
-            -top-1
-            -right-1
-            flex
-            items-center
-            justify-center
-            min-w-[16px]
-            h-4
-            px-1
-            rounded-full
-            text-[10px]
-            font-bold
-            leading-none
-            ${badgeColors.bg}
-            ${badgeColors.text}
-            pointer-events-none
-          `.trim().replace(/\s+/g, ' ')}
-          aria-label={`${badgeCount} notificaciones`}
-        >
-          {badgeCount > 99 ? '99+' : badgeCount}
-        </span>
-      );
-    }
-
-    // Si solo hay badge (sin número), renderizar dot
-    return (
-      <span
-        className={`
-          absolute
-          -top-1
-          -right-1
-          w-2
-          h-2
-          rounded-full
-          ${badgeColors.bg}
-          pointer-events-none
-        `.trim().replace(/\s+/g, ' ')}
-        aria-label="Notificación"
-      />
-    );
-  };
-
-  return (
-    <button
-      type={htmlType}
-      className={`${buttonClasses} ${(badge || badgeCount !== undefined) ? 'relative' : ''}`}
-      disabled={disabled}
-      onClick={onClick}
-      aria-label={ariaLabel}
-      {...rest}
-    >
-      {renderContent()}
-      {renderBadge()}
-    </button>
-  );
-};

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

@@ -1,180 +0,0 @@
-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 +0,0 @@
-import React from 'react';
-
-interface IconProps {
-  className?: string;
-}
-
-/**
- * Icono Plus (heroicons-micro/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>
-);
-
-/**
- * Icono ChevronDown (heroicons-micro/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>
-);
-
-/**
- * Icono ArrowRight (heroicons-micro/arrow-right)
- */
-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>
-);
-
-/**
- * Icono Check (heroicons-micro/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>
-);
-
-/**
- * Icono X (heroicons-micro/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>
-);