@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/toggles/AnimatedToggle.js

@@ -0,0 +1,243 @@
+"use client";
+import {
+  useWebHaptics
+} from "../../../catalog-chunks/chunk-EC4R54F3.js";
+
+// .generated/catalog/components/toggles/AnimatedToggle.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Sun, Moon, Lock, Unlock, Bookmark, Heart, ThumbsDown, Repeat } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AnimatedToggle = ({ config, theme }) => {
+  const [isOn, setIsOn] = useState(false);
+  const [isInit, setIsInit] = useState(false);
+  const [pillTab, setPillTab] = useState("Daily");
+  const [likeCount, setLikeCount] = useState(42);
+  const [repostCount, setRepostCount] = useState(18);
+  const { trigger: triggerHaptic } = useWebHaptics();
+  const isDark = theme === "dark";
+  const handleToggle = () => {
+    if (!isInit) setIsInit(true);
+    triggerHaptic("medium");
+    setIsOn(!isOn);
+  };
+  switch (config.interactionType) {
+    case "double-bounce-toggle":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          "data-on": isOn ? "true" : "false",
+          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"}`,
+          children: /* @__PURE__ */ jsx("span", { className: "t-toggle-thumb block w-6 h-6 bg-white rounded-full shadow-md pointer-events-none" })
+        }
+      );
+    case "solid-switch":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          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"}`,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { x: isOn ? 24 : 0 },
+              transition: { duration: 0.15, ease: "easeOut" },
+              className: `w-6 h-6 rounded-full shadow-sm ${isOn ? isDark ? "bg-black" : "bg-white" : isDark ? "bg-white" : "bg-black"}`
+            }
+          )
+        }
+      );
+    case "rectangle-toggle":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          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"}`,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { x: isOn ? 24 : 0 },
+              transition: { type: "spring", stiffness: 500, damping: 30 },
+              className: "w-5 h-5 bg-white rounded-sm shadow-md"
+            }
+          )
+        }
+      );
+    case "circle-toggle":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          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"}`,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { x: isOn ? 28 : 0 },
+              transition: { type: "spring", stiffness: 450, damping: 25 },
+              className: "w-7 h-7 bg-white rounded-full shadow-md"
+            }
+          )
+        }
+      );
+    case "bookmark-toggle":
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleToggle,
+          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"}`,
+          children: [
+            /* @__PURE__ */ jsx(motion.div, { animate: { scale: isOn ? [1, 1.3, 1] : 1 }, children: /* @__PURE__ */ jsx(Bookmark, { className: `w-4 h-4 ${isOn ? "fill-current" : ""}` }) }),
+            /* @__PURE__ */ jsx("span", { children: isOn ? "Saved" : "Bookmark" })
+          ]
+        }
+      );
+    case "like-toggle":
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            triggerHaptic("success");
+            setLikeCount((prev) => isOn ? prev - 1 : prev + 1);
+            setIsOn(!isOn);
+          },
+          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"}`,
+          children: [
+            /* @__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" : ""}` }) }),
+            /* @__PURE__ */ jsx("span", { children: likeCount })
+          ]
+        }
+      );
+    case "dislike-toggle":
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleToggle,
+          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"}`,
+          children: [
+            /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isOn ? [0, -15, 0] : 0 }, children: /* @__PURE__ */ jsx(ThumbsDown, { className: `w-4 h-4 ${isOn ? "fill-current" : ""}` }) }),
+            /* @__PURE__ */ jsx("span", { children: "Dislike" })
+          ]
+        }
+      );
+    case "repost-toggle":
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            triggerHaptic("medium");
+            setRepostCount((prev) => isOn ? prev - 1 : prev + 1);
+            setIsOn(!isOn);
+          },
+          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"}`,
+          children: [
+            /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isOn ? 180 : 0 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ jsx(Repeat, { className: "w-4 h-4" }) }),
+            /* @__PURE__ */ jsx("span", { children: repostCount })
+          ]
+        }
+      );
+    case "pill-tabs":
+      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(
+        "button",
+        {
+          onClick: () => {
+            triggerHaptic("light");
+            setPillTab(tab);
+          },
+          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"}`,
+          children: [
+            pillTab === tab && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                layoutId: "pill-tabs-indicator",
+                transition: { type: "spring", stiffness: 500, damping: 30 },
+                className: `absolute inset-0 rounded-full -z-10 shadow-sm ${isDark ? "bg-neutral-800 border border-white/10" : "bg-white"}`
+              }
+            ),
+            tab
+          ]
+        },
+        tab
+      )) });
+    case "morph-toggle":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          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"}`,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { x: isOn ? 28 : 0, rotate: isOn ? 180 : 0 },
+              transition: { type: "spring", stiffness: 400, damping: 25 },
+              className: "w-7 h-7 bg-white rounded-full shadow-md flex items-center justify-center text-neutral-800",
+              children: isOn ? /* @__PURE__ */ jsx(Unlock, { className: "w-4 h-4 text-indigo-600" }) : /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4 text-neutral-600" })
+            }
+          )
+        }
+      );
+    case "checkmark-draw":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          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"}`,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { x: isOn ? 28 : 0 },
+              transition: { type: "spring", stiffness: 500, damping: 28 },
+              className: "w-7 h-7 bg-white rounded-full shadow-md flex items-center justify-center",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOn && /* @__PURE__ */ jsx(
+                motion.svg,
+                {
+                  initial: { scale: 0, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0, opacity: 0 },
+                  className: "w-4 h-4 text-emerald-600",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "3.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx(
+                    motion.path,
+                    {
+                      d: "M20 6L9 17l-5-5",
+                      initial: { pathLength: 0 },
+                      animate: { pathLength: 1 },
+                      transition: { duration: 0.25 }
+                    }
+                  )
+                },
+                "check"
+              ) })
+            }
+          )
+        }
+      );
+    case "theme-toggle":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          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"}`,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { x: isOn ? 28 : 0, rotate: isOn ? 360 : 0 },
+              transition: { type: "spring", stiffness: 350, damping: 22 },
+              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"}`,
+              children: isOn ? /* @__PURE__ */ jsx(Moon, { className: "w-4 h-4 fill-yellow-300" }) : /* @__PURE__ */ jsx(Sun, { className: "w-4 h-4 fill-white" })
+            }
+          )
+        }
+      );
+    default:
+      return null;
+  }
+};
+export {
+  AnimatedToggle
+};

package/dist/catalog/data/buttons.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type InteractionType = 'slide-arrow' | 'sparkle' | 'morph' | 'pulse' | 'rotate' | 'shake' | 'ring' | 'color-morph' | 'glare' | 'text-reveal' | 'magnetic' | 'expand-ring' | 'focus-blur';
+export interface ButtonConfig {
+    id: string;
+    label: string;
+    icon1: React.ElementType | string;
+    icon2?: React.ElementType;
+    interactionType: InteractionType;
+    hoverBg?: string;
+    icon1Color?: string;
+    icon2Color?: string;
+}
+export declare const AppleIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+export declare const buttonsData: ButtonConfig[];

package/dist/catalog/data/buttons.js

@@ -0,0 +1,94 @@
+"use client";
+
+// .generated/catalog/data/buttons.tsx
+import {
+  ArrowRight,
+  Github,
+  Star,
+  Cloud,
+  CloudUpload,
+  Copy,
+  Check,
+  Heart,
+  Link,
+  Send,
+  Play,
+  Pause,
+  Settings,
+  Trash2,
+  Bell,
+  BellRing,
+  Search,
+  X,
+  Moon,
+  Sun,
+  Mic,
+  MicOff,
+  Video,
+  VideoOff,
+  Volume2,
+  VolumeX,
+  Lock,
+  Unlock,
+  Folder,
+  FolderOpen,
+  Eye,
+  EyeOff,
+  Bookmark,
+  ThumbsUp,
+  Download,
+  Upload,
+  User,
+  UserCheck,
+  Pen,
+  Wifi,
+  WifiOff,
+  Battery,
+  BatteryCharging,
+  Maximize,
+  Minimize,
+  RefreshCw
+} from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var AppleIcon = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 384 512", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" }) });
+var buttonsData = [
+  { id: "1", label: "Download for Mac", icon1: AppleIcon, icon2: ArrowRight, interactionType: "slide-arrow", hoverBg: "#0a0a0a" },
+  { id: "2", label: "Star on GitHub", icon1: Github, icon2: Star, interactionType: "sparkle", hoverBg: "#1f1f1f", icon2Color: "text-yellow-400" },
+  { id: "3", label: "Deploy App", icon1: Cloud, icon2: CloudUpload, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-blue-400" },
+  { id: "4", label: "Copy Hash", icon1: Copy, icon2: Check, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-emerald-400" },
+  { id: "5", label: "Favorite", icon1: Heart, interactionType: "pulse", hoverBg: "#1f1f1f", icon1Color: "text-pink-500" },
+  { id: "6", label: "Share", icon1: Link, icon2: Send, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-blue-400" },
+  { id: "7", label: "Preview", icon1: Play, icon2: Pause, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-green-400" },
+  { id: "8", label: "Settings", icon1: Settings, interactionType: "rotate", hoverBg: "#1f1f1f" },
+  { id: "9", label: "Delete", icon1: Trash2, interactionType: "shake", hoverBg: "#1f1f1f", icon1Color: "text-red-400" },
+  { id: "10", label: "Subscribe", icon1: Bell, icon2: BellRing, interactionType: "ring", hoverBg: "#1f1f1f", icon2Color: "text-orange-400" },
+  { id: "11", label: "Search", icon1: Search, icon2: X, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-white" },
+  { id: "12", label: "Theme", icon1: Moon, icon2: Sun, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-yellow-400" },
+  { id: "13", label: "Microphone", icon1: Mic, icon2: MicOff, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-red-400" },
+  { id: "14", label: "Camera", icon1: Video, icon2: VideoOff, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-red-400" },
+  { id: "15", label: "Volume", icon1: Volume2, icon2: VolumeX, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-neutral-500" },
+  { id: "16", label: "Lock", icon1: Lock, icon2: Unlock, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-emerald-400" },
+  { id: "17", label: "Directory", icon1: Folder, icon2: FolderOpen, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-blue-400" },
+  { id: "18", label: "Visibility", icon1: Eye, icon2: EyeOff, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-neutral-500" },
+  { id: "19", label: "Save Later", icon1: Bookmark, icon2: Bookmark, interactionType: "color-morph", hoverBg: "#1f1f1f", icon2Color: "text-blue-400 fill-blue-400" },
+  { id: "20", label: "Like", icon1: ThumbsUp, icon2: ThumbsUp, interactionType: "color-morph", hoverBg: "#1f1f1f", icon2Color: "text-blue-500 fill-blue-500" },
+  { id: "21", label: "Download", icon1: Download, icon2: Check, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-emerald-400" },
+  { id: "22", label: "Upload", icon1: Upload, icon2: Check, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-blue-400" },
+  { id: "23", label: "Account", icon1: User, icon2: UserCheck, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-emerald-400" },
+  { id: "24", label: "Submit", icon1: Send, icon2: Check, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-emerald-400" },
+  { id: "25", label: "Edit", icon1: Pen, icon2: Check, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-emerald-400" },
+  { id: "26", label: "Network", icon1: Wifi, icon2: WifiOff, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-red-400" },
+  { id: "27", label: "Power", icon1: Battery, icon2: BatteryCharging, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-emerald-400" },
+  { id: "28", label: "Expand", icon1: Maximize, icon2: Minimize, interactionType: "morph", hoverBg: "#1f1f1f", icon2Color: "text-white" },
+  { id: "29", label: "Reload", icon1: RefreshCw, interactionType: "rotate", hoverBg: "#1f1f1f" },
+  { id: "30", label: "Favorite", icon1: Star, icon2: Star, interactionType: "color-morph", hoverBg: "#1f1f1f", icon2Color: "text-yellow-400 fill-yellow-400" },
+  { id: "31", label: "Glare Shine", icon1: Star, interactionType: "glare", hoverBg: "#1f1f1f" },
+  { id: "32", label: "Text Reveal", icon1: ArrowRight, interactionType: "text-reveal", hoverBg: "#1f1f1f" },
+  { id: "33", label: "Magnetic Field", icon1: Github, interactionType: "magnetic", hoverBg: "#1f1f1f" },
+  { id: "34", label: "Expand Ring", icon1: Link, interactionType: "expand-ring", hoverBg: "#1f1f1f" },
+  { id: "35", label: "Focus Blur Links", icon1: Link, interactionType: "focus-blur", hoverBg: "#1f1f1f" }
+];
+export {
+  AppleIcon,
+  buttonsData
+};

package/dist/catalog/data/ditherCharts.d.ts

@@ -0,0 +1,12 @@
+export interface DitherChartItem {
+    id: string;
+    label: string;
+    kebabName: string;
+    category: string;
+    description: string;
+    cliCommand: string;
+    codeSnippet: string;
+}
+export type SimpleCompItem = DitherChartItem;
+export declare const ditherChartsData: DitherChartItem[];
+export declare const simpleCompData: DitherChartItem[];

package/dist/catalog/data/ditherCharts.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  ditherChartsData,
+  simpleCompData
+} from "../../catalog-chunks/chunk-OWYADZUR.js";
+import "../../catalog-chunks/chunk-VMGI6CMO.js";
+import "../../catalog-chunks/chunk-FXF53HPE.js";
+export {
+  ditherChartsData,
+  simpleCompData
+};

package/dist/catalog/data/formElements.d.ts

@@ -0,0 +1,9 @@
+export type FormInteractionType = 'floating-label-input' | 'input-focus-glow' | 'password-toggle' | 'search-expand' | 'checkbox-draw' | 'radio-scale' | 'error-shake' | 'success-check' | 'select-dropdown' | 'multi-select-chips' | 'textarea-auto-grow' | 'otp-input' | 'file-upload-dropzone' | 'range-slider' | 'form-submit-button';
+export interface FormElementConfig {
+    id: string;
+    label: string;
+    interactionType: FormInteractionType;
+    description: string;
+    cliCommand: string;
+}
+export declare const formElementsData: FormElementConfig[];

package/dist/catalog/data/formElements.js

@@ -0,0 +1,117 @@
+"use client";
+import {
+  getInstallCommand
+} from "../../catalog-chunks/chunk-VMGI6CMO.js";
+import "../../catalog-chunks/chunk-FXF53HPE.js";
+
+// .generated/catalog/data/formElements.ts
+var formElementsData = [
+  {
+    id: "frm1",
+    label: "Floating Label Input",
+    interactionType: "floating-label-input",
+    description: "Label floats up cleanly on focus with spring displacement.",
+    cliCommand: getInstallCommand("floating-label-input")
+  },
+  {
+    id: "frm2",
+    label: "Input Focus Glow",
+    interactionType: "input-focus-glow",
+    description: "Soft animated halo glow expands on input field focus.",
+    cliCommand: getInstallCommand("input-focus-glow")
+  },
+  {
+    id: "frm3",
+    label: "Password Toggle",
+    interactionType: "password-toggle",
+    description: "Eye icon morphs smoothly to reveal or hide password characters.",
+    cliCommand: getInstallCommand("password-toggle")
+  },
+  {
+    id: "frm4",
+    label: "Search Expand",
+    interactionType: "search-expand",
+    description: "Minimal search pill expands laterally on focus with icon shift.",
+    cliCommand: getInstallCommand("search-expand")
+  },
+  {
+    id: "frm5",
+    label: "Checkbox Path Draw",
+    interactionType: "checkbox-draw",
+    description: "Custom checkbox with animated SVG checkmark stroke on select.",
+    cliCommand: getInstallCommand("checkbox-draw")
+  },
+  {
+    id: "frm6",
+    label: "Radio Scale",
+    interactionType: "radio-scale",
+    description: "Radio button scales with spring physics and fills inner core.",
+    cliCommand: getInstallCommand("radio-scale")
+  },
+  {
+    id: "frm7",
+    label: "Error Shake",
+    interactionType: "error-shake",
+    description: "Horizontal elastic shake vibration on input validation failure.",
+    cliCommand: getInstallCommand("error-shake")
+  },
+  {
+    id: "frm8",
+    label: "Success Check Draw",
+    interactionType: "success-check",
+    description: "Green checkmark path draws upon successful field validation.",
+    cliCommand: getInstallCommand("success-check")
+  },
+  {
+    id: "frm9",
+    label: "Select Dropdown",
+    interactionType: "select-dropdown",
+    description: "Custom select menu expands with origin-aware scale & blur fade.",
+    cliCommand: getInstallCommand("select-dropdown")
+  },
+  {
+    id: "frm10",
+    label: "Multi-Select Chips",
+    interactionType: "multi-select-chips",
+    description: "Selected tag items pop into view as dismissible animated chips.",
+    cliCommand: getInstallCommand("multi-select-chips")
+  },
+  {
+    id: "frm11",
+    label: "Textarea Auto-Grow",
+    interactionType: "textarea-auto-grow",
+    description: "Textarea container height expands smoothly with input content length.",
+    cliCommand: getInstallCommand("textarea-auto-grow")
+  },
+  {
+    id: "frm12",
+    label: "OTP 4-Digit Input",
+    interactionType: "otp-input",
+    description: "Character boxes with automatic focus advance & spring highlight.",
+    cliCommand: getInstallCommand("otp-input")
+  },
+  {
+    id: "frm13",
+    label: "File Upload Dropzone",
+    interactionType: "file-upload-dropzone",
+    description: "Drag-over pulsing border ring with upload arrow icon animation.",
+    cliCommand: getInstallCommand("file-upload-dropzone")
+  },
+  {
+    id: "frm14",
+    label: "Spring Range Slider",
+    interactionType: "range-slider",
+    description: "Slider thumb with spring bounce and floating value tooltip pop.",
+    cliCommand: getInstallCommand("range-slider")
+  },
+  {
+    id: "frm15",
+    label: "Form Submit Morph",
+    interactionType: "form-submit-button",
+    description: "Submit button morphs into loading spinner then checkmark state.",
+    cliCommand: getInstallCommand("form-submit-button")
+  }
+];
+export {
+  formElementsData
+};

package/dist/catalog/data/installCommand.d.ts

@@ -0,0 +1,3 @@
+export declare const COPY_SOURCE_GUIDANCE = "Copy the source from the @mova-ui/react/catalog/... export listed in registry/manifest.json. This example is not available as an Mova CLI component.";
+/** Only advertise install commands for components in the published registry. */
+export declare function getInstallCommand(id: string): string;

package/dist/catalog/data/installCommand.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  COPY_SOURCE_GUIDANCE,
+  getInstallCommand
+} from "../../catalog-chunks/chunk-VMGI6CMO.js";
+import "../../catalog-chunks/chunk-FXF53HPE.js";
+export {
+  COPY_SOURCE_GUIDANCE,
+  getInstallCommand
+};

package/dist/catalog/data/metrics.d.ts

@@ -0,0 +1,10 @@
+export type MetricInteractionType = 'cacheable-bandwidth-cost' | 'sales-analytics-dual-bars' | 'sales-target-segmented-arc' | 'sales-overview-radial-dashboard' | 'users-growth-pill-progress' | 'overview-bar-scrubber-card' | 'network-telemetry-matrix' | 'progress-indicator-piano' | 'server-performance-step-bars' | 'credit-score-barcode-meter' | 'views-hourly-wave-chart' | 'timer-preparation-segmented' | 'noise-decibel-level' | 'mono-stock' | 'mono-revenue' | 'mono-credit' | 'mono-wallet' | 'mono-savings' | 'mono-heatmap' | 'mono-activity-ring' | 'mono-users' | 'mono-kfactor' | 'mono-latency' | 'mono-bandwidth' | 'mono-server' | 'mono-progress' | 'mono-radar' | 'mono-timer-arc' | 'mono-timer-ring';
+export interface MetricConfig {
+    id: string;
+    label: string;
+    interactionType: MetricInteractionType;
+    description: string;
+    cliCommand: string;
+    category: string;
+}
+export declare const metricsData: MetricConfig[];