{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badges-status",
  "title": "Status badges",
  "description": "Styled badges: the Status set. 5 decorative badges variations (OnlineBadge, AwayBadge, BusyBadge, OfflineBadge, CountBadge) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/badges-status.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Status badge family: presence and state badges. Colour comes ONLY from semantic tokens (success/warning/danger/muted), the size is aligned with the base badge scale (+xl). framer-motion is used only for the Busy pulse; the pulse stops under reduced-motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst box: Record<StyledSize, string> = {\n  sm: \"h-5 gap-1 rounded-md px-1.5 text-xs\",\n  md: \"h-6 gap-1.5 rounded-md px-2 text-xs\",\n  lg: \"h-7 gap-1.5 rounded-lg px-2.5 text-sm\",\n  xl: \"h-8 gap-2 rounded-lg px-3 text-sm\",\n}\n\nconst base =\n  \"relative inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap font-medium [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none\"\n\nconst shell = \"border border-border bg-secondary text-secondary-foreground\"\n\ntype Props = React.ComponentProps<\"span\"> & { size?: StyledSize }\n\n/* Online: success noktasi + varsayilan \"Online\" etiketi. */\nexport function OnlineBadge({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <span data-slot=\"styled-badge\" className={cn(base, box[size], shell, className)} {...props}>\n      <span className=\"size-1.5 rounded-full bg-success\" />\n      {children ?? \"Online\"}\n    </span>\n  )\n}\n\n/* Away: warning noktasi + varsayilan \"Away\" etiketi. */\nexport function AwayBadge({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <span data-slot=\"styled-badge\" className={cn(base, box[size], shell, className)} {...props}>\n      <span className=\"size-1.5 rounded-full bg-warning\" />\n      {children ?? \"Away\"}\n    </span>\n  )\n}\n\n/* Busy: danger noktasi (nabiz atar) + varsayilan \"Busy\" etiketi. */\nexport function BusyBadge({ className, size = \"md\", children, ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <span data-slot=\"styled-badge\" className={cn(base, box[size], shell, className)} {...props}>\n      <span className=\"relative inline-flex size-1.5\">\n        {!reduce && (\n          <motion.span\n            aria-hidden=\"true\"\n            className=\"absolute inset-0 rounded-full bg-danger\"\n            animate={{ scale: [1, 2.2], opacity: [0.6, 0] }}\n            transition={{ duration: 1.3, ease: \"easeOut\", repeat: Infinity }}\n          />\n        )}\n        <span className=\"relative inline-flex size-1.5 rounded-full bg-danger\" />\n      </span>\n      {children ?? \"Busy\"}\n    </span>\n  )\n}\n\n/* Offline: muted noktasi + varsayilan \"Offline\" etiketi. */\nexport function OfflineBadge({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <span data-slot=\"styled-badge\" className={cn(base, box[size], shell, \"text-muted-foreground\", className)} {...props}>\n      <span className=\"size-1.5 rounded-full bg-muted-foreground\" />\n      {children ?? \"Offline\"}\n    </span>\n  )\n}\n\n/* Count: a numeric counter pill; takes a count prop (above 99 it shows \"99+\"). */\nexport function CountBadge({\n  className,\n  size = \"md\",\n  count = 0,\n  children,\n  ...props\n}: Props & { count?: number }) {\n  const label = count > 99 ? \"99+\" : String(count)\n  return (\n    <span\n      data-slot=\"styled-badge\"\n      className={cn(base, box[size], \"min-w-5 rounded-full bg-danger px-1.5 tabular-nums text-danger-foreground\", className)}\n      {...props}\n    >\n      {children ?? label}\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/badges-status.tsx"
    }
  ],
  "categories": [
    "styled",
    "badges"
  ],
  "type": "registry:component"
}