siesa-ui-kit 1.0.6 → 1.0.7

package/dist/components/POSLocationButton/POSLocationButton.types.d.ts

@@ -0,0 +1,75 @@
+import type { MouseEvent } from 'react';
+/**
+ * Estado de disponibilidad de la ubicación POS
+ * - available: Disponible (verde/lime)
+ * - occupied: Ocupada (naranja/yellow)
+ * - reserved: Reservada (morado/purple)
+ * - outOfService: Fuera de servicio (gris/zinc)
+ */
+export type POSLocationStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
+/**
+ * Estado visual del botón
+ * - enabled: Estado normal (fondo blanco/dark-bg-primary)
+ * - actived: Estado activo/seleccionado (fondo con color del badge)
+ */
+export type POSLocationState = 'enabled' | 'actived';
+/**
+ * Información de capacidad de la ubicación
+ */
+export interface POSLocationCapacity {
+    /**
+     * Número actual de mesas/espacios ocupados
+     */
+    current: number;
+    /**
+     * Total de mesas/espacios disponibles
+     */
+    total: number;
+}
+/**
+ * Props del componente POSLocationButton
+ */
+export interface POSLocationButtonProps {
+    /**
+     * Nombre de la ubicación (ej: "Antejardín", "Terraza", "Salón Principal")
+     */
+    locationName: string;
+    /**
+     * Estado de disponibilidad de la ubicación
+     * @default 'available'
+     */
+    status?: POSLocationStatus;
+    /**
+     * Estado visual del botón (enabled o actived)
+     * @default 'enabled'
+     */
+    state?: POSLocationState;
+    /**
+     * Información de capacidad (mesas ocupadas/total)
+     * Ejemplo: { current: 1, total: 8 } → "1/8 mesas"
+     */
+    capacity?: POSLocationCapacity;
+    /**
+     * Función a ejecutar al hacer clic en el botón
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Si el botón está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+    /**
+     * Label para accesibilidad (ARIA)
+     */
+    ariaLabel?: string;
+    /**
+     * Si el botón ocupa todo el ancho disponible del contenedor padre
+     * @default true
+     */
+    fullWidth?: boolean;
+}
+//# sourceMappingURL=POSLocationButton.types.d.ts.map

package/dist/components/POSLocationButton/POSLocationButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POSLocationButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/POSLocationButton/POSLocationButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAAC;AAEvF;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/POSLocationButton/icons.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+/**
+ * Icono Check (✓) para estado Available
+ * Tamaño: 12x12px
+ */
+export declare const CheckIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono X Mark para estado Occupied
+ * Tamaño: 12x12px
+ */
+export declare const XMarkIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono Calendar para estado Reserved
+ * Tamaño: 12x12px
+ */
+export declare const CalendarIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono No Symbol (Prohibido) para estado Out of Service
+ * Tamaño: 12x12px
+ */
+export declare const NoSymbolIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono de Usuario/Personas para mostrar capacidad
+ * Tamaño: 13x10px (según especificaciones de Figma)
+ */
+export declare const UsersIcon: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/POSLocationButton/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/POSLocationButton/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAiBtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAiBtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAiBzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAqBzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAiBtD,CAAC"}

package/dist/components/POSLocationButton/index.d.ts

@@ -0,0 +1,4 @@
+export { POSLocationButton } from './POSLocationButton';
+export type { POSLocationButtonProps, POSLocationStatus, POSLocationState, POSLocationCapacity, } from './POSLocationButton.types';
+export { CheckIcon, XMarkIcon, CalendarIcon, NoSymbolIcon, UsersIcon, } from './icons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/POSLocationButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/POSLocationButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EACV,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,SAAS,EACT,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,MAAM,SAAS,CAAC"}

package/dist/components/POSNumberButton/POSNumberButton.d.ts

@@ -0,0 +1,61 @@
+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 declare const POSNumberButton: React.FC<POSNumberButtonProps>;
+//# sourceMappingURL=POSNumberButton.d.ts.map

package/dist/components/POSNumberButton/POSNumberButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POSNumberButton.d.ts","sourceRoot":"","sources":["../../../src/components/POSNumberButton/POSNumberButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsH1D,CAAC"}

package/dist/components/POSNumberButton/POSNumberButton.types.d.ts

@@ -0,0 +1,43 @@
+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';
+}
+//# sourceMappingURL=POSNumberButton.types.d.ts.map

package/dist/components/POSNumberButton/POSNumberButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POSNumberButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/POSNumberButton/POSNumberButton.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAEvB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC1C"}

package/dist/components/POSNumberButton/index.d.ts

@@ -0,0 +1,3 @@
+export { POSNumberButton } from './POSNumberButton';
+export type { POSNumberButtonProps } from './POSNumberButton.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/POSNumberButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/POSNumberButton/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/POSProductButton/POSProductButton.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { POSProductButtonProps } from './POSProductButton.types';
+/**
+ * Componente POSProductButton del sistema de diseño Siesa
+ *
+ * Botón especializado para sistemas POS que combina una imagen de producto
+ * con un label descriptivo. Diseñado para selección rápida de productos.
+ *
+ * **Estados disponibles:**
+ * - `default`: Estado normal con fondo blanco
+ * - `active`: Estado seleccionado con fondo azul claro y texto azul
+ * - `disabled`: Estado deshabilitado con opacidad reducida
+ *
+ * **Características:**
+ * - Imagen con aspect ratio 158:80 (proporción de Figma)
+ * - Label con tipografía Label Small (14px Bold)
+ * - Soporte completo de dark mode
+ * - Estados hover, active y focus
+ * - Transiciones suaves
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Focus rings adaptativos para light y dark mode
+ * - Tokens de color consistentes con la documentación
+ * - Estados hover y active completos
+ * - Tipografía Label Small (14px Bold) según sistema de diseño
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/border-radius.md - Border radius
+ *
+ * @example
+ * ```tsx
+ * // Botón de producto normal
+ * <POSProductButton
+ *   image="/images/parrilla.jpg"
+ *   label="A la parrilla"
+ *   onClick={() => console.log('Producto seleccionado')}
+ * />
+ *
+ * // Botón de producto activo/seleccionado
+ * <POSProductButton
+ *   image="/images/parrilla.jpg"
+ *   label="A la parrilla"
+ *   active={true}
+ * />
+ *
+ * // Botón de producto deshabilitado
+ * <POSProductButton
+ *   image="/images/parrilla.jpg"
+ *   label="A la parrilla"
+ *   disabled={true}
+ * />
+ * ```
+ */
+export declare const POSProductButton: React.FC<POSProductButtonProps>;
+//# sourceMappingURL=POSProductButton.d.ts.map

package/dist/components/POSProductButton/POSProductButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POSProductButton.d.ts","sourceRoot":"","sources":["../../../src/components/POSProductButton/POSProductButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6F5D,CAAC"}

package/dist/components/POSProductButton/POSProductButton.types.d.ts

@@ -0,0 +1,40 @@
+import type { MouseEvent } from 'react';
+/**
+ * Props del componente POSProductButton
+ *
+ * Botón de producto para sistemas POS con imagen y label
+ */
+export interface POSProductButtonProps {
+    /**
+     * URL de la imagen del producto
+     */
+    image: string;
+    /**
+     * Texto del producto (nombre o descripción)
+     * @example "A la parrilla"
+     */
+    label: string;
+    /**
+     * Si el botón está en estado activo/seleccionado
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Si el botón está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Handler para evento click
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+    /**
+     * Label para accesibilidad (ARIA)
+     */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=POSProductButton.types.d.ts.map

package/dist/components/POSProductButton/POSProductButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POSProductButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/POSProductButton/POSProductButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/POSProductButton/index.d.ts

@@ -0,0 +1,3 @@
+export { POSProductButton } from './POSProductButton';
+export type { POSProductButtonProps } from './POSProductButton.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/POSProductButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/POSProductButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/POSProductCard/POSProductCard.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import type { POSProductCardProps } from './POSProductCard.types';
+/**
+ * Componente POSProductCard del sistema de diseño Siesa
+ *
+ * Card especializado para sistemas POS que muestra información de producto
+ * con imagen, nombre, precio y botón de agregar. Diseñado para catálogos
+ * de productos y selección rápida en punto de venta.
+ *
+ * **Estados disponibles:**
+ * - `enabled`: Estado normal
+ *   - Light: fondo blanco (#ffffff), texto negro (#18181b)
+ *   - Dark: fondo oscuro (#18181b), texto claro (#f4f4f5)
+ * - `active`: Estado seleccionado
+ *   - Light: fondo azul claro (#dbeefe), texto azul (#0e79fd)
+ *   - Dark: fondo azul oscuro (#112d57), texto celeste (#93d1fd)
+ * - `disabled`: Estado deshabilitado con opacidad reducida
+ *
+ * **Características:**
+ * - Imagen de producto con aspect ratio fijo y rounded-lg
+ * - Nombre del producto con tipografía Label Small (14px Bold)
+ * - Precio con tipografía Heading Small (24px Bold) y letter-spacing -2.5%
+ * - Botón "Agregar" reutiliza el componente Button del sistema
+ * - Soporte completo de dark mode pixel-perfect
+ * - Transiciones suaves
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Focus rings adaptativos para light y dark mode
+ * - Tokens de color consistentes con Figma
+ * - Estados hover y active completos
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * // Card de producto normal
+ * <POSProductCard
+ *   image="/images/caprese.jpg"
+ *   productName="Ensalada Caprese"
+ *   price="$ 40.000"
+ *   onAddClick={() => console.log('Producto agregado')}
+ * />
+ *
+ * // Card de producto activo/seleccionado
+ * <POSProductCard
+ *   image="/images/caprese.jpg"
+ *   productName="Ensalada Caprese"
+ *   price="$ 40.000"
+ *   active={true}
+ * />
+ *
+ * // Card de producto deshabilitado
+ * <POSProductCard
+ *   image="/images/caprese.jpg"
+ *   productName="Ensalada Caprese"
+ *   price="$ 40.000"
+ *   disabled={true}
+ * />
+ * ```
+ */
+export declare const POSProductCard: React.FC<POSProductCardProps>;
+//# sourceMappingURL=POSProductCard.d.ts.map

package/dist/components/POSProductCard/POSProductCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POSProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/POSProductCard/POSProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0IxD,CAAC"}

package/dist/components/POSProductCard/POSProductCard.types.d.ts

@@ -0,0 +1,67 @@
+import type { MouseEvent } from 'react';
+/**
+ * Props del componente POSProductCard
+ *
+ * Card especializado para sistemas de punto de venta (POS) que muestra
+ * información de producto con imagen, nombre, precio y botón de agregar.
+ *
+ * El botón "Agregar" reutiliza el componente Button del sistema.
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ * @see src/components/Button - Componente Button reutilizado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336 - Diseño Figma
+ */
+export interface POSProductCardProps {
+    /**
+     * URL de la imagen del producto
+     * Se muestra en la parte superior del card con aspect-ratio fijo
+     */
+    image: string;
+    /**
+     * Nombre del producto a mostrar
+     * Se muestra con tipografía Label Small (14px Bold)
+     */
+    productName: string;
+    /**
+     * Precio del producto formateado como string
+     * Se muestra con tipografía Heading Small (24px Bold)
+     * @example "$ 40.000"
+     */
+    price: string;
+    /**
+     * Texto del botón de acción
+     * @default "Agregar"
+     */
+    buttonText?: string;
+    /**
+     * Estado activo/seleccionado del card
+     * Cuando está activo, el fondo cambia a azul claro y el texto a azul
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Si el card está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Handler para cuando se hace clic en el botón "Agregar"
+     */
+    onAddClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler para cuando se hace clic en el card (no en el botón)
+     */
+    onCardClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Clases CSS adicionales para el card
+     */
+    className?: string;
+    /**
+     * Label de accesibilidad para el card
+     */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=POSProductCard.types.d.ts.map

package/dist/components/POSProductCard/POSProductCard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POSProductCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/POSProductCard/POSProductCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE5D;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/POSProductCard/icons.d.ts

@@ -0,0 +1,10 @@
+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 declare const PlusIcon: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/POSProductCard/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/POSProductCard/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAkBrD,CAAC"}

package/dist/components/POSProductCard/index.d.ts

@@ -0,0 +1,3 @@
+export { POSProductCard } from './POSProductCard';
+export type { POSProductCardProps } from './POSProductCard.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/POSProductCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/POSProductCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/POSProductSidebarItems/POSProductSidebarItems.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { POSProductSidebarItemsProps } from './POSProductSidebarItems.types';
+/**
+ * POSProductSidebarItems - Componente de item de producto para sidebar POS
+ *
+ * Componente pixel-perfect basado en Figma (node 4507-28013) para mostrar
+ * productos en el sidebar de un sistema POS con soporte completo para dark mode.
+ *
+ * **Características:**
+ * - Badge de categoría con 19 colores configurables
+ * - Referencia del producto (text-[10px]/leading-3)
+ * - Precio total (text-xs/font-bold)
+ * - Nombre del producto (text-xs/font-bold)
+ * - Descripción con items opcionales (fondo terciario)
+ * - Control de cantidad integrado (Quantity component)
+ * - Botón de eliminar con color de error
+ *
+ * **Especificaciones de Figma:**
+ * - Ancho base: 272px
+ * - Spacing: gap-1 (4px) entre elementos del producto, gap-2 (8px) entre secciones
+ * - Badge: rounded-md (6px), px-1.5, py-1, text-xs/leading-4
+ * - Description section: bg-background-tertiary, p-2, rounded-lg
+ * - Delete icon: 24x24px, color red-700
+ *
+ * **Dark Mode:**
+ * Los colores se adaptan automáticamente en dark mode:
+ * - Textos principales: text-content-primary → dark:text-dark-content-primary
+ * - Description background: bg-background-tertiary → dark:bg-zinc-700
+ * - Badge colores: Mantienen contraste en ambos modos
+ * - Delete button: text-red-700 → dark:text-red-500
+ *
+ * **Orden de modificadores:** {responsive}:{dark}:{state}:{utility}
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * <POSProductSidebarItems
+ *   categoryLabel="Entradas"
+ *   productRef="00147258369"
+ *   price="$ 40,000.00"
+ *   productName="Nombre producto"
+ *   descriptionItems={[
+ *     { description: "Papas limón mediana", price: "$ 40,000.00" },
+ *     { description: "Papas limón mediana", price: "$ 40,000.00" },
+ *   ]}
+ *   quantity={0}
+ *   onQuantityChange={(qty) => console.log(qty)}
+ *   onDelete={() => console.log('Eliminar')}
+ * />
+ * ```
+ */
+export declare const POSProductSidebarItems: React.FC<POSProductSidebarItemsProps>;
+//# sourceMappingURL=POSProductSidebarItems.d.ts.map

package/dist/components/POSProductSidebarItems/POSProductSidebarItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POSProductSidebarItems.d.ts","sourceRoot":"","sources":["../../../src/components/POSProductSidebarItems/POSProductSidebarItems.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAIlF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+QxE,CAAC"}