@mova-ui/react 0.1.0 → 0.4.1

package/registry/cross-spinner.json

@@ -1,8 +1,17 @@
 {
   "id": "cross-spinner",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "cross-spinner.tsx",
+  "sourcePath": "ui/loading/cross-spinner.tsx",
+  "registryFile": "cross-spinner.json",
+  "exports": [
+    "CrossSpinner"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const CrossSpinner = () => {\n  return (\n    <motion.div\n      className=\"relative w-8 h-8 flex items-center justify-center\"\n      animate={{ rotate: [0, 90, 180, 270, 360] }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    >\n      <div className=\"absolute w-full h-1.5 bg-zinc-800 dark:bg-white rounded-full\" />\n      <div className=\"absolute h-full w-1.5 bg-zinc-800 dark:bg-white rounded-full\" />\n    </motion.div>\n  );\n};\n"
 }

package/registry/cube-flip-spring.json

@@ -1,8 +1,17 @@
 {
   "id": "cube-flip-spring",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "cube-flip-spring.tsx",
+  "sourcePath": "ui/loading/cube-flip-spring.tsx",
+  "registryFile": "cube-flip-spring.json",
+  "exports": [
+    "CubeFlipSpring"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const CubeFlipSpring = () => (\n  <motion.div\n    className=\"w-8 h-8 bg-zinc-800 dark:bg-white rounded-lg\"\n    animate={{ rotateX: [0, 180, 180], rotateY: [0, 0, 180] }}\n    transition={{ duration: 2, repeat: Infinity, type: \"spring\", bounce: 0.2 }}\n  />\n);\n"
 }

package/registry/cursor-trail.json

@@ -1,8 +1,17 @@
 {
   "id": "cursor-trail",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "cursor-trail.tsx",
+  "sourcePath": "ui/cursor/cursor-trail.tsx",
+  "registryFile": "cursor-trail.json",
+  "exports": [
+    "CursorTrail"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React, { useEffect, useState } from 'react';\nimport { motion, useSpring } from 'framer-motion';\n\ninterface CursorTrailProps {\n  color?: string;\n  size?: number;\n  count?: number;\n}\n\nexport function CursorTrail({\n  color = 'bg-blue-500',\n  size = 8,\n  count = 6,\n}: CursorTrailProps) {\n  const [coords, setCoords] = useState({ x: 0, y: 0 });\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      setCoords({ x: e.clientX, y: e.clientY });\n      if (!isVisible) setIsVisible(true);\n    };\n\n    const handleMouseLeave = () => {\n      setIsVisible(false);\n    };\n\n    window.addEventListener('mousemove', handleMouseMove, { passive: true });\n    document.addEventListener('mouseleave', handleMouseLeave);\n    \n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseleave', handleMouseLeave);\n    };\n  }, [isVisible]);\n\n  // Create an array of springs, each following the one in front of it\n  return (\n    <>\n      {isVisible && Array.from({ length: count }).map((_, index) => {\n        // Higher index elements have more damping/delay\n        const springConfig = {\n          stiffness: 300 - index * 30,\n          damping: 25 + index * 2,\n          mass: 0.2 + index * 0.1,\n        };\n\n        return (\n          <TrailDot\n            key={index}\n            index={index}\n            coords={coords}\n            springConfig={springConfig}\n            size={size}\n            color={color}\n            count={count}\n          />\n        );\n      })}\n    </>\n  );\n}\n\ninterface TrailDotProps {\n  index: number;\n  coords: { x: number; y: number };\n  springConfig: { stiffness: number; damping: number; mass: number };\n  size: number;\n  color: string;\n  count: number;\n}\n\nfunction TrailDot({\n  index,\n  coords,\n  springConfig,\n  size,\n  color,\n  count,\n}: TrailDotProps) {\n  const x = useSpring(coords.x, springConfig);\n  const y = useSpring(coords.y, springConfig);\n\n  useEffect(() => {\n    x.set(coords.x);\n    y.set(coords.y);\n  }, [coords, x, y]);\n\n  // Calculate size and opacity based on index (shrinking tail)\n  const dotSize = size * (1 - index / count);\n  const opacity = 1 - index / count;\n\n  return (\n    <motion.div\n      style={{\n        x,\n        y,\n        width: dotSize,\n        height: dotSize,\n        translateX: '-50%',\n        translateY: '-50%',\n        opacity,\n      }}\n      className={`fixed top-0 left-0 rounded-full pointer-events-none z-[9999] ${color}`}\n    />\n  );\n}\n"
 }

package/registry/dash-ring.json

@@ -1,8 +1,17 @@
 {
   "id": "dash-ring",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "dash-ring.tsx",
+  "sourcePath": "ui/loading/dash-ring.tsx",
+  "registryFile": "dash-ring.json",
+  "exports": [
+    "DashRing"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DashRing = () => {\n  return (\n    <svg className=\"w-12 h-12\" viewBox=\"0 0 50 50\">\n      <motion.circle\n        cx=\"25\" cy=\"25\" r=\"20\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none\"\n        strokeWidth=\"3\"\n        strokeDasharray=\"8 8\"\n        animate={{ rotate: 360 }}\n        style={{ transformOrigin: 'center' }}\n        transition={{ duration: 4, repeat: Infinity, ease: \"linear\" }}\n      />\n    </svg>\n  );\n};\n"
 }

package/registry/dashed-spiral.json

@@ -1,8 +1,17 @@
 {
   "id": "dashed-spiral",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "dashed-spiral.tsx",
+  "sourcePath": "ui/loading/dashed-spiral.tsx",
+  "registryFile": "dashed-spiral.json",
+  "exports": [
+    "DashedSpiral"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DashedSpiral = () => (\n  <motion.div\n    className=\"w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700 rounded-full border-dashed\"\n    animate={{ rotate: 360, scale: [1, 1.1, 1] }}\n    transition={{ duration: 4, repeat: Infinity, ease: \"linear\" }}\n  />\n);\n"
 }

package/registry/date-position-selector.json

@@ -0,0 +1,18 @@
+{
+  "id": "date-position-selector",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "date-position-selector.tsx",
+  "sourcePath": "components/css-animations/yui-components/YuiUiKit1.tsx",
+  "registryFile": "date-position-selector.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/yui-components/YuiUiKit1.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  ChevronDown,\n  ExternalLink,\n  Plus,\n  Minus,\n  Sun,\n  Moon,\n  X,\n  ChevronLeft,\n  ChevronRight\n} from \"lucide-react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DatePositionSelector({ theme = \"dark\" }) {\n  const [selectedDay, setSelectedDay] = useState(\"25th\");\n  const days = [\"24th\", \"25th\", \"26th\"];\n  return /* @__PURE__ */ jsx(\"div\", { className: `flex items-center gap-2 p-1.5 rounded-full border shadow-inner ${theme === \"dark\" ? \"bg-[#181818] border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: days.map((day) => {\n    const isSelected = selectedDay === day;\n    return /* @__PURE__ */ jsxs(\n      motion.button,\n      {\n        whileTap: { scale: 0.9 },\n        onClick: () => setSelectedDay(day),\n        className: \"relative px-3.5 py-1.5 rounded-full text-xs font-semibold cursor-pointer border-0 bg-transparent\",\n        children: [\n          isSelected && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              layoutId: \"day-pill\",\n              transition: { type: \"spring\", bounce: 0.2, duration: 0.4 },\n              className: `absolute inset-0 rounded-full shadow-md ${theme === \"dark\" ? \"bg-neutral-200\" : \"bg-neutral-900\"}`\n            }\n          ),\n          /* @__PURE__ */ jsx(\"span\", { className: `relative z-10 ${isSelected ? theme === \"dark\" ? \"text-neutral-900 font-bold\" : \"text-white font-bold\" : theme === \"dark\" ? \"text-neutral-500 hover:text-white\" : \"text-neutral-400 hover:text-black\"}`, children: day })\n        ]\n      },\n      day\n    );\n  }) });\n}\n\n// catalog/registry-bindings/date-position-selector.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(DatePositionSelector, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/dia-text-reveal.json

@@ -0,0 +1,19 @@
+{
+  "id": "dia-text-reveal",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "dia-text-reveal.tsx",
+  "registryFile": "dia-text-reveal.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './dia-text-reveal';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\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// dia-text-reveal.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-dia\", \"label\": \"Dia Text Reveal\", \"interactionType\": \"dia-text-reveal\", \"description\": \"Striking diagonal text reveal with mask & blur.\", \"cliCommand\": \"npx @mova-ui/react add dia-text-reveal\", \"category\": \"Featured\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/diamond-grid.json

@@ -1,8 +1,17 @@
 {
   "id": "diamond-grid",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "diamond-grid.tsx",
+  "sourcePath": "ui/loading/diamond-grid.tsx",
+  "registryFile": "diamond-grid.json",
+  "exports": [
+    "DiamondGrid"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DiamondGrid = () => {\n  return (\n    <div className=\"grid grid-cols-2 gap-2 rotate-45\">\n      {[0, 1, 2, 3].map((i) => (\n        <motion.div\n          key={i}\n          className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-sm\"\n          animate={{ scale: [1, 0.5, 1], opacity: [1, 0.3, 1] }}\n          transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
 }

package/registry/diamond-rotate-spring.json

@@ -1,8 +1,17 @@
 {
   "id": "diamond-rotate-spring",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "diamond-rotate-spring.tsx",
+  "sourcePath": "ui/loading/diamond-rotate-spring.tsx",
+  "registryFile": "diamond-rotate-spring.json",
+  "exports": [
+    "DiamondRotateSpring"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DiamondRotateSpring = () => (\n  <motion.div\n    className=\"w-8 h-8 bg-zinc-800 dark:bg-white rounded-sm origin-center\"\n    style={{ rotate: 45 }}\n    animate={{ rotate: [45, 135, 225, 315] }}\n    transition={{ duration: 2, repeat: Infinity, type: \"spring\", bounce: 0.4 }}\n  />\n);\n"
 }

package/registry/dislike-toggle.json

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

package/registry/dither-book.json

@@ -0,0 +1,19 @@
+{
+  "id": "dither-book",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "dither-book.tsx",
+  "registryFile": "dither-book.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "Apache-2.0",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './dither-book';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/dither-charts/DitherBook.tsx\nimport { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Settings2, X, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\n/**\n * @license\n * SPDX-License-Identifier: Apache-2.0\n */\nvar PAGES = [\n  { id: \"1\", title: \"SKETCH 01\", src: \"https://i.pinimg.com/736x/9a/63/20/9a632012291e49436b7695f50d8aa20e.jpg\" },\n  { id: \"2\", title: \"SKETCH 02\", src: \"https://i.pinimg.com/736x/0c/e1/6e/0ce16e5cfb36927669b7421c670035e0.jpg\" },\n  { id: \"3\", title: \"SKETCH 03\", src: \"https://i.pinimg.com/736x/63/16/b2/6316b20446639cd7f923882cc0d5b0a5.jpg\" },\n  { id: \"4\", title: \"SKETCH 04\", src: \"https://i.pinimg.com/736x/8b/36/b9/8b36b9f128dd0a65dc260e323ac5e333.jpg\" },\n  { id: \"5\", title: \"SKETCH 05\", src: \"https://i.pinimg.com/736x/10/b6/bf/10b6bfda558137d1fd3fe5089c36ad9c.jpg\" },\n  { id: \"6\", title: \"SKETCH 06\", src: \"https://i.pinimg.com/736x/f9/a7/d1/f9a7d15098baeb3ea28d7232f4ac86ea.jpg\" }\n];\nfunction Book({\n  pages = PAGES,\n  currentIndex,\n  isFlipping,\n  direction,\n  onFlipComplete,\n  settings,\n  isIntro,\n  onPrevPage,\n  onNextPage\n}) {\n  const [localIndex, setLocalIndex] = useState(currentIndex);\n  const [flipState, setFlipState] = useState({ active: false, from: 0, to: 0, dir: 1 });\n  const animDuration = isIntro ? 0.14 : 0.45;\n  const animEase = isIntro ? \"linear\" : [0.33, 1, 0.68, 1];\n  useEffect(() => {\n    if (currentIndex !== localIndex) {\n      setFlipState({\n        active: true,\n        from: localIndex,\n        to: currentIndex,\n        dir: direction\n      });\n    }\n  }, [currentIndex, localIndex, direction]);\n  const handleAnimationComplete = () => {\n    setLocalIndex(flipState.to);\n    setFlipState({ active: false, from: flipState.to, to: flipState.to, dir: 1 });\n    if (onFlipComplete) onFlipComplete();\n  };\n  const getIndex = (index) => (index % pages.length + pages.length) % pages.length;\n  const PaperTexture = () => /* @__PURE__ */ jsx(\n    \"div\",\n    {\n      className: \"absolute inset-0 pointer-events-none opacity-40 mix-blend-multiply\",\n      style: { backgroundImage: 'url(\"https://www.transparenttextures.com/patterns/cream-paper.png\")' }\n    }\n  );\n  const PageContent = ({ index }) => /* @__PURE__ */ jsxs(Fragment, { children: [\n    /* @__PURE__ */ jsx(\"div\", { className: \"absolute inset-0\", style: { backgroundColor: settings.paperColor } }),\n    /* @__PURE__ */ jsx(\"div\", { className: \"absolute inset-0 flex items-center justify-center pointer-events-none\", style: { padding: `${settings.padding}px` }, children: /* @__PURE__ */ jsx(\n      \"div\",\n      {\n        className: \"w-full h-full bg-cover bg-center bg-no-repeat shadow-inner\",\n        style: {\n          backgroundImage: `url(${pages[getIndex(index)].src})`,\n          borderRadius: `${settings.imageRadius}px`,\n          boxShadow: `0 4px ${settings.shadowIntensity}px rgba(0,0,0,0.15)`\n        }\n      }\n    ) }),\n    /* @__PURE__ */ jsx(PaperTexture, {})\n  ] });\n  const creaseLeft = \"absolute inset-y-0 right-0 w-12 pointer-events-none mix-blend-multiply z-20\";\n  const creaseRight = \"absolute inset-y-0 left-0 w-12 pointer-events-none mix-blend-multiply z-20\";\n  const creaseLeftStyle = {\n    background: `linear-gradient(to left, rgba(0,0,0,${settings.creaseOpacity / 100}), rgba(0,0,0,${settings.creaseOpacity / 400}), transparent)`,\n    boxShadow: `inset -4px 0 10px rgba(0,0,0,0.1)`\n  };\n  const creaseRightStyle = {\n    background: `linear-gradient(to right, rgba(0,0,0,${settings.creaseOpacity / 100}), rgba(0,0,0,${settings.creaseOpacity / 400}), transparent)`,\n    boxShadow: `inset 4px 0 10px rgba(0,0,0,0.1)`\n  };\n  const leftIndex = flipState.active ? flipState.dir === 1 ? flipState.from - 1 : flipState.to - 1 : localIndex - 1;\n  const rightIndex = flipState.active ? flipState.dir === 1 ? flipState.to : flipState.from : localIndex;\n  const frontIndex = flipState.dir === 1 ? flipState.from : flipState.to;\n  const backIndex = flipState.dir === 1 ? flipState.to - 1 : flipState.from - 1;\n  return /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full max-w-lg aspect-[16/10] mx-auto perspective-[2400px] select-none\", children: /* @__PURE__ */ jsxs(\n    motion.div,\n    {\n      className: \"w-full h-full relative shadow-xl rounded-md\",\n      initial: { rotateX: 12, rotateY: -10, rotateZ: -2, scale: 0.95 },\n      animate: { rotateX: 6, rotateY: -4, rotateZ: 0, scale: 1 },\n      transition: { duration: 1.2, ease: \"easeOut\" },\n      style: { transformStyle: \"preserve-3d\" },\n      children: [\n        /* @__PURE__ */ jsxs(\n          \"div\",\n          {\n            onClick: onPrevPage,\n            className: \"absolute top-0 left-0 w-1/2 h-full overflow-hidden rounded-l-md border-y border-l border-r border-black/10 shadow-[2px_0_15px_rgba(0,0,0,0.2)] cursor-pointer group\",\n            title: \"Click to turn page back\",\n            children: [\n              /* @__PURE__ */ jsx(PageContent, { index: leftIndex }),\n              /* @__PURE__ */ jsx(\"div\", { className: creaseLeft, style: creaseLeftStyle }),\n              /* @__PURE__ */ jsx(\"div\", { className: \"absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-start pl-3\", children: /* @__PURE__ */ jsx(ChevronLeft, { className: \"w-5 h-5 text-black/50 opacity-0 group-hover:opacity-100 transition-opacity\" }) })\n            ]\n          }\n        ),\n        /* @__PURE__ */ jsxs(\n          \"div\",\n          {\n            onClick: onNextPage,\n            className: \"absolute top-0 right-0 w-1/2 h-full overflow-hidden rounded-r-md border-y border-r border-l border-black/10 shadow-[-2px_0_15px_rgba(0,0,0,0.2)] cursor-pointer group\",\n            title: \"Click to turn page forward\",\n            children: [\n              /* @__PURE__ */ jsx(PageContent, { index: rightIndex }),\n              /* @__PURE__ */ jsx(\"div\", { className: creaseRight, style: creaseRightStyle }),\n              /* @__PURE__ */ jsx(\"div\", { className: \"absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-end pr-3\", children: /* @__PURE__ */ jsx(ChevronRight, { className: \"w-5 h-5 text-black/50 opacity-0 group-hover:opacity-100 transition-opacity\" }) })\n            ]\n          }\n        ),\n        flipState.active && /* @__PURE__ */ jsxs(\n          motion.div,\n          {\n            className: \"absolute top-0 w-1/2 h-full origin-left bg-[#fcfbf9] z-30\",\n            style: {\n              left: \"50%\",\n              transformStyle: \"preserve-3d\"\n            },\n            initial: { rotateY: flipState.dir === 1 ? 0 : -180 },\n            animate: { rotateY: flipState.dir === 1 ? -180 : 0 },\n            transition: { duration: animDuration, ease: animEase },\n            onAnimationComplete: handleAnimationComplete,\n            children: [\n              /* @__PURE__ */ jsxs(\"div\", { className: \"absolute inset-0 backface-hidden overflow-hidden rounded-r-md border-y border-r border-l border-black/10\", style: { backfaceVisibility: \"hidden\" }, children: [\n                /* @__PURE__ */ jsx(PageContent, { index: frontIndex }),\n                /* @__PURE__ */ jsx(\"div\", { className: creaseRight, style: creaseRightStyle }),\n                /* @__PURE__ */ jsx(\n                  motion.div,\n                  {\n                    className: \"absolute inset-0 bg-gradient-to-r from-transparent to-black\",\n                    initial: { opacity: flipState.dir === 1 ? 0 : 0.4 },\n                    animate: { opacity: flipState.dir === 1 ? 0.4 : 0 },\n                    transition: { duration: animDuration, ease: animEase }\n                  }\n                )\n              ] }),\n              /* @__PURE__ */ jsxs(\n                \"div\",\n                {\n                  className: \"absolute inset-0 backface-hidden overflow-hidden rounded-l-md border-y border-l border-r border-black/10\",\n                  style: {\n                    transform: \"rotateY(180deg)\",\n                    backfaceVisibility: \"hidden\"\n                  },\n                  children: [\n                    /* @__PURE__ */ jsx(PageContent, { index: backIndex }),\n                    /* @__PURE__ */ jsx(\"div\", { className: creaseLeft, style: creaseLeftStyle }),\n                    /* @__PURE__ */ jsx(\n                      motion.div,\n                      {\n                        className: \"absolute inset-0 bg-gradient-to-l from-transparent to-black\",\n                        initial: { opacity: flipState.dir === 1 ? 0.4 : 0 },\n                        animate: { opacity: flipState.dir === 1 ? 0 : 0.4 },\n                        transition: { duration: animDuration, ease: animEase }\n                      }\n                    )\n                  ]\n                }\n              )\n            ]\n          }\n        )\n      ]\n    }\n  ) });\n}\nfunction DitherBook({ theme = \"dark\", compact = false }) {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [direction, setDirection] = useState(1);\n  const [isFlipping, setIsFlipping] = useState(false);\n  const [showSettings, setShowSettings] = useState(false);\n  const [introFlips, setIntroFlips] = useState(10);\n  const isIntro = introFlips > 0;\n  useEffect(() => {\n    if (introFlips > 0 && !isFlipping) {\n      const timer = setTimeout(() => {\n        setDirection(1);\n        setIsFlipping(true);\n        setCurrentIndex((i) => (i + 1) % PAGES.length);\n        setIntroFlips((f) => f - 1);\n      }, introFlips === 10 ? 300 : 70);\n      return () => clearTimeout(timer);\n    }\n  }, [introFlips, isFlipping]);\n  const [settings, setSettings] = useState({\n    padding: compact ? 6 : 10,\n    imageRadius: compact ? 8 : 20,\n    creaseOpacity: 11,\n    paperColor: \"#fcfbf9\",\n    shadowIntensity: compact ? 10 : 24\n  });\n  const next = () => {\n    if (!isFlipping) {\n      setDirection(1);\n      setIsFlipping(true);\n      setCurrentIndex((i) => (i + 1) % PAGES.length);\n    }\n  };\n  const prev = () => {\n    if (!isFlipping) {\n      setDirection(-1);\n      setIsFlipping(true);\n      setCurrentIndex((i) => (i - 1 + PAGES.length) % PAGES.length);\n    }\n  };\n  const handleFlipComplete = () => {\n    setIsFlipping(false);\n  };\n  return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full flex flex-col items-center justify-center relative p-1 sm:p-2 font-sans\", children: [\n    /* @__PURE__ */ jsx(\n      Book,\n      {\n        pages: PAGES,\n        currentIndex,\n        isFlipping,\n        direction,\n        onFlipComplete: handleFlipComplete,\n        settings,\n        isIntro,\n        onPrevPage: prev,\n        onNextPage: next\n      }\n    ),\n    /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between w-full max-w-lg mt-3 px-1\", children: [\n      /* @__PURE__ */ jsxs(\n        \"button\",\n        {\n          onClick: prev,\n          disabled: isFlipping,\n          className: `flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-medium transition-all cursor-pointer ${theme === \"dark\" ? \"bg-white/10 hover:bg-white/20 text-white\" : \"bg-neutral-200 hover:bg-neutral-300 text-black\"}`,\n          children: [\n            /* @__PURE__ */ jsx(ChevronLeft, { className: \"w-3.5 h-3.5\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Prev\" })\n          ]\n        }\n      ),\n      /* @__PURE__ */ jsx(\"span\", { className: `text-[11px] font-semibold tracking-widest uppercase ${theme === \"dark\" ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: PAGES[currentIndex].title }),\n      /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5\", children: [\n        /* @__PURE__ */ jsx(\n          \"button\",\n          {\n            onClick: () => setShowSettings(!showSettings),\n            className: `p-1.5 rounded-full transition-all cursor-pointer ${theme === \"dark\" ? \"bg-white/10 hover:bg-white/20 text-white\" : \"bg-neutral-200 hover:bg-neutral-300 text-black\"}`,\n            title: \"Book Settings\",\n            children: /* @__PURE__ */ jsx(Settings2, { className: \"w-3.5 h-3.5\" })\n          }\n        ),\n        /* @__PURE__ */ jsxs(\n          \"button\",\n          {\n            onClick: next,\n            disabled: isFlipping,\n            className: `flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-medium transition-all cursor-pointer ${theme === \"dark\" ? \"bg-white/10 hover:bg-white/20 text-white\" : \"bg-neutral-200 hover:bg-neutral-300 text-black\"}`,\n            children: [\n              /* @__PURE__ */ jsx(\"span\", { children: \"Next\" }),\n              /* @__PURE__ */ jsx(ChevronRight, { className: \"w-3.5 h-3.5\" })\n            ]\n          }\n        )\n      ] })\n    ] }),\n    /* @__PURE__ */ jsx(AnimatePresence, { children: showSettings && /* @__PURE__ */ jsxs(\n      motion.div,\n      {\n        initial: { opacity: 0, scale: 0.95 },\n        animate: { opacity: 1, scale: 1 },\n        exit: { opacity: 0, scale: 0.95 },\n        className: `mt-3 w-full max-w-sm rounded-xl p-4 shadow-xl border ${theme === \"dark\" ? \"bg-[#1e1e1e] border-white/15 text-white\" : \"bg-white border-neutral-200 text-black\"}`,\n        children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between mb-3\", children: [\n            /* @__PURE__ */ jsx(\"h4\", { className: \"text-[11px] font-bold uppercase tracking-wider text-neutral-400\", children: \"Book Controls\" }),\n            /* @__PURE__ */ jsx(\"button\", { onClick: () => setShowSettings(false), className: \"text-neutral-400 hover:text-white\", children: /* @__PURE__ */ jsx(X, { className: \"w-3.5 h-3.5\" }) })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-3 text-[11px]\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1\", children: [\n              /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between font-medium\", children: [\n                /* @__PURE__ */ jsx(\"span\", { children: \"Image Padding\" }),\n                /* @__PURE__ */ jsxs(\"span\", { children: [\n                  settings.padding,\n                  \"px\"\n                ] })\n              ] }),\n              /* @__PURE__ */ jsx(\n                \"input\",\n                {\n                  type: \"range\",\n                  min: \"0\",\n                  max: \"30\",\n                  value: settings.padding,\n                  onChange: (e) => setSettings({ ...settings, padding: parseInt(e.target.value) }),\n                  className: \"w-full cursor-pointer accent-white\"\n                }\n              )\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1\", children: [\n              /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between font-medium\", children: [\n                /* @__PURE__ */ jsx(\"span\", { children: \"Image Radius\" }),\n                /* @__PURE__ */ jsxs(\"span\", { children: [\n                  settings.imageRadius,\n                  \"px\"\n                ] })\n              ] }),\n              /* @__PURE__ */ jsx(\n                \"input\",\n                {\n                  type: \"range\",\n                  min: \"0\",\n                  max: \"40\",\n                  value: settings.imageRadius,\n                  onChange: (e) => setSettings({ ...settings, imageRadius: parseInt(e.target.value) }),\n                  className: \"w-full cursor-pointer accent-white\"\n                }\n              )\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1\", children: [\n              /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between font-medium\", children: [\n                /* @__PURE__ */ jsx(\"span\", { children: \"Crease Opacity\" }),\n                /* @__PURE__ */ jsxs(\"span\", { children: [\n                  settings.creaseOpacity,\n                  \"%\"\n                ] })\n              ] }),\n              /* @__PURE__ */ jsx(\n                \"input\",\n                {\n                  type: \"range\",\n                  min: \"0\",\n                  max: \"40\",\n                  value: settings.creaseOpacity,\n                  onChange: (e) => setSettings({ ...settings, creaseOpacity: parseInt(e.target.value) }),\n                  className: \"w-full cursor-pointer accent-white\"\n                }\n              )\n            ] })\n          ] })\n        ]\n      }\n    ) })\n  ] });\n}\nexport {\n  DitherBook as default\n};\n"
+}

package/registry/domino-cascade.json

@@ -0,0 +1,15 @@
+{
+  "id": "domino-cascade",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "domino-cascade.tsx",
+  "sourcePath": "components/css-animations/whimsical/WhimsicalVariations.tsx",
+  "registryFile": "domino-cascade.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/WhimsicalVariations.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/WhimsicalVariations.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DominoChain({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes domino_tip {\n          0%, 15% { transform: rotate(0deg); }\n          35%, 80% { transform: rotate(72deg); }\n          95%, 100% { transform: rotate(0deg); }\n        }\n        .domino-tile {\n          transform-origin: bottom right;\n          animation: domino_tip 3s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute inset-0 flex items-center justify-center\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-[130px] h-[60px] flex items-end justify-between px-2\", children: [\n          [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx(\n            \"div\",\n            {\n              className: `w-[10px] h-[36px] rounded-[3px] domino-tile ${theme === \"dark\" ? i % 2 === 0 ? \"bg-blue-400\" : \"bg-neutral-300\" : i % 2 === 0 ? \"bg-blue-600\" : \"bg-neutral-700\"}`,\n              style: { animationDelay: `${i * 0.12}s` }\n            },\n            i\n          )),\n          /* @__PURE__ */ jsx(\"div\", { className: `absolute bottom-0 left-0 right-0 h-[3px] rounded-full ${theme === \"dark\" ? \"bg-neutral-700\" : \"bg-neutral-300\"}` })\n        ] }, activeKey) })\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/domino-cascade.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(DominoChain, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/dot-spinner.json

@@ -1,8 +1,17 @@
 {
   "id": "dot-spinner",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "dot-spinner.tsx",
+  "sourcePath": "ui/loading/dot-spinner.tsx",
+  "registryFile": "dot-spinner.json",
+  "exports": [
+    "DotSpinner"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DotSpinner = () => {\n  return (\n    <div className=\"relative w-10 h-10\">\n      {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (\n        <motion.div\n          key={i}\n          className=\"absolute top-0 left-1/2 w-2 h-2 bg-zinc-800 dark:bg-white rounded-full -ml-1 origin-[4px_20px]\"\n          style={{ rotate: i * 45 }}\n          animate={{ opacity: [1, 0.2] }}\n          transition={{ duration: 1, repeat: Infinity, delay: i * 0.125, ease: \"linear\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
 }

package/registry/dots-ring.json

@@ -1,8 +1,17 @@
 {
   "id": "dots-ring",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "dots-ring.tsx",
+  "sourcePath": "ui/loading/dots-ring.tsx",
+  "registryFile": "dots-ring.json",
+  "exports": [
+    "DotsRing"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DotsRing = () => {\n  return (\n    <div className=\"relative w-12 h-12\">\n      {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (\n        <motion.div\n          key={i}\n          className=\"absolute top-0 left-1/2 w-2 h-2 bg-zinc-800 dark:bg-white rounded-full -ml-1 origin-[4px_24px]\"\n          style={{ rotate: i * 45 }}\n          animate={{ scale: [1, 0.5, 1], opacity: [1, 0.3, 1] }}\n          transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.15, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
 }

package/registry/double-bounce-toggle.json

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

package/registry/double-ring.json

@@ -1,8 +1,17 @@
 {
   "id": "double-ring",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "double-ring.tsx",
+  "sourcePath": "ui/loading/double-ring.tsx",
+  "registryFile": "double-ring.json",
+  "exports": [
+    "DoubleRing"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DoubleRing = () => {\n  return (\n    <div className=\"relative w-10 h-10 flex items-center justify-center\">\n      <motion.div\n        className=\"absolute w-10 h-10 border-2 border-zinc-200 dark:border-zinc-800 rounded-full border-t-zinc-800 dark:border-t-white\"\n        animate={{ rotate: 360 }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"linear\" }}\n      />\n      <motion.div\n        className=\"absolute w-6 h-6 border-2 border-zinc-200 dark:border-zinc-800 rounded-full border-b-zinc-800 dark:border-b-white\"\n        animate={{ rotate: -360 }}\n        transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n      />\n    </div>\n  );\n};\n"
 }

package/registry/download-icons.json

@@ -0,0 +1,18 @@
+{
+  "id": "download-icons",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "download-icons.tsx",
+  "sourcePath": "components/css-animations/yui-components/YuiUiKit2.tsx",
+  "registryFile": "download-icons.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/yui-components/YuiUiKit2.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  Edit3,\n  Trash2,\n  HelpCircle,\n  Download,\n  Check,\n  Layers,\n  Plus,\n  Minus,\n  Grid,\n  List,\n  MoreHorizontal,\n  LayoutGrid,\n  LayoutList\n} from \"lucide-react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction DownloadAnimatedIcons({ theme = \"dark\" }) {\n  const [isDownloading, setIsDownloading] = useState(false);\n  return /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-4\", children: [\n    /* @__PURE__ */ jsx(\n      motion.button,\n      {\n        whileHover: { scale: 1.08 },\n        whileTap: { scale: 0.9 },\n        onClick: () => {\n          setIsDownloading(true);\n          setTimeout(() => setIsDownloading(false), 2e3);\n        },\n        className: `w-11 h-11 rounded-2xl border flex items-center justify-center shadow-md cursor-pointer ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n        children: /* @__PURE__ */ jsx(\n          motion.div,\n          {\n            animate: isDownloading ? { y: [0, 4, 0] } : {},\n            transition: { repeat: Infinity, duration: 0.6 },\n            children: /* @__PURE__ */ jsx(Download, { className: \"w-5 h-5 text-[#0a84ff]\" })\n          }\n        )\n      }\n    ),\n    /* @__PURE__ */ jsx(\n      motion.button,\n      {\n        whileHover: { scale: 1.08 },\n        whileTap: { scale: 0.9 },\n        className: `w-11 h-11 rounded-2xl border flex items-center justify-center shadow-md cursor-pointer ${isDownloading ? \"bg-emerald-500/20 border-emerald-500/40 text-emerald-400\" : theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-neutral-300\" : \"bg-white border-neutral-200 text-neutral-700\"}`,\n        children: isDownloading ? /* @__PURE__ */ jsx(Check, { className: \"w-5 h-5\" }) : /* @__PURE__ */ jsx(Download, { className: \"w-5 h-5\" })\n      }\n    )\n  ] });\n}\n\n// catalog/registry-bindings/download-icons.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(DownloadAnimatedIcons, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/drop-dot.json

@@ -1,8 +1,17 @@
 {
   "id": "drop-dot",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "drop-dot.tsx",
+  "sourcePath": "ui/loading/drop-dot.tsx",
+  "registryFile": "drop-dot.json",
+  "exports": [
+    "DropDot"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const DropDot = () => (\n  <div className=\"relative w-6 h-12 flex flex-col items-center\">\n    <motion.div\n      className=\"w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full absolute top-0 z-10\"\n      animate={{ y: [0, 24, 0], scaleY: [1, 1.2, 1], scaleX: [1, 0.8, 1] }}\n      transition={{ duration: 1, repeat: Infinity, ease: \"circIn\" }}\n    />\n    <div className=\"w-4 h-1 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute bottom-2 blur-[1px]\" />\n  </div>\n);\n"
 }