siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/DescriptionList/DescriptionList.tsx

@@ -1,96 +1,96 @@
-import { forwardRef } from 'react';
-import type { DescriptionListProps } from './DescriptionList.types';
-
-/**
- * DescriptionList del sistema de diseño Siesa
- *
- * Componente para mostrar información estructurada en formato clave-valor (term/details).
- * Layout de dos columnas con separador inferior entre items.
- *
- * 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
- * - Layout flexible y responsive
- * - Tipografía del sistema (Paragraph/Small - 14px)
- *
- * @see docs/colors.md - Sistema de colores (content-primary, content-secondary)
- * @see docs/typography.md - Sistema tipográfico (Paragraph/Small)
- * @see docs/spacing.md - Sistema de espaciado (padding, gaps)
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4103-8449 - Especificaciones Figma
- *
- * @example
- * ```tsx
- * // Item básico
- * <DescriptionList
- *   term="Customer"
- *   details="Jhonatan Diaz"
- * />
- *
- * // Lista completa
- * <div>
- *   <DescriptionList term="Event" details="Bear Hug: Live in Concert" />
- *   <DescriptionList term="Amount" details="$120,000 COP" />
- *   <DescriptionList term="Fee" details="$20,000 COP" />
- * </div>
- * ```
- */
-export const DescriptionList = forwardRef<HTMLDivElement, DescriptionListProps>(
-  (
-    {
-      term,
-      details,
-      className = '',
-      ...props
-    },
-    ref
-  ) => {
-    // ===== CLASES BASE =====
-    const baseClasses = `
-      flex
-      flex-wrap
-      gap-1
-      items-start
-      py-2.5
-      border-b
-      border-border-secondary
-      dark:border-gray-700
-    `;
-
-    // ===== CLASES DE COLUMNA =====
-    // Cada columna ocupa el 50% del espacio disponible (flex-1)
-    // con un ancho mínimo de 180px para mantener legibilidad
-    const columnClasses = 'flex-1 min-w-[180px]';
-
-    // ===== COMBINAR CLASES =====
-    const finalClasses = [baseClasses, className]
-      .join(' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    return (
-      <div ref={ref} className={finalClasses} {...props}>
-        {/* Term Column (izquierda) */}
-        {/* Light: content-secondary (#a1a1aa) */}
-        {/* Dark: gray-400 (#9ca3af - gris medio claro para mantener contraste) */}
-        <div className={columnClasses}>
-          <p className="text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal">
-            {term}
-          </p>
-        </div>
-
-        {/* Details Column (derecha) */}
-        {/* Light: content-primary (#18181b) */}
-        {/* Dark: dark-content-primary (#ffffff) */}
-        <div className={columnClasses}>
-          <p className="text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal">
-            {details}
-          </p>
-        </div>
-      </div>
-    );
-  }
-);
-
-DescriptionList.displayName = 'DescriptionList';
+import { forwardRef } from 'react';
+import type { DescriptionListProps } from './DescriptionList.types';
+
+/**
+ * DescriptionList del sistema de diseño Siesa
+ *
+ * Componente para mostrar información estructurada en formato clave-valor (term/details).
+ * Layout de dos columnas con separador inferior entre items.
+ *
+ * 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
+ * - Layout flexible y responsive
+ * - Tipografía del sistema (Paragraph/Small - 14px)
+ *
+ * @see docs/colors.md - Sistema de colores (content-primary, content-secondary)
+ * @see docs/typography.md - Sistema tipográfico (Paragraph/Small)
+ * @see docs/spacing.md - Sistema de espaciado (padding, gaps)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4103-8449 - Especificaciones Figma
+ *
+ * @example
+ * ```tsx
+ * // Item básico
+ * <DescriptionList
+ *   term="Customer"
+ *   details="Jhonatan Diaz"
+ * />
+ *
+ * // Lista completa
+ * <div>
+ *   <DescriptionList term="Event" details="Bear Hug: Live in Concert" />
+ *   <DescriptionList term="Amount" details="$120,000 COP" />
+ *   <DescriptionList term="Fee" details="$20,000 COP" />
+ * </div>
+ * ```
+ */
+export const DescriptionList = forwardRef<HTMLDivElement, DescriptionListProps>(
+  (
+    {
+      term,
+      details,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    // ===== CLASES BASE =====
+    const baseClasses = `
+      flex
+      flex-wrap
+      gap-1
+      items-start
+      py-2.5
+      border-b
+      border-border-secondary
+      dark:border-gray-700
+    `;
+
+    // ===== CLASES DE COLUMNA =====
+    // Cada columna ocupa el 50% del espacio disponible (flex-1)
+    // con un ancho mínimo de 180px para mantener legibilidad
+    const columnClasses = 'flex-1 min-w-[180px]';
+
+    // ===== COMBINAR CLASES =====
+    const finalClasses = [baseClasses, className]
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    return (
+      <div ref={ref} className={finalClasses} {...props}>
+        {/* Term Column (izquierda) */}
+        {/* Light: content-secondary (#a1a1aa) */}
+        {/* Dark: gray-400 (#9ca3af - gris medio claro para mantener contraste) */}
+        <div className={columnClasses}>
+          <p className="text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal">
+            {term}
+          </p>
+        </div>
+
+        {/* Details Column (derecha) */}
+        {/* Light: content-primary (#18181b) */}
+        {/* Dark: dark-content-primary (#ffffff) */}
+        <div className={columnClasses}>
+          <p className="text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal">
+            {details}
+          </p>
+        </div>
+      </div>
+    );
+  }
+);
+
+DescriptionList.displayName = 'DescriptionList';

package/src/components/DescriptionList/DescriptionList.types.ts

@@ -1,29 +1,29 @@
-import type { HTMLAttributes } from 'react';
-
-/**
- * Props del componente DescriptionList
- *
- * Componente para mostrar pares clave-valor en formato de dos columnas.
- */
-export interface DescriptionListProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Término o etiqueta (columna izquierda)
-   * Mostrado en color secundario para diferenciarlo del valor
-   *
-   * @example "Customer", "Event", "Amount"
-   */
-  term: string;
-
-  /**
-   * Detalles o valor (columna derecha)
-   * Mostrado en color primario como información principal
-   *
-   * @example "Jhonatan Diaz", "Bear Hug: Live in Concert", "$120,000 COP"
-   */
-  details: string;
-
-  /**
-   * Clases CSS adicionales para el contenedor
-   */
-  className?: string;
-}
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Props del componente DescriptionList
+ *
+ * Componente para mostrar pares clave-valor en formato de dos columnas.
+ */
+export interface DescriptionListProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Término o etiqueta (columna izquierda)
+   * Mostrado en color secundario para diferenciarlo del valor
+   *
+   * @example "Customer", "Event", "Amount"
+   */
+  term: string;
+
+  /**
+   * Detalles o valor (columna derecha)
+   * Mostrado en color primario como información principal
+   *
+   * @example "Jhonatan Diaz", "Bear Hug: Live in Concert", "$120,000 COP"
+   */
+  details: string;
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+}

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;
+}