siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSNumberButton/README.md

@@ -1,321 +1,321 @@
-# POSNumberButton
-
-Botón numérico especializado para sistemas POS (Point of Sale) con tipografía grande y estados touch-friendly.
-
-## 📋 Características
-
-- ✅ Diseñado específicamente para pantallas táctiles y sistemas POS
-- ✅ Tipografía Display Tiny (48px Bold) para excelente legibilidad
-- ✅ Tres tamaños: Small (40x40), Medium (65x65), Large (80x80)
-- ✅ Opción de borde visible o sin borde
-- ✅ Feedback táctil inmediato con `active:scale-95`
-- ✅ Dark mode completo con todos los estados
-- ✅ Focus rings adaptativos para accesibilidad
-- ✅ TypeScript estricto con props validadas
-- ✅ Tokens del sistema de diseño Siesa
-
-## 🎨 Especificaciones de Figma
-
-Basado en el diseño de Figma:
-- **Node ID**: 4348-23818
-- **Estados**: Default, Touched (Hover/Active)
-- **Tamaños**: L (80x80px), M (65x65px), S (40x40px)
-- **Variantes**: Con borde y sin borde
-- **Tipografía**: Display Tiny (48px Bold / text-5xl)
-- **Border Radius**: 8px (rounded-lg)
-
-## 📦 Instalación
-
-```tsx
-import { POSNumberButton } from '@/components/POSNumberButton';
-```
-
-## 🚀 Uso Básico
-
-### Botón Numérico Simple
-
-```tsx
-<POSNumberButton size="l">
-  1
-</POSNumberButton>
-```
-
-### Botón con Borde
-
-```tsx
-<POSNumberButton size="l" border>
-  2
-</POSNumberButton>
-```
-
-### Teclado Numérico Completo
-
-```tsx
-<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
-      onClick={() => handleInput(num)}
-    >
-      {num}
-    </POSNumberButton>
-  ))}
-  <POSNumberButton size="l" border>.</POSNumberButton>
-  <POSNumberButton size="l" border>0</POSNumberButton>
-  <POSNumberButton size="l" border>←</POSNumberButton>
-</div>
-```
-
-## 🎛️ Props
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `size` | `'s' \| 'm' \| 'l'` | `'l'` | Tamaño del botón |
-| `border` | `boolean` | `false` | Si el botón tiene borde visible |
-| `children` | `ReactNode` | - | Contenido del botón (número o texto) |
-| `disabled` | `boolean` | `false` | Si el botón está deshabilitado |
-| `className` | `string` | `''` | Clases CSS adicionales |
-| `onClick` | `(event) => void` | - | Handler para evento click |
-| `ariaLabel` | `string` | - | Label para accesibilidad (ARIA) |
-| `htmlType` | `'button' \| 'submit' \| 'reset'` | `'button'` | Tipo del botón HTML |
-
-## 📐 Tamaños
-
-### Small (40x40px)
-```tsx
-<POSNumberButton size="s">1</POSNumberButton>
-```
-- **Uso**: Calculadoras compactas, espacios reducidos
-- **Tipografía**: text-2xl (24px)
-
-### Medium (65x65px)
-```tsx
-<POSNumberButton size="m">2</POSNumberButton>
-```
-- **Uso**: Tablets, interfaces intermedias
-- **Tipografía**: text-5xl (48px)
-
-### Large (80x80px) - Default
-```tsx
-<POSNumberButton size="l">3</POSNumberButton>
-```
-- **Uso**: POS touch screens, pantallas grandes
-- **Tipografía**: text-5xl (48px)
-
-## 🎨 Variantes
-
-### Sin Borde (Default)
-```tsx
-<POSNumberButton size="l">1</POSNumberButton>
-```
-- Fondo blanco en estado default
-- Cambia a primary-custom-600 en hover/active
-- Texto cambia a primary-inverse-content
-
-### Con Borde
-```tsx
-<POSNumberButton size="l" border>2</POSNumberButton>
-```
-- Borde border-primary visible
-- Cambia a primary-inverse-border en hover/active
-- Mejor separación visual entre botones
-
-## 🌓 Dark Mode
-
-Todos los estados se adaptan automáticamente:
-
-```tsx
-// Light Mode:
-// - Fondo: white (#ffffff)
-// - Texto: content-primary (#18181b)
-// - Hover: bg primary-custom-600, texto primary-inverse-content
-
-// Dark Mode:
-// - Fondo: dark-bg-primary (#18181b)
-// - Texto: dark-content-primary (#ffffff)
-// - Hover: bg dark-bg-inverse, texto dark-content-inverse
-```
-
-## 🎯 Estados
-
-### Default
-```tsx
-<POSNumberButton>1</POSNumberButton>
-```
-- Fondo blanco, texto oscuro
-- Cursor pointer
-
-### Hover
-```tsx
-<POSNumberButton>2</POSNumberButton>
-```
-- Fondo cambia a primary-custom-600
-- Texto cambia a primary-inverse-content
-- Transición suave de 150ms
-
-### Active (Presionado)
-```tsx
-<POSNumberButton>3</POSNumberButton>
-```
-- Mismo estilo que hover
-- Efecto scale-95 para feedback táctil
-- Ideal para pantallas touch
-
-### Focus
-```tsx
-<POSNumberButton>4</POSNumberButton>
-```
-- Focus ring primary-custom-400 (light)
-- Focus ring dark-border-custom (dark)
-- Navegable con teclado (Tab)
-
-### Disabled
-```tsx
-<POSNumberButton disabled>5</POSNumberButton>
-```
-- Opacity 50%
-- Cursor not-allowed
-- Pointer events deshabilitados
-
-## 💡 Casos de Uso
-
-### Sistema POS Completo
-```tsx
-function POSKeypad({ onInput }) {
-  return (
-    <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
-          onClick={() => onInput(num)}
-        >
-          {num}
-        </POSNumberButton>
-      ))}
-      <POSNumberButton size="l" border onClick={() => onInput('.')}>
-        .
-      </POSNumberButton>
-      <POSNumberButton size="l" border onClick={() => onInput(0)}>
-        0
-      </POSNumberButton>
-      <POSNumberButton size="l" border onClick={() => onInput('backspace')}>
-        ←
-      </POSNumberButton>
-    </div>
-  );
-}
-```
-
-### Calculadora
-```tsx
-function Calculator() {
-  return (
-    <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>
-            {num}
-          </POSNumberButton>
-        ))}
-      </div>
-
-      {/* Operadores */}
-      <div className="grid grid-cols-1 gap-2">
-        {['+', '-', '×', '÷', '='].map((op) => (
-          <POSNumberButton key={op} size="m" border>
-            {op}
-          </POSNumberButton>
-        ))}
-      </div>
-    </div>
-  );
-}
-```
-
-### Teclado Compacto (Tablet)
-```tsx
-function CompactKeypad() {
-  return (
-    <div className="grid grid-cols-3 gap-2 max-w-[211px]">
-      {[1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0, '←'].map((key, idx) => (
-        <POSNumberButton key={idx} size="m">
-          {key}
-        </POSNumberButton>
-      ))}
-    </div>
-  );
-}
-```
-
-## 🎨 Tokens Utilizados
-
-### Colores (Light Mode)
-- `bg-white` - Fondo default
-- `text-content-primary` (#18181b) - Texto default
-- `bg-primary-custom-600` (#0e79fd) - Fondo hover/active
-- `text-primary-inverse-content` (#eff8ff) - Texto hover/active
-- `border-border-primary` (#e4e4e7) - Borde default
-- `border-primary-inverse-border` (#3c9bf6) - Borde hover/active
-
-### Colores (Dark Mode)
-- `dark:bg-dark-bg-primary` (#18181b) - Fondo default
-- `dark:text-dark-content-primary` (#ffffff) - Texto default
-- `dark:bg-dark-bg-inverse` (#bfe2fe) - Fondo hover/active
-- `dark:text-dark-content-inverse` (#0e79fd) - Texto hover/active
-- `dark:border-dark-border-primary` (#71717a) - Borde default
-
-### Tipografía
-- `text-5xl` (48px) - Display Tiny para tamaños M y L
-- `text-2xl` (24px) - Heading Small para tamaño S
-- `font-bold` (700) - Peso Bold
-- `tracking-tighter` (-2.5%) - Letter spacing para Display
-
-### Espaciado
-- `rounded-lg` (8px) - Border radius según Figma
-- `gap-2` (8px) - Espaciado entre botones en grids
-
-## ✅ Mejores Prácticas
-
-### ✓ Hacer
-- Usa `size="l"` para pantallas táctiles POS
-- Usa `border={true}` para mejor separación visual en grids
-- Implementa feedback visual inmediato (scale-95 está incluido)
-- Usa aria-label para accesibilidad cuando el contenido no es obvio
-- Combina con grids de 3 columnas para teclados numéricos
-
-### ✗ Evitar
-- No uses tamaños muy pequeños para pantallas touch (mínimo size="m")
-- No omitas el handler onClick en contextos interactivos
-- No uses para botones que no sean numéricos u operadores
-- No sobrescribas las transiciones (son optimizadas para touch)
-
-## 🔗 Referencias
-
-- **Diseño Figma**: [POS Number Button](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4348-23818)
-- **Sistema de Colores**: `docs/colors.md`
-- **Sistema Tipográfico**: `docs/typography.md` (Display Tiny)
-- **Componente Base**: `src/components/Button/Button.tsx`
-
-## 📝 Notas de Implementación
-
-1. **Tipografía Display Tiny**: Según `typography.md`, Display Tiny es 48px (text-5xl) con font-bold y tracking-tighter
-2. **Tamaños Exactos**: Los tamaños están basados en las especificaciones exactas de Figma (80x80, 65x65, 40x40)
-3. **Estados Touch**: El efecto `active:scale-95` proporciona feedback táctil inmediato
-4. **Dark Mode**: Todos los colores usan tokens del sistema que se adaptan automáticamente
-5. **Accesibilidad**: Focus rings optimizados y aria-labels por defecto
-
-## 📅 Historial
-
-| Versión | Fecha | Cambios |
-|---------|-------|---------|
-| 1.0.0 | 2025-11-24 | Implementación inicial del componente |
-
----
-
-**Autor**: Siesa UI Kit Team
-**Última actualización**: 2025-11-24
+# POSNumberButton
+
+Botón numérico especializado para sistemas POS (Point of Sale) con tipografía grande y estados touch-friendly.
+
+## 📋 Características
+
+- ✅ Diseñado específicamente para pantallas táctiles y sistemas POS
+- ✅ Tipografía Display Tiny (48px Bold) para excelente legibilidad
+- ✅ Tres tamaños: Small (40x40), Medium (65x65), Large (80x80)
+- ✅ Opción de borde visible o sin borde
+- ✅ Feedback táctil inmediato con `active:scale-95`
+- ✅ Dark mode completo con todos los estados
+- ✅ Focus rings adaptativos para accesibilidad
+- ✅ TypeScript estricto con props validadas
+- ✅ Tokens del sistema de diseño Siesa
+
+## 🎨 Especificaciones de Figma
+
+Basado en el diseño de Figma:
+- **Node ID**: 4348-23818
+- **Estados**: Default, Touched (Hover/Active)
+- **Tamaños**: L (80x80px), M (65x65px), S (40x40px)
+- **Variantes**: Con borde y sin borde
+- **Tipografía**: Display Tiny (48px Bold / text-5xl)
+- **Border Radius**: 8px (rounded-lg)
+
+## 📦 Instalación
+
+```tsx
+import { POSNumberButton } from '@/components/POSNumberButton';
+```
+
+## 🚀 Uso Básico
+
+### Botón Numérico Simple
+
+```tsx
+<POSNumberButton size="l">
+  1
+</POSNumberButton>
+```
+
+### Botón con Borde
+
+```tsx
+<POSNumberButton size="l" border>
+  2
+</POSNumberButton>
+```
+
+### Teclado Numérico Completo
+
+```tsx
+<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
+      onClick={() => handleInput(num)}
+    >
+      {num}
+    </POSNumberButton>
+  ))}
+  <POSNumberButton size="l" border>.</POSNumberButton>
+  <POSNumberButton size="l" border>0</POSNumberButton>
+  <POSNumberButton size="l" border>←</POSNumberButton>
+</div>
+```
+
+## 🎛️ Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `size` | `'s' \| 'm' \| 'l'` | `'l'` | Tamaño del botón |
+| `border` | `boolean` | `false` | Si el botón tiene borde visible |
+| `children` | `ReactNode` | - | Contenido del botón (número o texto) |
+| `disabled` | `boolean` | `false` | Si el botón está deshabilitado |
+| `className` | `string` | `''` | Clases CSS adicionales |
+| `onClick` | `(event) => void` | - | Handler para evento click |
+| `ariaLabel` | `string` | - | Label para accesibilidad (ARIA) |
+| `htmlType` | `'button' \| 'submit' \| 'reset'` | `'button'` | Tipo del botón HTML |
+
+## 📐 Tamaños
+
+### Small (40x40px)
+```tsx
+<POSNumberButton size="s">1</POSNumberButton>
+```
+- **Uso**: Calculadoras compactas, espacios reducidos
+- **Tipografía**: text-2xl (24px)
+
+### Medium (65x65px)
+```tsx
+<POSNumberButton size="m">2</POSNumberButton>
+```
+- **Uso**: Tablets, interfaces intermedias
+- **Tipografía**: text-5xl (48px)
+
+### Large (80x80px) - Default
+```tsx
+<POSNumberButton size="l">3</POSNumberButton>
+```
+- **Uso**: POS touch screens, pantallas grandes
+- **Tipografía**: text-5xl (48px)
+
+## 🎨 Variantes
+
+### Sin Borde (Default)
+```tsx
+<POSNumberButton size="l">1</POSNumberButton>
+```
+- Fondo blanco en estado default
+- Cambia a primary-custom-600 en hover/active
+- Texto cambia a primary-inverse-content
+
+### Con Borde
+```tsx
+<POSNumberButton size="l" border>2</POSNumberButton>
+```
+- Borde border-primary visible
+- Cambia a primary-inverse-border en hover/active
+- Mejor separación visual entre botones
+
+## 🌓 Dark Mode
+
+Todos los estados se adaptan automáticamente:
+
+```tsx
+// Light Mode:
+// - Fondo: white (#ffffff)
+// - Texto: content-primary (#18181b)
+// - Hover: bg primary-custom-600, texto primary-inverse-content
+
+// Dark Mode:
+// - Fondo: dark-bg-primary (#18181b)
+// - Texto: dark-content-primary (#ffffff)
+// - Hover: bg dark-bg-inverse, texto dark-content-inverse
+```
+
+## 🎯 Estados
+
+### Default
+```tsx
+<POSNumberButton>1</POSNumberButton>
+```
+- Fondo blanco, texto oscuro
+- Cursor pointer
+
+### Hover
+```tsx
+<POSNumberButton>2</POSNumberButton>
+```
+- Fondo cambia a primary-custom-600
+- Texto cambia a primary-inverse-content
+- Transición suave de 150ms
+
+### Active (Presionado)
+```tsx
+<POSNumberButton>3</POSNumberButton>
+```
+- Mismo estilo que hover
+- Efecto scale-95 para feedback táctil
+- Ideal para pantallas touch
+
+### Focus
+```tsx
+<POSNumberButton>4</POSNumberButton>
+```
+- Focus ring primary-custom-400 (light)
+- Focus ring dark-border-custom (dark)
+- Navegable con teclado (Tab)
+
+### Disabled
+```tsx
+<POSNumberButton disabled>5</POSNumberButton>
+```
+- Opacity 50%
+- Cursor not-allowed
+- Pointer events deshabilitados
+
+## 💡 Casos de Uso
+
+### Sistema POS Completo
+```tsx
+function POSKeypad({ onInput }) {
+  return (
+    <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
+          onClick={() => onInput(num)}
+        >
+          {num}
+        </POSNumberButton>
+      ))}
+      <POSNumberButton size="l" border onClick={() => onInput('.')}>
+        .
+      </POSNumberButton>
+      <POSNumberButton size="l" border onClick={() => onInput(0)}>
+        0
+      </POSNumberButton>
+      <POSNumberButton size="l" border onClick={() => onInput('backspace')}>
+        ←
+      </POSNumberButton>
+    </div>
+  );
+}
+```
+
+### Calculadora
+```tsx
+function Calculator() {
+  return (
+    <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>
+            {num}
+          </POSNumberButton>
+        ))}
+      </div>
+
+      {/* Operadores */}
+      <div className="grid grid-cols-1 gap-2">
+        {['+', '-', '×', '÷', '='].map((op) => (
+          <POSNumberButton key={op} size="m" border>
+            {op}
+          </POSNumberButton>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+### Teclado Compacto (Tablet)
+```tsx
+function CompactKeypad() {
+  return (
+    <div className="grid grid-cols-3 gap-2 max-w-[211px]">
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0, '←'].map((key, idx) => (
+        <POSNumberButton key={idx} size="m">
+          {key}
+        </POSNumberButton>
+      ))}
+    </div>
+  );
+}
+```
+
+## 🎨 Tokens Utilizados
+
+### Colores (Light Mode)
+- `bg-white` - Fondo default
+- `text-content-primary` (#18181b) - Texto default
+- `bg-primary-custom-600` (#0e79fd) - Fondo hover/active
+- `text-primary-inverse-content` (#eff8ff) - Texto hover/active
+- `border-border-primary` (#e4e4e7) - Borde default
+- `border-primary-inverse-border` (#3c9bf6) - Borde hover/active
+
+### Colores (Dark Mode)
+- `dark:bg-dark-bg-primary` (#18181b) - Fondo default
+- `dark:text-dark-content-primary` (#ffffff) - Texto default
+- `dark:bg-dark-bg-inverse` (#bfe2fe) - Fondo hover/active
+- `dark:text-dark-content-inverse` (#0e79fd) - Texto hover/active
+- `dark:border-dark-border-primary` (#71717a) - Borde default
+
+### Tipografía
+- `text-5xl` (48px) - Display Tiny para tamaños M y L
+- `text-2xl` (24px) - Heading Small para tamaño S
+- `font-bold` (700) - Peso Bold
+- `tracking-tighter` (-2.5%) - Letter spacing para Display
+
+### Espaciado
+- `rounded-lg` (8px) - Border radius según Figma
+- `gap-2` (8px) - Espaciado entre botones en grids
+
+## ✅ Mejores Prácticas
+
+### ✓ Hacer
+- Usa `size="l"` para pantallas táctiles POS
+- Usa `border={true}` para mejor separación visual en grids
+- Implementa feedback visual inmediato (scale-95 está incluido)
+- Usa aria-label para accesibilidad cuando el contenido no es obvio
+- Combina con grids de 3 columnas para teclados numéricos
+
+### ✗ Evitar
+- No uses tamaños muy pequeños para pantallas touch (mínimo size="m")
+- No omitas el handler onClick en contextos interactivos
+- No uses para botones que no sean numéricos u operadores
+- No sobrescribas las transiciones (son optimizadas para touch)
+
+## 🔗 Referencias
+
+- **Diseño Figma**: [POS Number Button](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4348-23818)
+- **Sistema de Colores**: `docs/colors.md`
+- **Sistema Tipográfico**: `docs/typography.md` (Display Tiny)
+- **Componente Base**: `src/components/Button/Button.tsx`
+
+## 📝 Notas de Implementación
+
+1. **Tipografía Display Tiny**: Según `typography.md`, Display Tiny es 48px (text-5xl) con font-bold y tracking-tighter
+2. **Tamaños Exactos**: Los tamaños están basados en las especificaciones exactas de Figma (80x80, 65x65, 40x40)
+3. **Estados Touch**: El efecto `active:scale-95` proporciona feedback táctil inmediato
+4. **Dark Mode**: Todos los colores usan tokens del sistema que se adaptan automáticamente
+5. **Accesibilidad**: Focus rings optimizados y aria-labels por defecto
+
+## 📅 Historial
+
+| Versión | Fecha | Cambios |
+|---------|-------|---------|
+| 1.0.0 | 2025-11-24 | Implementación inicial del componente |
+
+---
+
+**Autor**: Siesa UI Kit Team
+**Última actualización**: 2025-11-24

package/src/components/POSNumberButton/index.ts

@@ -1,3 +1,3 @@
-// index.ts
-export { POSNumberButton } from './POSNumberButton';
-export type { POSNumberButtonProps } from './POSNumberButton.types';
+// index.ts
+export { POSNumberButton } from './POSNumberButton';
+export type { POSNumberButtonProps } from './POSNumberButton.types';