{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badges-shine",
  "title": "Shine badges",
  "description": "Styled badges: the Shine set. 5 decorative badges variations (MetallicBadge, NeonBadge, HolographicBadge, GoldBadge, ChromeBadge) 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-shine.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/* Shine badge family: 5 light and metallic badges. Colour comes ONLY from tokens (alpha via color-mix or a utility), the size is aligned with the base badge scale (+xl). The continuous sheens run on framer-motion (motion/react) and stop under reduced-motion; the metallic gradients stay static. */\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 overflow-hidden 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/* Metallic: surface token'lardan fircalanmis metal gradyani + ust highlight. */\nexport function MetallicBadge({ 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 border-border bg-gradient-to-b from-surface-3 via-surface-2 to-secondary text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-foreground/10 to-transparent\" />\n      <span className=\"relative\">{children}</span>\n    </span>\n  )\n}\n\n/* Neon: token kenar + ic/dis isima, saydam govde. */\nexport function NeonBadge({ 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 border-info bg-transparent text-info shadow-[0_0_8px_-1px_color-mix(in_oklab,var(--color-info)_65%,transparent),inset_0_0_6px_-1px_color-mix(in_oklab,var(--color-info)_45%,transparent)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\n/* Holographic: cok-token yaniltici sheen surekli kayar. */\nexport function HolographicBadge({ 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      <motion.span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,transparent,color-mix(in_oklab,var(--color-info)_50%,transparent),color-mix(in_oklab,var(--color-success)_50%,transparent),color-mix(in_oklab,var(--color-danger)_50%,transparent),transparent)] bg-[length:250%_100%] opacity-70 mix-blend-overlay\"\n        animate={reduce ? undefined : { backgroundPositionX: [\"0%\", \"100%\"] }}\n        transition={reduce ? undefined : { duration: 4, ease: \"linear\", repeat: Infinity }}\n      />\n      <span className=\"relative\">{children}</span>\n    </span>\n  )\n}\n\n/* Gold: warning token'lardan sicak metalik gorunum. */\nexport function GoldBadge({ 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 border-warning/40 bg-gradient-to-b from-warning-soft via-warning to-warning-soft text-warning-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-warning-foreground/25 to-transparent\" />\n      <span className=\"relative\">{children}</span>\n    </span>\n  )\n}\n\n/* Chrome: surface token'lardan soguk metalik gorunum. */\nexport function ChromeBadge({ 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 border-border bg-gradient-to-b from-background via-surface-2 to-surface-3 text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-0 h-px bg-foreground/20\" />\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 bottom-0 h-px bg-foreground/10\" />\n      <span className=\"relative\">{children}</span>\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/badges-shine.tsx"
    }
  ],
  "categories": [
    "styled",
    "badges"
  ],
  "type": "registry:component"
}