{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "folder-preview",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/ui/folder-preview.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { motion, AnimatePresence, useAnimation, Variants } from \"framer-motion\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// ============================================\r\n// SVG Icon Components\r\n// ============================================\r\n\r\nconst FolderBackIcon = ({ className }: { className?: string }) => (\r\n    <svg viewBox=\"0 0 20 16\" className={cn(\"w-full h-full fill-current\", className)}>\r\n        <path d=\"M7.5,0C7.4,0,2,0,2,0C0.9,0,0,0.9,0,2l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4c0-1.1-0.9-2-2-2c0,0-7.5,0-8,0C9,2,9.9,0,7.5,0z\" />\r\n    </svg>\r\n);\r\n\r\nconst FolderCoverIcon = ({ className }: { className?: string }) => (\r\n    <svg viewBox=\"0 0 20 16\" className={cn(\"w-full h-full fill-current\", className)}>\r\n        <path d=\"M2,2h16c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V4C0,2.9,0.9,2,2,2z\" />\r\n    </svg>\r\n);\r\n\r\nconst UsersIcon = ({ className }: { className?: string }) => (\r\n    <svg viewBox=\"0 0 24 24\" className={cn(\"w-full h-full fill-current\", className)}>\r\n        <path\r\n            opacity=\"0.3\"\r\n            d=\"M22.2,17.7l-4-2c-0.5-0.3-0.8-0.8-0.8-1.3v-1.6c0.1-0.1,0.2-0.3,0.4-0.5c0.5-0.8,0.9-1.6,1.2-2.5c0.5-0.2,0.9-0.6,0.9-1.2V7c0-0.4-0.2-0.7-0.4-0.9V3.7c0,0,0.5-3.7-4.6-3.7c-5,0-4.6,3.7-4.6,3.7v2.4C10.1,6.3,9.9,6.7,9.9,7v1.7c0,0.4,0.2,0.8,0.6,1c0.4,1.8,1.5,3.1,1.5,3.1v1.5c0,0.6-0.3,1.1-0.8,1.3l-3.7,2c-1.1,0.6-1.7,1.7-1.7,2.9v1.3H24v-1.3C24,19.4,23.3,18.3,22.2,17.7z\"\r\n        />\r\n        <path\r\n            opacity=\"0.5\"\r\n            d=\"M7.5,17.7l2.5-1.3c0,0,0,0,0,0l1.2-0.7c0.5-0.3,0.8-0.8,0.8-1.3v-1.5c0,0-0.4-0.5-0.9-1.4l0,0c0,0,0,0,0,0c-0.1-0.1-0.1-0.2-0.2-0.3c0,0,0,0,0-0.1c-0.1-0.1-0.1-0.3-0.2-0.4c0,0,0,0,0,0c0-0.1-0.1-0.2-0.1-0.4c0,0,0-0.1,0-0.1c0-0.1-0.1-0.3-0.1-0.4c-0.3-0.2-0.6-0.6-0.6-1V7c0-0.4,0.2-0.7,0.4-0.9V3.8C9.8,3.3,8.9,2.9,7.4,2.9c-4,0-4.1,3.3-4.1,3.3v2.1C3.1,8.5,2.9,8.8,2.9,9.1v1.4c0,0.4,0.2,0.7,0.5,0.9c0.4,1.6,1.6,2.7,1.6,2.7v1.3c0,0.5-0.3,0.9-0.7,1.1l-2.8,1.7C0.6,18.8,0,19.7,0,20.8v1.2h5.8v-1.3C5.8,19.4,6.5,18.3,7.5,17.7z\"\r\n        />\r\n    </svg>\r\n);\r\n\r\nconst GlobeIcon = ({ className }: { className?: string }) => (\r\n    <svg viewBox=\"0 0 24 24\" className={cn(\"w-full h-full fill-current\", className)}>\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\" opacity=\"0.3\" />\r\n        <path d=\"M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z\" />\r\n    </svg>\r\n);\r\n\r\nconst PadlockIcon = ({ className }: { className?: string }) => (\r\n    <svg viewBox=\"0 0 24 33.6\" className={cn(\"w-full h-full fill-current\", className)}>\r\n        <path d=\"M23,13.5h-1.7V9.4C21.4,4.2,17.2,0,12,0C6.8,0,2.6,4.2,2.6,9.4v4.1H1c-0.5,0-1,0.4-1,1v18.2c0,0.5,0.4,1,1,1H23c0.5,0,1-0.4,1-1V14.4C24,13.9,23.6,13.5,23,13.5z M13.5,24.5v3.9c0,0.3-0.3,0.6-0.6,0.6h-1.8c-0.3,0-0.6-0.3-0.6-0.6v-3.9c-0.7-0.5-1.1-1.3-1.1-2.1c0-1.4,1.2-2.6,2.6-2.6c1.4,0,2.6,1.2,2.6,2.6C14.6,23.3,14.2,24.1,13.5,24.5z M16.9,13.5H7.1V9.4c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9V13.5z\" />\r\n    </svg>\r\n);\r\n\r\nconst CloudIcon = ({ className }: { className?: string }) => (\r\n    <svg viewBox=\"0 0 24 22.2\" className={cn(\"w-full h-full fill-current\", className)}>\r\n        <path d=\"M19.5,5.8c-0.3-1.5-1-2.9-2.2-4c-1.3-1.2-3-1.8-4.7-1.8C11.3,0,10,0.4,8.9,1.1C8,1.7,7.2,2.5,6.6,3.5c-0.2,0-0.5-0.1-0.7-0.1c-2.1,0-3.8,1.7-3.8,3.8c0,0.3,0,0.5,0.1,0.8C0.8,9,0,10.6,0,12.3C0,13.6,0.5,15,1.4,16c1,1.1,2.2,1.7,3.6,1.8c0,0,0,0,0,0h4.2c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7H5c-2-0.1-3.7-2-3.7-4.2c0-1.4,0.8-2.7,2-3.4c0.3-0.2,0.4-0.5,0.3-0.8C3.5,7.8,3.4,7.5,3.4,7.2c0-1.4,1.1-2.5,2.5-2.5c0.3,0,0.6,0,0.8,0.1c0.3,0.1,0.7,0,0.8-0.3c0.9-2,2.9-3.2,5.1-3.2c2.9,0,5.3,2.2,5.6,5.1c0,0.3,0.3,0.5,0.6,0.6c2.2,0.4,3.9,2.4,3.9,4.7c0,2.5-1.9,4.6-4.3,4.8h-3.6c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7h3.7c0,0,0,0,0,0c1.5-0.1,2.9-0.8,4-2c1-1.1,1.6-2.6,1.6-4.1C24,8.9,22.1,6.5,19.5,5.8z M16,12.9c0.3-0.3,0.3-0.7,0-0.9l-3.5-3.5c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0.1-0.5,0.2L8,12c-0.3,0.3-0.3,0.7,0,0.9c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.3-0.1,0.5-0.2l2.4-2.4v11c0,0.4,0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7v-11l2.4,2.4C15.3,13.2,15.7,13.2,16,12.9z\" />\r\n    </svg>\r\n);\r\n\r\nconst FileIcon = ({ className }: { className?: string }) => (\r\n    <svg viewBox=\"0 0 20 26.8\" className={cn(\"w-full h-full fill-current\", className)}>\r\n        <path d=\"M2.3,0C1,0,0,1,0,2.3v22.2c0,1.2,1,2.3,2.3,2.3h15.4c1.2,0,2.3-1,2.3-2.3V6l-6-6H2.3z\" />\r\n        <path opacity=\"0.1\" d=\"M13.9,3.7V0l6,6h-3.7C14.9,6,13.9,5,13.9,3.7z\" />\r\n    </svg>\r\n);\r\n\r\n// ============================================\r\n// Types & Interfaces\r\n// ============================================\r\n\r\nexport type FolderVariant =\r\n    | \"devi\"\r\n    | \"rudras\"\r\n    | \"ardra\"\r\n    | \"shakti\"\r\n    | \"kubera\"\r\n    | \"hari\"\r\n    | \"ravi\"\r\n    | \"durga\"\r\n    | \"nandi\";\r\n\r\nexport interface FolderPreviewProps {\r\n    variant?: FolderVariant;\r\n    images?: string[];\r\n    files?: { name: string; type?: \"txt\" | \"gif\" | \"mp3\" | \"default\" }[];\r\n    label?: string;\r\n    size?: \"sm\" | \"md\" | \"lg\";\r\n    className?: string;\r\n    onClick?: () => void;\r\n}\r\n\r\n// ============================================\r\n// Color Schemes for Each Variant\r\n// ============================================\r\n\r\nconst variantColors: Record<\r\n    FolderVariant,\r\n    {\r\n        back: string;\r\n        cover: string;\r\n        deco: string;\r\n        caption: string;\r\n        bg: string;\r\n    }\r\n> = {\r\n    devi: {\r\n        back: \"text-gray-500\",\r\n        cover: \"text-gray-400\",\r\n        deco: \"text-gray-400 brightness-125\",\r\n        caption: \"text-gray-800 dark:text-gray-200\",\r\n        bg: \"bg-gray-100 dark:bg-gray-900\",\r\n    },\r\n    rudras: {\r\n        back: \"text-gray-700 dark:text-gray-600\",\r\n        cover: \"text-gray-600 dark:text-gray-500\",\r\n        deco: \"text-gray-400\",\r\n        caption: \"text-blue-600 dark:text-blue-400\",\r\n        bg: \"bg-slate-200 dark:bg-slate-800\",\r\n    },\r\n    ardra: {\r\n        back: \"text-blue-800 dark:text-blue-700\",\r\n        cover: \"text-blue-600 dark:text-blue-500\",\r\n        deco: \"text-blue-700 dark:text-blue-600\",\r\n        caption: \"text-blue-500 dark:text-blue-400\",\r\n        bg: \"bg-gray-800 dark:bg-gray-950\",\r\n    },\r\n    shakti: {\r\n        back: \"text-indigo-800\",\r\n        cover: \"text-indigo-700\",\r\n        deco: \"text-indigo-800\",\r\n        caption: \"text-green-400\",\r\n        bg: \"bg-blue-600 dark:bg-blue-800\",\r\n    },\r\n    kubera: {\r\n        back: \"text-gray-900\",\r\n        cover: \"text-gray-700\",\r\n        deco: \"text-gray-600\",\r\n        caption: \"text-gray-900 dark:text-gray-100\",\r\n        bg: \"bg-emerald-400 dark:bg-emerald-600\",\r\n    },\r\n    hari: {\r\n        back: \"text-blue-800\",\r\n        cover: \"text-blue-700\",\r\n        deco: \"text-blue-800\",\r\n        caption: \"text-yellow-400\",\r\n        bg: \"bg-sky-500 dark:bg-sky-700\",\r\n    },\r\n    ravi: {\r\n        back: \"text-gray-900\",\r\n        cover: \"text-gray-700\",\r\n        deco: \"text-black dark:text-white\",\r\n        caption: \"text-gray-900 dark:text-gray-100\",\r\n        bg: \"bg-gray-200 dark:bg-gray-800\",\r\n    },\r\n    durga: {\r\n        back: \"text-green-600\",\r\n        cover: \"text-green-500\",\r\n        deco: \"text-green-600\",\r\n        caption: \"text-green-400 font-mono\",\r\n        bg: \"bg-gray-900 dark:bg-black\",\r\n    },\r\n    nandi: {\r\n        back: \"text-amber-500\",\r\n        cover: \"text-amber-400\",\r\n        deco: \"text-amber-500\",\r\n        caption: \"text-gray-900 dark:text-gray-100\",\r\n        bg: \"bg-green-100 dark:bg-green-950\",\r\n    },\r\n};\r\n\r\n// ============================================\r\n// Size Configuration\r\n// ============================================\r\n\r\nconst sizeConfig = {\r\n    sm: {\r\n        folder: \"w-16\",\r\n        thumb: \"w-10 h-10\",\r\n        deco: \"w-4 h-4\",\r\n        caption: \"text-xs\",\r\n    },\r\n    md: {\r\n        folder: \"w-24\",\r\n        thumb: \"w-14 h-14\",\r\n        deco: \"w-6 h-6\",\r\n        caption: \"text-sm\",\r\n    },\r\n    lg: {\r\n        folder: \"w-32\",\r\n        thumb: \"w-20 h-20\",\r\n        deco: \"w-8 h-8\",\r\n        caption: \"text-base\",\r\n    },\r\n};\r\n\r\n// ============================================\r\n// Animation Variants\r\n// ============================================\r\n\r\nconst createCircularPositions = (count: number, radius: number = 120) => {\r\n    return Array.from({ length: count }, (_, i) => {\r\n        const startAngle = Math.PI / count;\r\n        const angle = startAngle / 2 + startAngle * i;\r\n        return {\r\n            x: Math.round(radius * Math.cos(angle)),\r\n            y: Math.round(-radius * Math.sin(angle)),\r\n        };\r\n    });\r\n};\r\n\r\n// ============================================\r\n// Individual Folder Components for each Variant\r\n// ============================================\r\n\r\nconst DeviFolder: React.FC<{\r\n    images: string[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.devi;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ images, isHovered, colors, sizes, label }) => {\r\n    const positions = createCircularPositions(images.length, 80);\r\n\r\n    return (\r\n        <div className=\"relative\">\r\n            {/* Previews - positioned from folder center */}\r\n            <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none z-10\">\r\n                {images.map((img, i) => (\r\n                    <motion.img\r\n                        key={i}\r\n                        src={img}\r\n                        alt=\"\"\r\n                        className=\"absolute w-12 h-12 object-cover rounded-full border-2 border-white shadow-md\"\r\n                        initial={{ opacity: 0, scale: 0.7, x: 0, y: 0 }}\r\n                        animate={\r\n                            isHovered\r\n                                ? {\r\n                                    opacity: 1,\r\n                                    scale: 1,\r\n                                    x: positions[i]?.x || 0,\r\n                                    y: positions[i]?.y || 0,\r\n                                }\r\n                                : { opacity: 0, scale: 0.7, x: 0, y: 0 }\r\n                        }\r\n                        transition={{\r\n                            duration: 0.6,\r\n                            delay: (images.length - i - 1) * 0.04,\r\n                            ease: [0.2, 1, 0.3, 1],\r\n                        }}\r\n                    />\r\n                ))}\r\n            </div>\r\n\r\n            {/* Folder */}\r\n            <div className=\"relative cursor-pointer aspect-[20/16]\" style={{ perspective: \"800px\" }}>\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0 transition-colors duration-150\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Cover */}\r\n                <motion.div\r\n                    className={cn(\r\n                        \"relative transition-colors duration-150\",\r\n                        isHovered ? \"text-gray-600\" : colors.cover\r\n                    )}\r\n                >\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <UsersIcon />\r\n                    </div>\r\n                </motion.div>\r\n            </div>\r\n\r\n            {label && (\r\n                <h3 className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}>\r\n                    {label}\r\n                </h3>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\n\r\nconst RudrasFolder: React.FC<{\r\n    images: string[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.rudras;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ images, isHovered, colors, sizes, label }) => {\r\n    const positions = createCircularPositions(images.length, 80);\r\n\r\n    return (\r\n        <div className=\"relative\">\r\n            {/* Previews - positioned from folder center */}\r\n            <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none z-10\">\r\n                {images.map((img, i) => (\r\n                    <motion.img\r\n                        key={i}\r\n                        src={img}\r\n                        alt=\"\"\r\n                        className=\"absolute w-12 h-12 object-cover rounded-full border-2 border-white shadow-md\"\r\n                        initial={{ opacity: 0, scale: 0, x: 0, y: 0 }}\r\n                        animate={\r\n                            isHovered\r\n                                ? {\r\n                                    opacity: 1,\r\n                                    scale: 1,\r\n                                    x: -positions[i]?.x || 0,\r\n                                    y: positions[i]?.y || 0,\r\n                                }\r\n                                : { opacity: 0, scale: 0, x: 0, y: 0 }\r\n                        }\r\n                        transition={{\r\n                            duration: 0.8,\r\n                            delay: (images.length - i - 1) * 0.08,\r\n                            type: \"spring\",\r\n                            stiffness: 200,\r\n                            damping: 15,\r\n                        }}\r\n                    />\r\n                ))}\r\n            </div>\r\n\r\n            {/* Folder */}\r\n            <div className=\"relative cursor-pointer aspect-[20/16]\" style={{ perspective: \"800px\" }}>\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Paper Sheet Deco */}\r\n                <div className=\"absolute bottom-0.5 left-0.5 right-0.5 h-3/4 bg-white dark:bg-gray-200 rounded-lg\" />\r\n\r\n                {/* Cover */}\r\n                <motion.div\r\n                    className={cn(\"relative\", colors.cover)}\r\n                    style={{ transformOrigin: \"50% 100%\", transformStyle: \"preserve-3d\" }}\r\n                    animate={isHovered ? { rotateX: -30 } : { rotateX: 0 }}\r\n                    transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}\r\n                >\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <UsersIcon />\r\n                    </div>\r\n                </motion.div>\r\n            </div>\r\n\r\n            {label && (\r\n                <h3 className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}>\r\n                    {label}\r\n                </h3>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\n\r\nconst ArdraFolder: React.FC<{\r\n    images: string[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.ardra;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ images, isHovered, colors, sizes, label }) => {\r\n    const [randomPositions] = React.useState(() =>\r\n        images.map((_, i) => {\r\n            const radius = 60 + Math.random() * 20;\r\n            const angle = (2 * (i + 1) * Math.PI) / images.length;\r\n            return {\r\n                x: Math.round(radius * Math.cos(angle)),\r\n                y: Math.round(radius * Math.sin(angle)),\r\n                rotate: Math.random() * 6 - 3,\r\n            };\r\n        })\r\n    );\r\n\r\n    return (\r\n        <div className=\"relative\">\r\n            {/* Feedback Circle */}\r\n            <motion.div\r\n                className=\"absolute inset-0 flex items-center justify-center pointer-events-none\"\r\n                initial={{ opacity: 0 }}\r\n                animate={isHovered ? { opacity: 1 } : { opacity: 0 }}\r\n            >\r\n                <motion.div\r\n                    className=\"w-10 h-10 rounded-full bg-gray-900/50\"\r\n                    initial={{ scale: 1 }}\r\n                    animate={\r\n                        isHovered ? { opacity: [1, 0], scale: [1, 6] } : { opacity: 0, scale: 1 }\r\n                    }\r\n                    transition={{ duration: 0.9, ease: [0.1, 1, 0.3, 1] }}\r\n                />\r\n            </motion.div>\r\n\r\n            {/* Previews - positioned from folder center */}\r\n            <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none z-10\">\r\n                {images.map((img, i) => (\r\n                    <motion.img\r\n                        key={i}\r\n                        src={img}\r\n                        alt=\"\"\r\n                        className=\"absolute w-10 h-10 object-cover rounded-full border-2 border-white shadow-lg\"\r\n                        initial={{ opacity: 0, scale: 0.4, x: 0, y: 0, rotate: 0 }}\r\n                        animate={\r\n                            isHovered\r\n                                ? {\r\n                                    opacity: 1,\r\n                                    scale: 1,\r\n                                    x: randomPositions[i]?.x || 0,\r\n                                    y: randomPositions[i]?.y || 0,\r\n                                    rotate: randomPositions[i]?.rotate || 0,\r\n                                }\r\n                                : { opacity: 0, scale: 0.4, x: 0, y: 0, rotate: 0 }\r\n                        }\r\n                        transition={{ duration: 0.5, ease: [0.1, 1, 0.3, 1] }}\r\n                    />\r\n                ))}\r\n            </div>\r\n\r\n            {/* Folder */}\r\n            <motion.div\r\n                className=\"relative cursor-pointer aspect-[20/16]\"\r\n                animate={isHovered ? { scale: 0.85 } : { scale: 1 }}\r\n                transition={{ duration: 0.5, ease: [0.1, 1, 0.3, 1] }}\r\n            >\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Cover */}\r\n                <div className={cn(\"relative\", colors.cover)}>\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <GlobeIcon />\r\n                    </div>\r\n                </div>\r\n            </motion.div>\r\n\r\n            {label && (\r\n                <h3 className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}>\r\n                    {label}\r\n                </h3>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nconst ShaktiFolder: React.FC<{\r\n    images: string[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.shakti;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ images, isHovered, colors, sizes, label }) => {\r\n    return (\r\n        <motion.div\r\n            className=\"relative\"\r\n            animate={isHovered ? { y: 15 } : { y: 0 }}\r\n            transition={{ duration: 0.4, ease: [0.2, 1, 0.3, 1] }}\r\n        >\r\n            <div className=\"relative cursor-pointer\">\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Previews - Fan animation */}\r\n                <div className={cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\", sizes.thumb)}>\r\n                    {images.map((img, i) => (\r\n                        <motion.img\r\n                            key={i}\r\n                            src={img}\r\n                            alt=\"\"\r\n                            className=\"absolute w-12 h-16 object-cover rounded shadow-lg origin-[-600%_50%]\"\r\n                            initial={{ opacity: 0, rotate: 0 }}\r\n                            animate={\r\n                                isHovered\r\n                                    ? { opacity: 1, rotate: -10 * (images.length - i - 1) - 15 }\r\n                                    : { opacity: 0, rotate: 0 }\r\n                            }\r\n                            transition={{\r\n                                duration: 0.5,\r\n                                delay: i * 0.08,\r\n                                ease: [0.1, 1, 0.3, 1],\r\n                            }}\r\n                        />\r\n                    ))}\r\n                </div>\r\n\r\n                {/* Cover */}\r\n                <div className={cn(\"relative\", colors.cover)}>\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mt-1\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <PadlockIcon />\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            {label && (\r\n                <h3 className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}>\r\n                    {label}\r\n                </h3>\r\n            )}\r\n        </motion.div>\r\n    );\r\n};\r\n\r\nconst KuberaFolder: React.FC<{\r\n    images: string[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.kubera;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ images, isHovered, colors, sizes, label }) => {\r\n    return (\r\n        <div className=\"relative\">\r\n            <div className=\"relative cursor-pointer\" style={{ perspective: \"800px\" }}>\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Paper Sheet Deco */}\r\n                <div className=\"absolute bottom-0.5 left-0.5 right-0.5 h-3/4 bg-white dark:bg-gray-200 rounded-lg\" />\r\n\r\n                {/* Floating Previews */}\r\n                <div className={cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\", sizes.thumb)}>\r\n                    {images.map((img, i) => (\r\n                        <motion.img\r\n                            key={i}\r\n                            src={img}\r\n                            alt=\"\"\r\n                            className=\"absolute w-full h-full object-cover rounded-lg shadow-lg\"\r\n                            initial={{ opacity: 0 }}\r\n                            animate={\r\n                                isHovered\r\n                                    ? {\r\n                                        opacity: [1, 0],\r\n                                        y: [0, -200 - Math.random() * 50],\r\n                                        x: Math.random() * 50 - 25,\r\n                                        rotate: Math.random() * 40 - 20,\r\n                                    }\r\n                                    : { opacity: 0 }\r\n                            }\r\n                            transition={{\r\n                                duration: 0.4,\r\n                                delay: i * 0.3,\r\n                                repeat: isHovered ? Infinity : 0,\r\n                                ease: \"linear\",\r\n                            }}\r\n                        />\r\n                    ))}\r\n                </div>\r\n\r\n                {/* Cover */}\r\n                <motion.div\r\n                    className={cn(\"relative\", colors.cover)}\r\n                    style={{ transformOrigin: \"50% 100%\", transformStyle: \"preserve-3d\" }}\r\n                    animate={isHovered ? { rotateX: -40 } : { rotateX: 0 }}\r\n                    transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}\r\n                >\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mt-1\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <CloudIcon />\r\n                    </div>\r\n                </motion.div>\r\n            </div>\r\n\r\n            {label && (\r\n                <h3 className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}>\r\n                    {label}\r\n                </h3>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nconst HariFolder: React.FC<{\r\n    images: string[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.hari;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ images, isHovered, colors, sizes, label }) => {\r\n    const positions = createCircularPositions(images.length, 120);\r\n\r\n    return (\r\n        <div className=\"relative\">\r\n            {/* Feedback Circle */}\r\n            <motion.div\r\n                className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-14 h-14 rounded-full bg-sky-500\"\r\n                initial={{ opacity: 0, scale: 1 }}\r\n                animate={\r\n                    isHovered ? { opacity: [1, 0], scale: [1, 15] } : { opacity: 0, scale: 1 }\r\n                }\r\n                transition={{ duration: 1.1, delay: 0.2, ease: [0.1, 1, 0.3, 1] }}\r\n            />\r\n\r\n            {/* Jumping Previews */}\r\n            <div className={cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\", sizes.thumb)}>\r\n                {images.map((img, i) => (\r\n                    <motion.img\r\n                        key={i}\r\n                        src={img}\r\n                        alt=\"\"\r\n                        className=\"absolute w-12 h-16 object-cover rounded shadow-lg\"\r\n                        initial={{ opacity: 0, scale: 0.5, x: 0, y: 0 }}\r\n                        animate={\r\n                            isHovered\r\n                                ? {\r\n                                    opacity: 1,\r\n                                    scale: 1,\r\n                                    x: -positions[i]?.x || 0,\r\n                                    y: -positions[i]?.y || 0,\r\n                                }\r\n                                : { opacity: 0, scale: 0.5, x: 0, y: 0 }\r\n                        }\r\n                        transition={{\r\n                            duration: 0.8,\r\n                            delay: 0.2,\r\n                            type: \"spring\",\r\n                            stiffness: 200,\r\n                            damping: 15,\r\n                        }}\r\n                    />\r\n                ))}\r\n            </div>\r\n\r\n            <motion.div\r\n                className=\"relative cursor-pointer\"\r\n                style={{ perspective: \"800px\", transformOrigin: \"50% 100%\" }}\r\n                animate={\r\n                    isHovered\r\n                        ? { y: -20, scaleX: 0.9, scaleY: 0.9 }\r\n                        : { y: 0, scaleX: 1, scaleY: 1 }\r\n                }\r\n                transition={{\r\n                    duration: 0.8,\r\n                    type: \"spring\",\r\n                    stiffness: 200,\r\n                    damping: 15,\r\n                }}\r\n            >\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Paper Sheet Deco */}\r\n                <div className=\"absolute bottom-0.5 left-0.5 right-0.5 h-3/4 bg-white/80 rounded-lg\" />\r\n\r\n                {/* Cover */}\r\n                <motion.div\r\n                    className={cn(\"relative\", colors.cover)}\r\n                    style={{ transformOrigin: \"50% 100%\", transformStyle: \"preserve-3d\" }}\r\n                    animate={isHovered ? { rotateX: -25 } : { rotateX: 0 }}\r\n                    transition={{ duration: 0.4, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}\r\n                >\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mt-1\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <GlobeIcon />\r\n                    </div>\r\n                </motion.div>\r\n            </motion.div>\r\n\r\n            <motion.h3\r\n                className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}\r\n                animate={isHovered ? { opacity: 0 } : { opacity: 1 }}\r\n                transition={{ delay: isHovered ? 0.3 : 0 }}\r\n            >\r\n                {label}\r\n            </motion.h3>\r\n        </div>\r\n    );\r\n};\r\n\r\nconst RaviFolder: React.FC<{\r\n    images: string[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.ravi;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ images, isHovered, colors, sizes, label }) => {\r\n    // Reorder images for card-spread effect\r\n    const reorder = (arr: string[]) => {\r\n        const result: string[] = [];\r\n        let i = Math.ceil(arr.length / 2);\r\n        let j = i - 1;\r\n        while (j >= 0) {\r\n            result.push(arr[j--]);\r\n            if (i < arr.length) result.push(arr[i++]);\r\n        }\r\n        return result;\r\n    };\r\n\r\n    const orderedImages = React.useMemo(() => reorder(images), [images]);\r\n\r\n    return (\r\n        <div className=\"relative\">\r\n            {/* Feedback Circle */}\r\n            <motion.div\r\n                className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-14 h-14 rounded-full bg-white\"\r\n                initial={{ opacity: 0, scale: 1 }}\r\n                animate={\r\n                    !isHovered ? { opacity: [1, 0], scale: [1, 5] } : { opacity: 0, scale: 1 }\r\n                }\r\n                transition={{ duration: 0.8, delay: 0.35, ease: [0.1, 1, 0.3, 1] }}\r\n            />\r\n\r\n            <div className=\"relative cursor-pointer\" style={{ perspective: \"800px\" }}>\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Paper Sheet */}\r\n                <div className=\"absolute bottom-0.5 left-0.5 right-0.5 h-3/4 bg-white rounded-lg\" />\r\n\r\n                {/* Card Spread Previews */}\r\n                <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[75px] h-[65px]\">\r\n                    {orderedImages.map((img, i) => {\r\n                        const interval = 60;\r\n                        const c = orderedImages.length;\r\n                        const x =\r\n                            -interval * Math.floor(c / 2) + interval * i + (c % 2 === 0 ? interval / 2 : 0);\r\n                        const rotateInterval = 20;\r\n                        const rotate =\r\n                            -rotateInterval * Math.floor(c / 2) +\r\n                            rotateInterval * i +\r\n                            (c % 2 === 0 ? rotateInterval / 2 : 0);\r\n\r\n                        return (\r\n                            <motion.img\r\n                                key={i}\r\n                                src={img}\r\n                                alt=\"\"\r\n                                className=\"absolute w-full h-full object-cover rounded shadow-lg\"\r\n                                initial={{ opacity: 0, x: 0, y: 0, rotate: 0, scale: 1 }}\r\n                                animate={\r\n                                    isHovered\r\n                                        ? { opacity: 1, y: -70, x, rotate }\r\n                                        : { opacity: 0, x: 0, y: 0, rotate: 0, scale: 0.5 }\r\n                                }\r\n                                transition={{\r\n                                    duration: isHovered ? 0.4 : 0.3,\r\n                                    ease: isHovered ? [0.1, 1, 0.3, 1] : \"easeInOut\",\r\n                                }}\r\n                            />\r\n                        );\r\n                    })}\r\n                </div>\r\n\r\n                {/* Cover */}\r\n                <motion.div\r\n                    className={cn(\"relative\", colors.cover)}\r\n                    style={{ transformOrigin: \"50% 100%\", transformStyle: \"preserve-3d\" }}\r\n                    animate={isHovered ? { rotateX: -30 } : { rotateX: 0 }}\r\n                    transition={{\r\n                        duration: 0.4,\r\n                        delay: isHovered ? 0 : 0.3,\r\n                        ease: [0.16, 1, 0.3, 1],\r\n                    }}\r\n                >\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mt-1\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <PadlockIcon />\r\n                    </div>\r\n                </motion.div>\r\n            </div>\r\n\r\n            {label && (\r\n                <h3 className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}>\r\n                    {label}\r\n                </h3>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nconst DurgaFolder: React.FC<{\r\n    files: { name: string; type?: string }[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.durga;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ files, isHovered, colors, sizes, label }) => {\r\n    return (\r\n        <div className=\"relative\">\r\n            {/* Text Preview - shows file list inside a tooltip bubble */}\r\n            <motion.div\r\n                className=\"absolute -right-2 top-0 bg-gray-800 dark:bg-gray-900 rounded-lg px-3 py-2 shadow-lg z-20 min-w-[100px]\"\r\n                initial={{ opacity: 0, x: -10, scale: 0.9 }}\r\n                animate={isHovered ? { opacity: 1, x: 0, scale: 1 } : { opacity: 0, x: -10, scale: 0.9 }}\r\n                transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}\r\n                style={{ transform: 'translateX(100%)' }}\r\n            >\r\n                {files.slice(0, 6).map((file, i) => (\r\n                    <motion.div\r\n                        key={i}\r\n                        className=\"text-gray-100 font-mono text-xs py-0.5 whitespace-nowrap\"\r\n                        initial={{ opacity: 0 }}\r\n                        animate={{ opacity: isHovered ? 1 : 0 }}\r\n                        transition={{ duration: 0.05, delay: i * 0.03 }}\r\n                    >\r\n                        {file.name}\r\n                    </motion.div>\r\n                ))}\r\n            </motion.div>\r\n\r\n            {/* Folder */}\r\n            <div className=\"relative cursor-pointer aspect-[20/16]\" style={{ perspective: \"800px\" }}>\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Paper Sheet */}\r\n                <div className=\"absolute bottom-0.5 left-0.5 right-0.5 h-3/4 bg-white dark:bg-gray-200 rounded-lg\" />\r\n\r\n                {/* Cover */}\r\n                <motion.div\r\n                    className={cn(\"relative\", colors.cover)}\r\n                    style={{ transformOrigin: \"50% 100%\", transformStyle: \"preserve-3d\" }}\r\n                    animate={isHovered ? { rotateX: -30 } : { rotateX: 0 }}\r\n                    transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}\r\n                >\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <GlobeIcon />\r\n                    </div>\r\n                </motion.div>\r\n            </div>\r\n\r\n            {label && (\r\n                <h3 className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}>\r\n                    {label}\r\n                </h3>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nconst NandiFolder: React.FC<{\r\n    files: { name: string; type?: string }[];\r\n    isHovered: boolean;\r\n    colors: typeof variantColors.nandi;\r\n    sizes: typeof sizeConfig.md;\r\n    label?: string;\r\n}> = ({ files, isHovered, colors, sizes, label }) => {\r\n    const fileColorMap: Record<string, string> = {\r\n        txt: \"fill-blue-300\",\r\n        gif: \"fill-teal-400\",\r\n        mp3: \"fill-amber-400\",\r\n        default: \"fill-gray-400\",\r\n    };\r\n\r\n    return (\r\n        <div className=\"relative\">\r\n            {/* Magnifier Preview - compact bubble above folder */}\r\n            <motion.div\r\n                className=\"absolute left-1/2 -translate-x-1/2 bg-white dark:bg-gray-100 rounded-2xl shadow-xl z-20 p-3 grid grid-cols-3 gap-2\"\r\n                style={{ bottom: '100%', marginBottom: '8px', minWidth: '120px' }}\r\n                initial={{ opacity: 0, scale: 0.8, y: 10 }}\r\n                animate={\r\n                    isHovered\r\n                        ? { opacity: 1, scale: 1, y: 0 }\r\n                        : { opacity: 0, scale: 0.8, y: 10 }\r\n                }\r\n                transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}\r\n            >\r\n                {files.slice(0, 6).map((file, i) => (\r\n                    <div key={i} className=\"text-center\">\r\n                        <FileIcon\r\n                            className={cn(\"w-5 h-5 mx-auto\", fileColorMap[file.type || \"default\"])}\r\n                        />\r\n                        <span className=\"text-[8px] text-gray-600 block mt-0.5 truncate max-w-[35px]\">\r\n                            {file.name}\r\n                        </span>\r\n                    </div>\r\n                ))}\r\n            </motion.div>\r\n\r\n            {/* Folder */}\r\n            <div className=\"relative cursor-pointer aspect-[20/16]\" style={{ perspective: \"800px\" }}>\r\n                {/* Back */}\r\n                <div className={cn(\"absolute inset-0\", colors.back)}>\r\n                    <FolderBackIcon />\r\n                </div>\r\n\r\n                {/* Paper Sheet */}\r\n                <div className=\"absolute bottom-0.5 left-0.5 right-0.5 h-3/4 bg-white dark:bg-gray-200 rounded-lg\" />\r\n\r\n                {/* Cover */}\r\n                <motion.div\r\n                    className={cn(\"relative\", colors.cover)}\r\n                    style={{ transformOrigin: \"50% 100%\", transformStyle: \"preserve-3d\" }}\r\n                    animate={isHovered ? { rotateX: -30 } : { rotateX: 0 }}\r\n                    transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}\r\n                >\r\n                    <FolderCoverIcon />\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\r\n                            sizes.deco,\r\n                            colors.deco\r\n                        )}\r\n                    >\r\n                        <CloudIcon />\r\n                    </div>\r\n                </motion.div>\r\n            </div>\r\n\r\n            {label && (\r\n                <h3 className={cn(\"mt-3 font-medium text-center\", sizes.caption, colors.caption)}>\r\n                    {label}\r\n                </h3>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\n// ============================================\r\n// Main FolderPreview Component\r\n// ============================================\r\n\r\nexport const FolderPreview = React.forwardRef<HTMLDivElement, FolderPreviewProps>(\r\n    (\r\n        {\r\n            variant = \"devi\",\r\n            images = [],\r\n            files = [],\r\n            label,\r\n            size = \"md\",\r\n            className,\r\n            onClick,\r\n        },\r\n        ref\r\n    ) => {\r\n        const [isHovered, setIsHovered] = React.useState(false);\r\n        const colors = variantColors[variant];\r\n        const sizes = sizeConfig[size];\r\n\r\n        const defaultImages = [\r\n            \"/folder-preview/user1.svg\",\r\n            \"/folder-preview/user2.svg\",\r\n            \"/folder-preview/user3.svg\",\r\n            \"/folder-preview/user4.svg\",\r\n            \"/folder-preview/user5.svg\",\r\n        ];\r\n\r\n        const defaultFiles = [\r\n            { name: \"docs\", type: \"default\" as const },\r\n            { name: \"template\", type: \"default\" as const },\r\n            { name: \"readme.md\", type: \"txt\" as const },\r\n            { name: \"app.js\", type: \"txt\" as const },\r\n            { name: \"test.sh\", type: \"txt\" as const },\r\n            { name: \"package.json\", type: \"txt\" as const },\r\n            { name: \"logo.svg\", type: \"default\" as const },\r\n            { name: \"...\", type: \"default\" as const },\r\n        ];\r\n\r\n        const imageList = images.length > 0 ? images : defaultImages;\r\n        const fileList = files.length > 0 ? files : defaultFiles;\r\n\r\n        const renderFolder = () => {\r\n            const props = { isHovered, colors, sizes, label };\r\n\r\n            switch (variant) {\r\n                case \"devi\":\r\n                    return <DeviFolder images={imageList} {...props} />;\r\n                case \"rudras\":\r\n                    return <RudrasFolder images={imageList} {...props} />;\r\n                case \"ardra\":\r\n                    return <ArdraFolder images={imageList} {...props} />;\r\n                case \"shakti\":\r\n                    return <ShaktiFolder images={imageList} {...props} />;\r\n                case \"kubera\":\r\n                    return <KuberaFolder images={imageList} {...props} />;\r\n                case \"hari\":\r\n                    return <HariFolder images={imageList} {...props} />;\r\n                case \"ravi\":\r\n                    return <RaviFolder images={imageList} {...props} />;\r\n                case \"durga\":\r\n                    return <DurgaFolder files={fileList} {...props} />;\r\n                case \"nandi\":\r\n                    return <NandiFolder files={fileList} {...props} />;\r\n                default:\r\n                    return <DeviFolder images={imageList} {...props} />;\r\n            }\r\n        };\r\n\r\n        return (\r\n            <div\r\n                ref={ref}\r\n                className={cn(\"inline-flex flex-col items-center overflow-visible\", sizes.folder, className)}\r\n                onMouseEnter={() => setIsHovered(true)}\r\n                onMouseLeave={() => setIsHovered(false)}\r\n                onClick={onClick}\r\n            >\r\n                {renderFolder()}\r\n            </div>\r\n        );\r\n    }\r\n);\r\n\r\nFolderPreview.displayName = \"FolderPreview\";\r\n\r\nexport default FolderPreview;\r\n",
      "type": "registry:ui",
      "target": "components/ui/folder-preview.tsx"
    }
  ]
}