siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/POSProductButton/POSProductButton.tsx

@@ -1,152 +1,152 @@
-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 const POSProductButton: React.FC<POSProductButtonProps> = ({
-  image,
-  label,
-  active = false,
-  disabled = false,
-  onClick,
-  className = '',
-  ariaLabel,
-}) => {
-  // ===== CLASES BASE =====
-  const baseClasses = `
-    flex
-    flex-col
-    gap-2
-    p-3
-    rounded-lg
-    font-bold
-    text-sm
-    transition-all
-    duration-150
-    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
-  `;
-
-  // ===== CLASES DE ESTADO =====
-  const stateClasses = disabled
-    ? `
-      bg-white
-      text-content-primary
-      opacity-55
-      cursor-not-allowed
-      pointer-events-none
-      dark:bg-dark-bg-primary
-      dark:text-dark-content-primary
-    `
-    : active
-    ? `
-      bg-primary-custom-100
-      text-primary-custom-600
-      cursor-pointer
-      hover:bg-primary-custom-100
-      active:scale-95
-      dark:bg-primary-custom-100/20
-      dark:text-primary-custom-600
-      dark:hover:bg-primary-custom-100/30
-      dark:active:scale-95
-    `
-    : `
-      bg-white
-      text-content-primary
-      cursor-pointer
-      hover:bg-background-secondary
-      active:scale-95
-      dark:bg-dark-bg-primary
-      dark:text-dark-content-primary
-      dark:hover:bg-dark-bg-primary/80
-      dark:active:scale-95
-    `;
-
-  // ===== COMBINAR TODAS LAS CLASES =====
-  const buttonClasses = [baseClasses, stateClasses, className]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <button
-      type="button"
-      className={buttonClasses}
-      disabled={disabled}
-      onClick={onClick}
-      aria-label={ariaLabel || label}
-      aria-pressed={active}
-    >
-      {/* Imagen del producto */}
-      <div className="aspect-[158/80] w-full rounded-lg overflow-hidden">
-        <img
-          src={image}
-          alt={label}
-          className="w-full h-full object-cover"
-        />
-      </div>
-
-      {/* Label del producto */}
-      <div className="w-full text-left leading-5">
-        {label}
-      </div>
-    </button>
-  );
-};
+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 const POSProductButton: React.FC<POSProductButtonProps> = ({
+  image,
+  label,
+  active = false,
+  disabled = false,
+  onClick,
+  className = '',
+  ariaLabel,
+}) => {
+  // ===== CLASES BASE =====
+  const baseClasses = `
+    flex
+    flex-col
+    gap-2
+    p-3
+    rounded-lg
+    font-bold
+    text-sm
+    transition-all
+    duration-150
+    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
+  `;
+
+  // ===== CLASES DE ESTADO =====
+  const stateClasses = disabled
+    ? `
+      bg-white
+      text-content-primary
+      opacity-55
+      cursor-not-allowed
+      pointer-events-none
+      dark:bg-dark-bg-primary
+      dark:text-dark-content-primary
+    `
+    : active
+    ? `
+      bg-primary-custom-100
+      text-primary-custom-600
+      cursor-pointer
+      hover:bg-primary-custom-100
+      active:scale-95
+      dark:bg-primary-custom-100/20
+      dark:text-primary-custom-600
+      dark:hover:bg-primary-custom-100/30
+      dark:active:scale-95
+    `
+    : `
+      bg-white
+      text-content-primary
+      cursor-pointer
+      hover:bg-background-secondary
+      active:scale-95
+      dark:bg-dark-bg-primary
+      dark:text-dark-content-primary
+      dark:hover:bg-dark-bg-primary/80
+      dark:active:scale-95
+    `;
+
+  // ===== COMBINAR TODAS LAS CLASES =====
+  const buttonClasses = [baseClasses, stateClasses, className]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <button
+      type="button"
+      className={buttonClasses}
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={ariaLabel || label}
+      aria-pressed={active}
+    >
+      {/* Imagen del producto */}
+      <div className="aspect-[158/80] w-full rounded-lg overflow-hidden">
+        <img
+          src={image}
+          alt={label}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      {/* Label del producto */}
+      <div className="w-full text-left leading-5">
+        {label}
+      </div>
+    </button>
+  );
+};

package/src/components/POSProductButton/POSProductButton.types.ts

@@ -1,46 +1,46 @@
-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;
-}
+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;
+}