{
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "Badge presents short status, label, or count information that helps people scan an interface.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0",
    "class-variance-authority@0.7.1"
  ],
  "files": [
    {
      "path": "src/components/ui/badge.tsx",
      "type": "registry:ui",
      "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 \"@/lib/utils\";\nimport { useResolvedControlSize } from \"@/components/ui/siteplane-provider\";\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(2)-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(2.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm\",\n        sm: \"h-5 min-w-5 rounded-(--badge-sm-radius) px-[calc(--spacing(2)-1px)] text-xs sm:h-4 sm:min-w-4 sm:[font-size:var(--badge-sm-font-size)]\",\n        xl: \"h-7.5 min-w-7.5 px-[calc(--spacing(3)-1px)] text-base sm:h-6.5 sm:min-w-6.5 sm:text-sm\",\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 resolvedSize = useResolvedControlSize(size);\n  const defaultProps = {\n    className: cn(badgeVariants({ size: resolvedSize, variant }), className),\n    \"data-slot\": \"badge\",\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n"
    }
  ],
  "categories": [
    "data-display"
  ],
  "docs": "# Badge\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nBadge presents short status, label, or count information that helps people scan\nan interface. It does not replace explanatory copy.\n\n## Import\n\n`import { Badge } from \"@/components/ui/badge\";`\n\n## Public API\n\n- `variant` accepts `\"default\"`, `\"secondary\"`, `\"outline\"`,\n  `\"destructive\"`, `\"error\"`, `\"info\"`, `\"success\"`, or `\"warning\"`.\n- `size` accepts `\"sm\"`, `\"default\"`, `\"lg\"`, or `\"xl\"`; without a local value,\n  Badge inherits the nearest `SiteplaneUIProvider controlSize`.\n- Use `render` to make a Badge a semantic link or button without nesting\n  interactive elements.\n\n## Public Motion\n\n- A static Badge does not animate.\n- Interactive badges inherit their link or Button states; do not add local\n  motion values.\n\n## Public Accessibility\n\n- Keep Badge text short and explicit.\n- Do not communicate status through color or a status dot alone.\n- Interactive badges need correct link or button semantics, visible focus, and\n  an accessible name.\n- Treat icons and dots as decorative when the text conveys the same meaning.\n\n## Public Agent Guidance\n\n- Use existing variants and sizes instead of inventing local badge colors.\n- Do not use Badge for long explanatory text.\n- Use `render` when the badge itself is interactive.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/data-display/badge)\n\n- [Registry source](https://ui.siteplane.io/r/badge.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/data-display/badge",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}