siesa-ui-kit 1.0.2 → 1.0.3

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

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

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

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