@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMDropdown-wiTMuyhU.js

@@ -0,0 +1,285 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { c as clampComponentSize, f as SIZE_GAP_CLASSES, b as SIZE_TEXT_CLASSES, C as COMPONENT_SIZE_ORDER } from "./componentSizes-CdWNL526.js";
+const LMDropdown = ({
+  trigger = "click",
+  menu,
+  placement = "bottomLeft",
+  disabled = false,
+  size = "md",
+  children,
+  onSelect,
+  onVisibleChange,
+  className = ""
+}) => {
+  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER);
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const hoverTimeoutRef = useRef(null);
+  const itemPaddingClasses = {
+    xs: "px-2 py-1",
+    sm: "px-2.5 py-1.5",
+    md: "px-3 py-2",
+    lg: "px-4 py-2.5",
+    xl: "px-5 py-3",
+    "2xl": "px-6 py-4"
+  };
+  const minWidthClasses = {
+    xs: "min-w-[100px]",
+    sm: "min-w-[120px]",
+    md: "min-w-[140px]",
+    lg: "min-w-[160px]",
+    xl: "min-w-[180px]",
+    "2xl": "min-w-[200px]"
+  };
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !dropdownRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const dropdownRect = dropdownRef.current.getBoundingClientRect();
+    const scrollY = window.scrollY;
+    const scrollX = window.scrollX;
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+      case "bottomLeft":
+        top = triggerRect.bottom + scrollY + 4;
+        left = triggerRect.left + scrollX;
+        break;
+      case "bottomRight":
+        top = triggerRect.bottom + scrollY + 4;
+        left = triggerRect.right + scrollX - dropdownRect.width;
+        break;
+      case "topLeft":
+        top = triggerRect.top + scrollY - dropdownRect.height - 4;
+        left = triggerRect.left + scrollX;
+        break;
+      case "topRight":
+        top = triggerRect.top + scrollY - dropdownRect.height - 4;
+        left = triggerRect.right + scrollX - dropdownRect.width;
+        break;
+    }
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    if (left + dropdownRect.width > viewportWidth + scrollX) {
+      left = viewportWidth + scrollX - dropdownRect.width - 8;
+    }
+    if (left < scrollX) {
+      left = scrollX + 8;
+    }
+    if (top + dropdownRect.height > viewportHeight + scrollY) {
+      top = triggerRect.top + scrollY - dropdownRect.height - 4;
+    }
+    if (top < scrollY) {
+      top = triggerRect.bottom + scrollY + 4;
+    }
+    setPosition({ top, left });
+  }, [placement]);
+  const show = useCallback(() => {
+    if (disabled) return;
+    setVisible(true);
+    onVisibleChange == null ? void 0 : onVisibleChange(true);
+  }, [disabled, onVisibleChange]);
+  const hide = useCallback(() => {
+    setVisible(false);
+    onVisibleChange == null ? void 0 : onVisibleChange(false);
+  }, [onVisibleChange]);
+  const toggle = useCallback(() => {
+    if (visible) {
+      hide();
+    } else {
+      show();
+    }
+  }, [visible, show, hide]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (triggerRef.current && !triggerRef.current.contains(e.target) && dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        hide();
+      }
+    };
+    if (visible) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [visible, hide]);
+  useEffect(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible, updatePosition]);
+  useEffect(() => {
+    if (visible) {
+      const handleScrollResize = () => updatePosition();
+      window.addEventListener("scroll", handleScrollResize, true);
+      window.addEventListener("resize", handleScrollResize);
+      return () => {
+        window.removeEventListener("scroll", handleScrollResize, true);
+        window.removeEventListener("resize", handleScrollResize);
+      };
+    }
+  }, [visible, updatePosition]);
+  const handleTriggerClick = () => {
+    if (trigger === "click") {
+      toggle();
+    }
+  };
+  const handleTriggerMouseEnter = () => {
+    if (trigger === "hover") {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      show();
+    }
+  };
+  const handleTriggerMouseLeave = () => {
+    if (trigger === "hover") {
+      hoverTimeoutRef.current = window.setTimeout(() => {
+        hide();
+      }, 100);
+    }
+  };
+  const handleDropdownMouseEnter = () => {
+    if (trigger === "hover" && hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+  };
+  const handleDropdownMouseLeave = () => {
+    if (trigger === "hover") {
+      hoverTimeoutRef.current = window.setTimeout(() => {
+        hide();
+      }, 100);
+    }
+  };
+  const handleContextMenu = (e) => {
+    if (trigger === "contextMenu") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  const handleItemClick = (item) => {
+    if (item.disabled || item.divider) return;
+    onSelect == null ? void 0 : onSelect(item.key);
+    hide();
+  };
+  const getItemStyles = (item, isHovered) => {
+    if (item.disabled) {
+      return {
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed"
+      };
+    }
+    if (item.danger) {
+      return {
+        color: isHovered ? "white" : "var(--lm-error-600)",
+        backgroundColor: isHovered ? "var(--lm-error-500)" : "transparent"
+      };
+    }
+    return {
+      color: "var(--lm-text-primary)",
+      backgroundColor: isHovered ? "var(--lm-bg-hover)" : "transparent"
+    };
+  };
+  const dropdownContent = visible && /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: dropdownRef,
+      className: `
+        ${minWidthClasses[resolvedSize]}
+        rounded-xl border py-1
+      `,
+      style: {
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        zIndex: 1e3,
+        backgroundColor: "var(--lm-bg-elevated)",
+        borderColor: "var(--lm-border-default)",
+        boxShadow: "var(--lm-shadow-lg)",
+        backdropFilter: "blur(20px) saturate(180%)",
+        WebkitBackdropFilter: "blur(20px) saturate(180%)"
+      },
+      onMouseEnter: handleDropdownMouseEnter,
+      onMouseLeave: handleDropdownMouseLeave,
+      children: menu.map((item, index) => {
+        if (item.divider) {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "my-1 mx-2 border-t",
+              style: { borderColor: "var(--lm-border-light)" }
+            },
+            item.key || `divider-${index}`
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            item,
+            size: resolvedSize,
+            paddingClass: itemPaddingClasses[resolvedSize],
+            textClass: SIZE_TEXT_CLASSES[resolvedSize],
+            gapClass: SIZE_GAP_CLASSES[resolvedSize],
+            getStyles: getItemStyles,
+            onClick: handleItemClick
+          },
+          item.key
+        );
+      })
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: `inline-block ${className}`,
+        onClick: handleTriggerClick,
+        onMouseEnter: handleTriggerMouseEnter,
+        onMouseLeave: handleTriggerMouseLeave,
+        onContextMenu: handleContextMenu,
+        style: { cursor: disabled ? "not-allowed" : "pointer" },
+        children
+      }
+    ),
+    typeof document !== "undefined" && createPortal(dropdownContent, document.body)
+  ] });
+};
+const MenuItem = ({
+  item,
+  paddingClass,
+  textClass,
+  gapClass,
+  getStyles,
+  onClick
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        ${paddingClass} ${textClass}
+        flex items-center ${gapClass}
+        cursor-pointer select-none
+      `,
+      style: {
+        ...getStyles(item, isHovered),
+        transition: "all var(--lm-transition-fast) var(--lm-ease-out)"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onClick: () => onClick(item),
+      role: "menuitem",
+      "aria-disabled": item.disabled,
+      children: [
+        item.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label })
+      ]
+    }
+  );
+};
+export {
+  LMDropdown as L
+};
+//# sourceMappingURL=LMDropdown-wiTMuyhU.js.map

package/dist/LMDropdown-wiTMuyhU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMDropdown-wiTMuyhU.js","sources":["../src/components/Navigation/LMDropdown/LMDropdown.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n  COMPONENT_SIZE_ORDER,\n  SIZE_TEXT_CLASSES,\n  SIZE_GAP_CLASSES,\n  clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMDropdownMenuItem {\n  /** Unique key */\n  key: string\n  /** Menu item label */\n  label: React.ReactNode\n  /** Icon before label */\n  icon?: React.ReactNode\n  /** Disabled state */\n  disabled?: boolean\n  /** Danger style (red) */\n  danger?: boolean\n  /** Show as divider */\n  divider?: boolean\n}\n\nexport interface LMDropdownProps {\n  /** Trigger type */\n  trigger?: 'click' | 'hover' | 'contextMenu'\n  /** Menu items */\n  menu: LMDropdownMenuItem[]\n  /** Dropdown placement */\n  placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'\n  /** Disabled state */\n  disabled?: boolean\n  /** Component size */\n  size?: ComponentSize\n  /** Trigger element */\n  children: React.ReactNode\n  /** Selection callback */\n  onSelect?: (key: string) => void\n  /** Visibility change callback */\n  onVisibleChange?: (visible: boolean) => void\n  /** Custom class name */\n  className?: string\n}\n\nconst LMDropdown: React.FC<LMDropdownProps> = ({\n  trigger = 'click',\n  menu,\n  placement = 'bottomLeft',\n  disabled = false,\n  size = 'md',\n  children,\n  onSelect,\n  onVisibleChange,\n  className = '',\n}) => {\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n  const [visible, setVisible] = useState(false)\n  const [position, setPosition] = useState({ top: 0, left: 0 })\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const dropdownRef = useRef<HTMLDivElement>(null)\n  const hoverTimeoutRef = useRef<number | null>(null)\n\n  const itemPaddingClasses: Record<ComponentSize, string> = {\n    xs: 'px-2 py-1',\n    sm: 'px-2.5 py-1.5',\n    md: 'px-3 py-2',\n    lg: 'px-4 py-2.5',\n    xl: 'px-5 py-3',\n    '2xl': 'px-6 py-4',\n  }\n\n  const minWidthClasses: Record<ComponentSize, string> = {\n    xs: 'min-w-[100px]',\n    sm: 'min-w-[120px]',\n    md: 'min-w-[140px]',\n    lg: 'min-w-[160px]',\n    xl: 'min-w-[180px]',\n    '2xl': 'min-w-[200px]',\n  }\n\n  const updatePosition = useCallback(() => {\n    if (!triggerRef.current || !dropdownRef.current) return\n\n    const triggerRect = triggerRef.current.getBoundingClientRect()\n    const dropdownRect = dropdownRef.current.getBoundingClientRect()\n    const scrollY = window.scrollY\n    const scrollX = window.scrollX\n\n    let top = 0\n    let left = 0\n\n    switch (placement) {\n      case 'bottomLeft':\n        top = triggerRect.bottom + scrollY + 4\n        left = triggerRect.left + scrollX\n        break\n      case 'bottomRight':\n        top = triggerRect.bottom + scrollY + 4\n        left = triggerRect.right + scrollX - dropdownRect.width\n        break\n      case 'topLeft':\n        top = triggerRect.top + scrollY - dropdownRect.height - 4\n        left = triggerRect.left + scrollX\n        break\n      case 'topRight':\n        top = triggerRect.top + scrollY - dropdownRect.height - 4\n        left = triggerRect.right + scrollX - dropdownRect.width\n        break\n    }\n\n    // Boundary check\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n\n    if (left + dropdownRect.width > viewportWidth + scrollX) {\n      left = viewportWidth + scrollX - dropdownRect.width - 8\n    }\n    if (left < scrollX) {\n      left = scrollX + 8\n    }\n    if (top + dropdownRect.height > viewportHeight + scrollY) {\n      top = triggerRect.top + scrollY - dropdownRect.height - 4\n    }\n    if (top < scrollY) {\n      top = triggerRect.bottom + scrollY + 4\n    }\n\n    setPosition({ top, left })\n  }, [placement])\n\n  const show = useCallback(() => {\n    if (disabled) return\n    setVisible(true)\n    onVisibleChange?.(true)\n  }, [disabled, onVisibleChange])\n\n  const hide = useCallback(() => {\n    setVisible(false)\n    onVisibleChange?.(false)\n  }, [onVisibleChange])\n\n  const toggle = useCallback(() => {\n    if (visible) {\n      hide()\n    } else {\n      show()\n    }\n  }, [visible, show, hide])\n\n  // Handle click outside\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (\n        triggerRef.current &&\n        !triggerRef.current.contains(e.target as Node) &&\n        dropdownRef.current &&\n        !dropdownRef.current.contains(e.target as Node)\n      ) {\n        hide()\n      }\n    }\n\n    if (visible) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [visible, hide])\n\n  // Update position when visible\n  useEffect(() => {\n    if (visible) {\n      updatePosition()\n    }\n  }, [visible, updatePosition])\n\n  // Handle scroll and resize\n  useEffect(() => {\n    if (visible) {\n      const handleScrollResize = () => updatePosition()\n      window.addEventListener('scroll', handleScrollResize, true)\n      window.addEventListener('resize', handleScrollResize)\n      return () => {\n        window.removeEventListener('scroll', handleScrollResize, true)\n        window.removeEventListener('resize', handleScrollResize)\n      }\n    }\n  }, [visible, updatePosition])\n\n  const handleTriggerClick = () => {\n    if (trigger === 'click') {\n      toggle()\n    }\n  }\n\n  const handleTriggerMouseEnter = () => {\n    if (trigger === 'hover') {\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current)\n      }\n      show()\n    }\n  }\n\n  const handleTriggerMouseLeave = () => {\n    if (trigger === 'hover') {\n      hoverTimeoutRef.current = window.setTimeout(() => {\n        hide()\n      }, 100)\n    }\n  }\n\n  const handleDropdownMouseEnter = () => {\n    if (trigger === 'hover' && hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current)\n    }\n  }\n\n  const handleDropdownMouseLeave = () => {\n    if (trigger === 'hover') {\n      hoverTimeoutRef.current = window.setTimeout(() => {\n        hide()\n      }, 100)\n    }\n  }\n\n  const handleContextMenu = (e: React.MouseEvent) => {\n    if (trigger === 'contextMenu') {\n      e.preventDefault()\n      toggle()\n    }\n  }\n\n  const handleItemClick = (item: LMDropdownMenuItem) => {\n    if (item.disabled || item.divider) return\n    onSelect?.(item.key)\n    hide()\n  }\n\n  const getItemStyles = (item: LMDropdownMenuItem, isHovered: boolean): React.CSSProperties => {\n    if (item.disabled) {\n      return {\n        color: 'var(--lm-text-disabled)',\n        cursor: 'not-allowed',\n      }\n    }\n    if (item.danger) {\n      return {\n        color: isHovered ? 'white' : 'var(--lm-error-600)',\n        backgroundColor: isHovered ? 'var(--lm-error-500)' : 'transparent',\n      }\n    }\n    return {\n      color: 'var(--lm-text-primary)',\n      backgroundColor: isHovered ? 'var(--lm-bg-hover)' : 'transparent',\n    }\n  }\n\n  // Apple-like refined dropdown styling\n  const dropdownContent = visible && (\n    <div\n      ref={dropdownRef}\n      className={`\n        ${minWidthClasses[resolvedSize]}\n        rounded-xl border py-1\n      `}\n      style={{\n        position: 'absolute',\n        top: position.top,\n        left: position.left,\n        zIndex: 1000,\n        backgroundColor: 'var(--lm-bg-elevated)',\n        borderColor: 'var(--lm-border-default)',\n        boxShadow: 'var(--lm-shadow-lg)',\n        backdropFilter: 'blur(20px) saturate(180%)',\n        WebkitBackdropFilter: 'blur(20px) saturate(180%)',\n      }}\n      onMouseEnter={handleDropdownMouseEnter}\n      onMouseLeave={handleDropdownMouseLeave}\n    >\n      {menu.map((item, index) => {\n        if (item.divider) {\n          return (\n            <div\n              key={item.key || `divider-${index}`}\n              className=\"my-1 mx-2 border-t\"\n              style={{ borderColor: 'var(--lm-border-light)' }}\n            />\n          )\n        }\n\n        return (\n          <MenuItem\n            key={item.key}\n            item={item}\n            size={resolvedSize}\n            paddingClass={itemPaddingClasses[resolvedSize]}\n            textClass={SIZE_TEXT_CLASSES[resolvedSize]}\n            gapClass={SIZE_GAP_CLASSES[resolvedSize]}\n            getStyles={getItemStyles}\n            onClick={handleItemClick}\n          />\n        )\n      })}\n    </div>\n  )\n\n  return (\n    <>\n      <div\n        ref={triggerRef}\n        className={`inline-block ${className}`}\n        onClick={handleTriggerClick}\n        onMouseEnter={handleTriggerMouseEnter}\n        onMouseLeave={handleTriggerMouseLeave}\n        onContextMenu={handleContextMenu}\n        style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}\n      >\n        {children}\n      </div>\n      {typeof document !== 'undefined' && createPortal(dropdownContent, document.body)}\n    </>\n  )\n}\n\n// Separate MenuItem component for hover state\ninterface MenuItemProps {\n  item: LMDropdownMenuItem\n  size: ComponentSize\n  paddingClass: string\n  textClass: string\n  gapClass: string\n  getStyles: (item: LMDropdownMenuItem, isHovered: boolean) => React.CSSProperties\n  onClick: (item: LMDropdownMenuItem) => void\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({\n  item,\n  paddingClass,\n  textClass,\n  gapClass,\n  getStyles,\n  onClick,\n}) => {\n  const [isHovered, setIsHovered] = useState(false)\n\n  // Apple-like refined menu item styling\n  return (\n    <div\n      className={`\n        ${paddingClass} ${textClass}\n        flex items-center ${gapClass}\n        cursor-pointer select-none\n      `}\n      style={{\n        ...getStyles(item, isHovered),\n        transition: 'all var(--lm-transition-fast) var(--lm-ease-out)',\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={() => onClick(item)}\n      role=\"menuitem\"\n      aria-disabled={item.disabled}\n    >\n      {item.icon && <span className=\"flex-shrink-0\">{item.icon}</span>}\n      <span className=\"flex-1\">{item.label}</span>\n    </div>\n  )\n}\n\nexport default LMDropdown\n"],"names":[],"mappings":"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"}

package/dist/LMDropdown-yl5l7qtz.cjs

@@ -0,0 +1,284 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactDom = require("react-dom");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const LMDropdown = ({
+  trigger = "click",
+  menu,
+  placement = "bottomLeft",
+  disabled = false,
+  size = "md",
+  children,
+  onSelect,
+  onVisibleChange,
+  className = ""
+}) => {
+  const resolvedSize = componentSizes.clampComponentSize(size, componentSizes.COMPONENT_SIZE_ORDER);
+  const [visible, setVisible] = React.useState(false);
+  const [position, setPosition] = React.useState({ top: 0, left: 0 });
+  const triggerRef = React.useRef(null);
+  const dropdownRef = React.useRef(null);
+  const hoverTimeoutRef = React.useRef(null);
+  const itemPaddingClasses = {
+    xs: "px-2 py-1",
+    sm: "px-2.5 py-1.5",
+    md: "px-3 py-2",
+    lg: "px-4 py-2.5",
+    xl: "px-5 py-3",
+    "2xl": "px-6 py-4"
+  };
+  const minWidthClasses = {
+    xs: "min-w-[100px]",
+    sm: "min-w-[120px]",
+    md: "min-w-[140px]",
+    lg: "min-w-[160px]",
+    xl: "min-w-[180px]",
+    "2xl": "min-w-[200px]"
+  };
+  const updatePosition = React.useCallback(() => {
+    if (!triggerRef.current || !dropdownRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const dropdownRect = dropdownRef.current.getBoundingClientRect();
+    const scrollY = window.scrollY;
+    const scrollX = window.scrollX;
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+      case "bottomLeft":
+        top = triggerRect.bottom + scrollY + 4;
+        left = triggerRect.left + scrollX;
+        break;
+      case "bottomRight":
+        top = triggerRect.bottom + scrollY + 4;
+        left = triggerRect.right + scrollX - dropdownRect.width;
+        break;
+      case "topLeft":
+        top = triggerRect.top + scrollY - dropdownRect.height - 4;
+        left = triggerRect.left + scrollX;
+        break;
+      case "topRight":
+        top = triggerRect.top + scrollY - dropdownRect.height - 4;
+        left = triggerRect.right + scrollX - dropdownRect.width;
+        break;
+    }
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    if (left + dropdownRect.width > viewportWidth + scrollX) {
+      left = viewportWidth + scrollX - dropdownRect.width - 8;
+    }
+    if (left < scrollX) {
+      left = scrollX + 8;
+    }
+    if (top + dropdownRect.height > viewportHeight + scrollY) {
+      top = triggerRect.top + scrollY - dropdownRect.height - 4;
+    }
+    if (top < scrollY) {
+      top = triggerRect.bottom + scrollY + 4;
+    }
+    setPosition({ top, left });
+  }, [placement]);
+  const show = React.useCallback(() => {
+    if (disabled) return;
+    setVisible(true);
+    onVisibleChange == null ? void 0 : onVisibleChange(true);
+  }, [disabled, onVisibleChange]);
+  const hide = React.useCallback(() => {
+    setVisible(false);
+    onVisibleChange == null ? void 0 : onVisibleChange(false);
+  }, [onVisibleChange]);
+  const toggle = React.useCallback(() => {
+    if (visible) {
+      hide();
+    } else {
+      show();
+    }
+  }, [visible, show, hide]);
+  React.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (triggerRef.current && !triggerRef.current.contains(e.target) && dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        hide();
+      }
+    };
+    if (visible) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [visible, hide]);
+  React.useEffect(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible, updatePosition]);
+  React.useEffect(() => {
+    if (visible) {
+      const handleScrollResize = () => updatePosition();
+      window.addEventListener("scroll", handleScrollResize, true);
+      window.addEventListener("resize", handleScrollResize);
+      return () => {
+        window.removeEventListener("scroll", handleScrollResize, true);
+        window.removeEventListener("resize", handleScrollResize);
+      };
+    }
+  }, [visible, updatePosition]);
+  const handleTriggerClick = () => {
+    if (trigger === "click") {
+      toggle();
+    }
+  };
+  const handleTriggerMouseEnter = () => {
+    if (trigger === "hover") {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      show();
+    }
+  };
+  const handleTriggerMouseLeave = () => {
+    if (trigger === "hover") {
+      hoverTimeoutRef.current = window.setTimeout(() => {
+        hide();
+      }, 100);
+    }
+  };
+  const handleDropdownMouseEnter = () => {
+    if (trigger === "hover" && hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+  };
+  const handleDropdownMouseLeave = () => {
+    if (trigger === "hover") {
+      hoverTimeoutRef.current = window.setTimeout(() => {
+        hide();
+      }, 100);
+    }
+  };
+  const handleContextMenu = (e) => {
+    if (trigger === "contextMenu") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  const handleItemClick = (item) => {
+    if (item.disabled || item.divider) return;
+    onSelect == null ? void 0 : onSelect(item.key);
+    hide();
+  };
+  const getItemStyles = (item, isHovered) => {
+    if (item.disabled) {
+      return {
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed"
+      };
+    }
+    if (item.danger) {
+      return {
+        color: isHovered ? "white" : "var(--lm-error-600)",
+        backgroundColor: isHovered ? "var(--lm-error-500)" : "transparent"
+      };
+    }
+    return {
+      color: "var(--lm-text-primary)",
+      backgroundColor: isHovered ? "var(--lm-bg-hover)" : "transparent"
+    };
+  };
+  const dropdownContent = visible && /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: dropdownRef,
+      className: `
+        ${minWidthClasses[resolvedSize]}
+        rounded-xl border py-1
+      `,
+      style: {
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        zIndex: 1e3,
+        backgroundColor: "var(--lm-bg-elevated)",
+        borderColor: "var(--lm-border-default)",
+        boxShadow: "var(--lm-shadow-lg)",
+        backdropFilter: "blur(20px) saturate(180%)",
+        WebkitBackdropFilter: "blur(20px) saturate(180%)"
+      },
+      onMouseEnter: handleDropdownMouseEnter,
+      onMouseLeave: handleDropdownMouseLeave,
+      children: menu.map((item, index) => {
+        if (item.divider) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "my-1 mx-2 border-t",
+              style: { borderColor: "var(--lm-border-light)" }
+            },
+            item.key || `divider-${index}`
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItem,
+          {
+            item,
+            size: resolvedSize,
+            paddingClass: itemPaddingClasses[resolvedSize],
+            textClass: componentSizes.SIZE_TEXT_CLASSES[resolvedSize],
+            gapClass: componentSizes.SIZE_GAP_CLASSES[resolvedSize],
+            getStyles: getItemStyles,
+            onClick: handleItemClick
+          },
+          item.key
+        );
+      })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: `inline-block ${className}`,
+        onClick: handleTriggerClick,
+        onMouseEnter: handleTriggerMouseEnter,
+        onMouseLeave: handleTriggerMouseLeave,
+        onContextMenu: handleContextMenu,
+        style: { cursor: disabled ? "not-allowed" : "pointer" },
+        children
+      }
+    ),
+    typeof document !== "undefined" && reactDom.createPortal(dropdownContent, document.body)
+  ] });
+};
+const MenuItem = ({
+  item,
+  paddingClass,
+  textClass,
+  gapClass,
+  getStyles,
+  onClick
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `
+        ${paddingClass} ${textClass}
+        flex items-center ${gapClass}
+        cursor-pointer select-none
+      `,
+      style: {
+        ...getStyles(item, isHovered),
+        transition: "all var(--lm-transition-fast) var(--lm-ease-out)"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onClick: () => onClick(item),
+      role: "menuitem",
+      "aria-disabled": item.disabled,
+      children: [
+        item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label })
+      ]
+    }
+  );
+};
+exports.LMDropdown = LMDropdown;
+//# sourceMappingURL=LMDropdown-yl5l7qtz.cjs.map

package/dist/LMDropdown-yl5l7qtz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMDropdown-yl5l7qtz.cjs","sources":["../src/components/Navigation/LMDropdown/LMDropdown.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n  COMPONENT_SIZE_ORDER,\n  SIZE_TEXT_CLASSES,\n  SIZE_GAP_CLASSES,\n  clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMDropdownMenuItem {\n  /** Unique key */\n  key: string\n  /** Menu item label */\n  label: React.ReactNode\n  /** Icon before label */\n  icon?: React.ReactNode\n  /** Disabled state */\n  disabled?: boolean\n  /** Danger style (red) */\n  danger?: boolean\n  /** Show as divider */\n  divider?: boolean\n}\n\nexport interface LMDropdownProps {\n  /** Trigger type */\n  trigger?: 'click' | 'hover' | 'contextMenu'\n  /** Menu items */\n  menu: LMDropdownMenuItem[]\n  /** Dropdown placement */\n  placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'\n  /** Disabled state */\n  disabled?: boolean\n  /** Component size */\n  size?: ComponentSize\n  /** Trigger element */\n  children: React.ReactNode\n  /** Selection callback */\n  onSelect?: (key: string) => void\n  /** Visibility change callback */\n  onVisibleChange?: (visible: boolean) => void\n  /** Custom class name */\n  className?: string\n}\n\nconst LMDropdown: React.FC<LMDropdownProps> = ({\n  trigger = 'click',\n  menu,\n  placement = 'bottomLeft',\n  disabled = false,\n  size = 'md',\n  children,\n  onSelect,\n  onVisibleChange,\n  className = '',\n}) => {\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n  const [visible, setVisible] = useState(false)\n  const [position, setPosition] = useState({ top: 0, left: 0 })\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const dropdownRef = useRef<HTMLDivElement>(null)\n  const hoverTimeoutRef = useRef<number | null>(null)\n\n  const itemPaddingClasses: Record<ComponentSize, string> = {\n    xs: 'px-2 py-1',\n    sm: 'px-2.5 py-1.5',\n    md: 'px-3 py-2',\n    lg: 'px-4 py-2.5',\n    xl: 'px-5 py-3',\n    '2xl': 'px-6 py-4',\n  }\n\n  const minWidthClasses: Record<ComponentSize, string> = {\n    xs: 'min-w-[100px]',\n    sm: 'min-w-[120px]',\n    md: 'min-w-[140px]',\n    lg: 'min-w-[160px]',\n    xl: 'min-w-[180px]',\n    '2xl': 'min-w-[200px]',\n  }\n\n  const updatePosition = useCallback(() => {\n    if (!triggerRef.current || !dropdownRef.current) return\n\n    const triggerRect = triggerRef.current.getBoundingClientRect()\n    const dropdownRect = dropdownRef.current.getBoundingClientRect()\n    const scrollY = window.scrollY\n    const scrollX = window.scrollX\n\n    let top = 0\n    let left = 0\n\n    switch (placement) {\n      case 'bottomLeft':\n        top = triggerRect.bottom + scrollY + 4\n        left = triggerRect.left + scrollX\n        break\n      case 'bottomRight':\n        top = triggerRect.bottom + scrollY + 4\n        left = triggerRect.right + scrollX - dropdownRect.width\n        break\n      case 'topLeft':\n        top = triggerRect.top + scrollY - dropdownRect.height - 4\n        left = triggerRect.left + scrollX\n        break\n      case 'topRight':\n        top = triggerRect.top + scrollY - dropdownRect.height - 4\n        left = triggerRect.right + scrollX - dropdownRect.width\n        break\n    }\n\n    // Boundary check\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n\n    if (left + dropdownRect.width > viewportWidth + scrollX) {\n      left = viewportWidth + scrollX - dropdownRect.width - 8\n    }\n    if (left < scrollX) {\n      left = scrollX + 8\n    }\n    if (top + dropdownRect.height > viewportHeight + scrollY) {\n      top = triggerRect.top + scrollY - dropdownRect.height - 4\n    }\n    if (top < scrollY) {\n      top = triggerRect.bottom + scrollY + 4\n    }\n\n    setPosition({ top, left })\n  }, [placement])\n\n  const show = useCallback(() => {\n    if (disabled) return\n    setVisible(true)\n    onVisibleChange?.(true)\n  }, [disabled, onVisibleChange])\n\n  const hide = useCallback(() => {\n    setVisible(false)\n    onVisibleChange?.(false)\n  }, [onVisibleChange])\n\n  const toggle = useCallback(() => {\n    if (visible) {\n      hide()\n    } else {\n      show()\n    }\n  }, [visible, show, hide])\n\n  // Handle click outside\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (\n        triggerRef.current &&\n        !triggerRef.current.contains(e.target as Node) &&\n        dropdownRef.current &&\n        !dropdownRef.current.contains(e.target as Node)\n      ) {\n        hide()\n      }\n    }\n\n    if (visible) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [visible, hide])\n\n  // Update position when visible\n  useEffect(() => {\n    if (visible) {\n      updatePosition()\n    }\n  }, [visible, updatePosition])\n\n  // Handle scroll and resize\n  useEffect(() => {\n    if (visible) {\n      const handleScrollResize = () => updatePosition()\n      window.addEventListener('scroll', handleScrollResize, true)\n      window.addEventListener('resize', handleScrollResize)\n      return () => {\n        window.removeEventListener('scroll', handleScrollResize, true)\n        window.removeEventListener('resize', handleScrollResize)\n      }\n    }\n  }, [visible, updatePosition])\n\n  const handleTriggerClick = () => {\n    if (trigger === 'click') {\n      toggle()\n    }\n  }\n\n  const handleTriggerMouseEnter = () => {\n    if (trigger === 'hover') {\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current)\n      }\n      show()\n    }\n  }\n\n  const handleTriggerMouseLeave = () => {\n    if (trigger === 'hover') {\n      hoverTimeoutRef.current = window.setTimeout(() => {\n        hide()\n      }, 100)\n    }\n  }\n\n  const handleDropdownMouseEnter = () => {\n    if (trigger === 'hover' && hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current)\n    }\n  }\n\n  const handleDropdownMouseLeave = () => {\n    if (trigger === 'hover') {\n      hoverTimeoutRef.current = window.setTimeout(() => {\n        hide()\n      }, 100)\n    }\n  }\n\n  const handleContextMenu = (e: React.MouseEvent) => {\n    if (trigger === 'contextMenu') {\n      e.preventDefault()\n      toggle()\n    }\n  }\n\n  const handleItemClick = (item: LMDropdownMenuItem) => {\n    if (item.disabled || item.divider) return\n    onSelect?.(item.key)\n    hide()\n  }\n\n  const getItemStyles = (item: LMDropdownMenuItem, isHovered: boolean): React.CSSProperties => {\n    if (item.disabled) {\n      return {\n        color: 'var(--lm-text-disabled)',\n        cursor: 'not-allowed',\n      }\n    }\n    if (item.danger) {\n      return {\n        color: isHovered ? 'white' : 'var(--lm-error-600)',\n        backgroundColor: isHovered ? 'var(--lm-error-500)' : 'transparent',\n      }\n    }\n    return {\n      color: 'var(--lm-text-primary)',\n      backgroundColor: isHovered ? 'var(--lm-bg-hover)' : 'transparent',\n    }\n  }\n\n  // Apple-like refined dropdown styling\n  const dropdownContent = visible && (\n    <div\n      ref={dropdownRef}\n      className={`\n        ${minWidthClasses[resolvedSize]}\n        rounded-xl border py-1\n      `}\n      style={{\n        position: 'absolute',\n        top: position.top,\n        left: position.left,\n        zIndex: 1000,\n        backgroundColor: 'var(--lm-bg-elevated)',\n        borderColor: 'var(--lm-border-default)',\n        boxShadow: 'var(--lm-shadow-lg)',\n        backdropFilter: 'blur(20px) saturate(180%)',\n        WebkitBackdropFilter: 'blur(20px) saturate(180%)',\n      }}\n      onMouseEnter={handleDropdownMouseEnter}\n      onMouseLeave={handleDropdownMouseLeave}\n    >\n      {menu.map((item, index) => {\n        if (item.divider) {\n          return (\n            <div\n              key={item.key || `divider-${index}`}\n              className=\"my-1 mx-2 border-t\"\n              style={{ borderColor: 'var(--lm-border-light)' }}\n            />\n          )\n        }\n\n        return (\n          <MenuItem\n            key={item.key}\n            item={item}\n            size={resolvedSize}\n            paddingClass={itemPaddingClasses[resolvedSize]}\n            textClass={SIZE_TEXT_CLASSES[resolvedSize]}\n            gapClass={SIZE_GAP_CLASSES[resolvedSize]}\n            getStyles={getItemStyles}\n            onClick={handleItemClick}\n          />\n        )\n      })}\n    </div>\n  )\n\n  return (\n    <>\n      <div\n        ref={triggerRef}\n        className={`inline-block ${className}`}\n        onClick={handleTriggerClick}\n        onMouseEnter={handleTriggerMouseEnter}\n        onMouseLeave={handleTriggerMouseLeave}\n        onContextMenu={handleContextMenu}\n        style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}\n      >\n        {children}\n      </div>\n      {typeof document !== 'undefined' && createPortal(dropdownContent, document.body)}\n    </>\n  )\n}\n\n// Separate MenuItem component for hover state\ninterface MenuItemProps {\n  item: LMDropdownMenuItem\n  size: ComponentSize\n  paddingClass: string\n  textClass: string\n  gapClass: string\n  getStyles: (item: LMDropdownMenuItem, isHovered: boolean) => React.CSSProperties\n  onClick: (item: LMDropdownMenuItem) => void\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({\n  item,\n  paddingClass,\n  textClass,\n  gapClass,\n  getStyles,\n  onClick,\n}) => {\n  const [isHovered, setIsHovered] = useState(false)\n\n  // Apple-like refined menu item styling\n  return (\n    <div\n      className={`\n        ${paddingClass} ${textClass}\n        flex items-center ${gapClass}\n        cursor-pointer select-none\n      `}\n      style={{\n        ...getStyles(item, isHovered),\n        transition: 'all var(--lm-transition-fast) var(--lm-ease-out)',\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={() => onClick(item)}\n      role=\"menuitem\"\n      aria-disabled={item.disabled}\n    >\n      {item.icon && <span className=\"flex-shrink-0\">{item.icon}</span>}\n      <span className=\"flex-1\">{item.label}</span>\n    </div>\n  )\n}\n\nexport default LMDropdown\n"],"names":["clampComponentSize","COMPONENT_SIZE_ORDER","useState","useRef","useCallback","useEffect","jsx","SIZE_TEXT_CLASSES","SIZE_GAP_CLASSES","jsxs","Fragment","createPortal"],"mappings":"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"}