siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Select/Select.stories.tsx

@@ -1,705 +1,673 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Select } from './Select';
-import { useState } from 'react';
-
-const meta = {
-  title: 'Siesa UI Kit/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Componente Select personalizado con menú desplegable para seleccionar opciones de una lista. Incluye navegación por teclado, click outside y dark mode completo.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    options: {
-      control: 'object',
-      description: 'Array de opciones disponibles para seleccionar',
-    },
-    value: {
-      control: 'text',
-      description: 'Valor seleccionado actual (controlado)',
-    },
-    defaultValue: {
-      control: 'text',
-      description: 'Valor inicial por defecto (no controlado)',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Texto del placeholder cuando no hay selección',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Si el select está deshabilitado',
-    },
-    error: {
-      control: 'boolean',
-      description: 'Si el select muestra un error',
-    },
-    label: {
-      control: 'text',
-      description: 'Label del select',
-    },
-    description: {
-      control: 'text',
-      description: 'Texto descriptivo que aparece debajo del label (antes del trigger)',
-    },
-    showLabel: {
-      control: 'boolean',
-      description: 'Muestra el label',
-    },
-    showDescription: {
-      control: 'boolean',
-      description: 'Muestra la descripción',
-    },
-    menuHeader: {
-      control: 'text',
-      description: 'Header opcional al inicio del menú',
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Si el select ocupa el ancho completo',
-    },
-    required: {
-      control: 'boolean',
-      description: 'Si el campo es requerido',
-    },
-    menuPosition: {
-      control: 'select',
-      options: ['top', 'bottom'],
-      description: 'Posición del menú desplegable',
-    },
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// Opciones de ejemplo
-// ============================================
-const fruitOptions = [
-  { value: 'apple', label: 'Manzana' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cereza' },
-  { value: 'date', label: 'Dátil' },
-  { value: 'elderberry', label: 'Saúco' },
-  { value: 'fig', label: 'Higo' },
-];
-
-const countryOptions = [
-  { value: 'us', label: 'Estados Unidos' },
-  { value: 'uk', label: 'Reino Unido' },
-  { value: 'ca', label: 'Canadá' },
-  { value: 'au', label: 'Australia' },
-  { value: 'de', label: 'Alemania' },
-  { value: 'fr', label: 'Francia' },
-  { value: 'jp', label: 'Japón' },
-  { value: 'cn', label: 'China' },
-];
-
-const statusOptions = [
-  { value: 'active', label: 'Activo' },
-  { value: 'pending', label: 'Pendiente' },
-  { value: 'inactive', label: 'Inactivo', disabled: true },
-  { value: 'archived', label: 'Archivado' },
-];
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  name: 'Playground',
-  args: { options: [] },
-  render: () => {
-    const [value, setValue] = useState<string | number>('');
-
-    return (
-      <div className="w-[400px]">
-        <Select
-          options={fruitOptions}
-          value={value}
-          onChange={setValue}
-          placeholder="Selecciona una fruta"
-          label="Label"
-          description="Esto será visible para los clientes en el proyecto."
-          menuHeader="Encabezado ..."
-        />
-
-        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-          <p className="text-xs text-gray-600 dark:text-gray-300">
-            <strong>Valor seleccionado:</strong> {value || '(ninguno)'}
-          </p>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 2. ESTADOS BÁSICOS
-// ============================================
-export const EstadosBasicos: Story = {
-  name: 'Estados Básicos',
-  args: { options: [] },
-  render: () => {
-    const [value1, setValue1] = useState<string | number>('');
-    const [value2, setValue2] = useState<string | number>('banana');
-
-    return (
-      <div className="space-y-8 p-6 w-[500px]">
-        {/* Default sin selección */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Sin selección (Placeholder)
-          </h3>
-          <Select
-            options={fruitOptions}
-            value={value1}
-            onChange={setValue1}
-            placeholder="Selecciona una fruta"
-            label="Fruta"
-          />
-          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-            Muestra el marcador de posición cuando no hay valor seleccionado
-          </p>
-        </div>
-
-        {/* Con valor seleccionado */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Con valor seleccionado
-          </h3>
-          <Select
-            options={fruitOptions}
-            value={value2}
-            onChange={setValue2}
-            placeholder="Selecciona una fruta"
-            label="Fruta"
-          />
-          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-            Muestra la etiqueta de la opción seleccionada
-          </p>
-        </div>
-
-        {/* Hover y Focus */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Estados Interactivos
-          </h3>
-          <Select
-            options={fruitOptions}
-            value={value1}
-            onChange={setValue1}
-            placeholder="Pasa el mouse o haz click para ver estados"
-            label="Fruta"
-          />
-          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-            • Hover: Border más claro (#f9f9f9)
-            <br />• Focus: Border azul de 2px (#329cff)
-            <br />• Click: Abre menú con opciones
-          </p>
-        </div>
-
-        {/* Disabled */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Deshabilitado
-          </h3>
-          <Select
-            options={fruitOptions}
-            value="apple"
-            disabled
-            placeholder="Selecciona una fruta"
-            label="Fruta (Deshabilitada)"
-          />
-          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-            Estado deshabilitado con opacidad reducida
-          </p>
-        </div>
-
-        {/* Error */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Error
-          </h3>
-          <Select
-            options={fruitOptions}
-            value={value1}
-            onChange={setValue1}
-            error
-            description="Por favor selecciona una fruta"
-            placeholder="Selecciona una fruta"
-            label="Fruta (Requerido)"
-            required
-          />
-          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-            Estado de error con mensaje de validación
-          </p>
-        </div>
-
-        {/* Caja de consejos */}
-        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-          <p className="text-xs text-gray-600 dark:text-gray-300">
-            <strong>💡 Guía de Estados:</strong>
-            <br />• <strong>Default</strong>: Border estándar con placeholder gris
-            <br />• <strong>Hover</strong>: Border más claro para indicar interactividad
-            <br />• <strong>Focus</strong>: Border azul grueso (2px) para accesibilidad
-            <br />• <strong>Selected</strong>: Muestra el label de la opción seleccionada
-            <br />• <strong>Disabled</strong>: Opacidad 50% sin interactividad
-            <br />• <strong>Error</strong>: Border rojo con mensaje de error
-          </p>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 3. CON HELPER TEXT
-// ============================================
-export const ConTextoDeAyuda: Story = {
-  name: 'Con Texto de Ayuda',
-  args: { options: [] },
-  render: () => {
-    const [value1, setValue1] = useState<string | number>('');
-    const [value2, setValue2] = useState<string | number>('');
-
-    return (
-      <div className="space-y-8 p-6 w-[500px]">
-        {/* Con helper text */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Con texto de ayuda
-          </h3>
-          <Select
-            options={countryOptions}
-            value={value1}
-            onChange={setValue1}
-            placeholder="Selecciona un país"
-            label="País"
-            description="Selecciona tu país de residencia"
-          />
-        </div>
-
-        {/* Con error message */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Con mensaje de error
-          </h3>
-          <Select
-            options={countryOptions}
-            value={value2}
-            onChange={setValue2}
-            placeholder="Selecciona un país"
-            label="País"
-            error
-            description="El país es requerido"
-            required
-          />
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 4. OPCIONES DESHABILITADAS
-// ============================================
-export const OpcionesDeshabilitadas: Story = {
-  name: 'Opciones Deshabilitadas',
-  args: { options: [] },
-  render: () => {
-    const [value, setValue] = useState<string | number>('');
-
-    return (
-      <div className="p-6 w-[400px]">
-        <Select
-          options={statusOptions}
-          value={value}
-          onChange={setValue}
-          placeholder="Selecciona un estado"
-          label="Estado"
-          description="Nota: El estado Inactivo está deshabilitado"
-        />
-
-        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-          <p className="text-xs text-gray-600 dark:text-gray-300">
-            <strong>💡 Tip:</strong> Algunas opciones pueden estar deshabilitadas y no se pueden seleccionar
-          </p>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 5. FULL WIDTH
-// ============================================
-export const AnchoCompleto: Story = {
-  name: 'Ancho Completo',
-  args: { options: [] },
-  render: () => {
-    const [value, setValue] = useState<string | number>('');
-
-    return (
-      <div className="p-6 w-full max-w-2xl">
-        <Select
-          options={countryOptions}
-          value={value}
-          onChange={setValue}
-          placeholder="Selecciona un país"
-          label="País"
-          description="El select de ancho completo se adapta al contenedor"
-          fullWidth
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 6. FORMULARIO COMPLETO
-// ============================================
-export const EjemploDeFormulario: Story = {
-  name: 'Ejemplo de Formulario',
-  args: { options: [] },
-  render: () => {
-    const [firstName, setFirstName] = useState('');
-    const [lastName, setLastName] = useState('');
-    const [country, setCountry] = useState<string | number>('');
-    const [status, setStatus] = useState<string | number>('');
-
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-      console.log({ firstName, lastName, country, status });
-      alert(`Form submitted!\nCountry: ${country}\nStatus: ${status}`);
-    };
-
-    return (
-      <div className="p-6 max-w-md">
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <h2 className="text-2xl font-bold text-gray-700 dark:text-white mb-6">
-            Información de Usuario
-          </h2>
-
-          {/* Text inputs */}
-          <div className="space-y-2">
-            <label className="block text-sm font-bold text-content-primary dark:text-dark-content-primary">
-              Nombre <span className="text-error-content">*</span>
-            </label>
-            <input
-              type="text"
-              value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
-              className="w-full px-3 py-2 border border-border-primary dark:border-dark-border-primary bg-bg-primary dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-dark-border-custom"
-              placeholder="Juan"
-              required
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="block text-sm font-bold text-content-primary dark:text-dark-content-primary">
-              Apellido <span className="text-error-content">*</span>
-            </label>
-            <input
-              type="text"
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-              className="w-full px-3 py-2 border border-border-primary dark:border-dark-border-primary bg-bg-primary dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-dark-border-custom"
-              placeholder="Pérez"
-              required
-            />
-          </div>
-
-          {/* Select fields */}
-          <Select
-            options={countryOptions}
-            value={country}
-            onChange={setCountry}
-            placeholder="Selecciona un país"
-            label="País"
-            description="Selecciona tu país de residencia"
-            required
-            fullWidth
-          />
-
-          <Select
-            options={statusOptions}
-            value={status}
-            onChange={setStatus}
-            placeholder="Selecciona un estado"
-            label="Estado de la Cuenta"
-            description="Selecciona el estado actual de tu cuenta"
-            required
-            fullWidth
-          />
-
-          <button
-            type="submit"
-            className="w-full px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold text-sm hover:bg-primary-custom-500 dark:hover:bg-dark-bg-inverse/90 transition-all"
-          >
-            Enviar
-          </button>
-        </form>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 7. MENU POSITION
-// ============================================
-export const PosicionDelMenu: Story = {
-  name: 'Posición del Menú',
-  args: { options: [] },
-  render: () => {
-    const [value1, setValue1] = useState<string | number>('');
-    const [value2, setValue2] = useState<string | number>('');
-
-    return (
-      <div className="space-y-32 p-6 w-[500px]">
-        {/* Bottom (default) */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Menu abre hacia abajo (default)
-          </h3>
-          <Select
-            options={fruitOptions}
-            value={value1}
-            onChange={setValue1}
-            placeholder="Selecciona una fruta"
-            label="Fruta"
-            menuPosition="bottom"
-          />
-        </div>
-
-        {/* Top */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Menu abre hacia arriba
-          </h3>
-          <Select
-            options={fruitOptions}
-            value={value2}
-            onChange={setValue2}
-            placeholder="Selecciona una fruta"
-            label="Fruta"
-            menuPosition="top"
-          />
-          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-            Útil cuando el select está cerca del borde inferior de la pantalla
-          </p>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 8. CASOS DE USO
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar los selects en situaciones reales:
- * formularios, filtros, configuración, etc.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  args: { options: [] },
-  render: () => {
-    const [country, setCountry] = useState<string | number>('');
-    const [language, setLanguage] = useState<string | number>('');
-    const [category, setCategory] = useState<string | number>('');
-    const [status, setStatus] = useState<string | number>('');
-    const [priority, setPriority] = useState<string | number>('');
-    const [timezone, setTimezone] = useState<string | number>('');
-
-    return (
-      <div className="space-y-6">
-        {/* Formulario de Preferencias */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Preferencias de Usuario</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">
-              <Select
-                options={countryOptions}
-                value={country}
-                onChange={setCountry}
-                placeholder="Selecciona un país"
-                label="País"
-                description="Selecciona tu país de residencia"
-                fullWidth
-              />
-              <Select
-                options={[
-                  { value: 'en', label: 'English' },
-                  { value: 'es', label: 'Español' },
-                  { value: 'fr', label: 'Français' },
-                  { value: 'de', label: 'Deutsch' },
-                ]}
-                value={language}
-                onChange={setLanguage}
-                placeholder="Selecciona un idioma"
-                label="Idioma"
-                description="Elige tu idioma preferido"
-                fullWidth
-              />
-              <Select
-                options={[
-                  { value: 'utc-5', label: 'UTC-5 (Eastern Time)' },
-                  { value: 'utc-6', label: 'UTC-6 (Central Time)' },
-                  { value: 'utc-7', label: 'UTC-7 (Mountain Time)' },
-                  { value: 'utc-8', label: 'UTC-8 (Pacific Time)' },
-                ]}
-                value={timezone}
-                onChange={setTimezone}
-                placeholder="Selecciona zona horaria"
-                label="Zona Horaria"
-                description="Tu zona horaria local"
-                fullWidth
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Filtros de Búsqueda */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filtros de Búsqueda</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">
-              <Select
-                options={[
-                  { value: 'all', label: 'Todas las Categorías' },
-                  { value: 'electronics', label: 'Electrónica' },
-                  { value: 'clothing', label: 'Ropa' },
-                  { value: 'books', label: 'Libros' },
-                  { value: 'home', label: 'Hogar y Jardín' },
-                ]}
-                value={category}
-                onChange={setCategory}
-                placeholder="Todas las Categorías"
-                label="Categoría"
-                fullWidth
-              />
-              <Select
-                options={statusOptions}
-                value={status}
-                onChange={setStatus}
-                placeholder="Selecciona un estado"
-                label="Estado"
-                description="Filtrar por estado del elemento"
-                fullWidth
-              />
-              <Select
-                options={[
-                  { value: 'low', label: 'Baja' },
-                  { value: 'medium', label: 'Media' },
-                  { value: 'high', label: 'Alta' },
-                  { value: 'urgent', label: 'Urgente' },
-                ]}
-                value={priority}
-                onChange={setPriority}
-                placeholder="Cualquier prioridad"
-                label="Prioridad"
-                fullWidth
-              />
-            </div>
-          </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">
-            <div className="space-y-4">
-              <Select
-                options={[
-                  { value: 'general', label: 'Consulta General' },
-                  { value: 'support', label: 'Soporte Técnico' },
-                  { value: 'sales', label: 'Ventas' },
-                  { value: 'billing', label: 'Facturación' },
-                ]}
-                value={category}
-                onChange={setCategory}
-                placeholder="Selecciona un tema"
-                label="Asunto"
-                description="¿Cómo podemos ayudarte?"
-                required
-                fullWidth
-              />
-              <Select
-                options={[
-                  { value: 'low', label: 'Baja - Pregunta general' },
-                  { value: 'medium', label: 'Media - Necesito asistencia' },
-                  { value: 'high', label: 'Alta - Problema urgente' },
-                ]}
-                value={priority}
-                onChange={setPriority}
-                placeholder="Selecciona prioridad"
-                label="Prioridad"
-                description="¿Qué tan urgente es tu solicitud?"
-                fullWidth
-              />
-            </div>
-          </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">
-              <Select
-                options={countryOptions}
-                value=""
-                onChange={() => {}}
-                placeholder="Selecciona un país"
-                label="País"
-                error
-                description="El país es requerido"
-                required
-                fullWidth
-              />
-              <Select
-                options={[
-                  { value: 'card', label: 'Tarjeta de Crédito' },
-                  { value: 'paypal', label: 'PayPal' },
-                  { value: 'bank', label: 'Transferencia Bancaria' },
-                ]}
-                value=""
-                onChange={() => {}}
-                placeholder="Selecciona método de pago"
-                label="Método de Pago"
-                error
-                description="Por favor selecciona un método de pago"
-                required
-                fullWidth
-              />
-              <Select
-                options={[
-                  { value: 'subscribe', label: 'Suscribirse al boletín' },
-                  { value: 'unsubscribe', label: 'Cancelar suscripción' },
-                ]}
-                value={status}
-                onChange={setStatus}
-                placeholder="Selecciona preferencia"
-                label="Preferencia de Boletín"
-                description="Este campo es opcional"
-                fullWidth
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './Select';
+import { useState } from 'react';
+
+const meta = {
+  title: 'Siesa UI Kit/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente Select personalizado con menú desplegable para seleccionar opciones de una lista. Incluye navegación por teclado, click outside y dark mode completo.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      control: 'object',
+      description: 'Array de opciones disponibles para seleccionar',
+    },
+    value: {
+      control: 'text',
+      description: 'Valor seleccionado actual (controlado)',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'Valor inicial por defecto (no controlado)',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto del placeholder cuando no hay selección',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si el select está deshabilitado',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Si el select muestra un error',
+    },
+    label: {
+      control: 'text',
+      description: 'Label del select',
+    },
+    description: {
+      control: 'text',
+      description: 'Texto descriptivo que aparece debajo del label (antes del trigger)',
+    },
+    showLabel: {
+      control: 'boolean',
+      description: 'Muestra el label',
+    },
+    showDescription: {
+      control: 'boolean',
+      description: 'Muestra la descripción',
+    },
+    menuHeader: {
+      control: 'text',
+      description: 'Header opcional al inicio del menú',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si el select ocupa el ancho completo',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Si el campo es requerido',
+    },
+    menuPosition: {
+      control: 'select',
+      options: ['top', 'bottom'],
+      description: 'Posición del menú desplegable',
+    },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// Opciones de ejemplo
+// ============================================
+const fruitOptions = [
+  { value: 'apple', label: 'Manzana' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cereza' },
+  { value: 'date', label: 'Dátil' },
+  { value: 'elderberry', label: 'Saúco' },
+  { value: 'fig', label: 'Higo' },
+];
+
+const countryOptions = [
+  { value: 'us', label: 'Estados Unidos' },
+  { value: 'uk', label: 'Reino Unido' },
+  { value: 'ca', label: 'Canadá' },
+  { value: 'au', label: 'Australia' },
+  { value: 'de', label: 'Alemania' },
+  { value: 'fr', label: 'Francia' },
+  { value: 'jp', label: 'Japón' },
+  { value: 'cn', label: 'China' },
+];
+
+const statusOptions = [
+  { value: 'active', label: 'Activo' },
+  { value: 'pending', label: 'Pendiente' },
+  { value: 'inactive', label: 'Inactivo', disabled: true },
+  { value: 'archived', label: 'Archivado' },
+];
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  name: 'Playground',
+  args: { options: [] },
+  render: () => {
+    const [value, setValue] = useState<string | number>('');
+
+    return (
+      <div className="w-[400px]">
+        <Select
+          options={fruitOptions}
+          value={value}
+          onChange={setValue}
+          placeholder="Selecciona una fruta"
+          label="Label"
+          description="Esto será visible para los clientes en el proyecto."
+          menuHeader="Encabezado ..."
+        />
+
+        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>Valor seleccionado:</strong> {value || '(ninguno)'}
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 2. ESTADOS BÁSICOS
+// ============================================
+export const EstadosBasicos: Story = {
+  name: 'Estados Básicos',
+  args: { options: [] },
+  render: () => {
+    const [value1, setValue1] = useState<string | number>('');
+    const [value2, setValue2] = useState<string | number>('banana');
+
+    return (
+      <div className="space-y-8 p-6 w-[500px]">
+        {/* Default sin selección */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Sin selección (Placeholder)
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value1}
+            onChange={setValue1}
+            placeholder="Selecciona una fruta"
+            label="Fruta"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Muestra el marcador de posición cuando no hay valor seleccionado
+          </p>
+        </div>
+
+        {/* Con valor seleccionado */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Con valor seleccionado
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value2}
+            onChange={setValue2}
+            placeholder="Selecciona una fruta"
+            label="Fruta"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Muestra la etiqueta de la opción seleccionada
+          </p>
+        </div>
+
+        {/* Disabled */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Deshabilitado
+          </h3>
+          <Select
+            options={fruitOptions}
+            value="apple"
+            disabled
+            placeholder="Selecciona una fruta"
+            label="Fruta (Deshabilitada)"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Estado deshabilitado con opacidad reducida
+          </p>
+        </div>
+
+        {/* Error */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Error
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value1}
+            onChange={setValue1}
+            error
+            description="Por favor selecciona una fruta"
+            placeholder="Selecciona una fruta"
+            label="Fruta (Requerido)"
+            required
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Estado de error con mensaje de validación
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 3. CON HELPER TEXT
+// ============================================
+export const ConTextoDeAyuda: Story = {
+  name: 'Con Texto de Ayuda',
+  args: { options: [] },
+  render: () => {
+    const [value1, setValue1] = useState<string | number>('');
+    const [value2, setValue2] = useState<string | number>('');
+
+    return (
+      <div className="space-y-8 p-6 w-[500px]">
+        {/* Con helper text */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Con texto de ayuda
+          </h3>
+          <Select
+            options={countryOptions}
+            value={value1}
+            onChange={setValue1}
+            placeholder="Selecciona un país"
+            label="País"
+            description="Selecciona tu país de residencia"
+          />
+        </div>
+
+        {/* Con error message */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Con mensaje de error
+          </h3>
+          <Select
+            options={countryOptions}
+            value={value2}
+            onChange={setValue2}
+            placeholder="Selecciona un país"
+            label="País"
+            error
+            description="El país es requerido"
+            required
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 4. OPCIONES DESHABILITADAS
+// ============================================
+export const OpcionesDeshabilitadas: Story = {
+  name: 'Opciones Deshabilitadas',
+  args: { options: [] },
+  render: () => {
+    const [value, setValue] = useState<string | number>('');
+
+    return (
+      <div className="p-6 w-[400px]">
+        <Select
+          options={statusOptions}
+          value={value}
+          onChange={setValue}
+          placeholder="Selecciona un estado"
+          label="Estado"
+          description="Nota: El estado Inactivo está deshabilitado"
+        />
+
+        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>💡 Tip:</strong> Algunas opciones pueden estar deshabilitadas y no se pueden seleccionar
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 5. FULL WIDTH
+// ============================================
+export const AnchoCompleto: Story = {
+  name: 'Ancho Completo',
+  args: { options: [] },
+  render: () => {
+    const [value, setValue] = useState<string | number>('');
+
+    return (
+      <div className="p-6 w-full max-w-2xl">
+        <Select
+          options={countryOptions}
+          value={value}
+          onChange={setValue}
+          placeholder="Selecciona un país"
+          label="País"
+          description="El select de ancho completo se adapta al contenedor"
+          fullWidth
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 6. FORMULARIO COMPLETO
+// ============================================
+export const EjemploDeFormulario: Story = {
+  name: 'Ejemplo de Formulario',
+  args: { options: [] },
+  render: () => {
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [country, setCountry] = useState<string | number>('');
+    const [status, setStatus] = useState<string | number>('');
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      console.log({ firstName, lastName, country, status });
+      alert(`Form submitted!\nCountry: ${country}\nStatus: ${status}`);
+    };
+
+    return (
+      <div className="p-6 max-w-md">
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <h2 className="text-2xl font-bold text-gray-700 dark:text-white mb-6">
+            Información de Usuario
+          </h2>
+
+          {/* Text inputs */}
+          <div className="space-y-2">
+            <label className="block text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              Nombre <span className="text-error-content">*</span>
+            </label>
+            <input
+              type="text"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              className="w-full px-3 py-2 border border-border-primary dark:border-dark-border-primary bg-bg-primary dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-dark-border-custom"
+              placeholder="Juan"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="block text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              Apellido <span className="text-error-content">*</span>
+            </label>
+            <input
+              type="text"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              className="w-full px-3 py-2 border border-border-primary dark:border-dark-border-primary bg-bg-primary dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-dark-border-custom"
+              placeholder="Pérez"
+              required
+            />
+          </div>
+
+          {/* Select fields */}
+          <Select
+            options={countryOptions}
+            value={country}
+            onChange={setCountry}
+            placeholder="Selecciona un país"
+            label="País"
+            description="Selecciona tu país de residencia"
+            required
+            fullWidth
+          />
+
+          <Select
+            options={statusOptions}
+            value={status}
+            onChange={setStatus}
+            placeholder="Selecciona un estado"
+            label="Estado de la Cuenta"
+            description="Selecciona el estado actual de tu cuenta"
+            required
+            fullWidth
+          />
+
+          <button
+            type="submit"
+            className="w-full px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold text-sm hover:bg-primary-custom-500 dark:hover:bg-dark-bg-inverse/90 transition-all"
+          >
+            Enviar
+          </button>
+        </form>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 7. MENU POSITION
+// ============================================
+export const PosicionDelMenu: Story = {
+  name: 'Posición del Menú',
+  args: { options: [] },
+  render: () => {
+    const [value1, setValue1] = useState<string | number>('');
+    const [value2, setValue2] = useState<string | number>('');
+
+    return (
+      <div className="space-y-32 p-6 w-[500px]">
+        {/* Bottom (default) */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Menu abre hacia abajo (default)
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value1}
+            onChange={setValue1}
+            placeholder="Selecciona una fruta"
+            label="Fruta"
+            menuPosition="bottom"
+          />
+        </div>
+
+        {/* Top */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Menu abre hacia arriba
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value2}
+            onChange={setValue2}
+            placeholder="Selecciona una fruta"
+            label="Fruta"
+            menuPosition="top"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Útil cuando el select está cerca del borde inferior de la pantalla
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 8. CASOS DE USO
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los selects en situaciones reales:
+ * formularios, filtros, configuración, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  args: { options: [] },
+  render: () => {
+    const [country, setCountry] = useState<string | number>('');
+    const [language, setLanguage] = useState<string | number>('');
+    const [category, setCategory] = useState<string | number>('');
+    const [status, setStatus] = useState<string | number>('');
+    const [priority, setPriority] = useState<string | number>('');
+    const [timezone, setTimezone] = useState<string | number>('');
+
+    return (
+      <div className="space-y-6">
+        {/* Formulario de Preferencias */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Preferencias de Usuario</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">
+              <Select
+                options={countryOptions}
+                value={country}
+                onChange={setCountry}
+                placeholder="Selecciona un país"
+                label="País"
+                description="Selecciona tu país de residencia"
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'en', label: 'English' },
+                  { value: 'es', label: 'Español' },
+                  { value: 'fr', label: 'Français' },
+                  { value: 'de', label: 'Deutsch' },
+                ]}
+                value={language}
+                onChange={setLanguage}
+                placeholder="Selecciona un idioma"
+                label="Idioma"
+                description="Elige tu idioma preferido"
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'utc-5', label: 'UTC-5 (Eastern Time)' },
+                  { value: 'utc-6', label: 'UTC-6 (Central Time)' },
+                  { value: 'utc-7', label: 'UTC-7 (Mountain Time)' },
+                  { value: 'utc-8', label: 'UTC-8 (Pacific Time)' },
+                ]}
+                value={timezone}
+                onChange={setTimezone}
+                placeholder="Selecciona zona horaria"
+                label="Zona Horaria"
+                description="Tu zona horaria local"
+                fullWidth
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Filtros de Búsqueda */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filtros de Búsqueda</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">
+              <Select
+                options={[
+                  { value: 'all', label: 'Todas las Categorías' },
+                  { value: 'electronics', label: 'Electrónica' },
+                  { value: 'clothing', label: 'Ropa' },
+                  { value: 'books', label: 'Libros' },
+                  { value: 'home', label: 'Hogar y Jardín' },
+                ]}
+                value={category}
+                onChange={setCategory}
+                placeholder="Todas las Categorías"
+                label="Categoría"
+                fullWidth
+              />
+              <Select
+                options={statusOptions}
+                value={status}
+                onChange={setStatus}
+                placeholder="Selecciona un estado"
+                label="Estado"
+                description="Filtrar por estado del elemento"
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'low', label: 'Baja' },
+                  { value: 'medium', label: 'Media' },
+                  { value: 'high', label: 'Alta' },
+                  { value: 'urgent', label: 'Urgente' },
+                ]}
+                value={priority}
+                onChange={setPriority}
+                placeholder="Cualquier prioridad"
+                label="Prioridad"
+                fullWidth
+              />
+            </div>
+          </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">
+            <div className="space-y-4">
+              <Select
+                options={[
+                  { value: 'general', label: 'Consulta General' },
+                  { value: 'support', label: 'Soporte Técnico' },
+                  { value: 'sales', label: 'Ventas' },
+                  { value: 'billing', label: 'Facturación' },
+                ]}
+                value={category}
+                onChange={setCategory}
+                placeholder="Selecciona un tema"
+                label="Asunto"
+                description="¿Cómo podemos ayudarte?"
+                required
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'low', label: 'Baja - Pregunta general' },
+                  { value: 'medium', label: 'Media - Necesito asistencia' },
+                  { value: 'high', label: 'Alta - Problema urgente' },
+                ]}
+                value={priority}
+                onChange={setPriority}
+                placeholder="Selecciona prioridad"
+                label="Prioridad"
+                description="¿Qué tan urgente es tu solicitud?"
+                fullWidth
+              />
+            </div>
+          </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">
+              <Select
+                options={countryOptions}
+                value=""
+                onChange={() => {}}
+                placeholder="Selecciona un país"
+                label="País"
+                error
+                description="El país es requerido"
+                required
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'card', label: 'Tarjeta de Crédito' },
+                  { value: 'paypal', label: 'PayPal' },
+                  { value: 'bank', label: 'Transferencia Bancaria' },
+                ]}
+                value=""
+                onChange={() => {}}
+                placeholder="Selecciona método de pago"
+                label="Método de Pago"
+                error
+                description="Por favor selecciona un método de pago"
+                required
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'subscribe', label: 'Suscribirse al boletín' },
+                  { value: 'unsubscribe', label: 'Cancelar suscripción' },
+                ]}
+                value={status}
+                onChange={setStatus}
+                placeholder="Selecciona preferencia"
+                label="Preferencia de Boletín"
+                description="Este campo es opcional"
+                fullWidth
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};