siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSLocationButton/index.ts

@@ -0,0 +1,14 @@
+export { POSLocationButton } from './POSLocationButton';
+export type {
+  POSLocationButtonProps,
+  POSLocationStatus,
+  POSLocationState,
+  POSLocationCapacity,
+} from './POSLocationButton.types';
+export {
+  CheckIcon,
+  XMarkIcon,
+  CalendarIcon,
+  NoSymbolIcon,
+  UsersIcon,
+} from './icons';

package/src/components/POSNumberButton/POSNumberButton.stories.tsx

@@ -0,0 +1,415 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { POSNumberButton } from './POSNumberButton';
+
+const meta = {
+  title: 'Siesa UI Kit/POSNumberButton',
+  component: POSNumberButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Botón numérico especializado para sistemas POS (Point of Sale) con tipografía grande y estados touch-friendly.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['s', 'm', 'l'],
+      description: 'Tamaño del botón (s=40x40, m=65x65, l=80x80)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+        defaultValue: { summary: 'l' },
+      },
+    },
+    border: {
+      control: 'boolean',
+      description: 'Si el botón tiene borde visible',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'Apariencia',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Contenido del botón (número o texto)',
+      table: {
+        type: { summary: 'ReactNode' },
+        category: 'Contenido',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si el botón está deshabilitado',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'Estado',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Handler para evento click',
+      table: {
+        type: { summary: 'function' },
+        category: 'Eventos',
+      },
+    },
+  },
+} satisfies Meta<typeof POSNumberButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    size: 'l',
+    border: false,
+    children: '1',
+    disabled: false,
+  },
+};
+
+// ============================================
+// 2. TODAS LAS VARIANTES
+// ============================================
+export const TodasLasVariantes: Story = {
+  args: { children: '1' },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Tamaño Large */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Tamaño Large (80x80px)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <div className="space-y-2">
+            <p className="text-xs text-content-secondary dark:text-content-secondary">Sin Borde</p>
+            <POSNumberButton size="l" border={false}>1</POSNumberButton>
+          </div>
+          <div className="space-y-2">
+            <p className="text-xs text-content-secondary dark:text-content-secondary">Con Borde</p>
+            <POSNumberButton size="l" border={true}>2</POSNumberButton>
+          </div>
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Tamaño por defecto para sistemas POS
+        </p>
+      </div>
+
+      {/* Tamaño Medium */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Tamaño Medium (65x65px)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <div className="space-y-2">
+            <p className="text-xs text-content-secondary dark:text-content-secondary">Sin Borde</p>
+            <POSNumberButton size="m" border={false}>3</POSNumberButton>
+          </div>
+          <div className="space-y-2">
+            <p className="text-xs text-content-secondary dark:text-content-secondary">Con Borde</p>
+            <POSNumberButton size="m" border={true}>4</POSNumberButton>
+          </div>
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Tamaño intermedio para interfaces más compactas
+        </p>
+      </div>
+
+      {/* Tamaño Small */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Tamaño Small (40x40px)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <div className="space-y-2">
+            <p className="text-xs text-content-secondary dark:text-content-secondary">Sin Borde</p>
+            <POSNumberButton size="s" border={false}>5</POSNumberButton>
+          </div>
+          <div className="space-y-2">
+            <p className="text-xs text-content-secondary dark:text-content-secondary">Con Borde</p>
+            <POSNumberButton size="s" border={true}>6</POSNumberButton>
+          </div>
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Tamaño compacto para teclados numéricos pequeños
+        </p>
+      </div>
+
+      {/* Tips */}
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-content-primary dark:text-dark-content-primary">
+          <strong>💡 Consejos:</strong>
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">size="l"</code> para pantallas táctiles POS
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">border=true</code> para mejor separación visual
+          <br />• Los botones tienen feedback táctil con <code className="px-1 bg-white dark:bg-gray-700">active:scale-95</code>
+          <br />• Tipografía Display Tiny (48px Bold) optimizada para legibilidad
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. TECLADO NUMÉRICO COMPLETO
+// ============================================
+export const TecladoNumerico: Story = {
+  args: { children: '1' },
+  render: () => (
+    <div className="space-y-6 p-6">
+      <h3 className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+        Teclado Numérico POS
+      </h3>
+      <div className="grid grid-cols-3 gap-2 max-w-[260px]">
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+          <POSNumberButton
+            key={num}
+            size="l"
+            border={true}
+            onClick={() => console.log(`Número ${num} presionado`)}
+          >
+            {num}
+          </POSNumberButton>
+        ))}
+        <POSNumberButton size="l" border={true}>
+          .
+        </POSNumberButton>
+        <POSNumberButton size="l" border={true}>
+          0
+        </POSNumberButton>
+        <POSNumberButton size="l" border={true}>
+          ←
+        </POSNumberButton>
+      </div>
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Ejemplo de teclado numérico completo para sistema POS
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. ESTADOS
+// ============================================
+export const Estados: Story = {
+  args: { children: '1' },
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Normal
+        </h3>
+        <div className="flex gap-3">
+          <POSNumberButton size="l">1</POSNumberButton>
+          <POSNumberButton size="l" border>2</POSNumberButton>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Hover
+        </h3>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
+          Pasa el mouse sobre los botones para ver el efecto hover
+        </p>
+        <div className="flex gap-3">
+          <POSNumberButton size="l">3</POSNumberButton>
+          <POSNumberButton size="l" border>4</POSNumberButton>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Active (Presionado)
+        </h3>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
+          Presiona los botones para ver el efecto active con scale-95
+        </p>
+        <div className="flex gap-3">
+          <POSNumberButton size="l">5</POSNumberButton>
+          <POSNumberButton size="l" border>6</POSNumberButton>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Deshabilitado
+        </h3>
+        <div className="flex gap-3">
+          <POSNumberButton size="l" disabled>7</POSNumberButton>
+          <POSNumberButton size="l" border disabled>8</POSNumberButton>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Focus
+        </h3>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
+          Usa Tab para navegar y ver el focus ring
+        </p>
+        <div className="flex gap-3">
+          <POSNumberButton size="l">9</POSNumberButton>
+          <POSNumberButton size="l" border>0</POSNumberButton>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. COMPARACIÓN DE TAMAÑOS
+// ============================================
+export const ComparacionDeTamanos: Story = {
+  args: { children: '1' },
+  render: () => (
+    <div className="space-y-6 p-6">
+      <h3 className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+        Todos los Tamaños - Sin Borde
+      </h3>
+      <div className="flex items-end gap-4">
+        <div className="space-y-2 text-center">
+          <POSNumberButton size="s" border={false}>1</POSNumberButton>
+          <p className="text-xs text-content-secondary dark:text-content-secondary">Small<br />40x40px</p>
+        </div>
+        <div className="space-y-2 text-center">
+          <POSNumberButton size="m" border={false}>2</POSNumberButton>
+          <p className="text-xs text-content-secondary dark:text-content-secondary">Medium<br />65x65px</p>
+        </div>
+        <div className="space-y-2 text-center">
+          <POSNumberButton size="l" border={false}>3</POSNumberButton>
+          <p className="text-xs text-content-secondary dark:text-content-secondary">Large<br />80x80px</p>
+        </div>
+      </div>
+
+      <h3 className="text-sm font-bold text-content-primary dark:text-dark-content-primary mt-8">
+        Todos los Tamaños - Con Borde
+      </h3>
+      <div className="flex items-end gap-4">
+        <div className="space-y-2 text-center">
+          <POSNumberButton size="s" border={true}>4</POSNumberButton>
+          <p className="text-xs text-content-secondary dark:text-content-secondary">Small<br />40x40px</p>
+        </div>
+        <div className="space-y-2 text-center">
+          <POSNumberButton size="m" border={true}>5</POSNumberButton>
+          <p className="text-xs text-content-secondary dark:text-content-secondary">Medium<br />65x65px</p>
+        </div>
+        <div className="space-y-2 text-center">
+          <POSNumberButton size="l" border={true}>6</POSNumberButton>
+          <p className="text-xs text-content-secondary dark:text-content-secondary">Large<br />80x80px</p>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. TECLADO COMPACTO
+// ============================================
+export const TecladoCompacto: Story = {
+  args: { children: '1' },
+  render: () => (
+    <div className="space-y-6 p-6">
+      <h3 className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+        Teclado Numérico Compacto (Medium)
+      </h3>
+      <div className="grid grid-cols-3 gap-2 max-w-[211px]">
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0, '←'].map((num, idx) => (
+          <POSNumberButton
+            key={idx}
+            size="m"
+            border={false}
+            onClick={() => console.log(`Tecla ${num} presionada`)}
+          >
+            {num}
+          </POSNumberButton>
+        ))}
+      </div>
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Versión compacta ideal para tablets y pantallas medianas
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. TECLADO MINI
+// ============================================
+export const TecladoMini: Story = {
+  args: { children: '1' },
+  render: () => (
+    <div className="space-y-6 p-6">
+      <h3 className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+        Teclado Numérico Mini (Small)
+      </h3>
+      <div className="grid grid-cols-3 gap-2 max-w-[136px]">
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0, '←'].map((num, idx) => (
+          <POSNumberButton
+            key={idx}
+            size="s"
+            border={true}
+            onClick={() => console.log(`Tecla ${num} presionada`)}
+          >
+            {num}
+          </POSNumberButton>
+        ))}
+      </div>
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Versión mini ideal para espacios reducidos o calculadoras
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 8. OPERACIONES MATEMÁTICAS
+// ============================================
+export const OperacionesMatematicas: Story = {
+  args: { children: '1' },
+  render: () => (
+    <div className="space-y-6 p-6">
+      <h3 className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+        Calculadora POS
+      </h3>
+      <div className="flex gap-4">
+        {/* Números */}
+        <div className="grid grid-cols-3 gap-2">
+          {[7, 8, 9, 4, 5, 6, 1, 2, 3, 0].map((num) => (
+            <POSNumberButton
+              key={num}
+              size="m"
+              border={true}
+              onClick={() => console.log(`Número ${num}`)}
+            >
+              {num}
+            </POSNumberButton>
+          ))}
+        </div>
+
+        {/* Operadores */}
+        <div className="grid grid-cols-1 gap-2">
+          {['+', '-', '×', '÷', '='].map((op) => (
+            <POSNumberButton
+              key={op}
+              size="m"
+              border={true}
+              onClick={() => console.log(`Operador ${op}`)}
+            >
+              {op}
+            </POSNumberButton>
+          ))}
+        </div>
+      </div>
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Ejemplo de calculadora POS con números y operadores
+      </p>
+    </div>
+  ),
+};

package/src/components/POSNumberButton/POSNumberButton.tsx

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +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';
+}