@wisdomgarden/torque 0.2.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/components/modal/index.d.ts +12 -1
  2. package/dist/components/modal/index.js +22 -2
  3. package/dist/components/modal/modal-context.d.ts +22 -0
  4. package/dist/components/modal/modal-context.js +15 -0
  5. package/dist/components/modal/modal-events.d.ts +24 -0
  6. package/dist/components/modal/modal-events.js +24 -0
  7. package/dist/components/modal/modal-manager.d.ts +11 -0
  8. package/dist/components/modal/modal-manager.js +139 -0
  9. package/dist/components/modal/modal-root.d.ts +13 -0
  10. package/dist/components/modal/modal-root.js +159 -0
  11. package/dist/components/modal/modal.d.ts +33 -7
  12. package/dist/components/modal/modal.js +38 -193
  13. package/dist/components/modal/modal.module.css.js +18 -16
  14. package/dist/components/modal/modal.types.d.ts +59 -3
  15. package/dist/components/modal/subs/modal-body.d.ts +6 -0
  16. package/dist/components/modal/subs/modal-body.js +24 -0
  17. package/dist/components/modal/subs/modal-close-button.d.ts +7 -0
  18. package/dist/components/modal/subs/modal-close-button.js +38 -0
  19. package/dist/components/modal/subs/modal-content.d.ts +9 -0
  20. package/dist/components/modal/subs/modal-content.js +60 -0
  21. package/dist/components/modal/subs/modal-header.d.ts +6 -0
  22. package/dist/components/modal/subs/modal-header.js +24 -0
  23. package/dist/components/modal/subs/modal-overlay.d.ts +6 -0
  24. package/dist/components/modal/subs/modal-overlay.js +25 -0
  25. package/dist/components/modal/subs/modal-title.d.ts +8 -0
  26. package/dist/components/modal/subs/modal-title.js +28 -0
  27. package/dist/components/overlay-layer/constants.d.ts +8 -7
  28. package/dist/components/overlay-layer/constants.js +2 -2
  29. package/dist/components/overlay-layer/index.d.ts +1 -1
  30. package/dist/components/overlay-layer/index.js +8 -7
  31. package/dist/components/overlay-layer/overlay-stack.d.ts +2 -2
  32. package/dist/components/overlay-layer/overlay-stack.js +4 -4
  33. package/dist/components/overlay-layer/types.d.ts +3 -3
  34. package/dist/index.css +1 -1
  35. package/dist/index.js +209 -188
  36. package/package.json +3 -3
@@ -1,198 +1,43 @@
1
1
  "use client";
2
- import { jsx as r, jsxs as p } from "react/jsx-runtime";
3
- import { RemoveScroll as rt } from "@mantine/core";
4
- import { useMergedRef as nt, useIsomorphicEffect as at } from "@mantine/hooks";
5
- import { clsx as i } from "clsx";
6
- import { useId as ot, useRef as l, useEffect as f, useCallback as st } from "react";
7
- import "../../provider/ui-context.js";
8
- import { useLocale as ct } from "../../provider/hooks.js";
9
- import { Portal as it } from "../_inner/portal/portal.js";
10
- import { IconButton as lt } from "../icon-button/icon-button.js";
11
- import { OverlayParentProvider as dt } from "../overlay-layer/overlay-parent-context.js";
12
- import { useOverlayLayerInternal as ut } from "../overlay-layer/use-overlay-layer.js";
13
- import { useAnimatedMount as mt, getFocusableElements as M } from "../popover/hooks.js";
14
- import n from "./modal.module.css.js";
15
- const z = 200, ft = z + 100, xt = {
16
- xs: "320px",
17
- sm: "380px",
18
- md: "440px",
19
- lg: "620px",
20
- xl: "780px"
21
- }, vt = {
22
- xs: "var(--t-space-mini)",
23
- sm: "var(--t-space-xs)",
24
- md: "var(--t-space-lg)",
25
- lg: "var(--t-space-xl)",
26
- xl: "var(--t-space-xxl)"
27
- }, gt = {
28
- xs: "2px",
29
- sm: "var(--t-radius-xs)",
30
- md: "var(--t-radius-sm)",
31
- lg: "var(--t-radius-lg)",
32
- xl: "var(--t-radius-lg)"
33
- }, 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 = ({
34
- opened: t,
35
- onClose: o,
36
- title: s,
37
- children: D,
38
- centered: U = !0,
39
- size: I = "md",
40
- classNames: d,
41
- className: _,
42
- zIndex: $,
43
- padding: j = "xl",
44
- radius: P = "lg",
45
- withCloseButton: T = !0,
46
- closeOnClickOutside: q = !1,
47
- closeOnEscape: G = !0,
48
- closeButtonProps: x,
49
- onExitTransitionEnd: R,
50
- transitionProps: N,
51
- overlayProps: S,
52
- onClick: H,
53
- keepMounted: K = !1,
54
- yOffset: X = "5dvh",
55
- xOffset: Y = "5vw",
56
- "aria-label": A
2
+ import { jsxs as a, jsx as r } from "react/jsx-runtime";
3
+ import { ModalRoot as d } from "./modal-root.js";
4
+ import { ModalBody as t } from "./subs/modal-body.js";
5
+ import { ModalCloseButton as n } from "./subs/modal-close-button.js";
6
+ import { ModalContent as m } from "./subs/modal-content.js";
7
+ import { ModalHeader as i } from "./subs/modal-header.js";
8
+ import { ModalOverlay as s } from "./subs/modal-overlay.js";
9
+ import { ModalTitle as p } from "./subs/modal-title.js";
10
+ const c = ({
11
+ title: o,
12
+ children: M,
13
+ withCloseButton: e = !0,
14
+ closeButtonProps: f,
15
+ onClick: h,
16
+ "aria-label": u,
17
+ ...y
57
18
  }) => {
58
- const Z = ct(), C = ot(), c = l(null), { mounted: v, animState: O, handleTransitionEnd: w } = mt(
59
- t,
60
- K
61
- ), g = ut({
62
- opened: t,
63
- zIndex: $,
64
- close: () => o(),
65
- closeOnEscape: G,
66
- closeOnClickOutside: q,
67
- name: "modal"
68
- }), J = nt(c, g.ref), u = l(!1), h = l(t), L = l({
69
- handleTransitionEnd: w,
70
- onExitTransitionEnd: R,
71
- onExited: N?.onExited
72
- });
73
- f(() => {
74
- L.current = {
75
- handleTransitionEnd: w,
76
- onExitTransitionEnd: R,
77
- onExited: N?.onExited
78
- };
79
- });
80
- const y = st(() => {
81
- if (!u.current) return;
82
- u.current = !1;
83
- const e = L.current;
84
- e.onExitTransitionEnd?.(), e.onExited?.(), e.handleTransitionEnd();
85
- }, []);
86
- f(() => {
87
- if (t) {
88
- h.current = !0, u.current = !1;
89
- return;
90
- }
91
- if (!h.current) return;
92
- h.current = !1, u.current = !0;
93
- const e = window.setTimeout(y, ft);
94
- return () => window.clearTimeout(e);
95
- }, [t, y]);
96
- const Q = (e) => {
97
- e.target === e.currentTarget && O === "closing" && y();
98
- }, m = l(null);
99
- at(() => {
100
- t && !m.current && (m.current = document.activeElement);
101
- }, [t]), f(() => {
102
- if (!t || !v) return;
103
- const e = c.current;
104
- if (!e || e.contains(document.activeElement)) return;
105
- (e.querySelector("[data-autofocus]") ?? M([e])[0] ?? e).focus();
106
- }, [t, v]), f(() => {
107
- if (t) return;
108
- const e = m.current;
109
- if (m.current = null, !e?.isConnected) return;
110
- const a = document.activeElement;
111
- (!a || a === document.body || c.current?.contains(a)) && e.focus();
112
- }, [t]);
113
- const k = (e) => /* @__PURE__ */ r(
114
- "span",
115
- {
116
- tabIndex: 0,
117
- "data-focus-sentinel": e,
118
- "aria-hidden": "true",
119
- className: n.sentinel,
120
- onFocus: () => {
121
- const a = M([c.current]);
122
- ((e === "start" ? a[a.length - 1] : a[0]) ?? c.current)?.focus();
123
- }
124
- }
125
- );
126
- if (!v) return null;
127
- const F = s != null && s !== !1, V = F || T, W = S?.backgroundOpacity ?? S?.opacity ?? 0.6, B = typeof s == "string" ? "h2" : "div", tt = {
128
- zIndex: g.zIndex,
129
- "--modal-size": I === "auto" ? "auto" : E(xt, I),
130
- "--modal-padding": E(vt, j),
131
- "--modal-radius": E(gt, P),
132
- "--modal-y-offset": b(X),
133
- "--modal-x-offset": b(Y),
134
- "--modal-overlay-opacity": W,
135
- "--modal-duration": `${z}ms`
136
- };
137
- return /* @__PURE__ */ r(it, { children: /* @__PURE__ */ r(rt, { enabled: t, children: /* @__PURE__ */ p(
138
- "div",
139
- {
140
- className: i(n.root, _),
141
- style: tt,
142
- "data-state": O,
143
- "data-centered": U || void 0,
144
- "aria-hidden": t ? void 0 : !0,
145
- inert: t ? void 0 : !0,
146
- children: [
147
- /* @__PURE__ */ r("div", { className: n.overlay, "aria-hidden": "true" }),
148
- /* @__PURE__ */ r("div", { className: n.inner, children: /* @__PURE__ */ p(
149
- "div",
150
- {
151
- ref: J,
152
- role: "dialog",
153
- "aria-modal": "true",
154
- "aria-label": A,
155
- "aria-labelledby": !A && F ? C : void 0,
156
- tabIndex: -1,
157
- className: i(n.content, d?.content),
158
- onClick: H,
159
- onTransitionEnd: Q,
160
- children: [
161
- k("start"),
162
- V && /* @__PURE__ */ p("div", { className: i(n.header, d?.header), children: [
163
- /* @__PURE__ */ r(
164
- B,
165
- {
166
- id: C,
167
- className: i(n.title, d?.title),
168
- children: s
169
- }
170
- ),
171
- T && /* @__PURE__ */ r(
172
- lt,
173
- {
174
- variant: "text",
175
- color: "regular",
176
- size: "lg",
177
- iconName: "close",
178
- className: n.close,
179
- disabled: x?.disabled,
180
- "aria-label": x?.["aria-label"] ?? Z.close,
181
- onClick: (e) => {
182
- x?.onClick?.(e), o();
183
- }
184
- }
185
- )
186
- ] }),
187
- /* @__PURE__ */ r("div", { className: i(n.body, d?.body), children: /* @__PURE__ */ r(dt, { id: g.id, children: D }) }),
188
- k("end")
189
- ]
190
- }
191
- ) })
192
- ]
193
- }
194
- ) }) });
19
+ const l = o != null && o !== !1;
20
+ return /* @__PURE__ */ a(d, { ...y, children: [
21
+ /* @__PURE__ */ r(s, {}),
22
+ /* @__PURE__ */ a(m, { onClick: h, "aria-label": u, children: [
23
+ (l || e) && /* @__PURE__ */ a(i, { children: [
24
+ l && /* @__PURE__ */ r(p, { children: o }),
25
+ e && /* @__PURE__ */ r(n, { ...f })
26
+ ] }),
27
+ /* @__PURE__ */ r(t, { children: M })
28
+ ] })
29
+ ] });
195
30
  };
31
+ c.displayName = "Modal";
32
+ const R = Object.assign(c, {
33
+ Root: d,
34
+ Overlay: s,
35
+ Content: m,
36
+ Header: i,
37
+ Title: p,
38
+ Body: t,
39
+ CloseButton: n
40
+ });
196
41
  export {
197
- Lt as Modal
42
+ R as Modal
198
43
  };
@@ -1,24 +1,26 @@
1
1
  "use client";
2
- 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 = {
3
- root: e,
4
- overlay: t,
5
- inner: n,
6
- content: o,
2
+ 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 = {
3
+ root: o,
4
+ overlay: n,
5
+ inner: e,
6
+ content: t,
7
7
  header: _,
8
- title: l,
8
+ title: c,
9
9
  close: s,
10
- body: i,
11
- sentinel: a
10
+ body: r,
11
+ sentinel: l,
12
+ confirmFooter: i
12
13
  };
13
14
  export {
14
- i as body,
15
+ r as body,
15
16
  s as close,
16
- o as content,
17
- c as default,
17
+ i as confirmFooter,
18
+ t as content,
19
+ a as default,
18
20
  _ as header,
19
- n as inner,
20
- t as overlay,
21
- e as root,
22
- a as sentinel,
23
- l as title
21
+ e as inner,
22
+ n as overlay,
23
+ o as root,
24
+ l as sentinel,
25
+ c as title
24
26
  };
@@ -1,8 +1,16 @@
1
+ import type { ButtonProps } from '../button';
1
2
  import type React from 'react';
2
3
  export type ModalSizePreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
3
4
  export type ModalSpacingPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
4
- export type ModalClassNames = Partial<Record<'header' | 'title' | 'body' | 'content', string>>;
5
- export interface ModalCloseButtonProps {
5
+ /**
6
+ * 槽位名,`classNames` 与 `styles` 共用。
7
+ * `inner` 是面板外那层负责定位与内边距的容器,只开放槽位、不提供子组件
8
+ * (与 Mantine 一致:它也没有 `Modal.Inner`)。
9
+ */
10
+ export type ModalStylesName = 'root' | 'overlay' | 'inner' | 'content' | 'header' | 'title' | 'body' | 'close';
11
+ export type ModalClassNames = Partial<Record<ModalStylesName, string>>;
12
+ export type ModalStyles = Partial<Record<ModalStylesName, React.CSSProperties>>;
13
+ export interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
14
  /** 覆盖关闭按钮默认的可访问名(默认取 locale 的「关闭」) */
7
15
  'aria-label'?: string;
8
16
  disabled?: boolean;
@@ -28,15 +36,24 @@ export interface ModalProps {
28
36
  * @default true
29
37
  */
30
38
  centered?: boolean;
39
+ /**
40
+ * 铺满视口:去掉四周边距与圆角。只改几何,层级照常进栈
41
+ * @default false
42
+ */
43
+ fullScreen?: boolean;
31
44
  /**
32
45
  * 宽度:预设名、数字(px)、纯数字字符串(当 px,如 `"800"`)、`'auto'` 或带单位的 CSS 值(`'30rem'`、`'50%'`)
33
46
  * @default 'md'
34
47
  */
35
48
  size?: ModalSizePreset | number | string;
36
- /** 槽位类名:头部 / 标题 / 内容区 / 面板 */
49
+ /** 槽位类名 */
37
50
  classNames?: ModalClassNames;
51
+ /** 槽位内联样式,与 `classNames` 共用同一组键 */
52
+ styles?: ModalStyles;
38
53
  /** 根节点类名 */
39
54
  className?: string;
55
+ /** 根节点内联样式(层级与 CSS 变量由组件自己写,同名属性以组件的为准) */
56
+ style?: React.CSSProperties;
40
57
  /** 显式层级。不传则由层级模块按打开顺序计算(普通层从 200 起) */
41
58
  zIndex?: number;
42
59
  /**
@@ -94,3 +111,42 @@ export interface ModalProps {
94
111
  /** 对话框的可访问名;不传时用 `title` */
95
112
  'aria-label'?: string;
96
113
  }
114
+ /**
115
+ * `Modal.Root` 的属性:单件属性里去掉只属于头部与面板的那几个。
116
+ * 层级、动画、滚动锁、几何与槽位都在 Root 上,子组件从 context 读。
117
+ */
118
+ export type ModalRootProps = Omit<ModalProps, 'title' | 'withCloseButton' | 'closeButtonProps' | 'onClick' | 'aria-label'>;
119
+ /** 命令式 `modals.open` 的属性:`opened` 由管理器接管,其余与 `<Modal>` 一致 */
120
+ export type ModalEventProps = Omit<ModalProps, 'opened' | 'onClose'> & {
121
+ onClose?: ModalProps['onClose'];
122
+ };
123
+ /** 兼容 Mantine 确认框的 `color: 'red'`,渲染时映射为 torque 的危险色。 */
124
+ export type ModalConfirmButtonProps = Omit<ButtonProps, 'color'> & {
125
+ color?: ButtonProps['color'] | 'red';
126
+ };
127
+ export interface ModalConfirmLabels {
128
+ /** 确认按钮文案,缺省取 locale 的「确认」 */
129
+ confirm?: React.ReactNode;
130
+ /** 取消按钮文案,缺省取 locale 的「取消」 */
131
+ cancel?: React.ReactNode;
132
+ }
133
+ /** 命令式 `modals.openConfirmModal` 的属性:在 `modals.open` 之上多一个页脚 */
134
+ export interface ConfirmModalEventProps extends ModalEventProps {
135
+ labels?: ModalConfirmLabels;
136
+ /** 确认框关闭后调用;允许异步业务操作 */
137
+ onConfirm?: () => void | Promise<void>;
138
+ /** 只有点取消按钮才调用;Escape / 关闭按钮 / 点遮罩关闭时不调用 */
139
+ onCancel?: () => void;
140
+ confirmProps?: ModalConfirmButtonProps;
141
+ cancelProps?: ModalConfirmButtonProps;
142
+ }
143
+ /** 事件载荷:id 在指令层生成,管理器只负责渲染与移除 */
144
+ export type ModalEventPayload = {
145
+ id: string;
146
+ kind: 'content';
147
+ props: ModalEventProps;
148
+ } | {
149
+ id: string;
150
+ kind: 'confirm';
151
+ props: ConfirmModalEventProps;
152
+ };
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ /** 内容区。紧跟在 `Modal.Header` 后面时上内边距归零,避免与头部间距叠加 */
3
+ export declare const ModalBody: {
4
+ ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
5
+ displayName: string;
6
+ };
@@ -0,0 +1,24 @@
1
+ "use client";
2
+ import { jsx as l } from "react/jsx-runtime";
3
+ import { clsx as m } from "clsx";
4
+ import { useModalContext as r, slotStyle as a } from "../modal-context.js";
5
+ import d from "../modal.module.css.js";
6
+ const y = ({
7
+ className: s,
8
+ style: t,
9
+ ...e
10
+ }) => {
11
+ const o = r();
12
+ return /* @__PURE__ */ l(
13
+ "div",
14
+ {
15
+ ...e,
16
+ className: m(d.body, o.classNames?.body, s),
17
+ style: a(o.styles?.body, t)
18
+ }
19
+ );
20
+ };
21
+ y.displayName = "Modal.Body";
22
+ export {
23
+ y as ModalBody
24
+ };
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import type { ModalCloseButtonProps } from '../modal.types';
3
+ /** 右上角关闭按钮:先调自己的 `onClick`,再关闭弹窗 */
4
+ export declare const ModalCloseButton: {
5
+ ({ className, style, onClick, "aria-label": ariaLabel, ...rest }: ModalCloseButtonProps): React.JSX.Element;
6
+ displayName: string;
7
+ };
@@ -0,0 +1,38 @@
1
+ "use client";
2
+ import { jsx as m } from "react/jsx-runtime";
3
+ import { clsx as i } from "clsx";
4
+ import "../../../provider/ui-context.js";
5
+ import "react";
6
+ import { useLocale as n } from "../../../provider/hooks.js";
7
+ import { IconButton as p } from "../../icon-button/icon-button.js";
8
+ import { useModalContext as u, slotStyle as f } from "../modal-context.js";
9
+ import x from "../modal.module.css.js";
10
+ const d = ({
11
+ className: l,
12
+ style: e,
13
+ onClick: s,
14
+ "aria-label": t,
15
+ ...r
16
+ }) => {
17
+ const o = u(), a = n();
18
+ return /* @__PURE__ */ m(
19
+ p,
20
+ {
21
+ ...r,
22
+ variant: "text",
23
+ color: "regular",
24
+ size: "lg",
25
+ iconName: "close",
26
+ className: i(x.close, o.classNames?.close, l),
27
+ style: f(o.styles?.close, e),
28
+ "aria-label": t ?? a.close,
29
+ onClick: (c) => {
30
+ s?.(c), o.close();
31
+ }
32
+ }
33
+ );
34
+ };
35
+ d.displayName = "Modal.CloseButton";
36
+ export {
37
+ d as ModalCloseButton
38
+ };
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ /**
3
+ * 面板:`role="dialog"` 那一层,外面还包一层负责定位与内边距的 `inner`
4
+ * (与 Mantine 一致,`inner` 只开放槽位、不单独成子组件)。
5
+ */
6
+ export declare const ModalContent: {
7
+ ({ "aria-label": ariaLabel, className, style, children, ref, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
8
+ displayName: string;
9
+ };
@@ -0,0 +1,60 @@
1
+ "use client";
2
+ import { jsx as r, jsxs as x } from "react/jsx-runtime";
3
+ import { useMergedRef as y } from "@mantine/hooks";
4
+ import { clsx as l } from "clsx";
5
+ import { getFocusableElements as b } from "../../popover/hooks.js";
6
+ import { useModalContext as g, slotStyle as c } from "../modal-context.js";
7
+ import n from "../modal.module.css.js";
8
+ const N = ({
9
+ "aria-label": s,
10
+ className: i,
11
+ style: d,
12
+ children: m,
13
+ ref: f,
14
+ ...u
15
+ }) => {
16
+ const e = g(), p = y(e.contentRef, e.layerRef, f), o = (a) => /* @__PURE__ */ r(
17
+ "span",
18
+ {
19
+ tabIndex: 0,
20
+ "data-focus-sentinel": a,
21
+ "aria-hidden": "true",
22
+ className: n.sentinel,
23
+ onFocus: () => {
24
+ const t = b([e.contentRef.current]);
25
+ ((a === "start" ? t[t.length - 1] : t[0]) ?? e.contentRef.current)?.focus();
26
+ }
27
+ }
28
+ );
29
+ return /* @__PURE__ */ r(
30
+ "div",
31
+ {
32
+ className: l(n.inner, e.classNames?.inner),
33
+ style: c(e.styles?.inner),
34
+ children: /* @__PURE__ */ x(
35
+ "div",
36
+ {
37
+ ...u,
38
+ ref: p,
39
+ role: "dialog",
40
+ "aria-modal": "true",
41
+ "aria-label": s,
42
+ "aria-labelledby": !s && e.titleMounted ? e.titleId : void 0,
43
+ tabIndex: -1,
44
+ className: l(n.content, e.classNames?.content, i),
45
+ style: c(e.styles?.content, d),
46
+ onTransitionEnd: e.onContentTransitionEnd,
47
+ children: [
48
+ o("start"),
49
+ m,
50
+ o("end")
51
+ ]
52
+ }
53
+ )
54
+ }
55
+ );
56
+ };
57
+ N.displayName = "Modal.Content";
58
+ export {
59
+ N as ModalContent
60
+ };
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ /** 头部:标题与关闭按钮的容器,粘在面板顶部 */
3
+ export declare const ModalHeader: {
4
+ ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
5
+ displayName: string;
6
+ };
@@ -0,0 +1,24 @@
1
+ "use client";
2
+ import { jsx as t } from "react/jsx-runtime";
3
+ import { clsx as a } from "clsx";
4
+ import { useModalContext as l, slotStyle as m } from "../modal-context.js";
5
+ import d from "../modal.module.css.js";
6
+ const c = ({
7
+ className: s,
8
+ style: o,
9
+ ...r
10
+ }) => {
11
+ const e = l();
12
+ return /* @__PURE__ */ t(
13
+ "div",
14
+ {
15
+ ...r,
16
+ className: a(d.header, e.classNames?.header, s),
17
+ style: m(e.styles?.header, o)
18
+ }
19
+ );
20
+ };
21
+ c.displayName = "Modal.Header";
22
+ export {
23
+ c as ModalHeader
24
+ };
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ /** 遮罩。不透明度由 `Modal.Root` 的 `overlayProps` 经 CSS 变量下发 */
3
+ export declare const ModalOverlay: {
4
+ ({ className, style, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
5
+ displayName: string;
6
+ };
@@ -0,0 +1,25 @@
1
+ "use client";
2
+ import { jsx as r } from "react/jsx-runtime";
3
+ import { clsx as a } from "clsx";
4
+ import { useModalContext as t, slotStyle as m } from "../modal-context.js";
5
+ import i from "../modal.module.css.js";
6
+ const y = ({
7
+ className: o,
8
+ style: s,
9
+ ...l
10
+ }) => {
11
+ const e = t();
12
+ return /* @__PURE__ */ r(
13
+ "div",
14
+ {
15
+ ...l,
16
+ "aria-hidden": "true",
17
+ className: a(i.overlay, e.classNames?.overlay, o),
18
+ style: m(e.styles?.overlay, s)
19
+ }
20
+ );
21
+ };
22
+ y.displayName = "Modal.Overlay";
23
+ export {
24
+ y as ModalOverlay
25
+ };
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ /**
3
+ * 标题:挂载后回填给 Content 的 `aria-labelledby`,字符串内容用语义化的 `h2`。
4
+ */
5
+ export declare const ModalTitle: {
6
+ ({ className, style, children, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
7
+ displayName: string;
8
+ };
@@ -0,0 +1,28 @@
1
+ "use client";
2
+ import { jsx as r } from "react/jsx-runtime";
3
+ import { useIsomorphicEffect as m } from "@mantine/hooks";
4
+ import { clsx as a } from "clsx";
5
+ import { useModalContext as c, slotStyle as f } from "../modal-context.js";
6
+ import n from "../modal.module.css.js";
7
+ const p = ({
8
+ className: o,
9
+ style: l,
10
+ children: s,
11
+ ...i
12
+ }) => {
13
+ const t = c(), { setTitleMounted: e } = t;
14
+ return m(() => (e(!0), () => e(!1)), [e]), /* @__PURE__ */ r(
15
+ typeof s == "string" ? "h2" : "div",
16
+ {
17
+ ...i,
18
+ id: t.titleId,
19
+ className: a(n.title, t.classNames?.title, o),
20
+ style: f(t.styles?.title, l),
21
+ children: s
22
+ }
23
+ );
24
+ };
25
+ p.displayName = "Modal.Title";
26
+ export {
27
+ p as ModalTitle
28
+ };
@@ -1,14 +1,15 @@
1
1
  /** 普通层的基准层级:所有普通浮层(弹窗、下拉、抽屉、提示)都从这里起算。 */
2
2
  export declare const OVERLAY_BASE = 200;
3
3
  /**
4
- * 顶层档位的下限。小于它的层级都归普通层;10000 – 15999 按千位分档,
4
+ * 顶层档位的下限。小于它的层级都归普通层;1000 – 1499 按百分位分档,
5
5
  * 由业务在自己的档位表里声明(悬浮按钮、AI 侧边栏、引导层……)。
6
6
  */
7
- export declare const OVERLAY_TOP_MIN = 10000;
7
+ export declare const OVERLAY_TOP_MIN = 1000;
8
8
  /**
9
- * 组件库保留给通知 / 消息的一档,不对外导出:由 `NotificationsContainer` 直接用作显式层级,不进栈。
10
- * 它不是最高档:引导层(15000)要盖住通知。
9
+ * 组件库保留给通知 / 消息的一档,也是最高档:通知盖住包括引导层在内的一切浮层。
10
+ * 由 `NotificationsContainer` 直接用作显式层级,不进栈。
11
+ * 对外导出供业务档位表对照,业务不要占用这一档。
11
12
  */
12
- export declare const OVERLAY_TIER_NOTIFICATION = 14000;
13
- /** 顶层档位的上限(不含),只用于开发环境校验 */
14
- export declare const OVERLAY_TOP_MAX = 16000;
13
+ export declare const OVERLAY_TIER_NOTIFICATION = 1500;
14
+ /** 业务顶层档位的上限(不含),只用于开发环境校验 */
15
+ export declare const OVERLAY_TOP_MAX = 1500;
@@ -1,8 +1,8 @@
1
1
  "use client";
2
- const O = 200, A = 1e4, _ = 14e3, e = 16e3;
2
+ const O = 200, A = 1e3, _ = 1500, t = 1500;
3
3
  export {
4
4
  O as OVERLAY_BASE,
5
5
  _ as OVERLAY_TIER_NOTIFICATION,
6
- e as OVERLAY_TOP_MAX,
6
+ t as OVERLAY_TOP_MAX,
7
7
  A as OVERLAY_TOP_MIN
8
8
  };
@@ -1,5 +1,5 @@
1
1
  export { useOverlayLayer } from './use-overlay-layer';
2
2
  export { OverlayTierScope } from './overlay-tier-scope';
3
3
  export type { OverlayTierScopeProps } from './overlay-tier-scope';
4
- export { OVERLAY_BASE, OVERLAY_TOP_MIN } from './constants';
4
+ export { OVERLAY_BASE, OVERLAY_TIER_NOTIFICATION, OVERLAY_TOP_MIN, } from './constants';
5
5
  export type { OverlayCloseReason, OverlayLayerOptions, OverlayLayerResult, } from './types';