siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Textarea/Textarea.tsx

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

package/src/index.css

@@ -1,29 +0,0 @@
-/* ===== FUENTES PERSONALIZADAS ===== */
-@font-face {
-  font-family: 'SiesaBT';
-  src: url('./assets/fonts/SiesaBT/SiesaBT-Regular.otf') format('opentype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'SiesaBT';
-  src: url('./assets/fonts/SiesaBT/SiesaBT-Light.otf') format('opentype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'SiesaBT';
-  src: url('./assets/fonts/SiesaBT/SiesaBT-Bold.otf') format('opentype');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* ===== TAILWIND CSS ===== */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)