{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatars-styled",
  "title": "Avatars essentials",
  "description": "Styled avatars: the essentials set. 5 decorative avatars variations (RingAvatar, StatusAvatar, GradientRingAvatar, GlowAvatar, SquircleAvatar) 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/avatars-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/* Avatar family: 5 decorative avatars. Initials-based (no external image), colour comes ONLY from tokens. Size = the box scale. framer-motion is used only for the GradientRing rotation; static under reduced-motion. A consumer who wants an image puts an <img> in place of the initials. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst box: Record<StyledSize, string> = {\n  sm: \"size-8 text-xs\",\n  md: \"size-10 text-sm\",\n  lg: \"size-12 text-base\",\n  xl: \"size-16 text-lg\",\n}\n\nconst face =\n  \"flex size-full items-center justify-center rounded-full bg-secondary font-medium text-secondary-foreground select-none\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize; initials?: string }\n\n/* Ring: token halka + bosluk (ring-offset). */\nexport function RingAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-avatar\"\n      className={cn(\"relative inline-flex rounded-full ring-2 ring-primary ring-offset-2 ring-offset-background\", box[size], className)}\n      {...props}\n    >\n      <span className={face}>{initials}</span>\n    </div>\n  )\n}\n\n/* Status: sag-alt kosede success token durum noktasi. */\nexport function StatusAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-avatar\" className={cn(\"relative inline-flex\", box[size], className)} {...props}>\n      <span className={face}>{initials}</span>\n      <span className=\"absolute bottom-0 right-0 size-1/4 rounded-full border-2 border-background bg-success\" />\n    </div>\n  )\n}\n\n/* GradientRing: donen konik token gradyan halka. */\nexport function GradientRingAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"styled-avatar\" className={cn(\"relative inline-flex rounded-full p-[2px]\", box[size], className)} {...props}>\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 rounded-full\"\n        style={{ background: \"conic-gradient(from 0deg, var(--info), var(--brand), var(--success), var(--info))\" }}\n        animate={reduce ? undefined : { rotate: 360 }}\n        transition={reduce ? undefined : { duration: 4, ease: \"linear\", repeat: Infinity }}\n      />\n      <span className={cn(face, \"relative border-2 border-background\")}>{initials}</span>\n    </div>\n  )\n}\n\n/* Glow: yumusak token hale. */\nexport function GlowAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-avatar\" className={cn(\"relative inline-flex\", box[size], className)} {...props}>\n      <span aria-hidden=\"true\" className=\"absolute inset-0 rounded-full bg-brand opacity-50 blur-md\" />\n      <span className={cn(face, \"relative bg-brand text-brand-foreground\")}>{initials}</span>\n    </div>\n  )\n}\n\n/* Squircle: superellipse kose + token kenar. */\nexport function SquircleAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-avatar\"\n      className={cn(\"relative inline-flex rounded-[35%] border border-border bg-secondary\", box[size], className)}\n      {...props}\n    >\n      <span className=\"flex size-full items-center justify-center rounded-[35%] font-medium text-secondary-foreground select-none\">\n        {initials}\n      </span>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/avatars-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "avatars"
  ],
  "type": "registry:component"
}