{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "A short label for status or counts.",
  "dependencies": [
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/badge.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\nexport const badgeVariants = tv({\n  base: [\n    \"inline-flex h-[22px] items-center gap-1.5 whitespace-nowrap rounded-pill border px-2\",\n    \"text-xs leading-none font-medium\",\n  ],\n  variants: {\n    variant: {\n      solid: \"border-transparent\",\n      outline: \"border-border bg-transparent\",\n    },\n    color: {\n      neutral: \"\",\n      primary: \"\",\n      success: \"\",\n      warning: \"\",\n      danger: \"\",\n    },\n    /** Adds a leading dot. Pair it with a text label: status is never shown by color alone. */\n    hasDot: {\n      true: \"before:size-1.5 before:rounded-pill before:bg-current before:content-['']\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"solid\", color: \"neutral\", class: \"border-border bg-secondary text-secondary-foreground\" },\n    { variant: \"solid\", color: \"primary\", class: \"bg-primary text-primary-foreground\" },\n    { variant: \"solid\", color: \"success\", class: \"bg-success text-success-foreground\" },\n    { variant: \"solid\", color: \"warning\", class: \"bg-warning text-warning-foreground\" },\n    { variant: \"solid\", color: \"danger\", class: \"bg-destructive text-destructive-foreground\" },\n    { variant: \"outline\", color: \"neutral\", class: \"text-foreground\" },\n    { variant: \"outline\", color: \"primary\", class: \"text-primary\" },\n    { variant: \"outline\", color: \"success\", class: \"text-success-text\" },\n    { variant: \"outline\", color: \"warning\", class: \"text-warning-text\" },\n    { variant: \"outline\", color: \"danger\", class: \"text-destructive-text\" },\n  ],\n  defaultVariants: { variant: \"solid\", color: \"neutral\", hasDot: false },\n});\n\nexport interface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">,\n    VariantProps<typeof badgeVariants> {}\n\n/** A short label for status or counts. */\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, color, hasDot, ...props }, ref) => (\n    <span ref={ref} className={cn(badgeVariants({ variant, color, hasDot }), className)} {...props} />\n  ),\n);\nBadge.displayName = \"Badge\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/badge",
  "meta": {
    "hash": "a2c180ab2afcc592",
    "source": "packages/react/src/components/badge.tsx",
    "exports": [
      "badgeVariants",
      "BadgeProps",
      "Badge"
    ],
    "props": {
      "Badge": {
        "extends": "Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">, VariantProps<typeof badgeVariants>",
        "props": []
      }
    },
    "variants": {
      "variants": {
        "variant": [
          "solid",
          "outline"
        ],
        "color": [
          "neutral",
          "primary",
          "success",
          "warning",
          "danger"
        ],
        "hasDot": [
          "true"
        ]
      },
      "defaultVariants": {
        "variant": "solid",
        "color": "neutral",
        "hasDot": "false"
      }
    },
    "docsUrl": "https://junco.madebytobi.com/docs/components/badge"
  }
}