{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badges-styled",
  "title": "Badges essentials",
  "description": "Styled badges: the essentials set. 5 decorative badges variations (DotBadge, GradientBadge, GlowBadge, PulseBadge, OutlineBadge) 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-styled.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/* Badge family: 5 decorative badges. Colour comes ONLY from tokens (alpha via color-mix), the size is aligned with the base badge scale (+xl). framer-motion is used only for the Pulse dot; 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  \"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\ntype Props = React.ComponentProps<\"span\"> & { size?: StyledSize }\n\n/* Dot: bastaki token durum noktasi. */\nexport function DotBadge({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-badge\"\n      className={cn(base, box[size], \"border border-border bg-secondary text-secondary-foreground\", className)}\n      {...props}\n    >\n      <span className=\"size-1.5 rounded-full bg-success\" />\n      {children}\n    </span>\n  )\n}\n\n/* Gradient: token gradyan dolgu. */\nexport function GradientBadge({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-badge\"\n      className={cn(base, box[size], \"text-info-foreground [background-image:linear-gradient(135deg,var(--info),var(--brand))]\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\n/* Glow: token isima (box-shadow) ile parlayan rozet. */\nexport function GlowBadge({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-badge\"\n      className={cn(base, box[size], \"bg-info text-info-foreground shadow-[0_0_12px_-2px_var(--info)]\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\n/* Pulse: canli gostergesi - token nokta halkasi nabiz atar. */\nexport function PulseBadge({ className, size = \"md\", children, ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <span\n      data-slot=\"styled-badge\"\n      className={cn(base, box[size], \"border border-border bg-secondary text-secondary-foreground\", className)}\n      {...props}\n    >\n      <span className=\"relative inline-flex size-1.5\">\n        {!reduce && (\n          <motion.span\n            className=\"absolute inset-0 rounded-full bg-danger\"\n            animate={{ scale: [1, 2.4], opacity: [0.6, 0] }}\n            transition={{ duration: 1.4, ease: \"easeOut\", repeat: Infinity }}\n          />\n        )}\n        <span className=\"relative inline-flex size-1.5 rounded-full bg-danger\" />\n      </span>\n      {children}\n    </span>\n  )\n}\n\n/* Outline: token gradyan kenar, saydam govde. */\nexport function OutlineBadge({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-badge\"\n      className={cn(\n        base,\n        box[size],\n        \"border-0 bg-[linear-gradient(var(--background),var(--background)),linear-gradient(120deg,var(--info),var(--brand))] bg-origin-border text-foreground [background-clip:padding-box,border-box] [border:1px_solid_transparent]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/badges-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "badges"
  ],
  "type": "registry:component"
}