@hanwenbo/x-taro-ui 0.0.1

package/lib/components/scrollFade/scrollFade.js

@@ -0,0 +1,204 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/scrollFade/scrollFade.tsx
+var scrollFade_exports = {};
+__export(scrollFade_exports, {
+  ScrollFade: () => ScrollFade,
+  default: () => scrollFade_default
+});
+module.exports = __toCommonJS(scrollFade_exports);
+var import_react = __toESM(require("react"));
+var import_taro = __toESM(require("@tarojs/taro"));
+var import_components = require("@tarojs/components");
+var import_utils = require("../../utils");
+var import_theme = require("../../theme");
+var import_configProvider = require("../configProvider");
+var DEFAULT_SIZE = 40;
+var EDGE_THRESHOLD = 1;
+function toPx(value, fallback) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+var gradientAngles = {
+  vertical: { start: 180, end: 0 },
+  horizontal: { start: 90, end: 270 }
+};
+var ScrollFade = ({
+  direction = "vertical",
+  size = DEFAULT_SIZE,
+  edges = "both",
+  fadeColor,
+  children,
+  className,
+  style,
+  contentClassName,
+  contentStyle,
+  onScroll,
+  testID = "scroll-fade"
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const { colors, motion } = (0, import_theme.useTokens)();
+  const horizontal = direction === "horizontal";
+  const resolvedFadeColor = fadeColor || colors.background || colors.card;
+  const resolvedSize = toPx(size, DEFAULT_SIZE);
+  const uniqueId = import_react.default.useId().replace(/[^a-zA-Z0-9]/g, "");
+  const scrollId = `x-scroll-fade-${uniqueId}`;
+  const contentId = `${scrollId}-content`;
+  const visibilityRef = import_react.default.useRef({ start: false, end: false });
+  const metricsRef = import_react.default.useRef({ offset: 0, viewport: 0, content: 0 });
+  const [{ startVisible, endVisible }, setVisibility] = import_react.default.useState({
+    startVisible: false,
+    endVisible: false
+  });
+  const setEdgeVisible = import_react.default.useCallback((edge, visible) => {
+    if (visibilityRef.current[edge] === visible) return;
+    visibilityRef.current[edge] = visible;
+    setVisibility(
+      (previous) => edge === "start" ? { ...previous, startVisible: visible } : { ...previous, endVisible: visible }
+    );
+  }, []);
+  const recompute = import_react.default.useCallback(() => {
+    const { offset, viewport, content } = metricsRef.current;
+    const overflows = viewport > 0 && content > viewport + EDGE_THRESHOLD;
+    setEdgeVisible("start", overflows && offset > EDGE_THRESHOLD);
+    setEdgeVisible("end", overflows && offset + viewport < content - EDGE_THRESHOLD);
+  }, [setEdgeVisible]);
+  import_react.default.useEffect(() => {
+    var _a, _b;
+    const query = (_b = (_a = import_taro.default).createSelectorQuery) == null ? void 0 : _b.call(_a);
+    if (!query) return;
+    query.select(`#${scrollId}`).boundingClientRect().select(`#${contentId}`).boundingClientRect().exec((results) => {
+      const [viewportRect, contentRect] = results ?? [];
+      if (viewportRect && !Array.isArray(viewportRect)) {
+        metricsRef.current.viewport = horizontal ? Number(viewportRect.width) || 0 : Number(viewportRect.height) || 0;
+      }
+      if (contentRect && !Array.isArray(contentRect)) {
+        metricsRef.current.content = horizontal ? Number(contentRect.width) || 0 : Number(contentRect.height) || 0;
+      }
+      recompute();
+    });
+  }, [horizontal, scrollId, contentId, recompute]);
+  const handleScroll = (event) => {
+    onScroll == null ? void 0 : onScroll(event);
+    const detail = event.detail;
+    const host = event.currentTarget;
+    const hostViewport = horizontal ? host == null ? void 0 : host.clientWidth : host == null ? void 0 : host.clientHeight;
+    metricsRef.current = {
+      offset: horizontal ? detail.scrollLeft : detail.scrollTop,
+      content: horizontal ? detail.scrollWidth : detail.scrollHeight,
+      viewport: typeof hostViewport === "number" && hostViewport > 0 ? hostViewport : metricsRef.current.viewport
+    };
+    recompute();
+  };
+  const renderFade = (edge) => {
+    const isStart = edge === "start";
+    const visible = isStart ? startVisible : endVisible;
+    const angle = gradientAngles[horizontal ? "horizontal" : "vertical"][edge];
+    const positionStyle = horizontal ? { top: 0, bottom: 0, width: resolvedSize, [isStart ? "left" : "right"]: 0 } : { left: 0, right: 0, height: resolvedSize, [isStart ? "top" : "bottom"]: 0 };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        key: edge,
+        "data-slot": `scroll-fade-${edge}`,
+        "data-testid": `${testID}-fade-${edge}`,
+        className: `${config.prefixCls}-scroll-fade__fade`,
+        style: {
+          position: "absolute",
+          pointerEvents: "none",
+          zIndex: 1,
+          background: `linear-gradient(${angle}deg, ${resolvedFadeColor}, transparent)`,
+          opacity: visible ? 1 : 0,
+          transition: `opacity ${motion.durationsMs.standard}ms ${motion.easing.standard}`,
+          ...positionStyle
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "scroll-fade",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-scroll-fade`,
+        `${config.prefixCls}-scroll-fade--${direction}`,
+        className
+      ),
+      style: { position: "relative", overflow: "hidden", ...style }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.ScrollView,
+      {
+        id: scrollId,
+        "data-slot": "scroll-fade-scroller",
+        "data-testid": `${testID}-scroll`,
+        className: `${config.prefixCls}-scroll-fade__scroller`,
+        style: {
+          maxHeight: horizontal ? void 0 : "100%",
+          maxWidth: horizontal ? "100%" : void 0,
+          height: horizontal ? void 0 : "100%",
+          width: "100%"
+        },
+        scrollX: horizontal,
+        scrollY: !horizontal,
+        enhanced: true,
+        showScrollbar: false,
+        onScroll: handleScroll
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          id: contentId,
+          "data-slot": "scroll-fade-content",
+          className: contentClassName,
+          style: {
+            display: "flex",
+            flexDirection: horizontal ? "row" : "column",
+            width: horizontal ? "max-content" : "100%",
+            minWidth: horizontal ? "100%" : void 0,
+            ...contentStyle
+          }
+        },
+        children
+      )
+    ),
+    edges !== "end" ? renderFade("start") : null,
+    edges !== "start" ? renderFade("end") : null
+  );
+};
+ScrollFade.displayName = "ScrollFade";
+var scrollFade_default = ScrollFade;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScrollFade
+});

package/lib/components/scrollFade/types.d.ts

@@ -0,0 +1,44 @@
+/**
+ * ScrollFade Component Types
+ *
+ * Aligned with x-design-system scrollFade spec and the
+ * x-mobile-ui / x-rn-ui ScrollFade implementations.
+ */
+/// <reference types="react" />
+export declare type ScrollFadeDirection = 'vertical' | 'horizontal';
+export declare type ScrollFadeEdges = 'both' | 'start' | 'end';
+/** Minimal scroll event surface shared by Taro H5 and WeApp ScrollView. */
+export interface ScrollFadeScrollEvent {
+    detail: {
+        scrollTop: number;
+        scrollLeft: number;
+        scrollHeight: number;
+        scrollWidth: number;
+    };
+    currentTarget?: unknown;
+}
+export interface ScrollFadeProps {
+    /** 滚动方向，默认 vertical（horizontal 映射 Taro ScrollView 的 scroll-x） */
+    direction?: ScrollFadeDirection;
+    /** 淡出深度（px，string 按 px 数值解析），默认 40 */
+    size?: number | string;
+    /** 渐显边缘，默认 both */
+    edges?: ScrollFadeEdges;
+    /** 渐变遮罩颜色，默认主题背景色 */
+    fadeColor?: string;
+    /** 滚动内容 */
+    children?: React.ReactNode;
+    /** 外层容器类名 */
+    className?: string;
+    /** 外层容器样式 */
+    style?: React.CSSProperties;
+    /** 滚动内容容器类名 */
+    contentClassName?: string;
+    /** 滚动内容容器样式 */
+    contentStyle?: React.CSSProperties;
+    /** 滚动事件回调（透传 Taro ScrollView onScroll） */
+    onScroll?: (event: ScrollFadeScrollEvent) => void;
+    /** Test ID for testing */
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/scrollFade/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/scrollFade/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/scrollView/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as ScrollView } from './scrollView';
+export { default } from './scrollView';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/scrollView/index.js

@@ -0,0 +1,44 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/scrollView/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ScrollView: () => import_scrollView.default,
+  default: () => import_scrollView2.default
+});
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./types"), module.exports);
+var import_scrollView = __toESM(require("./scrollView"));
+var import_scrollView2 = __toESM(require("./scrollView"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScrollView,
+  ...require("./types")
+});

package/lib/components/scrollView/scrollView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ScrollViewProps, ScrollViewRef } from './types';
+import './style.css';
+declare const ScrollView: React.ForwardRefExoticComponent<Omit<ScrollViewProps, "ref"> & React.RefAttributes<ScrollViewRef>>;
+export default ScrollView;
+//# sourceMappingURL=scrollView.d.ts.map

package/lib/components/scrollView/scrollView.js

@@ -0,0 +1,297 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/scrollView/scrollView.tsx
+var scrollView_exports = {};
+__export(scrollView_exports, {
+  default: () => scrollView_default
+});
+module.exports = __toCommonJS(scrollView_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_utils = require("../../utils");
+var import_style = require("./style.css");
+function toLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var ScrollView = import_react.default.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    horizontal,
+    scrollX,
+    scrollY,
+    enhanced,
+    scrollWithAnimation = false,
+    showScrollbar = true,
+    showsHorizontalScrollIndicator,
+    showsVerticalScrollIndicator,
+    bounces = true,
+    pagingEnabled = false,
+    height,
+    flex = true,
+    scrollContainerClassName,
+    onScrollToTop,
+    onScrollToTopWithOffset,
+    onScrollToEnd,
+    onEndReachedThreshold,
+    scrollTop,
+    scrollLeft,
+    contentOffset,
+    upperThreshold = 50,
+    lowerThreshold,
+    refreshing = false,
+    refreshControl,
+    nestedScrollEnabled = false,
+    refresherEnabled,
+    refresherTriggered,
+    onScroll,
+    onScrollStart,
+    onScrollEnd,
+    onScrollBeginDrag,
+    onScrollEndDrag,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onTouchCancel,
+    onMouseDown,
+    onMouseUp,
+    onWheel,
+    onScrollToUpper,
+    onScrollToLower,
+    onRefresherPulling,
+    className,
+    style,
+    testID,
+    bgVariant,
+    ...nativeProps
+  } = props;
+  const resolvedHorizontal = horizontal ?? scrollX ?? false;
+  const resolvedScrollX = scrollX ?? resolvedHorizontal;
+  const resolvedScrollY = scrollY ?? !resolvedHorizontal;
+  const resolvedShowScrollbar = (resolvedHorizontal ? showsHorizontalScrollIndicator : showsVerticalScrollIndicator) ?? showScrollbar;
+  const resolvedLowerThreshold = onEndReachedThreshold ?? lowerThreshold ?? 50;
+  const resolvedEnhanced = enhanced || pagingEnabled || bounces === false || resolvedShowScrollbar === false;
+  const lastOffsetRef = (0, import_react.useRef)({
+    x: scrollLeft ?? (contentOffset == null ? void 0 : contentOffset.x) ?? 0,
+    y: scrollTop ?? (contentOffset == null ? void 0 : contentOffset.y) ?? 0
+  });
+  if (scrollLeft !== void 0) lastOffsetRef.current.x = scrollLeft;
+  else if ((contentOffset == null ? void 0 : contentOffset.x) !== void 0) lastOffsetRef.current.x = contentOffset.x;
+  if (scrollTop !== void 0) lastOffsetRef.current.y = scrollTop;
+  else if ((contentOffset == null ? void 0 : contentOffset.y) !== void 0) lastOffsetRef.current.y = contentOffset.y;
+  const resolvedScrollLeft = scrollLeft ?? (contentOffset == null ? void 0 : contentOffset.x) ?? lastOffsetRef.current.x;
+  const resolvedScrollTop = scrollTop ?? (contentOffset == null ? void 0 : contentOffset.y) ?? lastOffsetRef.current.y;
+  const isNearEndRef = (0, import_react.useRef)(false);
+  const hasReportedTopRef = (0, import_react.useRef)(false);
+  const isHostAtTopRef = (0, import_react.useRef)(resolvedScrollTop === 0);
+  const isDraggingRef = (0, import_react.useRef)(false);
+  const touchStartYRef = (0, import_react.useRef)(null);
+  const setHostRef = (0, import_react.useCallback)(
+    (node) => {
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef]
+  );
+  const surfaceBackgroundColor = bgVariant ? `var(--x-${bgVariant})` : void 0;
+  const startDrag = (event) => {
+    if (!isDraggingRef.current) {
+      isDraggingRef.current = true;
+      onScrollBeginDrag == null ? void 0 : onScrollBeginDrag(event);
+    }
+  };
+  const endDrag = (event) => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    touchStartYRef.current = null;
+    onScrollEndDrag == null ? void 0 : onScrollEndDrag(event);
+  };
+  const updateTopStateFromHost = (event) => {
+    var _a;
+    const hostScrollTop = (_a = event.currentTarget) == null ? void 0 : _a.scrollTop;
+    if (typeof hostScrollTop === "number") isHostAtTopRef.current = hostScrollTop === 0;
+  };
+  const handleScroll = (event) => {
+    const detail = event.detail;
+    lastOffsetRef.current = { x: detail.scrollLeft, y: detail.scrollTop };
+    onScroll == null ? void 0 : onScroll(event);
+    const currentTarget = event.currentTarget;
+    const offset = resolvedHorizontal ? detail.scrollLeft : detail.scrollTop;
+    const extent = resolvedHorizontal ? detail.scrollWidth : detail.scrollHeight;
+    const viewport = resolvedHorizontal ? currentTarget.clientWidth ?? 0 : currentTarget.clientHeight ?? 0;
+    if (!resolvedHorizontal) {
+      const isAtTop = detail.scrollTop === 0;
+      if (isAtTop && !hasReportedTopRef.current) onScrollToTop == null ? void 0 : onScrollToTop();
+      hasReportedTopRef.current = isAtTop;
+      isHostAtTopRef.current = isAtTop;
+    }
+    if (extent > 0 && viewport > 0) {
+      const isNearEnd = extent - viewport - offset < resolvedLowerThreshold;
+      if (isNearEnd && !isNearEndRef.current) onScrollToEnd == null ? void 0 : onScrollToEnd();
+      isNearEndRef.current = isNearEnd;
+    }
+  };
+  const handleScrollToUpper = (event) => {
+    if (!hasReportedTopRef.current) onScrollToTop == null ? void 0 : onScrollToTop();
+    hasReportedTopRef.current = true;
+    isHostAtTopRef.current = true;
+    onScrollToUpper == null ? void 0 : onScrollToUpper(event);
+  };
+  const handleScrollToLower = (event) => {
+    if (!isNearEndRef.current) onScrollToEnd == null ? void 0 : onScrollToEnd();
+    isNearEndRef.current = true;
+    onScrollToLower == null ? void 0 : onScrollToLower(event);
+  };
+  const handleScrollStart = (event) => {
+    onScrollStart == null ? void 0 : onScrollStart(event);
+    startDrag(event);
+  };
+  const handleScrollEnd = (event) => {
+    onScrollEnd == null ? void 0 : onScrollEnd(event);
+    endDrag(event);
+  };
+  const handleRefresherPulling = (event) => {
+    if (!isDraggingRef.current) onScrollToTopWithOffset == null ? void 0 : onScrollToTopWithOffset();
+    onRefresherPulling == null ? void 0 : onRefresherPulling(event);
+  };
+  const handleTouchStart = (event) => {
+    var _a, _b;
+    onTouchStart == null ? void 0 : onTouchStart(event);
+    const pointerEvent = event;
+    updateTopStateFromHost(pointerEvent);
+    touchStartYRef.current = ((_b = (_a = pointerEvent.touches) == null ? void 0 : _a[0]) == null ? void 0 : _b.clientY) ?? null;
+    startDrag(event);
+  };
+  const handleTouchMove = (event) => {
+    var _a, _b;
+    onTouchMove == null ? void 0 : onTouchMove(event);
+    const pointerEvent = event;
+    updateTopStateFromHost(pointerEvent);
+    const currentY = (_b = (_a = pointerEvent.touches) == null ? void 0 : _a[0]) == null ? void 0 : _b.clientY;
+    if (!resolvedHorizontal && onScrollToTopWithOffset && isHostAtTopRef.current && touchStartYRef.current !== null && currentY !== void 0 && currentY > touchStartYRef.current) {
+      onScrollToTopWithOffset();
+    }
+  };
+  const handleTouchEnd = (event) => {
+    onTouchEnd == null ? void 0 : onTouchEnd(event);
+    endDrag(event);
+  };
+  const handleTouchCancel = (event) => {
+    onTouchCancel == null ? void 0 : onTouchCancel(event);
+    endDrag(event);
+  };
+  const handleMouseDown = (event) => {
+    onMouseDown == null ? void 0 : onMouseDown(event);
+    updateTopStateFromHost(event);
+    startDrag(event);
+  };
+  const handleMouseUp = (event) => {
+    onMouseUp == null ? void 0 : onMouseUp(event);
+    endDrag(event);
+  };
+  const handleWheel = (event) => {
+    onWheel == null ? void 0 : onWheel(event);
+    updateTopStateFromHost(event);
+    if (!resolvedHorizontal && onScrollToTopWithOffset && isHostAtTopRef.current && (event.deltaY ?? 0) < 0) {
+      onScrollToTopWithOffset();
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.ScrollView,
+    {
+      ...nativeProps,
+      ref: setHostRef,
+      "data-slot": "scroll-view-root",
+      "data-bounces": bounces ? "true" : void 0,
+      "data-direction": resolvedHorizontal ? "horizontal" : "vertical",
+      "data-flex": flex ? "true" : void 0,
+      "data-paging": pagingEnabled ? "true" : void 0,
+      "data-refreshing": refreshing ? "true" : void 0,
+      "data-bg-variant": bgVariant,
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(
+        "x-scroll-view",
+        resolvedShowScrollbar ? "x-scroll-view--show-scrollbar" : "x-scroll-view--hide-scrollbar",
+        scrollContainerClassName,
+        className
+      ),
+      style: {
+        boxSizing: "border-box",
+        height: flex ? "100%" : toLength(height) ?? "auto",
+        minHeight: flex ? "100%" : void 0,
+        overflowX: resolvedHorizontal ? "auto" : "hidden",
+        overflowY: resolvedHorizontal ? "hidden" : "auto",
+        WebkitOverflowScrolling: bounces ? "touch" : "auto",
+        overscrollBehavior: bounces ? nestedScrollEnabled ? "auto" : "contain" : "none",
+        scrollSnapType: pagingEnabled ? resolvedHorizontal ? "x mandatory" : "y mandatory" : "none",
+        scrollbarWidth: resolvedShowScrollbar ? "auto" : "none",
+        msOverflowStyle: resolvedShowScrollbar ? "auto" : "none",
+        backgroundColor: surfaceBackgroundColor,
+        ...style
+      },
+      scrollX: resolvedScrollX,
+      scrollY: resolvedScrollY,
+      enhanced: resolvedEnhanced,
+      bounces,
+      pagingEnabled,
+      scrollWithAnimation,
+      showScrollbar: resolvedShowScrollbar,
+      scrollTop: resolvedScrollTop,
+      scrollLeft: resolvedScrollLeft,
+      upperThreshold,
+      lowerThreshold: resolvedLowerThreshold,
+      refresherEnabled: refresherEnabled ?? Boolean(refreshControl),
+      refresherTriggered: refresherTriggered ?? refreshing,
+      onScroll: handleScroll,
+      onScrollStart: onScrollStart || onScrollBeginDrag ? handleScrollStart : void 0,
+      onScrollEnd: onScrollEnd || onScrollEndDrag ? handleScrollEnd : void 0,
+      onTouchStart: onTouchStart || onScrollBeginDrag ? handleTouchStart : void 0,
+      onTouchMove: onTouchMove || onScrollToTopWithOffset ? handleTouchMove : void 0,
+      onTouchEnd: onTouchEnd || onScrollEndDrag ? handleTouchEnd : void 0,
+      onTouchCancel: onTouchCancel || onScrollEndDrag ? handleTouchCancel : void 0,
+      onMouseDown: onMouseDown || onScrollBeginDrag ? handleMouseDown : void 0,
+      onMouseUp: onMouseUp || onScrollEndDrag ? handleMouseUp : void 0,
+      onWheel: onWheel || onScrollToTopWithOffset ? handleWheel : void 0,
+      onScrollToLower: handleScrollToLower,
+      onScrollToUpper: handleScrollToUpper,
+      onRefresherPulling: handleRefresherPulling
+    },
+    refreshControl && refreshing ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: "x-scroll-view__refresh",
+        "data-slot": "scroll-view-refresh",
+        style: { display: "flex", justifyContent: "center", padding: "16px 0" }
+      },
+      refreshControl
+    ) : null,
+    children
+  );
+});
+ScrollView.displayName = "ScrollView";
+var scrollView_default = ScrollView;

package/lib/components/scrollView/style.css

@@ -0,0 +1,7 @@
+.x-scroll-view--show-scrollbar::-webkit-scrollbar {
+  display: block;
+}
+
+.x-scroll-view--hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}

package/lib/components/scrollView/types.d.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ScrollViewProps as TaroScrollViewProps } from '@tarojs/components/types/ScrollView';
+declare type NativeScrollViewProps = Omit<TaroScrollViewProps, 'children' | 'className' | 'style' | 'onScroll' | 'onScrollToUpper' | 'onScrollToLower' | 'bounces' | 'pagingEnabled' | 'showScrollbar'>;
+export interface ScrollViewProps extends NativeScrollViewProps {
+    children?: ReactNode;
+    horizontal?: boolean;
+    showsHorizontalScrollIndicator?: boolean;
+    showsVerticalScrollIndicator?: boolean;
+    showScrollbar?: boolean;
+    bounces?: boolean;
+    pagingEnabled?: boolean;
+    onScrollToTop?: () => void;
+    onScrollToTopWithOffset?: () => void;
+    onScroll?: TaroScrollViewProps['onScroll'];
+    onScrollBeginDrag?: TaroScrollViewProps['onScrollStart'];
+    onScrollEndDrag?: TaroScrollViewProps['onScrollEnd'];
+    refreshing?: boolean;
+    refreshControl?: ReactNode;
+    nestedScrollEnabled?: boolean;
+    contentOffset?: {
+        x?: number;
+        y?: number;
+    };
+    onScrollToEnd?: () => void;
+    onEndReachedThreshold?: number;
+    scrollContainerClassName?: string;
+    height?: number | string;
+    flex?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+    onScrollToUpper?: TaroScrollViewProps['onScrollToUpper'];
+    onScrollToLower?: TaroScrollViewProps['onScrollToLower'];
+    /** Semantic surface shortcut aligned with x-mobile-ui ViewProps. */
+    bgVariant?: 'background' | 'card' | 'muted';
+}
+/** Cross-platform subset exposed by the underlying Taro scroll host. */
+export interface ScrollViewRef {
+    scrollTop?: number;
+    scrollLeft?: number;
+    scrollTo?: (options: {
+        top?: number;
+        left?: number;
+        behavior?: 'auto' | 'smooth';
+    } | number, y?: number) => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map