sa2kit 2.0.1 → 2.0.3

package/dist/navigation/index.d.mts

@@ -0,0 +1,93 @@
+import React__default, { ReactNode } from 'react';
+
+type NavigationDirection = 'horizontal' | 'vertical';
+type NavigationPosition = 'top' | 'bottom' | 'left' | 'right';
+interface NavigationItem {
+    id: string;
+    label: string;
+    href: string;
+    icon?: React.ReactNode;
+    isExternal?: boolean;
+    target?: '_blank' | '_self';
+}
+interface NavigationConfig {
+    direction: NavigationDirection;
+    position: NavigationPosition;
+    items: NavigationItem[];
+    avatar?: {
+        src: string;
+        alt?: string;
+    };
+    logo?: {
+        src: string;
+        alt?: string;
+    };
+}
+interface NavigationProps {
+    config: NavigationConfig;
+    isOpen: boolean;
+    onToggle: () => void;
+    activeItemId?: string;
+    onItemClick?: (item: NavigationItem) => void;
+    className?: string;
+}
+
+declare const Navigation: React__default.FC<NavigationProps>;
+
+interface NavigationItemProps {
+    item: NavigationItem;
+    direction: NavigationDirection;
+    isActive?: boolean;
+    onClick: (item: NavigationItem) => void;
+}
+declare const NavigationItemComponent: React__default.FC<NavigationItemProps>;
+
+interface NavigationToggleProps {
+    isOpen: boolean;
+    onClick: () => void;
+    position: NavigationPosition;
+}
+declare const NavigationToggle: React__default.FC<NavigationToggleProps>;
+
+interface FloatingMenuProps {
+    /**
+     * 触发按钮的内容
+     */
+    trigger: ReactNode;
+    /**
+     * 菜单内容
+     */
+    menu: ReactNode;
+    /**
+     * 初始位置
+     */
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * 是否默认打开菜单
+     */
+    defaultOpen?: boolean;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 菜单类名
+     */
+    menuClassName?: string;
+    /**
+     * 触发器类名
+     */
+    triggerClassName?: string;
+    /**
+     * z-index
+     */
+    zIndex?: number;
+}
+declare const FloatingMenu: React__default.FC<FloatingMenuProps>;
+
+declare const FloatingMenuExample: React__default.FC;
+
+export { FloatingMenu, FloatingMenuExample, Navigation, type NavigationConfig, type NavigationDirection, NavigationItemComponent as NavigationItem, type NavigationPosition, type NavigationProps, NavigationToggle };

package/dist/navigation/index.d.ts

@@ -0,0 +1,93 @@
+import React__default, { ReactNode } from 'react';
+
+type NavigationDirection = 'horizontal' | 'vertical';
+type NavigationPosition = 'top' | 'bottom' | 'left' | 'right';
+interface NavigationItem {
+    id: string;
+    label: string;
+    href: string;
+    icon?: React.ReactNode;
+    isExternal?: boolean;
+    target?: '_blank' | '_self';
+}
+interface NavigationConfig {
+    direction: NavigationDirection;
+    position: NavigationPosition;
+    items: NavigationItem[];
+    avatar?: {
+        src: string;
+        alt?: string;
+    };
+    logo?: {
+        src: string;
+        alt?: string;
+    };
+}
+interface NavigationProps {
+    config: NavigationConfig;
+    isOpen: boolean;
+    onToggle: () => void;
+    activeItemId?: string;
+    onItemClick?: (item: NavigationItem) => void;
+    className?: string;
+}
+
+declare const Navigation: React__default.FC<NavigationProps>;
+
+interface NavigationItemProps {
+    item: NavigationItem;
+    direction: NavigationDirection;
+    isActive?: boolean;
+    onClick: (item: NavigationItem) => void;
+}
+declare const NavigationItemComponent: React__default.FC<NavigationItemProps>;
+
+interface NavigationToggleProps {
+    isOpen: boolean;
+    onClick: () => void;
+    position: NavigationPosition;
+}
+declare const NavigationToggle: React__default.FC<NavigationToggleProps>;
+
+interface FloatingMenuProps {
+    /**
+     * 触发按钮的内容
+     */
+    trigger: ReactNode;
+    /**
+     * 菜单内容
+     */
+    menu: ReactNode;
+    /**
+     * 初始位置
+     */
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * 是否默认打开菜单
+     */
+    defaultOpen?: boolean;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 菜单类名
+     */
+    menuClassName?: string;
+    /**
+     * 触发器类名
+     */
+    triggerClassName?: string;
+    /**
+     * z-index
+     */
+    zIndex?: number;
+}
+declare const FloatingMenu: React__default.FC<FloatingMenuProps>;
+
+declare const FloatingMenuExample: React__default.FC;
+
+export { FloatingMenu, FloatingMenuExample, Navigation, type NavigationConfig, type NavigationDirection, NavigationItemComponent as NavigationItem, type NavigationPosition, type NavigationProps, NavigationToggle };

package/dist/navigation/index.js

@@ -0,0 +1,453 @@
+'use strict';
+
+var React5 = require('react');
+var clsx = require('clsx');
+var reactDom = require('react-dom');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React5__default = /*#__PURE__*/_interopDefault(React5);
+
+// src/navigation/Navigation.tsx
+var NavigationItemComponent = ({
+  item,
+  direction,
+  isActive,
+  onClick
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onClick(item);
+  };
+  const getItemClasses = () => {
+    const baseClasses = `
+      group relative flex items-center gap-3
+      transition-all duration-300 ease-in-out
+      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
+      rounded-lg
+    `;
+    const directionClasses = direction === "vertical" ? "px-4 py-3 w-full justify-start" : "px-3 py-2 justify-center";
+    const stateClasses = isActive ? "bg-blue-500 text-white shadow-lg" : item.isExternal ? "text-gray-700 hover:bg-purple-50 hover:text-purple-600 border border-purple-200" : "text-gray-700 hover:bg-blue-50 hover:text-blue-600";
+    return baseClasses + " " + directionClasses + " " + stateClasses;
+  };
+  return /* @__PURE__ */ React5__default.default.createElement(
+    "a",
+    {
+      href: item.href,
+      onClick: handleClick,
+      target: item.target,
+      rel: item.isExternal ? "noopener noreferrer" : void 0,
+      className: getItemClasses()
+    },
+    item.icon && /* @__PURE__ */ React5__default.default.createElement("span", { className: "flex-shrink-0" }, item.icon),
+    /* @__PURE__ */ React5__default.default.createElement("span", { className: clsx.clsx("font-medium", direction === "vertical" ? "text-sm" : "text-xs") }, item.label),
+    item.isExternal && /* @__PURE__ */ React5__default.default.createElement(
+      "svg",
+      {
+        className: "w-3 h-3 opacity-60 group-hover:opacity-100 transition-opacity",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24"
+      },
+      /* @__PURE__ */ React5__default.default.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+        }
+      )
+    ),
+    direction === "vertical" && isActive && /* @__PURE__ */ React5__default.default.createElement("div", { className: "absolute left-1 top-1/2 transform -translate-y-1/2 w-1 h-6 bg-white rounded-full" })
+  );
+};
+var NavigationItem_default = NavigationItemComponent;
+var Navigation = ({
+  config,
+  isOpen,
+  activeItemId,
+  onItemClick,
+  className = ""
+}) => {
+  const { direction, position, items, avatar, logo } = config;
+  const getContainerClasses = () => {
+    const baseClasses = `
+      fixed z-[90]
+      bg-white/95 backdrop-blur-lg
+      border border-gray-200/50
+      shadow-2xl
+      transition-all duration-500 ease-in-out
+    `;
+    if (direction === "vertical") {
+      const verticalClasses = "h-screen w-64 flex flex-col";
+      const positionClasses = position === "left" ? "left-0 top-0 " + (isOpen ? "translate-x-0" : "-translate-x-full") : "right-0 top-0 " + (isOpen ? "translate-x-0" : "translate-x-full");
+      return baseClasses + " " + verticalClasses + " " + positionClasses;
+    } else {
+      const horizontalClasses = "w-full h-16 flex items-center";
+      const positionClasses = position === "top" ? "top-0 left-0 right-0 " + (isOpen ? "translate-y-0" : "-translate-y-full") : "bottom-0 left-0 right-0 " + (isOpen ? "translate-y-0" : "translate-y-full");
+      return baseClasses + " " + horizontalClasses + " " + positionClasses;
+    }
+  };
+  const getContentClasses = () => {
+    if (direction === "vertical") {
+      return "flex flex-col h-full p-4";
+    } else {
+      return "flex items-center justify-between w-full px-6";
+    }
+  };
+  const getItemsListClasses = () => {
+    if (direction === "vertical") {
+      return "flex flex-col gap-2 flex-1 overflow-y-auto mt-4";
+    } else {
+      return "flex items-center gap-4";
+    }
+  };
+  const handleItemClick = (item) => {
+    if (item.isExternal) {
+      window.open(item.href, item.target || "_blank");
+    } else if (item.href.startsWith("#")) {
+      const element = document.getElementById(item.id);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    } else {
+      window.location.href = item.href;
+    }
+    onItemClick?.(item);
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React5__default.default.createElement("nav", { className: clsx.clsx(getContainerClasses(), className) }, /* @__PURE__ */ React5__default.default.createElement("div", { className: getContentClasses() }, logo && /* @__PURE__ */ React5__default.default.createElement("div", { className: "flex items-center justify-center mb-4" }, /* @__PURE__ */ React5__default.default.createElement(
+    "img",
+    {
+      src: logo.src,
+      alt: logo.alt || "Logo",
+      className: "h-8 w-auto"
+    }
+  )), direction === "vertical" && /* @__PURE__ */ React5__default.default.createElement("div", { className: "h-12 flex-shrink-0" }), /* @__PURE__ */ React5__default.default.createElement("div", { className: getItemsListClasses() }, items.map((item) => /* @__PURE__ */ React5__default.default.createElement(
+    NavigationItem_default,
+    {
+      key: item.id,
+      item,
+      direction,
+      isActive: activeItemId === item.id,
+      onClick: handleItemClick
+    }
+  ))), avatar && direction === "vertical" && /* @__PURE__ */ React5__default.default.createElement("div", { className: "flex items-center justify-center mt-auto pt-4" }, /* @__PURE__ */ React5__default.default.createElement(
+    "img",
+    {
+      src: avatar.src,
+      alt: avatar.alt || "Avatar",
+      className: "w-10 h-10 rounded-full border-2 border-gray-200"
+    }
+  )), avatar && direction === "horizontal" && /* @__PURE__ */ React5__default.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React5__default.default.createElement(
+    "img",
+    {
+      src: avatar.src,
+      alt: avatar.alt || "Avatar",
+      className: "w-8 h-8 rounded-full border-2 border-gray-200"
+    }
+  ))));
+};
+var Navigation_default = Navigation;
+var NavigationToggle = ({
+  isOpen,
+  onClick,
+  position
+}) => {
+  const getPositionClasses = () => {
+    switch (position) {
+      case "top":
+        return "top-4 left-4";
+      case "bottom":
+        return "bottom-4 left-4";
+      case "left":
+        return "top-4 left-4";
+      case "right":
+        return "top-4 right-4";
+      default:
+        return "top-4 left-4";
+    }
+  };
+  return /* @__PURE__ */ React5__default.default.createElement(
+    "button",
+    {
+      onClick,
+      className: clsx.clsx(
+        "fixed",
+        getPositionClasses(),
+        "z-[100] p-3 rounded-xl bg-white/90 backdrop-blur-md shadow-lg hover:shadow-xl border border-gray-200/50 transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+      ),
+      "aria-label": isOpen ? "\u5173\u95ED\u5BFC\u822A\u680F" : "\u6253\u5F00\u5BFC\u822A\u680F"
+    },
+    /* @__PURE__ */ React5__default.default.createElement("div", { className: "w-5 h-5 flex flex-col justify-center items-center" }, /* @__PURE__ */ React5__default.default.createElement(
+      "span",
+      {
+        className: clsx.clsx(
+          "block w-5 h-0.5 bg-gray-600 rounded-full transform transition-all duration-300 ease-in-out",
+          isOpen ? "rotate-45 translate-y-0.5" : ""
+        )
+      }
+    ), /* @__PURE__ */ React5__default.default.createElement(
+      "span",
+      {
+        className: clsx.clsx(
+          "block w-5 h-0.5 bg-gray-600 rounded-full transform transition-all duration-300 ease-in-out mt-1",
+          isOpen ? "opacity-0 scale-0" : "opacity-100 scale-100"
+        )
+      }
+    ), /* @__PURE__ */ React5__default.default.createElement(
+      "span",
+      {
+        className: clsx.clsx(
+          "block w-5 h-0.5 bg-gray-600 rounded-full transform transition-all duration-300 ease-in-out mt-1",
+          isOpen ? "-rotate-45 -translate-y-2.5" : ""
+        )
+      }
+    ))
+  );
+};
+var NavigationToggle_default = NavigationToggle;
+var FloatingMenu = ({
+  trigger,
+  menu,
+  initialPosition = { x: 20, y: 20 },
+  defaultOpen = false,
+  className = "",
+  menuClassName = "",
+  triggerClassName = "",
+  zIndex = 1e3
+}) => {
+  const [position, setPosition] = React5.useState(initialPosition);
+  const [isMenuOpen, setIsMenuOpen] = React5.useState(defaultOpen);
+  const [menuDirection, setMenuDirection] = React5.useState("right");
+  const [isDragging, setIsDragging] = React5.useState(false);
+  const [dragOffset, setDragOffset] = React5.useState({ x: 0, y: 0 });
+  const containerRef = React5.useRef(null);
+  const [mounted, setMounted] = React5.useState(false);
+  const [hasDragged, setHasDragged] = React5.useState(false);
+  const dragTimerRef = React5.useRef(null);
+  const mouseDownPosRef = React5.useRef(null);
+  React5.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  React5.useEffect(() => {
+    if (!mounted || !containerRef.current) return;
+    const updateMenuDirection = () => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const windowWidth = window.innerWidth;
+      const middlePoint = windowWidth / 2;
+      setMenuDirection(rect.left < middlePoint ? "right" : "left");
+    };
+    updateMenuDirection();
+    window.addEventListener("resize", updateMenuDirection);
+    window.addEventListener("scroll", updateMenuDirection);
+    return () => {
+      window.removeEventListener("resize", updateMenuDirection);
+      window.removeEventListener("scroll", updateMenuDirection);
+    };
+  }, [mounted]);
+  const handleMouseDown = (e) => {
+    if (!containerRef.current) return;
+    e.stopPropagation();
+    mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+    const rect = containerRef.current.getBoundingClientRect();
+    setDragOffset({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+    setHasDragged(false);
+    setIsDragging(true);
+  };
+  React5.useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e) => {
+      if (mouseDownPosRef.current) {
+        const dx = Math.abs(e.clientX - mouseDownPosRef.current.x);
+        const dy = Math.abs(e.clientY - mouseDownPosRef.current.y);
+        if (dx > 3 || dy > 3) {
+          setHasDragged(true);
+        }
+      }
+      const newX = e.clientX - dragOffset.x;
+      const newY = e.clientY - dragOffset.y;
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      setPosition({
+        x: Math.min(Math.max(newX, 0), windowWidth - 50),
+        y: Math.min(Math.max(newY, 0), windowHeight - 50)
+      });
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      mouseDownPosRef.current = null;
+      if (dragTimerRef.current) {
+        window.clearTimeout(dragTimerRef.current);
+      }
+      dragTimerRef.current = window.setTimeout(() => {
+        setHasDragged(false);
+      }, 300);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, dragOffset]);
+  React5.useEffect(() => {
+    return () => {
+      if (dragTimerRef.current) {
+        window.clearTimeout(dragTimerRef.current);
+      }
+    };
+  }, []);
+  const toggleMenu = (e) => {
+    e.stopPropagation();
+    if (hasDragged) {
+      return;
+    }
+    setIsMenuOpen(!isMenuOpen);
+  };
+  React5.useEffect(() => {
+    if (!isMenuOpen) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isMenuOpen]);
+  React5.useEffect(() => {
+    if (!mounted) return;
+    const checkBoundaries = () => {
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      setPosition((prev) => {
+        const newX = Math.min(Math.max(prev.x, 0), windowWidth - 50);
+        const newY = Math.min(Math.max(prev.y, 0), windowHeight - 50);
+        if (newX !== prev.x || newY !== prev.y) {
+          return { x: newX, y: newY };
+        }
+        return prev;
+      });
+    };
+    window.addEventListener("resize", checkBoundaries);
+    return () => {
+      window.removeEventListener("resize", checkBoundaries);
+    };
+  }, [mounted]);
+  if (!mounted) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ React5__default.default.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: clsx.clsx("fixed select-none box-border", className),
+        style: {
+          left: position.x + "px",
+          top: position.y + "px",
+          zIndex
+        }
+      },
+      /* @__PURE__ */ React5__default.default.createElement(
+        "div",
+        {
+          className: clsx.clsx(
+            "flex items-center justify-center w-12 h-12 md:w-12 md:h-12 bg-white rounded-full shadow-md hover:shadow-lg cursor-grab active:cursor-grabbing transition-all duration-200 hover:scale-105 active:scale-95",
+            triggerClassName
+          ),
+          onMouseDown: handleMouseDown,
+          onClick: toggleMenu
+        },
+        trigger
+      ),
+      isMenuOpen && /* @__PURE__ */ React5__default.default.createElement(
+        "div",
+        {
+          className: clsx.clsx(
+            "absolute top-0 bg-white rounded-lg shadow-xl p-3 min-w-[200px] md:min-w-[200px] max-w-[300px] z-[1000] transition-all duration-200",
+            isMenuOpen ? "opacity-100 scale-100" : "opacity-0 scale-95",
+            menuDirection === "left" ? "right-[calc(100%+10px)]" : "left-[calc(100%+10px)]",
+            menuClassName
+          ),
+          onClick: (e) => e.stopPropagation(),
+          onMouseDown: (e) => e.stopPropagation(),
+          onMouseUp: (e) => e.stopPropagation(),
+          onTouchStart: (e) => e.stopPropagation(),
+          onTouchMove: (e) => e.stopPropagation(),
+          onTouchEnd: (e) => e.stopPropagation(),
+          onPointerDown: (e) => e.stopPropagation(),
+          onPointerUp: (e) => e.stopPropagation()
+        },
+        menu
+      )
+    ),
+    document.body
+  );
+};
+var FloatingMenu_default = FloatingMenu;
+var FloatingMenuExample = () => {
+  const [windowWidth, setWindowWidth] = React5.useState(0);
+  React5.useEffect(() => {
+    setWindowWidth(window.innerWidth);
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const menuItems = [
+    { id: 1, label: "\u9996\u9875", icon: "\u{1F3E0}" },
+    { id: 2, label: "\u8BBE\u7F6E", icon: "\u2699\uFE0F" },
+    { id: 3, label: "\u6D88\u606F", icon: "\u{1F4E9}" },
+    { id: 4, label: "\u5E2E\u52A9", icon: "\u2753" },
+    { id: 5, label: "\u9000\u51FA", icon: "\u{1F6AA}" }
+  ];
+  const handleMenuItemClick = (id) => {
+    console.log("\u70B9\u51FB\u4E86\u83DC\u5355\u9879: " + id);
+  };
+  return /* @__PURE__ */ React5__default.default.createElement("div", { className: "w-full h-screen bg-gray-100 relative p-8" }, /* @__PURE__ */ React5__default.default.createElement("div", { className: "max-w-2xl mx-auto bg-white rounded-2xl shadow-sm p-8 mt-12" }, /* @__PURE__ */ React5__default.default.createElement("h1", { className: "text-3xl font-bold mb-4 text-gray-900" }, "\u60AC\u6D6E\u83DC\u5355\u793A\u4F8B"), /* @__PURE__ */ React5__default.default.createElement("p", { className: "text-gray-600 leading-relaxed mb-6" }, "\u8FD9\u662F\u4E00\u4E2A\u53EF\u62D6\u62FD\u7684\u60AC\u6D6E\u83DC\u5355\u7EC4\u4EF6\u793A\u4F8B\u3002\u4F60\u53EF\u4EE5\u5C1D\u8BD5\u62D6\u52A8\u4E0B\u65B9\u7684 ", /* @__PURE__ */ React5__default.default.createElement("span", { className: "font-bold text-blue-600" }, "\u84DD\u8272\u6309\u94AE"), " \u5230\u5904\u79FB\u52A8\u3002"), /* @__PURE__ */ React5__default.default.createElement("div", { className: "bg-blue-50 border-l-4 border-blue-500 p-4 mb-6" }, /* @__PURE__ */ React5__default.default.createElement("p", { className: "text-sm text-blue-700" }, /* @__PURE__ */ React5__default.default.createElement("strong", null, "\u667A\u80FD\u5B9A\u4F4D\uFF1A"), " \u83DC\u5355\u4F1A\u6839\u636E\u6309\u94AE\u5728\u5C4F\u5E55\u4E0A\u7684\u4F4D\u7F6E\u81EA\u52A8\u8C03\u6574\u5F39\u51FA\u65B9\u5411\uFF08\u5411\u5DE6\u6216\u5411\u53F3\uFF09\u3002"))), /* @__PURE__ */ React5__default.default.createElement(
+    FloatingMenu_default,
+    {
+      trigger: /* @__PURE__ */ React5__default.default.createElement("div", { className: "w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white shadow-lg cursor-pointer" }, /* @__PURE__ */ React5__default.default.createElement("span", { className: "text-xl" }, "\u2795")),
+      menu: /* @__PURE__ */ React5__default.default.createElement("div", { className: "w-48 bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden" }, /* @__PURE__ */ React5__default.default.createElement("div", { className: "px-4 py-3 border-b border-gray-100" }, /* @__PURE__ */ React5__default.default.createElement("h3", { className: "text-sm font-bold text-gray-900" }, "\u5FEB\u6377\u83DC\u5355")), /* @__PURE__ */ React5__default.default.createElement("ul", { className: "py-1" }, menuItems.map((item) => /* @__PURE__ */ React5__default.default.createElement(
+        "li",
+        {
+          key: item.id,
+          className: "flex items-center gap-3 px-4 py-2.5 hover:bg-blue-50 text-gray-700 hover:text-blue-600 cursor-pointer transition-colors text-sm",
+          onClick: () => handleMenuItemClick(item.id)
+        },
+        /* @__PURE__ */ React5__default.default.createElement("span", { className: "text-lg" }, item.icon),
+        /* @__PURE__ */ React5__default.default.createElement("span", { className: "font-medium" }, item.label)
+      )))),
+      initialPosition: { x: 100, y: 100 }
+    }
+  ), windowWidth > 0 && /* @__PURE__ */ React5__default.default.createElement(
+    FloatingMenu_default,
+    {
+      trigger: /* @__PURE__ */ React5__default.default.createElement("div", { className: "w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white shadow-lg cursor-pointer" }, /* @__PURE__ */ React5__default.default.createElement("span", { className: "text-xl" }, "\u{1F50D}")),
+      menu: /* @__PURE__ */ React5__default.default.createElement("div", { className: "w-64 bg-white rounded-xl shadow-xl border border-gray-100 p-4" }, /* @__PURE__ */ React5__default.default.createElement("h3", { className: "text-sm font-bold text-gray-900 mb-3" }, "\u5FEB\u901F\u641C\u7D22"), /* @__PURE__ */ React5__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React5__default.default.createElement(
+        "input",
+        {
+          type: "text",
+          placeholder: "\u8F93\u5165\u5173\u952E\u5B57...",
+          className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none"
+        }
+      ), /* @__PURE__ */ React5__default.default.createElement("button", { className: "w-full bg-purple-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors" }, "\u641C\u7D22"))),
+      initialPosition: { x: windowWidth - 100, y: 100 }
+    }
+  ));
+};
+var FloatingMenuExample_default = FloatingMenuExample;
+
+exports.FloatingMenu = FloatingMenu_default;
+exports.FloatingMenuExample = FloatingMenuExample_default;
+exports.Navigation = Navigation_default;
+exports.NavigationItem = NavigationItem_default;
+exports.NavigationToggle = NavigationToggle_default;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map