{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-tailwind",
  "type": "registry:item",
  "title": "Badge (Tailwind)",
  "description": "A small count and labeling component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/brook/tailwind/ui/badge.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst badgeVariants = cva(\n  [\n    \"inline-flex items-center justify-center border-[0.5px] border-border/80 font-normal\",\n    \"w-fit flex-shrink-0 gap-1.5 whitespace-nowrap\",\n    \"overflow-hidden transition-[color,box-shadow] duration-150 ease-in-out\",\n    \"[&_svg]:pointer-events-none\",\n    \"focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_var(--ring),inset_0_0_0_1px_var(--ring)]\",\n    \"aria-[invalid=true]:border-destructive aria-[invalid=true]:shadow-[0_0_0_1px_var(--destructive)]\",\n  ],\n  {\n    variants: {\n      variant: {\n        default:\n          \"selection:!bg-[oklch(0_0_0)] selection:!text-foreground [&_*]:selection:!bg-[oklch(0_0_0)] [&_*]:selection:!text-foreground [.light_&]:selection:!bg-white [.light_&]:selection:!text-black [.light_&_*]:selection:!bg-white [.light_&_*]:selection:!text-black [[data-theme='light']_&]:selection:!bg-white [[data-theme='light']_&]:selection:!text-black [[data-theme='light']_&_*]:selection:!bg-white [[data-theme='light']_&_*]:selection:!text-black bg-foreground text-primary-foreground\",\n        secondary: \"border-transparent bg-[var(--secondary)] text-secondary-foreground\",\n        destructive: [\n          \"border-transparent bg-[var(--secondary)] text-destructive\",\n          \"focus-visible:shadow-[0_0_0_3px_var(--destructive),inset_0_0_0_1px_var(--destructive)]\",\n        ],\n        success: [\n          \"border-transparent bg-[var(--secondary)] text-success\",\n          \"focus-visible:shadow-[0_0_0_3px_var(--success),inset_0_0_0_1px_var(--success)]\",\n        ],\n        info: [\n          \"border-transparent bg-[var(--secondary)] text-info\",\n          \"focus-visible:shadow-[0_0_0_3px_var(--info),inset_0_0_0_1px_var(--info)]\",\n        ],\n        outline: \"border-border bg-transparent text-foreground hover:bg-card\",\n      },\n      size: {\n        sm: \"rounded-[var(--radius)] px-1.5 py-px text-[0.625rem] leading-[15px]\",\n        md: \"rounded-[var(--radius)] px-2 py-0.5 text-xs leading-[14px]\",\n        lg: \"rounded-[var(--radius-lg)] px-3 py-1 text-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  size = \"md\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n      size,\n    },\n  });\n}\n\nfunction BadgeIcon({ className, render, ...props }: useRender.ComponentProps<\"span\">) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(\"mr-1 inline-flex flex-shrink-0 items-center justify-center rounded-full p-0.5\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge-icon\",\n    },\n  });\n}\n\nexport { Badge, BadgeIcon };\n",
      "type": "registry:file",
      "target": "~/components/ui/badge/badge.tsx"
    }
  ]
}