@mova-ui/react 0.1.0 → 0.2.0

package/registry/flip-y-char.json

@@ -0,0 +1,14 @@
+{
+  "id": "flip-y-char",
+  "file": "flip-y-char.tsx",
+  "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/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { RefreshCw } 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/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// flip-y-char.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-flipy-char\", \"label\": \"Flip Y Char\", \"interactionType\": \"flip-y-char\", \"description\": \"Characters flip on Y axis.\", \"cliCommand\": \"npx @mova-ui/react add flip-y-char\", \"category\": \"3D & Rotate\" } });\n}\nexport {\n  MovaComponent as default\n};\n",
+  "dependencies": [
+    "lucide-react",
+    "motion"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './flip-y-char';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/float-char.json

@@ -0,0 +1,14 @@
+{
+  "id": "float-char",
+  "file": "float-char.tsx",
+  "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/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { RefreshCw } 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/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// float-char.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-float-char\", \"label\": \"Float Char\", \"interactionType\": \"float-char\", \"description\": \"Characters float gently up and down.\", \"cliCommand\": \"npx @mova-ui/react add float-char\", \"category\": \"Continuous\" } });\n}\nexport {\n  MovaComponent as default\n};\n",
+  "dependencies": [
+    "lucide-react",
+    "motion"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './float-char';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/float-word.json

@@ -0,0 +1,14 @@
+{
+  "id": "float-word",
+  "file": "float-word.tsx",
+  "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/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { RefreshCw } 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/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// float-word.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-float-word\", \"label\": \"Float Word\", \"interactionType\": \"float-word\", \"description\": \"Words float gently up and down.\", \"cliCommand\": \"npx @mova-ui/react add float-word\", \"category\": \"Continuous\" } });\n}\nexport {\n  MovaComponent as default\n};\n",
+  "dependencies": [
+    "lucide-react",
+    "motion"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './float-word';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/floating-label-input.json

@@ -0,0 +1,14 @@
+{
+  "id": "floating-label-input",
+  "file": "floating-label-input.tsx",
+  "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 \"motion/react\";\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// floating-label-input.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedFormElement, { theme, config: { \"id\": \"frm1\", \"label\": \"Floating Label Input\", \"interactionType\": \"floating-label-input\", \"description\": \"Label floats up cleanly on focus with spring displacement.\", \"cliCommand\": \"npx @mova-ui/react add floating-label-input\" } });\n}\nexport {\n  MovaComponent as default\n};\n",
+  "dependencies": [
+    "lucide-react",
+    "motion"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './floating-label-input';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/focus-blur.json

@@ -0,0 +1,13 @@
+{
+  "id": "focus-blur",
+  "file": "focus-blur.tsx",
+  "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/focus-blur.tsx\nimport { motion } from \"motion/react\";\n\n// src/components/css-animations/ScrambleHover.tsx\nimport { useState, useEffect, useRef, useCallback } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction ScrambleHover({\n  text,\n  scrambleSpeed = 40,\n  maxIterations = 10,\n  sequential = false,\n  revealDirection = \"start\",\n  useOriginalCharsOnly = true,\n  className = \"\",\n  characters = \"ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmno pqrstuvwxyz 0123456789 !@#$%^&*()_+\",\n  scrambledClassName = \"\"\n}) {\n  const [displayText, setDisplayText] = useState(text);\n  const [isScrambling, setIsScrambling] = useState(false);\n  const intervalRef = useRef(null);\n  const triggerScramble = useCallback(() => {\n    let iteration = 0;\n    const maxIterationsTotal = sequential ? revealDirection === \"center\" ? Math.ceil(text.length / 2) : text.length : maxIterations;\n    setIsScrambling(true);\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    intervalRef.current = window.setInterval(() => {\n      setDisplayText(() => {\n        const nextText = text.split(\"\").map((char, index) => {\n          if (char === \" \") return \" \";\n          if (sequential) {\n            let revealed = false;\n            if (revealDirection === \"start\") {\n              revealed = index < iteration;\n            } else if (revealDirection === \"end\") {\n              revealed = index >= text.length - iteration;\n            } else if (revealDirection === \"center\") {\n              const center = Math.floor(text.length / 2);\n              revealed = Math.abs(index - center) <= iteration;\n            }\n            if (revealed) return text[index];\n          } else {\n            if (iteration >= maxIterations) {\n              return text[index];\n            }\n          }\n          if (useOriginalCharsOnly) {\n            const availableChars = text.replace(/\\s/g, \"\");\n            const randomChar = availableChars[Math.floor(Math.random() * availableChars.length)];\n            return randomChar || text[index];\n          } else {\n            return characters[Math.floor(Math.random() * characters.length)];\n          }\n        }).join(\"\");\n        return nextText;\n      });\n      iteration++;\n      if (!sequential && iteration > maxIterations || sequential && iteration >= maxIterationsTotal) {\n        if (intervalRef.current) clearInterval(intervalRef.current);\n        setDisplayText(text);\n        setIsScrambling(false);\n      }\n    }, scrambleSpeed);\n  }, [text, scrambleSpeed, maxIterations, sequential, revealDirection, useOriginalCharsOnly, characters]);\n  useEffect(() => {\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, []);\n  return /* @__PURE__ */ jsx(\n    \"span\",\n    {\n      className: `cursor-pointer transition-colors duration-150 ${isScrambling && scrambledClassName ? scrambledClassName : className}`,\n      onMouseEnter: triggerScramble,\n      children: displayText\n    }\n  );\n}\n\n// src/components/css-animations/FocusBlur.tsx\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nfunction FocusBlurDemo({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsxs2(\"div\", { className: \"flex w-full flex-col items-center gap-6 font-sans\", children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: `\n        .blur-group:has(.blur-target:hover) .blur-target:not(:hover) {\n          filter: blur(4px);\n          opacity: 0.35;\n        }\n        .blur-target {\n          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n      ` }),\n    /* @__PURE__ */ jsxs2(\"div\", { className: `w-full rounded-[24px] p-6 sm:p-8 border flex flex-col items-center text-center gap-4 transition-colors duration-300 ${theme === \"dark\" ? \"bg-[#181818] border-white/10\" : \"bg-white border-neutral-200 shadow-sm\"}`, children: [\n      /* @__PURE__ */ jsx2(\"span\", { className: \"text-[11px] font-bold tracking-widest uppercase text-indigo-400\", children: \"CSS :has() Parent Selector\" }),\n      /* @__PURE__ */ jsxs2(\"div\", { className: \"flex flex-wrap justify-center gap-x-3 text-xl sm:text-3xl font-bold blur-group cursor-default py-4\", children: [\n        /* @__PURE__ */ jsx2(\"span\", { className: theme === \"dark\" ? \"text-neutral-500\" : \"text-neutral-400\", children: \"Explore\" }),\n        [\"Animations,\", \"Transitions,\", \"Physics,\", \"Micro-UI\"].map((word) => /* @__PURE__ */ jsx2(\n          \"span\",\n          {\n            className: `blur-target cursor-pointer hover:text-indigo-400 transition-colors ${theme === \"dark\" ? \"text-white\" : \"text-neutral-900\"}`,\n            children: word\n          },\n          word\n        ))\n      ] }),\n      /* @__PURE__ */ jsx2(\"p\", { className: `text-xs ${theme === \"dark\" ? \"text-neutral-400\" : \"text-neutral-500\"}`, children: \"Hovering over any word automatically blurs and softens its peer sibling elements using pure CSS.\" })\n    ] })\n  ] });\n}\n\n// src/components/focus-blur.tsx\nimport { jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  const previewLoopTrigger = 0;\n  const renderLiveTextEffect = (id) => {\n    switch (id) {\n      case \"scramble-text\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"w-full flex items-center justify-center px-4 text-center\", children: /* @__PURE__ */ jsx3(\"div\", { className: `text-base sm:text-lg font-bold font-mono ${theme === \"dark\" ? \"text-indigo-400\" : \"text-indigo-600\"}`, children: /* @__PURE__ */ jsx3(ScrambleHover, { text: \"DECODE_REACT\" }) }) });\n      case \"focus-blur\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"w-full flex items-center justify-center\", children: /* @__PURE__ */ jsx3(FocusBlurDemo, { theme }) });\n      case \"wave-reveal\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"flex items-center justify-center gap-1 font-bold text-base select-none\", children: \"ELEVATE\".split(\"\").map((char, i) => /* @__PURE__ */ jsx3(\n          motion.span,\n          {\n            animate: { y: [0, -8, 0], color: theme === \"dark\" ? [\"#fff\", \"#818cf8\", \"#fff\"] : [\"#111\", \"#6366f1\", \"#111\"] },\n            transition: { repeat: Infinity, duration: 1.6, delay: i * 0.12 },\n            className: \"cursor-pointer\",\n            children: char\n          },\n          i\n        )) });\n      case \"gradient-shimmer\":\n        return /* @__PURE__ */ jsxs3(\"div\", { className: \"flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx3(\"style\", { children: `\n              @keyframes text_shimmer {\n                0% { background-position: -200% center; }\n                100% { background-position: 200% center; }\n              }\n              .shimmer-text {\n                background: linear-gradient(90deg, ${theme === \"dark\" ? \"#555 0%, #fff 50%, #555 100%\" : \"#888 0%, #000 50%, #888 100%\"});\n                background-size: 200% auto;\n                color: transparent;\n                -webkit-background-clip: text;\n                background-clip: text;\n                animation: text_shimmer 3s linear infinite;\n              }\n            ` }),\n          /* @__PURE__ */ jsx3(\"span\", { className: \"text-xl sm:text-2xl font-black tracking-widest shimmer-text select-none uppercase\", children: \"SHIMMER_FX\" })\n        ] });\n      case \"typewriter-cursor\":\n        return /* @__PURE__ */ jsxs3(\"div\", { className: \"flex items-center justify-center font-mono font-bold text-sm sm:text-base\", children: [\n          /* @__PURE__ */ jsx3(\"style\", { children: `\n              @keyframes blink_cursor {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0; }\n              }\n              .blink-bar { animation: blink_cursor 0.9s infinite; }\n            ` }),\n          /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-neutral-200\" : \"text-neutral-900\", children: \"npx @mova-ui/react add\" }),\n          /* @__PURE__ */ jsx3(\"span\", { className: `w-2 h-4 ml-1 blink-bar ${theme === \"dark\" ? \"bg-indigo-400\" : \"bg-indigo-600\"}` })\n        ] });\n      case \"perspective-flip\":\n        return /* @__PURE__ */ jsx3(\"div\", { className: \"flex items-center justify-center h-8 overflow-hidden select-none font-bold text-sm sm:text-base\", children: /* @__PURE__ */ jsxs3(\n          motion.div,\n          {\n            animate: { y: [0, -32, -64, 0] },\n            transition: { repeat: Infinity, duration: 4.5, times: [0, 0.33, 0.66, 1], ease: \"easeInOut\" },\n            className: \"flex flex-col items-center gap-4 text-center\",\n            children: [\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-indigo-400\" : \"text-indigo-600\", children: \"FAST\" }),\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-emerald-400\" : \"text-emerald-600\", children: \"FLUID\" }),\n              /* @__PURE__ */ jsx3(\"span\", { className: theme === \"dark\" ? \"text-rose-400\" : \"text-rose-600\", children: \"PREMIUM\" })\n            ]\n          }\n        ) });\n      default:\n        return null;\n    }\n  };\n  return renderLiveTextEffect(\"focus-blur\");\n}\nexport {\n  MovaComponent as default\n};\n",
+  "dependencies": [
+    "motion"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './focus-blur';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/form-submit-button.json

@@ -0,0 +1,14 @@
+{
+  "id": "form-submit-button",
+  "file": "form-submit-button.tsx",
+  "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 \"motion/react\";\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// form-submit-button.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedFormElement, { theme, config: { \"id\": \"frm15\", \"label\": \"Form Submit Morph\", \"interactionType\": \"form-submit-button\", \"description\": \"Submit button morphs into loading spinner then checkmark state.\", \"cliCommand\": \"npx @mova-ui/react add form-submit-button\" } });\n}\nexport {\n  MovaComponent as default\n};\n",
+  "dependencies": [
+    "lucide-react",
+    "motion"
+  ],
+  "css": "",
+  "usage": "import MovaComponent from './form-submit-button';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/french-doors-3d.json

@@ -0,0 +1,13 @@
+{
+  "id": "french-doors-3d",
+  "file": "french-doors-3d.tsx",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const FrenchDoors3D = ({ isVisible }: { isVisible: boolean }) => (\n  <div className=\"fixed inset-0 z-50 pointer-events-none [perspective:1400px] flex overflow-hidden\">\n    <motion.div\n      initial={{ rotateY: 90, opacity: 0 }}\n      animate={isVisible ? { rotateY: 0, opacity: 1 } : { rotateY: 90, opacity: 0 }}\n      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}\n      className=\"w-1/2 h-full bg-[#1c1c1e] origin-right border-r border-white/15 shadow-2xl\"\n    />\n    <motion.div\n      initial={{ rotateY: -90, opacity: 0 }}\n      animate={isVisible ? { rotateY: 0, opacity: 1 } : { rotateY: -90, opacity: 0 }}\n      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}\n      className=\"w-1/2 h-full bg-[#1c1c1e] origin-left border-l border-white/15 shadow-2xl\"\n    />\n  </div>\n);",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "css": "",
+  "usage": "import { FrenchDoors3D } from './french-doors-3d';\n\nexport default function Demo() {\n  return <FrenchDoors3D />;\n}",
+  "exports": [
+    "FrenchDoors3D"
+  ]
+}