@hanwenbo/x-taro-ui 0.0.1

package/es/components/scrollFade/scrollFade.js

@@ -0,0 +1,212 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * ScrollFade Component
+ *
+ * Taro (H5 + WeApp) port of the x-rn-ui ScrollFade: renders start/end
+ * gradient overlays above a Taro ScrollView while more content exists
+ * beyond that edge. Gradients use inline CSS linear-gradient on View
+ * (SVG is not available cross-platform); visibility toggles are deduped
+ * and animated with a token-driven opacity transition.
+ */
+
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { ScrollView as TaroScrollView, View } from '@tarojs/components';
+import { classNames } from "../../utils";
+import { useTokens } from "../../theme";
+import { useConfig } from "../configProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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') {
+    var parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+var gradientAngles = {
+  vertical: {
+    start: 180,
+    end: 0
+  },
+  horizontal: {
+    start: 90,
+    end: 270
+  }
+};
+export var ScrollFade = function ScrollFade(_ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? 'both' : _ref$edges,
+    fadeColor = _ref.fadeColor,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    contentClassName = _ref.contentClassName,
+    contentStyle = _ref.contentStyle,
+    onScroll = _ref.onScroll,
+    _ref$testID = _ref.testID,
+    testID = _ref$testID === void 0 ? 'scroll-fade' : _ref$testID;
+  var config = useConfig();
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    motion = _useTokens.motion;
+  var horizontal = direction === 'horizontal';
+  var resolvedFadeColor = fadeColor || colors.background || colors.card;
+  var resolvedSize = toPx(size, DEFAULT_SIZE);
+  var uniqueId = React.useId().replace(/[^a-zA-Z0-9]/g, '');
+  var scrollId = "x-scroll-fade-".concat(uniqueId);
+  var contentId = "".concat(scrollId, "-content");
+  var visibilityRef = React.useRef({
+    start: false,
+    end: false
+  });
+  var metricsRef = React.useRef({
+    offset: 0,
+    viewport: 0,
+    content: 0
+  });
+  var _React$useState = React.useState({
+      startVisible: false,
+      endVisible: false
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    _React$useState2$ = _React$useState2[0],
+    startVisible = _React$useState2$.startVisible,
+    endVisible = _React$useState2$.endVisible,
+    setVisibility = _React$useState2[1];
+  var setEdgeVisible = React.useCallback(function (edge, visible) {
+    if (visibilityRef.current[edge] === visible) return;
+    visibilityRef.current[edge] = visible;
+    setVisibility(function (previous) {
+      return edge === 'start' ? _objectSpread(_objectSpread({}, previous), {}, {
+        startVisible: visible
+      }) : _objectSpread(_objectSpread({}, previous), {}, {
+        endVisible: visible
+      });
+    });
+  }, []);
+  var recompute = React.useCallback(function () {
+    var _metricsRef$current = metricsRef.current,
+      offset = _metricsRef$current.offset,
+      viewport = _metricsRef$current.viewport,
+      content = _metricsRef$current.content;
+    var overflows = viewport > 0 && content > viewport + EDGE_THRESHOLD;
+    setEdgeVisible('start', overflows && offset > EDGE_THRESHOLD);
+    setEdgeVisible('end', overflows && offset + viewport < content - EDGE_THRESHOLD);
+  }, [setEdgeVisible]);
+  React.useEffect(function () {
+    var _Taro$createSelectorQ;
+    var query = (_Taro$createSelectorQ = Taro.createSelectorQuery) === null || _Taro$createSelectorQ === void 0 ? void 0 : _Taro$createSelectorQ.call(Taro);
+    if (!query) return;
+    query.select("#".concat(scrollId)).boundingClientRect().select("#".concat(contentId)).boundingClientRect().exec(function (results) {
+      var _ref2 = results !== null && results !== void 0 ? results : [],
+        _ref3 = _slicedToArray(_ref2, 2),
+        viewportRect = _ref3[0],
+        contentRect = _ref3[1];
+      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]);
+  var handleScroll = function handleScroll(event) {
+    onScroll === null || onScroll === void 0 || onScroll(event);
+    var detail = event.detail;
+    var host = event.currentTarget;
+    var hostViewport = horizontal ? host === null || host === void 0 ? void 0 : host.clientWidth : host === null || host === void 0 ? 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();
+  };
+  var renderFade = function renderFade(edge) {
+    var isStart = edge === 'start';
+    var visible = isStart ? startVisible : endVisible;
+    var angle = gradientAngles[horizontal ? 'horizontal' : 'vertical'][edge];
+    var positionStyle = horizontal ? _defineProperty({
+      top: 0,
+      bottom: 0,
+      width: resolvedSize
+    }, isStart ? 'left' : 'right', 0) : _defineProperty({
+      left: 0,
+      right: 0,
+      height: resolvedSize
+    }, isStart ? 'top' : 'bottom', 0);
+    return /*#__PURE__*/_jsx(View, {
+      "data-slot": "scroll-fade-".concat(edge),
+      "data-testid": "".concat(testID, "-fade-").concat(edge),
+      className: "".concat(config.prefixCls, "-scroll-fade__fade"),
+      style: _objectSpread({
+        position: 'absolute',
+        pointerEvents: 'none',
+        zIndex: 1,
+        background: "linear-gradient(".concat(angle, "deg, ").concat(resolvedFadeColor, ", transparent)"),
+        opacity: visible ? 1 : 0,
+        transition: "opacity ".concat(motion.durationsMs.standard, "ms ").concat(motion.easing.standard)
+      }, positionStyle)
+    }, edge);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    "data-slot": "scroll-fade",
+    "data-testid": testID,
+    className: classNames("".concat(config.prefixCls, "-scroll-fade"), "".concat(config.prefixCls, "-scroll-fade--").concat(direction), className),
+    style: _objectSpread({
+      position: 'relative',
+      overflow: 'hidden'
+    }, style),
+    children: [/*#__PURE__*/_jsx(TaroScrollView, {
+      id: scrollId,
+      "data-slot": "scroll-fade-scroller",
+      "data-testid": "".concat(testID, "-scroll"),
+      className: "".concat(config.prefixCls, "-scroll-fade__scroller"),
+      style: {
+        maxHeight: horizontal ? undefined : '100%',
+        maxWidth: horizontal ? '100%' : undefined,
+        height: horizontal ? undefined : '100%',
+        width: '100%'
+      },
+      scrollX: horizontal,
+      scrollY: !horizontal,
+      enhanced: true,
+      showScrollbar: false,
+      onScroll: handleScroll,
+      children: /*#__PURE__*/_jsx(View, {
+        id: contentId,
+        "data-slot": "scroll-fade-content",
+        className: contentClassName,
+        style: _objectSpread({
+          display: 'flex',
+          flexDirection: horizontal ? 'row' : 'column',
+          width: horizontal ? 'max-content' : '100%',
+          minWidth: horizontal ? '100%' : undefined
+        }, contentStyle),
+        children: children
+      })
+    }), edges !== 'end' ? renderFade('start') : null, edges !== 'start' ? renderFade('end') : null]
+  });
+};
+ScrollFade.displayName = 'ScrollFade';
+export default ScrollFade;

package/es/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/es/components/scrollFade/types.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/components/scrollView/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as ScrollView } from "./scrollView";
+export { default } from "./scrollView";

package/es/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/es/components/scrollView/scrollView.js

@@ -0,0 +1,270 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "horizontal", "scrollX", "scrollY", "enhanced", "scrollWithAnimation", "showScrollbar", "showsHorizontalScrollIndicator", "showsVerticalScrollIndicator", "bounces", "pagingEnabled", "height", "flex", "scrollContainerClassName", "onScrollToTop", "onScrollToTopWithOffset", "onScrollToEnd", "onEndReachedThreshold", "scrollTop", "scrollLeft", "contentOffset", "upperThreshold", "lowerThreshold", "refreshing", "refreshControl", "nestedScrollEnabled", "refresherEnabled", "refresherTriggered", "onScroll", "onScrollStart", "onScrollEnd", "onScrollBeginDrag", "onScrollEndDrag", "onTouchStart", "onTouchMove", "onTouchEnd", "onTouchCancel", "onMouseDown", "onMouseUp", "onWheel", "onScrollToUpper", "onScrollToLower", "onRefresherPulling", "className", "style", "testID", "bgVariant"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useCallback, useRef } from 'react';
+import { ScrollView as TaroScrollView, View } from '@tarojs/components';
+import { classNames } from "../../utils";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function toLength(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+}
+var ScrollView = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
+  var _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _toLength;
+  var children = props.children,
+    horizontal = props.horizontal,
+    scrollX = props.scrollX,
+    scrollY = props.scrollY,
+    enhanced = props.enhanced,
+    _props$scrollWithAnim = props.scrollWithAnimation,
+    scrollWithAnimation = _props$scrollWithAnim === void 0 ? false : _props$scrollWithAnim,
+    _props$showScrollbar = props.showScrollbar,
+    showScrollbar = _props$showScrollbar === void 0 ? true : _props$showScrollbar,
+    showsHorizontalScrollIndicator = props.showsHorizontalScrollIndicator,
+    showsVerticalScrollIndicator = props.showsVerticalScrollIndicator,
+    _props$bounces = props.bounces,
+    bounces = _props$bounces === void 0 ? true : _props$bounces,
+    _props$pagingEnabled = props.pagingEnabled,
+    pagingEnabled = _props$pagingEnabled === void 0 ? false : _props$pagingEnabled,
+    height = props.height,
+    _props$flex = props.flex,
+    flex = _props$flex === void 0 ? true : _props$flex,
+    scrollContainerClassName = props.scrollContainerClassName,
+    onScrollToTop = props.onScrollToTop,
+    onScrollToTopWithOffset = props.onScrollToTopWithOffset,
+    onScrollToEnd = props.onScrollToEnd,
+    onEndReachedThreshold = props.onEndReachedThreshold,
+    scrollTop = props.scrollTop,
+    scrollLeft = props.scrollLeft,
+    contentOffset = props.contentOffset,
+    _props$upperThreshold = props.upperThreshold,
+    upperThreshold = _props$upperThreshold === void 0 ? 50 : _props$upperThreshold,
+    lowerThreshold = props.lowerThreshold,
+    _props$refreshing = props.refreshing,
+    refreshing = _props$refreshing === void 0 ? false : _props$refreshing,
+    refreshControl = props.refreshControl,
+    _props$nestedScrollEn = props.nestedScrollEnabled,
+    nestedScrollEnabled = _props$nestedScrollEn === void 0 ? false : _props$nestedScrollEn,
+    refresherEnabled = props.refresherEnabled,
+    refresherTriggered = props.refresherTriggered,
+    onScroll = props.onScroll,
+    onScrollStart = props.onScrollStart,
+    onScrollEnd = props.onScrollEnd,
+    onScrollBeginDrag = props.onScrollBeginDrag,
+    onScrollEndDrag = props.onScrollEndDrag,
+    onTouchStart = props.onTouchStart,
+    onTouchMove = props.onTouchMove,
+    onTouchEnd = props.onTouchEnd,
+    onTouchCancel = props.onTouchCancel,
+    onMouseDown = props.onMouseDown,
+    onMouseUp = props.onMouseUp,
+    onWheel = props.onWheel,
+    onScrollToUpper = props.onScrollToUpper,
+    onScrollToLower = props.onScrollToLower,
+    onRefresherPulling = props.onRefresherPulling,
+    className = props.className,
+    style = props.style,
+    testID = props.testID,
+    bgVariant = props.bgVariant,
+    nativeProps = _objectWithoutProperties(props, _excluded);
+  var resolvedHorizontal = (_ref = horizontal !== null && horizontal !== void 0 ? horizontal : scrollX) !== null && _ref !== void 0 ? _ref : false;
+  var resolvedScrollX = scrollX !== null && scrollX !== void 0 ? scrollX : resolvedHorizontal;
+  var resolvedScrollY = scrollY !== null && scrollY !== void 0 ? scrollY : !resolvedHorizontal;
+  var resolvedShowScrollbar = (_ref2 = resolvedHorizontal ? showsHorizontalScrollIndicator : showsVerticalScrollIndicator) !== null && _ref2 !== void 0 ? _ref2 : showScrollbar;
+  var resolvedLowerThreshold = (_ref3 = onEndReachedThreshold !== null && onEndReachedThreshold !== void 0 ? onEndReachedThreshold : lowerThreshold) !== null && _ref3 !== void 0 ? _ref3 : 50;
+  var resolvedEnhanced = enhanced || pagingEnabled || bounces === false || resolvedShowScrollbar === false;
+  var lastOffsetRef = useRef({
+    x: (_ref4 = scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : contentOffset === null || contentOffset === void 0 ? void 0 : contentOffset.x) !== null && _ref4 !== void 0 ? _ref4 : 0,
+    y: (_ref5 = scrollTop !== null && scrollTop !== void 0 ? scrollTop : contentOffset === null || contentOffset === void 0 ? void 0 : contentOffset.y) !== null && _ref5 !== void 0 ? _ref5 : 0
+  });
+  if (scrollLeft !== undefined) lastOffsetRef.current.x = scrollLeft;else if ((contentOffset === null || contentOffset === void 0 ? void 0 : contentOffset.x) !== undefined) lastOffsetRef.current.x = contentOffset.x;
+  if (scrollTop !== undefined) lastOffsetRef.current.y = scrollTop;else if ((contentOffset === null || contentOffset === void 0 ? void 0 : contentOffset.y) !== undefined) lastOffsetRef.current.y = contentOffset.y;
+  var resolvedScrollLeft = (_ref6 = scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : contentOffset === null || contentOffset === void 0 ? void 0 : contentOffset.x) !== null && _ref6 !== void 0 ? _ref6 : lastOffsetRef.current.x;
+  var resolvedScrollTop = (_ref7 = scrollTop !== null && scrollTop !== void 0 ? scrollTop : contentOffset === null || contentOffset === void 0 ? void 0 : contentOffset.y) !== null && _ref7 !== void 0 ? _ref7 : lastOffsetRef.current.y;
+  var isNearEndRef = useRef(false);
+  var hasReportedTopRef = useRef(false);
+  var isHostAtTopRef = useRef(resolvedScrollTop === 0);
+  var isDraggingRef = useRef(false);
+  var touchStartYRef = useRef(null);
+  var setHostRef = useCallback(function (node) {
+    if (typeof forwardedRef === 'function') forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  var surfaceBackgroundColor = bgVariant ? "var(--x-".concat(bgVariant, ")") : undefined;
+  var startDrag = function startDrag(event) {
+    if (!isDraggingRef.current) {
+      isDraggingRef.current = true;
+      onScrollBeginDrag === null || onScrollBeginDrag === void 0 || onScrollBeginDrag(event);
+    }
+  };
+  var endDrag = function endDrag(event) {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    touchStartYRef.current = null;
+    onScrollEndDrag === null || onScrollEndDrag === void 0 || onScrollEndDrag(event);
+  };
+  var updateTopStateFromHost = function updateTopStateFromHost(event) {
+    var _event$currentTarget;
+    var hostScrollTop = (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.scrollTop;
+    if (typeof hostScrollTop === 'number') isHostAtTopRef.current = hostScrollTop === 0;
+  };
+  var handleScroll = function handleScroll(event) {
+    var _currentTarget$client, _currentTarget$client2;
+    var detail = event.detail;
+    lastOffsetRef.current = {
+      x: detail.scrollLeft,
+      y: detail.scrollTop
+    };
+    onScroll === null || onScroll === void 0 || onScroll(event);
+    var currentTarget = event.currentTarget;
+    var offset = resolvedHorizontal ? detail.scrollLeft : detail.scrollTop;
+    var extent = resolvedHorizontal ? detail.scrollWidth : detail.scrollHeight;
+    var viewport = resolvedHorizontal ? (_currentTarget$client = currentTarget.clientWidth) !== null && _currentTarget$client !== void 0 ? _currentTarget$client : 0 : (_currentTarget$client2 = currentTarget.clientHeight) !== null && _currentTarget$client2 !== void 0 ? _currentTarget$client2 : 0;
+    if (!resolvedHorizontal) {
+      var isAtTop = detail.scrollTop === 0;
+      if (isAtTop && !hasReportedTopRef.current) onScrollToTop === null || onScrollToTop === void 0 || onScrollToTop();
+      hasReportedTopRef.current = isAtTop;
+      isHostAtTopRef.current = isAtTop;
+    }
+    if (extent > 0 && viewport > 0) {
+      var isNearEnd = extent - viewport - offset < resolvedLowerThreshold;
+      if (isNearEnd && !isNearEndRef.current) onScrollToEnd === null || onScrollToEnd === void 0 || onScrollToEnd();
+      isNearEndRef.current = isNearEnd;
+    }
+  };
+  var handleScrollToUpper = function handleScrollToUpper(event) {
+    if (!hasReportedTopRef.current) onScrollToTop === null || onScrollToTop === void 0 || onScrollToTop();
+    hasReportedTopRef.current = true;
+    isHostAtTopRef.current = true;
+    onScrollToUpper === null || onScrollToUpper === void 0 || onScrollToUpper(event);
+  };
+  var handleScrollToLower = function handleScrollToLower(event) {
+    if (!isNearEndRef.current) onScrollToEnd === null || onScrollToEnd === void 0 || onScrollToEnd();
+    isNearEndRef.current = true;
+    onScrollToLower === null || onScrollToLower === void 0 || onScrollToLower(event);
+  };
+  var handleScrollStart = function handleScrollStart(event) {
+    onScrollStart === null || onScrollStart === void 0 || onScrollStart(event);
+    startDrag(event);
+  };
+  var handleScrollEnd = function handleScrollEnd(event) {
+    onScrollEnd === null || onScrollEnd === void 0 || onScrollEnd(event);
+    endDrag(event);
+  };
+  var handleRefresherPulling = function handleRefresherPulling(event) {
+    if (!isDraggingRef.current) onScrollToTopWithOffset === null || onScrollToTopWithOffset === void 0 || onScrollToTopWithOffset();
+    onRefresherPulling === null || onRefresherPulling === void 0 || onRefresherPulling(event);
+  };
+  var handleTouchStart = function handleTouchStart(event) {
+    var _pointerEvent$touches, _pointerEvent$touches2;
+    onTouchStart === null || onTouchStart === void 0 || onTouchStart(event);
+    var pointerEvent = event;
+    updateTopStateFromHost(pointerEvent);
+    touchStartYRef.current = (_pointerEvent$touches = (_pointerEvent$touches2 = pointerEvent.touches) === null || _pointerEvent$touches2 === void 0 || (_pointerEvent$touches2 = _pointerEvent$touches2[0]) === null || _pointerEvent$touches2 === void 0 ? void 0 : _pointerEvent$touches2.clientY) !== null && _pointerEvent$touches !== void 0 ? _pointerEvent$touches : null;
+    startDrag(event);
+  };
+  var handleTouchMove = function handleTouchMove(event) {
+    var _pointerEvent$touches3;
+    onTouchMove === null || onTouchMove === void 0 || onTouchMove(event);
+    var pointerEvent = event;
+    updateTopStateFromHost(pointerEvent);
+    var currentY = (_pointerEvent$touches3 = pointerEvent.touches) === null || _pointerEvent$touches3 === void 0 || (_pointerEvent$touches3 = _pointerEvent$touches3[0]) === null || _pointerEvent$touches3 === void 0 ? void 0 : _pointerEvent$touches3.clientY;
+    if (!resolvedHorizontal && onScrollToTopWithOffset && isHostAtTopRef.current && touchStartYRef.current !== null && currentY !== undefined && currentY > touchStartYRef.current) {
+      onScrollToTopWithOffset();
+    }
+  };
+  var handleTouchEnd = function handleTouchEnd(event) {
+    onTouchEnd === null || onTouchEnd === void 0 || onTouchEnd(event);
+    endDrag(event);
+  };
+  var handleTouchCancel = function handleTouchCancel(event) {
+    onTouchCancel === null || onTouchCancel === void 0 || onTouchCancel(event);
+    endDrag(event);
+  };
+  var handleMouseDown = function handleMouseDown(event) {
+    onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
+    updateTopStateFromHost(event);
+    startDrag(event);
+  };
+  var handleMouseUp = function handleMouseUp(event) {
+    onMouseUp === null || onMouseUp === void 0 || onMouseUp(event);
+    endDrag(event);
+  };
+  var handleWheel = function handleWheel(event) {
+    var _event$deltaY;
+    onWheel === null || onWheel === void 0 || onWheel(event);
+    updateTopStateFromHost(event);
+    if (!resolvedHorizontal && onScrollToTopWithOffset && isHostAtTopRef.current && ((_event$deltaY = event.deltaY) !== null && _event$deltaY !== void 0 ? _event$deltaY : 0) < 0) {
+      onScrollToTopWithOffset();
+    }
+  };
+  return /*#__PURE__*/_jsxs(TaroScrollView, _objectSpread(_objectSpread({}, nativeProps), {}, {
+    ref: setHostRef,
+    "data-slot": "scroll-view-root",
+    "data-bounces": bounces ? 'true' : undefined,
+    "data-direction": resolvedHorizontal ? 'horizontal' : 'vertical',
+    "data-flex": flex ? 'true' : undefined,
+    "data-paging": pagingEnabled ? 'true' : undefined,
+    "data-refreshing": refreshing ? 'true' : undefined,
+    "data-bg-variant": bgVariant,
+    "data-testid": testID,
+    className: classNames('x-scroll-view', resolvedShowScrollbar ? 'x-scroll-view--show-scrollbar' : 'x-scroll-view--hide-scrollbar', scrollContainerClassName, className),
+    style: _objectSpread({
+      boxSizing: 'border-box',
+      height: flex ? '100%' : (_toLength = toLength(height)) !== null && _toLength !== void 0 ? _toLength : 'auto',
+      minHeight: flex ? '100%' : undefined,
+      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: bounces,
+    pagingEnabled: pagingEnabled,
+    scrollWithAnimation: scrollWithAnimation,
+    showScrollbar: resolvedShowScrollbar,
+    scrollTop: resolvedScrollTop,
+    scrollLeft: resolvedScrollLeft,
+    upperThreshold: upperThreshold,
+    lowerThreshold: resolvedLowerThreshold,
+    refresherEnabled: refresherEnabled !== null && refresherEnabled !== void 0 ? refresherEnabled : Boolean(refreshControl),
+    refresherTriggered: refresherTriggered !== null && refresherTriggered !== void 0 ? refresherTriggered : refreshing,
+    onScroll: handleScroll,
+    onScrollStart: onScrollStart || onScrollBeginDrag ? handleScrollStart : undefined,
+    onScrollEnd: onScrollEnd || onScrollEndDrag ? handleScrollEnd : undefined,
+    onTouchStart: onTouchStart || onScrollBeginDrag ? handleTouchStart : undefined,
+    onTouchMove: onTouchMove || onScrollToTopWithOffset ? handleTouchMove : undefined,
+    onTouchEnd: onTouchEnd || onScrollEndDrag ? handleTouchEnd : undefined,
+    onTouchCancel: onTouchCancel || onScrollEndDrag ? handleTouchCancel : undefined,
+    onMouseDown: onMouseDown || onScrollBeginDrag ? handleMouseDown : undefined,
+    onMouseUp: onMouseUp || onScrollEndDrag ? handleMouseUp : undefined,
+    onWheel: onWheel || onScrollToTopWithOffset ? handleWheel : undefined,
+    onScrollToLower: handleScrollToLower,
+    onScrollToUpper: handleScrollToUpper,
+    onRefresherPulling: handleRefresherPulling,
+    children: [refreshControl && refreshing ? /*#__PURE__*/_jsx(View, {
+      className: "x-scroll-view__refresh",
+      "data-slot": "scroll-view-refresh",
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '16px 0'
+      },
+      children: refreshControl
+    }) : null, children]
+  }));
+});
+ScrollView.displayName = 'ScrollView';
+export default ScrollView;

package/es/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/es/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

package/es/components/scrollView/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/searchBar/index.d.ts

@@ -0,0 +1,5 @@
+export { SearchBar } from './searchBar';
+export type { SearchBarProps, SearchBarRef, SearchBarVariant } from './types';
+export { useSearchBarTokens, useSearchBarColors } from './tokens';
+export { default } from './searchBar';
+//# sourceMappingURL=index.d.ts.map

package/es/components/searchBar/index.js

@@ -0,0 +1,3 @@
+export { SearchBar } from "./searchBar";
+export { useSearchBarTokens, useSearchBarColors } from "./tokens";
+export { default } from "./searchBar";

package/es/components/searchBar/searchBar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * SearchBar Component
+ * With variant/size support
+ */
+import React from 'react';
+import type { SearchBarProps, SearchBarRef } from './types';
+export declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<SearchBarRef>>;
+export default SearchBar;
+//# sourceMappingURL=searchBar.d.ts.map