clxx 2.1.7 → 3.0.0

package/build/Container/index.js

@@ -1,114 +1,119 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = Container;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
-const react_2 = __importStar(require("react"));
+const react_2 = require("react");
 const useWindowResize_1 = require("../Effect/useWindowResize");
 const useViewport_1 = require("../Effect/useViewport");
+const isBrowser = typeof window !== "undefined";
+// SSR 时 useLayoutEffect 会 warn，统一降级
+const useIsomorphicLayoutEffect = isBrowser ? react_2.useLayoutEffect : react_2.useEffect;
+// 取当前视口宽度，可选 maxWidth 兑底（0 / Infinity 表示不限制）
+function getViewportWidth(maxWidth) {
+    if (!isBrowser)
+        return 0;
+    const w = window.innerWidth || document.documentElement.clientWidth || 0;
+    if (!maxWidth || !isFinite(maxWidth))
+        return w;
+    return Math.min(w, maxWidth);
+}
 /**
- * 自适应容器
- * @param props
+ * 自适应容器：所有使用本库的工程都需在根节点放置该组件，
+ * 否则各组件中的 rem 单位将无法自动跟随设备宽度缩放。
+ *
+ * 实现要点：
+ *  - <Global> 通过 useInsertionEffect 早于 useLayoutEffect 注入样式，
+ *    所以首次 layout 阶段所有 rem 已使用正确 fontSize，无需阻塞 children
+ *  - 浏览器字体缩放（用户系统调大字号）首挂载同步检测一次，scaleFactor 修正
+ *  - resize 走 rAF 节流，桌面拖拽 / 模拟器切设备不会反复 setState
+ *  - SSR 安全：所有 window 访问加 isBrowser 守卫
  */
 function Container(props) {
-    const { designWidth = 750, globalStyle, children } = props;
-    // 计算理论根字体大小（未经浏览器缩放修正）
-    const calculateFontSize = (0, react_2.useCallback)((width) => {
-        return (width * 100) / designWidth;
-    }, [designWidth]);
-    // 理论基准字体大小（跟随窗口尺寸变化）
-    const [rawFontSize, setRawFontSize] = (0, react_2.useState)(() => calculateFontSize(window.innerWidth));
-    // 浏览器字体缩放因子（>1 表示用户放大了系统字体，<1 表示缩小）
-    // 独立存储，使得 resize 后缩放修正依然生效
+    const { designWidth = 750, maxWidth = 750, globalStyle, children } = props;
+    // 当前视口宽度
+    const [viewportWidth, setViewportWidth] = (0, react_2.useState)(() => getViewportWidth(maxWidth));
+    // 浏览器字体缩放因子（>1 用户放大系统字体），首挂载探测一次
     const [scaleFactor, setScaleFactor] = (0, react_2.useState)(1);
-    // 是否已完成字体缩放检测
-    const [isInitialized, setIsInitialized] = (0, react_2.useState)(false);
-    // 修正后的字体大小：统一对所有字体计算应用缩放修正
-    const correctedFontSize = (0, react_2.useMemo)(() => scaleFactor === 1
-        ? rawFontSize
-        : Math.round((rawFontSize / scaleFactor) * 10) / 10, [rawFontSize, scaleFactor]);
-    // 字体缩放检测
-    // Emotion 的 <Global> 通过 useInsertionEffect 注入样式，早于 useLayoutEffect
-    // 因此 useLayoutEffect 内 getComputedStyle 可正确读取已注入的字体大小
-    // 检测和修正均在浏览器绘制前同步完成，避免闪烁
-    (0, react_2.useLayoutEffect)(() => {
-        // 缩放因子在页面生命周期内不变，只需检测一次
-        if (isInitialized)
+    // 理论 fontSize（未修正）
+    const rawFontSize = (0, react_2.useMemo)(() => (viewportWidth * 100) / designWidth, [viewportWidth, designWidth]);
+    // 最终 fontSize：缩放修正 + 1 位小数，避免浮点抖动
+    const fontSize = (0, react_2.useMemo)(() => Math.round((scaleFactor === 1 ? rawFontSize : rawFontSize / scaleFactor) * 10) / 10, [rawFontSize, scaleFactor]);
+    // 浏览器字体缩放检测：仅首挂载执行一次，避免 setState 触发循环
+    const detectedRef = (0, react_2.useRef)(false);
+    useIsomorphicLayoutEffect(() => {
+        if (detectedRef.current || !isBrowser)
             return;
-        const computedSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-        // 如果计算出的字体大小与期望不符（说明被浏览器字体设置影响了）
-        // 容差 1px，避免浮点精度导致误判
-        if (computedSize > 0 && Math.abs(computedSize - rawFontSize) > 1) {
-            // 记录缩放因子，后续所有字体计算（包括 resize）都会自动应用
-            setScaleFactor(computedSize / rawFontSize);
+        detectedRef.current = true;
+        const computed = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+        // 容差 1px 屏蔽浮点误差
+        if (computed > 0 && Math.abs(computed - rawFontSize) > 1) {
+            setScaleFactor(computed / rawFontSize);
         }
-        setIsInitialized(true);
-    }, [rawFontSize, isInitialized]);
-    // 窗口大小变化时更新理论字体大小
-    // correctedFontSize 通过 useMemo 自动应用 scaleFactor 修正
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // maxWidth 变更时重算 viewportWidth
+    (0, react_2.useEffect)(() => {
+        setViewportWidth((prev) => {
+            const next = getViewportWidth(maxWidth);
+            return prev === next ? prev : next;
+        });
+    }, [maxWidth]);
+    // resize：rAF 节流；桌面拖动窗口、DevTools 切换设备模拟时也只每帧一次
+    const rafRef = (0, react_2.useRef)(null);
     (0, useWindowResize_1.useWindowResize)(() => {
-        setRawFontSize(calculateFontSize(window.innerWidth));
+        if (!isBrowser || rafRef.current !== null)
+            return;
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            const next = getViewportWidth(maxWidth);
+            setViewportWidth((prev) => (prev === next ? prev : next));
+        });
     });
-    // 设置 viewport meta
+    // 组件卸载清理 pending rAF
+    (0, react_2.useEffect)(() => {
+        return () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, []);
+    // viewport meta
     (0, useViewport_1.useViewport)();
     // 激活 iOS 上的 :active 伪类
     (0, react_2.useEffect)(() => {
+        if (!isBrowser)
+            return;
         const noop = () => { };
         document.body.addEventListener("touchstart", noop, { passive: true });
         return () => {
             document.body.removeEventListener("touchstart", noop);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: [
-                    {
-                        "*": {
-                            boxSizing: "border-box",
-                        },
-                        html: {
-                            WebkitTapHighlightColor: "transparent",
-                            WebkitOverflowScrolling: "touch",
-                            WebkitTextSizeAdjust: "100%",
-                            fontSize: `${correctedFontSize}px`,
-                            touchAction: "manipulation",
-                        },
-                        body: {
-                            fontSize: "16px",
-                            margin: "0 auto",
-                        },
-                    },
-                    globalStyle,
-                ] }), isInitialized ? children : null] }));
+    // 全局样式：fontSize 写入 html，rem 自动跟随
+    // body 以 maxWidth 居中，保证 PC 端上页面不超过设计宽度，两侧留白
+    // CSS 变量 --clxx-max-width 供 Overlay/Fixed 等使用 fixed 定位的组件读取
+    // 从而把弹窗 / 遮罩限制在视口内（fixed 默认参考浏览器窗口，无法继承 body 宽度）
+    const hasMaxWidth = !!maxWidth && isFinite(maxWidth);
+    const globalStyles = (0, react_2.useMemo)(() => [
+        {
+            ":root": {
+                "--clxx-max-width": hasMaxWidth ? `${maxWidth}px` : "100%",
+            },
+            "*": {
+                boxSizing: "border-box",
+            },
+            html: {
+                WebkitTapHighlightColor: "transparent",
+                WebkitOverflowScrolling: "touch",
+                WebkitTextSizeAdjust: "100%",
+                fontSize: `${fontSize}px`,
+                touchAction: "manipulation",
+            },
+            body: Object.assign({ fontSize: "16px", margin: "0 auto" }, (hasMaxWidth ? { maxWidth: `${maxWidth}px` } : null)),
+        },
+        globalStyle,
+    ], [fontSize, maxWidth, hasMaxWidth, globalStyle]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: globalStyles }), children] }));
 }

package/build/Countdowner/index.js

@@ -50,12 +50,14 @@ const react_1 = __importStar(require("react"));
 const Countdown_1 = require("../utils/Countdown");
 const Row_1 = require("../Flex/Row");
 function Countdowner(props) {
-    let { remain = 0, separator = ':', format = 'his', onUpdate, onEnd, separatorStyle, containerStyle, numberStyle, renderNumber, renderSeparator } = props, extra = __rest(props, ["remain", "separator", "format", "onUpdate", "onEnd", "separatorStyle", "containerStyle", "numberStyle", "renderNumber", "renderSeparator"]);
+    const { remain = 0, separator = ':', format = 'his', onUpdate, onEnd, separatorStyle, containerStyle, numberStyle, renderNumber, renderSeparator } = props, extra = __rest(props, ["remain", "separator", "format", "onUpdate", "onEnd", "separatorStyle", "containerStyle", "numberStyle", "renderNumber", "renderSeparator"]);
     const [value, setValue] = (0, react_1.useState)(null);
     // 使用 ref 保存最新的回调，避免频繁重建倒计时实例
     const callbacksRef = react_1.default.useRef({ onUpdate, onEnd });
     callbacksRef.current = { onUpdate, onEnd };
-    let content = [];
+    // content 每秒因 value 变化必然重建；这里没有 emotion 序列化负担：
+    // numberStyle / separatorStyle 仅做引用透传，emotion 对相同引用有 cache
+    const content = [];
     if (value && typeof value === 'object') {
         for (let i = 0; i < format.length; i++) {
             // 渲染数字进组件

package/build/DatePicker/Column.d.ts

@@ -0,0 +1,9 @@
+import type { DatePickerStyle } from "./style";
+export interface ColumnProps {
+    items: number[];
+    value: number;
+    onChange: (v: number) => void;
+    format?: (n: number) => string;
+    style: DatePickerStyle;
+}
+export declare function Column(props: ColumnProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/DatePicker/Column.js

@@ -0,0 +1,330 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = Column;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+// === 物理参数（统一阻尼-弹簧模型）===
+// 释放后整段运动是「单一连续 ODE」：摩擦 + 弹簧（朝预测落点），由 rAF 步进。
+// 既无双阶段切换，也不存在「等惯性停 → 启动吸附」的间隙。
+// 单位：位置 px、时间 ms、速度 px/ms、加速度 px/ms²
+// 摩擦系数：用于「预测最终落点」。指数衰减下 v(t)=v0·e^(-kt)，落点 = offset0 + v0/k
+const FRICTION_K = 0.005;
+// 弹簧刚度：朝目标项的回正力度。ω = sqrt(STIFF) ≈ 0.0134 rad/ms ≈ 470ms 周期
+const STIFF = 0.00018;
+// 阻尼比 1.0 = 临界阻尼（无超调，最快稳态）
+const DAMP_RATIO = 1.0;
+const DAMPING = 2 * Math.sqrt(STIFF) * DAMP_RATIO;
+// 边界橡皮筋：手指拖到边界外，offset 实际变化按此比例（iOS 风格）
+const RUBBER = 0.45;
+// 越界回弹：边界吸引到内边的强弹簧
+const EDGE_STIFF = 0.0006;
+const EDGE_DAMP = 2 * Math.sqrt(EDGE_STIFF);
+// 终止阈值
+const EPS_V = 0.02; // px/ms
+const EPS_X = 0.5; // px
+function Column(props) {
+    const { items, value, onChange, format, style } = props;
+    const containerRef = (0, react_1.useRef)(null);
+    const innerRef = (0, react_1.useRef)(null);
+    const [itemHeight, setItemHeight] = (0, react_1.useState)(0);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(() => Math.max(0, items.indexOf(value)));
+    // refs 让 rAF 闭包始终读到最新值
+    const offsetRef = (0, react_1.useRef)(0);
+    const velocityRef = (0, react_1.useRef)(0);
+    const targetRef = (0, react_1.useRef)(0);
+    const animRef = (0, react_1.useRef)(0);
+    const lastFrameRef = (0, react_1.useRef)(0);
+    // 缓存上一次 activeIndex，避免每帧 setState 调度开销
+    const lastActiveRef = (0, react_1.useRef)(-1);
+    const valueRef = (0, react_1.useRef)(value);
+    valueRef.current = value;
+    const itemsRef = (0, react_1.useRef)(items);
+    itemsRef.current = items;
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    const itemHeightRef = (0, react_1.useRef)(itemHeight);
+    itemHeightRef.current = itemHeight;
+    // === 测量 itemHeight（随 rem 变化）===
+    (0, react_1.useLayoutEffect)(() => {
+        const el = innerRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const first = el.querySelector("[data-pick-item]");
+            if (first) {
+                const h = first.getBoundingClientRect().height;
+                if (h > 0)
+                    setItemHeight(h);
+            }
+        };
+        measure();
+        if (typeof ResizeObserver !== "undefined") {
+            const ro = new ResizeObserver(measure);
+            ro.observe(el);
+            return () => ro.disconnect();
+        }
+    }, []);
+    // === 渲染辅助 ===
+    const applyTransform = (offset) => {
+        const inner = innerRef.current;
+        if (inner)
+            inner.style.transform = `translate3d(0,${-offset}px,0)`;
+    };
+    const updateActive = (offset) => {
+        const ih = itemHeightRef.current;
+        if (ih === 0)
+            return;
+        const list = itemsRef.current;
+        const idx = Math.max(0, Math.min(list.length - 1, Math.round(offset / ih)));
+        if (lastActiveRef.current === idx)
+            return;
+        lastActiveRef.current = idx;
+        setActiveIndex(idx);
+    };
+    const setOffsetImmediate = (offset) => {
+        offsetRef.current = offset;
+        applyTransform(offset);
+        updateActive(offset);
+    };
+    const stopAnimation = () => {
+        if (animRef.current) {
+            cancelAnimationFrame(animRef.current);
+            animRef.current = 0;
+        }
+    };
+    // === 物理动画循环 ===
+    const startAnimation = () => {
+        stopAnimation();
+        lastFrameRef.current = performance.now();
+        const step = (now) => {
+            // dt 上限 32ms：防止页面切回时大跳，导致一帧位移过大
+            const dt = Math.min(32, now - lastFrameRef.current);
+            lastFrameRef.current = now;
+            const ih = itemHeightRef.current;
+            const list = itemsRef.current;
+            if (ih === 0 || list.length === 0) {
+                animRef.current = 0;
+                return;
+            }
+            const maxOffset = (list.length - 1) * ih;
+            let offset = offsetRef.current;
+            let velocity = velocityRef.current;
+            const target = targetRef.current;
+            // 越界判断：使用边界弹簧把 offset 拉回 [0, maxOffset]
+            let outOfBound = 0;
+            if (offset < 0)
+                outOfBound = offset;
+            else if (offset > maxOffset)
+                outOfBound = offset - maxOffset;
+            let acc;
+            if (outOfBound !== 0) {
+                // 越界期间用更强的边界弹簧；忽略原 target，先回到合法范围
+                acc = -EDGE_STIFF * outOfBound - EDGE_DAMP * velocity;
+            }
+            else {
+                acc = -STIFF * (offset - target) - DAMPING * velocity;
+            }
+            velocity += acc * dt;
+            offset += velocity * dt;
+            offsetRef.current = offset;
+            velocityRef.current = velocity;
+            applyTransform(offset);
+            updateActive(offset);
+            const settled = Math.abs(velocity) < EPS_V &&
+                Math.abs(offset - target) < EPS_X &&
+                outOfBound === 0;
+            if (settled) {
+                // 精确对齐到 target（target 已是 itemH 整数倍）
+                offsetRef.current = target;
+                velocityRef.current = 0;
+                applyTransform(target);
+                updateActive(target);
+                const idx = Math.round(target / ih);
+                const v = list[idx];
+                if (v !== valueRef.current)
+                    onChangeRef.current(v);
+                animRef.current = 0;
+                return;
+            }
+            animRef.current = requestAnimationFrame(step);
+        };
+        animRef.current = requestAnimationFrame(step);
+    };
+    // 释放：用速度预测落点 → 吸附到最近 item → 启动物理动画
+    const releaseWithVelocity = (v) => {
+        const ih = itemHeightRef.current;
+        const list = itemsRef.current;
+        if (ih === 0 || list.length === 0)
+            return;
+        const maxOffset = (list.length - 1) * ih;
+        // 摩擦预测：落点 = 当前 + v / k（指数衰减积分）
+        const projected = offsetRef.current + v / FRICTION_K;
+        const clamped = Math.max(0, Math.min(maxOffset, projected));
+        const idx = Math.max(0, Math.min(list.length - 1, Math.round(clamped / ih)));
+        targetRef.current = idx * ih;
+        velocityRef.current = v;
+        startAnimation();
+    };
+    // === 手势处理 ===
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        if (!el || itemHeight === 0)
+            return;
+        let dragging = false;
+        let lastY = 0;
+        let lastTime = 0;
+        // 手势起点：用「起点 offset + 累计位移」重算每帧位置，
+        // 避免越界橡皮筋反馈振荡（上一帧衰减后的 offset 不能再作为下一帧起点）
+        let startOffset = 0;
+        let totalDelta = 0;
+        // 速度采样：保留最近若干帧用于释放速度估算
+        let samples = [];
+        const onDown = (clientY) => {
+            stopAnimation();
+            dragging = true;
+            lastY = clientY;
+            lastTime = performance.now();
+            startOffset = offsetRef.current;
+            totalDelta = 0;
+            samples = [];
+            velocityRef.current = 0;
+        };
+        const onMove = (clientY) => {
+            if (!dragging)
+                return;
+            const ih = itemHeightRef.current;
+            const list = itemsRef.current;
+            if (ih === 0)
+                return;
+            const maxOffset = (list.length - 1) * ih;
+            const now = performance.now();
+            // 屏幕向下拖（dy>0）== 列表向下平移 == offset 减少
+            const dy = clientY - lastY;
+            const delta = -dy;
+            totalDelta += delta;
+            // 「原始位置」不受衰减影响：始终 = 起点 + 累计位移
+            const rawPos = startOffset + totalDelta;
+            // 只对越界部分衰减，避免衰减后的值反馈到下一帧产生振荡
+            let next;
+            if (rawPos < 0) {
+                next = rawPos * RUBBER;
+            }
+            else if (rawPos > maxOffset) {
+                next = maxOffset + (rawPos - maxOffset) * RUBBER;
+            }
+            else {
+                next = rawPos;
+            }
+            offsetRef.current = next;
+            applyTransform(next);
+            updateActive(next);
+            const dt = Math.max(1, now - lastTime);
+            samples.push({ dy: delta, dt, t: now });
+            // 只保留最近 100ms 的样本
+            const cutoff = now - 100;
+            while (samples.length > 0 && samples[0].t < cutoff)
+                samples.shift();
+            lastY = clientY;
+            lastTime = now;
+        };
+        const onUp = () => {
+            if (!dragging)
+                return;
+            dragging = false;
+            // 释放速度：最近 100ms 样本的总位移 / 总时间（px/ms）
+            // 等价于近 100ms 的平均速度，比单帧速度更稳，能滤掉手指最后一瞬的抖动
+            let totalDy = 0;
+            let totalDt = 0;
+            for (const s of samples) {
+                totalDy += s.dy;
+                totalDt += s.dt;
+            }
+            const v = totalDt > 0 ? totalDy / totalDt : 0;
+            releaseWithVelocity(v);
+        };
+        // touch
+        const onTouchStart = (e) => {
+            if (e.touches.length !== 1)
+                return;
+            onDown(e.touches[0].clientY);
+        };
+        const onTouchMove = (e) => {
+            if (e.touches.length !== 1)
+                return;
+            // 阻止页面滚动（touch-action: none 已防大部分，再保险）
+            if (e.cancelable)
+                e.preventDefault();
+            onMove(e.touches[0].clientY);
+        };
+        const onTouchEnd = () => onUp();
+        // mouse（document 级监听 move/up，避免拖出元素丢事件）
+        const onMouseDown = (e) => {
+            e.preventDefault();
+            onDown(e.clientY);
+        };
+        const onMouseMove = (e) => onMove(e.clientY);
+        const onMouseUp = () => onUp();
+        // wheel：直接累加到 offset，停止后启动 0 速度回弹（=纯弹簧吸附最近项）
+        let wheelTimer = 0;
+        const onWheel = (e) => {
+            e.preventDefault();
+            stopAnimation();
+            const ih = itemHeightRef.current;
+            const list = itemsRef.current;
+            if (ih === 0)
+                return;
+            const maxOffset = (list.length - 1) * ih;
+            let next = offsetRef.current + e.deltaY;
+            // 滚轮不做橡皮筋（多余），直接夹到合法范围
+            next = Math.max(0, Math.min(maxOffset, next));
+            offsetRef.current = next;
+            velocityRef.current = 0;
+            applyTransform(next);
+            updateActive(next);
+            if (wheelTimer)
+                clearTimeout(wheelTimer);
+            wheelTimer = setTimeout(() => {
+                wheelTimer = 0;
+                releaseWithVelocity(0);
+            }, 80);
+        };
+        el.addEventListener("touchstart", onTouchStart, { passive: false });
+        el.addEventListener("touchmove", onTouchMove, { passive: false });
+        el.addEventListener("touchend", onTouchEnd);
+        el.addEventListener("touchcancel", onTouchEnd);
+        el.addEventListener("mousedown", onMouseDown);
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        el.addEventListener("wheel", onWheel, { passive: false });
+        return () => {
+            el.removeEventListener("touchstart", onTouchStart);
+            el.removeEventListener("touchmove", onTouchMove);
+            el.removeEventListener("touchend", onTouchEnd);
+            el.removeEventListener("touchcancel", onTouchEnd);
+            el.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            el.removeEventListener("wheel", onWheel);
+            if (wheelTimer)
+                clearTimeout(wheelTimer);
+            stopAnimation();
+        };
+    }, [itemHeight]);
+    // === 同步外部 value（含首次 itemHeight 测量） ===
+    // 用 useLayoutEffect 避免首帧闪烁（在浏览器绘制前同步 transform）
+    (0, react_1.useLayoutEffect)(() => {
+        const ih = itemHeightRef.current;
+        if (ih === 0)
+            return;
+        const idx = items.indexOf(value);
+        if (idx < 0)
+            return;
+        const target = idx * ih;
+        if (Math.abs(offsetRef.current - target) > 0.5) {
+            stopAnimation();
+            velocityRef.current = 0;
+            setOffsetImmediate(target);
+        }
+    }, [value, items, itemHeight]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, css: style.column, children: (0, jsx_runtime_1.jsxs)("div", { ref: innerRef, css: style.columnInner, children: [(0, jsx_runtime_1.jsx)("div", { css: style.spacer }), items.map((v, i) => ((0, jsx_runtime_1.jsx)("div", { "data-pick-item": true, css: [style.item, i === activeIndex && style.itemActive], children: format ? format(v) : v }, v))), (0, jsx_runtime_1.jsx)("div", { css: style.spacer })] }) }));
+}

package/build/DatePicker/index.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { Dayjs } from "dayjs";
+export type DatePickerPrecision = "day" | "hour" | "minute" | "second";
+export type DateInput = Date | string | number | Dayjs;
+export interface DatePickerUnits {
+    year?: string;
+    month?: string;
+    day?: string;
+    hour?: string;
+    minute?: string;
+    second?: string;
+}
+export declare const DEFAULT_UNITS: Required<DatePickerUnits>;
+export interface DatePickerProps {
+    value?: DateInput;
+    precision?: DatePickerPrecision;
+    title?: ReactNode;
+    cancelText?: ReactNode;
+    confirmText?: ReactNode;
+    maskClosable?: boolean;
+    primary?: string;
+    rounded?: boolean;
+    showUnit?: boolean;
+    units?: DatePickerUnits;
+    minDate?: DateInput;
+    maxDate?: DateInput;
+    onClose?: () => void;
+    onCancel?: () => void;
+    onConfirm?: (date: Dayjs) => void;
+}
+export declare function DatePicker(props: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function showDatePicker(options?: Pick<DatePickerProps, "value" | "precision" | "title" | "cancelText" | "confirmText" | "maskClosable" | "primary" | "rounded" | "showUnit" | "units" | "minDate" | "maxDate" | "onCancel" | "onConfirm">): void;