{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton-styled",
  "title": "Skeleton essentials",
  "description": "Styled skeleton: the essentials set. 5 decorative skeleton variations (ShimmerSkeleton, PulseSkeleton, WaveSkeleton, GradientSkeleton, GlowSkeleton) 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-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/* Skeleton family: 5 different SHIMMER treatments of a single token bar (NOT the\n   shape - what changes is the character of the glow, which deliberately separates\n   this from the loaders-skeleton shapes). Color comes ONLY from tokens; alpha via\n   color-mix(in oklab). Size = the bar's HEIGHT; the width defaults to w-full and is\n   rounded. DELIBERATE: a skeleton keeps animating under reduced-motion too (a\n   stopped placeholder reads as \"stuck\", the base Spinner exception). That is why we\n   do not stop the shimmer. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst height: Record<StyledSize, string> = {\n  sm: \"h-3\",\n  md: \"h-4\",\n  lg: \"h-5\",\n  xl: \"h-6\",\n}\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\nconst base = \"relative w-full overflow-hidden rounded-md bg-secondary\"\n\n/* Shimmer: yumusak token parlamasi sol->sag supurur (klasik). */\nexport function ShimmerSkeleton({ className, size = \"md\", ...props }: Props) {\n  useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(base, height[size], className)}\n      {...props}\n    >\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"absolute inset-y-0 left-0 w-2/3 bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--color-foreground)_12%,transparent),transparent)]\"\n        animate={{ x: [\"-100%\", \"250%\"] }}\n        transition={{ duration: 1.4, ease: \"easeInOut\", repeat: Infinity }}\n      />\n    </div>\n  )\n}\n\n/* Pulse: butun cubuk dongude opaklik nabzi atar. */\nexport function PulseSkeleton({ className, size = \"md\", ...props }: Props) {\n  useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"relative w-full rounded-md\", height[size], className)}\n      {...props}\n    >\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 rounded-md bg-secondary\"\n        animate={{ opacity: [0.45, 1, 0.45] }}\n        transition={{ duration: 1.5, ease: \"easeInOut\", repeat: Infinity }}\n      />\n    </div>\n  )\n}\n\n/* Wave: a narrow bright band travels with a slight vertical wave/skew. */\nexport function WaveSkeleton({ className, size = \"md\", ...props }: Props) {\n  useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(base, height[size], className)}\n      {...props}\n    >\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"absolute inset-y-0 left-0 w-1/4 -skew-x-12 bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--color-foreground)_22%,transparent),transparent)]\"\n        animate={{ x: [\"-120%\", \"480%\"], y: [\"-12%\", \"12%\", \"-12%\"] }}\n        transition={{ duration: 1.6, ease: \"easeInOut\", repeat: Infinity }}\n      />\n    </div>\n  )\n}\n\n/* Gradient: cubugun kendisi yavasca kayan bir token gradyani (backgroundPosition). */\nexport function GradientSkeleton({ className, size = \"md\", ...props }: Props) {\n  useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"relative w-full overflow-hidden rounded-md\", height[size], className)}\n      {...props}\n    >\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 bg-[length:200%_100%] bg-[linear-gradient(90deg,var(--color-secondary),color-mix(in_oklab,var(--color-foreground)_14%,var(--color-secondary)),var(--color-secondary))]\"\n        animate={{ backgroundPosition: [\"200% 0%\", \"-200% 0%\"] }}\n        transition={{ duration: 2, ease: \"linear\", repeat: Infinity }}\n      />\n    </div>\n  )\n}\n\n/* Glow: a glow passes along the leading edge, pulsing with a token light. */\nexport function GlowSkeleton({ className, size = \"md\", ...props }: Props) {\n  useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-skeleton\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(base, height[size], className)}\n      {...props}\n    >\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"absolute inset-y-0 left-0 w-1/5 rounded-full bg-[color-mix(in_oklab,var(--color-foreground)_28%,transparent)] shadow-[0_0_12px_2px_color-mix(in_oklab,var(--color-foreground)_28%,transparent)]\"\n        animate={{ x: [\"-140%\", \"560%\"], opacity: [0.4, 1, 0.4] }}\n        transition={{ duration: 1.8, ease: \"easeInOut\", repeat: Infinity }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/skeleton-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "skeleton"
  ],
  "type": "registry:component"
}