klun-ui 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -5,6 +5,34 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
 
+## [0.1.6] — 2026-06-21
+
+### Fixed
+- **`Modal` / `Drawer` mask is now clearly visible in both themes.** The
+  backdrop uses a theme-independent scrim (`rgba(0,0,0,0.45)` + `blur(3px)`,
+  antd-style) instead of a dark-gray token that disappeared against dark
+  surfaces.
+
+## [0.1.5] — 2026-06-21
+
+### Added
+- **`Modal` aligned with Ant Design.** A default Cancel/OK footer driven by
+  `onOk` / `onCancel` / `okText` / `cancelText` / `confirmLoading` / `okType`
+  (set `footer={null}` to hide it) — convenient for submitting a `Form`
+  (`onOk={() => form.submit()}` + `confirmLoading`). New props: `centered`,
+  `maskClosable`, `keyboard`, `mask`, `okButtonProps` / `cancelButtonProps`,
+  `zIndex`, `afterClose`, `afterOpenChange`, and a **`draggable`** mode (drag by
+  the header).
+- **`Drawer` aligned with Ant Design.** New `placement` (`top` / `right` /
+  `bottom` / `left`), `height` (for top/bottom), `size` (`default` 378 /
+  `large` 736), `closable`, `maskClosable`, `mask`, `keyboard`, `extra` header
+  actions, `zIndex` and `afterOpenChange`. The existing `side` prop still works
+  as an alias of `placement`.
+
+### Changed
+- `Modal` default `width` is now `520` (was 440) and dialogs are **top-aligned**
+  by default; pass `centered` to vertically center (matches antd defaults).
+
 ## [0.1.4] — 2026-06-21
 
 ### Fixed
@@ -54,6 +82,8 @@ small breaking changes).
   `ConfigProvider`, i18n locales, and the full component set (layout, forms,
   navigation, data display, feedback, overlays, charts).
 
+[0.1.6]: https://www.npmjs.com/package/klun-ui/v/0.1.6
+[0.1.5]: https://www.npmjs.com/package/klun-ui/v/0.1.5
 [0.1.4]: https://www.npmjs.com/package/klun-ui/v/0.1.4
 [0.1.3]: https://www.npmjs.com/package/klun-ui/v/0.1.3
 [0.1.2]: https://www.npmjs.com/package/klun-ui/v/0.1.2

package/dist/{chunk-54YNPINO.cjs → chunk-LDENBMG5.cjs}

@@ -9838,29 +9838,83 @@ function Confirm(opts = {}) {
     root.render(/* @__PURE__ */ jsxRuntime.jsx(ConfirmDialog, { opts, onClose: close }));
   });
 }
-var Drawer = react.forwardRef(function Drawer2({ open, onClose, title, side = "right", width = 400, children, footer, className, style, ...props }, ref) {
+var Drawer = react.forwardRef(function Drawer2({
+  open,
+  onClose,
+  title,
+  placement,
+  side,
+  width = 378,
+  height = 378,
+  size = "default",
+  closable = true,
+  maskClosable = true,
+  mask = true,
+  keyboard = true,
+  extra,
+  footer,
+  zIndex,
+  afterOpenChange,
+  children,
+  className,
+  style,
+  ...props
+}, ref) {
   const { drawer } = useLocale();
+  const place = placement ?? side ?? "right";
+  const horizontal = place === "left" || place === "right";
+  const prevOpen = react.useRef(open);
+  react.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape" && keyboard && closable) onClose?.();
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, keyboard, closable, onClose]);
+  react.useEffect(() => {
+    if (prevOpen.current !== open) {
+      afterOpenChange?.(open);
+      prevOpen.current = open;
+    }
+  }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-drawer", `klun-drawer--${side}`), onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const axis = size === "large" ? 736 : horizontal ? width : height;
+  const panelStyle = horizontal ? { width: axis, height: "100%", ...style } : { height: axis, width: "100%", ...style };
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
-      role: "dialog",
-      "aria-modal": "true",
-      onClick: (e) => e.stopPropagation(),
-      className: chunkTPGAXYFU_cjs.cx("klun-drawer__panel", className),
-      style: { width, ...style },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-drawer__header", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-drawer__title", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, "aria-label": drawer.close, className: "klun-drawer__close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-drawer__body", children }),
-        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-drawer__footer", children: footer }) : null
-      ]
+      className: chunkTPGAXYFU_cjs.cx("klun-drawer", `klun-drawer--${place}`, !mask && "klun-drawer--no-mask"),
+      style: zIndex != null ? { zIndex } : void 0,
+      onClick: maskClosable ? onClose : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          className: chunkTPGAXYFU_cjs.cx("klun-drawer__panel", className),
+          style: panelStyle,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-drawer__header", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-drawer__title", children: title }),
+              extra ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-drawer__extra", children: extra }) : null,
+              closable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, "aria-label": drawer.close, className: "klun-drawer__close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-drawer__body", children }),
+            footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-drawer__footer", children: footer }) : null
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 Drawer.displayName = "Drawer";
 var Dropdown = react.forwardRef(function Dropdown2({ trigger, items: items2 = [], align = "left", width = 220, className, ...props }, ref) {
@@ -9918,46 +9972,133 @@ var Dropdown = react.forwardRef(function Dropdown2({ trigger, items: items2 = []
   ] });
 });
 Dropdown.displayName = "Dropdown";
-var Modal = react.forwardRef(function Modal2({ open, onClose, title, description, icon, children, footer, width = 440, closable = true, closeOnBackdrop = true, className, style, ...props }, ref) {
+var Modal = react.forwardRef(function Modal2({
+  open,
+  onClose,
+  onOk,
+  onCancel,
+  title,
+  description,
+  icon,
+  footer,
+  okText,
+  cancelText,
+  confirmLoading = false,
+  okType = "primary",
+  okButtonProps,
+  cancelButtonProps,
+  width = 520,
+  centered = false,
+  closable = true,
+  maskClosable,
+  closeOnBackdrop,
+  keyboard = true,
+  mask = true,
+  draggable = false,
+  zIndex,
+  afterClose,
+  afterOpenChange,
+  children,
+  className,
+  style,
+  ...props
+}, ref) {
   const { modal } = useLocale();
+  const cancel = onCancel ?? onClose;
+  const backdropClosable = maskClosable ?? closeOnBackdrop ?? true;
+  const [pos, setPos] = react.useState({ x: 0, y: 0 });
+  const drag = react.useRef(null);
+  const prevOpen = react.useRef(open);
   react.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Escape" && closable) onClose?.();
+      if (e.key === "Escape" && keyboard && closable) cancel?.();
     };
     document.addEventListener("keydown", onKey);
-    const prev = document.body.style.overflow;
+    const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prev;
+      document.body.style.overflow = prevOverflow;
     };
-  }, [open, closable, onClose]);
+  }, [open, keyboard, closable, cancel]);
+  react.useEffect(() => {
+    if (open) setPos({ x: 0, y: 0 });
+    if (prevOpen.current !== open) {
+      afterOpenChange?.(open);
+      if (!open) afterClose?.();
+      prevOpen.current = open;
+    }
+  }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal", onClick: closeOnBackdrop && closable ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const startDrag = (e) => {
+    if (!draggable) return;
+    if (e.target.closest(".klun-modal__close")) return;
+    drag.current = { sx: e.clientX, sy: e.clientY, ox: pos.x, oy: pos.y };
+    const move = (ev) => {
+      if (!drag.current) return;
+      setPos({
+        x: drag.current.ox + (ev.clientX - drag.current.sx),
+        y: drag.current.oy + (ev.clientY - drag.current.sy)
+      });
+    };
+    const up = () => {
+      drag.current = null;
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  };
+  const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "neutral", appearance: "stroke", disabled: confirmLoading, onClick: cancel, ...cancelButtonProps, children: cancelText ?? "Cancel" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: okType === "danger" ? "error" : "primary", loading: confirmLoading, onClick: onOk, ...okButtonProps, children: okText ?? "OK" })
+  ] });
+  const resolvedFooter = footer === null ? null : footer !== void 0 ? footer : defaultFooter;
+  const dialogStyle = {
+    width,
+    ...pos.x || pos.y ? { transform: `translate(${pos.x}px, ${pos.y}px)` } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
-      role: "dialog",
-      "aria-modal": "true",
-      onClick: (e) => e.stopPropagation(),
-      className: chunkTPGAXYFU_cjs.cx("klun-modal__dialog", className),
-      style: { width, ...style },
-      ...props,
-      children: [
-        title || icon ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-modal__header", children: [
-          icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__icon", children: icon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-modal__heading", children: [
-            title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__title", children: title }) : null,
-            description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__description", children: description }) : null
-          ] }),
-          closable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, "aria-label": modal.close, className: "klun-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
-        ] }) : null,
-        children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__body", children }) : null,
-        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-modal__footer", !children && "klun-modal__footer--flush"), children: footer }) : null
-      ]
+      className: chunkTPGAXYFU_cjs.cx("klun-modal", centered && "klun-modal--centered", !mask && "klun-modal--no-mask"),
+      style: zIndex != null ? { zIndex } : void 0,
+      onClick: backdropClosable && closable ? cancel : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          className: chunkTPGAXYFU_cjs.cx("klun-modal__dialog", className),
+          style: dialogStyle,
+          ...props,
+          children: [
+            title || icon ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: chunkTPGAXYFU_cjs.cx("klun-modal__header", draggable && "klun-modal__header--draggable"),
+                onMouseDown: startDrag,
+                children: [
+                  icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__icon", children: icon }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-modal__heading", children: [
+                    title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__title", children: title }) : null,
+                    description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__description", children: description }) : null
+                  ] }),
+                  closable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+                ]
+              }
+            ) : null,
+            children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__body", children }) : null,
+            resolvedFooter ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-modal__footer", !children && "klun-modal__footer--flush"), children: resolvedFooter }) : null
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 Modal.displayName = "Modal";
 var Popconfirm = react.forwardRef(function Popconfirm2({
@@ -10212,5 +10353,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-54YNPINO.cjs.map
-//# sourceMappingURL=chunk-54YNPINO.cjs.map
+//# sourceMappingURL=chunk-LDENBMG5.cjs.map
+//# sourceMappingURL=chunk-LDENBMG5.cjs.map