@mova-ui/react 0.1.0 → 0.4.1

package/registry/card-cascade-stagger.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-cascade-stagger",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-cascade-stagger.tsx",
+  "registryFile": "card-cascade-stagger.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-cascade-stagger';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardCascadeStaggerProps {\n  className?: string;\n  cardClassName?: string;\n}\n\nexport default function CardCascadeStagger({\n  className = '',\n  cardClassName = 'bg-neutral-800'\n}: CardCascadeStaggerProps) {\n  const [isHovered, setIsHovered] = useState(false);\n  const cards = [0, 1, 2, 3, 4];\n  const center = 2;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {cards.map((i) => {\n        const dist = i - center;\n        const targetY = isHovered ? dist * -28 - 14 : dist * 2;\n        const targetX = isHovered ? dist * 14 : 0;\n        const targetRotate = isHovered ? dist * 6 : 0;\n\n        return (\n          <motion.div\n            key={i}\n            animate={{\n              y: targetY,\n              x: targetX,\n              rotate: targetRotate,\n              scale: isHovered ? (dist === 0 ? 1.05 : 0.98) : 1\n            }}\n            transition={{ type: \"spring\", stiffness: 200, damping: 22, mass: 0.9 }}\n            style={{ zIndex: 5 - Math.abs(dist) }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_12px_-2px_rgba(0,0,0,0.15)] border border-white/5 ${cardClassName}`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/card-corner-fan.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-corner-fan",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-corner-fan.tsx",
+  "registryFile": "card-corner-fan.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-corner-fan';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardCornerFanProps {\n  angle?: number;\n  duration?: number;\n  hoverIntensity?: number;\n  cardClassName?: string;\n  className?: string;\n}\n\nexport default function CardCornerFan({\n  angle = 40,\n  duration = 0.5,\n  hoverIntensity = 1,\n  cardClassName = 'bg-neutral-800',\n  className = ''\n}: CardCornerFanProps) {\n  const [isHovered, setIsHovered] = useState(false);\n  const cards = [0, 1, 2, 3, 4];\n  const total = cards.length;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {cards.map((i) => {\n        const offsetRatio = i / (total - 1);\n        const startAngle = -10;\n        const targetRotate = isHovered ? (startAngle + offsetRatio * angle) * hoverIntensity : 0;\n\n        return (\n          <motion.div\n            key={i}\n            animate={{\n              rotate: targetRotate,\n              scale: isHovered && i === 2 ? 1.03 : 1\n            }}\n            transition={{\n              type: \"spring\",\n              stiffness: 180,\n              damping: 20,\n              mass: 0.8,\n              duration\n            }}\n            style={{\n              zIndex: 5 - i,\n              originX: 0,\n              originY: 1\n            }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_10px_-2px_rgba(0,0,0,0.15)] border border-white/5 ${cardClassName}`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/card-cover-flow-mono.json

@@ -0,0 +1,19 @@
+{
+  "id": "card-cover-flow-mono",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-cover-flow-mono.tsx",
+  "registryFile": "card-cover-flow-mono.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-cover-flow-mono';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nconst DEFAULT_ASSETS = [\n  {\n    src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80',\n    title: 'Sunset Beach',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80',\n    title: 'Misty Mountains',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80',\n    title: 'Forest Trail',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80',\n    title: 'Sunlight Woods',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80',\n    title: 'Green Hills',\n  },\n];\n\ninterface CardCoverFlowProps {\n  className?: string;\n  images?: { src: string; title: string }[];\n  isMonochrome?: boolean;\n}\n\nexport default function CardCoverFlow({\n  className = '',\n  images = DEFAULT_ASSETS,\n  isMonochrome = true\n}: CardCoverFlowProps) {\n  const [activeIndex, setActiveIndex] = useState(2);\n\n  const toPrev = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.max(0, prev - 1));\n  };\n\n  const toNext = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.min(images.length - 1, prev + 1));\n  };\n\n  const toSlide = (e: React.MouseEvent, index: number) => {\n    e.stopPropagation();\n    setActiveIndex(index);\n  };\n\n  return (\n    <div className={`w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none bg-zinc-950/40 rounded-2xl ${className}`} style={{ perspective: '1000px' }}>\n      <div className=\"w-full flex justify-center items-center relative h-[140px] [transform-style:preserve-3d]\">\n        {images.map((item, i) => {\n          const isActive = activeIndex === i;\n          const offset = i - activeIndex;\n          const absOffset = Math.abs(offset);\n          const isPast = i < activeIndex;\n          \n          return (\n            <motion.div \n              key={i}\n              className=\"absolute w-[80px] aspect-[3/4] cursor-pointer\"\n              initial={false}\n              animate={{ \n                x: offset * 32,\n                rotateY: isActive ? 0 : (isPast ? 38 : -38),\n                z: isActive ? 50 : -absOffset * 50,\n                scale: isActive ? 1.1 : 1 - (absOffset * 0.08),\n                opacity: absOffset > 2 ? 0 : 1 - (absOffset * 0.25)\n              }}\n              transition={{ type: 'spring', stiffness: 200, damping: 25 }}\n              style={{ zIndex: 100 - absOffset }}\n              onClick={(e) => toSlide(e, i)}\n            >\n              {isMonochrome ? (\n                <div \n                  className=\"w-full h-full rounded-xl bg-neutral-400 dark:bg-neutral-800 border border-neutral-200/20 shadow-2xl flex items-center justify-center text-neutral-600 dark:text-neutral-400 font-bold text-sm\"\n                >\n                  {i + 1}\n                </div>\n              ) : (\n                <img \n                  src={item.src} \n                  alt={item.title} \n                  referrerPolicy=\"no-referrer\"\n                  className=\"w-full h-full object-cover rounded-xl shadow-2xl border border-white/10\" \n                />\n              )}\n              <motion.div \n                className=\"absolute -bottom-6 left-[-20px] right-[-20px] text-center text-[10px] font-semibold text-white/80 whitespace-nowrap overflow-hidden text-ellipsis\"\n                animate={{ opacity: isActive ? 1 : 0, y: isActive ? 0 : -5 }}\n              >\n                {isMonochrome ? `Card ${i + 1}` : item.title}\n              </motion.div>\n            </motion.div>\n          )\n        })}\n      </div>\n\n      <div className=\"mt-6 w-fit px-1.5 py-0.5 flex items-center gap-2 justify-center text-zinc-300 rounded-full bg-white/5 backdrop-blur-md border border-white/10 shadow-sm z-20\">\n        <button onClick={toPrev} className=\"p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white\">\n          <ChevronLeft className=\"w-3.5 h-3.5\" />\n        </button>\n        <div className=\"flex justify-center items-center gap-1\">\n          {images.map((_, i) => (\n            <div \n              key={i} \n              onClick={(e) => toSlide(e, i)}\n              className={`rounded-full cursor-pointer h-1 transition-all duration-300 ${activeIndex === i ? 'w-4 bg-white' : 'w-1 bg-white/30 hover:bg-white/50'}`}>\n            </div>\n          ))}\n        </div>\n        <button onClick={toNext} className=\"p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white\">\n          <ChevronRight className=\"w-3.5 h-3.5\" />\n        </button>\n      </div>\n    </div>\n  );\n}"
+}

package/registry/card-cover-flow.json

@@ -0,0 +1,19 @@
+{
+  "id": "card-cover-flow",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-cover-flow.tsx",
+  "registryFile": "card-cover-flow.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-cover-flow';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nconst DEFAULT_ASSETS = [\n  {\n    src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80',\n    title: 'Sunset Beach',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80',\n    title: 'Misty Mountains',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80',\n    title: 'Forest Trail',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80',\n    title: 'Sunlight Woods',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80',\n    title: 'Green Hills',\n  },\n];\n\ninterface CardCoverFlowProps {\n  className?: string;\n  images?: { src: string; title: string }[];\n}\n\nexport default function CardCoverFlow({\n  className = '',\n  images = DEFAULT_ASSETS\n}: CardCoverFlowProps) {\n  const [activeIndex, setActiveIndex] = useState(2);\n\n  const toPrev = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.max(0, prev - 1));\n  };\n\n  const toNext = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.min(images.length - 1, prev + 1));\n  };\n\n  const toSlide = (e: React.MouseEvent, index: number) => {\n    e.stopPropagation();\n    setActiveIndex(index);\n  };\n\n  return (\n    <div className={`w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none bg-zinc-950/40 rounded-2xl ${className}`} style={{ perspective: '1000px' }}>\n      <div className=\"w-full flex justify-center items-center relative h-[140px] [transform-style:preserve-3d]\">\n        {images.map((item, i) => {\n          const isActive = activeIndex === i;\n          const offset = i - activeIndex;\n          const absOffset = Math.abs(offset);\n          const isPast = i < activeIndex;\n          \n          return (\n            <motion.div \n              key={i}\n              className=\"absolute w-[80px] aspect-[3/4] cursor-pointer\"\n              initial={false}\n              animate={{ \n                x: offset * 32,\n                rotateY: isActive ? 0 : (isPast ? 38 : -38),\n                z: isActive ? 50 : -absOffset * 50,\n                scale: isActive ? 1.1 : 1 - (absOffset * 0.08),\n                opacity: absOffset > 2 ? 0 : 1 - (absOffset * 0.25)\n              }}\n              transition={{ type: 'spring', stiffness: 200, damping: 25 }}\n              style={{ zIndex: 100 - absOffset }}\n              onClick={(e) => toSlide(e, i)}\n            >\n              <img \n                src={item.src} \n                alt={item.title} \n                referrerPolicy=\"no-referrer\"\n                className=\"w-full h-full object-cover rounded-xl shadow-2xl border border-white/10\" \n              />\n              <motion.div \n                className=\"absolute -bottom-6 left-[-20px] right-[-20px] text-center text-[10px] font-semibold text-white/80 whitespace-nowrap overflow-hidden text-ellipsis\"\n                animate={{ opacity: isActive ? 1 : 0, y: isActive ? 0 : -5 }}\n              >\n                {item.title}\n              </motion.div>\n            </motion.div>\n          )\n        })}\n      </div>\n\n      <div className=\"mt-6 w-fit px-1.5 py-0.5 flex items-center gap-2 justify-center text-zinc-300 rounded-full bg-white/5 backdrop-blur-md border border-white/10 shadow-sm z-20\">\n        <button onClick={toPrev} className=\"p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white\">\n          <ChevronLeft className=\"w-3.5 h-3.5\" />\n        </button>\n        <div className=\"flex justify-center items-center gap-1\">\n          {images.map((_, i) => (\n            <div \n              key={i} \n              onClick={(e) => toSlide(e, i)}\n              className={`rounded-full cursor-pointer h-1 transition-all duration-300 ${activeIndex === i ? 'w-4 bg-white' : 'w-1 bg-white/30 hover:bg-white/50'}`}>\n            </div>\n          ))}\n        </div>\n        <button onClick={toNext} className=\"p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white\">\n          <ChevronRight className=\"w-3.5 h-3.5\" />\n        </button>\n      </div>\n    </div>\n  );\n}"
+}

package/registry/card-deck-cascade.json

@@ -0,0 +1,15 @@
+{
+  "id": "card-deck-cascade",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-deck-cascade.tsx",
+  "sourcePath": "components/css-animations/whimsical/ConceptTrios3.tsx",
+  "registryFile": "card-deck-cascade.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/ConceptTrios3.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/ConceptTrios3.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction CardDeckCascade({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes card_fan_spread {\n          0%, 100% { transform: rotate(0deg) translateX(0); }\n          40%, 75% { transform: rotate(var(--rot)) translateX(var(--tx)); }\n        }\n        .fan-card {\n          transform-origin: bottom center;\n          animation: card_fan_spread 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-[110px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute w-[42px] h-[58px] rounded-xl bg-blue-700 border border-neutral-600 fan-card\", style: { \"--rot\": \"-22deg\", \"--tx\": \"-24px\" } }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute w-[42px] h-[58px] rounded-xl bg-blue-600 border border-neutral-500 fan-card\", style: { \"--rot\": \"0deg\", \"--tx\": \"0px\" } }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute w-[42px] h-[58px] rounded-xl bg-blue-500 border border-neutral-400 fan-card\", style: { \"--rot\": \"22deg\", \"--tx\": \"24px\" } })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/card-deck-cascade.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(CardDeckCascade, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/card-glance-preview.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-glance-preview",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-glance-preview.tsx",
+  "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
+  "registryFile": "card-glance-preview.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/yui-components/RedesignedUiTrios.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  Bookmark,\n  Check,\n  ChevronUp,\n  ChevronDown,\n  Layers,\n  LayoutGrid,\n  Info\n} from \"lucide-react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction CardGlancePreview({ theme = \"dark\" }) {\n  const [open, setOpen] = useState(false);\n  return /* @__PURE__ */ jsxs(\"div\", { className: \"relative flex flex-col items-center justify-center\", children: [\n    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(\n      motion.div,\n      {\n        initial: { opacity: 0, y: 6, scale: 0.92 },\n        animate: { opacity: 1, y: -8, scale: 1 },\n        exit: { opacity: 0, y: 4, scale: 0.92 },\n        className: `absolute -top-12 px-3 py-2 rounded-xl border text-[11px] shadow-xl flex items-center gap-2 whitespace-nowrap z-20 pointer-events-none ${theme === \"dark\" ? \"bg-[#1c1c1e] border-neutral-700 text-neutral-200\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n        children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-2 h-2 rounded-full bg-blue-500\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"Interactive Glance Preview\" })\n        ]\n      }\n    ) }),\n    /* @__PURE__ */ jsx(\n      motion.button,\n      {\n        onMouseEnter: () => setOpen(true),\n        onMouseLeave: () => setOpen(false),\n        whileHover: { scale: 1.08 },\n        whileTap: { scale: 0.92 },\n        className: `w-10 h-10 rounded-2xl border flex items-center justify-center cursor-pointer shadow-sm ${theme === \"dark\" ? \"bg-[#1e1e1e] border-neutral-700 text-blue-400\" : \"bg-white border-neutral-200 text-blue-600\"}`,\n        children: /* @__PURE__ */ jsx(Info, { className: \"w-5 h-5\" })\n      }\n    )\n  ] });\n}\n\n// catalog/registry-bindings/card-glance-preview.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(CardGlancePreview, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/card-hover.json

@@ -1,8 +1,17 @@
 {
   "id": "card-hover",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "card-hover.tsx",
+  "sourcePath": "ui/hover/card-hover.tsx",
+  "registryFile": "card-hover.json",
+  "exports": [
+    "CardHover"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\n\ninterface CardHoverProps {\n  items: {\n    id: string;\n    title: string;\n    description: string;\n    link?: string;\n  }[];\n  className?: string;\n  cardClassName?: string;\n}\n\nexport function CardHover({\n  items,\n  className = '',\n  cardClassName = '',\n}: CardHoverProps) {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  return (\n    <div className={`grid grid-cols-1 md:grid-cols-3 gap-4 w-full ${className}`}>\n      {items.map((item, idx) => (\n        <a\n          key={item.id}\n          href={item.link || '#'}\n          className=\"relative group block p-2 h-full w-full no-underline\"\n          onMouseEnter={() => setHoveredIndex(idx)}\n          onMouseLeave={() => setHoveredIndex(null)}\n        >\n          <AnimatePresence>\n            {hoveredIndex === idx && (\n              <motion.span\n                className=\"absolute inset-0 h-full w-full bg-neutral-200 dark:bg-zinc-800/[0.8] block rounded-3xl -z-10\"\n                layoutId=\"hoverBackground\"\n                initial={{ opacity: 0 }}\n                animate={{\n                  opacity: 1,\n                  transition: { duration: 0.15 },\n                }}\n                exit={{\n                  opacity: 0,\n                  transition: { duration: 0.15, delay: 0.1 },\n                }}\n              />\n            )}\n          </AnimatePresence>\n          <div\n            className={`rounded-2xl h-full w-full p-5 overflow-hidden bg-white dark:bg-black border border-neutral-200 dark:border-zinc-800 group-hover:border-slate-350 dark:group-hover:border-zinc-700 relative z-20 transition-colors duration-200 ${cardClassName}`}\n          >\n            <div className=\"relative z-50\">\n              <h4 className=\"text-zinc-900 dark:text-zinc-100 font-bold tracking-wide mt-2\">\n                {item.title}\n              </h4>\n              <p className=\"mt-2 text-zinc-500 dark:text-zinc-400 tracking-wide leading-relaxed text-sm\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  );\n}\n"
 }

package/registry/card-linear-spread.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-linear-spread",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-linear-spread.tsx",
+  "registryFile": "card-linear-spread.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-linear-spread';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardLinearSpreadProps {\n  gap?: number;\n  duration?: number;\n  hoverIntensity?: number;\n  cardClassName?: string;\n  className?: string;\n}\n\nexport default function CardLinearSpread({\n  gap = 90,\n  duration = 0.5,\n  hoverIntensity = 1,\n  cardClassName = 'bg-neutral-800',\n  className = ''\n}: CardLinearSpreadProps) {\n  const [isHovered, setIsHovered] = useState(false);\n  const cards = [0, 1, 2, 3, 4];\n  const center = 2;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {cards.map((i) => {\n        const dist = i - center;\n        const targetX = isHovered ? dist * (gap / center) * hoverIntensity : 0;\n\n        return (\n          <motion.div\n            key={i}\n            animate={{\n              x: targetX,\n              scale: isHovered ? (dist === 0 ? 1.05 : 1) : 1\n            }}\n            transition={{\n              type: \"spring\",\n              stiffness: 180,\n              damping: 20,\n              mass: 0.8,\n              duration\n            }}\n            style={{\n              zIndex: 3 - Math.abs(dist)\n            }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_10px_-2px_rgba(0,0,0,0.15)] border border-white/5 ${cardClassName}`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/card-long-arc-5.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-long-arc-5",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-long-arc-5.tsx",
+  "registryFile": "card-long-arc-5.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-long-arc-5';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardLongArc5Props {\n  angle?: number;\n  gap?: number;\n  yOffset?: number;\n  duration?: number;\n  hoverIntensity?: number;\n  cardClassName?: string;\n  className?: string;\n}\n\nexport default function CardLongArc5({\n  angle = 15,\n  gap = 140,\n  yOffset = 20,\n  duration = 0.5,\n  hoverIntensity = 1,\n  cardClassName = 'bg-neutral-800',\n  className = ''\n}: CardLongArc5Props) {\n  const [isHovered, setIsHovered] = useState(false);\n  const cards = [0, 1, 2, 3, 4];\n  const center = 2;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {cards.map((i) => {\n        const dist = i - center;\n        const targetRotate = isHovered ? dist * (angle / center) * hoverIntensity : 0;\n        const targetX = isHovered ? dist * (gap / center) * hoverIntensity : 0;\n        \n        let targetY = 0;\n        if (isHovered) {\n          if (Math.abs(dist) === 2) targetY = yOffset;\n          else if (Math.abs(dist) === 1) targetY = 0.25 * yOffset;\n          else targetY = -0.25 * yOffset;\n          targetY = targetY * hoverIntensity;\n        }\n\n        return (\n          <motion.div\n            key={i}\n            animate={{\n              rotate: targetRotate,\n              x: targetX,\n              y: targetY,\n              scale: isHovered ? (dist === 0 ? 1.05 : 1) : 1\n            }}\n            transition={{\n              type: \"spring\",\n              stiffness: 180,\n              damping: 20,\n              mass: 0.8,\n              duration\n            }}\n            style={{\n              zIndex: 3 - Math.abs(dist),\n              originX: 0.5,\n              originY: 1\n            }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_10px_-2px_rgba(0,0,0,0.15)] border border-white/5 ${cardClassName}`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/card-scatter-spread.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-scatter-spread",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-scatter-spread.tsx",
+  "registryFile": "card-scatter-spread.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-scatter-spread';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardScatterSpreadProps {\n  className?: string;\n  cardClassName?: string;\n}\n\nexport default function CardScatterSpread({\n  className = '',\n  cardClassName = 'bg-neutral-850'\n}: CardScatterSpreadProps) {\n  const [isHovered, setIsHovered] = useState(false);\n  const cards = [0, 1, 2, 3, 4];\n\n  const offsets = [\n    { x: -75, y: 15, rotate: -14 },\n    { x: -35, y: -15, rotate: -6 },\n    { x: 0, y: -30, rotate: 2 },\n    { x: 35, y: -10, rotate: 8 },\n    { x: 75, y: 20, rotate: 15 }\n  ];\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {cards.map((i) => {\n        const targetX = isHovered ? offsets[i].x : 0;\n        const targetY = isHovered ? offsets[i].y : 0;\n        const targetRotate = isHovered ? offsets[i].rotate : 0;\n\n        return (\n          <motion.div\n            key={i}\n            animate={{\n              x: targetX,\n              y: targetY,\n              rotate: targetRotate,\n              scale: isHovered ? (i === 2 ? 1.05 : 0.98) : 1\n            }}\n            transition={{ type: \"spring\", stiffness: 180, damping: 20, mass: 0.8 }}\n            style={{ zIndex: 5 - Math.abs(i - 2) }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.15)] border border-white/5 ${cardClassName}`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/card-stack-peel.json

@@ -0,0 +1,15 @@
+{
+  "id": "card-stack-peel",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-stack-peel.tsx",
+  "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
+  "registryFile": "card-stack-peel.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction CardStackPeel({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes card_peel_drop {\n          0%, 100% { transform: translateY(0) rotateX(0deg); opacity: 1; }\n          40%, 75% { transform: perspective(400px) translateY(24px) rotateX(25deg); opacity: 0.9; }\n        }\n        .card-top-sheet {\n          transform-origin: top center;\n          animation: card_peel_drop 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-[110px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: `absolute w-[100px] h-[65px] rounded-2xl border ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-white border-[#d2d2d7]\"}`, children: /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-3 left-3 w-10 h-1.5 rounded-full bg-blue-500\" }) }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute w-[100px] h-[65px] rounded-2xl card-top-sheet bg-blue-600 shadow-md flex items-center justify-center\", children: /* @__PURE__ */ jsx(\"div\", { className: \"w-12 h-2 rounded-full bg-white/90\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/card-stack-peel.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(CardStackPeel, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/card-stamp-arc.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-stamp-arc",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-stamp-arc.tsx",
+  "registryFile": "card-stamp-arc.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-stamp-arc';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardStampArcProps {\n  arc?: number;\n  spread?: number;\n  yOffset?: number;\n  isColorful?: boolean;\n  duration?: number;\n  hoverIntensity?: number;\n  className?: string;\n}\n\nexport default function CardStampArc({\n  arc = 25,\n  spread = 180,\n  yOffset = 40,\n  isColorful = false,\n  duration = 0.5,\n  hoverIntensity = 1,\n  className = ''\n}: CardStampArcProps) {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const stamps = [\n    { id: 0, color: 'bg-red-500' },\n    { id: 1, color: 'bg-blue-500' },\n    { id: 2, color: 'bg-emerald-500' },\n    { id: 3, color: 'bg-amber-500' },\n    { id: 4, color: 'bg-purple-500' }\n  ];\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {stamps.map((stamp, i) => {\n        const dist = i - 2;\n        \n        let targetRotate = 0;\n        let targetX = 0;\n        let targetY = 0;\n\n        if (isHovered) {\n          if (i === 0) {\n            targetRotate = -1 * arc;\n            targetX = -1 * spread;\n            targetY = yOffset;\n          } else if (i === 1) {\n            targetRotate = -0.48 * arc;\n            targetX = -0.5 * spread;\n            targetY = 0.25 * yOffset;\n          } else if (i === 2) {\n            targetRotate = 0;\n            targetX = 0;\n            targetY = -0.25 * yOffset;\n          } else if (i === 3) {\n            targetRotate = 0.48 * arc;\n            targetX = 0.5 * spread;\n            targetY = 0.25 * yOffset;\n          } else if (i === 4) {\n            targetRotate = arc;\n            targetX = spread;\n            targetY = yOffset;\n          }\n\n          targetRotate *= hoverIntensity;\n          targetX *= hoverIntensity;\n          targetY *= hoverIntensity;\n        }\n\n        return (\n          <motion.div\n            key={stamp.id}\n            animate={{\n              rotate: targetRotate,\n              x: targetX,\n              y: targetY,\n              scale: isHovered ? (dist === 0 ? 1.05 : 1) : 1\n            }}\n            transition={{\n              type: \"spring\",\n              stiffness: 180,\n              damping: 20,\n              mass: 0.8,\n              duration\n            }}\n            style={{\n              zIndex: 3 - Math.abs(dist),\n              originX: 0.5,\n              originY: 1\n            }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_10px_-2px_rgba(0,0,0,0.15)] border-2 border-dashed border-white/40 ${\n              isColorful ? stamp.color : 'bg-neutral-800'\n            }`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/card-time-machine-mono.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-time-machine-mono",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-time-machine-mono.tsx",
+  "registryFile": "card-time-machine-mono.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-time-machine-mono';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState, useMemo } from 'react';\nimport { motion } from 'framer-motion';\n\nconst TIMELINE_DATA = [\n  { date: 'Today', src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80', title: 'Sunset Beach' },\n  { date: '1d ago', src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80', title: 'Misty Mountains' },\n  { date: '1w ago', src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80', title: 'Forest Trail' },\n  { date: '1m ago', src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80', title: 'Sunlight Woods' },\n  { date: '1y ago', src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80', title: 'Green Hills' },\n];\n\ninterface CardTimeMachineProps {\n  className?: string;\n  isMonochrome?: boolean;\n}\n\nexport default function CardTimeMachine({\n  className = '',\n  isMonochrome = true\n}: CardTimeMachineProps) {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const handleTimelineHover = (index: number) => {\n    setHoveredIndex(index);\n    setActiveIndex(Math.round(index));\n  };\n\n  const timelineNodes = useMemo(() => {\n    const nodes: { type: 'main' | 'sub'; index: number; date?: string }[] = [];\n    TIMELINE_DATA.forEach((item, i) => {\n      nodes.push({ type: 'main', index: i, date: item.date });\n      if (i < TIMELINE_DATA.length - 1) {\n        for (let j = 0; j < 2; j++) {\n          nodes.push({ type: 'sub', index: i + (j + 1) * 0.33 });\n        }\n      }\n    });\n    return nodes;\n  }, []);\n\n  return (\n    <div className={`w-full h-full bg-[#09090b]/80 flex flex-row items-center justify-center gap-6 relative overflow-hidden rounded-2xl border border-white/5 p-4 ${className}`}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"absolute w-0 h-0\"\n        version=\"1.1\"\n      >\n        <defs>\n          <filter id=\"SkiperSquiCircleFilterLayout\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6\"\n              result=\"goo\"\n            />\n            <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n          </filter>\n        </defs>\n      </svg>\n      \n      <div className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.03),transparent_70%)] pointer-events-none\" />\n\n      <div \n        className=\"relative flex-1 max-w-[290px] aspect-[4/3] flex items-center justify-center\"\n        style={{ perspective: '800px' }}\n      >\n        {TIMELINE_DATA.map((item, i) => {\n          const offset = i - activeIndex;\n          const isPast = i < activeIndex;\n\n          return (\n            <motion.div\n              key={i}\n              className=\"absolute rounded-2xl flex h-[135px] w-[220px] origin-center flex-col overflow-hidden pointer-events-none\"\n              initial={false}\n              animate={{\n                z: isPast ? 200 : -offset * 60,\n                y: isPast ? 300 : -offset * 12,\n                rotateX: isPast ? -20 : offset * 2,\n                opacity: isPast ? 0 : 1 - Math.abs(offset) * 0.2,\n                scale: isPast ? 1.3 : 1,\n              }}\n              transition={{ \n                type: 'spring', \n                stiffness: 250, \n                damping: 25, \n                mass: 0.8 \n              }}\n              style={{\n                zIndex: TIMELINE_DATA.length - i,\n                filter: \"url(#SkiperSquiCircleFilterLayout)\"\n              }}\n            >\n              {isMonochrome ? (\n                <div \n                  className=\"w-full h-full rounded-2xl bg-neutral-400 dark:bg-neutral-800 border border-neutral-200/20 shadow-lg flex items-center justify-center text-neutral-600 dark:text-neutral-400 font-bold text-sm\"\n                >\n                  {i + 1}\n                </div>\n              ) : (\n                <img src={item.src} alt={item.title} referrerPolicy=\"no-referrer\" className=\"w-full h-full object-cover\" />\n              )}\n              <div className=\"absolute inset-0 bg-black/10 pointer-events-none\" />\n            </motion.div>\n          );\n        })}\n      </div>\n\n      <div \n        className=\"relative flex flex-col items-end z-50 py-2 px-1\"\n        onMouseLeave={() => setHoveredIndex(null)}\n      >\n        {timelineNodes.map((node, i) => {\n          if (node.type === 'main') {\n            const index = node.index;\n            const isSelected = activeIndex === index;\n\n            return (\n              <button\n                key={`main-${index}`}\n                className=\"relative inline-flex items-center justify-end py-[1px] w-20 group cursor-pointer border-0 bg-transparent\"\n                onMouseEnter={() => handleTimelineHover(index)}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setActiveIndex(index);\n                }}\n              >\n                {hoveredIndex === index ? (\n                  <motion.span\n                    className={`absolute top-0 right-10 text-[10px] font-semibold whitespace-nowrap ${\n                      isSelected\n                        ? 'text-blue-500'\n                        : 'text-white/90'\n                    }`}\n                    initial={{ opacity: 0, filter: `blur(2px)`, scale: 0.8 }}\n                    animate={{ opacity: 1, filter: `blur(0px)`, scale: 1 }}\n                    transition={{ duration: 0.15 }}\n                  >\n                    {node.date}\n                  </motion.span>\n                ) : null}\n                <motion.div\n                  className={`h-[3px] w-[24px] rounded-full origin-right transition-colors ${\n                    isSelected\n                      ? 'bg-blue-500'\n                      : 'bg-white/50 group-hover:bg-white/80'\n                  }`}\n                  animate={{\n                    scaleX: hoveredIndex === null ? 1 : (isSelected ? 1.4 : (Math.abs(index - hoveredIndex) < 0.5 ? 1.25 : 1)),\n                  }}\n                  transition={{ type: 'spring', stiffness: 400, damping: 25 }}\n                />\n              </button>\n            );\n          } else {\n            const isHoveringNear = hoveredIndex !== null && Math.abs(node.index - hoveredIndex) <= 0.5;\n\n            return (\n              <div \n                key={`sub-${node.index}`} \n                className=\"py-[1px] w-20 flex justify-end cursor-pointer\"\n                onMouseEnter={() => handleTimelineHover(node.index)}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setActiveIndex(Math.round(node.index));\n                }}\n              >\n                <motion.div\n                  className=\"h-[3px] w-[24px] rounded-full bg-white/20 origin-right\"\n                  animate={{\n                    scaleX: hoveredIndex === null ? 1 : (isHoveringNear ? 1.15 : 1),\n                    opacity: hoveredIndex === null ? 0.3 : (isHoveringNear ? 0.5 : 0.3)\n                  }}\n                  transition={{ type: 'spring', stiffness: 400, damping: 25 }}\n                />\n              </div>\n            );\n          }\n        })}\n      </div>\n    </div>\n  );\n}"
+}

package/registry/card-time-machine.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-time-machine",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-time-machine.tsx",
+  "registryFile": "card-time-machine.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-time-machine';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState, useMemo } from 'react';\nimport { motion } from 'framer-motion';\n\nconst TIMELINE_DATA = [\n  { date: 'Today', src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80', title: 'Sunset Beach' },\n  { date: '1d ago', src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80', title: 'Misty Mountains' },\n  { date: '1w ago', src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80', title: 'Forest Trail' },\n  { date: '1m ago', src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80', title: 'Sunlight Woods' },\n  { date: '1y ago', src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80', title: 'Green Hills' },\n];\n\ninterface CardTimeMachineProps {\n  className?: string;\n}\n\nexport default function CardTimeMachine({\n  className = ''\n}: CardTimeMachineProps) {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const handleTimelineHover = (index: number) => {\n    setHoveredIndex(index);\n    setActiveIndex(Math.round(index));\n  };\n\n  const timelineNodes = useMemo(() => {\n    const nodes: { type: 'main' | 'sub'; index: number; date?: string }[] = [];\n    TIMELINE_DATA.forEach((item, i) => {\n      nodes.push({ type: 'main', index: i, date: item.date });\n      if (i < TIMELINE_DATA.length - 1) {\n        for (let j = 0; j < 2; j++) {\n          nodes.push({ type: 'sub', index: i + (j + 1) * 0.33 });\n        }\n      }\n    });\n    return nodes;\n  }, []);\n\n  return (\n    <div className={`w-full h-full bg-[#09090b]/80 flex flex-row items-center justify-center gap-6 relative overflow-hidden rounded-2xl border border-white/5 p-4 ${className}`}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"absolute w-0 h-0\"\n        version=\"1.1\"\n      >\n        <defs>\n          <filter id=\"SkiperSquiCircleFilterLayout\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6\"\n              result=\"goo\"\n            />\n            <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n          </filter>\n        </defs>\n      </svg>\n      \n      <div className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.03),transparent_70%)] pointer-events-none\" />\n\n      <div \n        className=\"relative flex-1 max-w-[290px] aspect-[4/3] flex items-center justify-center\"\n        style={{ perspective: '800px' }}\n      >\n        {TIMELINE_DATA.map((item, i) => {\n          const offset = i - activeIndex;\n          const isPast = i < activeIndex;\n\n          return (\n            <motion.div\n              key={i}\n              className=\"absolute rounded-2xl flex h-[135px] w-[220px] origin-center flex-col overflow-hidden pointer-events-none\"\n              initial={false}\n              animate={{\n                z: isPast ? 200 : -offset * 60,\n                y: isPast ? 300 : -offset * 12,\n                rotateX: isPast ? -20 : offset * 2,\n                opacity: isPast ? 0 : 1 - Math.abs(offset) * 0.2,\n                scale: isPast ? 1.3 : 1,\n              }}\n              transition={{ \n                type: 'spring', \n                stiffness: 250, \n                damping: 25, \n                mass: 0.8 \n              }}\n              style={{\n                zIndex: TIMELINE_DATA.length - i,\n                filter: \"url(#SkiperSquiCircleFilterLayout)\"\n              }}\n            >\n              <img src={item.src} alt={item.title} referrerPolicy=\"no-referrer\" className=\"w-full h-full object-cover\" />\n              <div className=\"absolute inset-0 bg-black/10 pointer-events-none\" />\n            </motion.div>\n          );\n        })}\n      </div>\n\n      <div \n        className=\"relative flex flex-col items-end z-50 py-2 px-1\"\n        onMouseLeave={() => setHoveredIndex(null)}\n      >\n        {timelineNodes.map((node, i) => {\n          if (node.type === 'main') {\n            const index = node.index;\n            const isSelected = activeIndex === index;\n\n            return (\n              <button\n                key={`main-${index}`}\n                className=\"relative inline-flex items-center justify-end py-[1px] w-20 group cursor-pointer border-0 bg-transparent\"\n                onMouseEnter={() => handleTimelineHover(index)}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setActiveIndex(index);\n                }}\n              >\n                {hoveredIndex === index ? (\n                  <motion.span\n                    className={`absolute top-0 right-10 text-[10px] font-semibold whitespace-nowrap ${\n                      isSelected\n                        ? 'text-blue-500'\n                        : 'text-white/90'\n                    }`}\n                    initial={{ opacity: 0, filter: `blur(2px)`, scale: 0.8 }}\n                    animate={{ opacity: 1, filter: `blur(0px)`, scale: 1 }}\n                    transition={{ duration: 0.15 }}\n                  >\n                    {node.date}\n                  </motion.span>\n                ) : null}\n                <motion.div\n                  className={`h-[3px] w-[24px] rounded-full origin-right transition-colors ${\n                    isSelected\n                      ? 'bg-blue-500'\n                      : 'bg-white/50 group-hover:bg-white/80'\n                  }`}\n                  animate={{\n                    scaleX: hoveredIndex === null ? 1 : (isSelected ? 1.4 : (Math.abs(index - hoveredIndex) < 0.5 ? 1.25 : 1)),\n                  }}\n                  transition={{ type: 'spring', stiffness: 400, damping: 25 }}\n                />\n              </button>\n            );\n          } else {\n            const isHoveringNear = hoveredIndex !== null && Math.abs(node.index - hoveredIndex) <= 0.5;\n\n            return (\n              <div \n                key={`sub-${node.index}`} \n                className=\"py-[1px] w-20 flex justify-end cursor-pointer\"\n                onMouseEnter={() => handleTimelineHover(node.index)}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setActiveIndex(Math.round(node.index));\n                }}\n              >\n                <motion.div\n                  className=\"h-[3px] w-[24px] rounded-full bg-white/20 origin-right\"\n                  animate={{\n                    scaleX: hoveredIndex === null ? 1 : (isHoveringNear ? 1.15 : 1),\n                    opacity: hoveredIndex === null ? 0.3 : (isHoveringNear ? 0.5 : 0.3)\n                  }}\n                  transition={{ type: 'spring', stiffness: 400, damping: 25 }}\n                />\n              </div>\n            );\n          }\n        })}\n      </div>\n    </div>\n  );\n}"
+}

package/registry/card-wheel-fan.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-wheel-fan",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-wheel-fan.tsx",
+  "registryFile": "card-wheel-fan.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-wheel-fan';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardWheelFanProps {\n  className?: string;\n  cardClassName?: string;\n}\n\nexport default function CardWheelFan({\n  className = '',\n  cardClassName = 'bg-neutral-800'\n}: CardWheelFanProps) {\n  const [isHovered, setIsHovered] = useState(false);\n  const cards = [0, 1, 2, 3, 4];\n  const center = 2;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {cards.map((i) => {\n        const dist = i - center;\n        const targetRotate = isHovered ? dist * 18 : 0;\n        \n        let targetY = 0;\n        if (isHovered) {\n          if (Math.abs(dist) === 2) targetY = -8;\n          else if (Math.abs(dist) === 1) targetY = -22;\n          else targetY = -28;\n        }\n\n        return (\n          <motion.div\n            key={i}\n            animate={{\n              rotate: targetRotate,\n              y: targetY,\n              scale: isHovered ? (dist === 0 ? 1.05 : 0.98) : 1\n            }}\n            transition={{ type: \"spring\", stiffness: 180, damping: 20, mass: 0.8 }}\n            style={{\n              zIndex: 5 - Math.abs(dist),\n              originX: 0.5,\n              originY: 1.1\n            }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.15)] border border-white/5 ${cardClassName}`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/category-select.json

@@ -0,0 +1,18 @@
+{
+  "id": "category-select",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "category-select.tsx",
+  "sourcePath": "components/css-animations/yui-components/YuiUiKit1.tsx",
+  "registryFile": "category-select.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/yui-components/YuiUiKit1.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  ChevronDown,\n  ExternalLink,\n  Plus,\n  Minus,\n  Sun,\n  Moon,\n  X,\n  ChevronLeft,\n  ChevronRight\n} from \"lucide-react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction CategorySelect({ theme = \"dark\" }) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState(\"Category 1\");\n  const options = [\"Category 1\", \"Category 2\", \"Category 3\"];\n  return /* @__PURE__ */ jsxs(\"div\", { className: \"relative flex flex-col items-center select-none\", children: [\n    /* @__PURE__ */ jsxs(\n      motion.button,\n      {\n        whileTap: { scale: 0.96 },\n        onClick: () => setIsOpen(!isOpen),\n        className: `flex items-center justify-between gap-3 px-4 py-2.5 rounded-2xl border text-xs font-semibold shadow-sm transition-all cursor-pointer ${theme === \"dark\" ? \"bg-[#181818] border-white/10 text-white hover:bg-neutral-800\" : \"bg-white border-neutral-200 text-neutral-900 hover:bg-neutral-50\"}`,\n        children: [\n          /* @__PURE__ */ jsx(\"span\", { children: selected }),\n          /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isOpen ? 180 : 0 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ jsx(ChevronDown, { className: \"w-3.5 h-3.5 text-neutral-400\" }) })\n        ]\n      }\n    ),\n    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(\n      motion.div,\n      {\n        initial: { opacity: 0, y: -6, scale: 0.95 },\n        animate: { opacity: 1, y: 4, scale: 1 },\n        exit: { opacity: 0, y: -6, scale: 0.95 },\n        transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },\n        className: `absolute top-full z-30 w-36 p-1 rounded-2xl border shadow-xl flex flex-col gap-0.5 ${theme === \"dark\" ? \"bg-[#181818] border-white/10\" : \"bg-white border-neutral-200\"}`,\n        children: options.map((opt) => /* @__PURE__ */ jsx(\n          \"button\",\n          {\n            onClick: () => {\n              setSelected(opt);\n              setIsOpen(false);\n            },\n            className: `w-full text-left px-3 py-2 rounded-xl text-xs font-medium transition-colors cursor-pointer border-0 ${selected === opt ? theme === \"dark\" ? \"bg-white/10 text-white font-semibold\" : \"bg-neutral-100 text-black font-semibold\" : theme === \"dark\" ? \"text-neutral-400 hover:text-white hover:bg-white/5\" : \"text-neutral-600 hover:text-black hover:bg-neutral-50\"}`,\n            children: opt\n          },\n          opt\n        ))\n      }\n    ) })\n  ] });\n}\n\n// catalog/registry-bindings/category-select.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(CategorySelect, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/character-stagger.json

@@ -1,8 +1,17 @@
 {
   "id": "character-stagger",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "character-stagger.tsx",
+  "sourcePath": "ui/text/character-stagger.tsx",
+  "registryFile": "character-stagger.json",
+  "exports": [
+    "CharacterStagger"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion, type Variants } from 'framer-motion';\n\ninterface CharacterStaggerProps {\n  text: string;\n  duration?: number;\n  staggerDelay?: number;\n  yOffset?: number;\n  className?: string;\n}\n\nexport function CharacterStagger({\n  text,\n  duration = 0.4,\n  staggerDelay = 0.015,\n  yOffset = 15,\n  className = '',\n}: CharacterStaggerProps) {\n  const characters = Array.from(text);\n\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: staggerDelay,\n      },\n    },\n  };\n\n  const charVariants: Variants = {\n    hidden: { opacity: 0, y: yOffset, scale: 0.8 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      transition: {\n        type: 'spring',\n        stiffness: 300,\n        damping: 18,\n        mass: 0.8,\n        duration,\n      },\n    },\n  };\n\n  return (\n    <motion.div\n      variants={containerVariants}\n      initial=\"hidden\"\n      whileInView=\"visible\"\n      viewport={{ once: true, margin: '-10%' }}\n      className={`inline-block ${className}`}\n    >\n      {characters.map((char, index) => (\n        <motion.span\n          key={index}\n          variants={charVariants}\n          className=\"inline-block whitespace-pre\"\n        >\n          {char}\n        </motion.span>\n      ))}\n    </motion.div>\n  );\n}\n"
 }

package/registry/checkbox-draw.json

@@ -0,0 +1,19 @@
+{
+  "id": "checkbox-draw",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "checkbox-draw.tsx",
+  "registryFile": "checkbox-draw.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './checkbox-draw';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/forms/AnimatedFormElement.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Eye, EyeOff, Search, Check, Upload, ChevronDown, X, Loader2 } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/forms/AnimatedFormElement.tsx\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedFormElement = ({ config, theme }) => {\n  const [val, setVal] = useState(\"\");\n  const [isFocused, setIsFocused] = useState(false);\n  const [showPassword, setShowPassword] = useState(false);\n  const [isChecked, setIsChecked] = useState(false);\n  const [radioSelected, setRadioSelected] = useState(false);\n  const [shakeKey, setShakeKey] = useState(0);\n  const [hasError, setHasError] = useState(false);\n  const [isSuccess, setIsSuccess] = useState(false);\n  const [selectOpen, setSelectOpen] = useState(false);\n  const [selectedOption, setSelectedOption] = useState(\"React\");\n  const [chips, setChips] = useState([\"Next.js\", \"Tailwind\", \"Motion\"]);\n  const [otp, setOtp] = useState([\"\", \"\", \"\", \"\"]);\n  const [sliderVal, setSliderVal] = useState(65);\n  const [submitState, setSubmitState] = useState(\"idle\");\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const triggerErrorShake = () => {\n    triggerHaptic(\"error\");\n    setHasError(true);\n    setShakeKey((prev) => prev + 1);\n    setTimeout(() => setHasError(false), 800);\n  };\n  const handleFormSubmit = () => {\n    triggerHaptic(\"medium\");\n    setSubmitState(\"loading\");\n    setTimeout(() => {\n      setSubmitState(\"success\");\n      triggerHaptic(\"success\");\n      setTimeout(() => setSubmitState(\"idle\"), 2e3);\n    }, 1200);\n  };\n  return /* @__PURE__ */ jsx(\"div\", { className: \"relative flex items-center justify-center w-full h-full p-4 overflow-hidden select-none\", children: (() => {\n    switch (config.interactionType) {\n      case \"floating-label-input\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full max-w-[240px]\", children: [\n          /* @__PURE__ */ jsx(\n            motion.label,\n            {\n              animate: {\n                y: isFocused || val ? -24 : 0,\n                scale: isFocused || val ? 0.85 : 1,\n                color: isFocused ? isDark ? \"#3b82f6\" : \"#2563eb\" : isDark ? \"#9ca3af\" : \"#6b7280\"\n              },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"absolute left-3 top-2.5 origin-left pointer-events-none text-sm font-medium\",\n              children: \"Email Address\"\n            }\n          ),\n          /* @__PURE__ */ jsx(\n            \"input\",\n            {\n              type: \"text\",\n              value: val,\n              onFocus: () => setIsFocused(true),\n              onBlur: () => setIsFocused(false),\n              onChange: (e) => setVal(e.target.value),\n              className: `w-full px-3 py-2 pt-3 rounded-xl border text-sm outline-none transition-colors ${isDark ? \"bg-neutral-900 border-neutral-700 text-white focus:border-blue-500\" : \"bg-white border-neutral-300 text-black focus:border-blue-600\"}`\n            }\n          )\n        ] });\n      case \"input-focus-glow\":\n        return /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full max-w-[240px]\", children: /* @__PURE__ */ jsx(\n          \"input\",\n          {\n            type: \"text\",\n            placeholder: \"Focus for glow...\",\n            onFocus: () => setIsFocused(true),\n            onBlur: () => setIsFocused(false),\n            className: `w-full px-4 py-2.5 rounded-xl border text-sm outline-none transition-all duration-300 ${isDark ? \"bg-neutral-900 border-neutral-700 text-white focus:border-indigo-500\" : \"bg-white border-neutral-300 text-black focus:border-indigo-500\"} ${isFocused ? \"ring-4 ring-indigo-500/30 shadow-lg shadow-indigo-500/20\" : \"\"}`\n          }\n        ) });\n      case \"password-toggle\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full max-w-[240px]\", children: [\n          /* @__PURE__ */ jsx(\n            \"input\",\n            {\n              type: showPassword ? \"text\" : \"password\",\n              defaultValue: \"secretpass123\",\n              className: `w-full pl-3 pr-10 py-2.5 rounded-xl border text-sm outline-none ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`\n            }\n          ),\n          /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: () => {\n                triggerHaptic(\"light\");\n                setShowPassword(!showPassword);\n              },\n              className: \"absolute right-2.5 top-2.5 text-neutral-400 hover:text-neutral-200 cursor-pointer border-0 bg-transparent\",\n              children: /* @__PURE__ */ jsx(motion.div, { animate: { scale: showPassword ? 1.1 : 1, rotate: showPassword ? 0 : -10 }, children: showPassword ? /* @__PURE__ */ jsx(Eye, { className: \"w-4 h-4 text-indigo-400\" }) : /* @__PURE__ */ jsx(EyeOff, { className: \"w-4 h-4\" }) })\n            }\n          )\n        ] });\n      case \"search-expand\":\n        return /* @__PURE__ */ jsxs(\n          motion.div,\n          {\n            animate: { width: isFocused ? 240 : 160 },\n            transition: { type: \"spring\", stiffness: 400, damping: 28 },\n            className: `relative flex items-center rounded-full border px-3 py-1.5 transition-colors ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`,\n            children: [\n              /* @__PURE__ */ jsx(Search, { className: \"w-4 h-4 text-neutral-400 shrink-0 mr-2\" }),\n              /* @__PURE__ */ jsx(\n                \"input\",\n                {\n                  type: \"text\",\n                  placeholder: \"Search components...\",\n                  onFocus: () => setIsFocused(true),\n                  onBlur: () => setIsFocused(false),\n                  className: \"w-full text-xs bg-transparent border-0 outline-none\"\n                }\n              )\n            ]\n          }\n        );\n      case \"checkbox-draw\":\n        return /* @__PURE__ */ jsxs(\n          \"button\",\n          {\n            type: \"button\",\n            onClick: () => {\n              triggerHaptic(\"light\");\n              setIsChecked(!isChecked);\n            },\n            className: \"flex items-center gap-3 cursor-pointer border-0 bg-transparent\",\n            children: [\n              /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { scale: isChecked ? [1, 1.15, 1] : 1 },\n                  className: `w-6 h-6 rounded-lg border flex items-center justify-center transition-colors ${isChecked ? \"bg-emerald-500 border-emerald-500 text-white\" : isDark ? \"border-neutral-600 bg-neutral-900\" : \"border-neutral-300 bg-white\"}`,\n                  children: isChecked && /* @__PURE__ */ jsx(\n                    motion.svg,\n                    {\n                      className: \"w-4 h-4 text-white\",\n                      viewBox: \"0 0 24 24\",\n                      fill: \"none\",\n                      stroke: \"currentColor\",\n                      strokeWidth: \"3.5\",\n                      strokeLinecap: \"round\",\n                      strokeLinejoin: \"round\",\n                      children: /* @__PURE__ */ jsx(\n                        motion.path,\n                        {\n                          d: \"M20 6L9 17l-5-5\",\n                          initial: { pathLength: 0 },\n                          animate: { pathLength: 1 },\n                          transition: { duration: 0.2 }\n                        }\n                      )\n                    }\n                  )\n                }\n              ),\n              /* @__PURE__ */ jsx(\"span\", { className: `text-sm font-medium ${isDark ? \"text-white\" : \"text-black\"}`, children: \"Accept terms\" })\n            ]\n          }\n        );\n      case \"radio-scale\":\n        return /* @__PURE__ */ jsxs(\n          \"button\",\n          {\n            type: \"button\",\n            onClick: () => {\n              triggerHaptic(\"light\");\n              setRadioSelected(!radioSelected);\n            },\n            className: \"flex items-center gap-3 cursor-pointer border-0 bg-transparent\",\n            children: [\n              /* @__PURE__ */ jsx(\"div\", { className: `w-6 h-6 rounded-full border flex items-center justify-center ${radioSelected ? \"border-indigo-500\" : isDark ? \"border-neutral-600 bg-neutral-900\" : \"border-neutral-300 bg-white\"}`, children: radioSelected && /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25 },\n                  className: \"w-3.5 h-3.5 rounded-full bg-indigo-500\"\n                }\n              ) }),\n              /* @__PURE__ */ jsx(\"span\", { className: `text-sm font-medium ${isDark ? \"text-white\" : \"text-black\"}`, children: \"Option selected\" })\n            ]\n          }\n        );\n      case \"error-shake\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col items-center gap-2 w-full max-w-[220px]\", children: [\n          /* @__PURE__ */ jsx(\n            motion.input,\n            {\n              animate: hasError ? { x: [-10, 10, -8, 8, -4, 4, 0] } : { x: 0 },\n              transition: { duration: 0.5 },\n              type: \"text\",\n              placeholder: \"Click button to test error\",\n              className: `w-full px-3 py-2 rounded-xl border text-xs outline-none ${hasError ? \"border-red-500 text-red-500 bg-red-500/10\" : isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`\n            },\n            shakeKey\n          ),\n          /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: triggerErrorShake,\n              className: \"px-3 py-1 text-xs font-semibold rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 cursor-pointer border-0\",\n              children: \"Trigger Error Shake\"\n            }\n          )\n        ] });\n      case \"success-check\":\n        return /* @__PURE__ */ jsxs(\n          \"button\",\n          {\n            type: \"button\",\n            onClick: () => {\n              triggerHaptic(\"success\");\n              setIsSuccess(!isSuccess);\n            },\n            className: `relative px-4 py-2.5 rounded-2xl border flex items-center gap-2 text-sm font-semibold transition-all duration-300 cursor-pointer ${isSuccess ? \"bg-emerald-500/20 text-emerald-400 border-emerald-500/40\" : isDark ? \"bg-neutral-800 text-neutral-300 border-white/10\" : \"bg-neutral-100 text-neutral-700 border-neutral-300\"}`,\n            children: [\n              /* @__PURE__ */ jsx(\"span\", { children: isSuccess ? \"Verified\" : \"Click to Verify\" }),\n              /* @__PURE__ */ jsx(AnimatePresence, { children: isSuccess && /* @__PURE__ */ jsx(\n                motion.svg,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  exit: { scale: 0 },\n                  className: \"w-4 h-4 text-emerald-400\",\n                  viewBox: \"0 0 24 24\",\n                  fill: \"none\",\n                  stroke: \"currentColor\",\n                  strokeWidth: \"3\",\n                  children: /* @__PURE__ */ jsx(\n                    motion.path,\n                    {\n                      d: \"M20 6L9 17l-5-5\",\n                      initial: { pathLength: 0 },\n                      animate: { pathLength: 1 },\n                      transition: { duration: 0.3 }\n                    }\n                  )\n                },\n                \"check\"\n              ) })\n            ]\n          }\n        );\n      case \"select-dropdown\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full max-w-[200px]\", children: [\n          /* @__PURE__ */ jsxs(\n            \"button\",\n            {\n              type: \"button\",\n              onClick: () => {\n                triggerHaptic(\"light\");\n                setSelectOpen(!selectOpen);\n              },\n              className: `w-full flex items-center justify-between px-3 py-2 rounded-xl border text-xs font-medium cursor-pointer ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`,\n              children: [\n                /* @__PURE__ */ jsx(\"span\", { children: selectedOption }),\n                /* @__PURE__ */ jsx(ChevronDown, { className: `w-3.5 h-3.5 transition-transform ${selectOpen ? \"rotate-180\" : \"\"}` })\n              ]\n            }\n          ),\n          /* @__PURE__ */ jsx(AnimatePresence, { children: selectOpen && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              initial: { opacity: 0, scale: 0.95, y: -6 },\n              animate: { opacity: 1, scale: 1, y: 4 },\n              exit: { opacity: 0, scale: 0.95, y: -6 },\n              className: `absolute left-0 right-0 z-30 p-1 rounded-xl border shadow-xl flex flex-col gap-0.5 ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-black\"}`,\n              children: [\"React\", \"Vue\", \"Svelte\", \"Solid\"].map((opt) => /* @__PURE__ */ jsx(\n                \"button\",\n                {\n                  type: \"button\",\n                  onClick: () => {\n                    setSelectedOption(opt);\n                    setSelectOpen(false);\n                  },\n                  className: `w-full text-left px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer border-0 ${selectedOption === opt ? isDark ? \"bg-white/10 text-white\" : \"bg-neutral-100 text-black\" : isDark ? \"hover:bg-white/5 text-neutral-400\" : \"hover:bg-neutral-50 text-neutral-600\"}`,\n                  children: opt\n                },\n                opt\n              ))\n            }\n          ) })\n        ] });\n      case \"multi-select-chips\":\n        return /* @__PURE__ */ jsx(\"div\", { className: \"flex flex-wrap gap-1.5 max-w-[240px]\", children: /* @__PURE__ */ jsx(AnimatePresence, { children: chips.map((chip) => /* @__PURE__ */ jsxs(\n          motion.span,\n          {\n            initial: { scale: 0, opacity: 0 },\n            animate: { scale: 1, opacity: 1 },\n            exit: { scale: 0, opacity: 0 },\n            className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium border ${isDark ? \"bg-indigo-500/20 text-indigo-300 border-indigo-500/30\" : \"bg-indigo-100 text-indigo-700 border-indigo-200\"}`,\n            children: [\n              chip,\n              /* @__PURE__ */ jsx(\n                \"button\",\n                {\n                  type: \"button\",\n                  onClick: () => {\n                    triggerHaptic(\"light\");\n                    setChips(chips.filter((c) => c !== chip));\n                  },\n                  className: \"hover:opacity-75 cursor-pointer border-0 bg-transparent p-0\",\n                  children: /* @__PURE__ */ jsx(X, { className: \"w-3 h-3\" })\n                }\n              )\n            ]\n          },\n          chip\n        )) }) });\n      case \"textarea-auto-grow\":\n        return /* @__PURE__ */ jsx(\"div\", { className: \"w-full max-w-[240px]\", children: /* @__PURE__ */ jsx(\n          \"textarea\",\n          {\n            rows: 2,\n            placeholder: \"Type to test auto-grow...\",\n            className: `w-full px-3 py-2 rounded-xl border text-xs outline-none resize-none transition-all ${isDark ? \"bg-neutral-900 border-neutral-700 text-white\" : \"bg-white border-neutral-300 text-black\"}`,\n            onInput: (e) => {\n              const target = e.target;\n              target.style.height = \"auto\";\n              target.style.height = `${target.scrollHeight}px`;\n            }\n          }\n        ) });\n      case \"otp-input\":\n        return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2\", children: [0, 1, 2, 3].map((idx) => /* @__PURE__ */ jsx(\n          motion.input,\n          {\n            id: `otp-${idx}`,\n            type: \"text\",\n            maxLength: 1,\n            value: otp[idx],\n            whileFocus: { scale: 1.1 },\n            onChange: (e) => {\n              const newOtp = [...otp];\n              newOtp[idx] = e.target.value;\n              setOtp(newOtp);\n              if (e.target.value && idx < 3) {\n                const next = document.getElementById(`otp-${idx + 1}`);\n                next?.focus();\n              }\n            },\n            className: `w-10 h-12 text-center text-lg font-bold rounded-xl border outline-none ${isDark ? \"bg-neutral-900 border-neutral-700 text-white focus:border-indigo-500\" : \"bg-white border-neutral-300 text-black focus:border-indigo-500\"}`\n          },\n          idx\n        )) });\n      case \"file-upload-dropzone\":\n        return /* @__PURE__ */ jsxs(\n          motion.div,\n          {\n            whileHover: { scale: 1.02 },\n            className: `w-full max-w-[240px] p-4 rounded-2xl border-2 border-dashed flex flex-col items-center justify-center gap-1 cursor-pointer transition-colors ${isDark ? \"border-neutral-700 hover:border-indigo-500 bg-neutral-900/50\" : \"border-neutral-300 hover:border-indigo-500 bg-neutral-50\"}`,\n            children: [\n              /* @__PURE__ */ jsx(Upload, { className: \"w-6 h-6 text-indigo-500 animate-bounce\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: `text-xs font-semibold ${isDark ? \"text-neutral-300\" : \"text-neutral-700\"}`, children: \"Drop files here\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] text-neutral-400\", children: \"SVG, PNG, JPG (max 5MB)\" })\n            ]\n          }\n        );\n      case \"range-slider\":\n        return /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full max-w-[220px] flex flex-col items-center\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute -top-7 px-2 py-0.5 rounded-lg bg-indigo-500 text-white text-[11px] font-bold shadow-md\", children: [\n            sliderVal,\n            \"%\"\n          ] }),\n          /* @__PURE__ */ jsx(\n            \"input\",\n            {\n              type: \"range\",\n              min: \"0\",\n              max: \"100\",\n              value: sliderVal,\n              onChange: (e) => setSliderVal(Number(e.target.value)),\n              className: \"w-full accent-indigo-500 cursor-pointer\"\n            }\n          )\n        ] });\n      case \"form-submit-button\":\n        return /* @__PURE__ */ jsx(\n          \"button\",\n          {\n            type: \"button\",\n            onClick: handleFormSubmit,\n            className: `px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer border-0 shadow-lg ${submitState === \"success\" ? \"bg-emerald-500 text-white\" : submitState === \"loading\" ? \"bg-neutral-700 text-neutral-300\" : \"bg-indigo-600 text-white hover:bg-indigo-500\"}`,\n            children: submitState === \"loading\" ? /* @__PURE__ */ jsxs(Fragment, { children: [\n              /* @__PURE__ */ jsx(Loader2, { className: \"w-4 h-4 animate-spin text-white\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Submitting...\" })\n            ] }) : submitState === \"success\" ? /* @__PURE__ */ jsxs(Fragment, { children: [\n              /* @__PURE__ */ jsx(Check, { className: \"w-4 h-4 text-white\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Submitted!\" })\n            ] }) : /* @__PURE__ */ jsx(\"span\", { children: \"Submit Form\" })\n          }\n        );\n      default:\n        return null;\n    }\n  })() });\n};\n\n// checkbox-draw.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedFormElement, { theme, config: { \"id\": \"frm5\", \"label\": \"Checkbox Path Draw\", \"interactionType\": \"checkbox-draw\", \"description\": \"Custom checkbox with animated SVG checkmark stroke on select.\", \"cliCommand\": \"npx @mova-ui/react add checkbox-draw\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/checkmark-draw.json

@@ -0,0 +1,19 @@
+{
+  "id": "checkmark-draw",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "checkmark-draw.tsx",
+  "registryFile": "checkmark-draw.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './checkmark-draw';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/toggles/AnimatedToggle.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Sun, Moon, Lock, Unlock, Bookmark, Heart, ThumbsDown, Repeat } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/toggles/AnimatedToggle.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedToggle = ({ config, theme }) => {\n  const [isOn, setIsOn] = useState(false);\n  const [isInit, setIsInit] = useState(false);\n  const [pillTab, setPillTab] = useState(\"Daily\");\n  const [likeCount, setLikeCount] = useState(42);\n  const [repostCount, setRepostCount] = useState(18);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const handleToggle = () => {\n    if (!isInit) setIsInit(true);\n    triggerHaptic(\"medium\");\n    setIsOn(!isOn);\n  };\n  switch (config.interactionType) {\n    case \"double-bounce-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          \"data-on\": isOn ? \"true\" : \"false\",\n          className: `t-toggle ${isInit ? \"is-init\" : \"\"} relative w-14 h-8 rounded-full p-1 cursor-pointer border-0 transition-colors ${isOn ? \"bg-emerald-500\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\"span\", { className: \"t-toggle-thumb block w-6 h-6 bg-white rounded-full shadow-md pointer-events-none\" })\n        }\n      );\n    case \"solid-switch\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-14 h-8 rounded-full p-1 transition-colors duration-200 cursor-pointer border-0 ${isOn ? isDark ? \"bg-white text-black\" : \"bg-black text-white\" : isDark ? \"bg-neutral-800 border border-white/10\" : \"bg-neutral-200 border border-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 24 : 0 },\n              transition: { duration: 0.15, ease: \"easeOut\" },\n              className: `w-6 h-6 rounded-full shadow-sm ${isOn ? isDark ? \"bg-black\" : \"bg-white\" : isDark ? \"bg-white\" : \"bg-black\"}`\n            }\n          )\n        }\n      );\n    case \"rectangle-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-14 h-8 rounded-md p-1 transition-colors duration-200 cursor-pointer border ${isOn ? \"bg-blue-600 border-blue-500\" : isDark ? \"bg-neutral-900 border-neutral-700\" : \"bg-neutral-100 border-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 24 : 0 },\n              transition: { type: \"spring\", stiffness: 500, damping: 30 },\n              className: \"w-5 h-5 bg-white rounded-sm shadow-md\"\n            }\n          )\n        }\n      );\n    case \"circle-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? \"bg-indigo-500\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 28 : 0 },\n              transition: { type: \"spring\", stiffness: 450, damping: 25 },\n              className: \"w-7 h-7 bg-white rounded-full shadow-md\"\n            }\n          )\n        }\n      );\n    case \"bookmark-toggle\":\n      return /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `p-3 rounded-2xl flex items-center gap-2 font-medium text-xs transition-all cursor-pointer border ${isOn ? isDark ? \"bg-blue-500/20 text-blue-400 border-blue-500/40\" : \"bg-blue-100 text-blue-600 border-blue-300\" : isDark ? \"bg-white/[0.05] text-neutral-400 border-white/10 hover:text-white\" : \"bg-neutral-100 text-neutral-600 border-neutral-200 hover:text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(motion.div, { animate: { scale: isOn ? [1, 1.3, 1] : 1 }, children: /* @__PURE__ */ jsx(Bookmark, { className: `w-4 h-4 ${isOn ? \"fill-current\" : \"\"}` }) }),\n            /* @__PURE__ */ jsx(\"span\", { children: isOn ? \"Saved\" : \"Bookmark\" })\n          ]\n        }\n      );\n    case \"like-toggle\":\n      return /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: () => {\n            triggerHaptic(\"success\");\n            setLikeCount((prev) => isOn ? prev - 1 : prev + 1);\n            setIsOn(!isOn);\n          },\n          className: `p-2.5 px-3.5 rounded-2xl flex items-center gap-2 text-xs font-semibold transition-all cursor-pointer border ${isOn ? \"bg-rose-500/20 text-rose-400 border-rose-500/40\" : isDark ? \"bg-white/[0.05] text-neutral-400 border-white/10 hover:text-white\" : \"bg-neutral-100 text-neutral-600 border-neutral-200 hover:text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(motion.div, { animate: { scale: isOn ? [1, 1.4, 1] : 1 }, children: /* @__PURE__ */ jsx(Heart, { className: `w-4 h-4 ${isOn ? \"fill-rose-500 text-rose-500\" : \"\"}` }) }),\n            /* @__PURE__ */ jsx(\"span\", { children: likeCount })\n          ]\n        }\n      );\n    case \"dislike-toggle\":\n      return /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `p-2.5 rounded-2xl flex items-center gap-2 text-xs font-medium transition-all cursor-pointer border ${isOn ? isDark ? \"bg-amber-500/20 text-amber-400 border-amber-500/40\" : \"bg-amber-100 text-amber-600 border-amber-300\" : isDark ? \"bg-white/[0.05] text-neutral-400 border-white/10 hover:text-white\" : \"bg-neutral-100 text-neutral-600 border-neutral-200 hover:text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isOn ? [0, -15, 0] : 0 }, children: /* @__PURE__ */ jsx(ThumbsDown, { className: `w-4 h-4 ${isOn ? \"fill-current\" : \"\"}` }) }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Dislike\" })\n          ]\n        }\n      );\n    case \"repost-toggle\":\n      return /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: () => {\n            triggerHaptic(\"medium\");\n            setRepostCount((prev) => isOn ? prev - 1 : prev + 1);\n            setIsOn(!isOn);\n          },\n          className: `p-2.5 px-3.5 rounded-2xl flex items-center gap-2 text-xs font-semibold transition-all cursor-pointer border ${isOn ? \"bg-emerald-500/20 text-emerald-400 border-emerald-500/40\" : isDark ? \"bg-white/[0.05] text-neutral-400 border-white/10 hover:text-white\" : \"bg-neutral-100 text-neutral-600 border-neutral-200 hover:text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isOn ? 180 : 0 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ jsx(Repeat, { className: \"w-4 h-4\" }) }),\n            /* @__PURE__ */ jsx(\"span\", { children: repostCount })\n          ]\n        }\n      );\n    case \"pill-tabs\":\n      return /* @__PURE__ */ jsx(\"div\", { className: `relative p-1 rounded-full flex items-center border ${isDark ? \"bg-neutral-900 border-white/10\" : \"bg-neutral-200/80 border-neutral-300/40\"}`, children: [\"Daily\", \"Weekly\", \"Monthly\"].map((tab) => /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: () => {\n            triggerHaptic(\"light\");\n            setPillTab(tab);\n          },\n          className: `relative px-3.5 py-1 text-xs font-semibold rounded-full z-10 transition-colors cursor-pointer border-0 bg-transparent ${pillTab === tab ? isDark ? \"text-white\" : \"text-black\" : isDark ? \"text-neutral-400 hover:text-white\" : \"text-neutral-600 hover:text-black\"}`,\n          children: [\n            pillTab === tab && /* @__PURE__ */ jsx(\n              motion.div,\n              {\n                layoutId: \"pill-tabs-indicator\",\n                transition: { type: \"spring\", stiffness: 500, damping: 30 },\n                className: `absolute inset-0 rounded-full -z-10 shadow-sm ${isDark ? \"bg-neutral-800 border border-white/10\" : \"bg-white\"}`\n              }\n            ),\n            tab\n          ]\n        },\n        tab\n      )) });\n    case \"morph-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? \"bg-indigo-600\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 28 : 0, rotate: isOn ? 180 : 0 },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"w-7 h-7 bg-white rounded-full shadow-md flex items-center justify-center text-neutral-800\",\n              children: isOn ? /* @__PURE__ */ jsx(Unlock, { className: \"w-4 h-4 text-indigo-600\" }) : /* @__PURE__ */ jsx(Lock, { className: \"w-4 h-4 text-neutral-600\" })\n            }\n          )\n        }\n      );\n    case \"checkmark-draw\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? \"bg-emerald-500\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 28 : 0 },\n              transition: { type: \"spring\", stiffness: 500, damping: 28 },\n              className: \"w-7 h-7 bg-white rounded-full shadow-md flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: \"wait\", children: isOn && /* @__PURE__ */ jsx(\n                motion.svg,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  exit: { scale: 0, opacity: 0 },\n                  className: \"w-4 h-4 text-emerald-600\",\n                  viewBox: \"0 0 24 24\",\n                  fill: \"none\",\n                  stroke: \"currentColor\",\n                  strokeWidth: \"3.5\",\n                  strokeLinecap: \"round\",\n                  strokeLinejoin: \"round\",\n                  children: /* @__PURE__ */ jsx(\n                    motion.path,\n                    {\n                      d: \"M20 6L9 17l-5-5\",\n                      initial: { pathLength: 0 },\n                      animate: { pathLength: 1 },\n                      transition: { duration: 0.25 }\n                    }\n                  )\n                },\n                \"check\"\n              ) })\n            }\n          )\n        }\n      );\n    case \"theme-toggle\":\n      return /* @__PURE__ */ jsx(\n        \"button\",\n        {\n          onClick: handleToggle,\n          className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? \"bg-indigo-950 border border-indigo-700/50\" : \"bg-amber-100 border border-amber-300\"}`,\n          children: /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              animate: { x: isOn ? 28 : 0, rotate: isOn ? 360 : 0 },\n              transition: { type: \"spring\", stiffness: 350, damping: 22 },\n              className: `w-7 h-7 rounded-full shadow-md flex items-center justify-center ${isOn ? \"bg-indigo-900 text-yellow-300\" : \"bg-amber-400 text-white\"}`,\n              children: isOn ? /* @__PURE__ */ jsx(Moon, { className: \"w-4 h-4 fill-yellow-300\" }) : /* @__PURE__ */ jsx(Sun, { className: \"w-4 h-4 fill-white\" })\n            }\n          )\n        }\n      );\n    default:\n      return null;\n  }\n};\n\n// checkmark-draw.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedToggle, { theme, config: { \"id\": \"t-check\", \"label\": \"Checkmark Draw\", \"interactionType\": \"checkmark-draw\", \"description\": \"Sharp vector SVG checkmark path animation on activation.\", \"cliCommand\": \"npx @mova-ui/react add checkmark-draw\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}