{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <edu@smoothui.dev>","css":{},"dependencies":["motion"],"description":"Skeleton loading placeholders for SmoothUI with optional shimmer.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { type ComponentProps, useCallback, useRef } from \"react\";\nimport {\n  EASE_IN_OUT,\n  LOOP_CLASS,\n  LOOP_REPEAT_DELAY,\n  loopTransition,\n  useLoopInView,\n} from \"@/components/smoothui/lib/animation\";\n\nexport type SkeletonProps = ComponentProps<\"div\"> & {\n  /** Animate a subtle shimmer across the block */\n  shimmer?: boolean;\n};\n\n/**\n * SmoothUI Skeleton — loading placeholder. SmoothUI-owned.\n */\nexport default function Skeleton({\n  className,\n  ref,\n  shimmer = true,\n  ...props\n}: SkeletonProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const hostRef = useRef<HTMLDivElement>(null);\n  const inView = useLoopInView(hostRef);\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      hostRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n  const animate = shimmer && !shouldReduceMotion && inView;\n\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        \"relative overflow-hidden rounded-md bg-foreground/10\",\n        className\n      )}\n      data-slot=\"skeleton\"\n      ref={setRef}\n      {...props}\n    >\n      {animate ? (\n        <motion.span\n          animate={{ transform: [\"translateX(-100%)\", \"translateX(100%)\"] }}\n          aria-hidden\n          className={cn(\n            \"pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-foreground/10 to-transparent\",\n            LOOP_CLASS\n          )}\n          data-slot=\"skeleton-shimmer\"\n          initial={{ transform: \"translateX(-100%)\" }}\n          transition={loopTransition(\n            { duration: 1.2, ease: EASE_IN_OUT },\n            LOOP_REPEAT_DELAY.shimmer\n          )}\n        />\n      ) : null}\n    </div>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/skeleton/index.tsx","type":"registry:ui"}],"name":"skeleton","registryDependencies":["https://smoothui.dev/r/lib.json"],"title":"Skeleton","type":"registry:ui"}