{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "author": "Noppakorn Kaewsalabnil (https://www.pungrumpy.com)",
  "description": "A label for the metadata a reader scans rather than reads. Eight hues with a low-contrast pair each, plus inverted and the house gradient, in three sizes with room for an icon.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "theme"
  ],
  "files": [
    {
      "path": "components/badge.tsx",
      "content": "import { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const badgeVariants = cva(\n  \"inline-flex shrink-0 items-center whitespace-nowrap rounded-full font-medium tabular-nums\",\n  {\n    compoundVariants: [\n      {\n        className: \"bg-badge-amber-subtle text-badge-amber-subtle-foreground\",\n        contrast: \"low\",\n        variant: \"amber\",\n      },\n      {\n        className: \"bg-badge-blue-subtle text-badge-blue-subtle-foreground\",\n        contrast: \"low\",\n        variant: \"blue\",\n      },\n      {\n        className: \"bg-badge-gray-subtle text-badge-gray-subtle-foreground\",\n        contrast: \"low\",\n        variant: \"gray\",\n      },\n      {\n        className: \"bg-badge-green-subtle text-badge-green-subtle-foreground\",\n        contrast: \"low\",\n        variant: \"green\",\n      },\n      {\n        className: \"bg-badge-pink-subtle text-badge-pink-subtle-foreground\",\n        contrast: \"low\",\n        variant: \"pink\",\n      },\n      {\n        className: \"bg-badge-purple-subtle text-badge-purple-subtle-foreground\",\n        contrast: \"low\",\n        variant: \"purple\",\n      },\n      {\n        className: \"bg-badge-red-subtle text-badge-red-subtle-foreground\",\n        contrast: \"low\",\n        variant: \"red\",\n      },\n      {\n        className: \"bg-badge-teal-subtle text-badge-teal-subtle-foreground\",\n        contrast: \"low\",\n        variant: \"teal\",\n      },\n    ],\n    defaultVariants: {\n      size: \"md\",\n      variant: \"gray\",\n    },\n    variants: {\n      contrast: {\n        low: \"\",\n      },\n      size: {\n        lg: \"h-8 gap-1.5 px-3 text-sm [&_svg]:size-4\",\n        md: \"h-6 gap-1 px-2.5 text-xs [&_svg]:size-3.5\",\n        sm: \"h-5 gap-1 px-2 text-[0.6875rem] [&_svg]:size-3\",\n      },\n      variant: {\n        amber: \"bg-badge-amber text-black\",\n        blue: \"bg-badge-blue text-white\",\n        gray: \"bg-badge-gray text-white\",\n        green: \"bg-badge-green text-white\",\n        inverted: \"bg-gray-1000 text-background-100\",\n        pink: \"bg-badge-pink text-white\",\n        purple: \"bg-badge-purple text-white\",\n        red: \"bg-badge-red text-white\",\n        teal: \"bg-badge-teal text-white\",\n        verno: \"bg-linear-to-r from-[#0a5dab] via-[#124276] to-[#c25329] text-white\",\n      },\n    },\n  },\n);\n\ninterface BadgeProps {\n  readonly children: ReactNode;\n  readonly className?: string;\n  readonly contrast?: \"low\";\n  readonly icon?: ReactNode;\n  readonly size?: \"sm\" | \"md\" | \"lg\";\n  readonly variant?:\n    | \"gray\"\n    | \"blue\"\n    | \"purple\"\n    | \"amber\"\n    | \"red\"\n    | \"pink\"\n    | \"green\"\n    | \"teal\"\n    | \"inverted\"\n    | \"verno\";\n}\n\nexport const Badge = ({\n  children,\n  className,\n  contrast,\n  icon,\n  size = \"md\",\n  variant = \"gray\",\n}: BadgeProps) => (\n  <span className={cn(badgeVariants({ contrast, size, variant }), className)}>\n    {icon ? (\n      <span aria-hidden=\"true\" className=\"inline-flex shrink-0 items-center justify-center\">\n        {icon}\n      </span>\n    ) : null}\n    {children}\n  </span>\n);\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-badge-amber": "var(--badge-amber)",
      "color-badge-amber-subtle": "var(--badge-amber-subtle)",
      "color-badge-amber-subtle-foreground": "var(--badge-amber-subtle-foreground)",
      "color-badge-blue": "var(--badge-blue)",
      "color-badge-blue-subtle": "var(--badge-blue-subtle)",
      "color-badge-blue-subtle-foreground": "var(--badge-blue-subtle-foreground)",
      "color-badge-gray": "var(--badge-gray)",
      "color-badge-gray-subtle": "var(--badge-gray-subtle)",
      "color-badge-gray-subtle-foreground": "var(--badge-gray-subtle-foreground)",
      "color-badge-green": "var(--badge-green)",
      "color-badge-green-subtle": "var(--badge-green-subtle)",
      "color-badge-green-subtle-foreground": "var(--badge-green-subtle-foreground)",
      "color-badge-pink": "var(--badge-pink)",
      "color-badge-pink-subtle": "var(--badge-pink-subtle)",
      "color-badge-pink-subtle-foreground": "var(--badge-pink-subtle-foreground)",
      "color-badge-purple": "var(--badge-purple)",
      "color-badge-purple-subtle": "var(--badge-purple-subtle)",
      "color-badge-purple-subtle-foreground": "var(--badge-purple-subtle-foreground)",
      "color-badge-red": "var(--badge-red)",
      "color-badge-red-subtle": "var(--badge-red-subtle)",
      "color-badge-red-subtle-foreground": "var(--badge-red-subtle-foreground)",
      "color-badge-teal": "var(--badge-teal)",
      "color-badge-teal-subtle": "var(--badge-teal-subtle)",
      "color-badge-teal-subtle-foreground": "var(--badge-teal-subtle-foreground)"
    },
    "light": {
      "badge-amber": "oklch(81.87% 0.1969 76.46)",
      "badge-amber-subtle": "oklch(96.81% 0.0495 90.24)",
      "badge-amber-subtle-foreground": "oklch(52.79% 0.1496 54.65)",
      "badge-blue": "oklch(57.61% 0.2508 258.23)",
      "badge-blue-subtle": "oklch(96.29% 0.0195 250.59)",
      "badge-blue-subtle-foreground": "oklch(53.18% 0.2399 256.99)",
      "badge-gray": "oklch(0.562 0 0)",
      "badge-gray-subtle": "oklch(0.94 0 0)",
      "badge-gray-subtle-foreground": "oklch(0.205 0 0)",
      "badge-green": "oklch(54.59% 0.1616 147.27)",
      "badge-green-subtle": "oklch(96.92% 0.037 147.15)",
      "badge-green-subtle-foreground": "oklch(51.75% 0.1453 147.65)",
      "badge-pink": "oklch(59.41% 0.238 1.01)",
      "badge-pink-subtle": "oklch(95.71% 0.0321 353.14)",
      "badge-pink-subtle-foreground": "oklch(53.5% 0.2058 2.84)",
      "badge-purple": "oklch(55.5% 0.3008 306.12)",
      "badge-purple-subtle": "oklch(96.73% 0.0228 309.8)",
      "badge-purple-subtle-foreground": "oklch(47.18% 0.2579 304)",
      "badge-red": "oklch(59.23% 0.2394 23.03)",
      "badge-red-subtle": "oklch(95.41% 0.0299 14.25)",
      "badge-red-subtle-foreground": "oklch(54.99% 0.232 25.29)",
      "badge-teal": "oklch(55.05% 0.0982 181.95)",
      "badge-teal-subtle": "oklch(97.06% 0.0347 180.66)",
      "badge-teal-subtle-foreground": "oklch(52.08% 0.1251 182.93)"
    },
    "dark": {
      "badge-amber": "oklch(81.87% 0.1969 76.46)",
      "badge-amber-subtle": "oklch(24.95% 0.0642 64.78)",
      "badge-amber-subtle-foreground": "oklch(77.21% 0.1991 64.28)",
      "badge-blue": "oklch(57.05% 0.2141 258.23)",
      "badge-blue-subtle": "oklch(25.45% 0.0811 255.8)",
      "badge-blue-subtle-foreground": "oklch(71.7% 0.1648 250.79)",
      "badge-gray": "oklch(0.562 0 0)",
      "badge-gray-subtle": "oklch(0.239 0 0)",
      "badge-gray-subtle-foreground": "oklch(0.946 0 0)",
      "badge-green": "oklch(54.61% 0.161 147.27)",
      "badge-green-subtle": "oklch(27.12% 0.0895 150.09)",
      "badge-green-subtle-foreground": "oklch(73.1% 0.2158 148.29)",
      "badge-pink": "oklch(59.37% 0.2346 1.01)",
      "badge-pink-subtle": "oklch(26.2% 0.0859 356.68)",
      "badge-pink-subtle-foreground": "oklch(69.36% 0.2223 3.91)",
      "badge-purple": "oklch(55.5% 0.2186 306.12)",
      "badge-purple-subtle": "oklch(25.91% 0.0921 314.41)",
      "badge-purple-subtle-foreground": "oklch(69.87% 0.2037 309.51)",
      "badge-red": "oklch(59.03% 0.2234 23.03)",
      "badge-red-subtle": "oklch(25.93% 0.0834 19.02)",
      "badge-red-subtle-foreground": "oklch(69.96% 0.2136 22.03)",
      "badge-teal": "oklch(55.05% 0.0983 181.95)",
      "badge-teal-subtle": "oklch(25.06% 0.062 178.76)",
      "badge-teal-subtle-foreground": "oklch(74.56% 0.1765 182.8)"
    }
  },
  "type": "registry:ui"
}