siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Quantity/Quantity.tsx

@@ -1,289 +0,0 @@
-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

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