{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "A small capsule: an accent label, a grey count or the red badge of a Dock icon.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme"
  ],
  "files": [
    {
      "path": "registry/macos/ui/badge.tsx",
      "content": "\"use client\"\n\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n// macOS badges are small capsules: the accent color, the grey count badge\n// of a sidebar or the red badge of a Dock icon.\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-[18px] w-fit min-w-[18px] shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full px-1.5 text-[11px] leading-none font-semibold whitespace-nowrap tabular-nums transition-colors outline-none focus-visible:mac-focus-ring [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-mac-accent text-white [a]:hover:brightness-110\",\n        secondary: \"bg-mac-fill-secondary text-mac-label-secondary [a]:hover:bg-mac-fill-primary\",\n        destructive: \"bg-[#ec3830] text-white [a]:hover:brightness-110\",\n        outline: \"text-mac-label shadow-[inset_0_0_0_1px_var(--mac-grid)] [a]:hover:bg-mac-fill-tertiary\",\n        ghost: \"text-mac-label-secondary hover:bg-mac-fill-tertiary\",\n        link: \"text-mac-link underline-offset-2 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">({ className: cn(badgeVariants({ variant }), className) }, props),\n    render,\n    state: { slot: \"badge\", variant },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}