siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Divider/Divider.tsx

@@ -1,80 +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';
+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 +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;
-}
+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;
+}