aura-ui-library 1.0.37 → 1.0.39

package/dist/index.js

@@ -5275,99 +5275,104 @@ var import_gsap21 = require("gsap");
 var import_fi18 = require("react-icons/fi");
 var AuraLogin = ({
   title = "Welcome Back",
-  subtitle = "Step into the future of digital excellence. Enter your credentials to continue.",
+  subtitle = "Log in to your account and continue your journey.",
   theme = "dark",
   accentColor = "#6366f1",
-  onSubmit = (data) => console.log("Login data:", data),
+  // State Management Props (2-Way Binding)
+  formData,
+  onChange,
+  onSubmit = (data) => console.log("Login submitted:", data),
+  // Customization
+  sideImage = "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop",
+  socialProviders,
+  // Actions
   onForgotPassword = () => console.log("Forgot password clicked"),
   onRegister = () => console.log("Register clicked"),
   style = {},
-  animationDuration = 1.6,
+  animationDuration = 1.4,
   easing = "expo.out"
 }) => {
-  const [email, setEmail] = (0, import_react21.useState)("");
-  const [password, setPassword] = (0, import_react21.useState)("");
+  const [internalState, setInternalState] = (0, import_react21.useState)({ email: "", password: "" });
   const [showPassword, setShowPassword] = (0, import_react21.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react21.useState)(false);
+  const data = formData || internalState;
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    const finalValue = type === "checkbox" ? checked : value;
+    if (onChange) {
+      onChange(name, finalValue);
+    } else {
+      setInternalState((prev) => ({ ...prev, [name]: finalValue }));
+    }
+  };
   const containerRef = (0, import_react21.useRef)(null);
   const cardRef = (0, import_react21.useRef)(null);
+  const imageRef = (0, import_react21.useRef)(null);
   const titleRef = (0, import_react21.useRef)(null);
   const formRef = (0, import_react21.useRef)(null);
   const socialRef = (0, import_react21.useRef)(null);
-  const bgRef = (0, import_react21.useRef)(null);
   const inRouter = (0, import_react_router_dom13.useInRouterContext)();
   const navigate = inRouter ? (0, import_react_router_dom13.useNavigate)() : null;
   const isLight2 = theme === "light";
-  const bgMain = isLight2 ? "#f8fafc" : "#030303";
-  const cardBg = isLight2 ? "rgba(255, 255, 255, 0.9)" : "rgba(10, 10, 10, 0.4)";
+  const bgMain = isLight2 ? "#f8fafc" : "#020617";
+  const cardBg = isLight2 ? "rgba(255, 255, 255, 0.95)" : "rgba(15, 23, 42, 0.8)";
   const textPrimary = isLight2 ? "#0f172a" : "#ffffff";
   const textSecondary = isLight2 ? "rgba(15, 23, 42, 0.6)" : "rgba(255, 255, 255, 0.5)";
   const inputBg = isLight2 ? "rgba(0, 0, 0, 0.03)" : "rgba(255, 255, 255, 0.03)";
   const borderCol = isLight2 ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.1)";
+  const defaultProviders = [
+    {
+      name: "Google",
+      icon: /* @__PURE__ */ import_react21.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.27.81-.57z", fill: "#FBBC05" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })),
+      onClick: () => console.log("Google login")
+    },
+    { name: "GitHub", icon: /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiGithub, null), onClick: () => console.log("GitHub login") }
+  ];
+  const providersToUse = socialProviders || defaultProviders;
   (0, import_react21.useEffect)(() => {
     const ctx = import_gsap21.gsap.context(() => {
       const tl = import_gsap21.gsap.timeline({ defaults: { ease: easing, duration: animationDuration } });
-      tl.fromTo(containerRef.current, { opacity: 0 }, { opacity: 1, duration: 0.8 }).fromTo(bgRef.current, { scale: 1.2, filter: "blur(20px)", opacity: 0 }, { scale: 1, filter: "blur(0px)", opacity: 1 }, 0).fromTo(
+      tl.fromTo(containerRef.current, { opacity: 0 }, { opacity: 1, duration: 0.8 });
+      if (imageRef.current) {
+        tl.fromTo(imageRef.current, { scale: 1.1, filter: "blur(20px)" }, { scale: 1, filter: "blur(0px)", duration: 1.5, ease: "power2.out" }, 0);
+      }
+      tl.fromTo(
         cardRef.current,
-        { y: 100, opacity: 0, rotateX: 10, transformPerspective: 1e3 },
+        { y: 60, opacity: 0, rotateX: 5, transformPerspective: 1e3 },
         { y: 0, opacity: 1, rotateX: 0 },
         0.2
       );
-      const titleChars = titleRef.current.querySelectorAll(".char");
-      tl.fromTo(
-        titleChars,
-        { y: 20, opacity: 0, rotateX: 90 },
-        { y: 0, opacity: 1, rotateX: 0, stagger: 0.03, duration: 1 },
-        0.4
-      );
-      const formItems = formRef.current.children;
-      tl.fromTo(
-        formItems,
-        { y: 30, opacity: 0, filter: "blur(10px)" },
-        { y: 0, opacity: 1, filter: "blur(0px)", stagger: 0.08 },
-        0.6
-      );
-      tl.fromTo(
-        socialRef.current.children,
-        { scale: 0.8, opacity: 0 },
-        { scale: 1, opacity: 1, stagger: 0.05 },
-        "-=1"
-      );
+      if (titleRef.current) {
+        const titleChars = titleRef.current.querySelectorAll(".char");
+        tl.fromTo(
+          titleChars,
+          { y: 20, opacity: 0, rotateX: -90 },
+          { y: 0, opacity: 1, rotateX: 0, stagger: 0.03, duration: 1 },
+          0.4
+        );
+      }
+      if (formRef.current) {
+        tl.fromTo(
+          formRef.current.children,
+          { x: -20, opacity: 0 },
+          { x: 0, opacity: 1, stagger: 0.08 },
+          0.6
+        );
+      }
+      if (socialRef.current) {
+        tl.fromTo(
+          socialRef.current.children,
+          { scale: 0.9, opacity: 0 },
+          { scale: 1, opacity: 1, stagger: 0.05 },
+          "-=0.8"
+        );
+      }
     }, containerRef);
     return () => ctx.revert();
   }, [theme]);
-  const handleMouseMove = (e) => {
-    if (!cardRef.current) return;
-    const { left, top, width, height } = cardRef.current.getBoundingClientRect();
-    const x = (e.clientX - (left + width / 2)) / (width / 2);
-    const y = (e.clientY - (top + height / 2)) / (height / 2);
-    import_gsap21.gsap.to(cardRef.current, {
-      rotateY: x * 8,
-      rotateX: -y * 8,
-      transformPerspective: 1200,
-      duration: 0.6,
-      ease: "power2.out"
-    });
-    import_gsap21.gsap.to(bgRef.current, {
-      x: x * 30,
-      y: y * 30,
-      duration: 1.2,
-      ease: "power1.out"
-    });
-  };
-  const handleMouseLeave = () => {
-    import_gsap21.gsap.to(cardRef.current, {
-      rotateY: 0,
-      rotateX: 0,
-      duration: 1.2,
-      ease: "elastic.out(1, 0.4)"
-    });
-    import_gsap21.gsap.to(bgRef.current, { x: 0, y: 0, duration: 1.5 });
-  };
   const handleMagneticMove = (e) => {
     const rect = e.currentTarget.getBoundingClientRect();
-    const x = (e.clientX - rect.left - rect.width / 2) * 0.4;
-    const y = (e.clientY - rect.top - rect.height / 2) * 0.4;
+    const x = (e.clientX - rect.left - rect.width / 2) * 0.3;
+    const y = (e.clientY - rect.top - rect.height / 2) * 0.3;
     import_gsap21.gsap.to(e.currentTarget, { x, y, duration: 0.5, ease: "power2.out" });
   };
   const handleMagneticLeave = (e) => {
@@ -5377,74 +5382,85 @@ var AuraLogin = ({
     e.preventDefault();
     const submitBtn = e.target.querySelector('button[type="submit"]');
     import_gsap21.gsap.to(submitBtn, { scale: 0.95, duration: 0.1, yoyo: true, repeat: 1 });
-    onSubmit({ email, password });
+    onSubmit(data);
   };
   const SplitText = ({ text }) => {
     return text.split("").map((char, i) => /* @__PURE__ */ import_react21.default.createElement("span", { key: i, className: "char", style: { display: "inline-block", willChange: "transform" } }, char === " " ? "\xA0" : char));
   };
   const styles = {
     container: {
-      position: "relative",
+      display: "flex",
+      flexWrap: "wrap-reverse",
+      // Ensures image stacks correctly on mobile
       width: "100%",
       minHeight: "100vh",
       backgroundColor: bgMain,
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      ...style
+    },
+    formSide: {
+      flex: "1 1 500px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       padding: "40px 20px",
+      position: "relative",
+      zIndex: 2
+    },
+    imageSide: {
+      flex: "1 1 500px",
+      position: "relative",
       overflow: "hidden",
-      fontFamily: '"Inter", -apple-system, sans-serif',
-      ...style
+      minHeight: "30vh"
+      // Ensures it has height when stacked on mobile
     },
-    background: {
+    backgroundImage: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
       position: "absolute",
-      width: "120vw",
-      height: "120vh",
-      top: "-10vh",
-      left: "-10vw",
-      background: isLight2 ? `radial-gradient(circle at 50% 50%, ${accentColor}11 0%, transparent 70%)` : `radial-gradient(circle at 50% 50%, ${accentColor}22 0%, transparent 60%)`,
-      zIndex: 1,
-      pointerEvents: "none",
-      willChange: "transform"
+      inset: 0
+    },
+    overlay: {
+      position: "absolute",
+      inset: 0,
+      background: `linear-gradient(135deg, ${accentColor}44 0%, ${bgMain} 100%)`,
+      // Ties the image to the theme
+      mixBlendMode: isLight2 ? "multiply" : "overlay"
     },
     card: {
       position: "relative",
       width: "100%",
       maxWidth: "480px",
       backgroundColor: cardBg,
-      backdropFilter: "blur(40px)",
-      WebkitBackdropFilter: "blur(40px)",
-      borderRadius: "40px",
+      backdropFilter: "blur(20px)",
+      WebkitBackdropFilter: "blur(20px)",
+      borderRadius: "32px",
       border: `1px solid ${borderCol}`,
-      padding: "60px 50px",
-      zIndex: 10,
-      boxShadow: isLight2 ? "0 30px 60px rgba(0,0,0,0.05)" : "none",
+      padding: "50px 40px",
+      boxShadow: isLight2 ? "0 20px 50px rgba(0,0,0,0.05)" : "0 30px 60px rgba(0,0,0,0.4)",
       willChange: "transform, opacity"
     },
     title: {
-      fontSize: "clamp(32px, 4vw, 42px)",
+      fontSize: "clamp(28px, 4vw, 36px)",
       fontWeight: "900",
       color: textPrimary,
-      marginBottom: "16px",
-      letterSpacing: "-2px",
-      textAlign: "center",
-      perspective: "1000px"
+      marginBottom: "12px",
+      letterSpacing: "-1.5px"
     },
     subtitle: {
       fontSize: "15px",
       color: textSecondary,
       lineHeight: "1.6",
-      textAlign: "center",
-      marginBottom: "48px",
+      marginBottom: "40px",
       fontWeight: "500"
     },
     form: {
       display: "flex",
       flexDirection: "column",
-      gap: "24px"
+      gap: "20px"
     },
     inputGroup: {
-      position: "relative",
       display: "flex",
       flexDirection: "column",
       gap: "8px"
@@ -5454,7 +5470,7 @@ var AuraLogin = ({
       fontWeight: "700",
       color: textSecondary,
       textTransform: "uppercase",
-      letterSpacing: "1px",
+      letterSpacing: "0.5px",
       marginLeft: "4px"
     },
     inputWrapper: {
@@ -5464,26 +5480,26 @@ var AuraLogin = ({
     },
     inputIcon: {
       position: "absolute",
-      left: "20px",
+      left: "16px",
       color: textSecondary,
       fontSize: "18px",
       transition: "color 0.3s ease"
     },
     input: {
       width: "100%",
-      padding: "18px 20px 18px 54px",
+      padding: "16px 16px 16px 48px",
       backgroundColor: inputBg,
       border: `1px solid ${borderCol}`,
       borderRadius: "16px",
       color: textPrimary,
-      fontSize: "16px",
+      fontSize: "15px",
       outline: "none",
-      transition: "all 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
-      willChange: "border-color, box-shadow"
+      transition: "all 0.3s ease",
+      boxSizing: "border-box"
     },
     eyeIcon: {
       position: "absolute",
-      right: "20px",
+      right: "16px",
       color: textSecondary,
       fontSize: "20px",
       cursor: "pointer",
@@ -5492,32 +5508,13 @@ var AuraLogin = ({
       justifyContent: "center",
       transition: "color 0.3s ease"
     },
-    submitBtn: {
-      marginTop: "12px",
-      padding: "20px",
-      backgroundColor: accentColor,
-      color: "#ffffff",
-      border: "none",
-      borderRadius: "20px",
-      fontSize: "15px",
-      fontWeight: "800",
-      letterSpacing: "1px",
-      textTransform: "uppercase",
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "12px",
-      boxShadow: `0 20px 40px ${accentColor}33`,
-      willChange: "transform, box-shadow"
-    },
     footerLinks: {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "14px",
       fontWeight: "600",
-      marginTop: "12px"
+      marginTop: "8px"
     },
     link: {
       color: accentColor,
@@ -5525,205 +5522,133 @@ var AuraLogin = ({
       cursor: "pointer",
       transition: "opacity 0.2s ease"
     },
+    submitBtn: {
+      marginTop: "16px",
+      padding: "18px",
+      backgroundColor: accentColor,
+      color: "#ffffff",
+      border: "none",
+      borderRadius: "16px",
+      fontSize: "15px",
+      fontWeight: "700",
+      letterSpacing: "1px",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "12px",
+      boxShadow: `0 15px 30px ${accentColor}33`,
+      willChange: "transform"
+    },
     divider: {
       position: "relative",
       width: "100%",
       height: "1px",
       backgroundColor: borderCol,
-      margin: "40px 0",
+      margin: "35px 0",
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
     },
     dividerText: {
       position: "absolute",
-      backgroundColor: isLight2 ? "#f9fafb" : "#0d0d0d",
-      // Match card backdrop slightly
-      padding: "0 16px",
+      backgroundColor: cardBg,
+      padding: "0 12px",
       color: textSecondary,
       fontSize: "12px",
       fontWeight: "700",
-      textTransform: "uppercase",
-      borderRadius: "10px"
+      textTransform: "uppercase"
     },
     socialArea: {
       display: "flex",
-      justifyContent: "center",
-      gap: "16px"
+      gap: "12px"
     },
     socialBtn: {
       flex: 1,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      padding: "16px",
+      gap: "8px",
+      padding: "14px",
       backgroundColor: inputBg,
       border: `1px solid ${borderCol}`,
-      borderRadius: "16px",
+      borderRadius: "14px",
       color: textPrimary,
-      fontSize: "20px",
+      fontSize: "14px",
+      fontWeight: "600",
       cursor: "pointer",
       transition: "all 0.3s ease"
     }
   };
-  return /* @__PURE__ */ import_react21.default.createElement("div", { ref: containerRef, style: styles.container }, /* @__PURE__ */ import_react21.default.createElement("div", { ref: bgRef, style: styles.background }), /* @__PURE__ */ import_react21.default.createElement(
-    "div",
+  return /* @__PURE__ */ import_react21.default.createElement("div", { ref: containerRef, style: styles.container }, /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.formSide }, /* @__PURE__ */ import_react21.default.createElement("div", { ref: cardRef, style: styles.card }, /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "24px" } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: { width: "40px", height: "40px", borderRadius: "12px", backgroundColor: `${accentColor}22`, display: "flex", alignItems: "center", justifyContent: "center", color: accentColor, fontSize: "20px" } }, /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiZap, null)), /* @__PURE__ */ import_react21.default.createElement("span", { style: { fontWeight: "700", letterSpacing: "1px", color: textSecondary } }, "AURA UI")), /* @__PURE__ */ import_react21.default.createElement("h1", { ref: titleRef, style: styles.title }, /* @__PURE__ */ import_react21.default.createElement(SplitText, { text: title })), /* @__PURE__ */ import_react21.default.createElement("p", { style: styles.subtitle }, subtitle), /* @__PURE__ */ import_react21.default.createElement("form", { ref: formRef, style: styles.form, onSubmit: handleSubmit }, /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react21.default.createElement("label", { style: styles.inputLabel }, "Email Address"), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiMail, { style: styles.inputIcon }), /* @__PURE__ */ import_react21.default.createElement(
+    "input",
     {
-      ref: cardRef,
-      style: styles.card,
-      onMouseMove: handleMouseMove,
-      onMouseLeave: handleMouseLeave
-    },
-    /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: "32px" } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: {
-      width: "64px",
-      height: "64px",
-      borderRadius: "18px",
-      backgroundColor: `${accentColor}22`,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: accentColor,
-      fontSize: "32px",
-      boxShadow: `0 0 30px ${accentColor}22`
-    } }, /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiZap, null))),
-    /* @__PURE__ */ import_react21.default.createElement("h1", { ref: titleRef, style: styles.title }, /* @__PURE__ */ import_react21.default.createElement(SplitText, { text: title })),
-    /* @__PURE__ */ import_react21.default.createElement("p", { style: styles.subtitle }, subtitle),
-    /* @__PURE__ */ import_react21.default.createElement("form", { ref: formRef, style: styles.form, onSubmit: handleSubmit }, /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react21.default.createElement("label", { style: styles.inputLabel }, "Email Address"), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiMail, { style: styles.inputIcon, className: "input-icon" }), /* @__PURE__ */ import_react21.default.createElement(
-      "input",
-      {
-        type: "email",
-        placeholder: "name@company.com",
-        required: true,
-        value: email,
-        onChange: (e) => setEmail(e.target.value),
-        style: styles.input,
-        onFocus: (e) => {
-          e.target.style.borderColor = accentColor;
-          e.target.style.boxShadow = `0 0 20px ${accentColor}11`;
-          e.target.previousSibling.style.color = accentColor;
-        },
-        onBlur: (e) => {
-          e.target.style.borderColor = borderCol;
-          e.target.style.boxShadow = "none";
-          e.target.previousSibling.style.color = textSecondary;
-        }
-      }
-    ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react21.default.createElement("label", { style: styles.inputLabel }, "Password"), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiLock, { style: styles.inputIcon, className: "input-icon" }), /* @__PURE__ */ import_react21.default.createElement(
-      "input",
-      {
-        type: showPassword ? "text" : "password",
-        placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-        required: true,
-        value: password,
-        onChange: (e) => setPassword(e.target.value),
-        style: styles.input,
-        onFocus: (e) => {
-          e.target.style.borderColor = accentColor;
-          e.target.style.boxShadow = `0 0 20px ${accentColor}11`;
-          e.target.previousSibling.style.color = accentColor;
-        },
-        onBlur: (e) => {
-          e.target.style.borderColor = borderCol;
-          e.target.style.boxShadow = "none";
-          e.target.previousSibling.style.color = textSecondary;
-        }
-      }
-    ), /* @__PURE__ */ import_react21.default.createElement(
-      "div",
-      {
-        style: styles.eyeIcon,
-        onClick: () => setShowPassword(!showPassword),
-        onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
-        onMouseLeave: (e) => e.currentTarget.style.color = textSecondary
-      },
-      showPassword ? /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiEyeOff, null) : /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiEye, null)
-    ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.footerLinks }, /* @__PURE__ */ import_react21.default.createElement(
-      "span",
-      {
-        style: styles.link,
-        onClick: onForgotPassword,
-        onMouseEnter: (e) => e.currentTarget.style.opacity = 0.7,
-        onMouseLeave: (e) => e.currentTarget.style.opacity = 1
+      name: "email",
+      type: "email",
+      placeholder: "name@company.com",
+      required: true,
+      value: data.email || "",
+      onChange: handleChange,
+      style: styles.input,
+      onFocus: (e) => {
+        e.target.style.borderColor = accentColor;
+        e.target.previousSibling.style.color = accentColor;
       },
-      "Forgot Password?"
-    ), /* @__PURE__ */ import_react21.default.createElement(
-      "span",
-      {
-        style: isLight2 ? { color: "#0f172a" } : { color: "#ffffff" }
-      },
-      "Don't have an account? ",
-      /* @__PURE__ */ import_react21.default.createElement(
-        "span",
-        {
-          style: styles.link,
-          onClick: onRegister,
-          onMouseEnter: (e) => e.currentTarget.style.opacity = 0.7,
-          onMouseLeave: (e) => e.currentTarget.style.opacity = 1
-        },
-        "Sign Up"
-      )
-    )), /* @__PURE__ */ import_react21.default.createElement(
-      "button",
-      {
-        type: "submit",
-        style: styles.submitBtn,
-        onMouseEnter: (e) => {
-          import_gsap21.gsap.to(e.currentTarget, { y: -4, scale: 1.02, boxShadow: `0 30px 60px ${accentColor}50`, duration: 0.4 });
-        },
-        onMouseLeave: (e) => {
-          import_gsap21.gsap.to(e.currentTarget, { y: 0, scale: 1, boxShadow: `0 20px 40px ${accentColor}33`, duration: 0.4 });
-        },
-        onMouseMove: handleMagneticMove,
-        onMouseUp: handleMagneticLeave
-      },
-      "Sign In ",
-      /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiArrowRight, { fontSize: "20px" })
-    )),
-    /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.divider }, /* @__PURE__ */ import_react21.default.createElement("span", { style: styles.dividerText }, "Or Continue With")),
-    /* @__PURE__ */ import_react21.default.createElement("div", { ref: socialRef, style: styles.socialArea }, /* @__PURE__ */ import_react21.default.createElement(
-      "button",
-      {
-        style: styles.socialBtn,
-        onMouseEnter: (e) => {
-          import_gsap21.gsap.to(e.currentTarget, { backgroundColor: isLight2 ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.08)", y: -4 });
-          e.currentTarget.style.borderColor = accentColor;
-        },
-        onMouseLeave: (e) => {
-          import_gsap21.gsap.to(e.currentTarget, { backgroundColor: inputBg, y: 0 });
-          e.currentTarget.style.borderColor = borderCol;
-        }
-      },
-      /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiGithub, null)
-    ), /* @__PURE__ */ import_react21.default.createElement(
-      "button",
-      {
-        style: styles.socialBtn,
-        onMouseEnter: (e) => {
-          import_gsap21.gsap.to(e.currentTarget, { backgroundColor: isLight2 ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.08)", y: -4 });
-          e.currentTarget.style.borderColor = accentColor;
-        },
-        onMouseLeave: (e) => {
-          import_gsap21.gsap.to(e.currentTarget, { backgroundColor: inputBg, y: 0 });
-          e.currentTarget.style.borderColor = borderCol;
-        }
+      onBlur: (e) => {
+        e.target.style.borderColor = borderCol;
+        e.target.previousSibling.style.color = textSecondary;
+      }
+    }
+  ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react21.default.createElement("label", { style: styles.inputLabel }, "Password"), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiLock, { style: styles.inputIcon }), /* @__PURE__ */ import_react21.default.createElement(
+    "input",
+    {
+      name: "password",
+      type: showPassword ? "text" : "password",
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+      required: true,
+      value: data.password || "",
+      onChange: handleChange,
+      style: styles.input,
+      onFocus: (e) => {
+        e.target.style.borderColor = accentColor;
+        e.target.previousSibling.style.color = accentColor;
       },
-      /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiFacebook, null)
-    ), /* @__PURE__ */ import_react21.default.createElement(
-      "button",
-      {
-        style: styles.socialBtn,
-        onMouseEnter: (e) => {
-          import_gsap21.gsap.to(e.currentTarget, { backgroundColor: isLight2 ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.08)", y: -4 });
-          e.currentTarget.style.borderColor = accentColor;
-        },
-        onMouseLeave: (e) => {
-          import_gsap21.gsap.to(e.currentTarget, { backgroundColor: inputBg, y: 0 });
-          e.currentTarget.style.borderColor = borderCol;
-        }
+      onBlur: (e) => {
+        e.target.style.borderColor = borderCol;
+        e.target.previousSibling.style.color = textSecondary;
+      }
+    }
+  ), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.eyeIcon, onClick: () => setShowPassword(!showPassword) }, showPassword ? /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiEyeOff, null) : /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiEye, null)))), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.footerLinks }, /* @__PURE__ */ import_react21.default.createElement("span", { style: styles.link, onClick: onForgotPassword }, "Forgot Password?"), /* @__PURE__ */ import_react21.default.createElement("span", { style: { color: textSecondary } }, "New here? ", /* @__PURE__ */ import_react21.default.createElement("span", { style: styles.link, onClick: onRegister }, "Sign Up"))), /* @__PURE__ */ import_react21.default.createElement(
+    "button",
+    {
+      type: "submit",
+      style: styles.submitBtn,
+      onMouseEnter: (e) => import_gsap21.gsap.to(e.currentTarget, { scale: 1.02, duration: 0.4 }),
+      onMouseLeave: (e) => import_gsap21.gsap.to(e.currentTarget, { scale: 1, duration: 0.4 }),
+      onMouseMove: handleMagneticMove,
+      onMouseUp: handleMagneticLeave
+    },
+    "Sign In ",
+    /* @__PURE__ */ import_react21.default.createElement(import_fi18.FiArrowRight, { fontSize: "18px" })
+  )), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.divider }, /* @__PURE__ */ import_react21.default.createElement("span", { style: styles.dividerText }, "Or Continue With")), /* @__PURE__ */ import_react21.default.createElement("div", { ref: socialRef, style: styles.socialArea }, providersToUse.map((provider, i) => /* @__PURE__ */ import_react21.default.createElement(
+    "button",
+    {
+      key: i,
+      type: "button",
+      onClick: provider.onClick,
+      style: styles.socialBtn,
+      onMouseEnter: (e) => {
+        import_gsap21.gsap.to(e.currentTarget, { backgroundColor: isLight2 ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.08)", y: -2 });
+        e.currentTarget.style.borderColor = accentColor;
       },
-      /* @__PURE__ */ import_react21.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.27.81-.57z", fill: "#FBBC05" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" }))
-    ))
-  ));
+      onMouseLeave: (e) => {
+        import_gsap21.gsap.to(e.currentTarget, { backgroundColor: inputBg, y: 0 });
+        e.currentTarget.style.borderColor = borderCol;
+      }
+    },
+    provider.icon,
+    /* @__PURE__ */ import_react21.default.createElement("span", { style: { display: providersToUse.length > 2 ? "none" : "inline" } }, provider.name)
+  ))))), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.imageSide }, /* @__PURE__ */ import_react21.default.createElement("img", { ref: imageRef, src: sideImage, alt: "Login Side Cover", style: styles.backgroundImage }), /* @__PURE__ */ import_react21.default.createElement("div", { style: styles.overlay })));
 };
 
 // src/components/Froms/Register.jsx
@@ -5733,101 +5658,109 @@ var import_gsap22 = require("gsap");
 var import_fi19 = require("react-icons/fi");
 var AuraRegister = ({
   title = "Begin Your Journey",
-  subtitle = "Join the elite circle of designers and developers building the future of the web.",
+  subtitle = "Join the elite circle of designers and developers building the future.",
   theme = "dark",
   accentColor = "#6366f1",
-  onSubmit = (data) => console.log("Register data:", data),
+  // State Management Props (2-Way Binding)
+  formData,
+  onChange,
+  onSubmit = (data) => console.log("Register submitted:", data),
+  // Customization
+  sideImage = "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=2574&auto=format&fit=crop",
+  socialProviders,
+  // Actions
   onLogin = () => console.log("Login clicked"),
   style = {},
-  animationDuration = 1.6,
+  animationDuration = 1.4,
   easing = "expo.out"
 }) => {
-  const [formData, setFormData] = (0, import_react22.useState)({
-    name: "",
+  const [internalState, setInternalState] = (0, import_react22.useState)({
+    fullname: "",
     email: "",
+    contact: "",
     password: "",
-    confirmPassword: ""
+    isSeller: false
   });
-  const [isHovered, setIsHovered] = (0, import_react22.useState)(false);
+  const [showPassword, setShowPassword] = (0, import_react22.useState)(false);
+  const data = formData || internalState;
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    const finalValue = type === "checkbox" ? checked : value;
+    if (onChange) {
+      onChange(name, finalValue);
+    } else {
+      setInternalState((prev) => ({ ...prev, [name]: finalValue }));
+    }
+  };
   const containerRef = (0, import_react22.useRef)(null);
   const cardRef = (0, import_react22.useRef)(null);
+  const imageRef = (0, import_react22.useRef)(null);
   const titleRef = (0, import_react22.useRef)(null);
   const formRef = (0, import_react22.useRef)(null);
   const socialRef = (0, import_react22.useRef)(null);
-  const bgRef = (0, import_react22.useRef)(null);
   const inRouter = (0, import_react_router_dom14.useInRouterContext)();
   const navigate = inRouter ? (0, import_react_router_dom14.useNavigate)() : null;
   const isLight2 = theme === "light";
-  const bgMain = isLight2 ? "#f8fafc" : "#030303";
-  const cardBg = isLight2 ? "rgba(255, 255, 255, 0.9)" : "rgba(10, 10, 10, 0.4)";
+  const bgMain = isLight2 ? "#f8fafc" : "#020617";
+  const cardBg = isLight2 ? "rgba(255, 255, 255, 0.95)" : "rgba(15, 23, 42, 0.8)";
   const textPrimary = isLight2 ? "#0f172a" : "#ffffff";
   const textSecondary = isLight2 ? "rgba(15, 23, 42, 0.6)" : "rgba(255, 255, 255, 0.5)";
   const inputBg = isLight2 ? "rgba(0, 0, 0, 0.03)" : "rgba(255, 255, 255, 0.03)";
   const borderCol = isLight2 ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.1)";
+  const defaultProviders = [
+    {
+      name: "Google",
+      icon: /* @__PURE__ */ import_react22.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react22.default.createElement("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), /* @__PURE__ */ import_react22.default.createElement("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), /* @__PURE__ */ import_react22.default.createElement("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.27.81-.57z", fill: "#FBBC05" }), /* @__PURE__ */ import_react22.default.createElement("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })),
+      onClick: () => console.log("Google register")
+    },
+    { name: "GitHub", icon: /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiGithub, { size: 18 }), onClick: () => console.log("GitHub register") }
+  ];
+  const providersToUse = socialProviders || defaultProviders;
   (0, import_react22.useEffect)(() => {
     const ctx = import_gsap22.gsap.context(() => {
       const tl = import_gsap22.gsap.timeline({ defaults: { ease: easing, duration: animationDuration } });
-      tl.fromTo(containerRef.current, { opacity: 0 }, { opacity: 1, duration: 0.8 }).fromTo(bgRef.current, { scale: 1.2, filter: "blur(30px)", opacity: 0 }, { scale: 1, filter: "blur(0px)", opacity: 1 }, 0).fromTo(
+      tl.fromTo(containerRef.current, { opacity: 0 }, { opacity: 1, duration: 0.8 });
+      if (imageRef.current) {
+        tl.fromTo(imageRef.current, { scale: 1.1, filter: "blur(20px)" }, { scale: 1, filter: "blur(0px)", duration: 1.5, ease: "power2.out" }, 0);
+      }
+      tl.fromTo(
         cardRef.current,
-        { y: 80, opacity: 0, rotateX: 10, transformPerspective: 1e3 },
+        { y: 40, opacity: 0, rotateX: 5, transformPerspective: 1e3 },
         { y: 0, opacity: 1, rotateX: 0 },
         0.2
       );
-      const titleChars = titleRef.current.querySelectorAll(".char");
-      tl.fromTo(
-        titleChars,
-        { y: 30, opacity: 0, scale: 0.8 },
-        { y: 0, opacity: 1, scale: 1, stagger: 0.04, duration: 1.2 },
-        0.4
-      );
-      const formItems = formRef.current.children;
-      tl.fromTo(
-        formItems,
-        { x: -20, opacity: 0, filter: "blur(5px)" },
-        { x: 0, opacity: 1, filter: "blur(0px)", stagger: 0.06 },
-        0.6
-      );
-      tl.fromTo(
-        socialRef.current.children,
-        { y: 20, opacity: 0 },
-        { y: 0, opacity: 1, stagger: 0.05 },
-        "-=0.8"
-      );
+      if (titleRef.current) {
+        const titleChars = titleRef.current.querySelectorAll(".char");
+        tl.fromTo(
+          titleChars,
+          { y: 15, opacity: 0, scale: 0.9 },
+          { y: 0, opacity: 1, scale: 1, stagger: 0.02, duration: 0.8 },
+          0.3
+        );
+      }
+      if (formRef.current) {
+        tl.fromTo(
+          formRef.current.children,
+          { x: -15, opacity: 0 },
+          { x: 0, opacity: 1, stagger: 0.06 },
+          0.4
+        );
+      }
+      if (socialRef.current) {
+        tl.fromTo(
+          socialRef.current.children,
+          { y: 10, opacity: 0 },
+          { y: 0, opacity: 1, stagger: 0.04 },
+          "-=0.6"
+        );
+      }
     }, containerRef);
     return () => ctx.revert();
   }, [theme]);
-  const handleMouseMove = (e) => {
-    if (!cardRef.current) return;
-    const { left, top, width, height } = cardRef.current.getBoundingClientRect();
-    const x = (e.clientX - (left + width / 2)) / (width / 2);
-    const y = (e.clientY - (top + height / 2)) / (height / 2);
-    import_gsap22.gsap.to(cardRef.current, {
-      rotateY: x * 6,
-      rotateX: -y * 6,
-      transformPerspective: 1200,
-      duration: 0.6,
-      ease: "power2.out"
-    });
-    import_gsap22.gsap.to(bgRef.current, {
-      x: x * 20,
-      y: y * 20,
-      duration: 1.2,
-      ease: "power1.out"
-    });
-  };
-  const handleMouseLeave = () => {
-    import_gsap22.gsap.to(cardRef.current, {
-      rotateY: 0,
-      rotateX: 0,
-      duration: 1.2,
-      ease: "elastic.out(1, 0.4)"
-    });
-    import_gsap22.gsap.to(bgRef.current, { x: 0, y: 0, duration: 1.5 });
-  };
   const handleMagneticMove = (e) => {
     const rect = e.currentTarget.getBoundingClientRect();
-    const x = (e.clientX - rect.left - rect.width / 2) * 0.35;
-    const y = (e.clientY - rect.top - rect.height / 2) * 0.35;
+    const x = (e.clientX - rect.left - rect.width / 2) * 0.3;
+    const y = (e.clientY - rect.top - rect.height / 2) * 0.3;
     import_gsap22.gsap.to(e.currentTarget, { x, y, duration: 0.5, ease: "power2.out" });
   };
   const handleMagneticLeave = (e) => {
@@ -5836,88 +5769,97 @@ var AuraRegister = ({
   const handleSubmit = (e) => {
     e.preventDefault();
     const submitBtn = e.target.querySelector('button[type="submit"]');
-    import_gsap22.gsap.to(submitBtn, { scale: 0.96, duration: 0.1, yoyo: true, repeat: 1 });
-    onSubmit(formData);
-  };
-  const handleChange = (e) => {
-    setFormData({ ...formData, [e.target.name]: e.target.value });
+    import_gsap22.gsap.to(submitBtn, { scale: 0.95, duration: 0.1, yoyo: true, repeat: 1 });
+    onSubmit(data);
   };
   const SplitText = ({ text }) => {
     return text.split("").map((char, i) => /* @__PURE__ */ import_react22.default.createElement("span", { key: i, className: "char", style: { display: "inline-block", willChange: "transform" } }, char === " " ? "\xA0" : char));
   };
   const styles = {
     container: {
-      position: "relative",
+      display: "flex",
+      flexWrap: "wrap-reverse",
+      // Image on bottom/right for mobile, form on top/left
       width: "100%",
       minHeight: "100vh",
       backgroundColor: bgMain,
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      ...style
+    },
+    // For Register, let's put the image on the right (so flex-direction row)
+    formSide: {
+      flex: "1 1 500px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      padding: "60px 20px",
+      padding: "40px 20px",
+      position: "relative",
+      zIndex: 2
+    },
+    imageSide: {
+      flex: "1 1 500px",
+      position: "relative",
       overflow: "hidden",
-      fontFamily: '"Inter", -apple-system, sans-serif',
-      ...style
+      minHeight: "30vh"
     },
-    background: {
+    backgroundImage: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
       position: "absolute",
-      width: "140vw",
-      height: "140vh",
-      top: "-20vh",
-      left: "-20vw",
-      background: isLight2 ? `radial-gradient(circle at 50% 50%, ${accentColor}08 0%, transparent 60%)` : `radial-gradient(circle at 50% 50%, ${accentColor}18 0%, transparent 50%)`,
-      zIndex: 1,
-      pointerEvents: "none"
+      inset: 0
+    },
+    overlay: {
+      position: "absolute",
+      inset: 0,
+      background: `linear-gradient(135deg, ${accentColor}33 0%, ${bgMain} 100%)`,
+      mixBlendMode: isLight2 ? "multiply" : "overlay"
     },
     card: {
       position: "relative",
       width: "100%",
-      maxWidth: "520px",
+      maxWidth: "480px",
+      // slightly wider than login
       backgroundColor: cardBg,
-      backdropFilter: "blur(30px)",
-      WebkitBackdropFilter: "blur(30px)",
-      borderRadius: "40px",
+      backdropFilter: "blur(20px)",
+      WebkitBackdropFilter: "blur(20px)",
+      borderRadius: "32px",
       border: `1px solid ${borderCol}`,
-      padding: "50px 40px",
-      zIndex: 10,
-      boxShadow: isLight2 ? "0 40px 100px rgba(0,0,0,0.06)" : "none",
+      padding: "40px",
+      boxShadow: isLight2 ? "0 20px 50px rgba(0,0,0,0.05)" : "0 30px 60px rgba(0,0,0,0.4)",
       willChange: "transform, opacity"
     },
     title: {
-      fontSize: "clamp(28px, 4.5vw, 40px)",
+      fontSize: "clamp(24px, 3.5vw, 32px)",
       fontWeight: "900",
       color: textPrimary,
-      marginBottom: "12px",
-      letterSpacing: "-1.5px",
-      textAlign: "center"
+      marginBottom: "8px",
+      letterSpacing: "-1px"
     },
     subtitle: {
       fontSize: "14px",
       color: textSecondary,
-      lineHeight: "1.6",
-      textAlign: "center",
-      marginBottom: "40px",
-      fontWeight: "500",
-      maxWidth: "380px",
-      margin: "0 auto 40px auto"
+      lineHeight: "1.5",
+      marginBottom: "30px",
+      fontWeight: "500"
     },
     form: {
       display: "flex",
       flexDirection: "column",
-      gap: "20px"
+      gap: "16px"
+      // tighter gap for more fields
     },
     inputGroup: {
-      position: "relative",
       display: "flex",
       flexDirection: "column",
       gap: "6px"
     },
     inputLabel: {
       fontSize: "12px",
-      fontWeight: "750",
+      fontWeight: "700",
       color: textSecondary,
       textTransform: "uppercase",
-      letterSpacing: "0.8px",
+      letterSpacing: "0.5px",
       marginLeft: "4px"
     },
     inputWrapper: {
@@ -5927,67 +5869,100 @@ var AuraRegister = ({
     },
     inputIcon: {
       position: "absolute",
-      left: "18px",
+      left: "16px",
       color: textSecondary,
       fontSize: "16px",
       transition: "color 0.3s ease"
     },
     input: {
       width: "100%",
-      padding: "16px 18px 16px 48px",
+      padding: "14px 16px 14px 44px",
       backgroundColor: inputBg,
       border: `1px solid ${borderCol}`,
       borderRadius: "14px",
       color: textPrimary,
-      fontSize: "15px",
+      fontSize: "14px",
       outline: "none",
-      transition: "all 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
+      transition: "all 0.3s ease",
+      boxSizing: "border-box"
     },
-    submitBtn: {
-      marginTop: "10px",
-      padding: "18px",
-      backgroundColor: accentColor,
-      color: "#ffffff",
-      border: "none",
-      borderRadius: "16px",
-      fontSize: "14px",
-      fontWeight: "800",
-      letterSpacing: "2px",
-      textTransform: "uppercase",
+    eyeIcon: {
+      position: "absolute",
+      right: "16px",
+      color: textSecondary,
+      fontSize: "18px",
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      gap: "12px",
-      boxShadow: `0 15px 30px ${accentColor}33`,
-      willChange: "transform, box-shadow"
+      transition: "color 0.3s ease"
+    },
+    checkboxWrapper: {
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      marginTop: "4px",
+      cursor: "pointer"
+    },
+    checkboxInput: {
+      cursor: "pointer",
+      width: "18px",
+      height: "18px",
+      accentColor
+    },
+    checkboxLabel: {
+      fontSize: "13px",
+      color: textSecondary,
+      fontWeight: "500",
+      cursor: "pointer"
     },
     footerLinks: {
-      textAlign: "center",
-      fontSize: "14px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      fontSize: "13px",
       fontWeight: "600",
-      marginTop: "20px",
+      marginTop: "10px",
       color: textSecondary
     },
     link: {
       color: accentColor,
       textDecoration: "none",
       cursor: "pointer",
-      marginLeft: "6px"
+      marginLeft: "6px",
+      transition: "opacity 0.2s ease"
+    },
+    submitBtn: {
+      marginTop: "12px",
+      padding: "16px",
+      backgroundColor: accentColor,
+      color: "#ffffff",
+      border: "none",
+      borderRadius: "14px",
+      fontSize: "15px",
+      fontWeight: "700",
+      letterSpacing: "1px",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "12px",
+      boxShadow: `0 15px 30px ${accentColor}33`,
+      willChange: "transform"
     },
     divider: {
       position: "relative",
       width: "100%",
       height: "1px",
       backgroundColor: borderCol,
-      margin: "35px 0",
+      margin: "25px 0",
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
     },
     dividerText: {
       position: "absolute",
-      backgroundColor: isLight2 ? "#f9fafb" : "#0d0d0d",
+      backgroundColor: cardBg,
       padding: "0 12px",
       color: textSecondary,
       fontSize: "11px",
@@ -5996,7 +5971,6 @@ var AuraRegister = ({
     },
     socialArea: {
       display: "flex",
-      justifyContent: "center",
       gap: "12px"
     },
     socialBtn: {
@@ -6004,158 +5978,134 @@ var AuraRegister = ({
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      padding: "14px",
+      gap: "8px",
+      padding: "12px",
       backgroundColor: inputBg,
       border: `1px solid ${borderCol}`,
-      borderRadius: "14px",
+      borderRadius: "12px",
       color: textPrimary,
-      fontSize: "18px",
+      fontSize: "13px",
+      fontWeight: "600",
       cursor: "pointer",
       transition: "all 0.3s ease"
     }
   };
-  return /* @__PURE__ */ import_react22.default.createElement("div", { ref: containerRef, style: styles.container }, /* @__PURE__ */ import_react22.default.createElement("div", { ref: bgRef, style: styles.background }), /* @__PURE__ */ import_react22.default.createElement(
-    "div",
+  return /* @__PURE__ */ import_react22.default.createElement("div", { ref: containerRef, style: styles.container }, /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.formSide }, /* @__PURE__ */ import_react22.default.createElement("div", { ref: cardRef, style: styles.card }, /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "20px" } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: { width: "36px", height: "36px", borderRadius: "10px", backgroundColor: `${accentColor}22`, display: "flex", alignItems: "center", justifyContent: "center", color: accentColor, fontSize: "18px" } }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiShield, null)), /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontWeight: "700", letterSpacing: "1px", color: textSecondary, fontSize: "13px" } }, "AURA UI")), /* @__PURE__ */ import_react22.default.createElement("h1", { ref: titleRef, style: styles.title }, /* @__PURE__ */ import_react22.default.createElement(SplitText, { text: title })), /* @__PURE__ */ import_react22.default.createElement("p", { style: styles.subtitle }, subtitle), /* @__PURE__ */ import_react22.default.createElement("form", { ref: formRef, style: styles.form, onSubmit: handleSubmit }, /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react22.default.createElement("label", { style: styles.inputLabel }, "Full Name"), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiUser, { style: styles.inputIcon }), /* @__PURE__ */ import_react22.default.createElement(
+    "input",
     {
-      ref: cardRef,
-      style: styles.card,
-      onMouseMove: handleMouseMove,
-      onMouseLeave: handleMouseLeave
-    },
-    /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
-      width: "56px",
-      height: "56px",
-      borderRadius: "16px",
-      backgroundColor: `${accentColor}22`,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: accentColor,
-      fontSize: "28px"
-    } }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiShield, null))),
-    /* @__PURE__ */ import_react22.default.createElement("h1", { ref: titleRef, style: styles.title }, /* @__PURE__ */ import_react22.default.createElement(SplitText, { text: title })),
-    /* @__PURE__ */ import_react22.default.createElement("p", { style: styles.subtitle }, subtitle),
-    /* @__PURE__ */ import_react22.default.createElement("form", { ref: formRef, style: styles.form, onSubmit: handleSubmit }, /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react22.default.createElement("label", { style: styles.inputLabel }, "Full Name"), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiUser, { style: styles.inputIcon }), /* @__PURE__ */ import_react22.default.createElement(
-      "input",
-      {
-        name: "name",
-        type: "text",
-        placeholder: "John Doe",
-        required: true,
-        value: formData.name,
-        onChange: handleChange,
-        style: styles.input,
-        onFocus: (e) => {
-          e.target.style.borderColor = accentColor;
-          e.target.style.boxShadow = `0 0 15px ${accentColor}11`;
-          e.target.previousSibling.style.color = accentColor;
-        },
-        onBlur: (e) => {
-          e.target.style.borderColor = borderCol;
-          e.target.style.boxShadow = "none";
-          e.target.previousSibling.style.color = textSecondary;
-        }
-      }
-    ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react22.default.createElement("label", { style: styles.inputLabel }, "Email Address"), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiMail, { style: styles.inputIcon }), /* @__PURE__ */ import_react22.default.createElement(
-      "input",
-      {
-        name: "email",
-        type: "email",
-        placeholder: "name@aura.com",
-        required: true,
-        value: formData.email,
-        onChange: handleChange,
-        style: styles.input,
-        onFocus: (e) => {
-          e.target.style.borderColor = accentColor;
-          e.target.style.boxShadow = `0 0 15px ${accentColor}11`;
-          e.target.previousSibling.style.color = accentColor;
-        },
-        onBlur: (e) => {
-          e.target.style.borderColor = borderCol;
-          e.target.style.boxShadow = "none";
-          e.target.previousSibling.style.color = textSecondary;
-        }
-      }
-    ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react22.default.createElement("label", { style: styles.inputLabel }, "Secret Passcode"), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiLock, { style: styles.inputIcon }), /* @__PURE__ */ import_react22.default.createElement(
-      "input",
-      {
-        name: "password",
-        type: "password",
-        placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-        required: true,
-        value: formData.password,
-        onChange: handleChange,
-        style: styles.input,
-        onFocus: (e) => {
-          e.target.style.borderColor = accentColor;
-          e.target.style.boxShadow = `0 0 15px ${accentColor}11`;
-          e.target.previousSibling.style.color = accentColor;
-        },
-        onBlur: (e) => {
-          e.target.style.borderColor = borderCol;
-          e.target.style.boxShadow = "none";
-          e.target.previousSibling.style.color = textSecondary;
-        }
+      name: "fullname",
+      type: "text",
+      placeholder: "John Doe",
+      required: true,
+      value: data.fullname || "",
+      onChange: handleChange,
+      style: styles.input,
+      onFocus: (e) => {
+        e.target.style.borderColor = accentColor;
+        e.target.previousSibling.style.color = accentColor;
+      },
+      onBlur: (e) => {
+        e.target.style.borderColor = borderCol;
+        e.target.previousSibling.style.color = textSecondary;
       }
-    ))), /* @__PURE__ */ import_react22.default.createElement(
-      "button",
-      {
-        type: "submit",
-        style: styles.submitBtn,
-        onMouseEnter: (e) => {
-          import_gsap22.gsap.to(e.currentTarget, { y: -4, scale: 1.01, boxShadow: `0 25px 50px ${accentColor}44`, duration: 0.4 });
-        },
-        onMouseLeave: (e) => {
-          import_gsap22.gsap.to(e.currentTarget, { y: 0, scale: 1, boxShadow: `0 15px 30px ${accentColor}33`, duration: 0.4 });
-        },
-        onMouseMove: handleMagneticMove,
-        onMouseUp: handleMagneticLeave
+    }
+  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react22.default.createElement("label", { style: styles.inputLabel }, "Email Address"), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiMail, { style: styles.inputIcon }), /* @__PURE__ */ import_react22.default.createElement(
+    "input",
+    {
+      name: "email",
+      type: "email",
+      placeholder: "name@company.com",
+      required: true,
+      value: data.email || "",
+      onChange: handleChange,
+      style: styles.input,
+      onFocus: (e) => {
+        e.target.style.borderColor = accentColor;
+        e.target.previousSibling.style.color = accentColor;
       },
-      "Create Account ",
-      /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiArrowRight, { fontSize: "18px" })
-    )),
-    /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.footerLinks }, "Already part of the network?", /* @__PURE__ */ import_react22.default.createElement(
-      "span",
-      {
-        style: styles.link,
-        onClick: onLogin,
-        onMouseEnter: (e) => e.currentTarget.style.opacity = 0.7,
-        onMouseLeave: (e) => e.currentTarget.style.opacity = 1
+      onBlur: (e) => {
+        e.target.style.borderColor = borderCol;
+        e.target.previousSibling.style.color = textSecondary;
+      }
+    }
+  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react22.default.createElement("label", { style: styles.inputLabel }, "Contact Number"), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiPhone, { style: styles.inputIcon }), /* @__PURE__ */ import_react22.default.createElement(
+    "input",
+    {
+      name: "contact",
+      type: "tel",
+      placeholder: "+1 (555) 000-0000",
+      required: true,
+      value: data.contact || "",
+      onChange: handleChange,
+      style: styles.input,
+      onFocus: (e) => {
+        e.target.style.borderColor = accentColor;
+        e.target.previousSibling.style.color = accentColor;
       },
-      "Sign In"
-    )),
-    /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.divider }, /* @__PURE__ */ import_react22.default.createElement("span", { style: styles.dividerText }, "Sign Up With")),
-    /* @__PURE__ */ import_react22.default.createElement("div", { ref: socialRef, style: styles.socialArea }, /* @__PURE__ */ import_react22.default.createElement(
-      "button",
-      {
-        style: styles.socialBtn,
-        onMouseEnter: (e) => {
-          import_gsap22.gsap.to(e.currentTarget, { backgroundColor: isLight2 ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.06)", y: -2 });
-          e.currentTarget.style.borderColor = accentColor;
-        },
-        onMouseLeave: (e) => {
-          import_gsap22.gsap.to(e.currentTarget, { backgroundColor: inputBg, y: 0 });
-          e.currentTarget.style.borderColor = borderCol;
-        }
+      onBlur: (e) => {
+        e.target.style.borderColor = borderCol;
+        e.target.previousSibling.style.color = textSecondary;
+      }
+    }
+  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ import_react22.default.createElement("label", { style: styles.inputLabel }, "Password"), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiLock, { style: styles.inputIcon }), /* @__PURE__ */ import_react22.default.createElement(
+    "input",
+    {
+      name: "password",
+      type: showPassword ? "text" : "password",
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+      required: true,
+      value: data.password || "",
+      onChange: handleChange,
+      style: styles.input,
+      onFocus: (e) => {
+        e.target.style.borderColor = accentColor;
+        e.target.previousSibling.style.color = accentColor;
       },
-      /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiGithub, null)
-    ), /* @__PURE__ */ import_react22.default.createElement(
-      "button",
-      {
-        style: styles.socialBtn,
-        onMouseEnter: (e) => {
-          import_gsap22.gsap.to(e.currentTarget, { backgroundColor: isLight2 ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.06)", y: -2 });
-          e.currentTarget.style.borderColor = accentColor;
-        },
-        onMouseLeave: (e) => {
-          import_gsap22.gsap.to(e.currentTarget, { backgroundColor: inputBg, y: 0 });
-          e.currentTarget.style.borderColor = borderCol;
-        }
+      onBlur: (e) => {
+        e.target.style.borderColor = borderCol;
+        e.target.previousSibling.style.color = textSecondary;
+      }
+    }
+  ), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.eyeIcon, onClick: () => setShowPassword(!showPassword) }, showPassword ? /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiEyeOff, null) : /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiEye, null)))), /* @__PURE__ */ import_react22.default.createElement("label", { style: styles.checkboxWrapper }, /* @__PURE__ */ import_react22.default.createElement(
+    "input",
+    {
+      type: "checkbox",
+      name: "isSeller",
+      checked: data.isSeller || false,
+      onChange: handleChange,
+      style: styles.checkboxInput
+    }
+  ), /* @__PURE__ */ import_react22.default.createElement("span", { style: styles.checkboxLabel }, "Register me as a Seller account")), /* @__PURE__ */ import_react22.default.createElement(
+    "button",
+    {
+      type: "submit",
+      style: styles.submitBtn,
+      onMouseEnter: (e) => import_gsap22.gsap.to(e.currentTarget, { scale: 1.02, duration: 0.4 }),
+      onMouseLeave: (e) => import_gsap22.gsap.to(e.currentTarget, { scale: 1, duration: 0.4 }),
+      onMouseMove: handleMagneticMove,
+      onMouseUp: handleMagneticLeave
+    },
+    "Create Account ",
+    /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiArrowRight, { fontSize: "18px" })
+  )), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.footerLinks }, "Already have an account? ", /* @__PURE__ */ import_react22.default.createElement("span", { style: styles.link, onClick: onLogin }, "Sign In")), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.divider }, /* @__PURE__ */ import_react22.default.createElement("span", { style: styles.dividerText }, "Or Register With")), /* @__PURE__ */ import_react22.default.createElement("div", { ref: socialRef, style: styles.socialArea }, providersToUse.map((provider, i) => /* @__PURE__ */ import_react22.default.createElement(
+    "button",
+    {
+      key: i,
+      type: "button",
+      onClick: provider.onClick,
+      style: styles.socialBtn,
+      onMouseEnter: (e) => {
+        import_gsap22.gsap.to(e.currentTarget, { backgroundColor: isLight2 ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.06)", y: -2 });
+        e.currentTarget.style.borderColor = accentColor;
       },
-      /* @__PURE__ */ import_react22.default.createElement(import_fi19.FiFacebook, null)
-    ))
-  ));
+      onMouseLeave: (e) => {
+        import_gsap22.gsap.to(e.currentTarget, { backgroundColor: inputBg, y: 0 });
+        e.currentTarget.style.borderColor = borderCol;
+      }
+    },
+    provider.icon,
+    /* @__PURE__ */ import_react22.default.createElement("span", { style: { display: providersToUse.length > 2 ? "none" : "inline" } }, provider.name)
+  ))))), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.imageSide }, /* @__PURE__ */ import_react22.default.createElement("img", { ref: imageRef, src: sideImage, alt: "Register Side Cover", style: styles.backgroundImage }), /* @__PURE__ */ import_react22.default.createElement("div", { style: styles.overlay })));
 };
 
 // src/components/Tooltip/Tooltip.jsx