siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,535 +1,535 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Textarea } from './Textarea';
-
-/**
- * Textarea - Componente de área de texto del sistema de diseño Siesa
- *
- * Sistema completo de textareas con soporte para:
- * - **Estados**: Default, Hover, Focus, Filled, Disabled
- * - **Validación**: Error states con mensajes
- * - **Label y Description**: Etiquetas con descripción opcional
- * - **Resize**: Control de redimensionamiento (vertical, horizontal, both, none)
- * - **Accesibilidad**: Labels, helper text, y ARIA attributes
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Textarea',
-  component: Textarea,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Campos de texto multi-línea con soporte para validación, descripción, y múltiples estados. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'gray', value: '#f3f4f6' },
-        { name: 'dark', value: '#1f2937' },
-      ],
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Etiqueta del campo de texto',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    description: {
-      control: 'text',
-      description: 'Descripción debajo del label (texto secundario)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Texto de ayuda dentro del textarea',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    helperText: {
-      control: 'text',
-      description: 'Texto de ayuda debajo del textarea',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    error: {
-      control: 'boolean',
-      description: 'Indica si hay un error de validación',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Mensaje de error a mostrar (reemplaza helperText cuando error=true)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el textarea',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Si el textarea ocupa todo el ancho disponible',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Layout',
-      },
-    },
-    resize: {
-      control: 'select',
-      options: ['none', 'vertical', 'horizontal', 'both'],
-      description: 'Control de redimensionamiento',
-      table: {
-        type: { summary: "'none' | 'vertical' | 'horizontal' | 'both'" },
-        defaultValue: { summary: 'vertical' },
-        category: 'Layout',
-      },
-    },
-    rows: {
-      control: 'number',
-      description: 'Número de filas visibles',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '4' },
-        category: 'Layout',
-      },
-    },
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con todas las props del Textarea en tiempo real.
- * Cambia el texto, estados, resize y más para ver cómo se comporta el componente.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Acerca de ti',
-    description: 'Cuéntanos sobre ti',
-    placeholder: 'Escribe algunas líneas...',
-    helperText: 'Escribe algunas líneas sobre ti.',
-    error: false,
-    disabled: false,
-    fullWidth: false,
-    resize: 'vertical',
-    rows: 4,
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-
-/**
- * Todos los Estados
- *
- * Vista rápida de todos los estados del Textarea: default, hover, focus, filled, disabled.
- * También muestra los estados con y sin error.
- */
-export const AllStates: Story = {
-  name: 'Todos los Estados',
-  render: () => (
-    <div className="space-y-6">
-      {/* Estados Normales */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados Normales (Error=False)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Textarea
-            label="Default"
-            placeholder="Escribe algo aquí"
-            helperText="Texto de ayuda"
-          />
-          <Textarea
-            label="Hover"
-            placeholder="Escribe algo aquí"
-            helperText="Hover sobre el textarea para ver el estado"
-          />
-          <Textarea
-            label="Focus"
-            placeholder="Escribe algo aquí"
-            helperText="Click en el textarea para ver focus"
-            autoFocus
-          />
-        </div>
-        <div className="flex flex-wrap gap-4 mt-4">
-          <Textarea
-            label="Filled"
-            defaultValue="Texto de ejemplo ingresado"
-            helperText="Textarea con valor"
-          />
-          <Textarea
-            label="Disabled"
-            placeholder="No se puede editar"
-            helperText="Textarea deshabilitado"
-            disabled
-          />
-        </div>
-      </div>
-
-      {/* Estados con Error */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados con Error (Error=True)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Textarea
-            label="Error Default"
-            placeholder="Escribe algo aquí"
-            error
-            errorMessage="Este campo es requerido"
-          />
-          <Textarea
-            label="Error Hover"
-            placeholder="Escribe algo aquí"
-            error
-            errorMessage="Texto muy corto (mínimo 50 caracteres)"
-          />
-          <Textarea
-            label="Error Focus"
-            placeholder="Escribe algo aquí"
-            error
-            errorMessage="Contenido no permitido"
-          />
-        </div>
-        <div className="flex flex-wrap gap-4 mt-4">
-          <Textarea
-            label="Error Filled"
-            defaultValue="Texto con error"
-            error
-            errorMessage="Valor no válido"
-          />
-          <Textarea
-            label="Error Disabled"
-            placeholder="No se puede editar"
-            error
-            errorMessage="Campo deshabilitado"
-            disabled
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON DESCRIPCIONES
-// ============================================
-
-/**
- * Con Descripciones
- *
- * Ejemplos de textareas con diferentes combinaciones de label, description y helper text.
- */
-export const ConDescripciones: Story = {
-  name: 'Con Descripciones',
-  render: () => (
-    <div className="space-y-6">
-      {/* Sin Label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Label</h3>
-        <Textarea
-          placeholder="Escribe tus comentarios aquí..."
-          helperText="Tu opinión será revisada por nuestro equipo"
-        />
-      </div>
-
-      {/* Con Label, sin Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label, sin Description</h3>
-        <Textarea
-          label="Comentarios"
-          placeholder="Escribe tus comentarios aquí..."
-          helperText="Tu opinión será revisada por nuestro equipo"
-        />
-      </div>
-
-      {/* Con Label y Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label y Description</h3>
-        <Textarea
-          label="Acerca de ti"
-          description="Esto será visible para los clientes del proyecto."
-          placeholder="Cuéntanos sobre tu experiencia..."
-        />
-      </div>
-
-      {/* Con Label, Description y Helper Text */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Label, Description y Helper Text
-        </h3>
-        <Textarea
-          label="Descripción del Proyecto"
-          description="Esto será visible para todos los miembros del equipo."
-          placeholder="Describe tu proyecto..."
-          helperText="Se requieren mínimo 100 caracteres"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ESTADOS DE ERROR
-// ============================================
-
-/**
- * Estados de Error
- *
- * Ejemplos de textareas con diferentes tipos de errores de validación.
- * Útil para formularios y validación de datos.
- */
-export const ErrorStates: Story = {
-  name: 'ErrorStates',
-  render: () => (
-    <div className="space-y-6">
-      {/* Errores de Validación */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Errores de Validación</h3>
-        <div className="flex flex-wrap gap-4">
-          <Textarea
-            label="Biografía"
-            description="Cuéntanos sobre ti"
-            placeholder="Escribe tu biografía..."
-            error
-            errorMessage="Este campo es requerido"
-          />
-          <Textarea
-            label="Descripción"
-            description="Describe tu proyecto"
-            defaultValue="Muy corto"
-            error
-            errorMessage="Texto muy corto (mínimo 50 caracteres)"
-          />
-          <Textarea
-            label="Comentarios"
-            description="Deja tu opinión"
-            defaultValue="Esto contiene palabras inapropiadas"
-            error
-            errorMessage="El texto contiene palabras no permitidas"
-          />
-        </div>
-      </div>
-
-      {/* Con Helper Text */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Error (Para Comparación)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Textarea
-            label="Biografía"
-            description="Cuéntanos sobre ti"
-            defaultValue="Soy un desarrollador de software con 5 años de experiencia..."
-            helperText="¡La biografía se ve bien!"
-          />
-          <Textarea
-            label="Descripción"
-            description="Describe tu proyecto"
-            defaultValue="Esta es una aplicación web moderna construida con React y TypeScript que ayuda a los usuarios a gestionar sus tareas de manera eficiente."
-            helperText="Caracteres: 145/500"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. RESIZE OPTIONS
-// ============================================
-
-/**
- * Opciones de Resize
- *
- * Ejemplos de textareas con diferentes opciones de redimensionamiento.
- */
-export const ResizeOptions: Story = {
-  name: 'ResizeOptions',
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Vertical (default)</h3>
-        <Textarea
-          label="Comments"
-          placeholder="Puedes redimensionar verticalmente"
-          helperText="Arrastra la esquina inferior derecha"
-          resize="vertical"
-        />
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Horizontal</h3>
-        <Textarea
-          label="Comments"
-          placeholder="Puedes redimensionar horizontalmente"
-          helperText="Arrastra la esquina inferior derecha"
-          resize="horizontal"
-        />
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Both</h3>
-        <Textarea
-          label="Comments"
-          placeholder="Puedes redimensionar en ambas direcciones"
-          helperText="Arrastra la esquina inferior derecha"
-          resize="both"
-        />
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize None</h3>
-        <Textarea
-          label="Comments"
-          placeholder="No se puede redimensionar"
-          helperText="Este textarea tiene tamaño fijo"
-          resize="none"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar los textareas en situaciones reales:
- * formularios, comentarios, descripciones, etc.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => (
-    <div className="space-y-6">
-      {/* Formulario de Perfil */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Perfil</h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <div className="space-y-4">
-            <Textarea
-              label="Biografía"
-              description="Cuéntanos sobre ti"
-              placeholder="Escribe una breve biografía..."
-              helperText="Esto será visible en tu perfil público"
-              fullWidth
-              rows={3}
-            />
-            <Textarea
-              label="Habilidades"
-              description="¿Cuáles son tus habilidades principales?"
-              placeholder="JavaScript, React, TypeScript..."
-              helperText="Separa las habilidades con comas"
-              fullWidth
-              rows={2}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Sistema de Comentarios */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sistema de Comentarios</h3>
-        <div className="max-w-md">
-          <Textarea
-            label="Deja un comentario"
-            placeholder="Comparte tu opinión..."
-            helperText="Sé respetuoso y constructivo"
-            fullWidth
-            rows={4}
-          />
-        </div>
-      </div>
-
-      {/* Formulario de Contacto */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Contacto</h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <Textarea
-            label="Mensaje"
-            description="¿Cómo podemos ayudarte?"
-            placeholder="Describe tu problema o pregunta..."
-            helperText="Te responderemos en 24 horas"
-            fullWidth
-            rows={6}
-          />
-        </div>
-      </div>
-
-      {/* Formulario con Validación */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Formulario con Validación de Errores
-        </h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <div className="space-y-4">
-            <Textarea
-              label="Descripción del Proyecto"
-              description="Describe tu proyecto en detalle"
-              defaultValue="Muy corto"
-              error
-              errorMessage="La descripción debe tener al menos 100 caracteres"
-              fullWidth
-              rows={5}
-            />
-            <Textarea
-              label="Notas Adicionales"
-              description="Cualquier otra información"
-              placeholder="Notas opcionales..."
-              helperText="Este campo es opcional"
-              fullWidth
-              rows={3}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Textarea Grande */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Textarea Grande (Artículo/Blog)</h3>
-        <Textarea
-          label="Contenido del Artículo"
-          description="Escribe tu artículo aquí"
-          placeholder="Comienza a escribir tu artículo..."
-          helperText="Soporta formato Markdown"
-          fullWidth
-          rows={10}
-        />
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from './Textarea';
+
+/**
+ * Textarea - Componente de área de texto del sistema de diseño Siesa
+ *
+ * Sistema completo de textareas con soporte para:
+ * - **Estados**: Default, Hover, Focus, Filled, Disabled
+ * - **Validación**: Error states con mensajes
+ * - **Label y Description**: Etiquetas con descripción opcional
+ * - **Resize**: Control de redimensionamiento (vertical, horizontal, both, none)
+ * - **Accesibilidad**: Labels, helper text, y ARIA attributes
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Campos de texto multi-línea con soporte para validación, descripción, y múltiples estados. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Etiqueta del campo de texto',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    description: {
+      control: 'text',
+      description: 'Descripción debajo del label (texto secundario)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto de ayuda dentro del textarea',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    helperText: {
+      control: 'text',
+      description: 'Texto de ayuda debajo del textarea',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    error: {
+      control: 'boolean',
+      description: 'Indica si hay un error de validación',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Mensaje de error a mostrar (reemplaza helperText cuando error=true)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el textarea',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si el textarea ocupa todo el ancho disponible',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Layout',
+      },
+    },
+    resize: {
+      control: 'select',
+      options: ['none', 'vertical', 'horizontal', 'both'],
+      description: 'Control de redimensionamiento',
+      table: {
+        type: { summary: "'none' | 'vertical' | 'horizontal' | 'both'" },
+        defaultValue: { summary: 'vertical' },
+        category: 'Layout',
+      },
+    },
+    rows: {
+      control: 'number',
+      description: 'Número de filas visibles',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '4' },
+        category: 'Layout',
+      },
+    },
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con todas las props del Textarea en tiempo real.
+ * Cambia el texto, estados, resize y más para ver cómo se comporta el componente.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    label: 'Acerca de ti',
+    description: 'Cuéntanos sobre ti',
+    placeholder: 'Escribe algunas líneas...',
+    helperText: 'Escribe algunas líneas sobre ti.',
+    error: false,
+    disabled: false,
+    fullWidth: false,
+    resize: 'vertical',
+    rows: 4,
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+
+/**
+ * Todos los Estados
+ *
+ * Vista rápida de todos los estados del Textarea: default, hover, focus, filled, disabled.
+ * También muestra los estados con y sin error.
+ */
+export const AllStates: Story = {
+  name: 'Todos los Estados',
+  render: () => (
+    <div className="space-y-6">
+      {/* Estados Normales */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados Normales (Error=False)</h3>
+        <div className="flex flex-wrap gap-4">
+          <Textarea
+            label="Default"
+            placeholder="Escribe algo aquí"
+            helperText="Texto de ayuda"
+          />
+          <Textarea
+            label="Hover"
+            placeholder="Escribe algo aquí"
+            helperText="Hover sobre el textarea para ver el estado"
+          />
+          <Textarea
+            label="Focus"
+            placeholder="Escribe algo aquí"
+            helperText="Click en el textarea para ver focus"
+            autoFocus
+          />
+        </div>
+        <div className="flex flex-wrap gap-4 mt-4">
+          <Textarea
+            label="Filled"
+            defaultValue="Texto de ejemplo ingresado"
+            helperText="Textarea con valor"
+          />
+          <Textarea
+            label="Disabled"
+            placeholder="No se puede editar"
+            helperText="Textarea deshabilitado"
+            disabled
+          />
+        </div>
+      </div>
+
+      {/* Estados con Error */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados con Error (Error=True)</h3>
+        <div className="flex flex-wrap gap-4">
+          <Textarea
+            label="Error Default"
+            placeholder="Escribe algo aquí"
+            error
+            errorMessage="Este campo es requerido"
+          />
+          <Textarea
+            label="Error Hover"
+            placeholder="Escribe algo aquí"
+            error
+            errorMessage="Texto muy corto (mínimo 50 caracteres)"
+          />
+          <Textarea
+            label="Error Focus"
+            placeholder="Escribe algo aquí"
+            error
+            errorMessage="Contenido no permitido"
+          />
+        </div>
+        <div className="flex flex-wrap gap-4 mt-4">
+          <Textarea
+            label="Error Filled"
+            defaultValue="Texto con error"
+            error
+            errorMessage="Valor no válido"
+          />
+          <Textarea
+            label="Error Disabled"
+            placeholder="No se puede editar"
+            error
+            errorMessage="Campo deshabilitado"
+            disabled
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON DESCRIPCIONES
+// ============================================
+
+/**
+ * Con Descripciones
+ *
+ * Ejemplos de textareas con diferentes combinaciones de label, description y helper text.
+ */
+export const ConDescripciones: Story = {
+  name: 'Con Descripciones',
+  render: () => (
+    <div className="space-y-6">
+      {/* Sin Label */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Label</h3>
+        <Textarea
+          placeholder="Escribe tus comentarios aquí..."
+          helperText="Tu opinión será revisada por nuestro equipo"
+        />
+      </div>
+
+      {/* Con Label, sin Description */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label, sin Description</h3>
+        <Textarea
+          label="Comentarios"
+          placeholder="Escribe tus comentarios aquí..."
+          helperText="Tu opinión será revisada por nuestro equipo"
+        />
+      </div>
+
+      {/* Con Label y Description */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label y Description</h3>
+        <Textarea
+          label="Acerca de ti"
+          description="Esto será visible para los clientes del proyecto."
+          placeholder="Cuéntanos sobre tu experiencia..."
+        />
+      </div>
+
+      {/* Con Label, Description y Helper Text */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Con Label, Description y Helper Text
+        </h3>
+        <Textarea
+          label="Descripción del Proyecto"
+          description="Esto será visible para todos los miembros del equipo."
+          placeholder="Describe tu proyecto..."
+          helperText="Se requieren mínimo 100 caracteres"
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. ESTADOS DE ERROR
+// ============================================
+
+/**
+ * Estados de Error
+ *
+ * Ejemplos de textareas con diferentes tipos de errores de validación.
+ * Útil para formularios y validación de datos.
+ */
+export const ErrorStates: Story = {
+  name: 'ErrorStates',
+  render: () => (
+    <div className="space-y-6">
+      {/* Errores de Validación */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Errores de Validación</h3>
+        <div className="flex flex-wrap gap-4">
+          <Textarea
+            label="Biografía"
+            description="Cuéntanos sobre ti"
+            placeholder="Escribe tu biografía..."
+            error
+            errorMessage="Este campo es requerido"
+          />
+          <Textarea
+            label="Descripción"
+            description="Describe tu proyecto"
+            defaultValue="Muy corto"
+            error
+            errorMessage="Texto muy corto (mínimo 50 caracteres)"
+          />
+          <Textarea
+            label="Comentarios"
+            description="Deja tu opinión"
+            defaultValue="Esto contiene palabras inapropiadas"
+            error
+            errorMessage="El texto contiene palabras no permitidas"
+          />
+        </div>
+      </div>
+
+      {/* Con Helper Text */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Error (Para Comparación)</h3>
+        <div className="flex flex-wrap gap-4">
+          <Textarea
+            label="Biografía"
+            description="Cuéntanos sobre ti"
+            defaultValue="Soy un desarrollador de software con 5 años de experiencia..."
+            helperText="¡La biografía se ve bien!"
+          />
+          <Textarea
+            label="Descripción"
+            description="Describe tu proyecto"
+            defaultValue="Esta es una aplicación web moderna construida con React y TypeScript que ayuda a los usuarios a gestionar sus tareas de manera eficiente."
+            helperText="Caracteres: 145/500"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. RESIZE OPTIONS
+// ============================================
+
+/**
+ * Opciones de Resize
+ *
+ * Ejemplos de textareas con diferentes opciones de redimensionamiento.
+ */
+export const ResizeOptions: Story = {
+  name: 'ResizeOptions',
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Vertical (default)</h3>
+        <Textarea
+          label="Comments"
+          placeholder="Puedes redimensionar verticalmente"
+          helperText="Arrastra la esquina inferior derecha"
+          resize="vertical"
+        />
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Horizontal</h3>
+        <Textarea
+          label="Comments"
+          placeholder="Puedes redimensionar horizontalmente"
+          helperText="Arrastra la esquina inferior derecha"
+          resize="horizontal"
+        />
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Both</h3>
+        <Textarea
+          label="Comments"
+          placeholder="Puedes redimensionar en ambas direcciones"
+          helperText="Arrastra la esquina inferior derecha"
+          resize="both"
+        />
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize None</h3>
+        <Textarea
+          label="Comments"
+          placeholder="No se puede redimensionar"
+          helperText="Este textarea tiene tamaño fijo"
+          resize="none"
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los textareas en situaciones reales:
+ * formularios, comentarios, descripciones, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => (
+    <div className="space-y-6">
+      {/* Formulario de Perfil */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Perfil</h3>
+        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
+          <div className="space-y-4">
+            <Textarea
+              label="Biografía"
+              description="Cuéntanos sobre ti"
+              placeholder="Escribe una breve biografía..."
+              helperText="Esto será visible en tu perfil público"
+              fullWidth
+              rows={3}
+            />
+            <Textarea
+              label="Habilidades"
+              description="¿Cuáles son tus habilidades principales?"
+              placeholder="JavaScript, React, TypeScript..."
+              helperText="Separa las habilidades con comas"
+              fullWidth
+              rows={2}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Sistema de Comentarios */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sistema de Comentarios</h3>
+        <div className="max-w-md">
+          <Textarea
+            label="Deja un comentario"
+            placeholder="Comparte tu opinión..."
+            helperText="Sé respetuoso y constructivo"
+            fullWidth
+            rows={4}
+          />
+        </div>
+      </div>
+
+      {/* Formulario de Contacto */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Contacto</h3>
+        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
+          <Textarea
+            label="Mensaje"
+            description="¿Cómo podemos ayudarte?"
+            placeholder="Describe tu problema o pregunta..."
+            helperText="Te responderemos en 24 horas"
+            fullWidth
+            rows={6}
+          />
+        </div>
+      </div>
+
+      {/* Formulario con Validación */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Formulario con Validación de Errores
+        </h3>
+        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
+          <div className="space-y-4">
+            <Textarea
+              label="Descripción del Proyecto"
+              description="Describe tu proyecto en detalle"
+              defaultValue="Muy corto"
+              error
+              errorMessage="La descripción debe tener al menos 100 caracteres"
+              fullWidth
+              rows={5}
+            />
+            <Textarea
+              label="Notas Adicionales"
+              description="Cualquier otra información"
+              placeholder="Notas opcionales..."
+              helperText="Este campo es opcional"
+              fullWidth
+              rows={3}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Textarea Grande */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Textarea Grande (Artículo/Blog)</h3>
+        <Textarea
+          label="Contenido del Artículo"
+          description="Escribe tu artículo aquí"
+          placeholder="Comienza a escribir tu artículo..."
+          helperText="Soporta formato Markdown"
+          fullWidth
+          rows={10}
+        />
+      </div>
+    </div>
+  ),
+};