siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Alert/Alert.tsx

@@ -1,106 +1,106 @@
-import { forwardRef } from 'react';
-import type { AlertProps } from './Alert.types';
-import { Button } from '../Button/Button';
-
-/**
- * Alert - Componente de alerta/diálogo del sistema de diseño Siesa
- *
- * Componente modal para confirmaciones con soporte para:
- * - Título y descripción
- * - Contenido personalizado (children)
- * - Botones de acción personalizados o por defecto
- * - Dark mode
- *
- * @example
- * ```tsx
- * <Alert
- *   title="Are you sure you want to refund this payment?"
- *   description="The refund will be reflected in 2 to 3 business days."
- *   onCancel={() => console.log('Cancelled')}
- *   onConfirm={() => console.log('Confirmed')}
- *   confirmText="Refund"
- * />
- * ```
- */
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  (
-    {
-      title,
-      description,
-      children,
-      actions,
-      onCancel,
-      onConfirm,
-      cancelText = 'Cancelar',
-      confirmText = 'Confirmar',
-      className = '',
-      ...props
-    },
-    ref
-  ) => {
-    // Si se proveen actions personalizadas, usarlas. Si no, usar botones por defecto
-    const actionButtons = actions || (
-      <>
-        {onCancel && (
-          <Button type="plain" size="base" onClick={onCancel}>
-            {cancelText}
-          </Button>
-        )}
-        {onConfirm && (
-          <Button type="default" size="base" onClick={onConfirm}>
-            {confirmText}
-          </Button>
-        )}
-      </>
-    );
-
-    return (
-      <div
-        ref={ref}
-        className={`
-          w-[512px]
-          bg-white
-          dark:bg-dark-bg-primary
-          border
-          border-border-primary
-          dark:border-dark-border-primary
-          rounded-xl
-          ${className}
-        `.trim().replace(/\s+/g, ' ')}
-        {...props}
-      >
-        {/* Content Container */}
-        <div className="p-6 flex flex-col gap-4">
-          {/* Text Section */}
-          <div className="flex flex-col gap-3">
-            {/* Title */}
-            <p className="text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary">
-              {title}
-            </p>
-
-            {/* Description (optional) */}
-            {description && (
-              <p className="text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary">
-                {description}
-              </p>
-            )}
-          </div>
-
-          {/* Body Content (optional) */}
-          {children && (
-            <div className="flex flex-col gap-3">
-              {children}
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="flex flex-wrap gap-3 items-center justify-end">
-            {actionButtons}
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-Alert.displayName = 'Alert';
+import { forwardRef } from 'react';
+import type { AlertProps } from './Alert.types';
+import { Button } from '../Button/Button';
+
+/**
+ * Alert - Componente de alerta/diálogo del sistema de diseño Siesa
+ *
+ * Componente modal para confirmaciones con soporte para:
+ * - Título y descripción
+ * - Contenido personalizado (children)
+ * - Botones de acción personalizados o por defecto
+ * - Dark mode
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   title="Are you sure you want to refund this payment?"
+ *   description="The refund will be reflected in 2 to 3 business days."
+ *   onCancel={() => console.log('Cancelled')}
+ *   onConfirm={() => console.log('Confirmed')}
+ *   confirmText="Refund"
+ * />
+ * ```
+ */
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      title,
+      description,
+      children,
+      actions,
+      onCancel,
+      onConfirm,
+      cancelText = 'Cancelar',
+      confirmText = 'Confirmar',
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    // Si se proveen actions personalizadas, usarlas. Si no, usar botones por defecto
+    const actionButtons = actions || (
+      <>
+        {onCancel && (
+          <Button type="plain" size="base" onClick={onCancel}>
+            {cancelText}
+          </Button>
+        )}
+        {onConfirm && (
+          <Button type="default" size="base" onClick={onConfirm}>
+            {confirmText}
+          </Button>
+        )}
+      </>
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          w-[512px]
+          bg-white
+          dark:bg-dark-bg-primary
+          border
+          border-border-primary
+          dark:border-dark-border-primary
+          rounded-xl
+          ${className}
+        `.trim().replace(/\s+/g, ' ')}
+        {...props}
+      >
+        {/* Content Container */}
+        <div className="p-6 flex flex-col gap-4">
+          {/* Text Section */}
+          <div className="flex flex-col gap-3">
+            {/* Title */}
+            <p className="text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary">
+              {title}
+            </p>
+
+            {/* Description (optional) */}
+            {description && (
+              <p className="text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary">
+                {description}
+              </p>
+            )}
+          </div>
+
+          {/* Body Content (optional) */}
+          {children && (
+            <div className="flex flex-col gap-3">
+              {children}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex flex-wrap gap-3 items-center justify-end">
+            {actionButtons}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';

package/src/components/Alert/Alert.types.ts

@@ -1,54 +1,54 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/**
- * Props del componente Alert
- */
-export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Título del alert (texto principal en negrita)
-   */
-  title: string;
-
-  /**
-   * Descripción opcional (texto secundario)
-   */
-  description?: string;
-
-  /**
-   * Contenido opcional del body (por ejemplo, input, placeholder, etc.)
-   */
-  children?: ReactNode;
-
-  /**
-   * Botones de acción personalizados
-   * Si no se proveen, se mostrarán los botones por defecto (Cancel/Confirm)
-   */
-  actions?: ReactNode;
-
-  /**
-   * Callback cuando se hace click en Cancel
-   */
-  onCancel?: () => void;
-
-  /**
-   * Callback cuando se hace click en Confirm
-   */
-  onConfirm?: () => void;
-
-  /**
-   * Texto del botón de cancelar
-   * @default "Cancelar"
-   */
-  cancelText?: string;
-
-  /**
-   * Texto del botón de confirmar
-   * @default "Confirmar"
-   */
-  confirmText?: string;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-}
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Props del componente Alert
+ */
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Título del alert (texto principal en negrita)
+   */
+  title: string;
+
+  /**
+   * Descripción opcional (texto secundario)
+   */
+  description?: string;
+
+  /**
+   * Contenido opcional del body (por ejemplo, input, placeholder, etc.)
+   */
+  children?: ReactNode;
+
+  /**
+   * Botones de acción personalizados
+   * Si no se proveen, se mostrarán los botones por defecto (Cancel/Confirm)
+   */
+  actions?: ReactNode;
+
+  /**
+   * Callback cuando se hace click en Cancel
+   */
+  onCancel?: () => void;
+
+  /**
+   * Callback cuando se hace click en Confirm
+   */
+  onConfirm?: () => void;
+
+  /**
+   * Texto del botón de cancelar
+   * @default "Cancelar"
+   */
+  cancelText?: string;
+
+  /**
+   * Texto del botón de confirmar
+   * @default "Confirmar"
+   */
+  confirmText?: string;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}

package/src/components/Avatar/Avatar.tsx

@@ -1,143 +1,143 @@
-import { forwardRef } from 'react';
-import type { AvatarProps } from './Avatar.types';
-
-/**
- * Avatar - Componente de avatar del sistema de diseño Siesa
- *
- * Componente para mostrar imágenes de usuario o iniciales con soporte para:
- * - Tamaños: 4 (20px), 6 (24px), 8 (32px), 10 (40px)
- * - Tipos: circular (completamente redondo) y rounded (esquinas redondeadas)
- * - Imagen o iniciales
- * - Dark mode completo
- *
- * 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
- * - Tipografía adaptativa según tamaño
- * - Type safety con TypeScript estricto
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * // Con imagen
- * <Avatar
- *   src="/path/to/image.jpg"
- *   alt="John Doe"
- *   size="10"
- *   type="circular"
- * />
- *
- * // Con iniciales
- * <Avatar
- *   initials="JD"
- *   size="10"
- *   type="circular"
- * />
- * ```
- */
-export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  (
-    {
-      size = '10',
-      type = 'circular',
-      src,
-      alt = '',
-      initials,
-      className = '',
-      ...props
-    },
-    ref
-  ) => {
-    // ===== CLASES DE TAMAÑO =====
-    // Tamaño del contenedor del avatar
-    const containerSizeClasses = {
-      '4': 'w-5 h-5',
-      '6': 'w-6 h-6',
-      '8': 'w-8 h-8',
-      '10': 'w-10 h-10',
-    };
-
-    // ===== CLASES DE TEXTO =====
-    // Tamaño de texto para iniciales (basado en sistema tipográfico)
-    const textSizeClasses = {
-      '4': 'text-xs',   // 12px - Paragraph Tiny
-      '6': 'text-xs',   // 12px - Paragraph Tiny
-      '8': 'text-sm',   // 14px - Paragraph Small
-      '10': 'text-base', // 16px - Paragraph Base
-    };
-
-    // ===== CLASES DE TIPO (Forma) =====
-    const typeClasses = {
-      circular: 'rounded-full',
-      rounded: 'rounded-md',
-    };
-
-    // ===== CLASES BASE =====
-    const baseClasses = `
-      relative
-      inline-flex
-      items-center
-      justify-center
-      overflow-hidden
-      ${containerSizeClasses[size]}
-      ${typeClasses[type]}
-    `;
-
-    // Si hay imagen, mostrarla
-    if (src) {
-      return (
-        <div
-          ref={ref}
-          className={`${baseClasses} ${className}`.trim().replace(/\s+/g, ' ')}
-        >
-          <img
-            src={src}
-            alt={alt}
-            className="w-full h-full object-cover"
-            {...(props as any)}
-          />
-        </div>
-      );
-    }
-
-    // Si hay iniciales, mostrarlas
-    if (initials) {
-      return (
-        <div
-          ref={ref}
-          className={`
-            ${baseClasses}
-            ${textSizeClasses[size]}
-            bg-content-primary
-            text-white
-            font-normal
-            dark:bg-dark-bg-inverse
-            dark:text-dark-content-inverse
-            ${className}
-          `.trim().replace(/\s+/g, ' ')}
-        >
-          <span className="leading-none">{initials}</span>
-        </div>
-      );
-    }
-
-    // Fallback: avatar vacío
-    return (
-      <div
-        ref={ref}
-        className={`
-          ${baseClasses}
-          bg-background-secondary
-          dark:bg-dark-bg-primary
-          ${className}
-        `.trim().replace(/\s+/g, ' ')}
-      />
-    );
-  }
-);
-
-Avatar.displayName = 'Avatar';
+import { forwardRef } from 'react';
+import type { AvatarProps } from './Avatar.types';
+
+/**
+ * Avatar - Componente de avatar del sistema de diseño Siesa
+ *
+ * Componente para mostrar imágenes de usuario o iniciales con soporte para:
+ * - Tamaños: 4 (20px), 6 (24px), 8 (32px), 10 (40px)
+ * - Tipos: circular (completamente redondo) y rounded (esquinas redondeadas)
+ * - Imagen o iniciales
+ * - Dark mode completo
+ *
+ * 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
+ * - Tipografía adaptativa según tamaño
+ * - Type safety con TypeScript estricto
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Con imagen
+ * <Avatar
+ *   src="/path/to/image.jpg"
+ *   alt="John Doe"
+ *   size="10"
+ *   type="circular"
+ * />
+ *
+ * // Con iniciales
+ * <Avatar
+ *   initials="JD"
+ *   size="10"
+ *   type="circular"
+ * />
+ * ```
+ */
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  (
+    {
+      size = '10',
+      type = 'circular',
+      src,
+      alt = '',
+      initials,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    // ===== CLASES DE TAMAÑO =====
+    // Tamaño del contenedor del avatar
+    const containerSizeClasses = {
+      '4': 'w-5 h-5',
+      '6': 'w-6 h-6',
+      '8': 'w-8 h-8',
+      '10': 'w-10 h-10',
+    };
+
+    // ===== CLASES DE TEXTO =====
+    // Tamaño de texto para iniciales (basado en sistema tipográfico)
+    const textSizeClasses = {
+      '4': 'text-xs',   // 12px - Paragraph Tiny
+      '6': 'text-xs',   // 12px - Paragraph Tiny
+      '8': 'text-sm',   // 14px - Paragraph Small
+      '10': 'text-base', // 16px - Paragraph Base
+    };
+
+    // ===== CLASES DE TIPO (Forma) =====
+    const typeClasses = {
+      circular: 'rounded-full',
+      rounded: 'rounded-md',
+    };
+
+    // ===== CLASES BASE =====
+    const baseClasses = `
+      relative
+      inline-flex
+      items-center
+      justify-center
+      overflow-hidden
+      ${containerSizeClasses[size]}
+      ${typeClasses[type]}
+    `;
+
+    // Si hay imagen, mostrarla
+    if (src) {
+      return (
+        <div
+          ref={ref}
+          className={`${baseClasses} ${className}`.trim().replace(/\s+/g, ' ')}
+        >
+          <img
+            src={src}
+            alt={alt}
+            className="w-full h-full object-cover"
+            {...(props as any)}
+          />
+        </div>
+      );
+    }
+
+    // Si hay iniciales, mostrarlas
+    if (initials) {
+      return (
+        <div
+          ref={ref}
+          className={`
+            ${baseClasses}
+            ${textSizeClasses[size]}
+            bg-content-primary
+            text-white
+            font-normal
+            dark:bg-dark-bg-inverse
+            dark:text-dark-content-inverse
+            ${className}
+          `.trim().replace(/\s+/g, ' ')}
+        >
+          <span className="leading-none">{initials}</span>
+        </div>
+      );
+    }
+
+    // Fallback: avatar vacío
+    return (
+      <div
+        ref={ref}
+        className={`
+          ${baseClasses}
+          bg-background-secondary
+          dark:bg-dark-bg-primary
+          ${className}
+        `.trim().replace(/\s+/g, ' ')}
+      />
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';