siesa-ui-kit 1.0.2 → 1.0.3

package/src/components/POSLocationButton/index.ts

@@ -1,14 +0,0 @@
-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

@@ -1,415 +0,0 @@
-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

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