{
  "name": "card-resize",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/card-resize.tsx",
      "content": "// GENERATED FILE - do not edit.\n// Source: scripts/transitions-src/card-resize.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// Card resize transition — ported from transitions.dev\n// https://github.com/Jakubantalik/transitions.dev (MIT)\n// Tweens width + height with cubic-bezier easing.\n\nconst CARD_RESIZE_CSS = `\n.t-resize-scope {\n  --resize-dur: 300ms;\n  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);\n}\n.t-resize {\n  transition:\n    width  var(--resize-dur) var(--resize-ease),\n    height var(--resize-dur) var(--resize-ease);\n  will-change: width, height;\n}\n@media (prefers-reduced-motion: reduce) {\n  .t-resize { 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-card-resize]')) return\n    const el = document.createElement(\"style\")\n    el.setAttribute(\"data-t-card-resize\", \"\")\n    el.textContent = CARD_RESIZE_CSS\n    document.head.appendChild(el)\n  }, [])\n}\n\nexport function CardResize({\n  large = { width: 260, height: 180 },\n  small = { width: 160, height: 100 },\n  className,\n}: {\n  large?: { width: number; height: number }\n  small?: { width: number; height: number }\n  className?: string\n}) {\n  useStyles()\n  const [isSmall, setSmall] = React.useState(false)\n  const dims = isSmall ? small : large\n  return (\n    <div className={cn(\"t-resize-scope flex flex-col items-center gap-3\", className)}>\n      <button\n        type=\"button\"\n        onClick={() => setSmall((v) => !v)}\n        className=\"rounded-md border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted\"\n      >\n        {isSmall ? \"Expand\" : \"Shrink\"}\n      </button>\n      <div\n        className=\"t-resize overflow-hidden rounded-lg border border-border bg-card p-4 text-card-foreground shadow-sm\"\n        style={{ width: dims.width, height: dims.height }}\n      >\n        <div className=\"flex h-full flex-col gap-2\">\n          <div className=\"h-2 w-1/2 rounded bg-muted\" />\n          <div className=\"h-2 w-2/3 rounded bg-muted\" />\n          <div className=\"h-2 w-1/3 rounded bg-muted\" />\n          <div className=\"mt-auto h-2 w-3/4 rounded bg-muted\" />\n          <div className=\"h-2 w-1/2 rounded bg-muted\" />\n        </div>\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"
    }
  }
}