@etus/ui 0.1.0

package/src/components/primitives/Badge/Badge.tsx

@@ -0,0 +1,389 @@
+import type { BadgeAvatarProps, BadgeColor, BadgeProps } from "./Badge.types"
+
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../feedback/Tooltip"
+
+/* eslint-disable sonarjs/no-duplicate-string -- Badge variants require repeated color class patterns */
+
+// Legacy variant mapping for backwards compatibility
+const legacyVariantMap: Record<string, { color: string; type: string; }> = {
+  default: { type: "pill-color", color: "primary" },
+  secondary: { type: "pill-color", color: "muted" },
+  destructive: { type: "pill-color", color: "destructive" },
+  outline: { type: "pill-outline", color: "muted" },
+}
+
+// Dot color mapping
+const dotColorMap: Record<string, string> = {
+  primary: "bg-primary-foreground",
+  destructive: "bg-white",
+  warning: "bg-warning-foreground",
+  success: "bg-success-foreground",
+  muted: "bg-muted-foreground",
+  "blue-gray": "bg-white",
+  "blue-light": "bg-white",
+  blue: "bg-white",
+  indigo: "bg-white",
+  purple: "bg-white",
+  pink: "bg-white",
+  orange: "bg-white",
+}
+
+// Dismiss button color mapping
+const dismissColorMap: Record<string, string> = {
+  primary: "text-primary-foreground hover:bg-primary-foreground/20",
+  destructive: "text-white hover:bg-white/20",
+  warning: "text-warning-foreground hover:bg-warning-foreground/20",
+  success: "text-success-foreground hover:bg-success-foreground/20",
+  muted: "text-muted-foreground hover:bg-muted-foreground/20",
+  "blue-gray": "text-white hover:bg-white/20",
+  "blue-light": "text-white hover:bg-white/20",
+  blue: "text-white hover:bg-white/20",
+  indigo: "text-white hover:bg-white/20",
+  purple: "text-white hover:bg-white/20",
+  pink: "text-white hover:bg-white/20",
+  orange: "text-white hover:bg-white/20",
+}
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center font-medium w-fit whitespace-nowrap shrink-0 gap-1.5 transition-[color,background-color,box-shadow,filter] overflow-hidden border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
+  {
+    variants: {
+      type: {
+        "pill-color": "rounded-[var(--badge-radius-pill)] border-transparent",
+        "pill-outline": "rounded-[var(--badge-radius-pill)] bg-transparent",
+        "badge-color": "rounded-[var(--badge-radius-default)] border-transparent",
+        "badge-outline": "rounded-[var(--badge-radius-default)] bg-transparent",
+        "badge-modern": "rounded-[var(--badge-radius-default)] border-transparent border-l-[3px] pr-2.5 pl-2 shadow-xs",
+      },
+      color: {
+        primary: "",
+        destructive: "",
+        warning: "",
+        success: "",
+        muted: "",
+        "blue-gray": "",
+        "blue-light": "",
+        blue: "",
+        indigo: "",
+        purple: "",
+        pink: "",
+        orange: "",
+      },
+      size: {
+        sm: "h-[var(--badge-size-sm-h)] px-[var(--badge-size-sm-px)] text-[length:var(--badge-size-sm-text)] [&_svg]:size-3",
+        default: "h-[var(--badge-size-md-h)] px-[var(--badge-size-md-px)] text-[length:var(--badge-size-md-text)] [&_svg]:size-3.5",
+        lg: "h-[var(--badge-size-lg-h)] px-[var(--badge-size-lg-px)] text-[length:var(--badge-size-lg-text)] [&_svg]:size-4",
+      },
+    },
+    compoundVariants: [
+      // ========================================
+      // PILL-COLOR VARIANTS
+      // ========================================
+      { type: "pill-color", color: "primary", className: "bg-[color:var(--badge-color-primary-bg)] text-[color:var(--badge-color-primary-fg)]" },
+      { type: "pill-color", color: "destructive", className: "bg-[color:var(--badge-color-destructive-bg)] text-[color:var(--badge-color-destructive-fg)]" },
+      { type: "pill-color", color: "warning", className: "bg-warning text-warning-foreground" },
+      { type: "pill-color", color: "success", className: "bg-success text-success-foreground" },
+      { type: "pill-color", color: "muted", className: "bg-[color:var(--badge-color-secondary-bg)] text-[color:var(--badge-color-secondary-fg)]" },
+      { type: "pill-color", color: "blue-gray", className: "bg-slate-500 text-white" },
+      { type: "pill-color", color: "blue-light", className: "bg-sky-400 text-sky-950" },
+      { type: "pill-color", color: "blue", className: "bg-blue-400 text-blue-950" },
+      { type: "pill-color", color: "indigo", className: "bg-indigo-400 text-indigo-950" },
+      { type: "pill-color", color: "purple", className: "bg-violet-400 text-violet-950" },
+      { type: "pill-color", color: "pink", className: "bg-pink-400 text-pink-950" },
+      { type: "pill-color", color: "orange", className: "bg-orange-500 text-orange-950" },
+
+      // ========================================
+      // PILL-OUTLINE VARIANTS
+      // ========================================
+      { type: "pill-outline", color: "primary", className: "border-primary text-primary" },
+      { type: "pill-outline", color: "destructive", className: "border-destructive text-destructive" },
+      { type: "pill-outline", color: "warning", className: "border-warning text-warning" },
+      { type: "pill-outline", color: "success", className: "border-success text-success" },
+      { type: "pill-outline", color: "muted", className: "border-border text-muted-foreground" },
+      { type: "pill-outline", color: "blue-gray", className: "border-slate-500 text-slate-500" },
+      { type: "pill-outline", color: "blue-light", className: "border-sky-400 text-sky-400" },
+      { type: "pill-outline", color: "blue", className: "border-blue-400 text-blue-400" },
+      { type: "pill-outline", color: "indigo", className: "border-indigo-400 text-indigo-400" },
+      { type: "pill-outline", color: "purple", className: "border-violet-400 text-violet-400" },
+      { type: "pill-outline", color: "pink", className: "border-pink-400 text-pink-400" },
+      { type: "pill-outline", color: "orange", className: "border-orange-500 text-orange-500" },
+
+      // ========================================
+      // BADGE-COLOR VARIANTS
+      // ========================================
+      { type: "badge-color", color: "primary", className: "bg-primary text-primary-foreground" },
+      { type: "badge-color", color: "destructive", className: "bg-destructive text-white" },
+      { type: "badge-color", color: "warning", className: "bg-warning text-warning-foreground" },
+      { type: "badge-color", color: "success", className: "bg-success text-success-foreground" },
+      { type: "badge-color", color: "muted", className: "bg-muted text-muted-foreground" },
+      { type: "badge-color", color: "blue-gray", className: "bg-slate-500 text-white" },
+      { type: "badge-color", color: "blue-light", className: "bg-sky-400 text-sky-950" },
+      { type: "badge-color", color: "blue", className: "bg-blue-400 text-blue-950" },
+      { type: "badge-color", color: "indigo", className: "bg-indigo-400 text-indigo-950" },
+      { type: "badge-color", color: "purple", className: "bg-violet-400 text-violet-950" },
+      { type: "badge-color", color: "pink", className: "bg-pink-400 text-pink-950" },
+      { type: "badge-color", color: "orange", className: "bg-orange-500 text-orange-950" },
+
+      // ========================================
+      // BADGE-OUTLINE VARIANTS
+      // ========================================
+      { type: "badge-outline", color: "primary", className: "border-primary text-primary" },
+      { type: "badge-outline", color: "destructive", className: "border-destructive text-destructive" },
+      { type: "badge-outline", color: "warning", className: "border-warning text-warning" },
+      { type: "badge-outline", color: "success", className: "border-success text-success" },
+      { type: "badge-outline", color: "muted", className: "border-border text-muted-foreground" },
+      { type: "badge-outline", color: "blue-gray", className: "border-slate-500 text-slate-500" },
+      { type: "badge-outline", color: "blue-light", className: "border-sky-400 text-sky-400" },
+      { type: "badge-outline", color: "blue", className: "border-blue-400 text-blue-400" },
+      { type: "badge-outline", color: "indigo", className: "border-indigo-400 text-indigo-400" },
+      { type: "badge-outline", color: "purple", className: "border-violet-400 text-violet-400" },
+      { type: "badge-outline", color: "pink", className: "border-pink-400 text-pink-400" },
+      { type: "badge-outline", color: "orange", className: "border-orange-500 text-orange-500" },
+
+      // ========================================
+      // BADGE-MODERN VARIANTS (with left accent)
+      // ========================================
+      { type: "badge-modern", color: "primary", className: "bg-primary/10 text-primary border-l-primary" },
+      { type: "badge-modern", color: "destructive", className: "bg-destructive/10 text-destructive border-l-destructive" },
+      { type: "badge-modern", color: "warning", className: "bg-warning/10 text-warning border-l-warning" },
+      { type: "badge-modern", color: "success", className: "bg-success/10 text-success border-l-success" },
+      { type: "badge-modern", color: "muted", className: "bg-muted text-muted-foreground border-l-muted-foreground" },
+      { type: "badge-modern", color: "blue-gray", className: "bg-slate-500/10 text-slate-500 border-l-slate-500" },
+      { type: "badge-modern", color: "blue-light", className: "bg-sky-400/10 text-sky-400 border-l-sky-400" },
+      { type: "badge-modern", color: "blue", className: "bg-blue-400/10 text-blue-400 border-l-blue-400" },
+      { type: "badge-modern", color: "indigo", className: "bg-indigo-400/10 text-indigo-400 border-l-indigo-400" },
+      { type: "badge-modern", color: "purple", className: "bg-violet-400/10 text-violet-400 border-l-violet-400" },
+      { type: "badge-modern", color: "pink", className: "bg-pink-400/10 text-pink-400 border-l-pink-400" },
+      { type: "badge-modern", color: "orange", className: "bg-orange-500/10 text-orange-500 border-l-orange-500" },
+    ],
+    defaultVariants: {
+      type: "pill-color",
+      color: "primary",
+      size: "default",
+    },
+  }
+)
+
+// Internal dot component
+function BadgeDot({ color }: { color: BadgeColor }) {
+  return (
+    <span
+      className={cn("size-1.5 rounded-full shrink-0", dotColorMap[color] ?? dotColorMap["primary"])}
+      data-slot="badge-dot"
+    />
+  )
+}
+
+// Internal dismiss button component
+function BadgeDismiss({ onClick, color, type, dismissLabel = "Dismiss" }: { color: BadgeColor; dismissLabel?: string; onClick: () => void; type: string; }) {
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onClick()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault()
+      e.stopPropagation()
+      onClick()
+    }
+  }
+
+  // Adapt shape based on badge type: rounded for pills, square for badges
+  const isPill = type === "pill-color" || type === "pill-outline"
+  const shapeClass = isPill ? "rounded-full" : "rounded-sm"
+
+  return (
+    <button
+      className={cn(
+        "size-4 -mr-1 inline-flex items-center justify-center shrink-0 transition-colors cursor-pointer",
+        shapeClass,
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        dismissColorMap[color] ?? dismissColorMap["primary"]
+      )}
+      aria-label={dismissLabel}
+      data-slot="badge-dismiss"
+      type="button"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      <X className="size-3" />
+    </button>
+  )
+}
+
+// Internal avatar component for badge
+function BadgeAvatar({ src, fallback, alt }: BadgeAvatarProps) {
+  const [imageError, setImageError] = React.useState(false)
+
+  // Get initials from fallback text
+  const initials = fallback
+    .split(" ")
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+
+  return (
+    <span
+      className="size-4 -ml-1 rounded-full shrink-0 inline-flex items-center justify-center overflow-hidden bg-muted text-[8px] font-medium"
+      data-slot="badge-avatar"
+    >
+      {src && !imageError ? (
+        <img
+          alt={alt ?? fallback}
+          className="size-full object-cover"
+          src={src}
+          onError={() => { setImageError(true); }}
+        />
+      ) : (
+        <span aria-label={alt ?? fallback}>{initials}</span>
+      )}
+    </span>
+  )
+}
+
+// Internal country flag component
+function BadgeCountry({ code }: { code: string }) {
+  // Convert country code to flag emoji using regional indicator symbols
+  const countryToFlag = (countryCode: string) => {
+    // eslint-disable-next-line unicorn/prefer-spread -- Array.from handles Unicode correctly for country codes
+    const codePoints = Array.from(countryCode.toUpperCase()).map(
+      (char) => 127397 + char.charCodeAt(0)
+    )
+    return String.fromCodePoint(...codePoints)
+  }
+
+  return (
+    <span
+      aria-label={`Flag of ${code}`}
+      className="text-base -ml-0.5 shrink-0 leading-none"
+      data-slot="badge-country"
+      role="img"
+    >
+      {countryToFlag(code)}
+    </span>
+  )
+}
+
+function Badge({
+  className,
+  type,
+  color,
+  size,
+  dot,
+  icon,
+  leadingIcon,
+  trailingIcon,
+  country,
+  avatar,
+  iconOnly,
+  onDismiss,
+  dismissLabel,
+  interactive,
+  tooltip,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated -- Intentionally supporting legacy variant for backwards compatibility
+  variant,
+  asChild = false,
+  children,
+  onClick,
+  ...props
+}: BadgeProps) {
+  // Resolve legacy variant to new props (new props take precedence)
+  const legacyMapping = variant ? legacyVariantMap[variant] : null
+  const resolvedType = (type ?? legacyMapping?.type ?? "pill-color") as VariantProps<typeof badgeVariants>["type"]
+  const resolvedColor = (color ?? legacyMapping?.color ?? "primary") as BadgeColor
+
+  // Icon-only badges are square with no horizontal padding
+  const iconOnlyClass = iconOnly
+    ? "px-0 aspect-square"
+    : ""
+
+  const badgeClassName = cn(
+    badgeVariants({ type: resolvedType, color: resolvedColor, size }),
+    iconOnlyClass,
+    Boolean(interactive ?? onClick) && "cursor-pointer hover:brightness-90",
+    className
+  )
+
+  // When asChild is true, use Slot which requires exactly one child
+  // dot and onDismiss features are not supported with asChild
+  if (asChild) {
+    return (
+      <Slot className={badgeClassName} data-slot="badge" {...props}>
+        {children}
+      </Slot>
+    )
+  }
+
+  // Resolve leading content
+  const resolvedLeadingIcon = leadingIcon ?? icon
+
+  // Render leading content (avatar, country, dot, or leading icon)
+  const renderLeading = () => {
+    if (avatar) return <BadgeAvatar {...avatar} />
+    if (country) return <BadgeCountry code={country} />
+    if (dot) return <BadgeDot color={resolvedColor} />
+    if (resolvedLeadingIcon) return <span className="shrink-0" data-slot="badge-leading-icon">{resolvedLeadingIcon}</span>
+    return null
+  }
+
+  // Render trailing content (trailing icon or dismiss)
+  const renderTrailing = () => {
+    if (onDismiss) return <BadgeDismiss color={resolvedColor} dismissLabel={dismissLabel} type={resolvedType ?? "pill-color"} onClick={onDismiss} />
+    if (trailingIcon) return <span className="shrink-0" data-slot="badge-trailing-icon">{trailingIcon}</span>
+    return null
+  }
+
+  // Helper to wrap element with tooltip if tooltip prop is provided
+  const wrapWithTooltip = (element: React.ReactElement) => {
+    if (!tooltip) return element
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          {element}
+        </TooltipTrigger>
+        <TooltipContent>
+          {tooltip}
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  // Icon-only variant: render only the icon, no children or other elements
+  if (iconOnly) {
+    return wrapWithTooltip(
+      <span
+        className={badgeClassName}
+        data-slot="badge"
+        onClick={onClick}
+        {...props}
+      >
+        <span className="shrink-0" data-slot="badge-icon-only">{iconOnly}</span>
+      </span>
+    )
+  }
+
+  return wrapWithTooltip(
+    <span
+      className={badgeClassName}
+      data-slot="badge"
+      onClick={onClick}
+      {...props}
+    >
+      {renderLeading()}
+      {children}
+      {renderTrailing()}
+    </span>
+  )
+}
+
+/* eslint-enable sonarjs/no-duplicate-string */
+
+export { Badge, badgeVariants }

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

@@ -0,0 +1,102 @@
+import type { badgeVariants } from "./Badge"
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps, ReactNode } from "react"
+
+/**
+ * Avatar props for badge avatar variant
+ */
+export interface BadgeAvatarProps {
+  /** Alt text for the avatar image */
+  alt?: string
+  /** Fallback text (initials) when image fails or is not provided */
+  fallback: string
+  /** Image source URL */
+  src?: string
+}
+
+/**
+ * Badge component props
+ */
+export interface BadgeProps
+  extends Omit<ComponentProps<"span">, "color">,
+    VariantProps<typeof badgeVariants> {
+  /**
+   * Render as child element (polymorphism)
+   * @default false
+   */
+  asChild?: boolean
+  /**
+   * Avatar to display in the badge
+   */
+  avatar?: BadgeAvatarProps
+  /**
+   * Country code (ISO 3166-1 alpha-2) for displaying a country flag
+   * @example "US", "BR", "GB"
+   */
+  country?: string
+  /**
+   * Accessible label for the dismiss button
+   * @default "Dismiss"
+   */
+  dismissLabel?: string
+  /**
+   * Show status dot before content
+   * @default false
+   */
+  dot?: boolean
+  /**
+   * Icon to display (alias for leadingIcon)
+   */
+  icon?: ReactNode
+  /**
+   * Display only an icon without text (icon-only variant)
+   * When provided, children are ignored
+   */
+  iconOnly?: ReactNode
+  /**
+   * Whether the badge is interactive (cursor-pointer, hover states)
+   * @default false
+   */
+  interactive?: boolean
+  /**
+   * Icon to display before the text content
+   */
+  leadingIcon?: ReactNode
+  /**
+   * Makes badge dismissible, called when X is clicked
+   */
+  onDismiss?: () => void
+  /**
+   * Tooltip text to display on hover
+   */
+  tooltip?: string
+  /**
+   * Icon to display after the text content
+   */
+  trailingIcon?: ReactNode
+  /**
+   * @deprecated Use type + color instead
+   * Legacy variant prop for backwards compatibility
+   */
+  variant?: "default" | "destructive" | "outline" | "secondary"
+}
+
+/**
+ * Available badge types
+ */
+export type BadgeType = NonNullable<VariantProps<typeof badgeVariants>["type"]>
+
+/**
+ * Available badge colors
+ */
+export type BadgeColor = NonNullable<VariantProps<typeof badgeVariants>["color"]>
+
+/**
+ * Available badge sizes
+ */
+export type BadgeSize = NonNullable<VariantProps<typeof badgeVariants>["size"]>
+
+/**
+ * Legacy variant type for backwards compatibility
+ */
+export type BadgeLegacyVariant = NonNullable<BadgeProps["variant"]>