{
  "name": "page-slide",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/page-slide.tsx",
      "content": "// GENERATED FILE - do not edit.\n// Source: scripts/transitions-src/page-slide.tsx\n// Re-generate: node scripts/generate-transitions.mjs\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Page side-by-side transition — ported from transitions.dev\n// https://github.com/Jakubantalik/transitions.dev (MIT)\n// Page 1 exits left, page 2 exits right; slide + fade + blur.\n\nconst PAGE_SLIDE_CSS = `\n.t-page-slide-scope {\n  --page-slide-dur: 200ms;\n  --page-fade-dur: 200ms;\n  --page-slide-distance: 8px;\n  --page-blur: 3px;\n  --page-stagger: 0ms;\n  --page-exit-enabled: 1;\n  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);\n}\n.t-page-slide {\n  position: relative;\n}\n.t-page-slide .t-page[data-page-id=\"1\"] {\n  --t-page-from-x: calc(var(--page-slide-distance) * -1);\n}\n.t-page-slide .t-page[data-page-id=\"2\"] {\n  --t-page-from-x: var(--page-slide-distance);\n}\n.t-page-slide .t-page {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  pointer-events: none;\n  /* hidden stops Tab from reaching the off-screen page's controls */\n  visibility: hidden;\n  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));\n  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));\n  transition:\n    opacity   var(--page-fade-dur)  var(--page-fade-ease),\n    transform var(--page-slide-dur) var(--page-slide-ease),\n    filter    var(--page-slide-dur) var(--page-slide-ease),\n    visibility 0s linear var(--page-slide-dur);\n  will-change: opacity, transform, filter;\n}\n.t-page-slide[data-page=\"1\"] .t-page[data-page-id=\"1\"],\n.t-page-slide[data-page=\"2\"] .t-page[data-page-id=\"2\"] {\n  opacity: 1;\n  pointer-events: auto;\n  visibility: visible;\n  transition-delay: 0s;\n  transform: translateX(0);\n  filter: blur(0);\n  transition-delay: var(--page-stagger);\n}\n@media (prefers-reduced-motion: reduce) {\n  .t-page-slide .t-page { transition: none !important; }\n}\n`\n\n// useInsertionEffect runs before the browser paints, so the resting state\n// these rules define lands on the first frame instead of after it. The DOM\n// query replaces a module-level flag, which stayed true if the tag was ever\n// removed and never fired for a second document.\nfunction useStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === \"undefined\") return\n    if (document.querySelector('style[data-t-page-slide]')) return\n    const el = document.createElement(\"style\")\n    el.setAttribute(\"data-t-page-slide\", \"\")\n    el.textContent = PAGE_SLIDE_CSS\n    document.head.appendChild(el)\n  }, [])\n}\n\nexport function PageSlide({ className }: { className?: string }) {\n  useStyles()\n  const [page, setPage] = React.useState<1 | 2>(1)\n  return (\n    <div className={cn(\"t-page-slide-scope flex flex-col items-stretch gap-3\", className)}>\n      <div\n        className=\"t-page-slide relative h-40 w-full overflow-hidden rounded-lg border border-border bg-card text-card-foreground\"\n        data-page={page}\n      >\n        <section className=\"t-page p-4\" data-page-id=\"1\">\n          <h2 className=\"mb-3 text-sm font-semibold text-foreground\">Page 1</h2>\n          <div className=\"mb-3 space-y-2\">\n            <div className=\"h-2 w-full rounded bg-muted\" />\n            <div className=\"h-2 w-5/6 rounded bg-muted\" />\n            <div className=\"h-2 w-2/3 rounded bg-muted\" />\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => setPage(2)}\n            className=\"rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted\"\n          >\n            Next\n          </button>\n        </section>\n        <section className=\"t-page p-4\" data-page-id=\"2\">\n          <h2 className=\"mb-3 text-sm font-semibold text-foreground\">Page 2</h2>\n          <div className=\"mb-3 grid grid-cols-3 gap-2\">\n            <div className=\"h-12 rounded-md bg-muted\" />\n            <div className=\"h-12 rounded-md bg-muted\" />\n            <div className=\"h-12 rounded-md bg-muted\" />\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => setPage(1)}\n            className=\"rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted\"\n          >\n            Back\n          </button>\n        </section>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "registryDependencies": [
    "utils"
  ],
  "meta": {
    "shared": true,
    "source": {
      "name": "transitions.dev",
      "url": "https://github.com/Jakubantalik/transitions.dev",
      "license": "MIT",
      "author": "Jakub Antalík"
    }
  }
}