{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"skeleton","type":"registry:component","title":"Skeleton","description":"Loading placeholder block with a soft shimmer sweep — shape it entirely with className, compose avatars, text bars and image blocks. Reduced-motion swaps the sweep for a calm opacity pulse.","author":"UI Lab","dependencies":["clsx","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/skeleton.tsx","type":"registry:component","target":"@components/motion/skeleton.tsx","content":"// ui-lab-ten.vercel.app/components/motion/skeleton\n// Ported from motion-anything (nexu-io, Apache-2.0), \"Loading Shimmer\" recipe.\nimport { cn } from \"@/lib/utils\";\n\nexport interface SkeletonProps {\n  /** Sweeps a soft highlight across the block. Defaults to true; set false for a flat static base color. */\n  shimmer?: boolean;\n  className?: string;\n}\n\n// A skeleton block: a muted base color with an optional CSS-only sweeping\n// highlight. Size, radius and shape all come from className — this component\n// only owns the fill and the sweep.\nexport function Skeleton({ shimmer = true, className }: SkeletonProps) {\n  return (\n    <>\n      {shimmer && (\n        <style>\n          {`\n@keyframes uilab-skeleton-sweep { 100% { transform: translateX(100%); } }\n.uilab-skeleton-shimmer::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--foreground) 14%, transparent), transparent);\n  animation: uilab-skeleton-sweep 1.4s ease-in-out infinite;\n  will-change: transform;\n}\n@media (prefers-reduced-motion: reduce) {\n  .uilab-skeleton-shimmer::after { animation: none; display: none; }\n}\n`}\n        </style>\n      )}\n      <div\n        aria-hidden=\"true\"\n        className={cn(\n          \"relative overflow-hidden rounded-md bg-muted\",\n          shimmer && \"uilab-skeleton-shimmer motion-reduce:animate-pulse\",\n          className,\n        )}\n      />\n    </>\n  );\n}\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"}]}