@wisdomgarden/torque 0.2.4 → 0.3.1

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

@@ -1,7 +1,7 @@
 import { IconName } from '@wisdomgarden/torque-icons';
 import React, { ButtonHTMLAttributes } from 'react';
 import { ButtonSize, RefProps } from '../../common/components.types';
-export type ButtonColor = 'brand' | 'regular' | 'air' | 'secondary' | 'dangerous';
+export type ButtonColor = 'brand' | 'regular' | 'air' | 'secondary' | 'orange' | 'dangerous';
 /**
  * 按钮组件的属性定义
  */

package/dist/components/button/styles/button-variables.module.css.js

@@ -1,5 +1,5 @@
 "use client";
-const t = "_buttonVar_1oymn_2", a = {
+const t = "_buttonVar_18pur_2", a = {
   buttonVar: t
 };
 export {

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

@@ -1,2 +1,13 @@
 export { Modal } from './modal';
-export type { ModalClassNames, ModalCloseButtonProps, ModalOverlayProps, ModalProps, ModalSizePreset, ModalSpacingPreset, } from './modal.types';
+export { ModalRoot } from './modal-root';
+export { ModalOverlay } from './subs/modal-overlay';
+export { ModalContent } from './subs/modal-content';
+export { ModalHeader } from './subs/modal-header';
+export { ModalTitle } from './subs/modal-title';
+export { ModalBody } from './subs/modal-body';
+export { ModalCloseButton } from './subs/modal-close-button';
+export { useModalContext } from './modal-context';
+export type { ModalContextValue } from './modal-context';
+export { modals } from './modal-events';
+export { ModalManager } from './modal-manager';
+export type { ConfirmModalEventProps, ModalClassNames, ModalCloseButtonProps, ModalConfirmButtonProps, ModalConfirmLabels, ModalEventPayload, ModalEventProps, ModalOverlayProps, ModalProps, ModalRootProps, ModalSizePreset, ModalSpacingPreset, ModalStyles, ModalStylesName, } from './modal.types';

package/dist/components/modal/index.js

@@ -1,5 +1,25 @@
 "use client";
-import { Modal as l } from "./modal.js";
+import { Modal as e } from "./modal.js";
+import { ModalRoot as a } from "./modal-root.js";
+import { ModalOverlay as d } from "./subs/modal-overlay.js";
+import { ModalContent as x } from "./subs/modal-content.js";
+import { ModalHeader as p } from "./subs/modal-header.js";
+import { ModalTitle as n } from "./subs/modal-title.js";
+import { ModalBody as u } from "./subs/modal-body.js";
+import { ModalCloseButton as i } from "./subs/modal-close-button.js";
+import { useModalContext as B } from "./modal-context.js";
+import { modals as g } from "./modal-events.js";
+import { ModalManager as H } from "./modal-manager.js";
 export {
-  l as Modal
+  e as Modal,
+  u as ModalBody,
+  i as ModalCloseButton,
+  x as ModalContent,
+  p as ModalHeader,
+  H as ModalManager,
+  d as ModalOverlay,
+  a as ModalRoot,
+  n as ModalTitle,
+  g as modals,
+  B as useModalContext
 };

package/dist/components/modal/modal-context.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ModalClassNames, ModalStyles } from './modal.types';
+export interface ModalContextValue {
+    opened: boolean;
+    close: () => void;
+    animState: 'open' | 'closing';
+    /** 面板节点：层级模块贴 ref、焦点查询都靠它，由 `Modal.Content` 挂上 */
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    layerRef: React.Ref<HTMLDivElement>;
+    titleId: string;
+    /** `Modal.Title` 挂载后回填，Content 据此决定 aria-labelledby */
+    titleMounted: boolean;
+    setTitleMounted: (mounted: boolean) => void;
+    classNames?: ModalClassNames;
+    styles?: ModalStyles;
+    onContentTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => void;
+}
+declare const ModalContext: React.Context<ModalContextValue | null>;
+export declare const useModalContext: () => ModalContextValue;
+/** 槽位内联样式：context 里的 `styles[槽位]` 打底，子组件自己的 `style` 覆盖 */
+export declare const slotStyle: (fromContext?: React.CSSProperties, own?: React.CSSProperties) => React.CSSProperties | undefined;
+export { ModalContext };

package/dist/components/modal/modal-context.js

@@ -0,0 +1,15 @@
+"use client";
+import { useContext as e, createContext as n } from "react";
+const r = n(null), s = () => {
+  const t = e(r);
+  if (!t)
+    throw new Error(
+      "[@wisdomgarden/torque] <Modal.Overlay /> 等子组件必须写在 <Modal.Root> 里面"
+    );
+  return t;
+}, a = (t, o) => t || o ? { ...t, ...o } : void 0;
+export {
+  r as ModalContext,
+  a as slotStyle,
+  s as useModalContext
+};

package/dist/components/modal/modal-events.d.ts

@@ -0,0 +1,24 @@
+import type { ConfirmModalEventProps, ModalEventPayload, ModalEventProps } from './modal.types';
+type ModalEventHandlers = {
+    open: (payload: ModalEventPayload) => void;
+    close: (id?: string) => void;
+    closeAll: () => void;
+};
+declare const useModalEvents: (events: ModalEventHandlers) => void;
+/**
+ * 对话框操作的指令。需要 `<ModalManager />` 挂在应用根部。
+ *
+ * 与 `drawers` 的两点差别：`open` 返回 id，`close` 按 id 关（不传 id 才关最上层）——
+ * 因为命令式打开的对话框常常要在自己的内容里关掉自己。
+ */
+export declare const modals: {
+    /** 打开一个对话框，返回它的 id */
+    open: (props: ModalEventProps) => string;
+    /** 打开一个带确认 / 取消页脚的对话框，返回它的 id */
+    openConfirmModal: (props: ConfirmModalEventProps) => string;
+    /** 关闭指定 id 的对话框；不传 id 关最上层 */
+    close: (id?: string) => void;
+    /** 关闭全部对话框 */
+    closeAll: () => void;
+};
+export { useModalEvents };

package/dist/components/modal/modal-events.js

@@ -0,0 +1,24 @@
+"use client";
+import { createUseExternalEvents as l } from "@mantine/core";
+const [r, n] = l("modal-manager");
+let s = 0;
+const t = () => `torque-modal-${s += 1}`, a = {
+  /** 打开一个对话框，返回它的 id */
+  open: (e) => {
+    const o = t();
+    return n("open")({ id: o, kind: "content", props: e }), o;
+  },
+  /** 打开一个带确认 / 取消页脚的对话框，返回它的 id */
+  openConfirmModal: (e) => {
+    const o = t();
+    return n("open")({ id: o, kind: "confirm", props: e }), o;
+  },
+  /** 关闭指定 id 的对话框；不传 id 关最上层 */
+  close: (e) => n("close")(e),
+  /** 关闭全部对话框 */
+  closeAll: () => n("closeAll")()
+};
+export {
+  a as modals,
+  r as useModalEvents
+};

package/dist/components/modal/modal-manager.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * 用于指令式打开对话框的全局组件，挂在应用根部（与 `DrawerManager` 并列）。
+ *
+ * 与 Mantine 的 `ModalsProvider` 不同：这里每个实例各自渲染一个 `Modal`，
+ * 多个对话框是真正叠起来的——层级由 `overlay-layer` 按打开顺序算，Escape 只关最上层。
+ */
+export declare const ModalManager: {
+    (): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/modal/modal-manager.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as d, Fragment as v, jsxs as E } from "react/jsx-runtime";
+import { useRef as m, useState as M, useCallback as p, Suspense as I, useEffect as F, useImperativeHandle as S } from "react";
+import { flushSync as C } from "react-dom";
+import "../../provider/ui-context.js";
+import { useLocale as j } from "../../provider/hooks.js";
+import { Button as g } from "../button/button.js";
+import { Modal as k } from "./modal.js";
+import { useModalEvents as y } from "./modal-events.js";
+import N from "./modal.module.css.js";
+const T = ({
+  labels: n,
+  confirmProps: t,
+  cancelProps: a,
+  onConfirm: s,
+  onCancel: c
+}) => {
+  const l = j(), { color: o, ...r } = a ?? {}, { color: e, ...u } = t ?? {};
+  return /* @__PURE__ */ E("div", { className: N.confirmFooter, children: [
+    n?.cancel !== "" && /* @__PURE__ */ d(
+      g,
+      {
+        variant: "stroke",
+        color: o === "red" ? "dangerous" : o ?? "regular",
+        ...r,
+        onClick: (i) => {
+          a?.onClick?.(i), c();
+        },
+        children: a?.children ?? n?.cancel ?? l.cancel
+      }
+    ),
+    /* @__PURE__ */ d(
+      g,
+      {
+        color: e === "red" ? "dangerous" : e,
+        ...u,
+        onClick: (i) => {
+          t?.onClick?.(i), s();
+        },
+        children: t?.children ?? n?.confirm ?? l.confirm
+      }
+    )
+  ] });
+}, b = ({
+  item: n,
+  removeInstance: t,
+  ref: a
+}) => {
+  const [s, c] = M(!1), l = m(!1);
+  F(() => {
+    l.current || c(!0);
+  }, []);
+  const o = p(() => {
+    l.current || (l.current = !0, c(!1), n.props.onClose?.());
+  }, [n]);
+  S(a, () => ({ close: o }), [o]);
+  const r = p(() => {
+    n.props.onExitTransitionEnd?.(), t(n.id);
+  }, [n, t]), e = {
+    opened: s,
+    onClose: o,
+    onExitTransitionEnd: r
+  };
+  if (n.kind === "confirm") {
+    const {
+      labels: u,
+      confirmProps: i,
+      cancelProps: f,
+      onConfirm: R,
+      onCancel: x,
+      ...h
+    } = n.props;
+    return /* @__PURE__ */ E(k, { ...h, ...e, children: [
+      h.children,
+      /* @__PURE__ */ d(
+        T,
+        {
+          labels: u,
+          confirmProps: i,
+          cancelProps: f,
+          onConfirm: () => {
+            C(o), R?.();
+          },
+          onCancel: () => {
+            C(o), x?.();
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ d(k, { ...n.props, ...e });
+}, w = () => {
+  const n = m([]), [t, a] = M([]), s = m(/* @__PURE__ */ new Map()), c = p((r) => {
+    n.current = r, a(r);
+  }, []), l = p(
+    (r) => {
+      s.current.delete(r), c(n.current.filter((e) => e.id !== r));
+    },
+    [c]
+  ), o = p(
+    (r) => {
+      const e = r ?? n.current[n.current.length - 1]?.id;
+      if (!e) return;
+      const u = s.current.get(e);
+      if (u) {
+        u.close();
+        return;
+      }
+      const i = n.current.find((f) => f.id === e);
+      i && (c(n.current.filter((f) => f.id !== e)), i.props.onClose?.());
+    },
+    [c]
+  );
+  return y({
+    open: (r) => c([...n.current, r]),
+    close: o,
+    closeAll: () => {
+      [...n.current].forEach((r) => o(r.id));
+    }
+  }), /* @__PURE__ */ d(v, { children: t.map((r) => (
+    // 弹窗内容由调用方传入，用到的 i18n ns 无法枚举，也就无法预热。本组件挂在 root
+    // layout 且是 children 的兄弟节点，没有边界时未加载的 ns 会在 render 期挂起并冒泡
+    // 到路由段骨架，整页变 loading。每个实例各自成边界，互不影响。
+    /* @__PURE__ */ d(I, { fallback: null, children: /* @__PURE__ */ d(
+      b,
+      {
+        item: r,
+        removeInstance: l,
+        ref: (e) => {
+          e ? s.current.set(r.id, e) : s.current.delete(r.id);
+        }
+      }
+    ) }, r.id)
+  )) });
+};
+w.displayName = "ModalManager";
+export {
+  w as ModalManager
+};

package/dist/components/modal/modal-root.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ModalRootProps } from './modal.types';
+/**
+ * 对话框的机制层：层级、Escape、点遮罩、滚动锁、进出场动画、焦点管理都在这里，
+ * 结构由子组件（`Modal.Overlay` / `Modal.Content` / …）拼。
+ *
+ * 层级、Escape、点遮罩都交给层级模块 `overlay-layer`：层级按打开顺序计算，
+ * Escape 只关最上层，写在 Popover 里面还是外面结果一样。
+ */
+export declare const ModalRoot: {
+    ({ opened, onClose, children, centered, fullScreen, size, padding, radius, yOffset, xOffset, zIndex, closeOnClickOutside, closeOnEscape, keepMounted, overlayProps, onExitTransitionEnd, transitionProps, classNames, styles: slotStyles, className, style, }: ModalRootProps): React.JSX.Element | null;
+    displayName: string;
+};

package/dist/components/modal/modal-root.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { RemoveScroll as X } from "@mantine/core";
+import { useIsomorphicEffect as Y } from "@mantine/hooks";
+import { clsx as Z } from "clsx";
+import { useId as H, useRef as n, useState as J, useEffect as u, useCallback as S } from "react";
+import { Portal as Q } from "../_inner/portal/portal.js";
+import { OverlayParentProvider as V } from "../overlay-layer/overlay-parent-context.js";
+import { useOverlayLayerInternal as W } from "../overlay-layer/use-overlay-layer.js";
+import { useAnimatedMount as tt, getFocusableElements as rt } from "../popover/hooks.js";
+import { ModalContext as et } from "./modal-context.js";
+import ot from "./modal.module.css.js";
+const M = 200, nt = M + 100, st = {
+  xs: "320px",
+  sm: "380px",
+  md: "440px",
+  lg: "620px",
+  xl: "780px"
+}, at = {
+  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)"
+}, ct = {
+  xs: "2px",
+  sm: "var(--t-radius-xs)",
+  md: "var(--t-radius-sm)",
+  lg: "var(--t-radius-lg)",
+  xl: "var(--t-radius-lg)"
+}, it = /^\d+(\.\d+)?$/, p = (t) => typeof t == "number" || it.test(t) ? `${t}px` : t, v = (t, e) => typeof e == "string" && e in t ? t[e] : p(e), lt = ({
+  opened: t,
+  onClose: e,
+  children: O,
+  centered: w = !0,
+  fullScreen: C = !1,
+  size: y = "md",
+  padding: N = "xl",
+  radius: b = "lg",
+  yOffset: L = "5dvh",
+  xOffset: P = "5vw",
+  zIndex: D,
+  closeOnClickOutside: F = !1,
+  closeOnEscape: U = !0,
+  keepMounted: _ = !1,
+  overlayProps: E,
+  onExitTransitionEnd: g,
+  transitionProps: I,
+  classNames: R,
+  styles: h,
+  className: $,
+  style: k
+}) => {
+  const z = H(), d = n(null), [j, q] = J(!1), { mounted: m, animState: s, handleTransitionEnd: T } = tt(
+    t,
+    _
+  ), f = W({
+    opened: t,
+    zIndex: D,
+    close: () => e(),
+    closeOnEscape: U,
+    closeOnClickOutside: F,
+    name: "modal"
+  }), a = n(!1), x = n(t), A = n({
+    handleTransitionEnd: T,
+    onExitTransitionEnd: g,
+    onExited: I?.onExited
+  });
+  u(() => {
+    A.current = {
+      handleTransitionEnd: T,
+      onExitTransitionEnd: g,
+      onExited: I?.onExited
+    };
+  });
+  const c = S(() => {
+    if (!a.current) return;
+    a.current = !1;
+    const r = A.current;
+    r.onExitTransitionEnd?.(), r.onExited?.(), r.handleTransitionEnd();
+  }, []);
+  u(() => {
+    if (t) {
+      x.current = !0, a.current = !1;
+      return;
+    }
+    if (!x.current) return;
+    x.current = !1, a.current = !0;
+    const r = window.setTimeout(c, nt);
+    return () => window.clearTimeout(r);
+  }, [t, c]);
+  const B = S(
+    (r) => {
+      r.target === r.currentTarget && s === "closing" && c();
+    },
+    [s, c]
+  ), i = n(null);
+  if (Y(() => {
+    t && !i.current && (i.current = document.activeElement);
+  }, [t]), u(() => {
+    if (!t || !m) return;
+    const r = d.current;
+    if (!r || r.contains(document.activeElement)) return;
+    (r.querySelector("[data-autofocus]") ?? rt([r])[0] ?? r).focus();
+  }, [t, m]), u(() => {
+    if (t) return;
+    const r = i.current;
+    if (i.current = null, !r?.isConnected) return;
+    const l = document.activeElement;
+    (!l || l === document.body || d.current?.contains(l)) && r.focus();
+  }, [t]), !m) return null;
+  const G = E?.backgroundOpacity ?? E?.opacity ?? 0.6, K = {
+    ...k,
+    ...h?.root,
+    zIndex: f.zIndex,
+    "--modal-size": y === "auto" ? "auto" : v(st, y),
+    "--modal-padding": v(at, N),
+    "--modal-radius": v(ct, b),
+    "--modal-y-offset": p(L),
+    "--modal-x-offset": p(P),
+    "--modal-overlay-opacity": G,
+    "--modal-duration": `${M}ms`
+  };
+  return /* @__PURE__ */ o(Q, { children: /* @__PURE__ */ o(X, { enabled: t, children: /* @__PURE__ */ o(
+    et.Provider,
+    {
+      value: {
+        opened: t,
+        close: e,
+        animState: s,
+        contentRef: d,
+        layerRef: f.ref,
+        titleId: z,
+        titleMounted: j,
+        setTitleMounted: q,
+        classNames: R,
+        styles: h,
+        onContentTransitionEnd: B
+      },
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: Z(ot.root, R?.root, $),
+          style: K,
+          "data-state": s,
+          "data-centered": w || void 0,
+          "data-fullscreen": C || void 0,
+          "aria-hidden": t ? void 0 : !0,
+          inert: t ? void 0 : !0,
+          children: /* @__PURE__ */ o(V, { id: f.id, children: O })
+        }
+      )
+    }
+  ) }) });
+};
+lt.displayName = "Modal.Root";
+export {
+  lt as ModalRoot
+};

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

@@ -1,9 +1,35 @@
 import React from 'react';
 import type { ModalProps } from './modal.types';
-/**
- * 对话框（自建实现）。
- *
- * 层级、Escape、点遮罩都交给层级模块 `overlay-layer`：层级按打开顺序计算，
- * Escape 只关最上层，写在 Popover 里面还是外面结果一样。
- */
-export declare const Modal: ({ opened, onClose, title, children, centered, size, classNames, className, zIndex, padding, radius, withCloseButton, closeOnClickOutside, closeOnEscape, closeButtonProps, onExitTransitionEnd, transitionProps, overlayProps, onClick, keepMounted, yOffset, xOffset, "aria-label": ariaLabel, }: ModalProps) => React.JSX.Element | null;
+export declare const Modal: {
+    ({ title, children, withCloseButton, closeButtonProps, onClick, "aria-label": ariaLabel, ...rootProps }: ModalProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Root: {
+        ({ opened, onClose, children, centered, fullScreen, size, padding, radius, yOffset, xOffset, zIndex, closeOnClickOutside, closeOnEscape, keepMounted, overlayProps, onExitTransitionEnd, transitionProps, classNames, styles: slotStyles, className, style, }: import("./modal.types").ModalRootProps): React.JSX.Element | null;
+        displayName: string;
+    };
+    Overlay: {
+        ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ "aria-label": ariaLabel, className, style, children, ref, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ className, style, children, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
+        displayName: string;
+    };
+    CloseButton: {
+        ({ className, style, onClick, "aria-label": ariaLabel, ...rest }: import("./modal.types").ModalCloseButtonProps): React.JSX.Element;
+        displayName: string;
+    };
+};