siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Badge/Badge.tsx

@@ -1,278 +1,278 @@
-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';
+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 +1,58 @@
-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;
-}
+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;
+}