@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMDrawer--lFV_a3m.cjs

@@ -0,0 +1,207 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactDom = require("react-dom");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) });
+const LMDrawer = ({
+  visible,
+  title,
+  children,
+  placement = "right",
+  width = 378,
+  height = 378,
+  closable = true,
+  mask = true,
+  maskClosable = true,
+  footer,
+  onClose,
+  size = "md",
+  extra,
+  className = "",
+  zIndex = 1e3
+}) => {
+  const resolvedSize = componentSizes.clampComponentSize(size, componentSizes.COMPONENT_SIZE_ORDER);
+  const titleTextClasses = {
+    xs: "text-sm",
+    sm: "text-base",
+    md: "text-lg",
+    lg: "text-xl",
+    xl: "text-2xl",
+    "2xl": "text-3xl"
+  };
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Escape" && visible) {
+        onClose == null ? void 0 : onClose();
+      }
+    },
+    [visible, onClose]
+  );
+  React.useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  React.useEffect(() => {
+    if (visible) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [visible]);
+  const handleMaskClick = () => {
+    if (maskClosable) {
+      onClose == null ? void 0 : onClose();
+    }
+  };
+  const getDrawerStyles = () => {
+    const base = {
+      position: "fixed",
+      backgroundColor: "var(--lm-bg-elevated)",
+      boxShadow: "var(--lm-shadow-xl)",
+      display: "flex",
+      flexDirection: "column",
+      zIndex: zIndex + 1,
+      transition: "transform 0.3s ease-in-out"
+    };
+    const widthValue = typeof width === "number" ? `${width}px` : width;
+    const heightValue = typeof height === "number" ? `${height}px` : height;
+    switch (placement) {
+      case "right":
+        return {
+          ...base,
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: widthValue,
+          maxWidth: "100vw",
+          transform: visible ? "translateX(0)" : "translateX(100%)"
+        };
+      case "left":
+        return {
+          ...base,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: widthValue,
+          maxWidth: "100vw",
+          transform: visible ? "translateX(0)" : "translateX(-100%)"
+        };
+      case "top":
+        return {
+          ...base,
+          top: 0,
+          left: 0,
+          right: 0,
+          height: heightValue,
+          maxHeight: "100vh",
+          transform: visible ? "translateY(0)" : "translateY(-100%)"
+        };
+      case "bottom":
+        return {
+          ...base,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: heightValue,
+          maxHeight: "100vh",
+          transform: visible ? "translateY(0)" : "translateY(100%)"
+        };
+      default:
+        return base;
+    }
+  };
+  if (typeof document === "undefined") return null;
+  const drawerContent = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex,
+        pointerEvents: visible ? "auto" : "none"
+      },
+      children: [
+        mask && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.45)",
+              opacity: visible ? 1 : 0,
+              transition: "opacity 0.3s ease-in-out",
+              zIndex
+            },
+            onClick: handleMaskClick,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: getDrawerStyles(),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? "drawer-title" : void 0,
+            children: [
+              (title || closable || extra) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `flex items-center justify-between ${componentSizes.SIZE_PADDING_CLASSES[resolvedSize]} border-b`,
+                  style: { borderColor: "var(--lm-border-default)" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: title && /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        id: "drawer-title",
+                        className: `${titleTextClasses[resolvedSize]} font-semibold truncate`,
+                        style: { color: "var(--lm-text-primary)" },
+                        children: title
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                      extra,
+                      closable && /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          className: "p-1.5 rounded-lg transition-colors duration-200 hover:bg-(--lm-bg-hover)",
+                          style: { color: "var(--lm-text-secondary)" },
+                          onClick: onClose,
+                          "aria-label": "关闭",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `flex-1 overflow-auto ${componentSizes.SIZE_PADDING_CLASSES[resolvedSize]}`,
+                  style: { color: "var(--lm-text-primary)" },
+                  children
+                }
+              ),
+              footer && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `flex items-center justify-end gap-2 ${componentSizes.SIZE_PADDING_CLASSES[resolvedSize]} border-t`,
+                  style: { borderColor: "var(--lm-border-default)" },
+                  children: footer
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return reactDom.createPortal(drawerContent, document.body);
+};
+exports.LMDrawer = LMDrawer;
+//# sourceMappingURL=LMDrawer--lFV_a3m.cjs.map

package/dist/LMDrawer--lFV_a3m.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMDrawer--lFV_a3m.cjs","sources":["../src/components/Feedback/LMDrawer/LMDrawer.tsx"],"sourcesContent":["import React, { useEffect, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n  COMPONENT_SIZE_ORDER,\n  SIZE_PADDING_CLASSES,\n  clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMDrawerProps {\n  /** Visibility state */\n  visible: boolean\n  /** Drawer title */\n  title?: React.ReactNode\n  /** Drawer content */\n  children: React.ReactNode\n  /** Drawer placement */\n  placement?: 'top' | 'right' | 'bottom' | 'left'\n  /** Drawer width (for left/right placement) */\n  width?: string | number\n  /** Drawer height (for top/bottom placement) */\n  height?: string | number\n  /** Show close button */\n  closable?: boolean\n  /** Show mask */\n  mask?: boolean\n  /** Close on mask click */\n  maskClosable?: boolean\n  /** Footer content */\n  footer?: React.ReactNode\n  /** Close handler */\n  onClose?: () => void\n  /** Component size */\n  size?: ComponentSize\n  /** Extra content in header */\n  extra?: React.ReactNode\n  /** Custom class name */\n  className?: string\n  /** Z-index */\n  zIndex?: number\n}\n\nconst CloseIcon: React.FC = () => (\n  <svg className=\"w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\nconst LMDrawer: React.FC<LMDrawerProps> = ({\n  visible,\n  title,\n  children,\n  placement = 'right',\n  width = 378,\n  height = 378,\n  closable = true,\n  mask = true,\n  maskClosable = true,\n  footer,\n  onClose,\n  size = 'md',\n  extra,\n  className = '',\n  zIndex = 1000,\n}) => {\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n\n  const titleTextClasses: Record<ComponentSize, string> = {\n    xs: 'text-sm',\n    sm: 'text-base',\n    md: 'text-lg',\n    lg: 'text-xl',\n    xl: 'text-2xl',\n    '2xl': 'text-3xl',\n  }\n\n  // Handle ESC key\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && visible) {\n        onClose?.()\n      }\n    },\n    [visible, onClose]\n  )\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [handleKeyDown])\n\n  // Lock body scroll when visible\n  useEffect(() => {\n    if (visible) {\n      const originalOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      return () => {\n        document.body.style.overflow = originalOverflow\n      }\n    }\n  }, [visible])\n\n  const handleMaskClick = () => {\n    if (maskClosable) {\n      onClose?.()\n    }\n  }\n\n  const getDrawerStyles = (): React.CSSProperties => {\n    const base: React.CSSProperties = {\n      position: 'fixed',\n      backgroundColor: 'var(--lm-bg-elevated)',\n      boxShadow: 'var(--lm-shadow-xl)',\n      display: 'flex',\n      flexDirection: 'column',\n      zIndex: zIndex + 1,\n      transition: 'transform 0.3s ease-in-out',\n    }\n\n    const widthValue = typeof width === 'number' ? `${width}px` : width\n    const heightValue = typeof height === 'number' ? `${height}px` : height\n\n    switch (placement) {\n      case 'right':\n        return {\n          ...base,\n          top: 0,\n          right: 0,\n          bottom: 0,\n          width: widthValue,\n          maxWidth: '100vw',\n          transform: visible ? 'translateX(0)' : 'translateX(100%)',\n        }\n      case 'left':\n        return {\n          ...base,\n          top: 0,\n          left: 0,\n          bottom: 0,\n          width: widthValue,\n          maxWidth: '100vw',\n          transform: visible ? 'translateX(0)' : 'translateX(-100%)',\n        }\n      case 'top':\n        return {\n          ...base,\n          top: 0,\n          left: 0,\n          right: 0,\n          height: heightValue,\n          maxHeight: '100vh',\n          transform: visible ? 'translateY(0)' : 'translateY(-100%)',\n        }\n      case 'bottom':\n        return {\n          ...base,\n          bottom: 0,\n          left: 0,\n          right: 0,\n          height: heightValue,\n          maxHeight: '100vh',\n          transform: visible ? 'translateY(0)' : 'translateY(100%)',\n        }\n      default:\n        return base\n    }\n  }\n\n  if (typeof document === 'undefined') return null\n\n  const drawerContent = (\n    <div\n      className={className}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        zIndex,\n        pointerEvents: visible ? 'auto' : 'none',\n      }}\n    >\n      {/* Mask */}\n      {mask && (\n        <div\n          style={{\n            position: 'fixed',\n            inset: 0,\n            backgroundColor: 'rgba(0, 0, 0, 0.45)',\n            opacity: visible ? 1 : 0,\n            transition: 'opacity 0.3s ease-in-out',\n            zIndex,\n          }}\n          onClick={handleMaskClick}\n          aria-hidden=\"true\"\n        />\n      )}\n\n      {/* Drawer */}\n      <div\n        style={getDrawerStyles()}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? 'drawer-title' : undefined}\n      >\n        {/* Header */}\n        {(title || closable || extra) && (\n          <div\n            className={`flex items-center justify-between ${SIZE_PADDING_CLASSES[resolvedSize]} border-b`}\n            style={{ borderColor: 'var(--lm-border-default)' }}\n          >\n            <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n              {title && (\n                <h3\n                  id=\"drawer-title\"\n                  className={`${titleTextClasses[resolvedSize]} font-semibold truncate`}\n                  style={{ color: 'var(--lm-text-primary)' }}\n                >\n                  {title}\n                </h3>\n              )}\n            </div>\n            <div className=\"flex items-center gap-2 shrink-0\">\n              {extra}\n              {closable && (\n                <button\n                  className=\"p-1.5 rounded-lg transition-colors duration-200 hover:bg-(--lm-bg-hover)\"\n                  style={{ color: 'var(--lm-text-secondary)' }}\n                  onClick={onClose}\n                  aria-label=\"关闭\"\n                >\n                  <CloseIcon />\n                </button>\n              )}\n            </div>\n          </div>\n        )}\n\n        {/* Body */}\n        <div\n          className={`flex-1 overflow-auto ${SIZE_PADDING_CLASSES[resolvedSize]}`}\n          style={{ color: 'var(--lm-text-primary)' }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <div\n            className={`flex items-center justify-end gap-2 ${SIZE_PADDING_CLASSES[resolvedSize]} border-t`}\n            style={{ borderColor: 'var(--lm-border-default)' }}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n\n  return createPortal(drawerContent, document.body)\n}\n\nexport default LMDrawer\n"],"names":["jsx","clampComponentSize","COMPONENT_SIZE_ORDER","useCallback","useEffect","jsxs","SIZE_PADDING_CLASSES","createPortal"],"mappings":"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"}

package/dist/LMDrawer-DJ5ugeZR.js

@@ -0,0 +1,208 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { c as clampComponentSize, e as SIZE_PADDING_CLASSES, C as COMPONENT_SIZE_ORDER } from "./componentSizes-CdWNL526.js";
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) });
+const LMDrawer = ({
+  visible,
+  title,
+  children,
+  placement = "right",
+  width = 378,
+  height = 378,
+  closable = true,
+  mask = true,
+  maskClosable = true,
+  footer,
+  onClose,
+  size = "md",
+  extra,
+  className = "",
+  zIndex = 1e3
+}) => {
+  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER);
+  const titleTextClasses = {
+    xs: "text-sm",
+    sm: "text-base",
+    md: "text-lg",
+    lg: "text-xl",
+    xl: "text-2xl",
+    "2xl": "text-3xl"
+  };
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape" && visible) {
+        onClose == null ? void 0 : onClose();
+      }
+    },
+    [visible, onClose]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  useEffect(() => {
+    if (visible) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [visible]);
+  const handleMaskClick = () => {
+    if (maskClosable) {
+      onClose == null ? void 0 : onClose();
+    }
+  };
+  const getDrawerStyles = () => {
+    const base = {
+      position: "fixed",
+      backgroundColor: "var(--lm-bg-elevated)",
+      boxShadow: "var(--lm-shadow-xl)",
+      display: "flex",
+      flexDirection: "column",
+      zIndex: zIndex + 1,
+      transition: "transform 0.3s ease-in-out"
+    };
+    const widthValue = typeof width === "number" ? `${width}px` : width;
+    const heightValue = typeof height === "number" ? `${height}px` : height;
+    switch (placement) {
+      case "right":
+        return {
+          ...base,
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: widthValue,
+          maxWidth: "100vw",
+          transform: visible ? "translateX(0)" : "translateX(100%)"
+        };
+      case "left":
+        return {
+          ...base,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: widthValue,
+          maxWidth: "100vw",
+          transform: visible ? "translateX(0)" : "translateX(-100%)"
+        };
+      case "top":
+        return {
+          ...base,
+          top: 0,
+          left: 0,
+          right: 0,
+          height: heightValue,
+          maxHeight: "100vh",
+          transform: visible ? "translateY(0)" : "translateY(-100%)"
+        };
+      case "bottom":
+        return {
+          ...base,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: heightValue,
+          maxHeight: "100vh",
+          transform: visible ? "translateY(0)" : "translateY(100%)"
+        };
+      default:
+        return base;
+    }
+  };
+  if (typeof document === "undefined") return null;
+  const drawerContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex,
+        pointerEvents: visible ? "auto" : "none"
+      },
+      children: [
+        mask && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.45)",
+              opacity: visible ? 1 : 0,
+              transition: "opacity 0.3s ease-in-out",
+              zIndex
+            },
+            onClick: handleMaskClick,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: getDrawerStyles(),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? "drawer-title" : void 0,
+            children: [
+              (title || closable || extra) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `flex items-center justify-between ${SIZE_PADDING_CLASSES[resolvedSize]} border-b`,
+                  style: { borderColor: "var(--lm-border-default)" },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: title && /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        id: "drawer-title",
+                        className: `${titleTextClasses[resolvedSize]} font-semibold truncate`,
+                        style: { color: "var(--lm-text-primary)" },
+                        children: title
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                      extra,
+                      closable && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: "p-1.5 rounded-lg transition-colors duration-200 hover:bg-(--lm-bg-hover)",
+                          style: { color: "var(--lm-text-secondary)" },
+                          onClick: onClose,
+                          "aria-label": "关闭",
+                          children: /* @__PURE__ */ jsx(CloseIcon, {})
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex-1 overflow-auto ${SIZE_PADDING_CLASSES[resolvedSize]}`,
+                  style: { color: "var(--lm-text-primary)" },
+                  children
+                }
+              ),
+              footer && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex items-center justify-end gap-2 ${SIZE_PADDING_CLASSES[resolvedSize]} border-t`,
+                  style: { borderColor: "var(--lm-border-default)" },
+                  children: footer
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return createPortal(drawerContent, document.body);
+};
+export {
+  LMDrawer as L
+};
+//# sourceMappingURL=LMDrawer-DJ5ugeZR.js.map

package/dist/LMDrawer-DJ5ugeZR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMDrawer-DJ5ugeZR.js","sources":["../src/components/Feedback/LMDrawer/LMDrawer.tsx"],"sourcesContent":["import React, { useEffect, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n  COMPONENT_SIZE_ORDER,\n  SIZE_PADDING_CLASSES,\n  clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMDrawerProps {\n  /** Visibility state */\n  visible: boolean\n  /** Drawer title */\n  title?: React.ReactNode\n  /** Drawer content */\n  children: React.ReactNode\n  /** Drawer placement */\n  placement?: 'top' | 'right' | 'bottom' | 'left'\n  /** Drawer width (for left/right placement) */\n  width?: string | number\n  /** Drawer height (for top/bottom placement) */\n  height?: string | number\n  /** Show close button */\n  closable?: boolean\n  /** Show mask */\n  mask?: boolean\n  /** Close on mask click */\n  maskClosable?: boolean\n  /** Footer content */\n  footer?: React.ReactNode\n  /** Close handler */\n  onClose?: () => void\n  /** Component size */\n  size?: ComponentSize\n  /** Extra content in header */\n  extra?: React.ReactNode\n  /** Custom class name */\n  className?: string\n  /** Z-index */\n  zIndex?: number\n}\n\nconst CloseIcon: React.FC = () => (\n  <svg className=\"w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\nconst LMDrawer: React.FC<LMDrawerProps> = ({\n  visible,\n  title,\n  children,\n  placement = 'right',\n  width = 378,\n  height = 378,\n  closable = true,\n  mask = true,\n  maskClosable = true,\n  footer,\n  onClose,\n  size = 'md',\n  extra,\n  className = '',\n  zIndex = 1000,\n}) => {\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n\n  const titleTextClasses: Record<ComponentSize, string> = {\n    xs: 'text-sm',\n    sm: 'text-base',\n    md: 'text-lg',\n    lg: 'text-xl',\n    xl: 'text-2xl',\n    '2xl': 'text-3xl',\n  }\n\n  // Handle ESC key\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && visible) {\n        onClose?.()\n      }\n    },\n    [visible, onClose]\n  )\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [handleKeyDown])\n\n  // Lock body scroll when visible\n  useEffect(() => {\n    if (visible) {\n      const originalOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      return () => {\n        document.body.style.overflow = originalOverflow\n      }\n    }\n  }, [visible])\n\n  const handleMaskClick = () => {\n    if (maskClosable) {\n      onClose?.()\n    }\n  }\n\n  const getDrawerStyles = (): React.CSSProperties => {\n    const base: React.CSSProperties = {\n      position: 'fixed',\n      backgroundColor: 'var(--lm-bg-elevated)',\n      boxShadow: 'var(--lm-shadow-xl)',\n      display: 'flex',\n      flexDirection: 'column',\n      zIndex: zIndex + 1,\n      transition: 'transform 0.3s ease-in-out',\n    }\n\n    const widthValue = typeof width === 'number' ? `${width}px` : width\n    const heightValue = typeof height === 'number' ? `${height}px` : height\n\n    switch (placement) {\n      case 'right':\n        return {\n          ...base,\n          top: 0,\n          right: 0,\n          bottom: 0,\n          width: widthValue,\n          maxWidth: '100vw',\n          transform: visible ? 'translateX(0)' : 'translateX(100%)',\n        }\n      case 'left':\n        return {\n          ...base,\n          top: 0,\n          left: 0,\n          bottom: 0,\n          width: widthValue,\n          maxWidth: '100vw',\n          transform: visible ? 'translateX(0)' : 'translateX(-100%)',\n        }\n      case 'top':\n        return {\n          ...base,\n          top: 0,\n          left: 0,\n          right: 0,\n          height: heightValue,\n          maxHeight: '100vh',\n          transform: visible ? 'translateY(0)' : 'translateY(-100%)',\n        }\n      case 'bottom':\n        return {\n          ...base,\n          bottom: 0,\n          left: 0,\n          right: 0,\n          height: heightValue,\n          maxHeight: '100vh',\n          transform: visible ? 'translateY(0)' : 'translateY(100%)',\n        }\n      default:\n        return base\n    }\n  }\n\n  if (typeof document === 'undefined') return null\n\n  const drawerContent = (\n    <div\n      className={className}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        zIndex,\n        pointerEvents: visible ? 'auto' : 'none',\n      }}\n    >\n      {/* Mask */}\n      {mask && (\n        <div\n          style={{\n            position: 'fixed',\n            inset: 0,\n            backgroundColor: 'rgba(0, 0, 0, 0.45)',\n            opacity: visible ? 1 : 0,\n            transition: 'opacity 0.3s ease-in-out',\n            zIndex,\n          }}\n          onClick={handleMaskClick}\n          aria-hidden=\"true\"\n        />\n      )}\n\n      {/* Drawer */}\n      <div\n        style={getDrawerStyles()}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? 'drawer-title' : undefined}\n      >\n        {/* Header */}\n        {(title || closable || extra) && (\n          <div\n            className={`flex items-center justify-between ${SIZE_PADDING_CLASSES[resolvedSize]} border-b`}\n            style={{ borderColor: 'var(--lm-border-default)' }}\n          >\n            <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n              {title && (\n                <h3\n                  id=\"drawer-title\"\n                  className={`${titleTextClasses[resolvedSize]} font-semibold truncate`}\n                  style={{ color: 'var(--lm-text-primary)' }}\n                >\n                  {title}\n                </h3>\n              )}\n            </div>\n            <div className=\"flex items-center gap-2 shrink-0\">\n              {extra}\n              {closable && (\n                <button\n                  className=\"p-1.5 rounded-lg transition-colors duration-200 hover:bg-(--lm-bg-hover)\"\n                  style={{ color: 'var(--lm-text-secondary)' }}\n                  onClick={onClose}\n                  aria-label=\"关闭\"\n                >\n                  <CloseIcon />\n                </button>\n              )}\n            </div>\n          </div>\n        )}\n\n        {/* Body */}\n        <div\n          className={`flex-1 overflow-auto ${SIZE_PADDING_CLASSES[resolvedSize]}`}\n          style={{ color: 'var(--lm-text-primary)' }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <div\n            className={`flex items-center justify-end gap-2 ${SIZE_PADDING_CLASSES[resolvedSize]} border-t`}\n            style={{ borderColor: 'var(--lm-border-default)' }}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n\n  return createPortal(drawerContent, document.body)\n}\n\nexport default LMDrawer\n"],"names":[],"mappings":"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"}