{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "Material chip geometry as a static label.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/badge.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { badgeVariants } from \"./badge-variants\"\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  size = \"default\",\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      size,\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/badge-variants.ts",
      "content": "/**\n * Variant definitions live beside the component rather than inside it.\n *\n * React Fast Refresh only treats a module as a hot boundary when every export\n * either is a component or keeps a stable identity across re-evaluations.\n * `cva()` builds a fresh object each time its module runs, so exporting it from\n * the component file demoted that file to a full page reload on every edit.\n * Re-exported from here, the binding's identity survives edits to the component.\n */\n\nimport { cva } from \"class-variance-authority\"\n\n/**\n * Material 3 chip geometry: 32dp tall, the small shape step, label-large type.\n * M3's own \"badge\" is the tiny 6/16dp dot that rides a navigation icon; this is\n * the chip, which is what shadcn's Badge is used for in practice.\n */\nexport const badgeVariants = cva(\n  \"group/badge inline-flex w-fit shrink-0 items-center justify-center border border-transparent whitespace-nowrap transition-colors duration-(--m3-spring-effects-fast-duration) ease-(--m3-spring-effects-fast) focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-m3-secondary [&>svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-m3-primary text-m3-on-primary\",\n        secondary:\n          \"bg-m3-secondary-container text-m3-on-secondary-container\",\n        tertiary: \"bg-m3-tertiary-container text-m3-on-tertiary-container\",\n        destructive: \"bg-m3-error-container text-m3-on-error-container\",\n        // M3's assist chip: transparent with a hairline.\n        outline:\n          \"border-m3-outline-variant text-m3-on-surface-variant [a]:hover:bg-m3-on-surface/8\",\n        ghost: \"text-m3-on-surface-variant [a]:hover:bg-m3-on-surface/8\",\n        link: \"text-m3-primary underline-offset-4 hover:underline\",\n      },\n      /**\n       * Height, padding, type, corner, and icon all move together — a badge\n       * that only changed height would keep 16dp of padding around 11dp text\n       * and read as a mistake rather than a smaller badge.\n       *\n       * The last selector in each is the text-free case: with no label, the\n       * horizontal padding would leave a wide, short lozenge instead of the\n       * square the shape step was drawn for. `:only-child` catches exactly the\n       * icon-only badge without needing a prop for it.\n       */\n      size: {\n        sm: \"h-6 gap-1 rounded-m3-xs px-2 text-m3-label-sm has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg]:size-4! has-[>svg:only-child]:w-6 has-[>svg:only-child]:px-0\",\n        default:\n          \"h-8 gap-2 rounded-m3-sm px-4 text-m3-label-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&>svg]:size-4.5! has-[>svg:only-child]:w-8 has-[>svg:only-child]:px-0\",\n        lg: \"h-10 gap-2 rounded-m3-md px-5 text-m3-title-md has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&>svg]:size-5! has-[>svg:only-child]:w-10 has-[>svg:only-child]:px-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}