@wisdomgarden/torque 0.2.4 → 0.3.1

package/dist/components/modal/modal.js

@@ -1,198 +1,43 @@
 "use client";
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { RemoveScroll as rt } from "@mantine/core";
-import { useMergedRef as nt, useIsomorphicEffect as at } from "@mantine/hooks";
-import { clsx as i } from "clsx";
-import { useId as ot, useRef as l, useEffect as f, useCallback as st } from "react";
-import "../../provider/ui-context.js";
-import { useLocale as ct } from "../../provider/hooks.js";
-import { Portal as it } from "../_inner/portal/portal.js";
-import { IconButton as lt } from "../icon-button/icon-button.js";
-import { OverlayParentProvider as dt } from "../overlay-layer/overlay-parent-context.js";
-import { useOverlayLayerInternal as ut } from "../overlay-layer/use-overlay-layer.js";
-import { useAnimatedMount as mt, getFocusableElements as M } from "../popover/hooks.js";
-import n from "./modal.module.css.js";
-const z = 200, ft = z + 100, xt = {
-  xs: "320px",
-  sm: "380px",
-  md: "440px",
-  lg: "620px",
-  xl: "780px"
-}, vt = {
-  xs: "var(--t-space-mini)",
-  sm: "var(--t-space-xs)",
-  md: "var(--t-space-lg)",
-  lg: "var(--t-space-xl)",
-  xl: "var(--t-space-xxl)"
-}, gt = {
-  xs: "2px",
-  sm: "var(--t-radius-xs)",
-  md: "var(--t-radius-sm)",
-  lg: "var(--t-radius-lg)",
-  xl: "var(--t-radius-lg)"
-}, ht = /^\d+(\.\d+)?$/, b = (t) => typeof t == "number" || ht.test(t) ? `${t}px` : t, E = (t, o) => typeof o == "string" && o in t ? t[o] : b(o), Lt = ({
-  opened: t,
-  onClose: o,
-  title: s,
-  children: D,
-  centered: U = !0,
-  size: I = "md",
-  classNames: d,
-  className: _,
-  zIndex: $,
-  padding: j = "xl",
-  radius: P = "lg",
-  withCloseButton: T = !0,
-  closeOnClickOutside: q = !1,
-  closeOnEscape: G = !0,
-  closeButtonProps: x,
-  onExitTransitionEnd: R,
-  transitionProps: N,
-  overlayProps: S,
-  onClick: H,
-  keepMounted: K = !1,
-  yOffset: X = "5dvh",
-  xOffset: Y = "5vw",
-  "aria-label": A
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { ModalRoot as d } from "./modal-root.js";
+import { ModalBody as t } from "./subs/modal-body.js";
+import { ModalCloseButton as n } from "./subs/modal-close-button.js";
+import { ModalContent as m } from "./subs/modal-content.js";
+import { ModalHeader as i } from "./subs/modal-header.js";
+import { ModalOverlay as s } from "./subs/modal-overlay.js";
+import { ModalTitle as p } from "./subs/modal-title.js";
+const c = ({
+  title: o,
+  children: M,
+  withCloseButton: e = !0,
+  closeButtonProps: f,
+  onClick: h,
+  "aria-label": u,
+  ...y
 }) => {
-  const Z = ct(), C = ot(), c = l(null), { mounted: v, animState: O, handleTransitionEnd: w } = mt(
-    t,
-    K
-  ), g = ut({
-    opened: t,
-    zIndex: $,
-    close: () => o(),
-    closeOnEscape: G,
-    closeOnClickOutside: q,
-    name: "modal"
-  }), J = nt(c, g.ref), u = l(!1), h = l(t), L = l({
-    handleTransitionEnd: w,
-    onExitTransitionEnd: R,
-    onExited: N?.onExited
-  });
-  f(() => {
-    L.current = {
-      handleTransitionEnd: w,
-      onExitTransitionEnd: R,
-      onExited: N?.onExited
-    };
-  });
-  const y = st(() => {
-    if (!u.current) return;
-    u.current = !1;
-    const e = L.current;
-    e.onExitTransitionEnd?.(), e.onExited?.(), e.handleTransitionEnd();
-  }, []);
-  f(() => {
-    if (t) {
-      h.current = !0, u.current = !1;
-      return;
-    }
-    if (!h.current) return;
-    h.current = !1, u.current = !0;
-    const e = window.setTimeout(y, ft);
-    return () => window.clearTimeout(e);
-  }, [t, y]);
-  const Q = (e) => {
-    e.target === e.currentTarget && O === "closing" && y();
-  }, m = l(null);
-  at(() => {
-    t && !m.current && (m.current = document.activeElement);
-  }, [t]), f(() => {
-    if (!t || !v) return;
-    const e = c.current;
-    if (!e || e.contains(document.activeElement)) return;
-    (e.querySelector("[data-autofocus]") ?? M([e])[0] ?? e).focus();
-  }, [t, v]), f(() => {
-    if (t) return;
-    const e = m.current;
-    if (m.current = null, !e?.isConnected) return;
-    const a = document.activeElement;
-    (!a || a === document.body || c.current?.contains(a)) && e.focus();
-  }, [t]);
-  const k = (e) => /* @__PURE__ */ r(
-    "span",
-    {
-      tabIndex: 0,
-      "data-focus-sentinel": e,
-      "aria-hidden": "true",
-      className: n.sentinel,
-      onFocus: () => {
-        const a = M([c.current]);
-        ((e === "start" ? a[a.length - 1] : a[0]) ?? c.current)?.focus();
-      }
-    }
-  );
-  if (!v) return null;
-  const F = s != null && s !== !1, V = F || T, W = S?.backgroundOpacity ?? S?.opacity ?? 0.6, B = typeof s == "string" ? "h2" : "div", tt = {
-    zIndex: g.zIndex,
-    "--modal-size": I === "auto" ? "auto" : E(xt, I),
-    "--modal-padding": E(vt, j),
-    "--modal-radius": E(gt, P),
-    "--modal-y-offset": b(X),
-    "--modal-x-offset": b(Y),
-    "--modal-overlay-opacity": W,
-    "--modal-duration": `${z}ms`
-  };
-  return /* @__PURE__ */ r(it, { children: /* @__PURE__ */ r(rt, { enabled: t, children: /* @__PURE__ */ p(
-    "div",
-    {
-      className: i(n.root, _),
-      style: tt,
-      "data-state": O,
-      "data-centered": U || void 0,
-      "aria-hidden": t ? void 0 : !0,
-      inert: t ? void 0 : !0,
-      children: [
-        /* @__PURE__ */ r("div", { className: n.overlay, "aria-hidden": "true" }),
-        /* @__PURE__ */ r("div", { className: n.inner, children: /* @__PURE__ */ p(
-          "div",
-          {
-            ref: J,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-label": A,
-            "aria-labelledby": !A && F ? C : void 0,
-            tabIndex: -1,
-            className: i(n.content, d?.content),
-            onClick: H,
-            onTransitionEnd: Q,
-            children: [
-              k("start"),
-              V && /* @__PURE__ */ p("div", { className: i(n.header, d?.header), children: [
-                /* @__PURE__ */ r(
-                  B,
-                  {
-                    id: C,
-                    className: i(n.title, d?.title),
-                    children: s
-                  }
-                ),
-                T && /* @__PURE__ */ r(
-                  lt,
-                  {
-                    variant: "text",
-                    color: "regular",
-                    size: "lg",
-                    iconName: "close",
-                    className: n.close,
-                    disabled: x?.disabled,
-                    "aria-label": x?.["aria-label"] ?? Z.close,
-                    onClick: (e) => {
-                      x?.onClick?.(e), o();
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ r("div", { className: i(n.body, d?.body), children: /* @__PURE__ */ r(dt, { id: g.id, children: D }) }),
-              k("end")
-            ]
-          }
-        ) })
-      ]
-    }
-  ) }) });
+  const l = o != null && o !== !1;
+  return /* @__PURE__ */ a(d, { ...y, children: [
+    /* @__PURE__ */ r(s, {}),
+    /* @__PURE__ */ a(m, { onClick: h, "aria-label": u, children: [
+      (l || e) && /* @__PURE__ */ a(i, { children: [
+        l && /* @__PURE__ */ r(p, { children: o }),
+        e && /* @__PURE__ */ r(n, { ...f })
+      ] }),
+      /* @__PURE__ */ r(t, { children: M })
+    ] })
+  ] });
 };
+c.displayName = "Modal";
+const R = Object.assign(c, {
+  Root: d,
+  Overlay: s,
+  Content: m,
+  Header: i,
+  Title: p,
+  Body: t,
+  CloseButton: n
+});
 export {
-  Lt as Modal
+  R as Modal
 };

package/dist/components/modal/modal.module.css.js

@@ -1,24 +1,26 @@
 "use client";
-const e = "_root_pliga_3", t = "_overlay_pliga_12", n = "_inner_pliga_13", o = "_content_pliga_42", _ = "_header_pliga_67", l = "_title_pliga_81", s = "_close_pliga_92", i = "_body_pliga_97", a = "_sentinel_pliga_105", c = {
-  root: e,
-  overlay: t,
-  inner: n,
-  content: o,
+const o = "_root_17o6n_3", n = "_overlay_17o6n_12", e = "_inner_17o6n_13", t = "_content_17o6n_42", _ = "_header_17o6n_67", c = "_title_17o6n_81", s = "_close_17o6n_92", r = "_body_17o6n_97", l = "_sentinel_17o6n_105", i = "_confirmFooter_17o6n_128", a = {
+  root: o,
+  overlay: n,
+  inner: e,
+  content: t,
   header: _,
-  title: l,
+  title: c,
   close: s,
-  body: i,
-  sentinel: a
+  body: r,
+  sentinel: l,
+  confirmFooter: i
 };
 export {
-  i as body,
+  r as body,
   s as close,
-  o as content,
-  c as default,
+  i as confirmFooter,
+  t as content,
+  a as default,
   _ as header,
-  n as inner,
-  t as overlay,
-  e as root,
-  a as sentinel,
-  l as title
+  e as inner,
+  n as overlay,
+  o as root,
+  l as sentinel,
+  c as title
 };

package/dist/components/modal/modal.types.d.ts

@@ -1,8 +1,16 @@
+import type { ButtonProps } from '../button';
 import type React from 'react';
 export type ModalSizePreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ModalSpacingPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type ModalClassNames = Partial<Record<'header' | 'title' | 'body' | 'content', string>>;
-export interface ModalCloseButtonProps {
+/**
+ * 槽位名，`classNames` 与 `styles` 共用。
+ * `inner` 是面板外那层负责定位与内边距的容器，只开放槽位、不提供子组件
+ * （与 Mantine 一致：它也没有 `Modal.Inner`）。
+ */
+export type ModalStylesName = 'root' | 'overlay' | 'inner' | 'content' | 'header' | 'title' | 'body' | 'close';
+export type ModalClassNames = Partial<Record<ModalStylesName, string>>;
+export type ModalStyles = Partial<Record<ModalStylesName, React.CSSProperties>>;
+export interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** 覆盖关闭按钮默认的可访问名（默认取 locale 的「关闭」） */
     'aria-label'?: string;
     disabled?: boolean;
@@ -28,15 +36,24 @@ export interface ModalProps {
      * @default true
      */
     centered?: boolean;
+    /**
+     * 铺满视口：去掉四周边距与圆角。只改几何，层级照常进栈
+     * @default false
+     */
+    fullScreen?: boolean;
     /**
      * 宽度：预设名、数字（px）、纯数字字符串（当 px，如 `"800"`）、`'auto'` 或带单位的 CSS 值（`'30rem'`、`'50%'`）
      * @default 'md'
      */
     size?: ModalSizePreset | number | string;
-    /** 槽位类名：头部 / 标题 / 内容区 / 面板 */
+    /** 槽位类名 */
     classNames?: ModalClassNames;
+    /** 槽位内联样式，与 `classNames` 共用同一组键 */
+    styles?: ModalStyles;
     /** 根节点类名 */
     className?: string;
+    /** 根节点内联样式（层级与 CSS 变量由组件自己写，同名属性以组件的为准） */
+    style?: React.CSSProperties;
     /** 显式层级。不传则由层级模块按打开顺序计算（普通层从 200 起） */
     zIndex?: number;
     /**
@@ -94,3 +111,42 @@ export interface ModalProps {
     /** 对话框的可访问名；不传时用 `title` */
     'aria-label'?: string;
 }
+/**
+ * `Modal.Root` 的属性：单件属性里去掉只属于头部与面板的那几个。
+ * 层级、动画、滚动锁、几何与槽位都在 Root 上，子组件从 context 读。
+ */
+export type ModalRootProps = Omit<ModalProps, 'title' | 'withCloseButton' | 'closeButtonProps' | 'onClick' | 'aria-label'>;
+/** 命令式 `modals.open` 的属性：`opened` 由管理器接管，其余与 `<Modal>` 一致 */
+export type ModalEventProps = Omit<ModalProps, 'opened' | 'onClose'> & {
+    onClose?: ModalProps['onClose'];
+};
+/** 兼容 Mantine 确认框的 `color: 'red'`，渲染时映射为 torque 的危险色。 */
+export type ModalConfirmButtonProps = Omit<ButtonProps, 'color'> & {
+    color?: ButtonProps['color'] | 'red';
+};
+export interface ModalConfirmLabels {
+    /** 确认按钮文案，缺省取 locale 的「确认」 */
+    confirm?: React.ReactNode;
+    /** 取消按钮文案，缺省取 locale 的「取消」 */
+    cancel?: React.ReactNode;
+}
+/** 命令式 `modals.openConfirmModal` 的属性：在 `modals.open` 之上多一个页脚 */
+export interface ConfirmModalEventProps extends ModalEventProps {
+    labels?: ModalConfirmLabels;
+    /** 确认框关闭后调用；允许异步业务操作 */
+    onConfirm?: () => void | Promise<void>;
+    /** 只有点取消按钮才调用；Escape / 关闭按钮 / 点遮罩关闭时不调用 */
+    onCancel?: () => void;
+    confirmProps?: ModalConfirmButtonProps;
+    cancelProps?: ModalConfirmButtonProps;
+}
+/** 事件载荷：id 在指令层生成，管理器只负责渲染与移除 */
+export type ModalEventPayload = {
+    id: string;
+    kind: 'content';
+    props: ModalEventProps;
+} | {
+    id: string;
+    kind: 'confirm';
+    props: ConfirmModalEventProps;
+};

package/dist/components/modal/subs/modal-body.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/** 内容区。紧跟在 `Modal.Header` 后面时上内边距归零，避免与头部间距叠加 */
+export declare const ModalBody: {
+    ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/modal/subs/modal-body.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
+import { useModalContext as r, slotStyle as a } from "../modal-context.js";
+import d from "../modal.module.css.js";
+const y = ({
+  className: s,
+  style: t,
+  ...e
+}) => {
+  const o = r();
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ...e,
+      className: m(d.body, o.classNames?.body, s),
+      style: a(o.styles?.body, t)
+    }
+  );
+};
+y.displayName = "Modal.Body";
+export {
+  y as ModalBody
+};

package/dist/components/modal/subs/modal-close-button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ModalCloseButtonProps } from '../modal.types';
+/** 右上角关闭按钮：先调自己的 `onClick`，再关闭弹窗 */
+export declare const ModalCloseButton: {
+    ({ className, style, onClick, "aria-label": ariaLabel, ...rest }: ModalCloseButtonProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/modal/subs/modal-close-button.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as i } from "clsx";
+import "../../../provider/ui-context.js";
+import "react";
+import { useLocale as n } from "../../../provider/hooks.js";
+import { IconButton as p } from "../../icon-button/icon-button.js";
+import { useModalContext as u, slotStyle as f } from "../modal-context.js";
+import x from "../modal.module.css.js";
+const d = ({
+  className: l,
+  style: e,
+  onClick: s,
+  "aria-label": t,
+  ...r
+}) => {
+  const o = u(), a = n();
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...r,
+      variant: "text",
+      color: "regular",
+      size: "lg",
+      iconName: "close",
+      className: i(x.close, o.classNames?.close, l),
+      style: f(o.styles?.close, e),
+      "aria-label": t ?? a.close,
+      onClick: (c) => {
+        s?.(c), o.close();
+      }
+    }
+  );
+};
+d.displayName = "Modal.CloseButton";
+export {
+  d as ModalCloseButton
+};

package/dist/components/modal/subs/modal-content.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * 面板：`role="dialog"` 那一层，外面还包一层负责定位与内边距的 `inner`
+ * （与 Mantine 一致，`inner` 只开放槽位、不单独成子组件）。
+ */
+export declare const ModalContent: {
+    ({ "aria-label": ariaLabel, className, style, children, ref, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/modal/subs/modal-content.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { useMergedRef as y } from "@mantine/hooks";
+import { clsx as l } from "clsx";
+import { getFocusableElements as b } from "../../popover/hooks.js";
+import { useModalContext as g, slotStyle as c } from "../modal-context.js";
+import n from "../modal.module.css.js";
+const N = ({
+  "aria-label": s,
+  className: i,
+  style: d,
+  children: m,
+  ref: f,
+  ...u
+}) => {
+  const e = g(), p = y(e.contentRef, e.layerRef, f), o = (a) => /* @__PURE__ */ r(
+    "span",
+    {
+      tabIndex: 0,
+      "data-focus-sentinel": a,
+      "aria-hidden": "true",
+      className: n.sentinel,
+      onFocus: () => {
+        const t = b([e.contentRef.current]);
+        ((a === "start" ? t[t.length - 1] : t[0]) ?? e.contentRef.current)?.focus();
+      }
+    }
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: l(n.inner, e.classNames?.inner),
+      style: c(e.styles?.inner),
+      children: /* @__PURE__ */ x(
+        "div",
+        {
+          ...u,
+          ref: p,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": s,
+          "aria-labelledby": !s && e.titleMounted ? e.titleId : void 0,
+          tabIndex: -1,
+          className: l(n.content, e.classNames?.content, i),
+          style: c(e.styles?.content, d),
+          onTransitionEnd: e.onContentTransitionEnd,
+          children: [
+            o("start"),
+            m,
+            o("end")
+          ]
+        }
+      )
+    }
+  );
+};
+N.displayName = "Modal.Content";
+export {
+  N as ModalContent
+};

package/dist/components/modal/subs/modal-header.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/** 头部：标题与关闭按钮的容器，粘在面板顶部 */
+export declare const ModalHeader: {
+    ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/modal/subs/modal-header.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { clsx as a } from "clsx";
+import { useModalContext as l, slotStyle as m } from "../modal-context.js";
+import d from "../modal.module.css.js";
+const c = ({
+  className: s,
+  style: o,
+  ...r
+}) => {
+  const e = l();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...r,
+      className: a(d.header, e.classNames?.header, s),
+      style: m(e.styles?.header, o)
+    }
+  );
+};
+c.displayName = "Modal.Header";
+export {
+  c as ModalHeader
+};

package/dist/components/modal/subs/modal-overlay.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/** 遮罩。不透明度由 `Modal.Root` 的 `overlayProps` 经 CSS 变量下发 */
+export declare const ModalOverlay: {
+    ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/modal/subs/modal-overlay.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as a } from "clsx";
+import { useModalContext as t, slotStyle as m } from "../modal-context.js";
+import i from "../modal.module.css.js";
+const y = ({
+  className: o,
+  style: s,
+  ...l
+}) => {
+  const e = t();
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...l,
+      "aria-hidden": "true",
+      className: a(i.overlay, e.classNames?.overlay, o),
+      style: m(e.styles?.overlay, s)
+    }
+  );
+};
+y.displayName = "Modal.Overlay";
+export {
+  y as ModalOverlay
+};

package/dist/components/modal/subs/modal-title.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * 标题：挂载后回填给 Content 的 `aria-labelledby`，字符串内容用语义化的 `h2`。
+ */
+export declare const ModalTitle: {
+    ({ className, style, children, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/modal/subs/modal-title.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useIsomorphicEffect as m } from "@mantine/hooks";
+import { clsx as a } from "clsx";
+import { useModalContext as c, slotStyle as f } from "../modal-context.js";
+import n from "../modal.module.css.js";
+const p = ({
+  className: o,
+  style: l,
+  children: s,
+  ...i
+}) => {
+  const t = c(), { setTitleMounted: e } = t;
+  return m(() => (e(!0), () => e(!1)), [e]), /* @__PURE__ */ r(
+    typeof s == "string" ? "h2" : "div",
+    {
+      ...i,
+      id: t.titleId,
+      className: a(n.title, t.classNames?.title, o),
+      style: f(t.styles?.title, l),
+      children: s
+    }
+  );
+};
+p.displayName = "Modal.Title";
+export {
+  p as ModalTitle
+};