{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "title": "Skeleton",
  "description": "Loading placeholder with a sweeping highlight.",
  "registryDependencies": [
    "@pestoui/style",
    "@pestoui/utils"
  ],
  "files": [
    {
      "path": "pestoui/ui/skeleton.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\n/* A sweep rather than a fade. A block that dims and brightens in place reads as\n   \"disabled\"; a highlight travelling left to right reads as \"still loading\",\n   and it does it without the whole page breathing in unison.\n\n   The tint is the same flat foreground wash as before — the sweep is a second\n   layer on top of it, a gradient twice the width of the box that the shimmer\n   keyframe slides across. Both stops come off `--foreground`, so it inverts with\n   the theme for free and stays one quiet value in either mode.\n\n   This is the placeholder only — it knows nothing about the content it stands\n   in for, and nothing about when that content arrives. Handing over is the\n   `reveal-stack` / `reveal-skeleton` / `reveal-content` trio in\n   `styles/motion.css`, wrapped for the common case by `<Reveal>` in `./reveal`.\n   That lives in its own module on purpose: importing `Skeleton` must not drag\n   the reveal machinery in behind it. */\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\n        \"animate-shimmer rounded-lg bg-foreground/[0.06] bg-linear-to-r from-transparent via-foreground/[0.07] to-transparent bg-size-[200%_100%]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}