clxx 2.1.7 → 3.0.0

package/build/ScrollView/index.js

@@ -11,30 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollView = ScrollView;
+exports.ScrollView = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const Indicator_1 = require("../Indicator");
-const Row_1 = require("../Flex/Row");
 const style_1 = require("./style");
-function ScrollView(props) {
-    const { children, height, reachTopThreshold = 50, onReachTop, reachBottomThreshold = 50, onReachBottom, showLoading = true, loadingContent, onScroll, scrollThrottle = 16, containerStyle, wrapperStyle, loadingStyle } = props, attrs = __rest(props, ["children", "height", "reachTopThreshold", "onReachTop", "reachBottomThreshold", "onReachBottom", "showLoading", "loadingContent", "onScroll", "scrollThrottle", "containerStyle", "wrapperStyle", "loadingStyle"]);
-    // 容器高度
-    const heightStyle = {};
-    if (height) {
-        heightStyle.height = height;
-    }
-    // 滚动容器
-    const container = (0, react_1.useRef)(null);
-    // 当前滚动到顶部的距离
-    const lastScrollTop = (0, react_1.useRef)(0);
-    // 防止重复触发的标记
-    const hasReachedTop = (0, react_1.useRef)(false);
-    const hasReachedBottom = (0, react_1.useRef)(false);
-    // 节流控制
-    const throttleTimer = (0, react_1.useRef)(undefined);
-    const lastCallTime = (0, react_1.useRef)(0);
-    // 使用 ref 保存所有滚动处理需要的 props，彻底消除陈旧闭包
+exports.ScrollView = (0, react_1.forwardRef)(function ScrollView(props, ref) {
+    const { children, height, reachTopThreshold = 50, onReachTop, reachBottomThreshold = 50, onReachBottom, showLoading = true, loadingContent, onScroll, containerStyle, wrapperStyle, loadingStyle, style: userStyle } = props, attrs = __rest(props, ["children", "height", "reachTopThreshold", "onReachTop", "reachBottomThreshold", "onReachBottom", "showLoading", "loadingContent", "onScroll", "containerStyle", "wrapperStyle", "loadingStyle", "style"]);
+    // 滚动容器与内容包装层
+    const containerRef = (0, react_1.useRef)(null);
+    const wrapperRef = (0, react_1.useRef)(null);
+    // 用 ref 持有最新的回调与阈值，处理函数引用稳定，避免 listener 反复绑定 / 闭包过期
     const propsRef = (0, react_1.useRef)({
         onScroll,
         onReachTop,
@@ -49,53 +35,37 @@ function ScrollView(props) {
         reachTopThreshold,
         reachBottomThreshold,
     };
-    // container 是否有滚动条
-    const [hasScrollBar, setHasScrollBar] = (0, react_1.useState)(false);
-    // 检查是否有滚动条
-    const checkScrollBar = (0, react_1.useCallback)(() => {
-        if (container.current) {
-            const hasScroll = container.current.scrollHeight > container.current.clientHeight;
-            setHasScrollBar(hasScroll);
-        }
-    }, []);
-    // 使用 ResizeObserver 监听内容高度变化
-    (0, react_1.useLayoutEffect)(() => {
-        const containerEl = container.current;
-        if (!containerEl)
-            return;
-        // 初始检查
-        checkScrollBar();
-        // 使用 ResizeObserver 监听尺寸变化
-        const resizeObserver = new ResizeObserver(() => {
-            checkScrollBar();
-        });
-        // 观察容器和内容
-        resizeObserver.observe(containerEl);
-        if (containerEl.firstElementChild) {
-            resizeObserver.observe(containerEl.firstElementChild);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [checkScrollBar]);
-    // 核心滚动处理逻辑
-    // 所有外部值从 ref 读取，deps 为空，引用永远稳定，不存在闭包过期问题
+    // 上次 scrollTop（推断方向）
+    const lastScrollTopRef = (0, react_1.useRef)(0);
+    // 上次方向；delta==0 时沿用，避免水平滚动 / ResizeObserver / 浮点抖动误判
+    const lastDirectionRef = (0, react_1.useRef)("downward");
+    // 阈值边界防抖：避免在阈值带内反复触发
+    const reachedTopRef = (0, react_1.useRef)(false);
+    const reachedBottomRef = (0, react_1.useRef)(false);
+    // RAF 节流相关
+    const rafIdRef = (0, react_1.useRef)(null);
+    const pendingEventRef = (0, react_1.useRef)(null);
+    // 是否真的可滚动；用于决定是否显示底部 loading
+    const [scrollable, setScrollable] = (0, react_1.useState)(false);
+    // 真正处理一次滚动（始终从 DOM 读最新位置，避免依赖陈旧 event）
     const processScroll = (0, react_1.useCallback)((rawEvent) => {
-        const box = container.current;
+        const box = containerRef.current;
         if (!box)
             return;
         const { onScroll, onReachTop, onReachBottom, reachTopThreshold, reachBottomThreshold, } = propsRef.current;
         const scrollTop = box.scrollTop;
         const contentHeight = box.scrollHeight;
-        // clientHeight 即可视区域高度（不含 border），无需 Math.min(clientHeight, offsetHeight)
         const containerHeight = box.clientHeight;
-        const maxScroll = contentHeight - containerHeight;
-        // 防止零位移时误判方向（如内容变化触发的 scroll 事件）
-        if (scrollTop === lastScrollTop.current && lastScrollTop.current !== 0) {
-            return;
-        }
-        // scrollTop 增大 => 向下滚动；相等（初始 0→0）视为向下
-        const direction = scrollTop >= lastScrollTop.current ? "downward" : "upward";
+        const maxScroll = Math.max(0, contentHeight - containerHeight);
+        const last = lastScrollTopRef.current;
+        const delta = scrollTop - last;
+        // 0.5 容差屏蔽 hi-DPI 浮点抖动；|delta|<=0.5 视为无方向变化，沿用上次
+        let direction = lastDirectionRef.current;
+        if (delta < -0.5)
+            direction = "upward";
+        else if (delta > 0.5)
+            direction = "downward";
+        lastDirectionRef.current = direction;
         const event = {
             containerHeight,
             contentHeight,
@@ -105,81 +75,125 @@ function ScrollView(props) {
             rawEvent,
         };
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
-        // 触顶逻辑（防止重复触发）
+        // 触顶：仅在向上滚动且进入阈值带时触发一次
         if (direction === "upward" && scrollTop <= reachTopThreshold) {
-            if (!hasReachedTop.current) {
-                hasReachedTop.current = true;
-                hasReachedBottom.current = false;
+            if (!reachedTopRef.current) {
+                reachedTopRef.current = true;
+                reachedBottomRef.current = false;
                 onReachTop === null || onReachTop === void 0 ? void 0 : onReachTop(event);
             }
         }
         else if (scrollTop > reachTopThreshold) {
-            hasReachedTop.current = false;
+            // 离开阈值带后允许下次再次触发
+            reachedTopRef.current = false;
         }
-        // 触底逻辑（防止重复触发）
+        // 触底：仅在确实可滚动且向下滚动进入阈值带时触发一次
         if (direction === "downward" &&
             maxScroll > 0 &&
             scrollTop >= maxScroll - reachBottomThreshold) {
-            if (!hasReachedBottom.current) {
-                hasReachedBottom.current = true;
-                hasReachedTop.current = false;
+            if (!reachedBottomRef.current) {
+                reachedBottomRef.current = true;
+                reachedTopRef.current = false;
                 onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom(event);
             }
         }
         else if (scrollTop < maxScroll - reachBottomThreshold) {
-            hasReachedBottom.current = false;
+            reachedBottomRef.current = false;
         }
-        lastScrollTop.current = scrollTop;
+        lastScrollTopRef.current = scrollTop;
     }, []);
-    // 节流滚动回调（leading + trailing）
-    const scrollCallback = (0, react_1.useCallback)((rawEvent) => {
-        // 不节流时直接执行
-        if (scrollThrottle <= 0) {
-            processScroll(rawEvent);
+    // RAF 节流：连续滚动期间一帧只处理一次，最后一次 scroll 也会被处理（pending 会触发）
+    const scheduleProcess = (0, react_1.useCallback)((rawEvent) => {
+        pendingEventRef.current = rawEvent;
+        if (rafIdRef.current !== null)
             return;
-        }
-        const now = Date.now();
-        const elapsed = now - lastCallTime.current;
-        if (elapsed >= scrollThrottle) {
-            // 前沿立即执行
-            lastCallTime.current = now;
-            processScroll(rawEvent);
-            // 消除挂起的尾部定时器
-            if (throttleTimer.current !== undefined) {
-                clearTimeout(throttleTimer.current);
-                throttleTimer.current = undefined;
-            }
-        }
-        else {
-            // 尾部调用：按剩余时间调度，保证滚动停止后最终状态被处理
-            if (throttleTimer.current !== undefined) {
-                clearTimeout(throttleTimer.current);
-            }
-            throttleTimer.current = window.setTimeout(() => {
-                lastCallTime.current = Date.now();
-                throttleTimer.current = undefined;
-                // 尾部调用不传 rawEvent（已过期），processScroll 从 DOM 读取实时位置
-                processScroll();
-            }, scrollThrottle - elapsed);
-        }
-    }, [scrollThrottle, processScroll]);
-    // 清理节流定时器
+        rafIdRef.current = requestAnimationFrame(() => {
+            rafIdRef.current = null;
+            const ev = pendingEventRef.current;
+            pendingEventRef.current = null;
+            processScroll(ev !== null && ev !== void 0 ? ev : undefined);
+        });
+    }, [processScroll]);
+    // 直接绑定原生 scroll 事件（passive: true），避免 React 合成事件中介
     (0, react_1.useEffect)(() => {
+        const box = containerRef.current;
+        if (!box)
+            return;
+        // 用 DOM 当前位置初始化 lastScrollTop，兼容路由切回 / SSR 恢复滚动位置
+        lastScrollTopRef.current = box.scrollTop;
+        const handler = (e) => scheduleProcess(e);
+        box.addEventListener("scroll", handler, { passive: true });
         return () => {
-            if (throttleTimer.current !== undefined) {
-                clearTimeout(throttleTimer.current);
+            box.removeEventListener("scroll", handler);
+            if (rafIdRef.current !== null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
             }
+            pendingEventRef.current = null;
         };
+    }, [scheduleProcess]);
+    // 监听容器与内容尺寸变化，自动维护 scrollable
+    (0, react_1.useLayoutEffect)(() => {
+        const box = containerRef.current;
+        const wrap = wrapperRef.current;
+        if (!box || !wrap)
+            return;
+        const update = () => {
+            // +1 容差：屏蔽 hi-DPI 下 scrollHeight = clientHeight + 0.5 之类的误判
+            const next = box.scrollHeight - box.clientHeight > 1;
+            setScrollable((prev) => (prev === next ? prev : next));
+        };
+        update();
+        // 旧浏览器无 ResizeObserver 时降级：仅初始检测一次
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(update);
+        ro.observe(box);
+        ro.observe(wrap);
+        return () => ro.disconnect();
     }, []);
-    // loading 内容
-    let showLoadingContent = null;
-    if (showLoading) {
-        if (!loadingContent) {
-            showLoadingContent = ((0, jsx_runtime_1.jsxs)(Row_1.RowCenter, { css: [style_1.style.loading, loadingStyle], children: [(0, jsx_runtime_1.jsx)(Indicator_1.Indicator, { barColor: "#333", barCount: 12 }), (0, jsx_runtime_1.jsx)("p", { children: "\u6570\u636E\u52A0\u8F7D\u4E2D..." })] }));
-        }
-        else {
-            showLoadingContent = loadingContent;
-        }
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: [style_1.style.container, heightStyle, containerStyle], onScroll: scrollCallback, ref: container }, attrs, { children: [(0, jsx_runtime_1.jsx)("div", { css: wrapperStyle, children: children }), hasScrollBar && showLoadingContent] })));
-}
+    // 暴露命令式 API
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        getElement: () => containerRef.current,
+        scrollTo: ({ top, behavior = "auto" }) => {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top, behavior });
+        },
+        scrollToTop: (behavior = "auto") => {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior });
+        },
+        scrollToBottom: (behavior = "auto") => {
+            const box = containerRef.current;
+            if (!box)
+                return;
+            box.scrollTo({ top: box.scrollHeight, behavior });
+        },
+        scrollToElement: (target, options = {}) => {
+            var _a, _b;
+            const box = containerRef.current;
+            if (!box)
+                return;
+            const el = typeof target === "string"
+                ? box.querySelector(target)
+                : target;
+            if (!el || !box.contains(el))
+                return;
+            // 用 getBoundingClientRect 计算偏移，兼容任意定位上下文
+            const top = el.getBoundingClientRect().top -
+                box.getBoundingClientRect().top +
+                box.scrollTop +
+                ((_a = options.offset) !== null && _a !== void 0 ? _a : 0);
+            box.scrollTo({ top, behavior: (_b = options.behavior) !== null && _b !== void 0 ? _b : "auto" });
+        },
+    }), []);
+    // 合并 height 与外部传入 style；height 优先级高于 userStyle.height
+    const mergedStyle = (0, react_1.useMemo)(() => {
+        if (height === undefined)
+            return userStyle;
+        return Object.assign(Object.assign({}, userStyle), { height });
+    }, [height, userStyle]);
+    // 默认 loading：iOS 风三点跳动
+    const defaultLoading = ((0, jsx_runtime_1.jsxs)("div", { css: [style_1.style.loading, loadingStyle], children: [(0, jsx_runtime_1.jsx)("span", { css: style_1.style.loadingDot }), (0, jsx_runtime_1.jsx)("span", { css: style_1.style.loadingDot }), (0, jsx_runtime_1.jsx)("span", { css: style_1.style.loadingDot })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, attrs, { css: [style_1.style.container, containerStyle], style: mergedStyle, ref: containerRef, children: [(0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, css: wrapperStyle, children: children }), showLoading && scrollable && (loadingContent !== null && loadingContent !== void 0 ? loadingContent : defaultLoading)] })));
+});

package/build/ScrollView/style.d.ts

@@ -1,2 +1,2 @@
-import { Interpolation, Theme } from "@emotion/react";
+import type { Interpolation, Theme } from "@emotion/react";
 export declare const style: Record<string, Interpolation<Theme>>;

package/build/ScrollView/style.js

@@ -1,32 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = void 0;
+const react_1 = require("@emotion/react");
+// 模仿 iOS「正在输入」气泡的三点呼吸节奏
+const dotPulse = (0, react_1.keyframes) `
+  0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.35;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
 exports.style = {
     container: {
         overflow: "auto",
         height: "100%",
         WebkitOverflowScrolling: "touch",
     },
-    loading: [
-        {
-            paddingTop: '.15rem',
-            paddingBottom: '.15rem',
-        },
-        {
-            "> div": {
-                width: '.3rem',
-                height: '.3rem',
-            },
-            "> p": [
-                {
-                    color: "#666",
-                    lineHeight: 1,
-                },
-                {
-                    marginLeft: '.16rem',
-                    fontSize: '.24rem',
-                },
-            ],
-        },
-    ],
+    loading: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: ".12rem",
+        padding: ".24rem 0",
+    },
+    loadingDot: (0, react_1.css) `
+    width: 0.12rem;
+    height: 0.12rem;
+    border-radius: 50%;
+    background: #c7c7cc;
+    animation: ${dotPulse} 1.2s ease-in-out infinite both;
+
+    &:nth-of-type(1) {
+      animation-delay: -0.32s;
+    }
+    &:nth-of-type(2) {
+      animation-delay: -0.16s;
+    }
+  `,
 };

package/build/Toast/Toast.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { Interpolation, Theme } from "@emotion/react";
 import React from "react";
 export interface ToastProps extends Omit<React.HTMLProps<HTMLDivElement>, "content"> {

package/build/Toast/Toast.js

@@ -68,7 +68,7 @@ function Toast(props) {
         showContent = (0, jsx_runtime_1.jsx)("div", { css: [middleStyle, contentStyle], children: content });
     }
     else {
-        showContent = ((0, jsx_runtime_1.jsx)("p", { css: [style_1.style.content(radius), middleStyle, contentStyle], children: content }));
+        showContent = ((0, jsx_runtime_1.jsx)("p", { css: [style_1.style.content, middleStyle, contentStyle], style: { borderRadius: radius ? radius / 100 + "rem" : 0 }, children: content }));
     }
     // toast消失动画结束触发
     const animationEnd = (event) => {
@@ -77,15 +77,17 @@ function Toast(props) {
             onHide === null || onHide === void 0 ? void 0 : onHide();
         }
     };
+    // 位置偏移：所以 top/bottom 作为 inline style、middle 走常量 css
     let positionStyle;
+    let positionInline;
     if (position === "top") {
-        positionStyle = style_1.style.top(offsetTop);
+        positionInline = { top: offsetTop / 100 + "rem" };
     }
     else if (position === "bottom") {
-        positionStyle = style_1.style.bottom(offsetBottom);
+        positionInline = { bottom: offsetBottom / 100 + "rem" };
     }
     else {
         positionStyle = style_1.style.middle;
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: [style_1.style.container(), positionStyle, animation, containerStyle], onAnimationEnd: animationEnd }, attributes, { children: showContent })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attributes, { css: [style_1.style.container, positionStyle, animation, containerStyle], style: positionInline, onAnimationEnd: animationEnd, children: showContent })));
 }

package/build/Toast/style.d.ts

@@ -37,21 +37,14 @@ export declare const bottomHideAnimation: {
 } & string;
 /**
  * 根据位置和类型获取动画
- * @param position
- * @param type
- * @returns
  */
 export declare function getAnimation(position: "top" | "middle" | "bottom", type: "show" | "hide"): {
     keyframes: Keyframes;
     animation: import("@emotion/react").SerializedStyles;
 };
 export declare const style: {
-    container(): import("@emotion/react").SerializedStyles;
-    top(offset: number): import("@emotion/react").SerializedStyles;
+    container: import("@emotion/react").SerializedStyles;
     middle: import("@emotion/react").SerializedStyles;
-    bottom(offset: number): import("@emotion/react").SerializedStyles;
-    content: (radius?: number) => import("@emotion/react").SerializedStyles;
-    contentMiddle: {
-        transform: string;
-    };
+    content: import("@emotion/react").SerializedStyles;
+    contentMiddle: import("@emotion/react").SerializedStyles;
 };

package/build/Toast/style.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.bottomHideAnimation = exports.bottomShowAnimation = exports.topHideAnimation = exports.topShowAnimation = exports.middleHideAnimation = exports.middleShowAnimation = void 0;
 exports.getAnimation = getAnimation;
 const react_1 = require("@emotion/react");
+const theme_1 = require("../utils/theme");
+const easing = "cubic-bezier(.22,.61,.36,1)";
 exports.middleShowAnimation = (0, react_1.keyframes) `
   from {
     opacity: 0;
-    transform: translateX(-50%) scale(0.9);
+    transform: translateX(-50%) scale(0.92);
   }
   to {
     opacity: 1;
@@ -20,13 +22,13 @@ exports.middleHideAnimation = (0, react_1.keyframes) `
   }
   to {
     opacity: 0;
-    transform: translateX(-50%) scale(0.9);
+    transform: translateX(-50%) scale(0.92);
   }
 `;
 exports.topShowAnimation = (0, react_1.keyframes) `
   from {
     opacity: 0;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, -120%);
   }
   to {
     opacity: 1;
@@ -40,13 +42,13 @@ exports.topHideAnimation = (0, react_1.keyframes) `
   }
   to {
     opacity: 0;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, -120%);
   }
 `;
 exports.bottomShowAnimation = (0, react_1.keyframes) `
   from {
     opacity: 0;
-    transform: translate(-50%, 100%);
+    transform: translate(-50%, 120%);
   }
   to {
     opacity: 1;
@@ -60,14 +62,11 @@ exports.bottomHideAnimation = (0, react_1.keyframes) `
   }
   to {
     opacity: 0;
-    transform: translate(-50%, 100%);
+    transform: translate(-50%, 120%);
   }
 `;
 /**
  * 根据位置和类型获取动画
- * @param position
- * @param type
- * @returns
  */
 function getAnimation(position, type) {
     const animation = {
@@ -85,46 +84,43 @@ function getAnimation(position, type) {
     return {
         keyframes,
         animation: (0, react_1.css)({
-            animation: `${keyframes} 300ms ease`,
+            animation: `${keyframes} 260ms ${easing}`,
         }),
     };
 }
 exports.style = {
-    container() {
-        return (0, react_1.css)({
-            position: "fixed",
-            left: "50%",
-            transform: "translateX(-50%)",
-            zIndex: 9999,
-            maxWidth: '6rem',
-        });
-    },
-    top(offset) {
-        return (0, react_1.css)({ top: offset / 100 + 'rem' });
-    },
+    // 容器静态样式：位置偏移由 container 提供，具体 top/bottom 偏移走 inline style。
+    container: (0, react_1.css)({
+        position: "fixed",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 9999,
+        maxWidth: "6rem",
+        pointerEvents: "none",
+        fontFamily: theme_1.fontStack,
+        WebkitFontSmoothing: "antialiased",
+        MozOsxFontSmoothing: "grayscale",
+    }),
     middle: (0, react_1.css)({ top: "50%" }),
-    bottom(offset) {
-        return (0, react_1.css)({ bottom: offset / 100 + 'rem' });
-    },
-    content: (radius) => {
-        return (0, react_1.css)({
-            position: "relative",
-            backgroundColor: "rgba(0, 0, 0, .8)",
-            color: "#fff",
-            margin: 0,
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            lineHeight: 1,
-            fontSize: '.26rem',
-            paddingLeft: '.3rem',
-            paddingRight: '.3rem',
-            paddingTop: '.4rem',
-            paddingBottom: '.4rem',
-            borderRadius: radius ? radius / 100 + 'rem' : 0,
-        });
-    },
-    contentMiddle: {
+    // content 中与 radius 无关的部分作为常量，radius 走 inline style
+    content: (0, react_1.css)({
+        position: "relative",
+        backgroundColor: "rgba(0,0,0,.78)",
+        color: "#ffffff",
+        margin: 0,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        lineHeight: 1.5,
+        fontSize: ".28rem",
+        fontWeight: 400,
+        letterSpacing: ".01rem",
+        textAlign: "center",
+        padding: ".2rem .32rem",
+        boxShadow: "0 .12rem .32rem rgba(0,0,0,.18)",
+        backdropFilter: "blur(20px) saturate(160%)",
+        WebkitBackdropFilter: "blur(20px) saturate(160%)",
+    }),
+    contentMiddle: (0, react_1.css)({
         transform: `translateY(-50%)`,
-    },
+    }),
 };

package/build/index.d.ts

@@ -32,5 +32,8 @@ export { SafeArea } from './SafeArea';
 export { AutoGrid } from './AutoGrid';
 export { showAlert } from './Alert';
 export { ScrollView } from './ScrollView';
+export type { ScrollViewHandle, ScrollViewProps, ScrollEvent } from './ScrollView';
 export { CarouselNotice } from './CarouselNotice';
 export { CitySelect, showCitySelect } from './CitySelect';
+export { DatePicker, showDatePicker } from './DatePicker';
+export { RegionPicker, showRegionPicker } from './RegionPicker';

package/build/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.showUniqToast = exports.showToast = exports.Overlay = exports.Countdowner = exports.ColStart = exports.ColEvenly = exports.ColEnd = exports.ColCenter = exports.ColBetween = exports.ColAround = exports.Col = exports.RowStart = exports.RowEvenly = exports.RowEnd = exports.RowCenter = exports.RowBetween = exports.RowAround = exports.Row = exports.FlexItem = exports.Flex = exports.Container = exports.Ago = exports.useViewport = exports.useWindowResize = exports.useUpdate = exports.useTick = exports.useInterval = exports.createPortalDOM = exports.getHistory = exports.history = exports.createApp = exports.splitValue = exports.normalizeUnit = exports.waitUntil = exports.waitFor = exports.is = exports.defaultScroll = exports.Countdown = exports.calendarTable = exports.registerHostAlias = exports.buildUrlByOption = exports.sendRequest = exports.sugarSend = exports.sendJSON = exports.POST = exports.GET = exports.ago = exports.uniqKey = exports.jsonp = exports.tick = void 0;
-exports.showCitySelect = exports.CitySelect = exports.CarouselNotice = exports.ScrollView = exports.showAlert = exports.AutoGrid = exports.SafeArea = exports.showLoadingAtLeast = exports.showLoading = exports.Indicator = exports.Clickable = exports.showDialog = void 0;
+exports.showRegionPicker = exports.RegionPicker = exports.showDatePicker = exports.DatePicker = exports.showCitySelect = exports.CitySelect = exports.CarouselNotice = exports.ScrollView = exports.showAlert = exports.AutoGrid = exports.SafeArea = exports.showLoadingAtLeast = exports.showLoading = exports.Indicator = exports.Clickable = exports.showDialog = void 0;
 var tick_1 = require("./utils/tick");
 Object.defineProperty(exports, "tick", { enumerable: true, get: function () { return tick_1.tick; } });
 var jsonp_1 = require("./utils/jsonp");
@@ -100,3 +100,9 @@ Object.defineProperty(exports, "CarouselNotice", { enumerable: true, get: functi
 var CitySelect_1 = require("./CitySelect");
 Object.defineProperty(exports, "CitySelect", { enumerable: true, get: function () { return CitySelect_1.CitySelect; } });
 Object.defineProperty(exports, "showCitySelect", { enumerable: true, get: function () { return CitySelect_1.showCitySelect; } });
+var DatePicker_1 = require("./DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
+Object.defineProperty(exports, "showDatePicker", { enumerable: true, get: function () { return DatePicker_1.showDatePicker; } });
+var RegionPicker_1 = require("./RegionPicker");
+Object.defineProperty(exports, "RegionPicker", { enumerable: true, get: function () { return RegionPicker_1.RegionPicker; } });
+Object.defineProperty(exports, "showRegionPicker", { enumerable: true, get: function () { return RegionPicker_1.showRegionPicker; } });

package/build/utils/color.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 将 #rrggbb 颜色按比例变暗；amount 取值 0~1
+ * 例：darken("#2f7dff", 0.15) → #2a6cd9（用于派生交互态色）
+ */
+export declare function darken(hex: string, amount: number): string;

package/build/utils/color.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darken = darken;
+/**
+ * 将 #rrggbb 颜色按比例变暗；amount 取值 0~1
+ * 例：darken("#2f7dff", 0.15) → #2a6cd9（用于派生交互态色）
+ */
+function darken(hex, amount) {
+    const m = hex.replace("#", "");
+    if (m.length !== 6)
+        return hex;
+    const r = parseInt(m.slice(0, 2), 16);
+    const g = parseInt(m.slice(2, 4), 16);
+    const b = parseInt(m.slice(4, 6), 16);
+    const factor = (v) => Math.max(0, Math.min(255, Math.round(v * (1 - amount))));
+    const toHex = (v) => factor(v).toString(16).padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}