siesa-ui-kit 1.0.1 → 1.0.2

package/src/components/Quantity/Quantity.tsx

@@ -0,0 +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';

package/src/components/Quantity/Quantity.types.ts

@@ -0,0 +1,70 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Props del componente Quantity
+ */
+export interface QuantityProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Valor actual del quantity
+   */
+  value?: number;
+
+  /**
+   * Valor por defecto
+   * @default 0
+   */
+  defaultValue?: number;
+
+  /**
+   * Callback cuando el valor cambia
+   */
+  onChange?: (value: number) => void;
+
+  /**
+   * Valor mínimo permitido
+   * @default 0
+   */
+  min?: number;
+
+  /**
+   * Valor máximo permitido
+   */
+  max?: number;
+
+  /**
+   * Label opcional
+   */
+  label?: string;
+
+  /**
+   * Texto del link opcional (aparece a la derecha del label)
+   */
+  linkText?: string;
+
+  /**
+   * Callback cuando se hace click en el link
+   */
+  onLinkClick?: () => void;
+
+  /**
+   * Texto de ayuda opcional
+   */
+  helperText?: string;
+
+  /**
+   * Si está en estado de error
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Si está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}