{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "author": "@fma-ui/ui",
  "description": "A small label for status, count, or category — inline with text or attached to another element. Semantic variants (info/success/warning/destructive/invert) in solid, light and outline styles, plus size and radius options. Can also render as a link.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "cn@^0.4.0"
  ],
  "files": [
    {
      "path": "src/core/badge/badge.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"cn\";\n\nconst badgeVariantsConfig = {\n  variant: {\n    default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n    secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n    outline: \"border-border bg-transparent dark:bg-input/32 [a]:hover:bg-muted\",\n    ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n    link: \"text-primary underline-offset-4 hover:underline\",\n    info: \"bg-info text-background\",\n    success: \"bg-success text-background\",\n    warning: \"bg-warning text-background\",\n    destructive: \"bg-destructive text-background\",\n    invert: \"bg-invert text-invert-foreground\",\n    \"primary-light\": \"bg-primary/10 border-primary/15 text-primary dark:bg-primary/20\",\n    \"secondary-light\": \"bg-secondary border-secondary-foreground/10 text-secondary-foreground\",\n    \"warning-light\": \"bg-warning/10 border-warning/15 text-warning-foreground dark:bg-warning/20\",\n    \"success-light\": \"bg-success/10 border-success/15 text-success-foreground dark:bg-success/20\",\n    \"info-light\": \"bg-info/10 border-info/15 text-info-foreground dark:bg-info/20\",\n    \"destructive-light\":\n      \"bg-destructive/10 border-destructive/15 text-destructive-foreground dark:bg-destructive/20\",\n    \"invert-light\": \"bg-invert/10 border-invert/15 text-foreground dark:bg-invert/20\",\n    \"primary-outline\": \"bg-background border-primary/30 text-primary dark:bg-input/30\",\n    \"secondary-outline\": \"bg-background border-border text-secondary-foreground dark:bg-input/30\",\n    \"warning-outline\": \"bg-background border-warning/30 text-warning-foreground dark:bg-input/30\",\n    \"success-outline\": \"bg-background border-success/30 text-success-foreground dark:bg-input/30\",\n    \"info-outline\": \"bg-background border-info/30 text-info-foreground dark:bg-input/30\",\n    \"destructive-outline\":\n      \"bg-background border-destructive/30 text-destructive-foreground dark:bg-input/30\",\n    \"invert-outline\": \"bg-background border-invert/30 text-foreground dark:bg-input/30\",\n  },\n  size: {\n    xs: \"px-1 py-0.25 text-[0.6rem] leading-none h-4 min-w-4 gap-1\",\n    sm: \"px-1.5 py-0.25 text-[0.625rem] leading-none h-4.5 min-w-4.5 gap-1\",\n    default: \"px-1.75 py-0.5 text-xs h-5 min-w-5 gap-1\",\n    lg: \"px-2 py-0.5 text-xs h-5.5 min-w-5.5 gap-1\",\n    xl: \"px-2.25 py-0.75 text-sm h-6 min-w-6 gap-1.5\",\n  },\n  radius: {\n    default: \"rounded-md\",\n    full: \"rounded-full\",\n  },\n} as const;\n\nconst badgeVariants = cva(\n  \"group/badge relative inline-flex w-fit shrink-0 items-center justify-center overflow-hidden border border-transparent font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3\",\n  {\n    variants: badgeVariantsConfig,\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      radius: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  size,\n  radius,\n  render,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & {\n    render?: (props: React.HTMLAttributes<HTMLElement>) => React.ReactNode;\n  }) {\n  if (render) {\n    const renderProps = {\n      \"data-slot\": \"badge\",\n      \"data-variant\": variant,\n      className: cn(badgeVariants({ variant, size, radius }), className),\n      ...props,\n    };\n\n    return render(renderProps);\n  }\n\n  return (\n    <span\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant, size, radius }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants, badgeVariantsConfig };\n",
      "type": "registry:component",
      "target": "components/fma-ui/badge.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "customized",
    "tags": [
      "data-display",
      "status",
      "label"
    ]
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}