{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "folder-interaction",
  "title": "Folder Interaction",
  "description": "A folder management system with drag-and-drop-like feel.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/folder-interaction.tsx",
      "content": "\"use client\";\r\nimport { motion } from \"motion/react\";\r\nimport { useState } from \"react\";\r\n\r\nfunction FolderInteraction() {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  const pageVariants = {\r\n    spring: { type: \"spring\" as const, duration: 0.6 },\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full  flex justify-center items-center\">\r\n      <div\r\n        onClick={() => setIsOpen(!isOpen)}\r\n        className=\"w-80 h-52 relative wrapper\"\r\n      >\r\n        <div\r\n          className=\"folder relative w-[87.5%] mx-auto items-center h-full flex justify-center \"\r\n          style={{\r\n            background: \"#18151B\",\r\n            boxShadow:\r\n              \"0px 0px 15.699999809265137px 16px rgba(79, 73, 85, 0.30) inset\",\r\n            borderRadius: 10,\r\n          }}\r\n        >\r\n          {[\r\n            {\r\n              initial: { rotate: -3, x: -38, y: 2 },\r\n              open: { rotate: -8, x: -70, y: -55 },\r\n              transition: {\r\n                ...pageVariants.spring,\r\n                bounce: 0.15,\r\n                stiffness: 160,\r\n                damping: 22,\r\n              },\r\n              className: \"z-10 shadow-md\",\r\n            },\r\n            {\r\n              initial: { rotate: 0, x: 0, y: 0 },\r\n              open: { rotate: 1, x: 2, y: -75 },\r\n              transition: {\r\n                ...pageVariants.spring,\r\n                duration: 0.55,\r\n                bounce: 0.12,\r\n                stiffness: 190,\r\n                damping: 24,\r\n              },\r\n              className: \"z-20 shadow-lg\",\r\n            },\r\n            {\r\n              initial: { rotate: 3.5, x: 42, y: 1 },\r\n              open: { rotate: 9, x: 75, y: -60 },\r\n              transition: {\r\n                ...pageVariants.spring,\r\n                duration: 0.58,\r\n                bounce: 0.17,\r\n                stiffness: 170,\r\n                damping: 21,\r\n              },\r\n              className: \"z-10 shadow-md\",\r\n            },\r\n          ].map((page, i) => (\r\n            <motion.div\r\n              key={i}\r\n              initial={page.initial}\r\n              animate={isOpen ? page.open : page.initial}\r\n              transition={page.transition}\r\n              className={`absolute top-2 w-32 h-fit rounded-xl ${page.className}`}\r\n            >\r\n              <Page />\r\n            </motion.div>\r\n          ))}\r\n        </div>\r\n\r\n        <motion.div\r\n          animate={{ rotateX: isOpen ? -40 : 0 }}\r\n          transition={{ type: \"spring\", duration: 0.5, bounce: 0.2 }}\r\n          className=\"absolute -left-[1px] -right-[1px] -bottom-[1px] z-20 h-44 rounded-3xl origin-bottom flex justify-center items-center overflow-visible\"\r\n        >\r\n          <svg\r\n            className=\"w-full h-full overflow-visible\"\r\n            viewBox=\"0 0 235 121\"\r\n            fill=\"none\"\r\n            preserveAspectRatio=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <foreignObject x=\"-13\" y=\"-13\" width=\"262.4\" height=\"148.4\">\r\n              <div\r\n                style={{\r\n                  backdropFilter: \"blur(6.5px)\",\r\n                  clipPath: \"url(#bgblur_0_1_106_clip_path)\",\r\n                  height: \"100%\",\r\n                  width: \"100%\",\r\n                }}\r\n              ></div>\r\n            </foreignObject>\r\n            <path\r\n              id=\"Vector\"\r\n              data-figma-bg-blur-radius=\"13\"\r\n              d=\"M104.615 0.350494L33.1297 0.838776C32.7542 0.841362 32.3825 0.881463 32.032 0.918854C31.6754 0.956907 31.3392 0.992086 31.0057 0.992096H31.0047C30.6871 0.99235 30.3673 0.962051 30.0272 0.929596C29.6927 0.897686 29.3384 0.863802 28.9803 0.866119L13.2693 0.967682H13.2527L13.2352 0.969635C13.1239 0.981406 13.0121 0.986674 12.9002 0.986237H9.91388C8.33299 0.958599 6.76052 1.22345 5.27423 1.76651H5.27325C4.33579 2.11246 3.48761 2.66213 2.7879 3.37393L2.49689 3.68839L2.492 3.69424C1.62667 4.73882 1.00023 5.96217 0.656067 7.27725C0.653324 7.28773 0.654065 7.29886 0.652161 7.30948C0.3098 8.62705 0.257231 10.0048 0.499817 11.3446L12.2147 114.399L12.2156 114.411L12.2176 114.423C12.6046 116.568 13.7287 118.508 15.3934 119.902C17.058 121.297 19.1572 122.056 21.3231 122.049V122.05H215.379C217.76 122.02 220.064 121.192 221.926 119.698V119.697C223.657 118.384 224.857 116.485 225.305 114.35L225.307 114.339L235.914 53.3798L235.968 53.1093L235.97 53.0985L235.971 53.0888C236.134 51.8978 236.044 50.685 235.705 49.5321C235.307 48.1669 234.63 46.9005 233.717 45.8144L233.383 45.4296C232.58 44.5553 231.614 43.8449 230.539 43.3398C229.311 42.7628 227.971 42.4685 226.616 42.4774H146.746C144.063 42.4705 141.423 41.8004 139.056 40.5263C136.691 39.2522 134.671 37.4127 133.175 35.1689L113.548 5.05948L113.544 5.05362L113.539 5.04776C112.545 3.65165 111.238 2.51062 109.722 1.72061C108.266 0.886502 106.627 0.422235 104.952 0.365143V0.364166L104.633 0.350494H104.615Z\"\r\n              fill=\"url(#paint0_linear_1_106)\"\r\n              fillOpacity=\"0.3\"\r\n              stroke=\"url(#paint1_linear_1_106)\"\r\n              strokeWidth=\"0.7\"\r\n            />\r\n            <defs>\r\n              <clipPath\r\n                id=\"bgblur_0_1_106_clip_path\"\r\n                transform=\"translate(13 13)\"\r\n              >\r\n                <path d=\"M104.615 0.350494L33.1297 0.838776C32.7542 0.841362 32.3825 0.881463 32.032 0.918854C31.6754 0.956907 31.3392 0.992086 31.0057 0.992096H31.0047C30.6871 0.99235 30.3673 0.962051 30.0272 0.929596C29.6927 0.897686 29.3384 0.863802 28.9803 0.866119L13.2693 0.967682H13.2527L13.2352 0.969635C13.1239 0.981406 13.0121 0.986674 12.9002 0.986237H9.91388C8.33299 0.958599 6.76052 1.22345 5.27423 1.76651H5.27325C4.33579 2.11246 3.48761 2.66213 2.7879 3.37393L2.49689 3.68839L2.492 3.69424C1.62667 4.73882 1.00023 5.96217 0.656067 7.27725C0.653324 7.28773 0.654065 7.29886 0.652161 7.30948C0.3098 8.62705 0.257231 10.0048 0.499817 11.3446L12.2147 114.399L12.2156 114.411L12.2176 114.423C12.6046 116.568 13.7287 118.508 15.3934 119.902C17.058 121.297 19.1572 122.056 21.3231 122.049V122.05H215.379C217.76 122.02 220.064 121.192 221.926 119.698V119.697C223.657 118.384 224.857 116.485 225.305 114.35L225.307 114.339L235.914 53.3798L235.968 53.1093L235.97 53.0985L235.971 53.0888C236.134 51.8978 236.044 50.685 235.705 49.5321C235.307 48.1669 234.63 46.9005 233.717 45.8144L233.383 45.4296C232.58 44.5553 231.614 43.8449 230.539 43.3398C229.311 42.7628 227.971 42.4685 226.616 42.4774H146.746C144.063 42.4705 141.423 41.8004 139.056 40.5263C136.691 39.2522 134.671 37.4127 133.175 35.1689L113.548 5.05948L113.544 5.05362L113.539 5.04776C112.545 3.65165 111.238 2.51062 109.722 1.72061C108.266 0.886502 106.627 0.422235 104.952 0.365143V0.364166L104.633 0.350494H104.615Z\" />\r\n              </clipPath>\r\n              <linearGradient\r\n                id=\"paint0_linear_1_106\"\r\n                x1=\"114.7\"\r\n                y1=\"0.700104\"\r\n                x2=\"114.7\"\r\n                y2=\"121.7\"\r\n                gradientUnits=\"userSpaceOnUse\"\r\n              >\r\n                <stop stopColor=\"#2D2535\" />\r\n                <stop offset=\"1\" stopColor=\"#2A2A2A\" />\r\n              </linearGradient>\r\n              <linearGradient\r\n                id=\"paint1_linear_1_106\"\r\n                x1=\"114.7\"\r\n                y1=\"0.700104\"\r\n                x2=\"114.7\"\r\n                y2=\"121.7\"\r\n                gradientUnits=\"userSpaceOnUse\"\r\n              >\r\n                <stop stopColor=\"#424242\" stopOpacity=\"0.04\" />\r\n                <stop offset=\"1\" stopColor=\"#212121\" stopOpacity=\"0.3\" />\r\n              </linearGradient>\r\n            </defs>\r\n          </svg>\r\n        </motion.div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default FolderInteraction;\r\n\r\nconst Page = () => (\r\n  <div className=\"w-full h-full bg-gradient-to-b from-[#E8E7F0] to-[#DCDAE8] rounded-xl shadow-lg p-3 sm:p-4\">\r\n    <div className=\"flex flex-col gap-1.5 sm:gap-2\">\r\n      <div className=\"w-full h-1 sm:h-1.5 bg-[#CFCDE0] rounded-full\" />\r\n      {Array.from({ length: 8 }).map((_, i) => (\r\n        <div key={i} className=\"flex gap-1.5 sm:gap-2\">\r\n          <div className=\"flex-1 h-1 sm:h-1.5 bg-[#CFCDE0] rounded-full\" />\r\n          <div className=\"flex-1 h-1 sm:h-1.5 bg-[#CFCDE0] rounded-full\" />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  </div>\r\n);\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}