siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Quantity/Quantity.tsx

@@ -1,289 +1,289 @@
-import { forwardRef, useState, useEffect } from 'react';
-import type { QuantityProps } from './Quantity.types';
-
-/**
- * Quantity - Componente de cantidad del sistema de diseño Siesa
- *
- * Componente para seleccionar cantidades con soporte para:
- * - Botones de incremento/decremento
- * - Valores mínimo y máximo
- * - Label opcional con link
- * - Texto de ayuda opcional
- * - Estado de error
- * - Estado deshabilitado
- * - Dark mode completo
- *
- * 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
- * - Focus rings adaptativos para light y dark mode
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * <Quantity
- *   label="Cantidad"
- *   value={5}
- *   min={0}
- *   max={10}
- *   onChange={(value) => console.log(value)}
- * />
- * ```
- */
-export const Quantity = forwardRef<HTMLDivElement, QuantityProps>(
-  (
-    {
-      value: controlledValue,
-      defaultValue = 0,
-      onChange,
-      min = 0,
-      max,
-      label,
-      linkText,
-      onLinkClick,
-      helperText,
-      error = false,
-      disabled = false,
-      className = '',
-      ...props
-    },
-    ref
-  ) => {
-    // Estado interno para valor no controlado
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    const isControlled = controlledValue !== undefined;
-    const currentValue = isControlled ? controlledValue : internalValue;
-
-    // Sincronizar valor interno con defaultValue cuando cambia
-    useEffect(() => {
-      if (!isControlled) {
-        setInternalValue(defaultValue);
-      }
-    }, [defaultValue, isControlled]);
-
-    // Handler para cambio de valor
-    const handleValueChange = (newValue: number) => {
-      // Aplicar restricciones de min/max
-      let clampedValue = newValue;
-      if (min !== undefined && clampedValue < min) {
-        clampedValue = min;
-      }
-      if (max !== undefined && clampedValue > max) {
-        clampedValue = max;
-      }
-
-      // Actualizar estado interno si no está controlado
-      if (!isControlled) {
-        setInternalValue(clampedValue);
-      }
-
-      // Llamar onChange si existe
-      onChange?.(clampedValue);
-    };
-
-    // Handlers para botones
-    const handleDecrement = () => {
-      if (disabled) return;
-      handleValueChange(currentValue - 1);
-    };
-
-    const handleIncrement = () => {
-      if (disabled) return;
-      handleValueChange(currentValue + 1);
-    };
-
-    // Verificar si los botones deben estar deshabilitados
-    const isDecrementDisabled = disabled || (min !== undefined && currentValue <= min);
-    const isIncrementDisabled = disabled || (max !== undefined && currentValue >= max);
-
-    // Iconos SVG inline
-    const MinusIcon = () => (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3 8H13"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    );
-
-    const PlusIcon = () => (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8 3V13M3 8H13"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    );
-
-    // Clases para el estado (usando especificaciones exactas de Figma)
-    const borderClass = error
-      ? 'border-error-border dark:border-error-border'
-      : 'border-border-primary dark:border-dark-border-primary';
-
-    const hoverClass = !disabled && !error
-      ? 'hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]'
-      : '';
-
-    const focusClass = !disabled && !error
-      ? 'focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]'
-      : '';
-
-    return (
-      <div
-        ref={ref}
-        className={`flex flex-col gap-2 ${className}`.trim()}
-        {...props}
-      >
-        {/* Label con link opcional */}
-        {label && (
-          <div className="flex items-center justify-between">
-            <label className="text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary">
-              {label}
-            </label>
-            {linkText && (
-              <button
-                type="button"
-                onClick={onLinkClick}
-                disabled={disabled}
-                className={`
-                  text-xs leading-4
-                  text-primary-custom-600
-                  hover:underline
-                  dark:text-primary-custom-600
-                  ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
-                  transition-colors
-                  duration-200
-                `.trim().replace(/\s+/g, ' ')}
-              >
-                {linkText}
-              </button>
-            )}
-          </div>
-        )}
-
-        {/* Input con botones */}
-        <div
-          className={`
-            flex
-            items-center
-            gap-2
-            px-3
-            py-1.5
-            bg-white
-            dark:bg-dark-bg-primary
-            border
-            ${borderClass}
-            ${hoverClass}
-            ${focusClass}
-            rounded-lg
-            transition-colors
-            duration-200
-            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
-          `.trim().replace(/\s+/g, ' ')}
-        >
-          {/* Botón decrementar */}
-          <button
-            type="button"
-            onClick={handleDecrement}
-            disabled={isDecrementDisabled}
-            className={`
-              flex
-              items-center
-              justify-center
-              w-4
-              h-4
-              ${isDecrementDisabled
-                ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'
-                : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'
-              }
-              transition-colors
-              duration-200
-            `.trim().replace(/\s+/g, ' ')}
-            aria-label="Decrementar"
-          >
-            <MinusIcon />
-          </button>
-
-          {/* Valor actual */}
-          <div className="flex-1 text-center">
-            <span
-              className={`
-                text-base leading-6
-                ${currentValue === 0
-                  ? 'text-content-tertiary dark:text-content-tertiary'
-                  : 'text-content-primary dark:text-dark-content-primary'
-                }
-              `.trim().replace(/\s+/g, ' ')}
-            >
-              {currentValue}
-            </span>
-          </div>
-
-          {/* Botón incrementar */}
-          <button
-            type="button"
-            onClick={handleIncrement}
-            disabled={isIncrementDisabled}
-            className={`
-              flex
-              items-center
-              justify-center
-              w-4
-              h-4
-              ${isIncrementDisabled
-                ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'
-                : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'
-              }
-              transition-colors
-              duration-200
-            `.trim().replace(/\s+/g, ' ')}
-            aria-label="Incrementar"
-          >
-            <PlusIcon />
-          </button>
-        </div>
-
-        {/* Helper text */}
-        {helperText && (
-          <p
-            className={`
-              text-sm leading-5
-              ${error
-                ? 'text-error-content dark:text-error-content'
-                : 'text-content-tertiary dark:text-content-tertiary'
-              }
-            `.trim().replace(/\s+/g, ' ')}
-          >
-            {helperText}
-          </p>
-        )}
-      </div>
-    );
-  }
-);
-
-Quantity.displayName = 'Quantity';
+import { forwardRef, useState, useEffect } from 'react';
+import type { QuantityProps } from './Quantity.types';
+
+/**
+ * Quantity - Componente de cantidad del sistema de diseño Siesa
+ *
+ * Componente para seleccionar cantidades con soporte para:
+ * - Botones de incremento/decremento
+ * - Valores mínimo y máximo
+ * - Label opcional con link
+ * - Texto de ayuda opcional
+ * - Estado de error
+ * - Estado deshabilitado
+ * - Dark mode completo
+ *
+ * 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
+ * - Focus rings adaptativos para light y dark mode
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Quantity
+ *   label="Cantidad"
+ *   value={5}
+ *   min={0}
+ *   max={10}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+export const Quantity = forwardRef<HTMLDivElement, QuantityProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue = 0,
+      onChange,
+      min = 0,
+      max,
+      label,
+      linkText,
+      onLinkClick,
+      helperText,
+      error = false,
+      disabled = false,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    // Estado interno para valor no controlado
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+
+    // Sincronizar valor interno con defaultValue cuando cambia
+    useEffect(() => {
+      if (!isControlled) {
+        setInternalValue(defaultValue);
+      }
+    }, [defaultValue, isControlled]);
+
+    // Handler para cambio de valor
+    const handleValueChange = (newValue: number) => {
+      // Aplicar restricciones de min/max
+      let clampedValue = newValue;
+      if (min !== undefined && clampedValue < min) {
+        clampedValue = min;
+      }
+      if (max !== undefined && clampedValue > max) {
+        clampedValue = max;
+      }
+
+      // Actualizar estado interno si no está controlado
+      if (!isControlled) {
+        setInternalValue(clampedValue);
+      }
+
+      // Llamar onChange si existe
+      onChange?.(clampedValue);
+    };
+
+    // Handlers para botones
+    const handleDecrement = () => {
+      if (disabled) return;
+      handleValueChange(currentValue - 1);
+    };
+
+    const handleIncrement = () => {
+      if (disabled) return;
+      handleValueChange(currentValue + 1);
+    };
+
+    // Verificar si los botones deben estar deshabilitados
+    const isDecrementDisabled = disabled || (min !== undefined && currentValue <= min);
+    const isIncrementDisabled = disabled || (max !== undefined && currentValue >= max);
+
+    // Iconos SVG inline
+    const MinusIcon = () => (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3 8H13"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+
+    const PlusIcon = () => (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 3V13M3 8H13"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+
+    // Clases para el estado (usando especificaciones exactas de Figma)
+    const borderClass = error
+      ? 'border-error-border dark:border-error-border'
+      : 'border-border-primary dark:border-dark-border-primary';
+
+    const hoverClass = !disabled && !error
+      ? 'hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]'
+      : '';
+
+    const focusClass = !disabled && !error
+      ? 'focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]'
+      : '';
+
+    return (
+      <div
+        ref={ref}
+        className={`flex flex-col gap-2 ${className}`.trim()}
+        {...props}
+      >
+        {/* Label con link opcional */}
+        {label && (
+          <div className="flex items-center justify-between">
+            <label className="text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary">
+              {label}
+            </label>
+            {linkText && (
+              <button
+                type="button"
+                onClick={onLinkClick}
+                disabled={disabled}
+                className={`
+                  text-xs leading-4
+                  text-primary-custom-600
+                  hover:underline
+                  dark:text-primary-custom-600
+                  ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+                  transition-colors
+                  duration-200
+                `.trim().replace(/\s+/g, ' ')}
+              >
+                {linkText}
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Input con botones */}
+        <div
+          className={`
+            flex
+            items-center
+            gap-2
+            px-3
+            py-1.5
+            bg-white
+            dark:bg-dark-bg-primary
+            border
+            ${borderClass}
+            ${hoverClass}
+            ${focusClass}
+            rounded-lg
+            transition-colors
+            duration-200
+            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+          `.trim().replace(/\s+/g, ' ')}
+        >
+          {/* Botón decrementar */}
+          <button
+            type="button"
+            onClick={handleDecrement}
+            disabled={isDecrementDisabled}
+            className={`
+              flex
+              items-center
+              justify-center
+              w-4
+              h-4
+              ${isDecrementDisabled
+                ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'
+                : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'
+              }
+              transition-colors
+              duration-200
+            `.trim().replace(/\s+/g, ' ')}
+            aria-label="Decrementar"
+          >
+            <MinusIcon />
+          </button>
+
+          {/* Valor actual */}
+          <div className="flex-1 text-center">
+            <span
+              className={`
+                text-base leading-6
+                ${currentValue === 0
+                  ? 'text-content-tertiary dark:text-content-tertiary'
+                  : 'text-content-primary dark:text-dark-content-primary'
+                }
+              `.trim().replace(/\s+/g, ' ')}
+            >
+              {currentValue}
+            </span>
+          </div>
+
+          {/* Botón incrementar */}
+          <button
+            type="button"
+            onClick={handleIncrement}
+            disabled={isIncrementDisabled}
+            className={`
+              flex
+              items-center
+              justify-center
+              w-4
+              h-4
+              ${isIncrementDisabled
+                ? 'text-content-tertiary dark:text-content-tertiary cursor-not-allowed'
+                : 'text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer'
+              }
+              transition-colors
+              duration-200
+            `.trim().replace(/\s+/g, ' ')}
+            aria-label="Incrementar"
+          >
+            <PlusIcon />
+          </button>
+        </div>
+
+        {/* Helper text */}
+        {helperText && (
+          <p
+            className={`
+              text-sm leading-5
+              ${error
+                ? 'text-error-content dark:text-error-content'
+                : 'text-content-tertiary dark:text-content-tertiary'
+              }
+            `.trim().replace(/\s+/g, ' ')}
+          >
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Quantity.displayName = 'Quantity';