@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/dither-charts/lib/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function cn(...inputs: (string | boolean | undefined | null | {
+    [key: string]: boolean;
+})[]): string;

package/dist/catalog/components/dither-charts/lib/utils.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  cn
+} from "../../../../catalog-chunks/chunk-KRXJK3FG.js";
+export {
+  cn
+};

package/dist/catalog/components/forms/AnimatedFormElement.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormElementConfig } from '../../data/formElements';
+interface AnimatedFormElementProps {
+    config: FormElementConfig;
+    theme: 'dark' | 'light';
+}
+export declare const AnimatedFormElement: React.FC<AnimatedFormElementProps>;
+export {};

package/dist/catalog/components/forms/AnimatedFormElement.js

@@ -0,0 +1,412 @@
+"use client";
+import {
+  useWebHaptics
+} from "../../../catalog-chunks/chunk-EC4R54F3.js";
+
+// .generated/catalog/components/forms/AnimatedFormElement.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Eye, EyeOff, Search, Check, Upload, ChevronDown, X, Loader2 } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AnimatedFormElement = ({ config, theme }) => {
+  const [val, setVal] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
+  const [radioSelected, setRadioSelected] = useState(false);
+  const [shakeKey, setShakeKey] = useState(0);
+  const [hasError, setHasError] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [selectOpen, setSelectOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState("React");
+  const [chips, setChips] = useState(["Next.js", "Tailwind", "Motion"]);
+  const [otp, setOtp] = useState(["", "", "", ""]);
+  const [sliderVal, setSliderVal] = useState(65);
+  const [submitState, setSubmitState] = useState("idle");
+  const { trigger: triggerHaptic } = useWebHaptics();
+  const isDark = theme === "dark";
+  const triggerErrorShake = () => {
+    triggerHaptic("error");
+    setHasError(true);
+    setShakeKey((prev) => prev + 1);
+    setTimeout(() => setHasError(false), 800);
+  };
+  const handleFormSubmit = () => {
+    triggerHaptic("medium");
+    setSubmitState("loading");
+    setTimeout(() => {
+      setSubmitState("success");
+      triggerHaptic("success");
+      setTimeout(() => setSubmitState("idle"), 2e3);
+    }, 1200);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "relative flex items-center justify-center w-full h-full p-4 overflow-hidden select-none", children: (() => {
+    switch (config.interactionType) {
+      case "floating-label-input":
+        return /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[240px]", children: [
+          /* @__PURE__ */ jsx(
+            motion.label,
+            {
+              animate: {
+                y: isFocused || val ? -24 : 0,
+                scale: isFocused || val ? 0.85 : 1,
+                color: isFocused ? isDark ? "#3b82f6" : "#2563eb" : isDark ? "#9ca3af" : "#6b7280"
+              },
+              transition: { type: "spring", stiffness: 400, damping: 25 },
+              className: "absolute left-3 top-2.5 origin-left pointer-events-none text-sm font-medium",
+              children: "Email Address"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: val,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              onChange: (e) => setVal(e.target.value),
+              className: `w-full px-3 py-2 pt-3 rounded-xl border text-sm outline-none transition-colors ${isDark ? "bg-neutral-900 border-neutral-700 text-white focus:border-blue-500" : "bg-white border-neutral-300 text-black focus:border-blue-600"}`
+            }
+          )
+        ] });
+      case "input-focus-glow":
+        return /* @__PURE__ */ jsx("div", { className: "relative w-full max-w-[240px]", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Focus for glow...",
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            className: `w-full px-4 py-2.5 rounded-xl border text-sm outline-none transition-all duration-300 ${isDark ? "bg-neutral-900 border-neutral-700 text-white focus:border-indigo-500" : "bg-white border-neutral-300 text-black focus:border-indigo-500"} ${isFocused ? "ring-4 ring-indigo-500/30 shadow-lg shadow-indigo-500/20" : ""}`
+          }
+        ) });
+      case "password-toggle":
+        return /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[240px]", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: showPassword ? "text" : "password",
+              defaultValue: "secretpass123",
+              className: `w-full pl-3 pr-10 py-2.5 rounded-xl border text-sm outline-none ${isDark ? "bg-neutral-900 border-neutral-700 text-white" : "bg-white border-neutral-300 text-black"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                triggerHaptic("light");
+                setShowPassword(!showPassword);
+              },
+              className: "absolute right-2.5 top-2.5 text-neutral-400 hover:text-neutral-200 cursor-pointer border-0 bg-transparent",
+              children: /* @__PURE__ */ jsx(motion.div, { animate: { scale: showPassword ? 1.1 : 1, rotate: showPassword ? 0 : -10 }, children: showPassword ? /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4 text-indigo-400" }) : /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4" }) })
+            }
+          )
+        ] });
+      case "search-expand":
+        return /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            animate: { width: isFocused ? 240 : 160 },
+            transition: { type: "spring", stiffness: 400, damping: 28 },
+            className: `relative flex items-center rounded-full border px-3 py-1.5 transition-colors ${isDark ? "bg-neutral-900 border-neutral-700 text-white" : "bg-white border-neutral-300 text-black"}`,
+            children: [
+              /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 text-neutral-400 shrink-0 mr-2" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search components...",
+                  onFocus: () => setIsFocused(true),
+                  onBlur: () => setIsFocused(false),
+                  className: "w-full text-xs bg-transparent border-0 outline-none"
+                }
+              )
+            ]
+          }
+        );
+      case "checkbox-draw":
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              triggerHaptic("light");
+              setIsChecked(!isChecked);
+            },
+            className: "flex items-center gap-3 cursor-pointer border-0 bg-transparent",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  animate: { scale: isChecked ? [1, 1.15, 1] : 1 },
+                  className: `w-6 h-6 rounded-lg border flex items-center justify-center transition-colors ${isChecked ? "bg-emerald-500 border-emerald-500 text-white" : isDark ? "border-neutral-600 bg-neutral-900" : "border-neutral-300 bg-white"}`,
+                  children: isChecked && /* @__PURE__ */ jsx(
+                    motion.svg,
+                    {
+                      className: "w-4 h-4 text-white",
+                      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.2 }
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: `text-sm font-medium ${isDark ? "text-white" : "text-black"}`, children: "Accept terms" })
+            ]
+          }
+        );
+      case "radio-scale":
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              triggerHaptic("light");
+              setRadioSelected(!radioSelected);
+            },
+            className: "flex items-center gap-3 cursor-pointer border-0 bg-transparent",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `w-6 h-6 rounded-full border flex items-center justify-center ${radioSelected ? "border-indigo-500" : isDark ? "border-neutral-600 bg-neutral-900" : "border-neutral-300 bg-white"}`, children: radioSelected && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { scale: 0 },
+                  animate: { scale: 1 },
+                  transition: { type: "spring", stiffness: 500, damping: 25 },
+                  className: "w-3.5 h-3.5 rounded-full bg-indigo-500"
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: `text-sm font-medium ${isDark ? "text-white" : "text-black"}`, children: "Option selected" })
+            ]
+          }
+        );
+      case "error-shake":
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 w-full max-w-[220px]", children: [
+          /* @__PURE__ */ jsx(
+            motion.input,
+            {
+              animate: hasError ? { x: [-10, 10, -8, 8, -4, 4, 0] } : { x: 0 },
+              transition: { duration: 0.5 },
+              type: "text",
+              placeholder: "Click button to test error",
+              className: `w-full px-3 py-2 rounded-xl border text-xs outline-none ${hasError ? "border-red-500 text-red-500 bg-red-500/10" : isDark ? "bg-neutral-900 border-neutral-700 text-white" : "bg-white border-neutral-300 text-black"}`
+            },
+            shakeKey
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: triggerErrorShake,
+              className: "px-3 py-1 text-xs font-semibold rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 cursor-pointer border-0",
+              children: "Trigger Error Shake"
+            }
+          )
+        ] });
+      case "success-check":
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              triggerHaptic("success");
+              setIsSuccess(!isSuccess);
+            },
+            className: `relative px-4 py-2.5 rounded-2xl border flex items-center gap-2 text-sm font-semibold transition-all duration-300 cursor-pointer ${isSuccess ? "bg-emerald-500/20 text-emerald-400 border-emerald-500/40" : isDark ? "bg-neutral-800 text-neutral-300 border-white/10" : "bg-neutral-100 text-neutral-700 border-neutral-300"}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: isSuccess ? "Verified" : "Click to Verify" }),
+              /* @__PURE__ */ jsx(AnimatePresence, { children: isSuccess && /* @__PURE__ */ jsx(
+                motion.svg,
+                {
+                  initial: { scale: 0 },
+                  animate: { scale: 1 },
+                  exit: { scale: 0 },
+                  className: "w-4 h-4 text-emerald-400",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "3",
+                  children: /* @__PURE__ */ jsx(
+                    motion.path,
+                    {
+                      d: "M20 6L9 17l-5-5",
+                      initial: { pathLength: 0 },
+                      animate: { pathLength: 1 },
+                      transition: { duration: 0.3 }
+                    }
+                  )
+                },
+                "check"
+              ) })
+            ]
+          }
+        );
+      case "select-dropdown":
+        return /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[200px]", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                triggerHaptic("light");
+                setSelectOpen(!selectOpen);
+              },
+              className: `w-full flex items-center justify-between px-3 py-2 rounded-xl border text-xs font-medium cursor-pointer ${isDark ? "bg-neutral-900 border-neutral-700 text-white" : "bg-white border-neutral-300 text-black"}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { children: selectedOption }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: `w-3.5 h-3.5 transition-transform ${selectOpen ? "rotate-180" : ""}` })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: selectOpen && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.95, y: -6 },
+              animate: { opacity: 1, scale: 1, y: 4 },
+              exit: { opacity: 0, scale: 0.95, y: -6 },
+              className: `absolute left-0 right-0 z-30 p-1 rounded-xl border shadow-xl flex flex-col gap-0.5 ${isDark ? "bg-neutral-900 border-neutral-700 text-white" : "bg-white border-neutral-200 text-black"}`,
+              children: ["React", "Vue", "Svelte", "Solid"].map((opt) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setSelectedOption(opt);
+                    setSelectOpen(false);
+                  },
+                  className: `w-full text-left px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer border-0 ${selectedOption === opt ? isDark ? "bg-white/10 text-white" : "bg-neutral-100 text-black" : isDark ? "hover:bg-white/5 text-neutral-400" : "hover:bg-neutral-50 text-neutral-600"}`,
+                  children: opt
+                },
+                opt
+              ))
+            }
+          ) })
+        ] });
+      case "multi-select-chips":
+        return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 max-w-[240px]", children: /* @__PURE__ */ jsx(AnimatePresence, { children: chips.map((chip) => /* @__PURE__ */ jsxs(
+          motion.span,
+          {
+            initial: { scale: 0, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            exit: { scale: 0, opacity: 0 },
+            className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium border ${isDark ? "bg-indigo-500/20 text-indigo-300 border-indigo-500/30" : "bg-indigo-100 text-indigo-700 border-indigo-200"}`,
+            children: [
+              chip,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    triggerHaptic("light");
+                    setChips(chips.filter((c) => c !== chip));
+                  },
+                  className: "hover:opacity-75 cursor-pointer border-0 bg-transparent p-0",
+                  children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+                }
+              )
+            ]
+          },
+          chip
+        )) }) });
+      case "textarea-auto-grow":
+        return /* @__PURE__ */ jsx("div", { className: "w-full max-w-[240px]", children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            rows: 2,
+            placeholder: "Type to test auto-grow...",
+            className: `w-full px-3 py-2 rounded-xl border text-xs outline-none resize-none transition-all ${isDark ? "bg-neutral-900 border-neutral-700 text-white" : "bg-white border-neutral-300 text-black"}`,
+            onInput: (e) => {
+              const target = e.target;
+              target.style.height = "auto";
+              target.style.height = `${target.scrollHeight}px`;
+            }
+          }
+        ) });
+      case "otp-input":
+        return /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [0, 1, 2, 3].map((idx) => /* @__PURE__ */ jsx(
+          motion.input,
+          {
+            id: `otp-${idx}`,
+            type: "text",
+            maxLength: 1,
+            value: otp[idx],
+            whileFocus: { scale: 1.1 },
+            onChange: (e) => {
+              const newOtp = [...otp];
+              newOtp[idx] = e.target.value;
+              setOtp(newOtp);
+              if (e.target.value && idx < 3) {
+                const next = document.getElementById(`otp-${idx + 1}`);
+                next?.focus();
+              }
+            },
+            className: `w-10 h-12 text-center text-lg font-bold rounded-xl border outline-none ${isDark ? "bg-neutral-900 border-neutral-700 text-white focus:border-indigo-500" : "bg-white border-neutral-300 text-black focus:border-indigo-500"}`
+          },
+          idx
+        )) });
+      case "file-upload-dropzone":
+        return /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            whileHover: { scale: 1.02 },
+            className: `w-full max-w-[240px] p-4 rounded-2xl border-2 border-dashed flex flex-col items-center justify-center gap-1 cursor-pointer transition-colors ${isDark ? "border-neutral-700 hover:border-indigo-500 bg-neutral-900/50" : "border-neutral-300 hover:border-indigo-500 bg-neutral-50"}`,
+            children: [
+              /* @__PURE__ */ jsx(Upload, { className: "w-6 h-6 text-indigo-500 animate-bounce" }),
+              /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold ${isDark ? "text-neutral-300" : "text-neutral-700"}`, children: "Drop files here" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "SVG, PNG, JPG (max 5MB)" })
+            ]
+          }
+        );
+      case "range-slider":
+        return /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[220px] flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute -top-7 px-2 py-0.5 rounded-lg bg-indigo-500 text-white text-[11px] font-bold shadow-md", children: [
+            sliderVal,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: "0",
+              max: "100",
+              value: sliderVal,
+              onChange: (e) => setSliderVal(Number(e.target.value)),
+              className: "w-full accent-indigo-500 cursor-pointer"
+            }
+          )
+        ] });
+      case "form-submit-button":
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleFormSubmit,
+            className: `px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer border-0 shadow-lg ${submitState === "success" ? "bg-emerald-500 text-white" : submitState === "loading" ? "bg-neutral-700 text-neutral-300" : "bg-indigo-600 text-white hover:bg-indigo-500"}`,
+            children: submitState === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin text-white" }),
+              /* @__PURE__ */ jsx("span", { children: "Submitting..." })
+            ] }) : submitState === "success" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-white" }),
+              /* @__PURE__ */ jsx("span", { children: "Submitted!" })
+            ] }) : /* @__PURE__ */ jsx("span", { children: "Submit Form" })
+          }
+        );
+      default:
+        return null;
+    }
+  })() });
+};
+export {
+  AnimatedFormElement
+};

package/dist/catalog/components/metrics/AnimatedMetricCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MetricConfig } from '../../data/metrics';
+interface AnimatedMetricCardProps {
+    config: MetricConfig;
+    theme: 'dark' | 'light';
+}
+export declare const AnimatedMetricCard: React.FC<AnimatedMetricCardProps>;
+export {};