mp-taro-kit 0.0.1 → 0.0.4

package/dist/ui/feedback/style/index.css

@@ -0,0 +1,67 @@
+.mptk-fb-toast {
+  background-color: var(--mptk-surface-2);
+  border-radius: var(--mptk-radius-md);
+  padding-top: var(--mptk-space-2);
+  padding-right: var(--mptk-space-4);
+  padding-bottom: var(--mptk-space-2);
+  padding-left: var(--mptk-space-4);
+  color: var(--mptk-fg);
+  font-size: var(--mptk-font-md);
+  line-height: var(--mptk-line-md);
+}
+
+.mptk-fb-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mptk-fb-loading__text {
+  color: var(--mptk-fg-2);
+  font-size: var(--mptk-font-md);
+  line-height: var(--mptk-line-md);
+}
+
+.mptk-fb-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mptk-fb-dialog__panel {
+  background-color: var(--mptk-surface-1);
+  border-radius: var(--mptk-radius-lg);
+  padding-top: var(--mptk-space-4);
+  padding-right: var(--mptk-space-4);
+  padding-bottom: var(--mptk-space-3);
+  padding-left: var(--mptk-space-4);
+}
+
+.mptk-fb-dialog__title {
+  color: var(--mptk-fg);
+  font-size: var(--mptk-font-xl);
+  line-height: var(--mptk-line-xl);
+}
+
+.mptk-fb-dialog__body {
+  color: var(--mptk-fg-2);
+  font-size: var(--mptk-font-md);
+  line-height: var(--mptk-line-md);
+}
+
+.mptk-fb-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mptk-fb-dialog__action--confirm {
+  color: var(--mptk-business);
+  font-size: var(--mptk-font-lg);
+  line-height: var(--mptk-line-lg);
+}
+
+.mptk-fb-dialog__action--cancel {
+  color: var(--mptk-fg-3);
+  font-size: var(--mptk-font-lg);
+  line-height: var(--mptk-line-lg);
+}

package/dist/ui/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetUIForTests = exports.hideLoading = exports.showLoading = exports.clearToasts = exports.hideToast = exports.showToast = exports.isOverlayHostMounted = exports.markOverlayHostUnmounted = exports.markOverlayHostMounted = exports.uiState = void 0;
+var state_js_1 = require("./state.cjs");
+Object.defineProperty(exports, "uiState", { enumerable: true, get: function () { return state_js_1.uiState; } });
+var commands_js_1 = require("./commands.cjs");
+Object.defineProperty(exports, "markOverlayHostMounted", { enumerable: true, get: function () { return commands_js_1.markOverlayHostMounted; } });
+Object.defineProperty(exports, "markOverlayHostUnmounted", { enumerable: true, get: function () { return commands_js_1.markOverlayHostUnmounted; } });
+Object.defineProperty(exports, "isOverlayHostMounted", { enumerable: true, get: function () { return commands_js_1.isOverlayHostMounted; } });
+Object.defineProperty(exports, "showToast", { enumerable: true, get: function () { return commands_js_1.showToast; } });
+Object.defineProperty(exports, "hideToast", { enumerable: true, get: function () { return commands_js_1.hideToast; } });
+Object.defineProperty(exports, "clearToasts", { enumerable: true, get: function () { return commands_js_1.clearToasts; } });
+Object.defineProperty(exports, "showLoading", { enumerable: true, get: function () { return commands_js_1.showLoading; } });
+Object.defineProperty(exports, "hideLoading", { enumerable: true, get: function () { return commands_js_1.hideLoading; } });
+Object.defineProperty(exports, "alert", { enumerable: true, get: function () { return commands_js_1.alert; } });
+Object.defineProperty(exports, "confirm", { enumerable: true, get: function () { return commands_js_1.confirm; } });
+Object.defineProperty(exports, "resetUIForTests", { enumerable: true, get: function () { return commands_js_1.resetUIForTests; } });

package/dist/ui/index.d.ts

@@ -0,0 +1,4 @@
+export type { DialogPayload, UIState } from './state.js';
+export { uiState } from './state.js';
+export { markOverlayHostMounted, markOverlayHostUnmounted, isOverlayHostMounted, showToast, hideToast, clearToasts, showLoading, hideLoading, alert, confirm, resetUIForTests, type DialogOptions, } from './commands.js';
+export type { Notice, NoticeTone } from '../runtime/notify.js';

package/dist/ui/index.js

@@ -0,0 +1,2 @@
+export { uiState } from './state.js';
+export { markOverlayHostMounted, markOverlayHostUnmounted, isOverlayHostMounted, showToast, hideToast, clearToasts, showLoading, hideLoading, alert, confirm, resetUIForTests, } from './commands.js';

package/dist/ui/infra/OverlayHost.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayHost = OverlayHost;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("@tarojs/components");
+const state_js_1 = require("../state.cjs");
+const commands_js_1 = require("../commands.cjs");
+const use_store_js_1 = require("./use-store.cjs");
+/**
+ * 命令式 API 的渲染位置。宿主在页面基座挂一次即可；
+ * 弹窗 / toast / loading 的具体内容由库渲染，业务内容仍从 children 或 options 传入。
+ */
+function OverlayHost({ className }) {
+    const overlays = (0, use_store_js_1.useOverlayEntries)();
+    const notices = (0, use_store_js_1.useNotices)();
+    const loading = (0, use_store_js_1.useLoadingState)();
+    // 渲染期就置位：宿主的页面生命周期（如 onLoad）可能早于 useEffect，
+    // 那时组件其实已挂载，只是 effect 未跑，不该被判成「未挂载」而抛错。
+    (0, commands_js_1.markOverlayHostMounted)();
+    (0, react_1.useEffect)(() => {
+        // 幂等重置，兼容 StrictMode 的 mount → unmount → mount。
+        (0, commands_js_1.markOverlayHostMounted)();
+        return () => (0, commands_js_1.markOverlayHostUnmounted)();
+    }, []);
+    const close = (id, confirmed) => {
+        const entry = (0, state_js_1.uiState)().overlays.dismiss(id);
+        if (entry === undefined)
+            return;
+        entry.resolve(confirmed);
+    };
+    return ((0, jsx_runtime_1.jsxs)(components_1.View, { className: ['mptk-overlay-host', className].filter(Boolean).join(' '), children: [loading.active ? ((0, jsx_runtime_1.jsx)(components_1.View, { className: "mptk-loading", children: (0, jsx_runtime_1.jsx)(components_1.Text, { className: "mptk-loading__text", children: "\u52A0\u8F7D\u4E2D" }) })) : null, notices.map((notice) => ((0, jsx_runtime_1.jsx)(components_1.View, { className: `mptk-toast mptk-toast--${notice.tone}`, children: (0, jsx_runtime_1.jsx)(components_1.Text, { children: notice.text }) }, notice.id))), overlays.map((entry) => ((0, jsx_runtime_1.jsx)(components_1.View, { className: "mptk-dialog", children: (0, jsx_runtime_1.jsxs)(components_1.View, { className: "mptk-dialog__panel", children: [entry.payload.title === undefined ? null : ((0, jsx_runtime_1.jsx)(components_1.View, { className: "mptk-dialog__title", children: (0, jsx_runtime_1.jsx)(components_1.Text, { children: entry.payload.title }) })), (0, jsx_runtime_1.jsx)(components_1.View, { className: "mptk-dialog__body", children: (0, jsx_runtime_1.jsx)(components_1.Text, { children: entry.payload.message }) }), (0, jsx_runtime_1.jsxs)(components_1.View, { className: "mptk-dialog__actions", children: [entry.payload.kind === 'confirm' ? ((0, jsx_runtime_1.jsx)(components_1.View, { className: "mptk-dialog__action mptk-dialog__action--cancel", onClick: () => close(entry.id, false), children: (0, jsx_runtime_1.jsx)(components_1.Text, { children: entry.payload.cancelText }) })) : null, (0, jsx_runtime_1.jsx)(components_1.View, { className: "mptk-dialog__action mptk-dialog__action--confirm", onClick: () => close(entry.id, true), children: (0, jsx_runtime_1.jsx)(components_1.Text, { children: entry.payload.confirmText }) })] })] }) }, entry.id)))] }));
+}

package/dist/ui/infra/OverlayHost.d.ts

@@ -0,0 +1,8 @@
+export interface OverlayHostProps {
+    className?: string;
+}
+/**
+ * 命令式 API 的渲染位置。宿主在页面基座挂一次即可；
+ * 弹窗 / toast / loading 的具体内容由库渲染，业务内容仍从 children 或 options 传入。
+ */
+export declare function OverlayHost({ className }: OverlayHostProps): import("react").JSX.Element;

package/dist/ui/infra/OverlayHost.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { View, Text } from '@tarojs/components';
+import { uiState } from '../state.js';
+import { markOverlayHostMounted, markOverlayHostUnmounted } from '../commands.js';
+import { useLoadingState, useNotices, useOverlayEntries } from './use-store.js';
+/**
+ * 命令式 API 的渲染位置。宿主在页面基座挂一次即可；
+ * 弹窗 / toast / loading 的具体内容由库渲染，业务内容仍从 children 或 options 传入。
+ */
+export function OverlayHost({ className }) {
+    const overlays = useOverlayEntries();
+    const notices = useNotices();
+    const loading = useLoadingState();
+    // 渲染期就置位：宿主的页面生命周期（如 onLoad）可能早于 useEffect，
+    // 那时组件其实已挂载，只是 effect 未跑，不该被判成「未挂载」而抛错。
+    markOverlayHostMounted();
+    useEffect(() => {
+        // 幂等重置，兼容 StrictMode 的 mount → unmount → mount。
+        markOverlayHostMounted();
+        return () => markOverlayHostUnmounted();
+    }, []);
+    const close = (id, confirmed) => {
+        const entry = uiState().overlays.dismiss(id);
+        if (entry === undefined)
+            return;
+        entry.resolve(confirmed);
+    };
+    return (_jsxs(View, { className: ['mptk-overlay-host', className].filter(Boolean).join(' '), children: [loading.active ? (_jsx(View, { className: "mptk-loading", children: _jsx(Text, { className: "mptk-loading__text", children: "\u52A0\u8F7D\u4E2D" }) })) : null, notices.map((notice) => (_jsx(View, { className: `mptk-toast mptk-toast--${notice.tone}`, children: _jsx(Text, { children: notice.text }) }, notice.id))), overlays.map((entry) => (_jsx(View, { className: "mptk-dialog", children: _jsxs(View, { className: "mptk-dialog__panel", children: [entry.payload.title === undefined ? null : (_jsx(View, { className: "mptk-dialog__title", children: _jsx(Text, { children: entry.payload.title }) })), _jsx(View, { className: "mptk-dialog__body", children: _jsx(Text, { children: entry.payload.message }) }), _jsxs(View, { className: "mptk-dialog__actions", children: [entry.payload.kind === 'confirm' ? (_jsx(View, { className: "mptk-dialog__action mptk-dialog__action--cancel", onClick: () => close(entry.id, false), children: _jsx(Text, { children: entry.payload.cancelText }) })) : null, _jsx(View, { className: "mptk-dialog__action mptk-dialog__action--confirm", onClick: () => close(entry.id, true), children: _jsx(Text, { children: entry.payload.confirmText }) })] })] }) }, entry.id)))] }));
+}

package/dist/ui/infra/SafeArea.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SafeArea = SafeArea;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@tarojs/components");
+/** 安全区容器：只提供留白，内容由 children 注入。 */
+function SafeArea({ children, position = 'bottom', className }) {
+    const names = ['mptk-safe-area', `mptk-safe-area--${position}`, className].filter(Boolean);
+    return (0, jsx_runtime_1.jsx)(components_1.View, { className: names.join(' '), children: children });
+}

package/dist/ui/infra/SafeArea.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface SafeAreaProps {
+    children?: ReactNode;
+    position?: 'top' | 'bottom';
+    className?: string;
+}
+/** 安全区容器：只提供留白，内容由 children 注入。 */
+export declare function SafeArea({ children, position, className }: SafeAreaProps): import("react").JSX.Element;

package/dist/ui/infra/SafeArea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+/** 安全区容器：只提供留白，内容由 children 注入。 */
+export function SafeArea({ children, position = 'bottom', className }) {
+    const names = ['mptk-safe-area', `mptk-safe-area--${position}`, className].filter(Boolean);
+    return _jsx(View, { className: names.join(' '), children: children });
+}

package/dist/ui/infra/index.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoadingState = exports.useNotices = exports.useOverlayEntries = exports.SafeArea = exports.OverlayHost = void 0;
+var OverlayHost_js_1 = require("./OverlayHost.cjs");
+Object.defineProperty(exports, "OverlayHost", { enumerable: true, get: function () { return OverlayHost_js_1.OverlayHost; } });
+var SafeArea_js_1 = require("./SafeArea.cjs");
+Object.defineProperty(exports, "SafeArea", { enumerable: true, get: function () { return SafeArea_js_1.SafeArea; } });
+var use_store_js_1 = require("./use-store.cjs");
+Object.defineProperty(exports, "useOverlayEntries", { enumerable: true, get: function () { return use_store_js_1.useOverlayEntries; } });
+Object.defineProperty(exports, "useNotices", { enumerable: true, get: function () { return use_store_js_1.useNotices; } });
+Object.defineProperty(exports, "useLoadingState", { enumerable: true, get: function () { return use_store_js_1.useLoadingState; } });

package/dist/ui/infra/index.d.ts

@@ -0,0 +1,3 @@
+export { OverlayHost, type OverlayHostProps } from './OverlayHost.js';
+export { SafeArea, type SafeAreaProps } from './SafeArea.js';
+export { useOverlayEntries, useNotices, useLoadingState } from './use-store.js';

package/dist/ui/infra/index.js

@@ -0,0 +1,3 @@
+export { OverlayHost } from './OverlayHost.js';
+export { SafeArea } from './SafeArea.js';
+export { useOverlayEntries, useNotices, useLoadingState } from './use-store.js';

package/dist/ui/infra/style/index.css

@@ -0,0 +1,83 @@
+.mptk-overlay-host {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.mptk-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mptk-loading__text {
+  color: var(--mptk-fg-2);
+  font-size: var(--mptk-font-md);
+  line-height: var(--mptk-line-md);
+}
+
+.mptk-toast {
+  background-color: var(--mptk-surface-2);
+  border-radius: var(--mptk-radius-md);
+  padding-top: var(--mptk-space-2);
+  padding-right: var(--mptk-space-4);
+  padding-bottom: var(--mptk-space-2);
+  padding-left: var(--mptk-space-4);
+}
+
+.mptk-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mptk-dialog__panel {
+  background-color: var(--mptk-surface-1);
+  border-radius: var(--mptk-radius-lg);
+  padding-top: var(--mptk-space-4);
+  padding-right: var(--mptk-space-4);
+  padding-bottom: var(--mptk-space-3);
+  padding-left: var(--mptk-space-4);
+}
+
+.mptk-dialog__title {
+  color: var(--mptk-fg);
+  font-size: var(--mptk-font-xl);
+  line-height: var(--mptk-line-xl);
+}
+
+.mptk-dialog__body {
+  color: var(--mptk-fg-2);
+  font-size: var(--mptk-font-md);
+  line-height: var(--mptk-line-md);
+}
+
+.mptk-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mptk-dialog__action {
+  color: var(--mptk-business);
+  font-size: var(--mptk-font-lg);
+  line-height: var(--mptk-line-lg);
+}
+
+.mptk-dialog__action--cancel {
+  color: var(--mptk-fg-3);
+}
+
+.mptk-safe-area {
+  width: 100%;
+}
+
+.mptk-safe-area--top {
+  padding-top: env(safe-area-inset-top);
+}
+
+.mptk-safe-area--bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}

package/dist/ui/infra/use-store.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverlayEntries = useOverlayEntries;
+exports.useNotices = useNotices;
+exports.useLoadingState = useLoadingState;
+const react_1 = require("react");
+const state_js_1 = require("../state.cjs");
+/** runtime 的 observable 直接喂给 useSyncExternalStore；订阅桥只做转发，不复制状态。 */
+function useOverlayEntries() {
+    return (0, react_1.useSyncExternalStore)((listener) => (0, state_js_1.uiState)().overlays.subscribe(listener), () => (0, state_js_1.uiState)().overlays.getSnapshot());
+}
+function useNotices() {
+    return (0, react_1.useSyncExternalStore)((listener) => (0, state_js_1.uiState)().notices.subscribe(listener), () => (0, state_js_1.uiState)().notices.getSnapshot());
+}
+function useLoadingState() {
+    return (0, react_1.useSyncExternalStore)((listener) => (0, state_js_1.uiState)().loading.subscribe(listener), () => (0, state_js_1.uiState)().loading.getSnapshot());
+}

package/dist/ui/infra/use-store.d.ts

@@ -0,0 +1,8 @@
+import type { DialogPayload } from '../state.js';
+import type { OverlayEntry } from '../../runtime/overlay-stack.js';
+import type { Notice } from '../../runtime/notify.js';
+import type { LoadingState } from '../../runtime/loading-slot.js';
+/** runtime 的 observable 直接喂给 useSyncExternalStore；订阅桥只做转发，不复制状态。 */
+export declare function useOverlayEntries(): readonly OverlayEntry<DialogPayload>[];
+export declare function useNotices(): readonly Notice[];
+export declare function useLoadingState(): LoadingState;

package/dist/ui/infra/use-store.js

@@ -0,0 +1,12 @@
+import { useSyncExternalStore } from 'react';
+import { uiState } from '../state.js';
+/** runtime 的 observable 直接喂给 useSyncExternalStore；订阅桥只做转发，不复制状态。 */
+export function useOverlayEntries() {
+    return useSyncExternalStore((listener) => uiState().overlays.subscribe(listener), () => uiState().overlays.getSnapshot());
+}
+export function useNotices() {
+    return useSyncExternalStore((listener) => uiState().notices.subscribe(listener), () => uiState().notices.getSnapshot());
+}
+export function useLoadingState() {
+    return useSyncExternalStore((listener) => uiState().loading.subscribe(listener), () => uiState().loading.getSnapshot());
+}

package/dist/ui/layout/Mask.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mask = Mask;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@tarojs/components");
+/** 遮罩：点击回调由宿主给，库不决定关闭策略。 */
+function Mask({ visible = true, onClose, className }) {
+    if (!visible)
+        return null;
+    const names = ['mptk-mask', className];
+    return (0, jsx_runtime_1.jsx)(components_1.View, { className: names.filter(Boolean).join(' '), onClick: () => onClose?.() });
+}

package/dist/ui/layout/Mask.d.ts

@@ -0,0 +1,7 @@
+export interface MaskProps {
+    visible?: boolean;
+    onClose?: () => void;
+    className?: string;
+}
+/** 遮罩：点击回调由宿主给，库不决定关闭策略。 */
+export declare function Mask({ visible, onClose, className }: MaskProps): import("react").JSX.Element | null;

package/dist/ui/layout/Mask.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+/** 遮罩：点击回调由宿主给，库不决定关闭策略。 */
+export function Mask({ visible = true, onClose, className }) {
+    if (!visible)
+        return null;
+    const names = ['mptk-mask', className];
+    return _jsx(View, { className: names.filter(Boolean).join(' '), onClick: () => onClose?.() });
+}

package/dist/ui/layout/Overlay.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = Overlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@tarojs/components");
+/** 浮层定位容器：只负责层级与定位，内容由 children 注入。 */
+function Overlay({ visible = true, children, className }) {
+    if (!visible)
+        return null;
+    return (0, jsx_runtime_1.jsx)(components_1.View, { className: ['mptk-overlay', className].filter(Boolean).join(' '), children: children });
+}

package/dist/ui/layout/Overlay.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface OverlayProps {
+    visible?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+/** 浮层定位容器：只负责层级与定位，内容由 children 注入。 */
+export declare function Overlay({ visible, children, className }: OverlayProps): import("react").JSX.Element | null;

package/dist/ui/layout/Overlay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+/** 浮层定位容器：只负责层级与定位，内容由 children 注入。 */
+export function Overlay({ visible = true, children, className }) {
+    if (!visible)
+        return null;
+    return _jsx(View, { className: ['mptk-overlay', className].filter(Boolean).join(' '), children: children });
+}

package/dist/ui/layout/Popup.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = Popup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@tarojs/components");
+const Mask_js_1 = require("./Mask.cjs");
+/** 弹出层：遮罩 + 定位面板，面板内容由 children 注入。 */
+function Popup({ open, position = 'bottom', children, onClose, className }) {
+    if (!open)
+        return null;
+    const names = ['mptk-popup__panel', `mptk-popup__panel--${position}`, className];
+    return ((0, jsx_runtime_1.jsxs)(components_1.View, { className: "mptk-popup", children: [(0, jsx_runtime_1.jsx)(Mask_js_1.Mask, { onClose: onClose }), (0, jsx_runtime_1.jsx)(components_1.View, { className: names.filter(Boolean).join(' '), children: children })] }));
+}

package/dist/ui/layout/Popup.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type PopupPosition = 'top' | 'center' | 'bottom';
+export interface PopupProps {
+    open: boolean;
+    position?: PopupPosition;
+    children?: ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+/** 弹出层：遮罩 + 定位面板，面板内容由 children 注入。 */
+export declare function Popup({ open, position, children, onClose, className }: PopupProps): import("react").JSX.Element | null;

package/dist/ui/layout/Popup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import { Mask } from './Mask.js';
+/** 弹出层：遮罩 + 定位面板，面板内容由 children 注入。 */
+export function Popup({ open, position = 'bottom', children, onClose, className }) {
+    if (!open)
+        return null;
+    const names = ['mptk-popup__panel', `mptk-popup__panel--${position}`, className];
+    return (_jsxs(View, { className: "mptk-popup", children: [_jsx(Mask, { onClose: onClose }), _jsx(View, { className: names.filter(Boolean).join(' '), children: children })] }));
+}

package/dist/ui/layout/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = exports.Mask = exports.Overlay = void 0;
+var Overlay_js_1 = require("./Overlay.cjs");
+Object.defineProperty(exports, "Overlay", { enumerable: true, get: function () { return Overlay_js_1.Overlay; } });
+var Mask_js_1 = require("./Mask.cjs");
+Object.defineProperty(exports, "Mask", { enumerable: true, get: function () { return Mask_js_1.Mask; } });
+var Popup_js_1 = require("./Popup.cjs");
+Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return Popup_js_1.Popup; } });

package/dist/ui/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { Overlay, type OverlayProps } from './Overlay.js';
+export { Mask, type MaskProps } from './Mask.js';
+export { Popup, type PopupPosition, type PopupProps } from './Popup.js';

package/dist/ui/layout/index.js

@@ -0,0 +1,3 @@
+export { Overlay } from './Overlay.js';
+export { Mask } from './Mask.js';
+export { Popup } from './Popup.js';

package/dist/ui/layout/style/index.css

@@ -0,0 +1,51 @@
+.mptk-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 900;
+}
+
+.mptk-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--mptk-fg);
+  opacity: 0.4;
+  z-index: 910;
+}
+
+.mptk-popup {
+  position: relative;
+  z-index: 920;
+}
+
+.mptk-popup__panel {
+  position: fixed;
+  left: 0;
+  right: 0;
+  background-color: var(--mptk-surface-1);
+  border-top-left-radius: var(--mptk-radius-lg);
+  border-top-right-radius: var(--mptk-radius-lg);
+  border-bottom-left-radius: var(--mptk-radius-lg);
+  border-bottom-right-radius: var(--mptk-radius-lg);
+  padding-top: var(--mptk-space-4);
+  padding-right: var(--mptk-space-4);
+  padding-bottom: var(--mptk-space-4);
+  padding-left: var(--mptk-space-4);
+}
+
+.mptk-popup__panel--top {
+  top: 0;
+}
+
+.mptk-popup__panel--bottom {
+  bottom: 0;
+}
+
+.mptk-popup__panel--center {
+  top: 50%;
+}

package/dist/ui/navigation/Drawer.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = Drawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@tarojs/components");
+/** 侧滑面板：不用 Skyline 独占手势 API，两端表现一致。 */
+function Drawer({ open, side = 'left', children, onClose, className }) {
+    if (!open)
+        return null;
+    const names = ['mptk-drawer__panel', `mptk-drawer__panel--${side}`, className];
+    return ((0, jsx_runtime_1.jsxs)(components_1.View, { className: "mptk-drawer", children: [(0, jsx_runtime_1.jsx)(components_1.View, { className: "mptk-drawer__mask", onClick: () => onClose?.() }), (0, jsx_runtime_1.jsx)(components_1.View, { className: names.filter(Boolean).join(' '), children: children })] }));
+}

package/dist/ui/navigation/Drawer.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type DrawerSide = 'left' | 'right';
+export interface DrawerProps {
+    open: boolean;
+    side?: DrawerSide;
+    children?: ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+/** 侧滑面板：不用 Skyline 独占手势 API，两端表现一致。 */
+export declare function Drawer({ open, side, children, onClose, className }: DrawerProps): import("react").JSX.Element | null;

package/dist/ui/navigation/Drawer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+/** 侧滑面板：不用 Skyline 独占手势 API，两端表现一致。 */
+export function Drawer({ open, side = 'left', children, onClose, className }) {
+    if (!open)
+        return null;
+    const names = ['mptk-drawer__panel', `mptk-drawer__panel--${side}`, className];
+    return (_jsxs(View, { className: "mptk-drawer", children: [_jsx(View, { className: "mptk-drawer__mask", onClick: () => onClose?.() }), _jsx(View, { className: names.filter(Boolean).join(' '), children: children })] }));
+}

package/dist/ui/navigation/Dropdown.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = Dropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@tarojs/components");
+/** 下拉面板：只给容器与关闭回调，下拉项内容由 children 注入。 */
+function Dropdown({ open, children, onClose, className }) {
+    if (!open)
+        return null;
+    const names = ['mptk-dropdown__panel', className];
+    return ((0, jsx_runtime_1.jsxs)(components_1.View, { className: "mptk-dropdown", children: [(0, jsx_runtime_1.jsx)(components_1.View, { className: "mptk-dropdown__mask", onClick: () => onClose?.() }), (0, jsx_runtime_1.jsx)(components_1.View, { className: names.filter(Boolean).join(' '), children: children })] }));
+}

package/dist/ui/navigation/Dropdown.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface DropdownProps {
+    open: boolean;
+    children?: ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+/** 下拉面板：只给容器与关闭回调，下拉项内容由 children 注入。 */
+export declare function Dropdown({ open, children, onClose, className }: DropdownProps): import("react").JSX.Element | null;

package/dist/ui/navigation/Dropdown.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+/** 下拉面板：只给容器与关闭回调，下拉项内容由 children 注入。 */
+export function Dropdown({ open, children, onClose, className }) {
+    if (!open)
+        return null;
+    const names = ['mptk-dropdown__panel', className];
+    return (_jsxs(View, { className: "mptk-dropdown", children: [_jsx(View, { className: "mptk-dropdown__mask", onClick: () => onClose?.() }), _jsx(View, { className: names.filter(Boolean).join(' '), children: children })] }));
+}

package/dist/ui/navigation/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = exports.Drawer = void 0;
+var Drawer_js_1 = require("./Drawer.cjs");
+Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_js_1.Drawer; } });
+var Dropdown_js_1 = require("./Dropdown.cjs");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_js_1.Dropdown; } });

package/dist/ui/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer, type DrawerSide, type DrawerProps } from './Drawer.js';
+export { Dropdown, type DropdownProps } from './Dropdown.js';

package/dist/ui/navigation/index.js

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer.js';
+export { Dropdown } from './Dropdown.js';