{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton-avatar",
  "title": "Avatar skeleton",
  "description": "Styled skeleton: the Avatar set. 5 decorative skeleton variations (AvatarCircleSkeleton, AvatarSquareSkeleton, StackSkeleton, InlineSkeleton, DetailSkeleton) 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/skeleton-avatar.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 skeleton family: 5 avatar plus text combinations (round, square, stack, inline, detail). The difference is not in the ANIMATION but in the STRUCTURE - the avatar geometry and the text layout beside it change; the pulse is the same calm token pulse in all of them. The widths are fixed and the delays index-derived (NO Math.random). Colour comes ONLY from tokens. Skeletons are decorative: the root is aria-hidden. The pulse stops under reduced motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\n/* Shared calm pulse (framer-motion, NO keyframes). */\nfunction Block({ className, delay = 0 }: { className?: string; delay?: number }) {\n  const reduce = useReducedMotion()\n  return (\n    <motion.span\n      className={cn(\"block rounded-md bg-secondary\", className)}\n      animate={reduce ? undefined : { opacity: [0.5, 1, 0.5] }}\n      transition={\n        reduce ? undefined : { duration: 1.6, ease: \"easeInOut\", repeat: Infinity, delay }\n      }\n    />\n  )\n}\n\nconst avatar: Record<StyledSize, string> = {\n  sm: \"size-8\",\n  md: \"size-10\",\n  lg: \"size-12\",\n  xl: \"size-14\",\n}\n\nconst large: Record<StyledSize, string> = {\n  sm: \"size-12\",\n  md: \"size-16\",\n  lg: \"size-20\",\n  xl: \"size-24\",\n}\n\nconst line: Record<StyledSize, string> = {\n  sm: \"h-2.5\",\n  md: \"h-3\",\n  lg: \"h-3.5\",\n  xl: \"h-4\",\n}\n\nconst head: Record<StyledSize, string> = {\n  sm: \"h-3.5\",\n  md: \"h-4\",\n  lg: \"h-5\",\n  xl: \"h-6\",\n}\n\nconst gap: Record<StyledSize, string> = {\n  sm: \"gap-2\",\n  md: \"gap-3\",\n  lg: \"gap-3.5\",\n  xl: \"gap-4\",\n}\n\nconst row = \"flex w-full items-center\"\n\n/* AvatarCircle: a round avatar plus a name and a second line. */\nexport function AvatarCircleSkeleton({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(row, gap[size], className)}\n      {...props}\n    >\n      <Block className={cn(\"shrink-0 rounded-full\", avatar[size])} />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Block className={cn(\"w-2/5\", head[size])} delay={0.12} />\n        <Block className={cn(\"w-3/5\", line[size])} delay={0.24} />\n      </div>\n    </div>\n  )\n}\n\n/* AvatarSquare: a soft-cornered square avatar plus a name and a second line. */\nexport function AvatarSquareSkeleton({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(row, gap[size], className)}\n      {...props}\n    >\n      <Block className={cn(\"shrink-0 rounded-lg\", avatar[size])} />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Block className={cn(\"w-1/3\", head[size])} delay={0.12} />\n        <Block className={cn(\"w-2/3\", line[size])} delay={0.24} />\n      </div>\n    </div>\n  )\n}\n\n/* Stack: a stacked list of n people (avatar plus two lines). */\nexport function StackSkeleton({\n  className,\n  size = \"md\",\n  count = 3,\n  ...props\n}: Props & { count?: number }) {\n  const widths = [\"w-2/5\", \"w-1/3\", \"w-1/2\", \"w-2/5\"]\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\"flex w-full flex-col\", gap[size], className)}\n      {...props}\n    >\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={cn(row, gap[size])}>\n          <Block className={cn(\"shrink-0 rounded-full\", avatar[size])} delay={i * 0.14} />\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <Block\n              className={cn(widths[i % widths.length], head[size])}\n              delay={i * 0.14 + 0.07}\n            />\n            <Block className={cn(\"w-3/5\", line[size])} delay={i * 0.14 + 0.14} />\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/* Inline: a small avatar plus one line, like an inline badge. */\nexport function InlineSkeleton({ className, size = \"md\", ...props }: Props) {\n  const inline: Record<StyledSize, string> = {\n    sm: \"size-5\",\n    md: \"size-6\",\n    lg: \"size-7\",\n    xl: \"size-8\",\n  }\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\"inline-flex items-center\", gap[size], className)}\n      {...props}\n    >\n      <Block className={cn(\"shrink-0 rounded-full\", inline[size])} />\n      <Block className={cn(\"w-24\", line[size])} delay={0.12} />\n    </div>\n  )\n}\n\n/* Detail: buyuk avatar, isim, meta satiri ve iki satirlik biyografi. */\nexport function DetailSkeleton({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\"flex w-full items-start\", gap[size], className)}\n      {...props}\n    >\n      <Block className={cn(\"shrink-0 rounded-full\", large[size])} />\n      <div className={cn(\"flex min-w-0 flex-1 flex-col\", gap[size])}>\n        <Block className={cn(\"w-1/2 rounded-lg\", head[size])} delay={0.12} />\n        <Block className={cn(\"w-1/4\", line[size])} delay={0.24} />\n        <Block className={cn(\"w-full\", line[size])} delay={0.36} />\n        <Block className={cn(\"w-4/5\", line[size])} delay={0.48} />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/skeleton-avatar.tsx"
    }
  ],
  "categories": [
    "styled",
    "skeleton"
  ],
  "type": "registry:component"
}