siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSNumberButton/POSNumberButton.tsx

@@ -1,179 +1,179 @@
-import React from 'react';
-import type { POSNumberButtonProps } from './POSNumberButton.types';
-
-/**
- * Componente POSNumberButton del sistema de diseño Siesa
- * Botón numérico especializado para sistemas POS (Point of Sale)
- *
- * Basado en especificaciones de Figma con Tailwind CSS
- *
- * **Características principales:**
- * - Diseñado para pantallas táctiles y POS
- * - Tipografía Display Tiny (48px Bold) para números grandes
- * - Tres tamaños: Small (40x40), Medium (65x65), Large (80x80)
- * - Opción de borde visible o sin borde
- * - Estados: Default, Hover, Active, Disabled
- * - Touch-friendly: active:scale-95 para feedback táctil
- *
- * **Variantes:**
- * - `border=false`: Botón sin borde, hover cambia a primary
- * - `border=true`: Botón con borde, hover resalta el borde
- *
- * **Tamaños:**
- * - `s` (40x40px): Compacto, para teclados numéricos pequeños
- * - `m` (65x65px): Mediano, tamaño intermedio
- * - `l` (80x80px): Grande, tamaño por defecto para POS
- *
- * **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
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels
- * - Feedback visual inmediato con active:scale-95
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico (Display Tiny)
- * @see docs/spacing.md - Sistema de espaciado
- * @see src/components/Button/Button.tsx - Componente Button de referencia
- *
- * @example
- * ```tsx
- * // Botón numérico grande (POS)
- * <POSNumberButton size="l">1</POSNumberButton>
- *
- * // Botón con borde
- * <POSNumberButton size="l" border>2</POSNumberButton>
- *
- * // Botón compacto
- * <POSNumberButton size="s">3</POSNumberButton>
- *
- * // Teclado numérico completo
- * <div className="grid grid-cols-3 gap-2">
- *   {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
- *     <POSNumberButton key={num} size="m" onClick={() => handleInput(num)}>
- *       {num}
- *     </POSNumberButton>
- *   ))}
- * </div>
- * ```
- */
-export const POSNumberButton: React.FC<POSNumberButtonProps> = ({
-  size = 'l',
-  border = false,
-  children,
-  disabled = false,
-  className = '',
-  onClick,
-  ariaLabel,
-  htmlType = 'button',
-  ...rest
-}) => {
-  // ===== CLASES DE TAMAÑO =====
-  // Basado en especificaciones de Figma: L=80x80, M=65x65, S=40x40
-  const sizeClasses = {
-    s: 'w-10 h-10', // 40x40px
-    m: 'w-[65px] h-[65px]', // 65x65px
-    l: 'w-20 h-20', // 80x80px
-  };
-
-  // ===== CLASES DE TEXTO =====
-  // Display Tiny (48px Bold) según typography.md → text-5xl
-  // Para tamaño small, reducimos a text-2xl (24px)
-  const textSizeClasses = {
-    s: 'text-2xl', // 24px para botones pequeños
-    m: 'text-5xl', // 48px Display Tiny
-    l: 'text-5xl', // 48px Display Tiny
-  };
-
-  // ===== CLASES DE ESTADO (Sin Borde) =====
-  const noBorderStateClasses = `
-    bg-white
-    text-content-primary
-    hover:bg-primary-custom-600
-    hover:text-primary-inverse-content
-    active:bg-primary-custom-600
-    active:text-primary-inverse-content
-    active:scale-95
-    dark:bg-dark-bg-primary
-    dark:text-dark-content-primary
-    dark:hover:bg-dark-bg-inverse
-    dark:hover:text-dark-content-inverse
-    dark:active:bg-dark-bg-inverse
-    dark:active:text-dark-content-inverse
-    dark:active:scale-95
-  `;
-
-  // ===== CLASES DE ESTADO (Con Borde) =====
-  const withBorderStateClasses = `
-    bg-white
-    text-content-primary
-    border
-    border-border-primary
-    hover:bg-primary-custom-600
-    hover:text-primary-inverse-content
-    hover:border-primary-inverse-border
-    active:bg-primary-custom-600
-    active:text-primary-inverse-content
-    active:border-primary-inverse-border
-    active:scale-95
-    dark:bg-dark-bg-primary
-    dark:text-dark-content-primary
-    dark:border-dark-border-primary
-    dark:hover:bg-dark-bg-inverse
-    dark:hover:text-dark-content-inverse
-    dark:hover:border-primary-inverse-border
-    dark:active:bg-dark-bg-inverse
-    dark:active:text-dark-content-inverse
-    dark:active:border-primary-inverse-border
-    dark:active:scale-95
-  `;
-
-  // ===== CLASES BASE =====
-  const baseClasses = `
-    inline-flex
-    items-center
-    justify-center
-    rounded-lg
-    font-bold
-    tracking-tighter
-    whitespace-nowrap
-    cursor-pointer
-    focus:outline-none
-    focus:ring-2
-    focus:ring-primary-custom-400
-    focus:ring-offset-2
-    dark:focus:ring-dark-border-custom
-    dark:focus:ring-offset-dark-bg-primary
-    disabled:opacity-50
-    disabled:cursor-not-allowed
-    disabled:pointer-events-none
-    transition-all
-    duration-150
-  `;
-
-  // ===== COMBINAR TODAS LAS CLASES =====
-  const buttonClasses = [
-    baseClasses,
-    sizeClasses[size],
-    textSizeClasses[size],
-    border ? withBorderStateClasses : noBorderStateClasses,
-    className,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <button
-      type={htmlType}
-      className={buttonClasses}
-      disabled={disabled}
-      onClick={onClick}
-      aria-label={ariaLabel || `Número ${children}`}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-};
+import React from 'react';
+import type { POSNumberButtonProps } from './POSNumberButton.types';
+
+/**
+ * Componente POSNumberButton del sistema de diseño Siesa
+ * Botón numérico especializado para sistemas POS (Point of Sale)
+ *
+ * Basado en especificaciones de Figma con Tailwind CSS
+ *
+ * **Características principales:**
+ * - Diseñado para pantallas táctiles y POS
+ * - Tipografía Display Tiny (48px Bold) para números grandes
+ * - Tres tamaños: Small (40x40), Medium (65x65), Large (80x80)
+ * - Opción de borde visible o sin borde
+ * - Estados: Default, Hover, Active, Disabled
+ * - Touch-friendly: active:scale-95 para feedback táctil
+ *
+ * **Variantes:**
+ * - `border=false`: Botón sin borde, hover cambia a primary
+ * - `border=true`: Botón con borde, hover resalta el borde
+ *
+ * **Tamaños:**
+ * - `s` (40x40px): Compacto, para teclados numéricos pequeños
+ * - `m` (65x65px): Mediano, tamaño intermedio
+ * - `l` (80x80px): Grande, tamaño por defecto para POS
+ *
+ * **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
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ * - Feedback visual inmediato con active:scale-95
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Display Tiny)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see src/components/Button/Button.tsx - Componente Button de referencia
+ *
+ * @example
+ * ```tsx
+ * // Botón numérico grande (POS)
+ * <POSNumberButton size="l">1</POSNumberButton>
+ *
+ * // Botón con borde
+ * <POSNumberButton size="l" border>2</POSNumberButton>
+ *
+ * // Botón compacto
+ * <POSNumberButton size="s">3</POSNumberButton>
+ *
+ * // Teclado numérico completo
+ * <div className="grid grid-cols-3 gap-2">
+ *   {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+ *     <POSNumberButton key={num} size="m" onClick={() => handleInput(num)}>
+ *       {num}
+ *     </POSNumberButton>
+ *   ))}
+ * </div>
+ * ```
+ */
+export const POSNumberButton: React.FC<POSNumberButtonProps> = ({
+  size = 'l',
+  border = false,
+  children,
+  disabled = false,
+  className = '',
+  onClick,
+  ariaLabel,
+  htmlType = 'button',
+  ...rest
+}) => {
+  // ===== CLASES DE TAMAÑO =====
+  // Basado en especificaciones de Figma: L=80x80, M=65x65, S=40x40
+  const sizeClasses = {
+    s: 'w-10 h-10', // 40x40px
+    m: 'w-[65px] h-[65px]', // 65x65px
+    l: 'w-20 h-20', // 80x80px
+  };
+
+  // ===== CLASES DE TEXTO =====
+  // Display Tiny (48px Bold) según typography.md → text-5xl
+  // Para tamaño small, reducimos a text-2xl (24px)
+  const textSizeClasses = {
+    s: 'text-2xl', // 24px para botones pequeños
+    m: 'text-5xl', // 48px Display Tiny
+    l: 'text-5xl', // 48px Display Tiny
+  };
+
+  // ===== CLASES DE ESTADO (Sin Borde) =====
+  const noBorderStateClasses = `
+    bg-white
+    text-content-primary
+    hover:bg-primary-custom-600
+    hover:text-primary-inverse-content
+    active:bg-primary-custom-600
+    active:text-primary-inverse-content
+    active:scale-95
+    dark:bg-dark-bg-primary
+    dark:text-dark-content-primary
+    dark:hover:bg-dark-bg-inverse
+    dark:hover:text-dark-content-inverse
+    dark:active:bg-dark-bg-inverse
+    dark:active:text-dark-content-inverse
+    dark:active:scale-95
+  `;
+
+  // ===== CLASES DE ESTADO (Con Borde) =====
+  const withBorderStateClasses = `
+    bg-white
+    text-content-primary
+    border
+    border-border-primary
+    hover:bg-primary-custom-600
+    hover:text-primary-inverse-content
+    hover:border-primary-inverse-border
+    active:bg-primary-custom-600
+    active:text-primary-inverse-content
+    active:border-primary-inverse-border
+    active:scale-95
+    dark:bg-dark-bg-primary
+    dark:text-dark-content-primary
+    dark:border-dark-border-primary
+    dark:hover:bg-dark-bg-inverse
+    dark:hover:text-dark-content-inverse
+    dark:hover:border-primary-inverse-border
+    dark:active:bg-dark-bg-inverse
+    dark:active:text-dark-content-inverse
+    dark:active:border-primary-inverse-border
+    dark:active:scale-95
+  `;
+
+  // ===== CLASES BASE =====
+  const baseClasses = `
+    inline-flex
+    items-center
+    justify-center
+    rounded-lg
+    font-bold
+    tracking-tighter
+    whitespace-nowrap
+    cursor-pointer
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    disabled:opacity-50
+    disabled:cursor-not-allowed
+    disabled:pointer-events-none
+    transition-all
+    duration-150
+  `;
+
+  // ===== COMBINAR TODAS LAS CLASES =====
+  const buttonClasses = [
+    baseClasses,
+    sizeClasses[size],
+    textSizeClasses[size],
+    border ? withBorderStateClasses : noBorderStateClasses,
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <button
+      type={htmlType}
+      className={buttonClasses}
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={ariaLabel || `Número ${children}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/POSNumberButton/POSNumberButton.types.ts

@@ -1,51 +1,51 @@
-// POSNumberButton.types.ts
-import type { ReactNode, MouseEvent } from 'react';
-
-/**
- * Props del componente POSNumberButton
- */
-export interface POSNumberButtonProps {
-  /**
-   * Tamaño del botón
-   * @default 'l'
-   */
-  size?: 's' | 'm' | 'l';
-
-  /**
-   * Si el botón tiene borde visible
-   * @default false
-   */
-  border?: boolean;
-
-  /**
-   * Contenido del botón (número o texto)
-   */
-  children: ReactNode;
-
-  /**
-   * Si el botón está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Handler para evento click
-   */
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-
-  /**
-   * Label para accesibilidad (ARIA)
-   */
-  ariaLabel?: string;
-
-  /**
-   * Tipo del botón HTML
-   * @default 'button'
-   */
-  htmlType?: 'button' | 'submit' | 'reset';
-}
+// POSNumberButton.types.ts
+import type { ReactNode, MouseEvent } from 'react';
+
+/**
+ * Props del componente POSNumberButton
+ */
+export interface POSNumberButtonProps {
+  /**
+   * Tamaño del botón
+   * @default 'l'
+   */
+  size?: 's' | 'm' | 'l';
+
+  /**
+   * Si el botón tiene borde visible
+   * @default false
+   */
+  border?: boolean;
+
+  /**
+   * Contenido del botón (número o texto)
+   */
+  children: ReactNode;
+
+  /**
+   * Si el botón está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Handler para evento click
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Label para accesibilidad (ARIA)
+   */
+  ariaLabel?: string;
+
+  /**
+   * Tipo del botón HTML
+   * @default 'button'
+   */
+  htmlType?: 'button' | 'submit' | 'reset';
+}