siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSProductCard/README.md

@@ -1,179 +1,179 @@
-# POSProductCard
-
-Card de producto especializado para sistemas de punto de venta (POS). Muestra información de producto con imagen, nombre, precio y botón de agregar.
-
-## Características
-
-- Imagen de producto con aspect ratio fijo (146x88px)
-- Nombre del producto (Label Small - 14px Bold)
-- Precio con tipografía destacada (Heading Small - 24px Bold, tracking-tighter)
-- **Botón "Agregar" reutiliza el componente Button del sistema**
-- 3 estados: enabled, active, disabled
-- **Soporte completo de dark mode pixel-perfect**
-- Focus rings adaptativos para accesibilidad
-- Transiciones suaves
-
-## Uso Básico
-
-```tsx
-import { POSProductCard } from './components/POSProductCard';
-
-// Card normal
-<POSProductCard
-  image="/images/ensalada.jpg"
-  productName="Ensalada Caprese"
-  price="$ 40.000"
-  onAddClick={() => console.log('Producto agregado')}
-/>
-
-// Card activo/seleccionado
-<POSProductCard
-  image="/images/ensalada.jpg"
-  productName="Ensalada Caprese"
-  price="$ 40.000"
-  active={true}
-/>
-
-// Card deshabilitado
-<POSProductCard
-  image="/images/ensalada.jpg"
-  productName="Ensalada Caprese"
-  price="$ 40.000"
-  disabled={true}
-/>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `image` | `string` | - | URL de la imagen del producto |
-| `productName` | `string` | - | Nombre del producto |
-| `price` | `string` | - | Precio formateado (ej: "$ 40.000") |
-| `buttonText` | `string` | "Agregar" | Texto del botón de acción |
-| `active` | `boolean` | `false` | Estado activo/seleccionado |
-| `disabled` | `boolean` | `false` | Estado deshabilitado |
-| `onAddClick` | `function` | - | Handler del clic en botón |
-| `onCardClick` | `function` | - | Handler del clic en card |
-| `className` | `string` | - | Clases CSS adicionales |
-| `ariaLabel` | `string` | - | Label de accesibilidad |
-
-## Estados y Colores
-
-### Enabled (Normal)
-
-| Elemento | Light Mode | Dark Mode |
-|----------|------------|-----------|
-| Fondo card | `#ffffff` | `#18181b` |
-| Texto | `#18181b` | `#f4f4f5` |
-
-### Active (Seleccionado)
-
-| Elemento | Light Mode | Dark Mode |
-|----------|------------|-----------|
-| Fondo card | `#dbeefe` | `#112d57` |
-| Texto | `#0e79fd` | `#93d1fd` |
-
-### Disabled
-
-- Opacidad reducida (55%)
-- No interactivo
-- Para productos no disponibles
-
-### Botón "Agregar" (Dark Mode Invertido)
-
-El botón invierte sus colores en dark mode según especificación de Figma:
-
-| Elemento | Light Mode | Dark Mode |
-|----------|------------|-----------|
-| Fondo | `#0e79fd` (azul) | `#bfe2fe` (celeste claro) |
-| Texto | `#eff8ff` (blanco) | `#0e79fd` (azul) |
-| Borde | `#3c9bf6` | `#93d1fd` |
-
-## Especificaciones de Figma
-
-| Propiedad | Valor |
-|-----------|-------|
-| **Tamaño** | 170 x 212px |
-| **Padding** | 12px (p-3) |
-| **Gap** | 8px (gap-2) |
-| **Border Radius** | 8px (rounded-lg) |
-| **Imagen** | 146 x 88px |
-| **Tipografía nombre** | Label Small (14px Bold) |
-| **Tipografía precio** | Heading Small (24px Bold, tracking-tighter) |
-| **Botón** | Button default size xs (reutilizado) |
-
-## Reutilización del Componente Button
-
-El botón "Agregar" **reutiliza el componente Button existente** del sistema. Esto garantiza:
-
-- Consistencia visual con el resto del sistema
-- Mantenimiento centralizado de estilos
-- Soporte automático de dark mode
-- Focus rings y accesibilidad heredados
-
-```tsx
-<Button
-  type="default"
-  size="xs"
-  leftIcon={<PlusIcon />}
-  onClick={handleButtonClick}
-  disabled={disabled}
-  fullWidth
->
-  {buttonText}
-</Button>
-```
-
-## Tokens de Tailwind Utilizados
-
-### Card
-
-```js
-// Card - Light Mode
-'bg-white'              // Fondo enabled
-'primary-custom-100'    // Fondo active (#dbeefe)
-'content-primary'       // Texto enabled (#18181b)
-'primary-custom-600'    // Texto active (#0e79fd)
-
-// Card - Dark Mode
-'dark-bg-primary'       // Fondo enabled (#18181b)
-'dark-bg-custom'        // Fondo active (#112d57)
-'dark-content-primary'  // Texto enabled (#f4f4f5)
-'dark-content-custom'   // Texto active (#93d1fd)
-```
-
-### Botón (Dark Mode Invertido)
-
-```js
-// Botón - Light Mode
-'bg-primary-custom-600'        // Fondo (#0e79fd)
-'text-primary-inverse-content' // Texto (#eff8ff)
-'border-primary-inverse-border' // Borde (#3c9bf6)
-
-// Botón - Dark Mode (invertido)
-'dark:bg-dark-bg-inverse'       // Fondo (#bfe2fe)
-'dark:text-dark-content-inverse' // Texto (#0e79fd)
-'dark:border-dark-border-inverse' // Borde (#93d1fd)
-```
-
-## Archivos
-
-```
-POSProductCard/
-├── POSProductCard.tsx         # Componente principal
-├── POSProductCard.types.ts    # Tipos TypeScript
-├── POSProductCard.stories.tsx # Stories de Storybook
-├── icons.tsx                  # Icono Plus
-├── index.ts                   # Exports
-└── README.md                  # Esta documentación
-```
-
-## Referencias
-
-- [Figma: POS Product Card](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336)
-- [src/components/Button](../Button) - Componente Button reutilizado
-- [docs/colors.md](../../docs/colors.md) - Sistema de colores
-- [docs/typography.md](../../docs/typography.md) - Tipografía
-- [docs/spacing.md](../../docs/spacing.md) - Espaciado
-- [docs/shadows.md](../../docs/shadows.md) - Sombras
+# POSProductCard
+
+Card de producto especializado para sistemas de punto de venta (POS). Muestra información de producto con imagen, nombre, precio y botón de agregar.
+
+## Características
+
+- Imagen de producto con aspect ratio fijo (146x88px)
+- Nombre del producto (Label Small - 14px Bold)
+- Precio con tipografía destacada (Heading Small - 24px Bold, tracking-tighter)
+- **Botón "Agregar" reutiliza el componente Button del sistema**
+- 3 estados: enabled, active, disabled
+- **Soporte completo de dark mode pixel-perfect**
+- Focus rings adaptativos para accesibilidad
+- Transiciones suaves
+
+## Uso Básico
+
+```tsx
+import { POSProductCard } from './components/POSProductCard';
+
+// Card normal
+<POSProductCard
+  image="/images/ensalada.jpg"
+  productName="Ensalada Caprese"
+  price="$ 40.000"
+  onAddClick={() => console.log('Producto agregado')}
+/>
+
+// Card activo/seleccionado
+<POSProductCard
+  image="/images/ensalada.jpg"
+  productName="Ensalada Caprese"
+  price="$ 40.000"
+  active={true}
+/>
+
+// Card deshabilitado
+<POSProductCard
+  image="/images/ensalada.jpg"
+  productName="Ensalada Caprese"
+  price="$ 40.000"
+  disabled={true}
+/>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `image` | `string` | - | URL de la imagen del producto |
+| `productName` | `string` | - | Nombre del producto |
+| `price` | `string` | - | Precio formateado (ej: "$ 40.000") |
+| `buttonText` | `string` | "Agregar" | Texto del botón de acción |
+| `active` | `boolean` | `false` | Estado activo/seleccionado |
+| `disabled` | `boolean` | `false` | Estado deshabilitado |
+| `onAddClick` | `function` | - | Handler del clic en botón |
+| `onCardClick` | `function` | - | Handler del clic en card |
+| `className` | `string` | - | Clases CSS adicionales |
+| `ariaLabel` | `string` | - | Label de accesibilidad |
+
+## Estados y Colores
+
+### Enabled (Normal)
+
+| Elemento | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| Fondo card | `#ffffff` | `#18181b` |
+| Texto | `#18181b` | `#f4f4f5` |
+
+### Active (Seleccionado)
+
+| Elemento | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| Fondo card | `#dbeefe` | `#112d57` |
+| Texto | `#0e79fd` | `#93d1fd` |
+
+### Disabled
+
+- Opacidad reducida (55%)
+- No interactivo
+- Para productos no disponibles
+
+### Botón "Agregar" (Dark Mode Invertido)
+
+El botón invierte sus colores en dark mode según especificación de Figma:
+
+| Elemento | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| Fondo | `#0e79fd` (azul) | `#bfe2fe` (celeste claro) |
+| Texto | `#eff8ff` (blanco) | `#0e79fd` (azul) |
+| Borde | `#3c9bf6` | `#93d1fd` |
+
+## Especificaciones de Figma
+
+| Propiedad | Valor |
+|-----------|-------|
+| **Tamaño** | 170 x 212px |
+| **Padding** | 12px (p-3) |
+| **Gap** | 8px (gap-2) |
+| **Border Radius** | 8px (rounded-lg) |
+| **Imagen** | 146 x 88px |
+| **Tipografía nombre** | Label Small (14px Bold) |
+| **Tipografía precio** | Heading Small (24px Bold, tracking-tighter) |
+| **Botón** | Button default size xs (reutilizado) |
+
+## Reutilización del Componente Button
+
+El botón "Agregar" **reutiliza el componente Button existente** del sistema. Esto garantiza:
+
+- Consistencia visual con el resto del sistema
+- Mantenimiento centralizado de estilos
+- Soporte automático de dark mode
+- Focus rings y accesibilidad heredados
+
+```tsx
+<Button
+  type="default"
+  size="xs"
+  leftIcon={<PlusIcon />}
+  onClick={handleButtonClick}
+  disabled={disabled}
+  fullWidth
+>
+  {buttonText}
+</Button>
+```
+
+## Tokens de Tailwind Utilizados
+
+### Card
+
+```js
+// Card - Light Mode
+'bg-white'              // Fondo enabled
+'primary-custom-100'    // Fondo active (#dbeefe)
+'content-primary'       // Texto enabled (#18181b)
+'primary-custom-600'    // Texto active (#0e79fd)
+
+// Card - Dark Mode
+'dark-bg-primary'       // Fondo enabled (#18181b)
+'dark-bg-custom'        // Fondo active (#112d57)
+'dark-content-primary'  // Texto enabled (#f4f4f5)
+'dark-content-custom'   // Texto active (#93d1fd)
+```
+
+### Botón (Dark Mode Invertido)
+
+```js
+// Botón - Light Mode
+'bg-primary-custom-600'        // Fondo (#0e79fd)
+'text-primary-inverse-content' // Texto (#eff8ff)
+'border-primary-inverse-border' // Borde (#3c9bf6)
+
+// Botón - Dark Mode (invertido)
+'dark:bg-dark-bg-inverse'       // Fondo (#bfe2fe)
+'dark:text-dark-content-inverse' // Texto (#0e79fd)
+'dark:border-dark-border-inverse' // Borde (#93d1fd)
+```
+
+## Archivos
+
+```
+POSProductCard/
+├── POSProductCard.tsx         # Componente principal
+├── POSProductCard.types.ts    # Tipos TypeScript
+├── POSProductCard.stories.tsx # Stories de Storybook
+├── icons.tsx                  # Icono Plus
+├── index.ts                   # Exports
+└── README.md                  # Esta documentación
+```
+
+## Referencias
+
+- [Figma: POS Product Card](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336)
+- [src/components/Button](../Button) - Componente Button reutilizado
+- [docs/colors.md](../../docs/colors.md) - Sistema de colores
+- [docs/typography.md](../../docs/typography.md) - Tipografía
+- [docs/spacing.md](../../docs/spacing.md) - Espaciado
+- [docs/shadows.md](../../docs/shadows.md) - Sombras

package/src/components/POSProductCard/icons.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-
-/**
- * Icono Plus (heroicons-micro/plus)
- * Usado en el botón "Agregar" del POSProductCard
- * Tamaño: 16x16px según especificación de Figma
- */
-export const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    aria-hidden="true"
-  >
-    <path
-      d="M8 3V13M3 8H13"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+import React from 'react';
+
+/**
+ * Icono Plus (heroicons-micro/plus)
+ * Usado en el botón "Agregar" del POSProductCard
+ * Tamaño: 16x16px según especificación de Figma
+ */
+export const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-hidden="true"
+  >
+    <path
+      d="M8 3V13M3 8H13"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/POSProductCard/index.ts

@@ -1,2 +1,2 @@
-export { POSProductCard } from './POSProductCard';
-export type { POSProductCardProps } from './POSProductCard.types';
+export { POSProductCard } from './POSProductCard';
+export type { POSProductCardProps } from './POSProductCard.types';