{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "Compact status and category labels with status dots and a mono style.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/badge.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border font-medium whitespace-nowrap outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3\",\n  {\n    variants: {\n      variant: {\n        neutral: \"border-border bg-secondary text-secondary-foreground [a&]:hover:bg-accent\",\n        primary: \"border-primary/20 bg-primary/10 text-primary [a&]:hover:bg-primary/15\",\n        success: \"border-success/25 bg-success/10 text-success [a&]:hover:bg-success/15\",\n        warning: \"border-warning/30 bg-warning/12 text-warning [a&]:hover:bg-warning/20\",\n        destructive: \"border-destructive/25 bg-destructive/10 text-destructive [a&]:hover:bg-destructive/15\",\n        outline: \"border-input bg-transparent text-foreground [a&]:hover:bg-accent\",\n        solid: \"border-transparent bg-foreground text-background [a&]:hover:bg-foreground/90\",\n        signal: \"border-transparent bg-signal text-signal-foreground [a&]:hover:bg-signal/85\",\n      },\n      size: {\n        sm: \"h-5 px-2 text-[0.6875rem]\",\n        md: \"h-6 px-2.5 text-xs\",\n      },\n      mono: {\n        true: \"font-mono tracking-[0.06em] uppercase\",\n      },\n    },\n    defaultVariants: { variant: \"neutral\", size: \"md\" },\n  },\n);\n\ntype BadgeProps = React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean;\n    /** A leading status dot in the badge color; `\"pulse\"` adds a live-signal ping. */\n    dot?: boolean | \"pulse\";\n  };\n\nfunction Badge({ className, variant = \"neutral\", size = \"md\", mono, asChild = false, dot = false, children, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot.Root : \"span\";\n  return (\n    <Comp data-slot=\"badge\" data-variant={variant} className={cn(badgeVariants({ variant, size, mono }), className)} {...props}>\n      {dot && (\n        <span data-slot=\"badge-dot\" aria-hidden=\"true\" className=\"relative inline-flex size-1.5 shrink-0\">\n          {dot === \"pulse\" && <span className=\"absolute inset-0 animate-ping rounded-full bg-current opacity-60 motion-reduce:hidden\" />}\n          <span className=\"relative size-1.5 rounded-full bg-current\" />\n        </span>\n      )}\n      {asChild ? <Slot.Slottable>{children}</Slot.Slottable> : children}\n    </Comp>\n  );\n}\n\nexport { Badge, badgeVariants };\nexport type { BadgeProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/badge",
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}