siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Input/Input.stories.tsx

@@ -1,583 +1,583 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Input } from './Input';
-import {
-  EnvelopeIcon,
-  QuestionMarkCircleIcon,
-  UserIcon,
-  LockClosedIcon,
-  MagnifyingGlassIcon,
-  EyeIcon,
-  XMarkIcon,
-  CheckIcon,
-  ExclamationCircleIcon,
-} from './icons';
-
-/**
- * Input - Componente de campo de entrada del sistema de diseño Siesa
- *
- * Sistema completo de inputs con soporte para:
- * - **Estados**: Default, Hover, Focus, Filled, Disabled
- * - **Validación**: Error states con mensajes
- * - **Iconos**: Soporte para iconos izquierdo y derecho
- * - **Accesibilidad**: Labels, helper text, y ARIA attributes
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Input',
-  component: Input,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Campos de entrada interactivos con soporte para validación, iconos, 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 entrada',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    labelSecondary: {
-      control: 'text',
-      description: 'Texto secundario junto al label (opcional)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Texto de ayuda dentro del input',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    helperText: {
-      control: 'text',
-      description: 'Texto de ayuda debajo del input',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    error: {
-      control: 'boolean',
-      description: 'Indica si hay un error de validación',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Mensaje de error a mostrar (reemplaza helperText cuando error=true)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el input',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Si el input ocupa todo el ancho disponible',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Layout',
-      },
-    },
-    leftIcon: {
-      description: 'Icono a mostrar a la izquierda del texto',
-      table: {
-        type: { summary: 'ReactElement' },
-        category: 'Contenido',
-      },
-      control: false,
-    },
-    rightIcon: {
-      description: 'Icono a mostrar a la derecha del texto',
-      table: {
-        type: { summary: 'ReactElement' },
-        category: 'Contenido',
-      },
-      control: false,
-    },
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con todas las props del Input en tiempo real.
- * Cambia el texto, iconos, estados y más para ver cómo se comporta el componente.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Email',
-    placeholder: 'tu@email.com',
-    helperText: 'Ingresa tu correo electrónico',
-    error: false,
-    disabled: false,
-    fullWidth: false,
-  },
-  render: (args) => {
-    return (
-      <Input
-        {...args}
-        leftIcon={<EnvelopeIcon />}
-        rightIcon={<QuestionMarkCircleIcon />}
-      />
-    );
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-
-/**
- * Todos los Estados
- *
- * Vista rápida de todos los estados del Input: 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-content-primary dark:text-dark-content-primary">Estados Normales (Error=False)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Default"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Helper text"
-          />
-          <Input
-            label="Hover"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Hover sobre el input para ver el estado"
-          />
-          <Input
-            label="Focus"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Click en el input para ver focus"
-            autoFocus
-          />
-        </div>
-        <div className="flex flex-wrap gap-4 mt-4">
-          <Input
-            label="Filled"
-            defaultValue="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Input con valor"
-          />
-          <Input
-            label="Disabled"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Input deshabilitado"
-            disabled
-          />
-        </div>
-      </div>
-
-      {/* Estados con Error */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Estados con Error (Error=True)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Error Default"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este campo es requerido"
-          />
-          <Input
-            label="Error Hover"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Formato de email inválido"
-          />
-          <Input
-            label="Error Focus"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este email ya está en uso"
-          />
-        </div>
-        <div className="flex flex-wrap gap-4 mt-4">
-          <Input
-            label="Error Filled"
-            defaultValue="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Valor no válido"
-          />
-          <Input
-            label="Error Disabled"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Campo deshabilitado"
-            disabled
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON ICONOS
-// ============================================
-
-/**
- * Inputs con Iconos
- *
- * Ejemplos de inputs con diferentes combinaciones de iconos.
- * Los iconos ayudan a identificar rápidamente el tipo de campo.
- */
-export const WithIcons: Story = {
-  name: 'Botones con Iconos',
-  render: () => (
-    <div className="space-y-6">
-      {/* Icono Izquierdo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Icono a la Izquierda</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input label="Email" placeholder="tu@email.com" leftIcon={<EnvelopeIcon />} />
-          <Input label="Usuario" placeholder="nombre_usuario" leftIcon={<UserIcon />} />
-          <Input
-            label="Contraseña"
-            type="password"
-            placeholder="••••••••"
-            leftIcon={<LockClosedIcon />}
-          />
-          <Input label="Buscar" placeholder="Buscar..." leftIcon={<MagnifyingGlassIcon />} />
-        </div>
-      </div>
-
-      {/* Icono Derecho */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Icono a la Derecha</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input label="Campo" placeholder="Valor" rightIcon={<QuestionMarkCircleIcon />} />
-          <Input label="Email" placeholder="tu@email.com" rightIcon={<CheckIcon />} />
-          <Input label="Buscar" placeholder="Buscar..." rightIcon={<XMarkIcon />} />
-        </div>
-      </div>
-
-      {/* Ambos Lados */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Iconos en Ambos Lados</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Email"
-            placeholder="tu@email.com"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<CheckIcon />}
-            helperText="Email verificado"
-          />
-          <Input
-            label="Contraseña"
-            type="password"
-            placeholder="••••••••"
-            leftIcon={<LockClosedIcon />}
-            rightIcon={<EyeIcon />}
-            helperText="Mostrar contraseña"
-          />
-          <Input
-            label="Buscar"
-            placeholder="Buscar..."
-            leftIcon={<MagnifyingGlassIcon />}
-            rightIcon={<XMarkIcon />}
-            helperText="Limpiar búsqueda"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ESTADOS DE ERROR
-// ============================================
-
-/**
- * Estados de Error
- *
- * Ejemplos de inputs con diferentes tipos de errores de validación.
- * Útil para formularios y validación de datos.
- */
-export const EstadosDeError: Story = {
-  name: 'EstadosDeError',
-  render: () => (
-    <div className="space-y-6">
-      {/* Errores de Validación */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Errores de Validación</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Email"
-            placeholder="tu@email.com"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este campo es requerido"
-          />
-          <Input
-            label="Email"
-            defaultValue="correo-invalido"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Formato de email inválido"
-          />
-          <Input
-            label="Contraseña"
-            type="password"
-            defaultValue="123"
-            leftIcon={<LockClosedIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="La contraseña debe tener al menos 8 caracteres"
-          />
-        </div>
-      </div>
-
-      {/* Errores de Disponibilidad */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Errores de Disponibilidad</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Nombre de usuario"
-            defaultValue="admin"
-            leftIcon={<UserIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este nombre de usuario ya está en uso"
-          />
-          <Input
-            label="Email"
-            defaultValue="usuario@ejemplo.com"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este email ya está registrado"
-          />
-        </div>
-      </div>
-
-      {/* Con Helper Text */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Sin Error (Para Comparación)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Email"
-            placeholder="tu@email.com"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<CheckIcon />}
-            helperText="Email disponible"
-          />
-          <Input
-            label="Contraseña"
-            type="password"
-            defaultValue="mi-password-seguro"
-            leftIcon={<LockClosedIcon />}
-            rightIcon={<CheckIcon />}
-            helperText="Contraseña segura"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar los inputs en situaciones reales:
- * formularios, login, búsqueda, etc.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => (
-    <div className="space-y-6">
-      {/* Formulario de Login */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Formulario de Login</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">
-            <Input
-              label="Email"
-              type="email"
-              placeholder="tu@email.com"
-              leftIcon={<EnvelopeIcon />}
-              fullWidth
-            />
-            <Input
-              label="Contraseña"
-              type="password"
-              placeholder="••••••••"
-              leftIcon={<LockClosedIcon />}
-              rightIcon={<EyeIcon />}
-              fullWidth
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Formulario de Registro */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Formulario de Registro</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">
-            <Input
-              label="Nombre completo"
-              placeholder="Juan Pérez"
-              leftIcon={<UserIcon />}
-              helperText="Nombre y apellido"
-              fullWidth
-            />
-            <Input
-              label="Email"
-              type="email"
-              placeholder="tu@email.com"
-              leftIcon={<EnvelopeIcon />}
-              helperText="Usaremos este email para contactarte"
-              fullWidth
-            />
-            <Input
-              label="Contraseña"
-              type="password"
-              placeholder="••••••••"
-              leftIcon={<LockClosedIcon />}
-              helperText="Mínimo 8 caracteres"
-              fullWidth
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Barra de Búsqueda */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Barra de Búsqueda</h3>
-        <div className="max-w-md">
-          <Input
-            placeholder="Buscar productos, categorías..."
-            leftIcon={<MagnifyingGlassIcon />}
-            rightIcon={<XMarkIcon />}
-            fullWidth
-          />
-        </div>
-      </div>
-
-      {/* Formulario con Validación */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          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">
-            <Input
-              label="Email"
-              type="email"
-              defaultValue="correo-invalido"
-              leftIcon={<EnvelopeIcon />}
-              rightIcon={<ExclamationCircleIcon />}
-              error
-              errorMessage="Formato de email inválido"
-              fullWidth
-            />
-            <Input
-              label="Contraseña"
-              type="password"
-              defaultValue="123"
-              leftIcon={<LockClosedIcon />}
-              rightIcon={<ExclamationCircleIcon />}
-              error
-              errorMessage="La contraseña debe tener al menos 8 caracteres"
-              fullWidth
-            />
-            <Input
-              label="Confirmar contraseña"
-              type="password"
-              defaultValue="456"
-              leftIcon={<LockClosedIcon />}
-              rightIcon={<ExclamationCircleIcon />}
-              error
-              errorMessage="Las contraseñas no coinciden"
-              fullWidth
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Campo con Label Secundario */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Con Label Secundario</h3>
-        <Input
-          label="About"
-          labelSecondary="Optional"
-          placeholder="Cuéntanos sobre ti"
-          leftIcon={<UserIcon />}
-          helperText="Máximo 200 caracteres"
-        />
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from './Input';
+import {
+  EnvelopeIcon,
+  QuestionMarkCircleIcon,
+  UserIcon,
+  LockClosedIcon,
+  MagnifyingGlassIcon,
+  EyeIcon,
+  XMarkIcon,
+  CheckIcon,
+  ExclamationCircleIcon,
+} from './icons';
+
+/**
+ * Input - Componente de campo de entrada del sistema de diseño Siesa
+ *
+ * Sistema completo de inputs con soporte para:
+ * - **Estados**: Default, Hover, Focus, Filled, Disabled
+ * - **Validación**: Error states con mensajes
+ * - **Iconos**: Soporte para iconos izquierdo y derecho
+ * - **Accesibilidad**: Labels, helper text, y ARIA attributes
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Campos de entrada interactivos con soporte para validación, iconos, 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 entrada',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    labelSecondary: {
+      control: 'text',
+      description: 'Texto secundario junto al label (opcional)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto de ayuda dentro del input',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    helperText: {
+      control: 'text',
+      description: 'Texto de ayuda debajo del input',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    error: {
+      control: 'boolean',
+      description: 'Indica si hay un error de validación',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Mensaje de error a mostrar (reemplaza helperText cuando error=true)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el input',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si el input ocupa todo el ancho disponible',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Layout',
+      },
+    },
+    leftIcon: {
+      description: 'Icono a mostrar a la izquierda del texto',
+      table: {
+        type: { summary: 'ReactElement' },
+        category: 'Contenido',
+      },
+      control: false,
+    },
+    rightIcon: {
+      description: 'Icono a mostrar a la derecha del texto',
+      table: {
+        type: { summary: 'ReactElement' },
+        category: 'Contenido',
+      },
+      control: false,
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con todas las props del Input en tiempo real.
+ * Cambia el texto, iconos, estados y más para ver cómo se comporta el componente.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    label: 'Email',
+    placeholder: 'tu@email.com',
+    helperText: 'Ingresa tu correo electrónico',
+    error: false,
+    disabled: false,
+    fullWidth: false,
+  },
+  render: (args) => {
+    return (
+      <Input
+        {...args}
+        leftIcon={<EnvelopeIcon />}
+        rightIcon={<QuestionMarkCircleIcon />}
+      />
+    );
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+
+/**
+ * Todos los Estados
+ *
+ * Vista rápida de todos los estados del Input: 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-content-primary dark:text-dark-content-primary">Estados Normales (Error=False)</h3>
+        <div className="flex flex-wrap gap-4">
+          <Input
+            label="Default"
+            placeholder="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<QuestionMarkCircleIcon />}
+            helperText="Helper text"
+          />
+          <Input
+            label="Hover"
+            placeholder="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<QuestionMarkCircleIcon />}
+            helperText="Hover sobre el input para ver el estado"
+          />
+          <Input
+            label="Focus"
+            placeholder="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<QuestionMarkCircleIcon />}
+            helperText="Click en el input para ver focus"
+            autoFocus
+          />
+        </div>
+        <div className="flex flex-wrap gap-4 mt-4">
+          <Input
+            label="Filled"
+            defaultValue="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<QuestionMarkCircleIcon />}
+            helperText="Input con valor"
+          />
+          <Input
+            label="Disabled"
+            placeholder="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<QuestionMarkCircleIcon />}
+            helperText="Input deshabilitado"
+            disabled
+          />
+        </div>
+      </div>
+
+      {/* Estados con Error */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Estados con Error (Error=True)</h3>
+        <div className="flex flex-wrap gap-4">
+          <Input
+            label="Error Default"
+            placeholder="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Este campo es requerido"
+          />
+          <Input
+            label="Error Hover"
+            placeholder="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Formato de email inválido"
+          />
+          <Input
+            label="Error Focus"
+            placeholder="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Este email ya está en uso"
+          />
+        </div>
+        <div className="flex flex-wrap gap-4 mt-4">
+          <Input
+            label="Error Filled"
+            defaultValue="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Valor no válido"
+          />
+          <Input
+            label="Error Disabled"
+            placeholder="Jane Doe"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Campo deshabilitado"
+            disabled
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON ICONOS
+// ============================================
+
+/**
+ * Inputs con Iconos
+ *
+ * Ejemplos de inputs con diferentes combinaciones de iconos.
+ * Los iconos ayudan a identificar rápidamente el tipo de campo.
+ */
+export const WithIcons: Story = {
+  name: 'Botones con Iconos',
+  render: () => (
+    <div className="space-y-6">
+      {/* Icono Izquierdo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Icono a la Izquierda</h3>
+        <div className="flex flex-wrap gap-4">
+          <Input label="Email" placeholder="tu@email.com" leftIcon={<EnvelopeIcon />} />
+          <Input label="Usuario" placeholder="nombre_usuario" leftIcon={<UserIcon />} />
+          <Input
+            label="Contraseña"
+            type="password"
+            placeholder="••••••••"
+            leftIcon={<LockClosedIcon />}
+          />
+          <Input label="Buscar" placeholder="Buscar..." leftIcon={<MagnifyingGlassIcon />} />
+        </div>
+      </div>
+
+      {/* Icono Derecho */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Icono a la Derecha</h3>
+        <div className="flex flex-wrap gap-4">
+          <Input label="Campo" placeholder="Valor" rightIcon={<QuestionMarkCircleIcon />} />
+          <Input label="Email" placeholder="tu@email.com" rightIcon={<CheckIcon />} />
+          <Input label="Buscar" placeholder="Buscar..." rightIcon={<XMarkIcon />} />
+        </div>
+      </div>
+
+      {/* Ambos Lados */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Iconos en Ambos Lados</h3>
+        <div className="flex flex-wrap gap-4">
+          <Input
+            label="Email"
+            placeholder="tu@email.com"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<CheckIcon />}
+            helperText="Email verificado"
+          />
+          <Input
+            label="Contraseña"
+            type="password"
+            placeholder="••••••••"
+            leftIcon={<LockClosedIcon />}
+            rightIcon={<EyeIcon />}
+            helperText="Mostrar contraseña"
+          />
+          <Input
+            label="Buscar"
+            placeholder="Buscar..."
+            leftIcon={<MagnifyingGlassIcon />}
+            rightIcon={<XMarkIcon />}
+            helperText="Limpiar búsqueda"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. ESTADOS DE ERROR
+// ============================================
+
+/**
+ * Estados de Error
+ *
+ * Ejemplos de inputs con diferentes tipos de errores de validación.
+ * Útil para formularios y validación de datos.
+ */
+export const EstadosDeError: Story = {
+  name: 'EstadosDeError',
+  render: () => (
+    <div className="space-y-6">
+      {/* Errores de Validación */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Errores de Validación</h3>
+        <div className="flex flex-wrap gap-4">
+          <Input
+            label="Email"
+            placeholder="tu@email.com"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Este campo es requerido"
+          />
+          <Input
+            label="Email"
+            defaultValue="correo-invalido"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Formato de email inválido"
+          />
+          <Input
+            label="Contraseña"
+            type="password"
+            defaultValue="123"
+            leftIcon={<LockClosedIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="La contraseña debe tener al menos 8 caracteres"
+          />
+        </div>
+      </div>
+
+      {/* Errores de Disponibilidad */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Errores de Disponibilidad</h3>
+        <div className="flex flex-wrap gap-4">
+          <Input
+            label="Nombre de usuario"
+            defaultValue="admin"
+            leftIcon={<UserIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Este nombre de usuario ya está en uso"
+          />
+          <Input
+            label="Email"
+            defaultValue="usuario@ejemplo.com"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<ExclamationCircleIcon />}
+            error
+            errorMessage="Este email ya está registrado"
+          />
+        </div>
+      </div>
+
+      {/* Con Helper Text */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Sin Error (Para Comparación)</h3>
+        <div className="flex flex-wrap gap-4">
+          <Input
+            label="Email"
+            placeholder="tu@email.com"
+            leftIcon={<EnvelopeIcon />}
+            rightIcon={<CheckIcon />}
+            helperText="Email disponible"
+          />
+          <Input
+            label="Contraseña"
+            type="password"
+            defaultValue="mi-password-seguro"
+            leftIcon={<LockClosedIcon />}
+            rightIcon={<CheckIcon />}
+            helperText="Contraseña segura"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los inputs en situaciones reales:
+ * formularios, login, búsqueda, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => (
+    <div className="space-y-6">
+      {/* Formulario de Login */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Formulario de Login</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">
+            <Input
+              label="Email"
+              type="email"
+              placeholder="tu@email.com"
+              leftIcon={<EnvelopeIcon />}
+              fullWidth
+            />
+            <Input
+              label="Contraseña"
+              type="password"
+              placeholder="••••••••"
+              leftIcon={<LockClosedIcon />}
+              rightIcon={<EyeIcon />}
+              fullWidth
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Formulario de Registro */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Formulario de Registro</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">
+            <Input
+              label="Nombre completo"
+              placeholder="Juan Pérez"
+              leftIcon={<UserIcon />}
+              helperText="Nombre y apellido"
+              fullWidth
+            />
+            <Input
+              label="Email"
+              type="email"
+              placeholder="tu@email.com"
+              leftIcon={<EnvelopeIcon />}
+              helperText="Usaremos este email para contactarte"
+              fullWidth
+            />
+            <Input
+              label="Contraseña"
+              type="password"
+              placeholder="••••••••"
+              leftIcon={<LockClosedIcon />}
+              helperText="Mínimo 8 caracteres"
+              fullWidth
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Barra de Búsqueda */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Barra de Búsqueda</h3>
+        <div className="max-w-md">
+          <Input
+            placeholder="Buscar productos, categorías..."
+            leftIcon={<MagnifyingGlassIcon />}
+            rightIcon={<XMarkIcon />}
+            fullWidth
+          />
+        </div>
+      </div>
+
+      {/* Formulario con Validación */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          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">
+            <Input
+              label="Email"
+              type="email"
+              defaultValue="correo-invalido"
+              leftIcon={<EnvelopeIcon />}
+              rightIcon={<ExclamationCircleIcon />}
+              error
+              errorMessage="Formato de email inválido"
+              fullWidth
+            />
+            <Input
+              label="Contraseña"
+              type="password"
+              defaultValue="123"
+              leftIcon={<LockClosedIcon />}
+              rightIcon={<ExclamationCircleIcon />}
+              error
+              errorMessage="La contraseña debe tener al menos 8 caracteres"
+              fullWidth
+            />
+            <Input
+              label="Confirmar contraseña"
+              type="password"
+              defaultValue="456"
+              leftIcon={<LockClosedIcon />}
+              rightIcon={<ExclamationCircleIcon />}
+              error
+              errorMessage="Las contraseñas no coinciden"
+              fullWidth
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Campo con Label Secundario */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Con Label Secundario</h3>
+        <Input
+          label="About"
+          labelSecondary="Optional"
+          placeholder="Cuéntanos sobre ti"
+          leftIcon={<UserIcon />}
+          helperText="Máximo 200 caracteres"
+        />
+      </div>
+    </div>
+  ),
+};