{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "Compact status, label, or count chip.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/badge-knobs.ts",
      "target": "@components/control-ui/knob-contracts/badge-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/badge.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const badgeKnobs = [\"--cui-badge-radius\", \"--cui-badge-background\", \"--cui-badge-foreground\", \"--cui-badge-border-color\"] as const;\nexport type BadgeKnobStyle = Partial<Record<(typeof badgeKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/badge.css",
      "target": "@components/control-ui/styles/recipes/badge.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"badge\"][data-slot=\"root\"]) {\n    --cui-badge-radius: var(--radius-control);\n    --cui-badge-background: var(--_badge-color-background);\n    --cui-badge-foreground: var(--_badge-color-foreground);\n    --cui-badge-border-color: transparent;\n    --_badge-color-background: var(--badge-neutral);\n    --_badge-color-foreground: var(--badge-neutral-foreground);\n    --_badge-color-border: var(--badge-neutral-border);\n    --_badge-color-background-hover: var(--badge-neutral-hover);\n    --_badge-hover-background: var(--_badge-color-background-hover);\n    border-color: var(--cui-badge-border-color);\n    border-radius: var(--cui-badge-radius);\n    background: var(--cui-badge-background);\n    color: var(--cui-badge-foreground);\n    outline: none;\n    transition: background-color var(--duration-fast) var(--ease-standard);\n  }\n\n  :where([data-control-family=\"badge\"][data-slot=\"root\"][data-variant=\"outline\"]) {\n    --cui-badge-background: transparent;\n    --cui-badge-border-color: var(--_badge-color-border);\n    --_badge-hover-background: var(--_badge-color-background);\n  }\n\n  :where(a[data-control-family=\"badge\"][data-slot=\"root\"]:hover),\n  :where(button[data-control-family=\"badge\"][data-slot=\"root\"]:hover) {\n    background: var(--_badge-hover-background);\n  }\n\n  :where([data-control-family=\"badge\"][data-slot=\"root\"][data-color=\"red\"]) {\n    --_badge-color-background: var(--badge-red);\n    --_badge-color-foreground: var(--badge-red-foreground);\n    --_badge-color-border: var(--badge-red-border);\n    --_badge-color-background-hover: var(--badge-red-hover);\n  }\n\n  :where([data-control-family=\"badge\"][data-slot=\"root\"][data-color=\"orange\"]) {\n    --_badge-color-background: var(--badge-orange);\n    --_badge-color-foreground: var(--badge-orange-foreground);\n    --_badge-color-border: var(--badge-orange-border);\n    --_badge-color-background-hover: var(--badge-orange-hover);\n  }\n\n  :where([data-control-family=\"badge\"][data-slot=\"root\"][data-color=\"yellow\"]) {\n    --_badge-color-background: var(--badge-yellow);\n    --_badge-color-foreground: var(--badge-yellow-foreground);\n    --_badge-color-border: var(--badge-yellow-border);\n    --_badge-color-background-hover: var(--badge-yellow-hover);\n  }\n\n  :where([data-control-family=\"badge\"][data-slot=\"root\"][data-color=\"green\"]) {\n    --_badge-color-background: var(--badge-green);\n    --_badge-color-foreground: var(--badge-green-foreground);\n    --_badge-color-border: var(--badge-green-border);\n    --_badge-color-background-hover: var(--badge-green-hover);\n  }\n\n  :where([data-control-family=\"badge\"][data-slot=\"root\"][data-color=\"blue\"]) {\n    --_badge-color-background: var(--badge-blue);\n    --_badge-color-foreground: var(--badge-blue-foreground);\n    --_badge-color-border: var(--badge-blue-border);\n    --_badge-color-background-hover: var(--badge-blue-hover);\n  }\n\n  :where([data-control-family=\"badge\"][data-slot=\"root\"][data-color=\"purple\"]) {\n    --_badge-color-background: var(--badge-purple);\n    --_badge-color-foreground: var(--badge-purple-foreground);\n    --_badge-color-border: var(--badge-purple-border);\n    --_badge-color-background-hover: var(--badge-purple-hover);\n  }\n\n  :where([data-control-family=\"badge\"][data-slot=\"root\"][data-color=\"pink\"]) {\n    --_badge-color-background: var(--badge-pink);\n    --_badge-color-foreground: var(--badge-pink-foreground);\n    --_badge-color-border: var(--badge-pink-border);\n    --_badge-color-background-hover: var(--badge-pink-hover);\n  }\n}\n\n@property --cui-badge-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-badge-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-badge-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-badge-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/badge.tsx",
      "target": "@components/control-ui/ui/badge.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport type { RenderProp } from \"@/components/control-ui/control-props\";\nimport type { BadgeKnobStyle } from \"@/components/control-ui/knob-contracts/badge-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport const badgeVariants = [\"default\", \"outline\"] as const;\n\nexport type BadgeVariant = (typeof badgeVariants)[number];\n\nexport const badgeSizes = [\"sm\", \"md\"] as const;\n\nexport type BadgeSize = (typeof badgeSizes)[number];\n\nexport const BADGE_COLORS = [\"neutral\", \"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"purple\", \"pink\"] as const;\n\nexport type BadgeColor = (typeof BADGE_COLORS)[number];\n\nexport type BadgeProps = Omit<ComponentProps<\"span\">, \"style\"> & {\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  color?: BadgeColor;\n  render?: RenderProp<ComponentProps<\"span\">>;\n  style?: CSSProperties & BadgeKnobStyle;\n};\n\nexport function Badge({ variant = \"default\", size = \"md\", color, render, className, children, ...props }: BadgeProps) {\n  const resolvedColor = color ?? \"neutral\";\n\n  return useRender({\n    defaultTagName: \"span\",\n    render,\n    props: {\n      ...props,\n      \"data-control-ui\": \"badge\",\n      \"data-control-family\": \"badge\",\n      \"data-slot\": \"root\",\n      \"data-variant\": variant,\n      \"data-size\": size,\n      \"data-color\": resolvedColor,\n      className: cn(\n        \"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-3\",\n        size === \"sm\" ? \"h-4 px-1.5 py-0\" : \"px-2 py-0.5\",\n        className,\n      ),\n      children,\n    },\n  });\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/badge.css\"": {}
  },
  "meta": {}
}