{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "A simple badge component",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "files": [
    {
      "path": "registry/cs/ui/badge/badge.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { CsBtnColor } from \"@/registry/cs/ui/button/button\"\n\n/** Badge background color. */\nexport type CsBadgeColor = CsBtnColor\n\nconst badgeVariants = cva(\n  \"absolute z-10 inline-flex items-center justify-center rounded-full font-bold text-white leading-none\",\n  {\n    variants: {\n      size: {\n        xs: \"size-2.5\",\n        sm: \"min-w-4 h-4 px-1 text-[10px]\",\n        md: \"min-w-5 h-5 px-1.5 text-xs\",\n        lg: \"min-w-6 h-6 px-2 text-xs\",\n        xl: \"min-w-7 h-7 px-2 text-sm\",\n      },\n      radius: {\n        xs: \"rounded-none\",\n        sm: \"rounded-sm\",\n        md: \"rounded-md\",\n        lg: \"rounded-lg\",\n        xl: \"rounded-full\",\n      },\n      background: {\n        primary: \"bg-cs-primary\",\n        secondary: \"bg-cs-secondary\",\n        grey: \"bg-cs-grey\",\n        dark: \"bg-cs-dark\",\n        red: \"bg-cs-red\",\n        blue: \"bg-cs-blue\",\n        green: \"bg-cs-green\",\n        yellow: \"bg-cs-yellow text-cs-yellow-text\",\n        orange: \"bg-cs-orange\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      radius: \"xl\",\n      background: \"red\",\n    },\n  }\n)\n\nexport interface BadgeProps extends React.ComponentProps<\"div\"> {\n  /** Number or text to display in the badge. If undefined, shows as indicator dot. */\n  label?: string | number\n  /** Badge size. */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Badge border radius. */\n  radius?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Badge background color. */\n  background?: CsBadgeColor\n  /** The element the badge wraps (e.g. a Button). */\n  children: React.ReactNode\n}\n\nfunction Badge({\n  className,\n  label,\n  size = \"md\",\n  radius = \"xl\",\n  background = \"red\",\n  children,\n  ...props\n}: BadgeProps) {\n  const isIndicator = label === undefined || label === null\n\n  return (\n    <div\n      data-slot=\"badge\"\n      className={cn(\"relative inline-flex\", className)}\n      {...props}\n    >\n      {children}\n      <span\n        data-slot=\"badge-indicator\"\n        className={cn(\n          badgeVariants({\n            size: isIndicator ? \"xs\" : size,\n            radius,\n            background,\n          }),\n          \"top-0 right-0 -translate-y-1/3 translate-x-1/3\"\n        )}\n      >\n        {!isIndicator && label}\n      </span>\n    </div>\n  )\n}\n\nexport { Badge, badgeVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}