@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMMenu-yXadjQLQ.js

@@ -0,0 +1,235 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { c as clampComponentSize, f as SIZE_GAP_CLASSES, b as SIZE_TEXT_CLASSES, C as COMPONENT_SIZE_ORDER } from "./componentSizes-CdWNL526.js";
+const ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className: className || "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) });
+const LMMenu = ({
+  items,
+  mode = "inline",
+  theme = "light",
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
+  openKeys: controlledOpenKeys,
+  defaultOpenKeys = [],
+  collapsed = false,
+  collapsedWidth = 64,
+  onSelect,
+  onOpenChange,
+  size = "md",
+  className = ""
+}) => {
+  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys);
+  const [internalOpenKeys, setInternalOpenKeys] = useState(defaultOpenKeys);
+  const selectedKeys = controlledSelectedKeys ?? internalSelectedKeys;
+  const openKeys = controlledOpenKeys ?? internalOpenKeys;
+  const itemPaddingClasses = {
+    xs: "px-3 py-1.5",
+    sm: "px-3 py-2",
+    md: "px-4 py-2.5",
+    lg: "px-5 py-3",
+    xl: "px-6 py-3.5",
+    "2xl": "px-8 py-4"
+  };
+  const collapsedPaddingClasses = {
+    xs: "px-2 py-1.5",
+    sm: "px-2.5 py-2",
+    md: "px-3 py-2.5",
+    lg: "px-3.5 py-3",
+    xl: "px-4 py-3.5",
+    "2xl": "px-5 py-4"
+  };
+  const iconSizeClasses = {
+    xs: "w-4 h-4",
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-5 h-5",
+    xl: "w-6 h-6",
+    "2xl": "w-6 h-6"
+  };
+  const handleSelect = useCallback((key, keyPath) => {
+    if (controlledSelectedKeys === void 0) {
+      setInternalSelectedKeys([key]);
+    }
+    onSelect == null ? void 0 : onSelect(key, keyPath);
+  }, [controlledSelectedKeys, onSelect]);
+  const handleOpenChange = useCallback((key) => {
+    const newOpenKeys = openKeys.includes(key) ? openKeys.filter((k) => k !== key) : [...openKeys, key];
+    if (controlledOpenKeys === void 0) {
+      setInternalOpenKeys(newOpenKeys);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpenKeys);
+  }, [openKeys, controlledOpenKeys, onOpenChange]);
+  const getItemStyles = (isSelected, isDisabled) => {
+    if (isDisabled) {
+      return {
+        color: theme === "dark" ? "var(--lm-gray-600)" : "var(--lm-text-disabled)",
+        cursor: "not-allowed"
+      };
+    }
+    if (isSelected) {
+      return {
+        color: theme === "dark" ? "white" : "var(--lm-primary-600)",
+        backgroundColor: theme === "dark" ? "var(--lm-primary-600)" : "var(--lm-primary-50)"
+      };
+    }
+    return {
+      color: theme === "dark" ? "var(--lm-gray-200)" : "var(--lm-text-primary)",
+      backgroundColor: "transparent"
+    };
+  };
+  const getHoverStyles = (isSelected, isDisabled) => {
+    if (isDisabled || isSelected) return {};
+    return {
+      backgroundColor: theme === "dark" ? "var(--lm-gray-700)" : "var(--lm-bg-hover)"
+    };
+  };
+  const renderMenuItem = (item, level = 0, keyPath = []) => {
+    var _a, _b;
+    if (item.type === "divider") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "my-2 mx-3 border-t",
+          style: { borderColor: theme === "dark" ? "var(--lm-gray-700)" : "var(--lm-border-light)" }
+        },
+        item.key
+      );
+    }
+    if (item.type === "group") {
+      return /* @__PURE__ */ jsxs("div", { className: "py-2", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${collapsed ? collapsedPaddingClasses[resolvedSize] : itemPaddingClasses[resolvedSize]} text-xs font-semibold uppercase tracking-wider`,
+            style: { color: theme === "dark" ? "var(--lm-gray-500)" : "var(--lm-text-tertiary)" },
+            children: !collapsed && item.label
+          }
+        ),
+        (_a = item.children) == null ? void 0 : _a.map((child) => renderMenuItem(child, level, [...keyPath, item.key]))
+      ] }, item.key);
+    }
+    const hasChildren = !!(item.children && item.children.length > 0);
+    const isOpen = openKeys.includes(item.key);
+    const isSelected = selectedKeys.includes(item.key);
+    const currentKeyPath = [...keyPath, item.key];
+    const indentStyle = !collapsed && mode === "inline" ? { paddingLeft: `${16 + level * 16}px` } : {};
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          item,
+          size: resolvedSize,
+          collapsed,
+          hasChildren,
+          isOpen,
+          isSelected,
+          theme,
+          mode,
+          paddingClass: collapsed ? collapsedPaddingClasses[resolvedSize] : itemPaddingClasses[resolvedSize],
+          textClass: SIZE_TEXT_CLASSES[resolvedSize],
+          gapClass: SIZE_GAP_CLASSES[resolvedSize],
+          iconClass: iconSizeClasses[resolvedSize],
+          indentStyle,
+          getStyles: getItemStyles,
+          getHoverStyles,
+          onSelect: () => {
+            if (!item.disabled && !hasChildren) {
+              handleSelect(item.key, currentKeyPath);
+            }
+          },
+          onToggle: () => {
+            if (hasChildren && !item.disabled) {
+              handleOpenChange(item.key);
+            }
+          }
+        }
+      ),
+      hasChildren && isOpen && !collapsed && mode === "inline" && /* @__PURE__ */ jsx("div", { className: "overflow-hidden transition-all duration-200", children: (_b = item.children) == null ? void 0 : _b.map((child) => renderMenuItem(child, level + 1, currentKeyPath)) })
+    ] }, item.key);
+  };
+  const containerStyles = {
+    width: collapsed ? collapsedWidth : void 0,
+    backgroundColor: theme === "dark" ? "var(--lm-gray-900)" : "var(--lm-bg-elevated)",
+    transition: "width 0.2s ease-in-out"
+  };
+  const flexDirection = mode === "horizontal" ? "row" : "column";
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: `flex ${className}`,
+      style: {
+        ...containerStyles,
+        flexDirection
+      },
+      role: "menu",
+      children: items.map((item) => renderMenuItem(item))
+    }
+  );
+};
+const MenuItem = ({
+  item,
+  collapsed,
+  hasChildren,
+  isOpen,
+  isSelected,
+  paddingClass,
+  textClass,
+  gapClass,
+  iconClass,
+  indentStyle,
+  getStyles,
+  getHoverStyles,
+  onSelect,
+  onToggle
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const baseStyles = getStyles(isSelected, item.disabled || false);
+  const hoverStyles = isHovered ? getHoverStyles(isSelected, item.disabled || false) : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        ${paddingClass} ${textClass}
+        flex items-center ${gapClass}
+        cursor-pointer transition-colors duration-150
+        rounded-lg mx-2 my-0.5
+        ${collapsed ? "justify-center" : ""}
+      `,
+      style: {
+        ...baseStyles,
+        ...hoverStyles,
+        ...indentStyle
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onClick: () => {
+        if (hasChildren) {
+          onToggle();
+        } else {
+          onSelect();
+        }
+      },
+      role: "menuitem",
+      "aria-disabled": item.disabled || void 0,
+      "aria-expanded": hasChildren ? isOpen : void 0,
+      title: collapsed ? typeof item.label === "string" ? item.label : void 0 : void 0,
+      children: [
+        item.icon && /* @__PURE__ */ jsx("span", { className: `flex-shrink-0 ${iconClass}`, children: item.icon }),
+        !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+          hasChildren && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `flex-shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
+              children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  LMMenu as L
+};
+//# sourceMappingURL=LMMenu-yXadjQLQ.js.map

package/dist/LMMenu-yXadjQLQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMMenu-yXadjQLQ.js","sources":["../src/components/Navigation/LMMenu/LMMenu.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react'\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 LMMenuItem {\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  /** Sub menu items */\n  children?: LMMenuItem[]\n  /** Item type: group or divider */\n  type?: 'group' | 'divider'\n}\n\nexport interface LMMenuProps {\n  /** Menu items */\n  items: LMMenuItem[]\n  /** Menu mode */\n  mode?: 'vertical' | 'horizontal' | 'inline'\n  /** Menu theme */\n  theme?: 'light' | 'dark'\n  /** Selected keys (controlled) */\n  selectedKeys?: string[]\n  /** Default selected keys */\n  defaultSelectedKeys?: string[]\n  /** Open keys (controlled) */\n  openKeys?: string[]\n  /** Default open keys */\n  defaultOpenKeys?: string[]\n  /** Collapsed state (for inline mode) */\n  collapsed?: boolean\n  /** Collapsed width */\n  collapsedWidth?: number\n  /** Selection handler */\n  onSelect?: (key: string, keyPath: string[]) => void\n  /** Open change handler */\n  onOpenChange?: (openKeys: string[]) => void\n  /** Component size */\n  size?: ComponentSize\n  /** Custom class name */\n  className?: string\n}\n\nconst ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg className={className || 'w-4 h-4'} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n  </svg>\n)\n\n\nconst LMMenu: React.FC<LMMenuProps> = ({\n  items,\n  mode = 'inline',\n  theme = 'light',\n  selectedKeys: controlledSelectedKeys,\n  defaultSelectedKeys = [],\n  openKeys: controlledOpenKeys,\n  defaultOpenKeys = [],\n  collapsed = false,\n  collapsedWidth = 64,\n  onSelect,\n  onOpenChange,\n  size = 'md',\n  className = '',\n}) => {\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(defaultSelectedKeys)\n  const [internalOpenKeys, setInternalOpenKeys] = useState<string[]>(defaultOpenKeys)\n\n  const selectedKeys = controlledSelectedKeys ?? internalSelectedKeys\n  const openKeys = controlledOpenKeys ?? internalOpenKeys\n\n  const itemPaddingClasses: Record<ComponentSize, string> = {\n    xs: 'px-3 py-1.5',\n    sm: 'px-3 py-2',\n    md: 'px-4 py-2.5',\n    lg: 'px-5 py-3',\n    xl: 'px-6 py-3.5',\n    '2xl': 'px-8 py-4',\n  }\n\n  const collapsedPaddingClasses: Record<ComponentSize, string> = {\n    xs: 'px-2 py-1.5',\n    sm: 'px-2.5 py-2',\n    md: 'px-3 py-2.5',\n    lg: 'px-3.5 py-3',\n    xl: 'px-4 py-3.5',\n    '2xl': 'px-5 py-4',\n  }\n\n  const iconSizeClasses: Record<ComponentSize, string> = {\n    xs: 'w-4 h-4',\n    sm: 'w-4 h-4',\n    md: 'w-5 h-5',\n    lg: 'w-5 h-5',\n    xl: 'w-6 h-6',\n    '2xl': 'w-6 h-6',\n  }\n\n  const handleSelect = useCallback((key: string, keyPath: string[]) => {\n    if (controlledSelectedKeys === undefined) {\n      setInternalSelectedKeys([key])\n    }\n    onSelect?.(key, keyPath)\n  }, [controlledSelectedKeys, onSelect])\n\n  const handleOpenChange = useCallback((key: string) => {\n    const newOpenKeys = openKeys.includes(key)\n      ? openKeys.filter((k) => k !== key)\n      : [...openKeys, key]\n\n    if (controlledOpenKeys === undefined) {\n      setInternalOpenKeys(newOpenKeys)\n    }\n    onOpenChange?.(newOpenKeys)\n  }, [openKeys, controlledOpenKeys, onOpenChange])\n\n  const getItemStyles = (isSelected: boolean, isDisabled: boolean): React.CSSProperties => {\n    if (isDisabled) {\n      return {\n        color: theme === 'dark' ? 'var(--lm-gray-600)' : 'var(--lm-text-disabled)',\n        cursor: 'not-allowed',\n      }\n    }\n\n    if (isSelected) {\n      return {\n        color: theme === 'dark' ? 'white' : 'var(--lm-primary-600)',\n        backgroundColor: theme === 'dark' ? 'var(--lm-primary-600)' : 'var(--lm-primary-50)',\n      }\n    }\n\n    return {\n      color: theme === 'dark' ? 'var(--lm-gray-200)' : 'var(--lm-text-primary)',\n      backgroundColor: 'transparent',\n    }\n  }\n\n  const getHoverStyles = (isSelected: boolean, isDisabled: boolean): React.CSSProperties => {\n    if (isDisabled || isSelected) return {}\n\n    return {\n      backgroundColor: theme === 'dark' ? 'var(--lm-gray-700)' : 'var(--lm-bg-hover)',\n    }\n  }\n\n  const renderMenuItem = (item: LMMenuItem, level: number = 0, keyPath: string[] = []) => {\n    if (item.type === 'divider') {\n      return (\n        <div\n          key={item.key}\n          className=\"my-2 mx-3 border-t\"\n          style={{ borderColor: theme === 'dark' ? 'var(--lm-gray-700)' : 'var(--lm-border-light)' }}\n        />\n      )\n    }\n\n    if (item.type === 'group') {\n      return (\n        <div key={item.key} className=\"py-2\">\n          <div\n            className={`${collapsed ? collapsedPaddingClasses[resolvedSize] : itemPaddingClasses[resolvedSize]} text-xs font-semibold uppercase tracking-wider`}\n            style={{ color: theme === 'dark' ? 'var(--lm-gray-500)' : 'var(--lm-text-tertiary)' }}\n          >\n            {!collapsed && item.label}\n          </div>\n          {item.children?.map((child) => renderMenuItem(child, level, [...keyPath, item.key]))}\n        </div>\n      )\n    }\n\n    const hasChildren = !!(item.children && item.children.length > 0)\n    const isOpen = openKeys.includes(item.key)\n    const isSelected = selectedKeys.includes(item.key)\n    const currentKeyPath = [...keyPath, item.key]\n    const indentStyle = !collapsed && mode === 'inline' ? { paddingLeft: `${16 + level * 16}px` } : {}\n\n    return (\n      <div key={item.key}>\n        <MenuItem\n          item={item}\n          size={resolvedSize}\n          collapsed={collapsed}\n          hasChildren={hasChildren}\n          isOpen={isOpen}\n          isSelected={isSelected}\n          theme={theme}\n          mode={mode}\n          paddingClass={collapsed ? collapsedPaddingClasses[resolvedSize] : itemPaddingClasses[resolvedSize]}\n          textClass={SIZE_TEXT_CLASSES[resolvedSize]}\n          gapClass={SIZE_GAP_CLASSES[resolvedSize]}\n          iconClass={iconSizeClasses[resolvedSize]}\n          indentStyle={indentStyle}\n          getStyles={getItemStyles}\n          getHoverStyles={getHoverStyles}\n          onSelect={() => {\n            if (!item.disabled && !hasChildren) {\n              handleSelect(item.key, currentKeyPath)\n            }\n          }}\n          onToggle={() => {\n            if (hasChildren && !item.disabled) {\n              handleOpenChange(item.key)\n            }\n          }}\n        />\n\n        {/* Sub menu */}\n        {hasChildren && isOpen && !collapsed && mode === 'inline' && (\n          <div className=\"overflow-hidden transition-all duration-200\">\n            {item.children?.map((child) => renderMenuItem(child, level + 1, currentKeyPath))}\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  const containerStyles: React.CSSProperties = {\n    width: collapsed ? collapsedWidth : undefined,\n    backgroundColor: theme === 'dark' ? 'var(--lm-gray-900)' : 'var(--lm-bg-elevated)',\n    transition: 'width 0.2s ease-in-out',\n  }\n\n  const flexDirection = mode === 'horizontal' ? 'row' : 'column'\n\n  return (\n    <nav\n      className={`flex ${className}`}\n      style={{\n        ...containerStyles,\n        flexDirection,\n      }}\n      role=\"menu\"\n    >\n      {items.map((item) => renderMenuItem(item))}\n    </nav>\n  )\n}\n\n// Separate MenuItem component for hover state\ninterface MenuItemInternalProps {\n  item: LMMenuItem\n  size: ComponentSize\n  collapsed: boolean\n  hasChildren: boolean\n  isOpen: boolean\n  isSelected: boolean\n  theme: 'light' | 'dark'\n  mode: 'vertical' | 'horizontal' | 'inline'\n  paddingClass: string\n  textClass: string\n  gapClass: string\n  iconClass: string\n  indentStyle: React.CSSProperties\n  getStyles: (isSelected: boolean, isDisabled: boolean) => React.CSSProperties\n  getHoverStyles: (isSelected: boolean, isDisabled: boolean) => React.CSSProperties\n  onSelect: () => void\n  onToggle: () => void\n}\n\nconst MenuItem: React.FC<MenuItemInternalProps> = ({\n  item,\n  collapsed,\n  hasChildren,\n  isOpen,\n  isSelected,\n  paddingClass,\n  textClass,\n  gapClass,\n  iconClass,\n  indentStyle,\n  getStyles,\n  getHoverStyles,\n  onSelect,\n  onToggle,\n}) => {\n  const [isHovered, setIsHovered] = useState(false)\n\n  const baseStyles = getStyles(isSelected, item.disabled || false)\n  const hoverStyles = isHovered ? getHoverStyles(isSelected, item.disabled || false) : {}\n\n  return (\n    <div\n      className={`\n        ${paddingClass} ${textClass}\n        flex items-center ${gapClass}\n        cursor-pointer transition-colors duration-150\n        rounded-lg mx-2 my-0.5\n        ${collapsed ? 'justify-center' : ''}\n      `}\n      style={{\n        ...baseStyles,\n        ...hoverStyles,\n        ...indentStyle,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={() => {\n        if (hasChildren) {\n          onToggle()\n        } else {\n          onSelect()\n        }\n      }}\n      role=\"menuitem\"\n      aria-disabled={item.disabled || undefined}\n      aria-expanded={hasChildren ? isOpen : undefined}\n      title={collapsed ? (typeof item.label === 'string' ? item.label : undefined) : undefined}\n    >\n      {item.icon && (\n        <span className={`flex-shrink-0 ${iconClass}`}>{item.icon}</span>\n      )}\n\n      {!collapsed && (\n        <>\n          <span className=\"flex-1 truncate\">{item.label}</span>\n\n          {hasChildren && (\n            <span\n              className={`flex-shrink-0 transition-transform duration-200 ${\n                isOpen ? 'rotate-180' : ''\n              }`}\n            >\n              <ChevronDownIcon className=\"w-4 h-4\" />\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default LMMenu\n"],"names":[],"mappings":"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"}

package/dist/LMModal-BCVVPLot.cjs

@@ -0,0 +1,203 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactDom = require("react-dom");
+const LMButton = require("./LMButton-B258yfky.cjs");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const MODAL_FOOTER_SIZE_MAP = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md",
+  xl: "md",
+  "2xl": "lg"
+};
+const CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
+const WindowIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) });
+const LMModal = ({
+  visible,
+  title,
+  children,
+  footer,
+  onClose,
+  onOk,
+  onCancel,
+  okText = "Confirm",
+  cancelText = "Cancel",
+  showOk = true,
+  showCancel = true,
+  okLoading = false,
+  cancelLoading = false,
+  mask = true,
+  maskClosable = false,
+  closable = true,
+  closeIcon,
+  headerIcon,
+  width,
+  height,
+  size = "md",
+  className = "",
+  style,
+  centered = true,
+  fullscreen = false,
+  animationDuration: _animationDuration = 300,
+  animation = true
+}) => {
+  const modalRef = React.useRef(null);
+  const backdropRef = React.useRef(null);
+  const resolvedSize = componentSizes.clampComponentSize(size, componentSizes.COMPONENT_SIZE_ORDER);
+  const footerButtonSize = MODAL_FOOTER_SIZE_MAP[resolvedSize];
+  const getModalStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-xl)",
+      borderRadius: "var(--lm-radius-xl)",
+      border: "1px solid var(--lm-border-default)",
+      backdropFilter: "blur(20px) saturate(180%)",
+      WebkitBackdropFilter: "blur(20px) saturate(180%)",
+      ...style
+    };
+    if (fullscreen) {
+      baseStyles.width = "100vw";
+      baseStyles.height = "100vh";
+      baseStyles.maxWidth = "100vw";
+      baseStyles.maxHeight = "100vh";
+      baseStyles.borderRadius = "0";
+    } else {
+      baseStyles.width = width ? typeof width === "number" ? `${width}px` : width : componentSizes.SIZE_MODAL_CONFIG[resolvedSize].width;
+      baseStyles.maxWidth = componentSizes.SIZE_MODAL_CONFIG[resolvedSize].maxWidth;
+      if (height) {
+        baseStyles.height = typeof height === "number" ? `${height}px` : height;
+      }
+    }
+    return baseStyles;
+  };
+  const getBackdropStyles = () => mask ? {
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    backdropFilter: "blur(8px) saturate(150%)",
+    WebkitBackdropFilter: "blur(8px) saturate(150%)"
+  } : { backgroundColor: "transparent", backdropFilter: "none" };
+  const handleOk = () => onOk ? onOk() : onClose == null ? void 0 : onClose();
+  const handleCancel = React.useCallback(() => {
+    if (onCancel) onCancel();
+    else onClose == null ? void 0 : onClose();
+  }, [onCancel, onClose]);
+  const handleBackdropClick = (e) => {
+    if (maskClosable && e.target === backdropRef.current) handleCancel();
+  };
+  React.useEffect(() => {
+    const keyHandler = (e) => {
+      if (visible && e.key === "Escape") handleCancel();
+    };
+    if (visible) {
+      document.addEventListener("keydown", keyHandler);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", keyHandler);
+      if (visible) document.body.style.overflow = "";
+    };
+  }, [visible, handleCancel]);
+  const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex items-center justify-end gap-3 px-6 py-4 border-t",
+      style: { borderColor: "var(--lm-border-default)" },
+      children: [
+        showCancel && /* @__PURE__ */ jsxRuntime.jsx(
+          LMButton.LMButton,
+          {
+            variant: "secondary",
+            size: footerButtonSize,
+            onClick: handleCancel,
+            disabled: cancelLoading,
+            loading: cancelLoading,
+            children: cancelText
+          }
+        ),
+        showOk && /* @__PURE__ */ jsxRuntime.jsx(
+          LMButton.LMButton,
+          {
+            variant: "primary",
+            size: footerButtonSize,
+            onClick: handleOk,
+            disabled: okLoading,
+            loading: okLoading,
+            children: okText
+          }
+        )
+      ]
+    }
+  );
+  const getAnimationClasses = () => {
+    if (!animation) return "";
+    return "transition-all duration-200 ease-out";
+  };
+  if (!visible) return null;
+  const modalContent = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: backdropRef,
+      className: `fixed inset-0 z-50 flex ${centered ? "items-center" : "items-start pt-20"} justify-center ${getAnimationClasses()}`,
+      style: getBackdropStyles(),
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: modalRef,
+          className: `relative ${getAnimationClasses()} ${className}`,
+          style: getModalStyles(),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            (title || closable) && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between p-6 pb-4 border-b",
+                style: { borderColor: "var(--lm-border-default)" },
+                children: [
+                  title && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "h3",
+                    {
+                      className: `font-semibold flex items-center gap-2 ${componentSizes.SIZE_HEADING_CLASSES[resolvedSize]}`,
+                      style: { color: "var(--lm-text-primary)" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--lm-text-secondary)" }, children: headerIcon || /* @__PURE__ */ jsxRuntime.jsx(WindowIcon, {}) }),
+                        title
+                      ]
+                    }
+                  ),
+                  closable && /* @__PURE__ */ jsxRuntime.jsx(
+                    LMButton.LMButton,
+                    {
+                      variant: "ghost",
+                      size: "xs",
+                      onClick: handleCancel,
+                      leftIcon: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}),
+                      className: "w-8 h-8 p-0",
+                      "aria-label": "Close dialog",
+                      title: "Close",
+                      style: {
+                        borderRadius: "0.5rem",
+                        backgroundColor: "var(--lm-bg-paper)",
+                        borderColor: "var(--lm-border-default)",
+                        color: "var(--lm-text-secondary)"
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children }),
+            footer !== void 0 ? footer : showOk || showCancel ? defaultFooter : null
+          ]
+        }
+      )
+    }
+  );
+  return reactDom.createPortal(modalContent, document.body);
+};
+const LMModal_default = React.memo(LMModal);
+exports.LMModal_default = LMModal_default;
+//# sourceMappingURL=LMModal-BCVVPLot.cjs.map

package/dist/LMModal-BCVVPLot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMModal-BCVVPLot.cjs","sources":["../src/components/Feedback/LMModal/LMModal.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, memo } from 'react'\nimport { createPortal } from 'react-dom'\nimport { LMButton } from '../../General/LMButton'\nimport {\n  COMPONENT_SIZE_ORDER,\n  SIZE_HEADING_CLASSES,\n  SIZE_MODAL_CONFIG,\n  clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nconst MODAL_FOOTER_SIZE_MAP: Record<ComponentSize, ComponentSize> = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  '2xl': 'lg',\n}\n\nconst CloseIcon: React.FC = () => (\n  <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\nconst WindowIcon: React.FC = () => (\n  <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\n  </svg>\n)\n\nexport interface LMModalProps {\n  /** Visibility */\n  visible: boolean\n  /** Title */\n  title?: string\n  /** Content */\n  children: React.ReactNode\n  /** Custom footer */\n  footer?: React.ReactNode\n  /** Close callback */\n  onClose?: () => void\n  /** OK callback */\n  onOk?: () => void\n  /** Cancel callback */\n  onCancel?: () => void\n  /** OK button text */\n  okText?: string\n  /** Cancel button text */\n  cancelText?: string\n  /** Show OK button */\n  showOk?: boolean\n  /** Show Cancel button */\n  showCancel?: boolean\n  /** OK loading state */\n  okLoading?: boolean\n  /** Cancel loading state */\n  cancelLoading?: boolean\n  /** Show mask */\n  mask?: boolean\n  /** Click mask to close */\n  maskClosable?: boolean\n  /** Show close button */\n  closable?: boolean\n  /** Custom close icon */\n  closeIcon?: React.ReactNode\n  /** Header icon */\n  headerIcon?: React.ReactNode\n  /** Width */\n  width?: string | number\n  /** Height */\n  height?: string | number\n  /** Size preset */\n  size?: ComponentSize\n  /** Custom class name */\n  className?: string\n  /** Custom style */\n  style?: React.CSSProperties\n  /** Center vertically */\n  centered?: boolean\n  /** Fullscreen mode */\n  fullscreen?: boolean\n  /** Animation duration (ms) */\n  animationDuration?: number\n  /** Enable animation */\n  animation?: boolean\n}\n\nconst LMModal: React.FC<LMModalProps> = ({\n  visible,\n  title,\n  children,\n  footer,\n  onClose,\n  onOk,\n  onCancel,\n  okText = 'Confirm',\n  cancelText = 'Cancel',\n  showOk = true,\n  showCancel = true,\n  okLoading = false,\n  cancelLoading = false,\n  mask = true,\n  maskClosable = false,\n  closable = true,\n  closeIcon,\n  headerIcon,\n  width,\n  height,\n  size = 'md',\n  className = '',\n  style,\n  centered = true,\n  fullscreen = false,\n  animationDuration: _animationDuration = 300,\n  animation = true,\n}) => {\n  // Note: animationDuration is kept for API compatibility but uses CSS variables now\n  void _animationDuration\n  const modalRef = useRef<HTMLDivElement>(null)\n  const backdropRef = useRef<HTMLDivElement>(null)\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n  const footerButtonSize = MODAL_FOOTER_SIZE_MAP[resolvedSize]\n\n  const getModalStyles = () => {\n    // Apple-like refined modal styling\n    const baseStyles: React.CSSProperties = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      color: 'var(--lm-text-primary)',\n      borderColor: 'var(--lm-border-default)',\n      boxShadow: 'var(--lm-shadow-xl)',\n      borderRadius: 'var(--lm-radius-xl)',\n      border: '1px solid var(--lm-border-default)',\n      backdropFilter: 'blur(20px) saturate(180%)',\n      WebkitBackdropFilter: 'blur(20px) saturate(180%)',\n      ...style,\n    }\n\n    if (fullscreen) {\n      baseStyles.width = '100vw'\n      baseStyles.height = '100vh'\n      baseStyles.maxWidth = '100vw'\n      baseStyles.maxHeight = '100vh'\n      baseStyles.borderRadius = '0'\n    } else {\n      baseStyles.width = width\n        ? typeof width === 'number'\n          ? `${width}px`\n          : width\n        : SIZE_MODAL_CONFIG[resolvedSize].width\n      baseStyles.maxWidth = SIZE_MODAL_CONFIG[resolvedSize].maxWidth\n      if (height) {\n        baseStyles.height = typeof height === 'number' ? `${height}px` : height\n      }\n    }\n\n    return baseStyles\n  }\n\n  // Apple-like refined backdrop\n  const getBackdropStyles = () =>\n    mask\n      ? {\n          backgroundColor: 'rgba(0, 0, 0, 0.4)',\n          backdropFilter: 'blur(8px) saturate(150%)',\n          WebkitBackdropFilter: 'blur(8px) saturate(150%)',\n        }\n      : { backgroundColor: 'transparent', backdropFilter: 'none' }\n\n  const handleOk = () => (onOk ? onOk() : onClose?.())\n\n  const handleCancel = useCallback(() => {\n    if (onCancel) onCancel()\n    else onClose?.()\n  }, [onCancel, onClose])\n\n  const handleBackdropClick = (e: React.MouseEvent) => {\n    if (maskClosable && e.target === backdropRef.current) handleCancel()\n  }\n\n  useEffect(() => {\n    const keyHandler = (e: KeyboardEvent) => {\n      if (visible && e.key === 'Escape') handleCancel()\n    }\n    if (visible) {\n      document.addEventListener('keydown', keyHandler)\n      document.body.style.overflow = 'hidden'\n    }\n    return () => {\n      document.removeEventListener('keydown', keyHandler)\n      if (visible) document.body.style.overflow = ''\n    }\n  }, [visible, handleCancel])\n\n  const defaultFooter = (\n    <div\n      className=\"flex items-center justify-end gap-3 px-6 py-4 border-t\"\n      style={{ borderColor: 'var(--lm-border-default)' }}\n    >\n      {showCancel && (\n        <LMButton\n          variant=\"secondary\"\n          size={footerButtonSize}\n          onClick={handleCancel}\n          disabled={cancelLoading}\n          loading={cancelLoading}\n        >\n          {cancelText}\n        </LMButton>\n      )}\n      {showOk && (\n        <LMButton\n          variant=\"primary\"\n          size={footerButtonSize}\n          onClick={handleOk}\n          disabled={okLoading}\n          loading={okLoading}\n        >\n          {okText}\n        </LMButton>\n      )}\n    </div>\n  )\n\n  // Apple-like refined animation with spring easing\n  const getAnimationClasses = () => {\n    if (!animation) return ''\n    // Use faster, snappier duration for Apple-like feel\n    return 'transition-all duration-200 ease-out'\n  }\n\n  if (!visible) return null\n\n  const modalContent = (\n    <div\n      ref={backdropRef}\n      className={`fixed inset-0 z-50 flex ${centered ? 'items-center' : 'items-start pt-20'} justify-center ${getAnimationClasses()}`}\n      style={getBackdropStyles()}\n      onClick={handleBackdropClick}\n    >\n      <div\n        ref={modalRef}\n        className={`relative ${getAnimationClasses()} ${className}`}\n        style={getModalStyles()}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || closable) && (\n          <div\n            className=\"flex items-center justify-between p-6 pb-4 border-b\"\n            style={{ borderColor: 'var(--lm-border-default)' }}\n          >\n            {title && (\n              <h3\n                className={`font-semibold flex items-center gap-2 ${SIZE_HEADING_CLASSES[resolvedSize]}`}\n                style={{ color: 'var(--lm-text-primary)' }}\n              >\n                <span style={{ color: 'var(--lm-text-secondary)' }}>\n                  {headerIcon || <WindowIcon />}\n                </span>\n                {title}\n              </h3>\n            )}\n            {closable && (\n              <LMButton\n                variant=\"ghost\"\n                size=\"xs\"\n                onClick={handleCancel}\n                leftIcon={closeIcon || <CloseIcon />}\n                className=\"w-8 h-8 p-0\"\n                aria-label=\"Close dialog\"\n                title=\"Close\"\n                style={{\n                  borderRadius: '0.5rem',\n                  backgroundColor: 'var(--lm-bg-paper)',\n                  borderColor: 'var(--lm-border-default)',\n                  color: 'var(--lm-text-secondary)',\n                }}\n              />\n            )}\n          </div>\n        )}\n\n        <div className=\"p-6\">{children}</div>\n\n        {footer !== undefined\n          ? footer\n          : showOk || showCancel\n            ? defaultFooter\n            : null}\n      </div>\n    </div>\n  )\n\n  return createPortal(modalContent, document.body)\n}\n\nexport default memo(LMModal)\n"],"names":["jsx","useRef","clampComponentSize","COMPONENT_SIZE_ORDER","SIZE_MODAL_CONFIG","useCallback","useEffect","jsxs","LMButton","SIZE_HEADING_CLASSES","createPortal","memo"],"mappings":"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"}