siesa-ui-kit 1.0.2 → 1.0.3

package/src/components/Badge/Badge.stories.tsx

@@ -1,339 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Badge } from './Badge';
-
-// Icon de check simple para los ejemplos
-const CheckIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 12 12"
-    fill="currentColor"
-    className="w-3 h-3"
-  >
-    <path
-      fillRule="evenodd"
-      d="M9.707 3.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L5 6.586l3.293-3.293a1 1 0 0 1 1.414 0z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Badge - Componente de badge del sistema de diseño Siesa
- *
- * Sistema completo de badges con soporte para:
- * - **21 variantes de color**: Zinc, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose, Primary, Secondary, Tertiary
- * - **Icono opcional**: A la izquierda del label
- * - **Contador**: Notification badge con número
- * - **Estados hover**: Transiciones suaves
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Componente para mostrar badges/etiquetas con múltiples variantes de color. Ideal para estados, categorías, tags, notificaciones, etc.',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'gray', value: '#f3f4f6' },
-        { name: 'dark', value: '#1f2937' },
-      ],
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: 'select',
-      options: [
-        'zinc',
-        'red',
-        'orange',
-        'amber',
-        'yellow',
-        'lime',
-        'green',
-        'emerald',
-        'teal',
-        'cyan',
-        'sky',
-        'blue',
-        'indigo',
-        'violet',
-        'purple',
-        'fuchsia',
-        'pink',
-        'rose',
-        'primary',
-        'secondary',
-        'tertiary',
-      ],
-      description: 'Color del badge',
-      table: {
-        type: { summary: 'BadgeColor' },
-        defaultValue: { summary: 'zinc' },
-        category: 'Appearance',
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Texto del badge',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    leftIcon: {
-      control: false,
-      description: 'Icono opcional a la izquierda',
-      table: {
-        type: { summary: 'ReactElement' },
-        category: 'Content',
-      },
-    },
-    count: {
-      control: 'number',
-      description: 'Número para el notification badge',
-      table: {
-        type: { summary: 'number' },
-        category: 'Content',
-      },
-    },
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con el Badge en tiempo real.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    color: 'blue',
-    label: 'Etiqueta',
-    leftIcon: <CheckIcon />,
-    count: 3,
-  },
-};
-
-// ============================================
-// 2. TODAS LAS VARIANTES DE COLOR
-// ============================================
-
-/**
- * Todas las Variantes de Color
- *
- * Vista de todas las 21 variantes de color disponibles.
- */
-export const AllColors: Story = {
-  name: 'Todas las Variantes de Color',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Zinc to Rose */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Paleta de Colores</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="zinc" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="red" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="orange" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="amber" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="yellow" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="lime" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="green" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="emerald" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="teal" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="cyan" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="sky" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="blue" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="indigo" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="violet" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="purple" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="fuchsia" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="pink" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="rose" label="Label" leftIcon={<CheckIcon />} />
-        </div>
-      </div>
-
-      {/* System Colors */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Colores del Sistema</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="primary" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="secondary" label="Label" leftIcon={<CheckIcon />} />
-          <Badge color="tertiary" label="Label" leftIcon={<CheckIcon />} />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON Y SIN ICONO
-// ============================================
-
-/**
- * Con y Sin Icono
- *
- * Ejemplos de badges con icono y sin icono.
- */
-export const WithAndWithoutIcon: Story = {
-  name: 'Con y Sin Icono',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Con icono */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Icono</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="green" label="Éxito" leftIcon={<CheckIcon />} />
-          <Badge color="blue" label="Info" leftIcon={<CheckIcon />} />
-          <Badge color="red" label="Error" leftIcon={<CheckIcon />} />
-        </div>
-      </div>
-
-      {/* Sin icono */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Icono</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="green" label="Éxito" />
-          <Badge color="blue" label="Info" />
-          <Badge color="red" label="Error" />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON CONTADOR
-// ============================================
-
-/**
- * Con Contador
- *
- * Ejemplos de badges con notification badge mostrando un número.
- */
-export const WithCount: Story = {
-  name: 'Con Contador',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Contador</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="blue" label="Mensajes" leftIcon={<CheckIcon />} count={3} />
-          <Badge color="red" label="Errores" leftIcon={<CheckIcon />} count={12} />
-          <Badge color="green" label="Tareas" leftIcon={<CheckIcon />} count={5} />
-          <Badge color="purple" label="Notificaciones" count={99} />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar badges en situaciones reales.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Estados */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados de Pedidos</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="green" label="Entregado" leftIcon={<CheckIcon />} />
-          <Badge color="blue" label="En Tránsito" />
-          <Badge color="yellow" label="Pendiente" />
-          <Badge color="red" label="Cancelado" />
-        </div>
-      </div>
-
-      {/* Categorías */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Categorías de Productos</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="purple" label="Electrónica" />
-          <Badge color="pink" label="Moda" />
-          <Badge color="cyan" label="Hogar" />
-          <Badge color="orange" label="Comida" />
-          <Badge color="lime" label="Deportes" />
-        </div>
-      </div>
-
-      {/* Prioridades */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Prioridades de Tickets</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="red" label="Crítico" count={5} />
-          <Badge color="orange" label="Alto" count={12} />
-          <Badge color="yellow" label="Medio" count={23} />
-          <Badge color="green" label="Bajo" count={8} />
-        </div>
-      </div>
-
-      {/* Roles */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Roles de Usuario</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="primary" label="Administrador" leftIcon={<CheckIcon />} />
-          <Badge color="blue" label="Editor" />
-          <Badge color="secondary" label="Visualizador" />
-          <Badge color="tertiary" label="Invitado" />
-        </div>
-      </div>
-
-      {/* Tags */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Tags de Artículos</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="indigo" label="React" />
-          <Badge color="sky" label="TypeScript" />
-          <Badge color="emerald" label="Tailwind" />
-          <Badge color="violet" label="Storybook" />
-        </div>
-      </div>
-
-      {/* Notificaciones */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Notificaciones</h3>
-        <div className="flex flex-wrap gap-2">
-          <Badge color="blue" label="Bandeja" count={24} />
-          <Badge color="green" label="Actualizaciones" count={3} />
-          <Badge color="red" label="Alertas" count={7} />
-          <Badge color="purple" label="Mensajes" count={15} />
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/Badge/Badge.tsx

@@ -1,278 +0,0 @@
-import { forwardRef, cloneElement } from 'react';
-import type { BadgeProps, BadgeColor } from './Badge.types';
-
-/**
- * Badge del sistema de diseño Siesa
- *
- * Componente para mostrar etiquetas con múltiples variantes de color.
- * Los badges mantienen sus colores vibrantes en light y dark mode para
- * garantizar visibilidad y consistencia visual.
- *
- * Características implementadas:
- * - 21 variantes de color (zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, primary, secondary, tertiary)
- * - Icono opcional a la izquierda (12x12px)
- * - Contador/notification badge opcional
- * - Estados hover con transiciones suaves
- * - Los colores se mantienen vibrantes en dark mode (según diseño Figma)
- * - Tipografía: Label Tiny (12px Bold)
- *
- * Mejores prácticas implementadas:
- * - Tokens de color de Tailwind estándar para badges
- * - Font-family explícita (SiesaBT via font-sans)
- * - Transiciones suaves (duration-200)
- * - Estructura clara y mantenible
- *
- * @see docs/typography.md - Sistema tipográfico (Label Tiny)
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4130-9382
- *
- * @example
- * ```tsx
- * // Badge simple
- * <Badge color="blue" label="Label" />
- *
- * // Badge con icono
- * <Badge color="green" label="Success" leftIcon={<CheckIcon />} />
- *
- * // Badge con contador
- * <Badge color="red" label="Errors" count={5} />
- *
- * // Badge completo
- * <Badge color="primary" label="Messages" leftIcon={<MailIcon />} count={12} />
- * ```
- */
-export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
-  (
-    {
-      color = 'zinc',
-      leftIcon,
-      label,
-      count,
-      className = '',
-      ...props
-    },
-    ref
-  ) => {
-    // Map de colores - En dark mode mantienen los mismos colores vibrantes según Figma
-    const colorClasses: Record<BadgeColor, { bg: string; text: string; hover: string; notificationBg: string; notificationText: string }> = {
-      zinc: {
-        bg: 'bg-zinc-100',
-        text: 'text-zinc-600',
-        hover: 'hover:bg-zinc-200',
-        notificationBg: 'bg-zinc-600',
-        notificationText: 'text-zinc-100',
-      },
-      red: {
-        bg: 'bg-red-100',
-        text: 'text-red-700',
-        hover: 'hover:bg-red-200',
-        notificationBg: 'bg-red-700',
-        notificationText: 'text-red-100',
-      },
-      orange: {
-        bg: 'bg-orange-100',
-        text: 'text-orange-700',
-        hover: 'hover:bg-orange-200',
-        notificationBg: 'bg-orange-700',
-        notificationText: 'text-orange-100',
-      },
-      amber: {
-        bg: 'bg-amber-100',
-        text: 'text-amber-700',
-        hover: 'hover:bg-amber-200',
-        notificationBg: 'bg-amber-700',
-        notificationText: 'text-amber-100',
-      },
-      yellow: {
-        bg: 'bg-yellow-100',
-        text: 'text-yellow-700',
-        hover: 'hover:bg-yellow-200',
-        notificationBg: 'bg-yellow-700',
-        notificationText: 'text-yellow-100',
-      },
-      lime: {
-        bg: 'bg-lime-100',
-        text: 'text-lime-700',
-        hover: 'hover:bg-lime-200',
-        notificationBg: 'bg-lime-700',
-        notificationText: 'text-lime-100',
-      },
-      green: {
-        bg: 'bg-green-100',
-        text: 'text-green-700',
-        hover: 'hover:bg-green-200',
-        notificationBg: 'bg-green-700',
-        notificationText: 'text-green-100',
-      },
-      emerald: {
-        bg: 'bg-emerald-100',
-        text: 'text-emerald-700',
-        hover: 'hover:bg-emerald-200',
-        notificationBg: 'bg-emerald-700',
-        notificationText: 'text-emerald-100',
-      },
-      teal: {
-        bg: 'bg-teal-100',
-        text: 'text-teal-700',
-        hover: 'hover:bg-teal-200',
-        notificationBg: 'bg-teal-700',
-        notificationText: 'text-teal-100',
-      },
-      cyan: {
-        bg: 'bg-cyan-100',
-        text: 'text-cyan-700',
-        hover: 'hover:bg-cyan-200',
-        notificationBg: 'bg-cyan-700',
-        notificationText: 'text-cyan-100',
-      },
-      sky: {
-        bg: 'bg-sky-100',
-        text: 'text-sky-700',
-        hover: 'hover:bg-sky-200',
-        notificationBg: 'bg-sky-700',
-        notificationText: 'text-sky-100',
-      },
-      blue: {
-        bg: 'bg-blue-100',
-        text: 'text-blue-700',
-        hover: 'hover:bg-blue-200',
-        notificationBg: 'bg-blue-700',
-        notificationText: 'text-blue-100',
-      },
-      indigo: {
-        bg: 'bg-indigo-100',
-        text: 'text-indigo-700',
-        hover: 'hover:bg-indigo-200',
-        notificationBg: 'bg-indigo-700',
-        notificationText: 'text-indigo-100',
-      },
-      violet: {
-        bg: 'bg-violet-100',
-        text: 'text-violet-700',
-        hover: 'hover:bg-violet-200',
-        notificationBg: 'bg-violet-700',
-        notificationText: 'text-violet-100',
-      },
-      purple: {
-        bg: 'bg-purple-100',
-        text: 'text-purple-700',
-        hover: 'hover:bg-purple-200',
-        notificationBg: 'bg-purple-700',
-        notificationText: 'text-purple-100',
-      },
-      fuchsia: {
-        bg: 'bg-fuchsia-100',
-        text: 'text-fuchsia-700',
-        hover: 'hover:bg-fuchsia-200',
-        notificationBg: 'bg-fuchsia-700',
-        notificationText: 'text-fuchsia-100',
-      },
-      pink: {
-        bg: 'bg-pink-100',
-        text: 'text-pink-700',
-        hover: 'hover:bg-pink-200',
-        notificationBg: 'bg-pink-700',
-        notificationText: 'text-pink-100',
-      },
-      rose: {
-        bg: 'bg-rose-100',
-        text: 'text-rose-700',
-        hover: 'hover:bg-rose-200',
-        notificationBg: 'bg-rose-700',
-        notificationText: 'text-rose-100',
-      },
-      primary: {
-        bg: 'bg-primary-custom-100',
-        text: 'text-primary-custom-600',
-        hover: 'hover:bg-primary-custom-200',
-        notificationBg: 'bg-primary-custom-600',
-        notificationText: 'text-primary-custom-100',
-      },
-      secondary: {
-        bg: 'bg-zinc-100',
-        text: 'text-zinc-600',
-        hover: 'hover:bg-zinc-200',
-        notificationBg: 'bg-zinc-600',
-        notificationText: 'text-zinc-100',
-      },
-      tertiary: {
-        bg: 'bg-zinc-100',
-        text: 'text-zinc-600',
-        hover: 'hover:bg-zinc-200',
-        notificationBg: 'bg-zinc-600',
-        notificationText: 'text-zinc-100',
-      },
-    };
-
-    const colors = colorClasses[color];
-
-    // Renderizar icono con tamaño correcto (12x12)
-    const renderIcon = (icon: React.ReactElement) => {
-      const existingClassName = (icon.props as any).className || '';
-      return cloneElement(icon as React.ReactElement<any>, {
-        className: `w-3 h-3 ${existingClassName}`.trim(),
-      });
-    };
-
-    // ===== COMBINAR CLASES =====
-    const finalClasses = [
-      'inline-flex',
-      'items-center',
-      'gap-1',
-      'px-1.5',
-      'py-1',
-      'rounded-md',
-      'font-sans',
-      colors.bg,
-      colors.hover,
-      'transition-colors',
-      'duration-200',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    return (
-      <div
-        ref={ref}
-        className={finalClasses}
-        {...props}
-      >
-        {/* Icono izquierdo */}
-        {leftIcon && (
-          <div className={`flex items-center justify-center ${colors.text}`}>
-            {renderIcon(leftIcon)}
-          </div>
-        )}
-
-        {/* Label del badge */}
-        <span className={`font-sans text-xs leading-4 ${colors.text}`}>
-          {label}
-        </span>
-
-        {/* Notification badge (contador) */}
-        {count !== undefined && (
-          <div
-            className={`
-              h-3
-              flex
-              items-center
-              justify-center
-              px-0.5
-              rounded-sm
-              min-w-[12px]
-              ${colors.notificationBg}
-            `.trim().replace(/\s+/g, ' ')}
-          >
-            <span className={`font-sans text-xs leading-4 ${colors.notificationText}`}>
-              {count}
-            </span>
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-Badge.displayName = 'Badge';

package/src/components/Badge/Badge.types.ts

@@ -1,58 +0,0 @@
-import type { HTMLAttributes, ReactElement } from 'react';
-
-/**
- * Variantes de color del Badge
- */
-export type BadgeColor =
-  | 'zinc'
-  | 'red'
-  | 'orange'
-  | 'amber'
-  | 'yellow'
-  | 'lime'
-  | 'green'
-  | 'emerald'
-  | 'teal'
-  | 'cyan'
-  | 'sky'
-  | 'blue'
-  | 'indigo'
-  | 'violet'
-  | 'purple'
-  | 'fuchsia'
-  | 'pink'
-  | 'rose'
-  | 'primary'
-  | 'secondary'
-  | 'tertiary';
-
-/**
- * Props del componente Badge
- */
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Color del badge
-   * @default 'zinc'
-   */
-  color?: BadgeColor;
-
-  /**
-   * Icono opcional a la izquierda
-   */
-  leftIcon?: ReactElement;
-
-  /**
-   * Texto del badge
-   */
-  label: string;
-
-  /**
-   * Número para el notification badge (opcional)
-   */
-  count?: number;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-}