{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "title": "Skeleton",
  "author": "AlgorizeTech",
  "description": "A loading placeholder with a pulse or shimmer sweep. Use it to hold layout space while content is still being fetched.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/SkeletonBlock.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport React from \"react\";\n\n// ==========================================\n// TYPES & PROPS\n// ==========================================\nexport type SkeletonVariant =\n  | \"rect\"\n  | \"circle\"\n  | \"text\"\n  | \"profile\"\n  | \"card\"\n  | \"custom\";\nexport type SkeletonAnimation = \"pulse\" | \"shimmer\" | \"none\";\n\nexport interface SkeletonBlockProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: SkeletonVariant;\n  animation?: SkeletonAnimation;\n  width?: string | number;\n  height?: string | number;\n  radius?: string | number;\n  className?: string;\n}\n\n// ==========================================\n// MAIN COMPONENT\n// ==========================================\n/**\n * Defined at module scope on purpose. Declaring it inside SkeletonBlock would\n * make it a new component type on every render, restarting the shimmer\n * animation each time the parent re-renders.\n */\nfunction ShimmerLayer({ animation }: { animation: SkeletonAnimation }) {\n  if (animation !== \"shimmer\") return null;\n  return (\n    <>\n      <style>{`\n          @keyframes shimmer-slide {\n            100% { transform: translateX(100%); }\n          }\n          .animate-shimmer-slide {\n            animation: shimmer-slide 1.5s infinite linear;\n          }\n        `}</style>\n      <div className=\"absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/40 dark:via-white/10 to-transparent animate-shimmer-slide z-10\" />\n    </>\n  );\n}\n\nexport function SkeletonBlock({\n  variant = \"rect\",\n  animation = \"shimmer\",\n  width,\n  height,\n  radius,\n  className,\n  style,\n  ...props\n}: SkeletonBlockProps) {\n  // Base shapes for the atomic components — uses opacity-tinted primary theme color\n  // so the docs theme color picker dynamically themes the skeleton placeholders live.\n  const baseClasses = cn(\n    \"relative overflow-hidden bg-primary/10 border border-primary/20\",\n    animation === \"pulse\" && \"animate-pulse\",\n  );\n\n\n  // Combine standard style prop with explicit width/height/radius custom props\n  const customStyles: React.CSSProperties = {\n    ...style,\n    ...(width !== undefined && { width }),\n    ...(height !== undefined && { height }),\n    ...(radius !== undefined && { borderRadius: radius }),\n  };\n\n  // --- COMPOSITE VARIANTS ---\n\n  if (variant === \"profile\") {\n    return (\n      <div\n        className={cn(\n          \"flex items-center justify-center gap-4 w-full mx-auto\",\n          width === undefined && \"max-w-xs\",\n          className,\n        )}\n        style={customStyles}\n        {...props}\n      >\n        <div className={cn(baseClasses, \"w-12 h-12 rounded-full shrink-0\")}>\n          <ShimmerLayer animation={animation} />\n        </div>\n        <div className=\"flex flex-col gap-2 w-full max-w-[200px]\">\n          <div className={cn(baseClasses, \"h-4 w-full rounded-md\")}>\n            <ShimmerLayer animation={animation} />\n          </div>\n          <div className={cn(baseClasses, \"h-3 w-2/3 rounded-md\")}>\n            <ShimmerLayer animation={animation} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (variant === \"text\") {\n    return (\n      <div\n        className={cn(\n          \"flex flex-col gap-2.5 w-full mx-auto items-center\",\n          width === undefined && \"max-w-sm\",\n          className,\n        )}\n        style={customStyles}\n        {...props}\n      >\n        <div className={cn(baseClasses, \"h-4 w-full rounded-md\")}>\n          <ShimmerLayer animation={animation} />\n        </div>\n        <div className={cn(baseClasses, \"h-4 w-3/4 rounded-md\")}>\n          <ShimmerLayer animation={animation} />\n        </div>\n      </div>\n    );\n  }\n\n  if (variant === \"card\") {\n    return (\n      <div\n        className={cn(\n          \"flex flex-col gap-3 w-full p-4 border border-border rounded-2xl bg-card text-card-foreground\",\n          width === undefined && \"max-w-sm\",\n          className,\n        )}\n        style={customStyles}\n        {...props}\n      >\n        <div className={cn(baseClasses, \"w-full h-40 rounded-xl mb-2\")}>\n          <ShimmerLayer animation={animation} />\n        </div>\n        <div className={cn(baseClasses, \"h-5 w-3/4 rounded-md\")}>\n          <ShimmerLayer animation={animation} />\n        </div>\n        <div className={cn(baseClasses, \"h-4 w-full rounded-md\")}>\n          <ShimmerLayer animation={animation} />\n        </div>\n        <div className={cn(baseClasses, \"h-4 w-5/6 rounded-md\")}>\n          <ShimmerLayer animation={animation} />\n        </div>\n      </div>\n    );\n  }\n\n  // --- ATOMIC & CUSTOM VARIANTS (rect, circle, custom) ---\n\n  const atomicClasses = cn(\n    baseClasses,\n    variant === \"circle\" && !radius && \"rounded-full\",\n    variant === \"circle\" && width === undefined && \"w-12\",\n    variant === \"circle\" && height === undefined && \"h-12\",\n    variant === \"rect\" && width === undefined && \"w-full\",\n    variant === \"rect\" && height === undefined && \"min-h-[100px]\",\n    variant === \"rect\" && !radius && \"rounded-xl\",\n    className,\n  );\n\n  return (\n    <div className={atomicClasses} style={customStyles} {...props}>\n      <ShimmerLayer animation={animation} />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/custom/blocks/SkeletonBlock.tsx"
    }
  ],
  "docs": "Shimmer keyframes ship inline in a scoped <style> block — no global CSS or Tailwind config changes required.",
  "categories": [
    "feedback"
  ],
  "type": "registry:component"
}