siesa-ui-kit 1.0.0

package/src/components/Textarea/Textarea.tsx

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

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

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

package/src/context/ThemeContext.tsx

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

package/src/context/index.ts

@@ -0,0 +1 @@
+export { ThemeProvider, useTheme, type Theme } from './ThemeContext';

package/src/index.css

@@ -0,0 +1,29 @@
+/* ===== 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/index.ts

@@ -0,0 +1,39 @@
+// Componentes
+export { Button } from './components/Button/Button';
+export type { ButtonProps, ButtonType, ButtonSize, ButtonState } from './components/Button/Button.types';
+
+export { Input } from './components/Input/Input';
+export type { InputProps, InputState } from './components/Input/Input.types';
+
+export { Textarea } from './components/Textarea/Textarea';
+export type { TextareaProps, TextareaState } from './components/Textarea/Textarea.types';
+
+export { Checkbox } from './components/Checkbox/Checkbox';
+export type { CheckboxProps, CheckboxState } from './components/Checkbox/Checkbox.types';
+
+export { Radio } from './components/Radio/Radio';
+export type { RadioProps, RadioState } from './components/Radio/Radio.types';
+
+export { Switch } from './components/Switch/Switch';
+export type { SwitchProps, SwitchState } from './components/Switch/Switch.types';
+
+export { Avatar } from './components/Avatar/Avatar';
+export type { AvatarProps, AvatarSize, AvatarType } from './components/Avatar/Avatar.types';
+
+export { Divider } from './components/Divider/Divider';
+export type { DividerProps, DividerType } from './components/Divider/Divider.types';
+
+export { DescriptionList } from './components/DescriptionList/DescriptionList';
+export type { DescriptionListProps } from './components/DescriptionList/DescriptionList.types';
+
+export { Alert } from './components/Alert/Alert';
+export type { AlertProps } from './components/Alert/Alert.types';
+
+export { Badge } from './components/Badge/Badge';
+export type { BadgeProps, BadgeColor } from './components/Badge/Badge.types';
+
+export { Quantity } from './components/Quantity/Quantity';
+export type { QuantityProps } from './components/Quantity/Quantity.types';
+
+// Context y Hooks
+export { ThemeProvider, useTheme, type Theme } from './context';

package/src/main.tsx

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