@moontra/moonui-pro 3.4.13 → 3.4.15

package/dist/index.d.ts

@@ -2080,6 +2080,14 @@ interface FloatingDockProps extends Omit<React__default.HTMLAttributes<HTMLDivEl
      * Toggle button ikonu
      */
     toggleIcon?: React__default.ReactNode;
+    /**
+     * Toggle button arkaplan rengi (default: "bg-background/95")
+     */
+    toggleButtonBg?: string;
+    /**
+     * Toggle button border rengi (default: "border-border")
+     */
+    toggleButtonBorder?: string;
 }
 declare const FloatingDock: React__default.ForwardRefExoticComponent<FloatingDockProps & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.mjs

@@ -17344,6 +17344,8 @@ var FloatingDockInternal = React71__default.forwardRef(
     mobileBreakpoint = "lg",
     autoHideDelay = 5e3,
     toggleIcon,
+    toggleButtonBg = "bg-background/95",
+    toggleButtonBorder = "border-border",
     ...props
   }, ref) => {
     const [isMobileOpen, setIsMobileOpen] = useState(false);
@@ -17375,24 +17377,6 @@ var FloatingDockInternal = React71__default.forwardRef(
         }
       };
     }, [isMobileOpen, autoHideDelay, mobileMode, isMobile]);
-    const slideVariants = {
-      right: {
-        hidden: { x: "calc(100% + 24px)", opacity: 0 },
-        visible: { x: 0, opacity: 1 }
-      },
-      left: {
-        hidden: { x: "calc(-100% - 24px)", opacity: 0 },
-        visible: { x: 0, opacity: 1 }
-      },
-      bottom: {
-        hidden: { y: "calc(100% + 24px)", opacity: 0 },
-        visible: { y: 0, opacity: 1 }
-      },
-      top: {
-        hidden: { y: "calc(-100% - 24px)", opacity: 0 },
-        visible: { y: 0, opacity: 1 }
-      }
-    };
     const getPositionClass = () => {
       if (containerMode) {
         switch (position) {
@@ -17422,35 +17406,6 @@ var FloatingDockInternal = React71__default.forwardRef(
         }
       }
     };
-    const getToggleButtonClass = () => {
-      if (containerMode) {
-        switch (position) {
-          case "right":
-            return "absolute right-2 top-1/2 -translate-y-1/2";
-          case "left":
-            return "absolute left-2 top-1/2 -translate-y-1/2";
-          case "bottom":
-            return "absolute bottom-2 left-1/2 -translate-x-1/2";
-          case "top":
-            return "absolute top-2 left-1/2 -translate-x-1/2";
-          default:
-            return "absolute right-2 top-1/2 -translate-y-1/2";
-        }
-      } else {
-        switch (position) {
-          case "right":
-            return "fixed right-2 top-1/2 -translate-y-1/2";
-          case "left":
-            return "fixed left-2 top-1/2 -translate-y-1/2";
-          case "bottom":
-            return "fixed bottom-2 left-1/2 -translate-x-1/2";
-          case "top":
-            return "fixed top-2 left-1/2 -translate-x-1/2";
-          default:
-            return "fixed right-2 top-1/2 -translate-y-1/2";
-        }
-      }
-    };
     const getToggleIconRotation = () => {
       if (!isMobileOpen) {
         switch (position) {
@@ -17480,6 +17435,21 @@ var FloatingDockInternal = React71__default.forwardRef(
         }
       }
     };
+    const getSlideOffset = () => {
+      const offset4 = "calc(100% + 56px)";
+      switch (position) {
+        case "right":
+          return { x: offset4, y: 0 };
+        case "left":
+          return { x: `-${offset4}`, y: 0 };
+        case "bottom":
+          return { x: 0, y: offset4 };
+        case "top":
+          return { x: 0, y: `-${offset4}` };
+        default:
+          return { x: offset4, y: 0 };
+      }
+    };
     if (!isMobile || mobileMode === "always") {
       return /* @__PURE__ */ jsx(
         motion.div,
@@ -17511,88 +17481,70 @@ var FloatingDockInternal = React71__default.forwardRef(
     if (mobileMode === "hidden") {
       return null;
     }
-    return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-      /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          className: cn(
-            "z-[99999]",
-            getPositionClass()
-          ),
-          variants: slideVariants[position || "bottom"],
-          initial: "hidden",
-          animate: isMobileOpen ? "visible" : "hidden",
-          transition: { duration: 0.3, ease: "easeOut" },
-          children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref,
-                className: cn(
-                  floatingDockVariants({ size: size4, position }),
-                  className
-                ),
-                children: items.map((item) => /* @__PURE__ */ jsx(
-                  DockIcon,
-                  {
-                    item,
-                    size: size4 || "md",
-                    magnification,
-                    showTooltip,
-                    position: position || "bottom"
-                  },
-                  item.id
-                ))
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              motion.button,
-              {
-                className: cn(
-                  "absolute p-2.5 rounded-full bg-background/95 backdrop-blur-md border border-border shadow-lg hover:shadow-xl transition-shadow",
-                  position === "right" && "-left-14 top-1/2 -translate-y-1/2",
-                  position === "left" && "-right-14 top-1/2 -translate-y-1/2",
-                  position === "bottom" && "left-1/2 -translate-x-1/2 -top-14",
-                  position === "top" && "left-1/2 -translate-x-1/2 -bottom-14"
-                ),
-                onClick: () => setIsMobileOpen(!isMobileOpen),
-                whileTap: { scale: 0.95 },
-                children: /* @__PURE__ */ jsx(
-                  motion.div,
-                  {
-                    animate: { rotate: getToggleIconRotation() },
-                    transition: { duration: 0.3, ease: "easeOut" },
-                    children: toggleIcon || /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
-                  }
-                )
-              }
-            )
-          ] })
-        }
-      ),
-      !isMobileOpen && /* @__PURE__ */ jsx(
-        motion.button,
-        {
-          className: cn(
-            "z-[99999] p-2.5 rounded-full bg-background/95 backdrop-blur-md border border-border shadow-lg hover:shadow-xl transition-shadow",
-            getToggleButtonClass()
+    const slideOffset = getSlideOffset();
+    return /* @__PURE__ */ jsx("div", { className: cn("z-[99999]", getPositionClass()), children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "relative",
+        initial: false,
+        animate: {
+          x: isMobileOpen ? 0 : slideOffset.x,
+          y: isMobileOpen ? 0 : slideOffset.y
+        },
+        transition: {
+          duration: 0.35,
+          ease: [0.4, 0, 0.2, 1]
+          // cubic-bezier for smooth motion
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              className: cn(
+                "absolute p-2.5 rounded-full backdrop-blur-md border shadow-lg hover:shadow-xl transition-shadow",
+                toggleButtonBg,
+                toggleButtonBorder,
+                position === "right" && "-left-14 top-1/2 -translate-y-1/2",
+                position === "left" && "-right-14 top-1/2 -translate-y-1/2",
+                position === "bottom" && "left-1/2 -translate-x-1/2 -top-14",
+                position === "top" && "left-1/2 -translate-x-1/2 -bottom-14"
+              ),
+              onClick: () => setIsMobileOpen(!isMobileOpen),
+              whileTap: { scale: 0.95 },
+              children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  animate: { rotate: getToggleIconRotation() },
+                  transition: { duration: 0.3, ease: "easeOut" },
+                  children: toggleIcon || /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+                }
+              )
+            }
           ),
-          onClick: () => setIsMobileOpen(true),
-          whileTap: { scale: 0.95 },
-          initial: { opacity: 0, scale: 0.8 },
-          animate: { opacity: 1, scale: 1 },
-          transition: { duration: 0.3 },
-          children: /* @__PURE__ */ jsx(
-            motion.div,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              animate: { rotate: getToggleIconRotation() },
-              transition: { duration: 0.3, ease: "easeOut" },
-              children: toggleIcon || /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+              ref,
+              className: cn(
+                floatingDockVariants({ size: size4, position }),
+                className
+              ),
+              children: items.map((item) => /* @__PURE__ */ jsx(
+                DockIcon,
+                {
+                  item,
+                  size: size4 || "md",
+                  magnification,
+                  showTooltip,
+                  position: position || "bottom"
+                },
+                item.id
+              ))
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    ) });
   }
 );
 FloatingDockInternal.displayName = "FloatingDockInternal";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "3.4.13",
+    "version": "3.4.15",
     "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
     "type": "module",
     "main": "dist/index.mjs",