@hanwenbo/x-taro-ui 0.0.1

package/es/components/rollingNumber/rollingNumber.js

@@ -0,0 +1,298 @@
+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; }
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { useTheme } from "../../theme";
+import { classNames } from "../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+var FRAME_MS = 32;
+function easeOutCubic(progress) {
+  return 1 - Math.pow(1 - progress, 3);
+}
+function normalizeDigits(digits) {
+  if (!Number.isFinite(digits)) return 2;
+  return Math.max(1, Math.floor(digits !== null && digits !== void 0 ? digits : 2));
+}
+function toDigitString(value, digits) {
+  var maxValue = Math.pow(10, Math.min(digits, 15)) - 1;
+  return Math.max(0, Math.min(maxValue, Math.floor(value))).toString().padStart(digits, '0').slice(-digits);
+}
+var DigitReel = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var index = _ref.index,
+    cellHeight = _ref.cellHeight,
+    reelWidth = _ref.reelWidth,
+    fontSize = _ref.fontSize,
+    color = _ref.color,
+    fontWeight = _ref.fontWeight,
+    fontFamily = _ref.fontFamily,
+    spinDurationMs = _ref.spinDurationMs,
+    revealDurationMs = _ref.revealDurationMs,
+    easing = _ref.easing;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAnimating = _useState4[0],
+    setIsAnimating = _useState4[1];
+  var offsetRef = useRef(0);
+  var timerRef = useRef(null);
+  var updateOffset = useCallback(function (nextOffset) {
+    offsetRef.current = nextOffset;
+    setOffset(nextOffset);
+  }, []);
+  var clearTimer = useCallback(function () {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  var start = useCallback(function () {
+    clearTimer();
+    setIsAnimating(true);
+    var startedAt = Date.now();
+    var duration = Math.max(1, spinDurationMs);
+    timerRef.current = setInterval(function () {
+      var elapsed = Date.now() - startedAt;
+      updateOffset(elapsed / duration * 10 * cellHeight % (10 * cellHeight));
+    }, FRAME_MS);
+  }, [cellHeight, clearTimer, spinDurationMs, updateOffset]);
+  var reveal = useCallback(function (digit) {
+    clearTimer();
+    setIsAnimating(true);
+    var targetOffset = Math.max(0, Math.min(9, Math.floor(digit))) * cellHeight;
+    var startOffset = offsetRef.current % (10 * cellHeight);
+    var startedAt = Date.now();
+    var duration = Math.max(0, revealDurationMs);
+    if (duration === 0 || startOffset === targetOffset) {
+      updateOffset(targetOffset);
+      setIsAnimating(false);
+      return;
+    }
+    timerRef.current = setInterval(function () {
+      var progress = Math.min((Date.now() - startedAt) / duration, 1);
+      var easedProgress = easing(progress);
+      updateOffset(startOffset + (targetOffset - startOffset) * easedProgress);
+      if (progress >= 1) {
+        clearTimer();
+        updateOffset(targetOffset);
+        setIsAnimating(false);
+      }
+    }, FRAME_MS);
+  }, [cellHeight, clearTimer, easing, revealDurationMs, updateOffset]);
+  var reset = useCallback(function () {
+    clearTimer();
+    updateOffset(0);
+    setIsAnimating(false);
+  }, [clearTimer, updateOffset]);
+  useImperativeHandle(ref, function () {
+    return {
+      start: start,
+      reveal: reveal,
+      reset: reset
+    };
+  }, [reset, reveal, start]);
+  useEffect(function () {
+    return clearTimer;
+  }, [clearTimer]);
+  return /*#__PURE__*/_jsx(View, {
+    className: "x-rolling-number__reel",
+    "data-slot": "rolling-number-reel",
+    "data-index": index,
+    "data-animating": isAnimating ? 'true' : 'false',
+    style: {
+      position: 'relative',
+      width: reelWidth,
+      height: cellHeight,
+      flexShrink: 0,
+      overflow: 'hidden',
+      fontFamily: fontFamily
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      className: "x-rolling-number__track",
+      "data-slot": "rolling-number-track",
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        transform: "translateY(-".concat(offset, "px)"),
+        willChange: 'transform'
+      },
+      children: [].concat(DIGITS, DIGITS).map(function (digit, digitIndex) {
+        return /*#__PURE__*/_jsx(View, {
+          className: "x-rolling-number__digit",
+          "data-slot": "rolling-number-digit",
+          "data-digit": digit,
+          style: {
+            width: reelWidth,
+            height: cellHeight,
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: {
+              fontSize: fontSize,
+              lineHeight: "".concat(cellHeight, "px"),
+              fontWeight: fontWeight,
+              fontFamily: fontFamily,
+              fontVariantNumeric: 'tabular-nums',
+              color: color
+            },
+            children: digit
+          })
+        }, digitIndex);
+      })
+    })
+  });
+});
+DigitReel.displayName = 'DigitReel';
+var RollingNumber = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var value = _ref2.value,
+    _ref2$digits = _ref2.digits,
+    digits = _ref2$digits === void 0 ? 2 : _ref2$digits,
+    _ref2$cellHeight = _ref2.cellHeight,
+    cellHeight = _ref2$cellHeight === void 0 ? 40 : _ref2$cellHeight,
+    _ref2$reelWidth = _ref2.reelWidth,
+    reelWidth = _ref2$reelWidth === void 0 ? 30 : _ref2$reelWidth,
+    fontSize = _ref2.fontSize,
+    _ref2$spinDurationMs = _ref2.spinDurationMs,
+    spinDurationMs = _ref2$spinDurationMs === void 0 ? 800 : _ref2$spinDurationMs,
+    _ref2$revealDurationM = _ref2.revealDurationMs,
+    revealDurationMs = _ref2$revealDurationM === void 0 ? 600 : _ref2$revealDurationM,
+    _ref2$staggerMs = _ref2.staggerMs,
+    staggerMs = _ref2$staggerMs === void 0 ? 120 : _ref2$staggerMs,
+    _ref2$easing = _ref2.easing,
+    easing = _ref2$easing === void 0 ? easeOutCubic : _ref2$easing,
+    color = _ref2.color,
+    _ref2$fontWeight = _ref2.fontWeight,
+    fontWeight = _ref2$fontWeight === void 0 ? 'bold' : _ref2$fontWeight,
+    fontFamily = _ref2.fontFamily,
+    onRevealEnd = _ref2.onRevealEnd,
+    _ref2$loading = _ref2.loading,
+    loading = _ref2$loading === void 0 ? false : _ref2$loading,
+    className = _ref2.className,
+    style = _ref2.style,
+    _ref2$testID = _ref2.testID,
+    testID = _ref2$testID === void 0 ? 'rolling-number' : _ref2$testID,
+    _ref2$ariaLabel = _ref2.ariaLabel,
+    ariaLabel = _ref2$ariaLabel === void 0 ? '滚动数字' : _ref2$ariaLabel,
+    onClick = _ref2.onClick;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var resolvedDigits = normalizeDigits(digits);
+  var resolvedCellHeight = Math.max(1, cellHeight);
+  var resolvedReelWidth = Math.max(1, reelWidth);
+  var resolvedFontSize = fontSize !== null && fontSize !== void 0 ? fontSize : Math.floor(resolvedCellHeight * 0.72);
+  var resolvedColor = color !== null && color !== void 0 ? color : theme.colors.foreground;
+  var reelRefs = useRef([]);
+  var staggerTimeoutsRef = useRef([]);
+  var revealEndTimeoutRef = useRef(null);
+  var clearPendingTimers = useCallback(function () {
+    staggerTimeoutsRef.current.forEach(function (timeoutId) {
+      return clearTimeout(timeoutId);
+    });
+    staggerTimeoutsRef.current = [];
+    if (revealEndTimeoutRef.current) {
+      clearTimeout(revealEndTimeoutRef.current);
+      revealEndTimeoutRef.current = null;
+    }
+  }, []);
+  var start = useCallback(function () {
+    clearPendingTimers();
+    reelRefs.current.forEach(function (reel) {
+      return reel === null || reel === void 0 ? void 0 : reel.start();
+    });
+  }, [clearPendingTimers]);
+  var reveal = useCallback(function (nextValue) {
+    clearPendingTimers();
+    var valueString = toDigitString(nextValue, resolvedDigits);
+    reelRefs.current.slice(0, resolvedDigits).forEach(function (reel, index) {
+      if (!reel) return;
+      var timeoutId = setTimeout(function () {
+        var _valueString$index;
+        return reel.reveal(Number((_valueString$index = valueString[index]) !== null && _valueString$index !== void 0 ? _valueString$index : 0));
+      }, index * Math.max(0, staggerMs));
+      staggerTimeoutsRef.current.push(timeoutId);
+    });
+    var totalDuration = Math.max(0, revealDurationMs) + Math.max(0, resolvedDigits - 1) * Math.max(0, staggerMs);
+    revealEndTimeoutRef.current = setTimeout(function () {
+      return onRevealEnd === null || onRevealEnd === void 0 ? void 0 : onRevealEnd(nextValue);
+    }, totalDuration);
+  }, [clearPendingTimers, onRevealEnd, resolvedDigits, revealDurationMs, staggerMs]);
+  var reset = useCallback(function () {
+    clearPendingTimers();
+    reelRefs.current.forEach(function (reel) {
+      return reel === null || reel === void 0 ? void 0 : reel.reset();
+    });
+  }, [clearPendingTimers]);
+  useImperativeHandle(ref, function () {
+    return {
+      start: start,
+      reveal: reveal,
+      reset: reset
+    };
+  }, [reset, reveal, start]);
+  useEffect(function () {
+    if (loading) {
+      start();
+    } else if (value !== undefined) {
+      reveal(value);
+    } else {
+      reset();
+    }
+    return clearPendingTimers;
+  }, [clearPendingTimers, loading, reset, reveal, start, value]);
+  return /*#__PURE__*/_jsx(View, {
+    className: classNames('x-rolling-number', className),
+    "data-slot": "rolling-number-root",
+    "data-loading": loading ? 'true' : 'false',
+    "data-state": loading ? 'loading' : value !== undefined ? 'revealed' : 'idle',
+    "data-digits": resolvedDigits,
+    "data-testid": testID,
+    ariaRole: "text",
+    ariaLabel: value === undefined ? ariaLabel : "".concat(ariaLabel, " ").concat(value),
+    style: _objectSpread({
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      flexShrink: 0,
+      gap: 4
+    }, style),
+    onClick: onClick,
+    children: Array.from({
+      length: resolvedDigits
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsx(DigitReel, {
+        ref: function ref(instance) {
+          reelRefs.current[index] = instance;
+        },
+        index: index,
+        cellHeight: resolvedCellHeight,
+        reelWidth: resolvedReelWidth,
+        fontSize: resolvedFontSize,
+        color: resolvedColor,
+        fontWeight: fontWeight,
+        fontFamily: fontFamily,
+        spinDurationMs: spinDurationMs,
+        revealDurationMs: revealDurationMs,
+        easing: easing
+      }, index);
+    })
+  });
+});
+RollingNumber.displayName = 'RollingNumber';
+export default RollingNumber;

package/es/components/rollingNumber/types.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+export interface RollingNumberProps {
+    /** Final value. Undefined leaves the component idle unless loading is true. */
+    value?: number;
+    /** Number of reels. Values are padded on the left with zeroes. */
+    digits?: number;
+    /** Height of one digit cell in px. */
+    cellHeight?: number;
+    /** Width of one reel in px. */
+    reelWidth?: number;
+    /** Digit font size in px. Defaults to 72% of cellHeight. */
+    fontSize?: number;
+    /** Duration of one loading spin cycle in ms. */
+    spinDurationMs?: number;
+    /** Duration of the reveal animation in ms. */
+    revealDurationMs?: number;
+    /** Delay between adjacent reels in ms. */
+    staggerMs?: number;
+    /** Custom reveal easing function. */
+    easing?: (progress: number) => number;
+    color?: string;
+    fontWeight?: React.CSSProperties['fontWeight'];
+    fontFamily?: string;
+    onRevealEnd?: (value: number) => void;
+    loading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    testID?: string;
+    ariaLabel?: string;
+    onClick?: () => void;
+}
+export interface RollingNumberRef {
+    /** Start the indefinite loading animation. */
+    start: () => void;
+    /** Reveal a value immediately through the configured reel animation. */
+    reveal: (value: number) => void;
+    /** Stop animations and return every reel to zero. */
+    reset: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/rollingNumber/types.js

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

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

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

package/es/components/safeArea/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { SafeArea, useSafeArea } from "./safeArea";
+export { default } from "./safeArea";

package/es/components/safeArea/safeArea.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SafeAreaInsets, SafeAreaProps } from './types';
+export declare const SafeArea: React.FC<SafeAreaProps>;
+/** Stable zero fallback aligned with x-mobile-ui. CSS env() owns visual insets. */
+export declare const useSafeArea: () => SafeAreaInsets;
+export default SafeArea;
+//# sourceMappingURL=safeArea.d.ts.map

package/es/components/safeArea/safeArea.js

@@ -0,0 +1,74 @@
+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 = ["padding", "paddingTop", "paddingBottom", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
+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 from 'react';
+import { View } from '@tarojs/components';
+import { classNames } from "../../utils";
+import { addCssEnvironmentInset, resolveBlockPaddingEdge, resolvePhysicalPadding, toCssLength } from "../../utils/style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var zeroInsets = Object.freeze({
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+});
+export var SafeArea = function SafeArea(_ref) {
+  var _ref3, _ref4, _ref5, _ref6;
+  var position = _ref.position,
+    top = _ref.top,
+    bottom = _ref.bottom,
+    height = _ref.height,
+    backgroundColor = _ref.backgroundColor,
+    testID = _ref.testID,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  var usesLegacyFlags = top !== undefined || bottom !== undefined;
+  var applyTop = position ? position === 'top' : usesLegacyFlags ? Boolean(top) : true;
+  var applyBottom = position ? position === 'bottom' : usesLegacyFlags ? Boolean(bottom) : true;
+  var dataPosition = position !== null && position !== void 0 ? position : applyTop && applyBottom ? 'both' : applyTop ? 'top' : applyBottom ? 'bottom' : 'none';
+  var _ref2 = style !== null && style !== void 0 ? style : {},
+    padding = _ref2.padding,
+    paddingTop = _ref2.paddingTop,
+    paddingBottom = _ref2.paddingBottom,
+    paddingBlock = _ref2.paddingBlock,
+    paddingBlockStart = _ref2.paddingBlockStart,
+    paddingBlockEnd = _ref2.paddingBlockEnd,
+    customStyle = _objectWithoutProperties(_ref2, _excluded);
+  var normalizedPadding = toCssLength(padding);
+  var topPadding = (_ref3 = (_ref4 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingBlockStart) !== null && _ref4 !== void 0 ? _ref4 : resolveBlockPaddingEdge(paddingBlock, 'start')) !== null && _ref3 !== void 0 ? _ref3 : resolvePhysicalPadding(normalizedPadding, 'top');
+  var bottomPadding = (_ref5 = (_ref6 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingBlockEnd) !== null && _ref6 !== void 0 ? _ref6 : resolveBlockPaddingEdge(paddingBlock, 'end')) !== null && _ref5 !== void 0 ? _ref5 : resolvePhysicalPadding(normalizedPadding, 'bottom');
+  var leftPadding = resolvePhysicalPadding(normalizedPadding, 'left');
+  var rightPadding = resolvePhysicalPadding(normalizedPadding, 'right');
+  return /*#__PURE__*/_jsx(View, {
+    "aria-hidden": children == null ? 'true' : undefined,
+    className: classNames('x-safe-area', className),
+    "data-slot": "safe-area-root",
+    "data-position": dataPosition,
+    "data-testid": testID,
+    style: _objectSpread({
+      width: '100%',
+      boxSizing: 'border-box',
+      paddingLeft: leftPadding,
+      paddingRight: rightPadding,
+      paddingTop: addCssEnvironmentInset(applyTop, 'safe-area-inset-top', topPadding),
+      paddingBottom: addCssEnvironmentInset(applyBottom, 'safe-area-inset-bottom', bottomPadding),
+      height: height,
+      backgroundColor: backgroundColor
+    }, customStyle),
+    children: children
+  });
+};
+
+/** Stable zero fallback aligned with x-mobile-ui. CSS env() owns visual insets. */
+export var useSafeArea = function useSafeArea() {
+  return zeroInsets;
+};
+SafeArea.displayName = 'SafeArea';
+export default SafeArea;

package/es/components/safeArea/types.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface SafeAreaProps {
+    /** Canonical x-mobile-ui position. */
+    position?: 'top' | 'bottom';
+    /** Compatibility flags for wrapping both insets. */
+    top?: boolean;
+    bottom?: boolean;
+    /** Mini-program spacer extensions from the native contract. */
+    height?: number | string;
+    backgroundColor?: string;
+    testID?: string;
+    children?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SafeAreaInsets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/safeArea/types.js

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

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

@@ -0,0 +1,3 @@
+export { ScrollFade, default } from './scrollFade';
+export type { ScrollFadeProps, ScrollFadeDirection, ScrollFadeEdges, ScrollFadeScrollEvent } from './types';
+//# sourceMappingURL=index.d.ts.map

package/es/components/scrollFade/index.js

@@ -0,0 +1 @@
+export { ScrollFade, default } from "./scrollFade";

package/es/components/scrollFade/scrollFade.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 type { ScrollFadeEdges, ScrollFadeProps } from './types';
+export declare const ScrollFade: React.FC<ScrollFadeProps>;
+export type { ScrollFadeEdges, ScrollFadeProps };
+export default ScrollFade;
+//# sourceMappingURL=scrollFade.d.ts.map