siesa-ui-kit 1.0.4 → 1.0.5

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';

package/src/components/Avatar/Avatar.types.ts

@@ -1,53 +1,53 @@
-import type { ImgHTMLAttributes } from 'react';
-
-/**
- * Tamaños del Avatar
- * Basado en el sistema de espaciado de Siesa
- */
-export type AvatarSize = '4' | '6' | '8' | '10';
-
-/**
- * Tipo de forma del Avatar
- */
-export type AvatarType = 'circular' | 'rounded';
-
-/**
- * Props del componente Avatar
- */
-export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size'> {
-  /**
-   * Tamaño del avatar
-   * - 4: 20px
-   * - 6: 24px
-   * - 8: 32px
-   * - 10: 40px
-   * @default '10'
-   */
-  size?: AvatarSize;
-
-  /**
-   * Tipo de forma del avatar
-   * @default 'circular'
-   */
-  type?: AvatarType;
-
-  /**
-   * URL de la imagen del avatar
-   */
-  src?: string;
-
-  /**
-   * Texto alternativo para la imagen
-   */
-  alt?: string;
-
-  /**
-   * Iniciales a mostrar cuando no hay imagen
-   */
-  initials?: string;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-}
+import type { ImgHTMLAttributes } from 'react';
+
+/**
+ * Tamaños del Avatar
+ * Basado en el sistema de espaciado de Siesa
+ */
+export type AvatarSize = '4' | '6' | '8' | '10';
+
+/**
+ * Tipo de forma del Avatar
+ */
+export type AvatarType = 'circular' | 'rounded';
+
+/**
+ * Props del componente Avatar
+ */
+export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size'> {
+  /**
+   * Tamaño del avatar
+   * - 4: 20px
+   * - 6: 24px
+   * - 8: 32px
+   * - 10: 40px
+   * @default '10'
+   */
+  size?: AvatarSize;
+
+  /**
+   * Tipo de forma del avatar
+   * @default 'circular'
+   */
+  type?: AvatarType;
+
+  /**
+   * URL de la imagen del avatar
+   */
+  src?: string;
+
+  /**
+   * Texto alternativo para la imagen
+   */
+  alt?: string;
+
+  /**
+   * Iniciales a mostrar cuando no hay imagen
+   */
+  initials?: string;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}