siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,494 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Avatar } from './Avatar';
-
-/**
- * Avatar - Componente de avatar del sistema de diseño Siesa
- *
- * Sistema completo de avatares con soporte para:
- * - **Tamaños**: 4 (20px), 6 (24px), 8 (32px), 10 (40px)
- * - **Tipos**: Circular (completamente redondo) y Rounded (esquinas redondeadas)
- * - **Imagen**: Muestra una imagen de usuario
- * - **Iniciales**: Muestra iniciales cuando no hay imagen
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Avatar',
-  component: Avatar,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Componente para mostrar avatares de usuario con soporte para imágenes o iniciales. 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: {
-    size: {
-      control: 'select',
-      options: ['4', '6', '8', '10'],
-      description: 'Tamaño del avatar',
-      table: {
-        type: { summary: "'4' | '6' | '8' | '10'" },
-        defaultValue: { summary: "'10'" },
-        category: 'Appearance',
-      },
-    },
-    type: {
-      control: 'select',
-      options: ['circular', 'rounded'],
-      description: 'Tipo de forma del avatar',
-      table: {
-        type: { summary: "'circular' | 'rounded'" },
-        defaultValue: { summary: "'circular'" },
-        category: 'Appearance',
-      },
-    },
-    src: {
-      control: 'text',
-      description: 'URL de la imagen del avatar',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    alt: {
-      control: 'text',
-      description: 'Texto alternativo para la imagen',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    initials: {
-      control: 'text',
-      description: 'Iniciales a mostrar cuando no hay imagen',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con todas las props del Avatar en tiempo real.
- * Prueba diferentes tamaños, tipos e iniciales o imágenes.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    size: '10',
-    type: 'circular',
-    initials: 'JD',
-  },
-};
-
-// ============================================
-// 2. TODOS LOS TAMAÑOS
-// ============================================
-
-/**
- * Todos los Tamaños
- *
- * Vista de todos los tamaños disponibles del Avatar.
- * Muestra tanto circular como rounded en diferentes tamaños.
- */
-export const AllSizes: Story = {
-  name: 'Todos los Tamaños',
-  render: () => (
-    <div className="space-y-6">
-      {/* Circular con Imagen */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Circular con Imagen</h3>
-        <div className="flex items-center gap-4">
-          <Avatar
-            size="4"
-            type="circular"
-            src="https://i.pravatar.cc/150?img=1"
-            alt="Usuario"
-          />
-          <Avatar
-            size="6"
-            type="circular"
-            src="https://i.pravatar.cc/150?img=1"
-            alt="Usuario"
-          />
-          <Avatar
-            size="8"
-            type="circular"
-            src="https://i.pravatar.cc/150?img=1"
-            alt="Usuario"
-          />
-          <Avatar
-            size="10"
-            type="circular"
-            src="https://i.pravatar.cc/150?img=1"
-            alt="Usuario"
-          />
-        </div>
-        <div className="flex items-center gap-4 mt-2 text-xs text-gray-500 dark:text-gray-300">
-          <span className="w-5 text-center">20px</span>
-          <span className="w-6 text-center">24px</span>
-          <span className="w-8 text-center">32px</span>
-          <span className="w-10 text-center">40px</span>
-        </div>
-      </div>
-
-      {/* Rounded con Imagen */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Rounded con Imagen</h3>
-        <div className="flex items-center gap-4">
-          <Avatar
-            size="4"
-            type="rounded"
-            src="https://i.pravatar.cc/150?img=2"
-            alt="Usuario"
-          />
-          <Avatar
-            size="6"
-            type="rounded"
-            src="https://i.pravatar.cc/150?img=2"
-            alt="Usuario"
-          />
-          <Avatar
-            size="8"
-            type="rounded"
-            src="https://i.pravatar.cc/150?img=2"
-            alt="Usuario"
-          />
-          <Avatar
-            size="10"
-            type="rounded"
-            src="https://i.pravatar.cc/150?img=2"
-            alt="Usuario"
-          />
-        </div>
-      </div>
-
-      {/* Circular con Iniciales */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Circular con Iniciales</h3>
-        <div className="flex items-center gap-4">
-          <Avatar size="4" type="circular" initials="JD" />
-          <Avatar size="6" type="circular" initials="JD" />
-          <Avatar size="8" type="circular" initials="JD" />
-          <Avatar size="10" type="circular" initials="JD" />
-        </div>
-      </div>
-
-      {/* Rounded con Iniciales */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Rounded con Iniciales</h3>
-        <div className="flex items-center gap-4">
-          <Avatar size="4" type="rounded" initials="TW" />
-          <Avatar size="6" type="rounded" initials="TW" />
-          <Avatar size="8" type="rounded" initials="TW" />
-          <Avatar size="10" type="rounded" initials="TW" />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON IMÁGENES
-// ============================================
-
-/**
- * Con Imágenes
- *
- * Ejemplos de avatares con imágenes de usuario.
- */
-export const WithImages: Story = {
-  name: 'Con Imágenes',
-  render: () => (
-    <div className="space-y-6">
-      {/* Diferentes usuarios */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Diferentes Usuarios</h3>
-        <div className="flex items-center gap-4">
-          <Avatar
-            size="10"
-            type="circular"
-            src="https://i.pravatar.cc/150?img=3"
-            alt="Juan Pérez"
-          />
-          <Avatar
-            size="10"
-            type="circular"
-            src="https://i.pravatar.cc/150?img=5"
-            alt="María García"
-          />
-          <Avatar
-            size="10"
-            type="circular"
-            src="https://i.pravatar.cc/150?img=7"
-            alt="Carlos López"
-          />
-          <Avatar
-            size="10"
-            type="circular"
-            src="https://i.pravatar.cc/150?img=9"
-            alt="Ana Martínez"
-          />
-        </div>
-      </div>
-
-      {/* Rounded */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estilo Rounded</h3>
-        <div className="flex items-center gap-4">
-          <Avatar
-            size="10"
-            type="rounded"
-            src="https://i.pravatar.cc/150?img=11"
-            alt="Usuario 1"
-          />
-          <Avatar
-            size="10"
-            type="rounded"
-            src="https://i.pravatar.cc/150?img=12"
-            alt="Usuario 2"
-          />
-          <Avatar
-            size="10"
-            type="rounded"
-            src="https://i.pravatar.cc/150?img=13"
-            alt="Usuario 3"
-          />
-          <Avatar
-            size="10"
-            type="rounded"
-            src="https://i.pravatar.cc/150?img=14"
-            alt="Usuario 4"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON INICIALES
-// ============================================
-
-/**
- * Con Iniciales
- *
- * Ejemplos de avatares con iniciales de usuario.
- */
-export const WithInitials: Story = {
-  name: 'Con Iniciales',
-  render: () => (
-    <div className="space-y-6">
-      {/* Diferentes iniciales */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Diferentes Iniciales</h3>
-        <div className="flex items-center gap-4">
-          <Avatar size="10" type="circular" initials="JD" />
-          <Avatar size="10" type="circular" initials="AS" />
-          <Avatar size="10" type="circular" initials="MR" />
-          <Avatar size="10" type="circular" initials="KL" />
-        </div>
-      </div>
-
-      {/* Rounded */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estilo Rounded</h3>
-        <div className="flex items-center gap-4">
-          <Avatar size="10" type="rounded" initials="TW" />
-          <Avatar size="10" type="rounded" initials="GH" />
-          <Avatar size="10" type="rounded" initials="PQ" />
-          <Avatar size="10" type="rounded" initials="XY" />
-        </div>
-      </div>
-
-      {/* Diferentes tamaños */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Diferentes Tamaños</h3>
-        <div className="flex items-center gap-4">
-          <Avatar size="4" type="circular" initials="AB" />
-          <Avatar size="6" type="circular" initials="CD" />
-          <Avatar size="8" type="circular" initials="EF" />
-          <Avatar size="10" type="circular" initials="GH" />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar los avatares en situaciones reales:
- * listas de usuarios, comentarios, perfiles, etc.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => (
-    <div className="space-y-6">
-      {/* Lista de usuarios */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Lista de Usuarios</h3>
-        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg max-w-md">
-          <div className="space-y-4">
-            <div className="flex items-center gap-3">
-              <Avatar
-                size="10"
-                type="circular"
-                src="https://i.pravatar.cc/150?img=15"
-                alt="Juan Pérez"
-              />
-              <div>
-                <p className="font-bold text-sm text-gray-900 dark:text-white">Juan Pérez</p>
-                <p className="text-xs text-gray-500 dark:text-gray-300">juan.perez@ejemplo.com</p>
-              </div>
-            </div>
-            <div className="flex items-center gap-3">
-              <Avatar
-                size="10"
-                type="circular"
-                src="https://i.pravatar.cc/150?img=16"
-                alt="María García"
-              />
-              <div>
-                <p className="font-bold text-sm text-gray-900 dark:text-white">María García</p>
-                <p className="text-xs text-gray-500 dark:text-gray-300">maria.garcia@ejemplo.com</p>
-              </div>
-            </div>
-            <div className="flex items-center gap-3">
-              <Avatar size="10" type="circular" initials="CL" />
-              <div>
-                <p className="font-bold text-sm text-gray-900 dark:text-white">Carlos López</p>
-                <p className="text-xs text-gray-500 dark:text-gray-300">carlos.lopez@ejemplo.com</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Comentarios */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sección de Comentarios</h3>
-        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg max-w-md">
-          <div className="space-y-4">
-            <div className="flex gap-3">
-              <Avatar
-                size="8"
-                type="circular"
-                src="https://i.pravatar.cc/150?img=17"
-                alt="Ana Martínez"
-              />
-              <div className="flex-1">
-                <p className="font-bold text-sm text-gray-900 dark:text-white">Ana Martínez</p>
-                <p className="text-xs text-gray-500 dark:text-gray-300 mb-1">hace 2 horas</p>
-                <p className="text-sm text-gray-800 dark:text-gray-200">
-                  ¡Esta es una gran funcionalidad! Espero poder usarla pronto.
-                </p>
-              </div>
-            </div>
-            <div className="flex gap-3">
-              <Avatar size="8" type="circular" initials="DG" />
-              <div className="flex-1">
-                <p className="font-bold text-sm text-gray-900 dark:text-white">Diego González</p>
-                <p className="text-xs text-gray-500 dark:text-gray-300 mb-1">hace 5 horas</p>
-                <p className="text-sm text-gray-800 dark:text-gray-200">
-                  ¡Excelente trabajo en este componente!
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Grupo de avatares */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Grupo de Colaboradores</h3>
-        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg max-w-md">
-          <p className="text-sm font-bold mb-3 text-gray-900 dark:text-white">Miembros del Equipo</p>
-          <div className="flex items-center -space-x-2">
-            <Avatar
-              size="8"
-              type="circular"
-              src="https://i.pravatar.cc/150?img=20"
-              alt="Miembro 1"
-              className="ring-2 ring-white dark:ring-gray-800"
-            />
-            <Avatar
-              size="8"
-              type="circular"
-              src="https://i.pravatar.cc/150?img=21"
-              alt="Miembro 2"
-              className="ring-2 ring-white dark:ring-gray-800"
-            />
-            <Avatar
-              size="8"
-              type="circular"
-              src="https://i.pravatar.cc/150?img=22"
-              alt="Miembro 3"
-              className="ring-2 ring-white dark:ring-gray-800"
-            />
-            <Avatar
-              size="8"
-              type="circular"
-              initials="AM"
-              className="ring-2 ring-white dark:ring-gray-800"
-            />
-            <Avatar
-              size="8"
-              type="circular"
-              initials="+5"
-              className="ring-2 ring-white dark:ring-gray-800"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Perfil de usuario */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Perfil de Usuario</h3>
-        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg max-w-md">
-          <div className="flex items-center gap-4 mb-4">
-            <Avatar
-              size="10"
-              type="circular"
-              src="https://i.pravatar.cc/150?img=25"
-              alt="Laura Fernández"
-            />
-            <div>
-              <p className="font-bold text-lg text-gray-900 dark:text-white">Laura Fernández</p>
-              <p className="text-sm text-gray-500 dark:text-gray-300">Diseñadora de Producto</p>
-            </div>
-          </div>
-          <p className="text-sm text-gray-700 dark:text-gray-200">
-            Apasionada por crear interfaces de usuario hermosas y funcionales.
-            Me encanta colaborar con equipos y resolver desafíos de diseño.
-          </p>
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/Avatar/Avatar.tsx

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