siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Input/Input.tsx

@@ -1,204 +1,204 @@
-import React, { forwardRef, cloneElement } from 'react';
-import type { InputProps } from './Input.types';
-
-/**
- * Input - Componente de campo de entrada del sistema de diseño Siesa
- * Basado en especificaciones de Figma con Tailwind CSS
- *
- * 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
- * - Sombra base para inputs con focus
- * - Estados hover, focus, disabled y error completos
- * - Typography: Paragraph Regular para texto, Label Bold para labels
- *
- * Campo de entrada de texto con soporte para:
- * - Estados: default, hover, focus, filled, disabled
- * - Validación con mensajes de error
- * - Iconos izquierdo y derecho
- * - Label y helper text
- * - Dark mode completo
- * - Accesibilidad completa
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/shadows.md - Sistema de sombras
- * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * <Input
- *   label="Email"
- *   placeholder="tu@email.com"
- *   leftIcon={<EnvelopeIcon />}
- *   helperText="Ingresa tu correo electrónico"
- * />
- * ```
- */
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      label,
-      labelSecondary,
-      helperText,
-      error = false,
-      errorMessage,
-      leftIcon,
-      rightIcon,
-      fullWidth = false,
-      className = '',
-      disabled = false,
-      id,
-      ...props
-    },
-    ref
-  ) => {
-    // Generar ID único si no se proporciona
-    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-
-    // ===== CLASES BASE DEL INPUT =====
-    // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)
-    // Border radius rounded-md (6px) consistente con Button
-    const baseInputClasses = `
-      w-full
-      px-3
-      py-1.5
-      text-sm
-      leading-6
-      font-normal
-      text-content-primary
-      bg-bg-primary
-      border
-      border-border-primary
-      rounded-md
-      outline-none
-      transition-all
-      duration-150
-      placeholder:text-content-tertiary
-      dark:bg-dark-bg-primary
-      dark:border-dark-border-primary
-      dark:text-dark-content-primary
-      dark:placeholder:text-dark-content-tertiary
-    `;
-
-    // ===== CLASES PARA ESTADOS INTERACTIVOS =====
-    // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
-    // Focus rings adaptativos siguiendo el patrón de Button
-    const interactiveClasses = !disabled
-      ? `
-        hover:border-primary-custom-600
-        focus:border-primary-custom-600
-        focus:ring-2
-        focus:ring-primary-custom-400
-        focus:ring-offset-2
-        dark:hover:border-dark-border-custom
-        dark:focus:border-dark-border-custom
-        dark:focus:ring-dark-border-custom
-        dark:focus:ring-offset-dark-bg-primary
-      `
-      : `
-        opacity-50
-        cursor-not-allowed
-        bg-bg-secondary
-        dark:bg-dark-bg-secondary
-      `;
-
-    // ===== CLASES PARA ESTADO DE ERROR =====
-    // Los colores de error son los mismos en light y dark mode
-    const errorClasses = error
-      ? `
-        !border-error-border
-        focus:!ring-error-border/30
-        focus:!ring-offset-2
-        dark:!border-error-border
-        dark:focus:!ring-error-border/30
-        dark:focus:!ring-offset-dark-bg-primary
-      `
-      : '';
-
-    // ===== CLASES DEL CONTENEDOR =====
-    const containerClasses = fullWidth ? 'w-full' : 'w-[265px]';
-
-    // ===== RENDERIZAR ICONOS =====
-    // Clonar iconos con estilos apropiados y dark mode completo
-    const renderIcon = (icon: React.ReactElement | undefined) => {
-      if (!icon) return null;
-      const existingClassName = (icon.props as any).className || '';
-      return cloneElement(icon as React.ReactElement<any>, {
-        className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${existingClassName}`,
-      });
-    };
-
-    return (
-      <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>
-        {/* Label */}
-        {label && (
-          <label
-            htmlFor={inputId}
-            className="flex items-center w-full font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary"
-          >
-            <span className="flex-1">{label}</span>
-            {labelSecondary && (
-              <span className="text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600">
-                {labelSecondary}
-              </span>
-            )}
-          </label>
-        )}
-
-        {/* Input Container */}
-        <div className="relative flex items-center">
-          {/* Left Icon */}
-          {leftIcon && (
-            <div className="absolute left-3 pointer-events-none">
-              {renderIcon(leftIcon)}
-            </div>
-          )}
-
-          {/* Input Field */}
-          <input
-            ref={ref}
-            id={inputId}
-            disabled={disabled}
-            className={`
-              ${baseInputClasses}
-              ${interactiveClasses}
-              ${errorClasses}
-              ${leftIcon ? 'pl-9' : ''}
-              ${rightIcon ? 'pr-9' : ''}
-            `.trim().replace(/\s+/g, ' ')}
-            {...props}
-          />
-
-          {/* Right Icon */}
-          {rightIcon && (
-            <div className="absolute right-3 pointer-events-none">
-              {renderIcon(rightIcon)}
-            </div>
-          )}
-        </div>
-
-        {/* Helper Text or Error Message */}
-        {(helperText || errorMessage) && (
-          <p
-            className={`
-              text-xs
-              leading-5
-              ${
-                error
-                  ? 'text-error-content dark:text-error-content'
-                  : 'text-content-tertiary dark:text-dark-content-tertiary'
-              }
-            `.trim().replace(/\s+/g, ' ')}
-          >
-            {error && errorMessage ? errorMessage : helperText}
-          </p>
-        )}
-      </div>
-    );
-  }
-);
-
-Input.displayName = 'Input';
+import React, { forwardRef, cloneElement } from 'react';
+import type { InputProps } from './Input.types';
+
+/**
+ * Input - Componente de campo de entrada del sistema de diseño Siesa
+ * Basado en especificaciones de Figma con Tailwind CSS
+ *
+ * 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
+ * - Sombra base para inputs con focus
+ * - Estados hover, focus, disabled y error completos
+ * - Typography: Paragraph Regular para texto, Label Bold para labels
+ *
+ * Campo de entrada de texto con soporte para:
+ * - Estados: default, hover, focus, filled, disabled
+ * - Validación con mensajes de error
+ * - Iconos izquierdo y derecho
+ * - Label y helper text
+ * - Dark mode completo
+ * - Accesibilidad completa
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/shadows.md - Sistema de sombras
+ * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   placeholder="tu@email.com"
+ *   leftIcon={<EnvelopeIcon />}
+ *   helperText="Ingresa tu correo electrónico"
+ * />
+ * ```
+ */
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      labelSecondary,
+      helperText,
+      error = false,
+      errorMessage,
+      leftIcon,
+      rightIcon,
+      fullWidth = false,
+      className = '',
+      disabled = false,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    // Generar ID único si no se proporciona
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+
+    // ===== CLASES BASE DEL INPUT =====
+    // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)
+    // Border radius rounded-md (6px) consistente con Button
+    const baseInputClasses = `
+      w-full
+      px-3
+      py-1.5
+      text-sm
+      leading-6
+      font-normal
+      text-content-primary
+      bg-bg-primary
+      border
+      border-border-primary
+      rounded-md
+      outline-none
+      transition-all
+      duration-150
+      placeholder:text-content-tertiary
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+      dark:text-dark-content-primary
+      dark:placeholder:text-dark-content-tertiary
+    `;
+
+    // ===== CLASES PARA ESTADOS INTERACTIVOS =====
+    // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+    // Focus rings adaptativos siguiendo el patrón de Button
+    const interactiveClasses = !disabled
+      ? `
+        hover:border-primary-custom-600
+        focus:border-primary-custom-600
+        focus:ring-2
+        focus:ring-primary-custom-400
+        focus:ring-offset-2
+        dark:hover:border-dark-border-custom
+        dark:focus:border-dark-border-custom
+        dark:focus:ring-dark-border-custom
+        dark:focus:ring-offset-dark-bg-primary
+      `
+      : `
+        opacity-50
+        cursor-not-allowed
+        bg-bg-secondary
+        dark:bg-dark-bg-secondary
+      `;
+
+    // ===== CLASES PARA ESTADO DE ERROR =====
+    // Los colores de error son los mismos en light y dark mode
+    const errorClasses = error
+      ? `
+        !border-error-border
+        focus:!ring-error-border/30
+        focus:!ring-offset-2
+        dark:!border-error-border
+        dark:focus:!ring-error-border/30
+        dark:focus:!ring-offset-dark-bg-primary
+      `
+      : '';
+
+    // ===== CLASES DEL CONTENEDOR =====
+    const containerClasses = fullWidth ? 'w-full' : 'w-[265px]';
+
+    // ===== RENDERIZAR ICONOS =====
+    // Clonar iconos con estilos apropiados y dark mode completo
+    const renderIcon = (icon: React.ReactElement | undefined) => {
+      if (!icon) return null;
+      const existingClassName = (icon.props as any).className || '';
+      return cloneElement(icon as React.ReactElement<any>, {
+        className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${existingClassName}`,
+      });
+    };
+
+    return (
+      <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>
+        {/* Label */}
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="flex items-center w-full font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary"
+          >
+            <span className="flex-1">{label}</span>
+            {labelSecondary && (
+              <span className="text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600">
+                {labelSecondary}
+              </span>
+            )}
+          </label>
+        )}
+
+        {/* Input Container */}
+        <div className="relative flex items-center">
+          {/* Left Icon */}
+          {leftIcon && (
+            <div className="absolute left-3 pointer-events-none">
+              {renderIcon(leftIcon)}
+            </div>
+          )}
+
+          {/* Input Field */}
+          <input
+            ref={ref}
+            id={inputId}
+            disabled={disabled}
+            className={`
+              ${baseInputClasses}
+              ${interactiveClasses}
+              ${errorClasses}
+              ${leftIcon ? 'pl-9' : ''}
+              ${rightIcon ? 'pr-9' : ''}
+            `.trim().replace(/\s+/g, ' ')}
+            {...props}
+          />
+
+          {/* Right Icon */}
+          {rightIcon && (
+            <div className="absolute right-3 pointer-events-none">
+              {renderIcon(rightIcon)}
+            </div>
+          )}
+        </div>
+
+        {/* Helper Text or Error Message */}
+        {(helperText || errorMessage) && (
+          <p
+            className={`
+              text-xs
+              leading-5
+              ${
+                error
+                  ? 'text-error-content dark:text-error-content'
+                  : 'text-content-tertiary dark:text-dark-content-tertiary'
+              }
+            `.trim().replace(/\s+/g, ' ')}
+          >
+            {error && errorMessage ? errorMessage : helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/components/Input/Input.types.ts

@@ -1,80 +1,80 @@
-import type { ReactElement, InputHTMLAttributes } from 'react';
-
-/**
- * Estados visuales del Input
- * @description Tipo de referencia para documentar los estados posibles del Input.
- * Los estados se manejan automáticamente mediante props (disabled) y pseudo-clases CSS (:hover, :focus)
- */
-export type InputState = 'default' | 'hover' | 'focus' | 'filled' | 'disabled';
-
-/**
- * Props del componente Input
- *
- * @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
- */
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /**
-   * Etiqueta del campo de entrada
-   * @description Texto descriptivo que se muestra encima del input
-   * @example "Email", "Nombre completo", "Contraseña"
-   */
-  label?: string;
-
-  /**
-   * Texto secundario junto al label (opcional)
-   * @description Se muestra alineado a la derecha del label, útil para indicar campos opcionales
-   * @example "Optional", "Opcional"
-   */
-  labelSecondary?: string;
-
-  /**
-   * Texto de ayuda debajo del input
-   * @description Proporciona información adicional o instrucciones para el usuario
-   * @example "Ingresa tu correo electrónico", "Mínimo 8 caracteres"
-   */
-  helperText?: string;
-
-  /**
-   * Indica si hay un error de validación
-   * @description Cambia el estilo del input para indicar error (borde rojo)
-   * @default false
-   */
-  error?: boolean;
-
-  /**
-   * Mensaje de error a mostrar (reemplaza helperText cuando error=true)
-   * @description Se muestra en rojo debajo del input cuando hay un error
-   * @example "Este campo es requerido", "Formato de email inválido"
-   */
-  errorMessage?: string;
-
-  /**
-   * Icono a mostrar a la izquierda del input
-   * @description Ayuda a identificar el tipo de campo visualmente
-   * @example <EnvelopeIcon />, <UserIcon />, <LockClosedIcon />
-   */
-  leftIcon?: ReactElement;
-
-  /**
-   * Icono a mostrar a la derecha del input
-   * @description Útil para acciones como mostrar/ocultar contraseña o limpiar campo
-   * @example <EyeIcon />, <XMarkIcon />, <CheckIcon />
-   */
-  rightIcon?: ReactElement;
-
-  /**
-   * Si el input ocupa todo el ancho del contenedor
-   * @description Por defecto usa w-[265px], con fullWidth usa w-full
-   * @default false
-   */
-  fullWidth?: boolean;
-
-  /**
-   * Clases CSS adicionales para personalizar el componente
-   * @description Se aplican al contenedor principal del input
-   */
-  className?: string;
-}
+import type { ReactElement, InputHTMLAttributes } from 'react';
+
+/**
+ * Estados visuales del Input
+ * @description Tipo de referencia para documentar los estados posibles del Input.
+ * Los estados se manejan automáticamente mediante props (disabled) y pseudo-clases CSS (:hover, :focus)
+ */
+export type InputState = 'default' | 'hover' | 'focus' | 'filled' | 'disabled';
+
+/**
+ * Props del componente Input
+ *
+ * @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
+ */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * Etiqueta del campo de entrada
+   * @description Texto descriptivo que se muestra encima del input
+   * @example "Email", "Nombre completo", "Contraseña"
+   */
+  label?: string;
+
+  /**
+   * Texto secundario junto al label (opcional)
+   * @description Se muestra alineado a la derecha del label, útil para indicar campos opcionales
+   * @example "Optional", "Opcional"
+   */
+  labelSecondary?: string;
+
+  /**
+   * Texto de ayuda debajo del input
+   * @description Proporciona información adicional o instrucciones para el usuario
+   * @example "Ingresa tu correo electrónico", "Mínimo 8 caracteres"
+   */
+  helperText?: string;
+
+  /**
+   * Indica si hay un error de validación
+   * @description Cambia el estilo del input para indicar error (borde rojo)
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Mensaje de error a mostrar (reemplaza helperText cuando error=true)
+   * @description Se muestra en rojo debajo del input cuando hay un error
+   * @example "Este campo es requerido", "Formato de email inválido"
+   */
+  errorMessage?: string;
+
+  /**
+   * Icono a mostrar a la izquierda del input
+   * @description Ayuda a identificar el tipo de campo visualmente
+   * @example <EnvelopeIcon />, <UserIcon />, <LockClosedIcon />
+   */
+  leftIcon?: ReactElement;
+
+  /**
+   * Icono a mostrar a la derecha del input
+   * @description Útil para acciones como mostrar/ocultar contraseña o limpiar campo
+   * @example <EyeIcon />, <XMarkIcon />, <CheckIcon />
+   */
+  rightIcon?: ReactElement;
+
+  /**
+   * Si el input ocupa todo el ancho del contenedor
+   * @description Por defecto usa w-[265px], con fullWidth usa w-full
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Clases CSS adicionales para personalizar el componente
+   * @description Se aplican al contenedor principal del input
+   */
+  className?: string;
+}