{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton-shapes",
  "title": "Shapes skeleton",
  "description": "Styled skeleton: the Shapes set. 5 decorative skeleton variations (CircleSkeleton, SquareSkeleton, RoundedSkeleton, PillSkeleton, BarSkeleton) 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-shapes.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/* Shapes skeleton family: 5 geometric primitives (circle, square, soft square, pill, bar). The Essentials family changes the ANIMATION; this family changes the SHAPE - the animation is the same calm token pulse in every variant. Colour comes ONLY from tokens; alpha via color-mix(in oklab). Skeletons are decorative: the root is aria-hidden. The pulse stops under reduced motion (a static placeholder). */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\n/* The whole family's shared calm pulse: a framer-motion opacity loop (NO keyframes). */\nfunction Block({ className, delay = 0 }: { className?: string; delay?: number }) {\n  const reduce = useReducedMotion()\n  return (\n    <motion.span\n      className={cn(\"block 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\n/* Kare/daire olcegi (kenar uzunlugu). */\nconst box: Record<StyledSize, string> = {\n  sm: \"size-8\",\n  md: \"size-10\",\n  lg: \"size-12\",\n  xl: \"size-16\",\n}\n\n/* Cubuk/hap yuksekligi. */\nconst bar: Record<StyledSize, string> = {\n  sm: \"h-3\",\n  md: \"h-4\",\n  lg: \"h-5\",\n  xl: \"h-6\",\n}\n\n/* Hap genisligi. */\nconst pill: Record<StyledSize, string> = {\n  sm: \"w-16\",\n  md: \"w-20\",\n  lg: \"w-24\",\n  xl: \"w-28\",\n}\n\nconst root = \"inline-flex\"\n\n/* Circle: tam yuvarlak avatar/ikon yeri. */\nexport function CircleSkeleton({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-skeleton\" aria-hidden=\"true\" className={cn(root, className)} {...props}>\n      <Block className={cn(\"rounded-full\", box[size])} />\n    </div>\n  )\n}\n\n/* Square: keskin kenarli kare (thumbnail yeri). */\nexport function SquareSkeleton({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-skeleton\" aria-hidden=\"true\" className={cn(root, className)} {...props}>\n      <Block className={cn(\"rounded-none\", box[size])} />\n    </div>\n  )\n}\n\n/* Rounded: yumusak koseli kare (kart/tile yeri). */\nexport function RoundedSkeleton({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-skeleton\" aria-hidden=\"true\" className={cn(root, className)} {...props}>\n      <Block className={cn(\"rounded-xl\", box[size])} />\n    </div>\n  )\n}\n\n/* Pill: tam yuvarlatilmis yatay hap (badge/chip yeri). */\nexport function PillSkeleton({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-skeleton\" aria-hidden=\"true\" className={cn(root, className)} {...props}>\n      <Block className={cn(\"rounded-full\", bar[size], pill[size])} />\n    </div>\n  )\n}\n\n/* Bar: a single full-width bar (a line placeholder). */\nexport function BarSkeleton({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\"flex w-full\", className)}\n      {...props}\n    >\n      <Block className={cn(\"w-full rounded-md\", bar[size])} />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/skeleton-shapes.tsx"
    }
  ],
  "categories": [
    "styled",
    "skeleton"
  ],
  "type": "registry:component"
}