{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:item",
  "title": "Badge",
  "description": "A small count and labeling component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/brook/ui/badge/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\";\nimport styles from \"./badge.module.css\";\n\nconst badgeVariants = cva(styles.badge, {\n  variants: {\n    variant: {\n      default: styles.default,\n      secondary: styles.secondary,\n      destructive: styles.destructive,\n      outline: styles.outline,\n      success: styles.success,\n      info: styles.info,\n    },\n    size: {\n      sm: styles.sm,\n      md: styles.md,\n      lg: styles.lg,\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\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(styles.iconContainer, 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"
    },
    {
      "path": "registry/brook/ui/badge/badge.module.css",
      "content": ".badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 0.5px solid oklch(from var(--border) l c h / 0.8);\n  font-weight: 400;\n  width: fit-content;\n  white-space: nowrap;\n  flex-shrink: 0;\n  gap: 0.375rem;\n  transition:\n    color 150ms ease,\n    box-shadow 150ms ease;\n  overflow: hidden;\n}\n\n.badge svg {\n  pointer-events: none;\n}\n\n.badge:focus-visible {\n  border-color: var(--ring);\n  box-shadow:\n    0 0 0 3px var(--ring),\n    inset 0 0 0 1px var(--ring);\n}\n\n.badge[aria-invalid=\"true\"] {\n  box-shadow: 0 0 0 1px var(--destructive);\n  border-color: var(--destructive);\n}\n\n.default {\n  border-color: transparent;\n  background-color: var(--foreground);\n  color: var(--primary-foreground);\n}\n\n.default::selection,\n.default *::selection {\n  background-color: oklch(0 0 0);\n  color: var(--foreground);\n}\n\n.secondary {\n  border-color: transparent;\n  background-color: var(--secondary);\n  color: var(--secondary-foreground);\n}\n\n.destructive {\n  border-color: transparent;\n  background-color: var(--secondary);\n  color: var(--destructive);\n}\n\n.destructive:focus-visible {\n  box-shadow:\n    0 0 0 3px var(--destructive),\n    inset 0 0 0 1px var(--destructive);\n}\n\n.success {\n  border-color: transparent;\n  background-color: var(--secondary);\n  color: var(--success);\n}\n\n.success:focus-visible {\n  box-shadow:\n    0 0 0 3px var(--success),\n    inset 0 0 0 1px var(--success);\n}\n\n.info {\n  border-color: transparent;\n  background-color: var(--secondary);\n  color: var(--info);\n}\n\n.info:focus-visible {\n  box-shadow:\n    0 0 0 3px var(--info),\n    inset 0 0 0 1px var(--info);\n}\n\n.outline {\n  color: var(--foreground);\n  border-color: var(--border);\n  background-color: transparent;\n}\n\n.outline:hover {\n  background-color: var(--card);\n}\n\n.iconContainer {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  flex-shrink: 0;\n  padding: 0.125rem;\n  margin-right: 0.25rem;\n}\n\n.sm {\n  padding: 0.0625rem 0.375rem;\n  font-size: 0.625rem;\n  line-height: 15px;\n  border-radius: var(--radius);\n}\n\n.md {\n  padding: 0.125rem 0.5rem;\n  font-size: 0.75rem;\n  line-height: 14px;\n  border-radius: var(--radius);\n}\n\n.lg {\n  padding: 0.25rem 0.75rem;\n  font-size: 0.875rem;\n  border-radius: var(--radius-lg);\n}\n\n.light .default::selection,\n.light .default *::selection,\n[data-theme=\"light\"] .default::selection,\n[data-theme=\"light\"] .default *::selection {\n  background-color: #fff;\n  color: #000;\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/badge/badge.module.css"
    }
  ]
}