Function bodies 541 total

    def to_dict(self):
        d = {
            "rule": self.rule_id,
            "file": self.file,
            "line": self.line,
            "message": self.message,
        }
        if self.snippet:
            d["snippet"] = self.snippet
        if self.fix:
            d["fix"] = self.fix
        return d

    def __str__(self):
        loc = f"{self.file}:{self.line}"
        s = f"  [{self.rule_id}] {loc}\n    {self.message}"
        if self.snippet:
            s += f"\n    → {self.snippet[:120]}"
        if self.fix:
            s += f"\n    Fix: {self.fix}"
        return s

class GovernanceAuditor:
    def __init__(self, project_root: Path, target_file: Optional[str] = None):
        self.project_root = project_root
        self.target_file = target_file
        self.violations: List[Violation] = []
        self.files_scanned = 0
        self.rules_file = project_root / RULES_FILE

    def run(self):
        components_dir = self.project_root / COMPONENTS_DIR

        if self.target_file:
            target = self.project_root / self.target_file
            if target.exists():
                self._audit_file(target)
            else:
                print(f"File not found: {target}")
                sys.exit(1)
        else:
            if not components_dir.exists():
                print(f"Components directory not found: {components_dir}")
                sys.exit(1)

            for tsx_file in sorted(components_dir.glob("*.tsx")):
                # Skip metadata files
                if ".metadata." in tsx_file.name:
                    continue
    

    def __init__(self, project_root: Path, target_file: Optional[str] = None):
        self.project_root = project_root
        self.target_file = target_file
        self.violations: List[Violation] = []
        self.files_scanned = 0
        self.rules_file = project_root / RULES_FILE

    def run(self):
        components_dir = self.project_root / COMPONENTS_DIR

        if self.target_file:
            target = self.project_root / self.target_file
            if target.exists():
                self._audit_file(target)
            else:
                print(f"File not found: {target}")
                sys.exit(1)
        else:
            if not components_dir.exists():
                print(f"Components directory not found: {components_dir}")
                sys.exit(1)

            for tsx_file in sorted(components_dir.glob("*.tsx")):
                # Skip metadata files
                if ".metadata." in tsx_file.name:
                    continue
                self._audit_file(tsx_file)

    def _audit_file(self, file_path: Path):
        try:
            content = file_path.read_text(encoding="utf-8")
        except Exception:
            return

        self.files_scanned += 1
        rel_path = str(file_path.relative_to(self.project_root))
        lines = content.split("\n")
        component_name = file_path.stem

        for i, line in enumerate(lines, 1):
            # Skip import lines and comments
            stripped = line.strip()
            if stripped.startswith("import ") or stripped.startswith("//") or stripped.startswith("*"):
                continue

            self._check_foreground_hierarchy(rel_path, i, line, lines, i - 1)
            self._check_semantic_color_pairing(rel_path, i, line)
            self._check_border_hierarchy(rel_path, i, line)
            self._check_typography(rel_path, i, line)
            self._check_primitive_leakage(rel_path, i, line)
            self._check_hardcoded_colors(rel_path, i, line)
            self._check_tailw

    def _check_foreground_hierarchy(self, file: str, line_num: int, line: str,
                                     all_lines: List[str], line_idx: int):
        # Check for muted-foreground directly on h1/h2 elements (same line only)
        if "text-muted-foreground" not in line:
            return

        # Only flag if the muted-foreground is on the SAME element as h1/h2
        # (i.e., both the tag and the class appear on the same line or in the same JSX element)
        same_element_patterns = [
            r'<h1[^>]*text-muted-foreground',
            r'<h2[^>]*text-muted-foreground',
            r'text-muted-foreground[^"]*"[^>]*>.*</h1>',
            r'text-muted-foreground[^"]*"[^>]*>.*</h2>',
        ]

        # Also check if this line has an h1/h2 class applied alongside muted-foreground
        class_patterns = [
            r'["\s]h1["\s].*text-muted-foreground',
            r'text-muted-foreground.*["\s]h1["\s]',
            r'["\s]h2["\s].*text-muted-foreground',
   

    def _check_border_hierarchy(self, file: str, line_num: int, line: str):
        # ring token used outside focus state
        if "ring-ring" in line:
            # Allow if any focus-related selector is present on the line
            # (including complex selectors like has-[...:focus-visible] or data-[active=true])
            focus_indicators = [
                "focus-visible", "focus:", "focus-within:",
                ":focus-visible", ":focus",
                "data-[active=true]",  # OTP active slot is functionally focus
            ]
            if not any(indicator in line for indicator in focus_indicators):
                self.violations.append(Violation(
                    "BD-001", file, line_num,
                    "ring token used outside focus state",
                    snippet=line.strip(),
                    fix="ring is exclusively for focus indicators — use border or input for non-focus borders"
                ))

    def _check_elevation_coherence(self, file: str, line_num: int, line: str,
                                    component_name: str):
        # Heavy elevation on small components
        if component_name in SMALL_COMPONENTS:
            for heavy in HEAVY_ELEVATIONS:
                if heavy in line:
                    self.violations.append(Violation(
                        "EL-001", file, line_num,
                        f"{heavy} on small component '{component_name}' — heavy shadows break visual scale",
                        snippet=line.strip(),
                        fix="Use elevation-surface or elevation-floating for small components"
                    ))

        # Raw shadow primitives
        if re.search(r'shadow-y\d+', line) and "var(--shadow" not in line:
            self.violations.append(Violation(
                "EL-003", file, line_num,
                "Raw shadow primitive (shadow-y*) — use semantic elevation tokens",
                snippet=line.strip(),

    def _check_semantic_color_pairing(self, file: str, line_num: int, line: str):
        # Base status token used as text (text-destructive instead of text-destructive-foreground)
        # Exception: bg-current pattern (e.g., BadgeIndicator) where text color is used as shape fill
        if "bg-current" in line:
            return

        # Exception: lines that are ternary variable assignments (not className props)
        # e.g., `? "text-success"` — these assign to a variable used with bg-current later
        stripped = line.strip()
        if stripped.startswith("?") or stripped.startswith(":"):
            # Check if this is in a variable assignment context (not a className)
            if "className" not in line and "cn(" not in line:
                return

        for scheme in SCHEMES:
            # Match text-{scheme} but NOT text-{scheme}-foreground or text-{scheme}-border
            pattern = rf'\btext-{scheme}\b(?!-)'
            if re.search(pattern, line):
         

    def _check_typography(self, file: str, line_num: int, line: str):
        # Arbitrary font sizes
        match = re.search(r'text-\[(\d+\.?\d*(?:px|rem|em))\]', line)
        if match:
            size_value = match.group(1)
            # Allow accepted sub-scale sizes for compact UI (counter badges, tiny labels)
            if size_value in self.ACCEPTED_TINY_SIZES:
                return
            self.violations.append(Violation(
                "TY-002", file, line_num,
                f"Arbitrary font size text-[{size_value}] — use the type scale",
                snippet=line.strip(),
                fix="Use text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, or text-3xl"
            ))

    def _check_named_weights(self, file: str, line_num: int, line: str):
        for weight in NAMED_WEIGHTS:
            if re.search(rf'\b{weight}\b', line):
                self.violations.append(Violation(
                    "TY-001", file, line_num,
                    f"Named weight '{weight}' — use numeric weights",
                    snippet=line.strip(),
                    fix="Use font-[420] (body), font-[520] (label), font-[620] (heading), or font-[660] (data)"
                ))

    def _check_primitive_leakage(self, file: str, line_num: int, line: str):
        # Raw design system primitives (gray-55, violet-58, etc.)
        for pattern in PRIMITIVE_PATTERNS:
            match = re.search(pattern, line)
            if match:
                # Skip if it's inside a CSS var definition (var(--gray-55))
                # or inside globals.css token definitions
                if "var(--" in line:
                    continue
                # Skip comments
                if line.strip().startswith("//") or line.strip().startswith("*"):
                    continue
                self.violations.append(Violation(
                    "PL-001", file, line_num,
                    f"Raw primitive token '{match.group()}' — use semantic tokens",
                    snippet=line.strip(),
                    fix="Replace with the appropriate semantic token"
                ))

    def _check_hardcoded_colors(self, file: str, line_num: int, line: str):
        # Skip lines that are clearly not styling (type definitions, comments)
        stripped = line.strip()
        if stripped.startswith("//") or stripped.startswith("*") or stripped.startswith("type "):
            return
        # Skip string content that isn't className-related
        if "className" not in line and "class=" not in line and "cn(" not in line and "style" not in line:
            return

        for pattern in HARDCODED_COLOR_PATTERNS:
            match = re.search(pattern, line)
            if match:
                self.violations.append(Violation(
                    "PL-002", file, line_num,
                    f"Hardcoded color value: {match.group()[:30]}",
                    snippet=line.strip(),
                    fix="Use a semantic color token from the design system"
                ))
                break  # One violation per line is enough

    def _check_tailwind_palette(self, file: str, line_num: int, line: str):
        # Tailwind default palette classes (text-blue-500, bg-red-400, etc.)
        for color in TAILWIND_PALETTE:
            pattern = rf'\b(?:text|bg|border|ring|outline|shadow|from|to|via)-{color}-\d+'
            match = re.search(pattern, line)
            if match:
                # Skip if inside a CSS var reference
                if "var(--" in line and f"--color-{color}" in line:
                    continue
                self.violations.append(Violation(
                    "PL-003", file, line_num,
                    f"Tailwind palette class '{match.group()}' bypasses design system",
                    snippet=line.strip(),
                    fix="Use semantic tokens from the design system"
                ))

    def report(self, format: str = "text") -> str:
        if format == "json":
            return self._report_json()
        return self._report_text()

    def _report_text(self) -> str:
        lines = []
        lines.append("=" * 60)
        lines.append("  Design System Governance Audit")
        lines.append("=" * 60)
        lines.append("")
        lines.append(f"Files scanned: {self.files_scanned}")
        lines.append(f"Violations found: {len(self.violations)}")
        lines.append("")

        if not self.violations:
            lines.append("✅ No violations found. All components follow governance rules.")
            return "\n".join(lines)

        # Group by rule
        by_rule = defaultdict(list)
        for v in self.violations:
            by_rule[v.rule_id].append(v)

        for rule_id in sorted(by_rule.keys()):
            violations = by_rule[rule_id]
            lines.append(f"── {rule_id} ({len(violations)} violation{'s' if len(violations) != 1 else ''}) ──")
            for v in violations:
                lines.append(str(v))
            lines.append("")

        # Summary by file
        by_file = defaultd

    def _report_json(self) -> str:
        data = {
            "summary": {
                "filesScanned": self.files_scanned,
                "totalViolations": len(self.violations),
                "byRule": {},
                "byFile": {},
            },
            "violations": [v.to_dict() for v in self.violations],
        }

        by_rule = defaultdict(int)
        by_file = defaultdict(int)
        for v in self.violations:
            by_rule[v.rule_id] += 1
            by_file[v.file] += 1

        data["summary"]["byRule"] = dict(sorted(by_rule.items()))
        data["summary"]["byFile"] = dict(sorted(by_file.items(), key=lambda x: -x[1]))

        return json.dumps(data, indent=2)

def main():
    import argparse
    parser = argparse.ArgumentParser(description="Design System Governance Auditor")
    parser.add_argument("--format", choices=["text", "json"], default="text",
                        help="Output format (default: text)")
    parser.add_argument("--file", type=str, default=None,
                        help="Audit a single file instead of all components")
    args = parser.parse_args()

    # Find project root (where governance-rules.json lives)
    project_root = Path(__file__).parent.parent
    if not (project_root / RULES_FILE).exists():
        # Try current directory
        project_root = Path.cwd()
        if not (project_root / RULES_FILE).exists():
            print(f"Cannot find {RULES_FILE}. Run from the package root.")
            sys.exit(1)

    auditor = GovernanceAuditor(project_root, target_file=args.file)
    auditor.run()
    print(auditor.report(format=args.format))

    # Exit with non-zero if violations found
    sys.exit(1 if au

function Accordion({
  className,
  variant,
  size,
  surface = 0,
  columns = 1,
  autoCollapse = true,
  masonry = false,
  type,
  ...props
}: AccordionProps) {
  return (
    <AccordionVariantContext.Provider value={(variant ?? "line") as "line" | "card" | "contained"}>
      <AccordionSizeContext.Provider value={size ?? "md"}>
        <AccordionDepthContext.Provider value={(React.useContext(AccordionDepthContext) ?? 0) + 1}>
          <AccordionPrimitive.Root
            data-slot="accordion"
            data-surface={surface}
            {...({
              type: autoCollapse ? "single" : (type ?? "single"),
              collapsible: true,
              className: cn(
                accordionVariants({ variant, size }),
                masonry
                  ? cn(
                      "columns-1",
                      columns === 2 && "md:columns-2"
                    )
                  : columns === 2 && "grid md:grid-cols-2",
                className
              )

function AccordionItem({ className, variant, ...props }: AccordionItemProps) {
  const rootVariant = React.useContext(AccordionVariantContext)
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn(
        itemVariants({ variant: (variant ?? (rootVariant === "contained" ? "card" : rootVariant)) as any }),
        "break-inside-avoid",
        className
      )}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  icon,
  chevronPosition = "right",
  layout = "default",
  label,
  subtitle,
  badge,
  dataSize = "md",
  ...props
}: AccordionTriggerProps) {
  const size = React.useContext(AccordionSizeContext)
  const depth = React.useContext(AccordionDepthContext)

  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "group flex w-full items-center gap-4 text-left transition-colors duration-200",
          "hover:text-primary",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",

          // Padding by size (md + lg match)
          size === "sm" && "px-4 py-3",
          (size === "md" || size === "lg") && "px-6 py-4",

          // Nested indentation (adds 8px per depth level)
          depth >= 2 && "pl-2",

          layout === "default" &&
            (size === "sm"
              ? "label-sm"

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  const size = React.useContext(AccordionSizeContext)

  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className={cn(
        "overflow-hidden",
        "origin-top",
        "will-change-[height,opacity,transform]",
        "data-[state=open]:animate-in",
        "data-[state=open]:fade-in-0",
        "data-[state=open]:slide-in-from-top-1",
        "data-[state=open]:duration-300",
        "data-[state=closed]:animate-out",
        "data-[state=closed]:fade-out-0",
        "data-[state=closed]:slide-out-to-top-1",
        "data-[state=closed]:duration-200",
        "[&>*]:transition-all [&>*]:duration-300 [&>*]:delay-75",
        className
      )}
      {...props}
    >
      <div
        className={cn(
          size === "sm" && "px-4 pb-4",
          (size === "md" || size === "lg") && "px-6 pb-6"
        )}
      >
    

function AccordionGroup({
  className,
  size = "md",
  headerTitle,
  headerSubtitle,
  headerDescription,
  headerAction,
  headerTitleLevel,
  footerDescription,
  footerAction,
  children,
  ...props
}: AccordionGroupProps) {
  return (
    <div
      data-slot="accordion-group"
      className={cn(
        "rounded-xl border border-border bg-card overflow-hidden",
        className
      )}
    >
      {(headerTitle || headerSubtitle || headerDescription || headerAction) && (
        <div
          className={cn(
            "border-b border-border-subtle",
            size === "sm" && "px-4 py-4",
            size === "md" && "px-6 py-5",
            size === "lg" && "px-8 py-6"
          )}
        >
          <div className="flex items-start justify-between gap-6">
            <div className="space-y-1">
              {headerTitle && (
                React.createElement(
                  headerTitleLevel ??
                    (size === "sm"
                      ? "h3"
     

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  )
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  )
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        "fixed inset-0 z-50 bg-overlay backdrop-blur-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
        className
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
  size?: "default" | "sm"
}) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />

      <ModalBase>
        <AlertDialogPrimitive.Content
          data-slot="alert-dialog-content"
          data-size={size}
          className={cn(
            "bg-card border border-input data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content flex flex-col gap-4 w-full rounded-xl duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg overflow-hidden [&>:not([data-slot])]:px-6",
            className
          )}
          {...props}
        />
      </ModalBase>
    </AlertDialogPortal>
  )
}

function AlertDialogHeader({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn(
        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center px-6 pt-6 has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
        className
      )}
      {...props}
    />
  )
}

function AlertDialogFooter({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-3 bg-secondary px-6 py-4 border-t border-border-subtle sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    />
  )
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn(
        "label-lg sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
        className
      )}
      {...props}
    />
  )
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn("p-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

function AlertDialogMedia({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-media"
      className={cn(
        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-xl sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
        className
      )}
      {...props}
    />
  )
}

function AlertDialogAction({
  className,
  variant = "primary",
  size = "sm",
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
  return (
    <Button variant={variant} size={size} asChild>
      <AlertDialogPrimitive.Action
        data-slot="alert-dialog-action"
        className={cn(className)}
        {...props}
      />
    </Button>
  )
}

function AlertDialogCancel({
  className,
  variant = "outline",
  size = "sm",
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
  return (
    <Button variant={variant} size={size} asChild>
      <AlertDialogPrimitive.Cancel
        data-slot="alert-dialog-cancel"
        className={cn(className)}
        {...props}
      />
    </Button>
  )
}

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        "col-start-2 line-clamp-1 min-h-4 font-[520] tracking-tight",
        className
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "col-start-2 grid justify-items-start gap-1 text-sm text-current [&_p]:leading-relaxed",
        className
      )}
      {...props}
    />
  )
}

function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-action"
      className={cn("absolute right-4 top-3 flex items-center", className)}
      {...props}
    />
  )
}

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
        className
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn("aspect-square size-full", className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "bg-muted flex size-full items-center justify-center rounded-full",
        className
      )}
      {...props}
    />
  )
}

function Badge({
  className,
  variant = "default",
  asChild = false,
  onDismiss,
  children,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & {
    asChild?: boolean
    /** When provided, an X appears on hover to dismiss the badge. */
    onDismiss?: () => void
  }) {
  const Comp = asChild ? Slot.Root : "span"

  return (
    <Comp
      data-slot="badge"
      data-variant={variant}
      className={cn(
        badgeVariants({ variant }),
        onDismiss && "group/badge relative",
        className,
      )}
      {...props}
    >
      {children}
      {onDismiss && (
        <button
          type="button"
          onClick={onDismiss}
          title="Remove"
          aria-label="Remove"
          className={cn(
            "absolute inset-y-0 right-0 flex items-center justify-center px-1.5",
            "rounded-r opacity-0 transition-opacity",
            "group-hover/badge:opacity-100",
            "bg-destructive/80 text-destructive-f

function BadgeIcon({ icon: Icon, className }: BadgeIconProps) {
  return (
    <Icon
      aria-hidden="true"
      className={cn("size-4 shrink-0 text-muted-foreground", className)}
    />
  )
}

function BadgeAvatar({
  src,
  alt,
  fallback,
  size = "md",
  className,
}: BadgeAvatarProps) {
  const sizeClass = size === "sm" ? "size-4" : "size-5"

  return (
    <span
      data-slot="badge-avatar"
      className={cn(
        "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border-subtle bg-card text-foreground",
        sizeClass,
        className
      )}
    >
      {src ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={src}
          alt={alt ?? ""}
          className="h-full w-full object-cover"
        />
      ) : null}
      {!src ? (
        <span className={cn("label-sm leading-none", size === "sm" ? "text-[10px]" : "text-[11px]")}
        >
          {(fallback ?? "").slice(0, 2).toUpperCase()}
        </span>
      ) : null}
    </span>
  )
}

function BadgeAvatarGroup({ className, ...props }: BadgeAvatarGroupProps) {
  return (
    <span
      data-slot="badge-avatar-group"
      className={cn("inline-flex items-center -space-x-2", className)}
      {...props}
    />
  )
}

function BadgeIndicator({
  variant = "default",
  pulse = false,
  className,
}: BadgeIndicatorProps) {
  const toneClass =
    variant === "success"
      ? "text-success"
      : variant === "error"
        ? "text-destructive"
        : variant === "warning"
          ? "text-warning"
          : "text-primary"

  return (
    <span
      data-slot="badge-indicator"
      aria-hidden="true"
      className={cn(
        "relative inline-flex size-2 shrink-0 rounded-full bg-current",
        toneClass,
        pulse &&
          "after:absolute after:inset-0 after:rounded-full after:animate-ping after:bg-current after:opacity-40",
        className
      )}
    />
  )
}

function BadgeDelta({ delta, className }: BadgeDeltaProps) {
  const isUp = delta > 0
  const isDown = delta < 0

  const Icon = isUp ? ChevronUp : isDown ? ChevronDown : Minus

  const toneClass = isUp
    ? "text-success-foreground"
    : isDown
      ? "text-destructive-foreground"
      : "text-muted-foreground"

  return (
    <span
      data-slot="badge-delta"
      className={cn("inline-flex items-center gap-1", toneClass, className)}
    >
      <Icon aria-hidden="true" className="size-3" />
      <span className="tabular-nums">{Math.abs(delta)}</span>
    </span>
  )
}