siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Textarea/Textarea.tsx

@@ -1,188 +1,188 @@
-import { forwardRef } from 'react';
-import type { TextareaProps } from './Textarea.types';
-
-/**
- * Textarea - Componente de área de texto 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
- * - Estados hover, focus, disabled y error completos
- * - Typography: Paragraph Base (16px) para texto
- *
- * Campo de entrada de texto multi-línea con soporte para:
- * - Estados: default, hover, focus, filled, disabled
- * - Validación con mensajes de error
- * - Label, description y helper text
- * - Resize vertical, horizontal, both o none
- * - 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
- * <Textarea
- *   label="About"
- *   description="Tell us about yourself"
- *   placeholder="Write a few sentences..."
- *   helperText="Minimum 50 characters"
- * />
- * ```
- */
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      label,
-      description,
-      helperText,
-      error = false,
-      errorMessage,
-      fullWidth = false,
-      resize = 'vertical',
-      className = '',
-      disabled = false,
-      id,
-      rows = 4,
-      ...props
-    },
-    ref
-  ) => {
-    // Generar ID único si no se proporciona
-    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
-
-    // ===== CLASES BASE DEL TEXTAREA =====
-    // Usando el sistema tipográfico Paragraph Base (16px = text-base)
-    // Border radius rounded-lg (8px) según especificaciones de Figma
-    // Padding: px-3 (12px) izquierda, pr-1.5 (6px) derecha para el indicador de resize
-    const baseTextareaClasses = `
-      w-full
-      px-3
-      pr-1.5
-      py-1.5
-      text-base
-      leading-6
-      font-normal
-      bg-bg-primary
-      border
-      border-border-primary
-      rounded-lg
-      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}
-    // Hover: borde más opaco (zinc-400) según especificaciones de Figma
-    // Focus: solo border-2 sin ring, según especificaciones de Figma
-    const interactiveClasses = !disabled
-      ? `
-        hover:border-zinc-400
-        focus:border-2
-        focus:border-primary-custom-600
-        dark:hover:border-zinc-500
-        dark:focus:border-2
-        dark:focus:border-dark-border-custom
-      `
-      : `
-        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
-    // Focus en error: solo border-2 sin ring, según especificaciones de Figma
-    const errorClasses = error
-      ? `
-        !border-error-border
-        focus:!border-2
-        focus:!border-error-border
-        dark:!border-error-border
-        dark:focus:!border-2
-        dark:focus:!border-error-border
-      `
-      : '';
-
-    // ===== CLASES DE RESIZE =====
-    const resizeClasses =
-      resize === 'none'
-        ? 'resize-none'
-        : resize === 'vertical'
-        ? 'resize-y'
-        : resize === 'horizontal'
-        ? 'resize-x'
-        : 'resize';
-
-    // ===== CLASES DEL CONTENEDOR =====
-    // Ancho por defecto: 312px (según especificaciones de Figma)
-    const containerClasses = fullWidth ? 'w-full' : 'w-[312px]';
-
-    return (
-      <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>
-        {/* Label and Description */}
-        {(label || description) && (
-          <div className="flex flex-col gap-1 w-full">
-            {label && (
-              <label
-                htmlFor={textareaId}
-                className="font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary"
-              >
-                {label}
-              </label>
-            )}
-            {description && (
-              <p className="text-sm leading-5 text-content-secondary dark:text-dark-content-secondary">
-                {description}
-              </p>
-            )}
-          </div>
-        )}
-
-        {/* Textarea Field */}
-        <textarea
-          ref={ref}
-          id={textareaId}
-          disabled={disabled}
-          rows={rows}
-          className={`
-            ${baseTextareaClasses}
-            ${interactiveClasses}
-            ${errorClasses}
-            ${resizeClasses}
-          `.trim().replace(/\s+/g, ' ')}
-          {...props}
-        />
-
-        {/* Helper Text or Error Message */}
-        {(helperText || errorMessage) && (
-          <p
-            className={`
-              text-sm
-              leading-5
-              text-content-tertiary
-              dark:text-dark-content-tertiary
-            `.trim().replace(/\s+/g, ' ')}
-          >
-            {error && errorMessage ? errorMessage : helperText}
-          </p>
-        )}
-      </div>
-    );
-  }
-);
-
-Textarea.displayName = 'Textarea';
+import { forwardRef } from 'react';
+import type { TextareaProps } from './Textarea.types';
+
+/**
+ * Textarea - Componente de área de texto 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
+ * - Estados hover, focus, disabled y error completos
+ * - Typography: Paragraph Base (16px) para texto
+ *
+ * Campo de entrada de texto multi-línea con soporte para:
+ * - Estados: default, hover, focus, filled, disabled
+ * - Validación con mensajes de error
+ * - Label, description y helper text
+ * - Resize vertical, horizontal, both o none
+ * - 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
+ * <Textarea
+ *   label="About"
+ *   description="Tell us about yourself"
+ *   placeholder="Write a few sentences..."
+ *   helperText="Minimum 50 characters"
+ * />
+ * ```
+ */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      label,
+      description,
+      helperText,
+      error = false,
+      errorMessage,
+      fullWidth = false,
+      resize = 'vertical',
+      className = '',
+      disabled = false,
+      id,
+      rows = 4,
+      ...props
+    },
+    ref
+  ) => {
+    // Generar ID único si no se proporciona
+    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+
+    // ===== CLASES BASE DEL TEXTAREA =====
+    // Usando el sistema tipográfico Paragraph Base (16px = text-base)
+    // Border radius rounded-lg (8px) según especificaciones de Figma
+    // Padding: px-3 (12px) izquierda, pr-1.5 (6px) derecha para el indicador de resize
+    const baseTextareaClasses = `
+      w-full
+      px-3
+      pr-1.5
+      py-1.5
+      text-base
+      leading-6
+      font-normal
+      bg-bg-primary
+      border
+      border-border-primary
+      rounded-lg
+      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}
+    // Hover: borde más opaco (zinc-400) según especificaciones de Figma
+    // Focus: solo border-2 sin ring, según especificaciones de Figma
+    const interactiveClasses = !disabled
+      ? `
+        hover:border-zinc-400
+        focus:border-2
+        focus:border-primary-custom-600
+        dark:hover:border-zinc-500
+        dark:focus:border-2
+        dark:focus:border-dark-border-custom
+      `
+      : `
+        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
+    // Focus en error: solo border-2 sin ring, según especificaciones de Figma
+    const errorClasses = error
+      ? `
+        !border-error-border
+        focus:!border-2
+        focus:!border-error-border
+        dark:!border-error-border
+        dark:focus:!border-2
+        dark:focus:!border-error-border
+      `
+      : '';
+
+    // ===== CLASES DE RESIZE =====
+    const resizeClasses =
+      resize === 'none'
+        ? 'resize-none'
+        : resize === 'vertical'
+        ? 'resize-y'
+        : resize === 'horizontal'
+        ? 'resize-x'
+        : 'resize';
+
+    // ===== CLASES DEL CONTENEDOR =====
+    // Ancho por defecto: 312px (según especificaciones de Figma)
+    const containerClasses = fullWidth ? 'w-full' : 'w-[312px]';
+
+    return (
+      <div className={`flex flex-col gap-2 ${containerClasses} ${className}`}>
+        {/* Label and Description */}
+        {(label || description) && (
+          <div className="flex flex-col gap-1 w-full">
+            {label && (
+              <label
+                htmlFor={textareaId}
+                className="font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary"
+              >
+                {label}
+              </label>
+            )}
+            {description && (
+              <p className="text-sm leading-5 text-content-secondary dark:text-dark-content-secondary">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Textarea Field */}
+        <textarea
+          ref={ref}
+          id={textareaId}
+          disabled={disabled}
+          rows={rows}
+          className={`
+            ${baseTextareaClasses}
+            ${interactiveClasses}
+            ${errorClasses}
+            ${resizeClasses}
+          `.trim().replace(/\s+/g, ' ')}
+          {...props}
+        />
+
+        {/* Helper Text or Error Message */}
+        {(helperText || errorMessage) && (
+          <p
+            className={`
+              text-sm
+              leading-5
+              text-content-tertiary
+              dark:text-dark-content-tertiary
+            `.trim().replace(/\s+/g, ' ')}
+          >
+            {error && errorMessage ? errorMessage : helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';

package/src/components/Textarea/Textarea.types.ts

@@ -1,54 +1,54 @@
-import type { TextareaHTMLAttributes } from 'react';
-
-/**
- * Estados visuales del Textarea
- */
-export type TextareaState = 'default' | 'hover' | 'focus' | 'filled' | 'disabled';
-
-/**
- * Props del componente Textarea
- */
-export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
-  /**
-   * Etiqueta del campo de texto
-   */
-  label?: string;
-
-  /**
-   * Descripción debajo del label (texto secundario)
-   */
-  description?: string;
-
-  /**
-   * Texto de ayuda debajo del textarea
-   */
-  helperText?: string;
-
-  /**
-   * Indica si hay un error de validación
-   * @default false
-   */
-  error?: boolean;
-
-  /**
-   * Mensaje de error a mostrar (reemplaza helperText cuando error=true)
-   */
-  errorMessage?: string;
-
-  /**
-   * Si el textarea ocupa todo el ancho del contenedor
-   * @default false
-   */
-  fullWidth?: boolean;
-
-  /**
-   * Si el textarea puede redimensionarse
-   * @default 'vertical'
-   */
-  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-}
+import type { TextareaHTMLAttributes } from 'react';
+
+/**
+ * Estados visuales del Textarea
+ */
+export type TextareaState = 'default' | 'hover' | 'focus' | 'filled' | 'disabled';
+
+/**
+ * Props del componente Textarea
+ */
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+  /**
+   * Etiqueta del campo de texto
+   */
+  label?: string;
+
+  /**
+   * Descripción debajo del label (texto secundario)
+   */
+  description?: string;
+
+  /**
+   * Texto de ayuda debajo del textarea
+   */
+  helperText?: string;
+
+  /**
+   * Indica si hay un error de validación
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Mensaje de error a mostrar (reemplaza helperText cuando error=true)
+   */
+  errorMessage?: string;
+
+  /**
+   * Si el textarea ocupa todo el ancho del contenedor
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Si el textarea puede redimensionarse
+   * @default 'vertical'
+   */
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}

package/src/context/ThemeContext.tsx

@@ -1,99 +1,99 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-
-export type Theme = 'light' | 'dark';
-
-interface ThemeContextType {
-  theme: Theme;
-  toggleTheme: () => void;
-  setTheme: (theme: Theme) => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-interface ThemeProviderProps {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-}
-
-/**
- * ThemeProvider - Proveedor de contexto para el tema de la aplicación
- *
- * Maneja el estado del tema (light/dark) y lo persiste en localStorage.
- * Aplica la clase 'dark' al elemento HTML root cuando el tema es dark.
- *
- * @example
- * ```tsx
- * <ThemeProvider defaultTheme="light">
- *   <App />
- * </ThemeProvider>
- * ```
- */
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
-  children,
-  defaultTheme = 'light'
-}) => {
-  const [theme, setThemeState] = useState<Theme>(() => {
-    // Intenta obtener el tema del localStorage
-    if (typeof window !== 'undefined') {
-      const savedTheme = localStorage.getItem('siesa-ui-theme') as Theme;
-      return savedTheme || defaultTheme;
-    }
-    return defaultTheme;
-  });
-
-  useEffect(() => {
-    // Aplica o remueve la clase 'dark' del elemento root
-    const root = window.document.documentElement;
-
-    if (theme === 'dark') {
-      root.classList.add('dark');
-    } else {
-      root.classList.remove('dark');
-    }
-
-    // Guarda el tema en localStorage
-    localStorage.setItem('siesa-ui-theme', theme);
-  }, [theme]);
-
-  const toggleTheme = () => {
-    setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));
-  };
-
-  const setTheme = (newTheme: Theme) => {
-    setThemeState(newTheme);
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-/**
- * useTheme - Hook para acceder al contexto del tema
- *
- * @returns {ThemeContextType} Objeto con el tema actual y funciones para modificarlo
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { theme, toggleTheme } = useTheme();
- *
- *   return (
- *     <button onClick={toggleTheme}>
- *       Tema actual: {theme}
- *     </button>
- *   );
- * }
- * ```
- */
-export const useTheme = (): ThemeContextType => {
-  const context = useContext(ThemeContext);
-
-  if (context === undefined) {
-    throw new Error('useTheme debe ser usado dentro de un ThemeProvider');
-  }
-
-  return context;
-};
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+export type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+}
+
+/**
+ * ThemeProvider - Proveedor de contexto para el tema de la aplicación
+ *
+ * Maneja el estado del tema (light/dark) y lo persiste en localStorage.
+ * Aplica la clase 'dark' al elemento HTML root cuando el tema es dark.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider defaultTheme="light">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  defaultTheme = 'light'
+}) => {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    // Intenta obtener el tema del localStorage
+    if (typeof window !== 'undefined') {
+      const savedTheme = localStorage.getItem('siesa-ui-theme') as Theme;
+      return savedTheme || defaultTheme;
+    }
+    return defaultTheme;
+  });
+
+  useEffect(() => {
+    // Aplica o remueve la clase 'dark' del elemento root
+    const root = window.document.documentElement;
+
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+
+    // Guarda el tema en localStorage
+    localStorage.setItem('siesa-ui-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));
+  };
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+/**
+ * useTheme - Hook para acceder al contexto del tema
+ *
+ * @returns {ThemeContextType} Objeto con el tema actual y funciones para modificarlo
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, toggleTheme } = useTheme();
+ *
+ *   return (
+ *     <button onClick={toggleTheme}>
+ *       Tema actual: {theme}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+
+  if (context === undefined) {
+    throw new Error('useTheme debe ser usado dentro de un ThemeProvider');
+  }
+
+  return context;
+};