{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "An easily stylable badge component.",
  "dependencies": [
    "tailwind-variants",
    "clsx",
    "tailwind-merge",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "classes"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/ui/badge/index.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\r\nimport { useRender } from \"@base-ui/react/use-render\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"@/lib/classes\";\r\n\r\nconst badgeVariants = tv({\r\n  base: `inline-flex items-center justify-center relative text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1.5px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden`,\r\n  variants: {\r\n    shape: {\r\n      simple: \"rounded-full border px-2 py-0.5\",\r\n      bar: \"rounded-[7px] pl-3.5 pr-1.5 py-1 before:absolute before:left-1.5 before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-[55%] before:bg-current before:rounded-full border border-transparent\",\r\n      dot: \"rounded-[7px] pl-4.5 pr-1.5 py-1 before:absolute before:left-1.5 before:top-1/2 before:-translate-y-1/2 before:size-2 before:bg-current before:rounded-full border border-transparent\",\r\n    },\r\n    variant: {\r\n      default: \"\",\r\n      destructive: \"\",\r\n      secondary: \"\",\r\n      outline: \"\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    shape: \"simple\",\r\n    variant: \"default\",\r\n  },\r\n  compoundVariants: [\r\n    // Simple\r\n    {\r\n      shape: \"simple\",\r\n      variant: \"default\",\r\n      class:\r\n        \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\r\n    },\r\n    {\r\n      shape: \"simple\",\r\n      variant: \"destructive\",\r\n      class:\r\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\",\r\n    },\r\n    {\r\n      shape: \"simple\",\r\n      variant: \"secondary\",\r\n      class:\r\n        \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\r\n    },\r\n    {\r\n      shape: \"simple\",\r\n      variant: \"outline\",\r\n      class:\r\n        \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\r\n    },\r\n\r\n    // Bar\r\n    {\r\n      shape: \"bar\",\r\n      variant: \"default\",\r\n      class:\r\n        \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\r\n    },\r\n    {\r\n      shape: \"bar\",\r\n      variant: \"destructive\",\r\n      class:\r\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\",\r\n    },\r\n    {\r\n      shape: \"bar\",\r\n      variant: \"secondary\",\r\n      class:\r\n        \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\r\n    },\r\n    {\r\n      shape: \"bar\",\r\n      variant: \"outline\",\r\n      class:\r\n        \"text-foreground border-foreground/50 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\r\n    },\r\n\r\n    // Dot\r\n    {\r\n      shape: \"dot\",\r\n      variant: \"default\",\r\n      class:\r\n        \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\r\n    },\r\n    {\r\n      shape: \"dot\",\r\n      variant: \"destructive\",\r\n      class:\r\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\",\r\n    },\r\n    {\r\n      shape: \"dot\",\r\n      variant: \"secondary\",\r\n      class:\r\n        \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\r\n    },\r\n    {\r\n      shape: \"dot\",\r\n      variant: \"outline\",\r\n      class:\r\n        \"text-foreground border-foreground/50 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\r\n    },\r\n  ],\r\n});\r\n\r\ninterface BadgeProps extends useRender.ComponentProps<\"span\"> {\r\n  shape?: VariantProps<typeof badgeVariants>[\"shape\"];\r\n  variant?: VariantProps<typeof badgeVariants>[\"variant\"];\r\n}\r\n\r\nfunction Badge({\r\n  className,\r\n  shape = \"simple\",\r\n  variant = \"default\",\r\n  render,\r\n  ...props\r\n}: BadgeProps) {\r\n  const defaultProps = {\r\n    className: cn(badgeVariants({ className, shape, variant })),\r\n    \"data-slot\": \"badge\",\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"span\",\r\n    props: mergeProps<\"span\">(defaultProps, props),\r\n    render,\r\n  });\r\n}\r\nexport { Badge, badgeVariants };\r\n",
      "type": "registry:ui",
      "target": "components/ui/badge.tsx"
    }
  ]
}