{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:component",
  "title": "Badge",
  "description": "A clean set of badge components with an edible look.",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/badge/badge.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype Color = \"emerald\" | \"red\" | \"amber\" | \"sky\" | \"indigo\" | \"orange\" | \"primary\";\n\nconst colorVariantsFancy = {\n  primary:\n    \"border-primary/10 from-primary/10 to-primary/50 hover:bg-primary/10 text-primary/80  dark:from-primary/30 dark:hover:bg-primary/10\",\n  emerald:\n    \"border-emerald-300 from-emerald-200/20 to-emerald-300  hover:bg-emerald-100 text-emerald-600  dark:hover:bg-emerald/10 dark:from-emerald-700/50 dark:text-emerald-400\",\n  red: \"border-red-300 from-red-200/50 to-red-400/80 hover:bg-red-100 text-red-600 dark:hover:bg-red/30 dark:from-red-700/20 dark:to-transparent dark:text-red-400\",\n  amber:\n    \"border-amber-300 from-amber-200/20 to-amber-200 hover:bg-amber-100 text-amber-600 dark:hover:bg-amber/30 dark:from-amber-700/50 dark:text-amber-400\",\n  sky: \"border-sky-300 from-sky-200/20 to-sky-300 hover:bg-sky-100 text-sky-600 dark:hover:bg-sky/30 dark:from-sky-700/50 dark:text-sky-400\",\n  indigo:\n    \"border-indigo-300 from-indigo-200/20 to-indigo-300 hover:bg-indigo-100 text-indigo-600 dark:hover:bg-indigo/30 dark:from-indigo-700/50 dark:text-indigo-400\",\n  orange:\n    \"border-orange-300 from-orange-200/20 to-orange-300 hover:bg-orange-100 text-orange-600 dark:hover:bg-orange/30 dark:from-orange-700/50 dark:text-orange-400\",\n};\n\nconst colorVariantsRegular = {\n  primary:\n    \"bg-primary/10 hover:bg-primary/20 text-primary/80 dark:bg-primary/10 dark:hover:bg-primary/10\",\n  emerald:\n    \"bg-emerald-100 hover:bg-emerald-200 text-emerald-600 dark:bg-emerald-600/10 dark:hover:bg-emerald-600/30 dark:text-emerald-400\",\n  red: \"bg-red-100 hover:bg-red-200 text-red-600 dark:bg-red-600/10 dark:hover:bg-red-600/30 dark:text-red-400\",\n  amber:\n    \"bg-amber-100 hover:bg-amber-200 text-amber-600 dark:bg-amber-500/10 dark:hover:bg-amber-600/30 dark:text-amber-400\",\n  sky: \"bg-sky-100 hover:bg-sky-200 text-sky-600 dark:bg-sky-500/10 dark:hover:bg-sky-600/30 dark:text-sky-400\",\n  indigo:\n    \"bg-indigo-100 hover:bg-indigo-200 text-indigo-600 dark:bg-indigo-500/10 dark:hover:bg-indigo-600/30 dark:text-indigo-400\",\n  orange:\n    \"bg-orange-100 hover:bg-orange-200 text-orange-600 dark:bg-orange-500/10 dark:hover:bg-orange-600/30 dark:text-orange-400\",\n};\n\nconst colorVariantsOutline = {\n  primary:\n    \"hover:bg-primary/10 hover:border-primary/80 [&>svg]:text-primary dark:hover:bg-primary/10 dark:hover:border-primary/80\",\n  emerald:\n    \"hover:bg-emerald-100 hover:border-emerald-300 [&>svg]:text-emerald-400 dark:hover:bg-emerald-600/10 dark:hover:border-emerald-300\",\n  red: \"hover:bg-red-100 hover:border-red-300 [&>svg]:text-red-400 dark:hover:bg-red-600/10 dark:hover:border-red-300\",\n  amber:\n    \"hover:bg-amber-100 hover:border-amber-300 [&>svg]:text-amber-400 dark:hover:bg-amber-600/10 dark:hover:border-amber-300\",\n  sky: \"hover:bg-sky-100 hover:border-sky-300 [&>svg]:text-sky-400 dark:hover:bg-sky-600/10 dark:hover:border-sky-300\",\n  indigo:\n    \"hover:bg-indigo-100 hover:border-indigo-300 [&>svg]:text-indigo-400 dark:hover:bg-indigo-600/10 dark:hover:border-indigo-300\",\n  orange:\n    \"hover:bg-orange-100 hover:border-orange-300 [&>svg]:text-orange-400 dark:hover:bg-orange-600/10 dark:hover:border-orange-300\",\n};\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-lg border px-1.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-0.5 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-all duration-300 overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        regular: \"border-none\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground hover:bg-border/50\",\n        fancy:\n          \"bg-white dark:border-card dark:bg-background bg-radial-[at_40%_30%] shadow-md inset-shadow-sm shadow-shade inset-shadow-white/70 dark:inset-shadow-white/50 dark:inset-shadow-xs dark:to-transparent \",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nconst colorVariantSets: Record<string, Record<Color, string>> = {\n  fancy: colorVariantsFancy,\n  regular: colorVariantsRegular,\n  outline: colorVariantsOutline,\n};\n\nconst dotVariants = cva(\"h-2 w-2 rounded-full mr-0.5\", {\n  variants: {\n    color: {\n      emerald: \"bg-emerald-400\",\n      red: \"bg-red-400\",\n      amber: \"bg-amber-400\",\n      sky: \"bg-sky-400\",\n      indigo: \"bg-indigo-400\",\n      orange: \"bg-orange-400\",\n      primary: \"bg-primary/80\",\n    },\n  },\n});\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  color = \"primary\",\n  showDot = false,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean; color?: Color; showDot?: boolean }) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(\n        badgeVariants({ variant }),\n        colorVariantSets[variant || \"default\"]?.[color],\n        className\n      )}\n      {...props}\n    >\n      {showDot && <div className={dotVariants({ color })}></div>}\n      {children}\n    </Comp>\n  );\n}\n\nexport { Badge, badgeVariants };\nexport type { Color };\n",
      "type": "registry:component",
      "target": "components/ui/badge.tsx"
    }
  ]
}