{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/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 * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const badgeVariants = cva(\n  [\n    \"relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(\" \"),\n  {\n    defaultVariants: {\n      size: \"md\",\n      color: \"default\",\n      variant: \"soft\",\n      shape: \"rounded\",\n    },\n    variants: {\n      size: {\n        sm: \"px-2 py-0.5 text-mini font-medium [&_svg:not([class*='size-'])]:size-3\",\n        md: \"px-2.5 py-1 text-mini font-medium [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"px-3 py-1.5 text-small font-medium [&_svg:not([class*='size-'])]:size-4\",\n      },\n      shape: {\n        rounded: \"rounded-[var(--radius-6)]\",\n        pill: \"rounded-full\",\n      },\n      color: {\n        default: \"\",\n        success: \"\",\n        warning: \"\",\n        error: \"\",\n      },\n      variant: {\n        solid: \"\",\n        soft: \"\",\n        outlined: \"\",\n      },\n    },\n    compoundVariants: [\n      // Semantic colors use fixed hex tokens in both themes; the accent\n      // scale inverts in dark mode.\n      { color: \"default\", variant: \"solid\", class: \"bg-ink text-[color:var(--base)]\" },\n      { color: \"success\", variant: \"solid\", class: \"bg-success text-success-fg\" },\n      { color: \"warning\", variant: \"solid\", class: \"bg-warning text-warning-fg\" },\n      { color: \"error\",   variant: \"solid\", class: \"bg-error text-error-fg\" },\n      { color: \"default\", variant: \"soft\", class: \"bg-fill-1 text-ink-muted\" },\n      { color: \"success\", variant: \"soft\", class: \"bg-success-soft-bg text-success-soft-fg\" },\n      { color: \"warning\", variant: \"soft\", class: \"bg-warning-soft-bg text-warning-soft-fg\" },\n      { color: \"error\",   variant: \"soft\", class: \"bg-error-soft-bg text-error-soft-fg\" },\n      // Outlined: no fill, hairline border. Semantic colors use a tinted\n      // border + matching text; default falls back to the shared hairline.\n      { color: \"default\", variant: \"outlined\", class: \"border border-hairline text-ink-muted\" },\n      { color: \"success\", variant: \"outlined\", class: \"border border-success/40 text-success\" },\n      { color: \"warning\", variant: \"outlined\", class: \"border border-warning/40 text-warning\" },\n      { color: \"error\",   variant: \"outlined\", class: \"border border-error/40 text-error\" },\n    ],\n  },\n);\n\nexport interface BadgeProps extends Omit<useRender.ComponentProps<\"span\">, \"color\"> {\n  /** Semantic color. Maps to fill / border / text tokens per `variant`. */\n  color?: VariantProps<typeof badgeVariants>[\"color\"];\n  size?: VariantProps<typeof badgeVariants>[\"size\"];\n  shape?: VariantProps<typeof badgeVariants>[\"shape\"];\n  /** Visual treatment. `solid` = saturated fill. `soft` (default) =\n   *  tinted fill for dense surfaces. `outlined` = no fill, hairline border. */\n  variant?: VariantProps<typeof badgeVariants>[\"variant\"];\n  /** Optional inline icon rendered before the label. */\n  icon?: React.ReactNode;\n}\n\nexport function Badge({\n  className,\n  color,\n  size,\n  shape,\n  variant,\n  icon,\n  render,\n  children,\n  ...props\n}: BadgeProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(badgeVariants({ size, color, variant, shape }), className),\n    \"data-slot\": \"badge\",\n    children: (\n      <>\n        {icon}\n        {children}\n      </>\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n",
      "type": "registry:ui",
      "target": "components/ui/badge.tsx"
    }
  ],
  "type": "registry:ui"
}