@moontra/moonui-pro 3.4.11 → 3.4.13

package/dist/index.d.ts

@@ -2061,6 +2061,25 @@ interface FloatingDockProps extends Omit<React__default.HTMLAttributes<HTMLDivEl
      * Container mode - docs örnekleri için
      */
     containerMode?: boolean;
+    /**
+     * Mobil davranış modu
+     * - "hidden": Mobilde tamamen gizli
+     * - "toggle": Toggle button ile göster/gizle (default)
+     * - "always": Her zaman görünür
+     */
+    mobileMode?: "hidden" | "toggle" | "always";
+    /**
+     * Mobil breakpoint (default: "lg" = 1024px)
+     */
+    mobileBreakpoint?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Auto-hide süresi (ms, default: 5000)
+     */
+    autoHideDelay?: number;
+    /**
+     * Toggle button ikonu
+     */
+    toggleIcon?: React__default.ReactNode;
 }
 declare const FloatingDock: React__default.ForwardRefExoticComponent<FloatingDockProps & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.mjs

@@ -17340,8 +17340,59 @@ var FloatingDockInternal = React71__default.forwardRef(
     size: size4 = "md",
     position = "bottom",
     containerMode = false,
+    mobileMode = "toggle",
+    mobileBreakpoint = "lg",
+    autoHideDelay = 5e3,
+    toggleIcon,
     ...props
   }, ref) => {
+    const [isMobileOpen, setIsMobileOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const autoHideTimerRef = useRef(null);
+    useEffect(() => {
+      const breakpoints = {
+        sm: 640,
+        md: 768,
+        lg: 1024,
+        xl: 1280
+      };
+      const checkMobile = () => {
+        setIsMobile(window.innerWidth < breakpoints[mobileBreakpoint]);
+      };
+      checkMobile();
+      window.addEventListener("resize", checkMobile);
+      return () => window.removeEventListener("resize", checkMobile);
+    }, [mobileBreakpoint]);
+    useEffect(() => {
+      if (isMobileOpen && mobileMode === "toggle" && isMobile) {
+        autoHideTimerRef.current = setTimeout(() => {
+          setIsMobileOpen(false);
+        }, autoHideDelay);
+      }
+      return () => {
+        if (autoHideTimerRef.current) {
+          clearTimeout(autoHideTimerRef.current);
+        }
+      };
+    }, [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) {
@@ -17371,31 +17422,177 @@ var FloatingDockInternal = React71__default.forwardRef(
         }
       }
     };
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        className: cn(
-          floatingDockVariants({ size: size4, position }),
-          getPositionClass(),
-          className
-        ),
-        initial: { opacity: 0, scale: 0.95 },
-        animate: { opacity: 1, scale: 1 },
-        transition: { duration: 0.4, ease: "easeOut" },
-        children: items.map((item) => /* @__PURE__ */ jsx(
-          DockIcon,
-          {
-            item,
-            size: size4 || "md",
-            magnification,
-            showTooltip,
-            position: position || "bottom"
-          },
-          item.id
-        ))
+    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) {
+          case "right":
+            return 0;
+          case "left":
+            return 180;
+          case "bottom":
+            return 90;
+          case "top":
+            return -90;
+          default:
+            return 0;
+        }
+      } else {
+        switch (position) {
+          case "right":
+            return 180;
+          case "left":
+            return 0;
+          case "bottom":
+            return -90;
+          case "top":
+            return 90;
+          default:
+            return 180;
+        }
+      }
+    };
+    if (!isMobile || mobileMode === "always") {
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref,
+          className: cn(
+            floatingDockVariants({ size: size4, position }),
+            getPositionClass(),
+            "z-[99999]",
+            className
+          ),
+          initial: { opacity: 0, scale: 0.95 },
+          animate: { opacity: 1, scale: 1 },
+          transition: { duration: 0.4, ease: "easeOut" },
+          children: items.map((item) => /* @__PURE__ */ jsx(
+            DockIcon,
+            {
+              item,
+              size: size4 || "md",
+              magnification,
+              showTooltip,
+              position: position || "bottom"
+            },
+            item.id
+          ))
+        }
+      );
+    }
+    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()
+          ),
+          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,
+            {
+              animate: { rotate: getToggleIconRotation() },
+              transition: { duration: 0.3, ease: "easeOut" },
+              children: toggleIcon || /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+            }
+          )
+        }
+      )
+    ] });
   }
 );
 FloatingDockInternal.displayName = "FloatingDockInternal";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "3.4.11",
+    "version": "3.4.13",
     "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",