{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/default/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\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const badgeVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default:\n          \"h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs\",\n        lg: \"h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm\",\n        sm: \"h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]\",\n      },\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground [button&,a&]:hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white [button&,a&]:hover:bg-destructive/90\",\n        error:\n          \"bg-destructive/8 text-destructive-foreground dark:bg-destructive/16\",\n        info: \"bg-info/8 text-info-foreground dark:bg-info/16\",\n        outline:\n          \"border-input bg-background text-foreground dark:bg-input/32 [button&,a&]:hover:bg-accent/50 dark:[button&,a&]:hover:bg-input/48\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [button&,a&]:hover:bg-secondary/90\",\n        success: \"bg-success/8 text-success-foreground dark:bg-success/16\",\n        warning: \"bg-warning/8 text-warning-foreground dark:bg-warning/16\",\n      },\n    },\n  },\n);\n\nexport interface BadgeProps extends useRender.ComponentProps<\"span\"> {\n  variant?: VariantProps<typeof badgeVariants>[\"variant\"];\n  size?: VariantProps<typeof badgeVariants>[\"size\"];\n}\n\nexport function Badge({\n  className,\n  variant,\n  size,\n  render,\n  ...props\n}: BadgeProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(badgeVariants({ className, size, variant })),\n    \"data-slot\": \"badge\",\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "light": {
      "destructive-foreground": "var(--color-red-700)",
      "info": "var(--color-blue-500)",
      "info-foreground": "var(--color-blue-700)",
      "success": "var(--color-emerald-500)",
      "success-foreground": "var(--color-emerald-700)",
      "warning": "var(--color-amber-500)",
      "warning-foreground": "var(--color-amber-700)"
    },
    "dark": {
      "destructive-foreground": "var(--color-red-400)",
      "info": "var(--color-blue-500)",
      "info-foreground": "var(--color-blue-400)",
      "success": "var(--color-emerald-500)",
      "success-foreground": "var(--color-emerald-400)",
      "warning": "var(--color-amber-500)",
      "warning-foreground": "var(--color-amber-400)"
    }
  },
  "type": "registry:ui"
}