siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,263 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Divider } from './Divider';
+
+/**
+ * Divider - Componente de divisor del sistema de diseño Siesa
+ *
+ * Sistema completo de divisores con soporte para:
+ * - **Tipos**: Default (más visible) y Soft (más sutil)
+ * - **Ancho completo**: Se adapta al contenedor
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Divider',
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Líneas horizontales para separar contenido con diferentes niveles de visibilidad. Diseñado para mantener consistencia visual en toda la aplicación.',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['default', 'soft'],
+      description: 'Tipo de divider',
+      table: {
+        type: { summary: "'default' | 'soft'" },
+        defaultValue: { summary: "'default'" },
+        category: 'Apariencia',
+      },
+    },
+  },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con todas las props del Divider en tiempo real.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    type: 'default',
+  },
+  render: (args) => (
+    <div className="w-80">
+      <Divider {...args} />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. TIPOS
+// ============================================
+
+/**
+ * Tipos de Divider
+ *
+ * Vista de los dos tipos disponibles: Default (más visible) y Soft (más sutil).
+ */
+export const Tipos: Story = {
+  name: 'Tipos',
+  render: () => (
+    <div className="space-y-6">
+      {/* Default */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Default</h3>
+        <div className="w-80">
+          <Divider type="default" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Línea más visible para separaciones claras</p>
+      </div>
+
+      {/* Soft */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Soft</h3>
+        <div className="w-80">
+          <Divider type="soft" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Línea más sutil para separaciones suaves</p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los dividers en situaciones reales:
+ * listas, formularios, secciones, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => (
+    <div className="space-y-6">
+      {/* Lista de elementos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Lista de Elementos</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
+          <div className="space-y-3">
+            <div>
+              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 1</p>
+              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 1</p>
+            </div>
+            <Divider type="default" />
+            <div>
+              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 2</p>
+              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 2</p>
+            </div>
+            <Divider type="default" />
+            <div>
+              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 3</p>
+              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 3</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Formulario con secciones */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario con Secciones</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
+          <div className="space-y-4">
+            <div>
+              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Información Personal</h4>
+              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
+                <p>Nombre: Juan Pérez</p>
+                <p>Email: juan.perez@ejemplo.com</p>
+              </div>
+            </div>
+
+            <Divider type="soft" />
+
+            <div>
+              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Detalles de Contacto</h4>
+              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
+                <p>Teléfono: +1 234 567 890</p>
+                <p>Dirección: Calle Principal 123</p>
+              </div>
+            </div>
+
+            <Divider type="soft" />
+
+            <div>
+              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Preferencias</h4>
+              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
+                <p>Idioma: Español</p>
+                <p>Zona Horaria: UTC-5</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Menú */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Menú Dropdown</h3>
+        <div className="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-64 shadow-md">
+          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
+            Perfil
+          </button>
+          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
+            Configuración
+          </button>
+          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
+            Facturación
+          </button>
+
+          <div className="my-1">
+            <Divider type="default" />
+          </div>
+
+          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-red-600 dark:text-red-400">
+            Cerrar Sesión
+          </button>
+        </div>
+      </div>
+
+      {/* Tarjeta de contenido */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Tarjeta de Contenido</h3>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96 overflow-hidden">
+          <div className="p-6">
+            <h4 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">Título del Artículo</h4>
+            <p className="text-sm text-gray-500 dark:text-gray-300 mb-4">
+              Esta es una breve introducción al artículo que brinda a los lectores una visión general
+              de qué esperar.
+            </p>
+          </div>
+
+          <Divider type="soft" />
+
+          <div className="p-6">
+            <p className="text-sm text-gray-800 dark:text-gray-300 leading-relaxed">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+              veniam, quis nostrud exercitation ullamco laboris.
+            </p>
+          </div>
+
+          <Divider type="soft" />
+
+          <div className="p-6 bg-gray-50 dark:bg-gray-900">
+            <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+              <span>Publicado: 15 de Enero, 2024</span>
+              <span>Tiempo de lectura: 5 min</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Timeline */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Timeline</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
+          <div className="space-y-4">
+            <div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Hoy, 9:00 AM</p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">Reunión de inicio del proyecto</p>
+            </div>
+
+            <Divider type="soft" />
+
+            <div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Hoy, 2:00 PM</p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">Sesión de revisión de diseño</p>
+            </div>
+
+            <Divider type="soft" />
+
+            <div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Mañana, 10:00 AM</p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">Planificación del sprint de desarrollo</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,80 @@
+import { forwardRef } from 'react';
+import type { DividerProps } from './Divider.types';
+
+/**
+ * Divider del sistema de diseño Siesa
+ *
+ * Línea horizontal de 1px para separar contenido visual o semánticamente.
+ * Implementa dos variantes con soporte completo de dark mode.
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Componente semántico usando elemento <hr>
+ *
+ * @see docs/colors.md - Sistema de colores (border-primary, border-secondary)
+ * @see docs/spacing.md - Sistema de espaciado (altura de 1px)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4096-8445 - Especificaciones Figma
+ *
+ * @example
+ * ```tsx
+ * // Default divider (más visible)
+ * <Divider />
+ * <Divider type="default" />
+ *
+ * // Soft divider (más sutil)
+ * <Divider type="soft" />
+ *
+ * // Con clases personalizadas
+ * <Divider className="my-6" />
+ * ```
+ */
+export const Divider = forwardRef<HTMLHRElement, DividerProps>(
+  (
+    {
+      type = 'default',
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    // ===== CLASES DE TIPO =====
+    // Orden de modificadores: {dark}:{utility}
+    const typeClasses = {
+      // Default: Línea más visible para separaciones claras
+      // Light: border-primary (#e4e4e7)
+      // Dark: dark-border-primary (#71717a)
+      default: 'bg-border-primary dark:bg-dark-border-primary',
+
+      // Soft: Línea más sutil para separaciones suaves
+      // Light: border-secondary (#f4f4f5 - muy claro)
+      // Dark: gray-700 (#374151 - gris medio-oscuro, más sutil que dark-border-primary)
+      soft: 'bg-border-secondary dark:bg-gray-700',
+    };
+
+    // ===== CLASES BASE =====
+    const baseClasses = 'w-full h-px border-0';
+
+    // ===== COMBINAR CLASES =====
+    const finalClasses = [
+      baseClasses,
+      typeClasses[type],
+      className,
+    ]
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    return (
+      <hr
+        ref={ref}
+        className={finalClasses}
+        {...props}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';

package/src/components/Divider/Divider.types.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Tipo de divider
+ */
+export type DividerType = 'default' | 'soft';
+
+/**
+ * Props del componente Divider
+ */
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+  /**
+   * Tipo de divider
+   * - default: Línea más visible (border-primary)
+   * - soft: Línea más sutil (border-secondary)
+   * @default 'default'
+   */
+  type?: DividerType;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}