@hanwenbo/x-taro-ui 0.0.1

package/es/components/list/list.js

@@ -0,0 +1,420 @@
+var _excluded = ["dataSource", "renderItem", "keyExtractor", "emptyText", "loading", "loadingText", "divider", "header", "headerFontSize", "prefixWidth", "mode", "variant", "children", "className", "style", "testID"],
+  _excluded2 = ["title", "description", "children", "prefix", "suffix", "extra", "footer", "arrow", "size", "clickable", "bordered", "disabled", "onClick", "className", "style", "testID", "onTouchStart", "onTouchEnd", "onTouchCancel"];
+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; }
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import React, { createContext, useContext } from 'react';
+import { Text, View } from '@tarojs/components';
+import { usePressable } from "../../patterns";
+import { designSystemMotion, getListTypographyTokens, useTokens } from "../../theme";
+import { classNames } from "../../utils";
+import { iconSlot } from "../../utils/iconSlot";
+import { useDisabled, useSize } from "../configProvider";
+import { Icon } from "../icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ListPrefixWidthContext = /*#__PURE__*/createContext(undefined);
+var ListDividerContext = /*#__PURE__*/createContext(true);
+var ListItemPositionContext = /*#__PURE__*/createContext({
+  managed: false,
+  isLast: false
+});
+var rowMetrics = {
+  mini: {
+    paddingY: 6,
+    paddingX: 12,
+    minHeight: 32
+  },
+  small: {
+    paddingY: 8,
+    paddingX: 16,
+    minHeight: 40
+  },
+  middle: {
+    paddingY: 12,
+    paddingX: 16,
+    minHeight: 52
+  },
+  large: {
+    paddingY: 16,
+    paddingX: 20,
+    minHeight: 64
+  }
+};
+var renderTextNode = function renderTextNode(node, style) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: style,
+      children: node
+    });
+  }
+  return node;
+};
+var hasRenderableNode = function hasRenderableNode(node) {
+  return node !== null && node !== undefined && node !== false;
+};
+var flattenRenderableNodes = function flattenRenderableNodes(nodes) {
+  var flattened = [];
+  React.Children.forEach(nodes, function (node) {
+    if (!hasRenderableNode(node)) return;
+    if ( /*#__PURE__*/React.isValidElement(node) && node.type === React.Fragment) {
+      flattened.push.apply(flattened, _toConsumableArray(flattenRenderableNodes(node.props.children)));
+      return;
+    }
+    flattened.push(node);
+  });
+  return flattened;
+};
+var resolveDataKey = function resolveDataKey(item, index, keyExtractor) {
+  if (keyExtractor) return keyExtractor(item, index);
+  if (item && _typeof(item) === 'object') {
+    var _record$key;
+    var record = item;
+    var key = (_record$key = record.key) !== null && _record$key !== void 0 ? _record$key : record.id;
+    if (typeof key === 'string' || typeof key === 'number') return key;
+  }
+  return index;
+};
+var ListRoot = function ListRoot(_ref) {
+  var dataSource = _ref.dataSource,
+    renderItem = _ref.renderItem,
+    keyExtractor = _ref.keyExtractor,
+    _ref$emptyText = _ref.emptyText,
+    emptyText = _ref$emptyText === void 0 ? '暂无数据' : _ref$emptyText,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? '加载中…' : _ref$loadingText,
+    _ref$divider = _ref.divider,
+    divider = _ref$divider === void 0 ? true : _ref$divider,
+    header = _ref.header,
+    _ref$headerFontSize = _ref.headerFontSize,
+    headerFontSize = _ref$headerFontSize === void 0 ? 14 : _ref$headerFontSize,
+    prefixWidth = _ref.prefixWidth,
+    mode = _ref.mode,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'plain' : _ref$variant,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    testID = _ref.testID,
+    viewProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors;
+  var resolvedMode = mode === 'card' || variant === 'card' ? 'card' : 'default';
+  var outlined = variant === 'outline';
+  var usesChildren = children !== undefined && children !== null;
+  var contentEntries = usesChildren ? flattenRenderableNodes(children).map(function (node, index) {
+    return {
+      key: /*#__PURE__*/React.isValidElement(node) && node.key !== null ? node.key : "child-".concat(index),
+      node: node
+    };
+  }) : dataSource && renderItem ? dataSource.flatMap(function (item, index) {
+    var dataKey = resolveDataKey(item, index, keyExtractor);
+    return flattenRenderableNodes(renderItem(item, index)).map(function (node, nodeIndex) {
+      return {
+        key: nodeIndex === 0 ? dataKey : "".concat(String(dataKey), "-").concat(nodeIndex),
+        node: node
+      };
+    });
+  }) : [];
+  var hasContent = contentEntries.length > 0;
+  return /*#__PURE__*/_jsx(ListPrefixWidthContext.Provider, {
+    value: prefixWidth,
+    children: /*#__PURE__*/_jsx(ListDividerContext.Provider, {
+      value: divider,
+      children: /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({}, viewProps), {}, {
+        className: classNames('x-list', "x-list--".concat(resolvedMode), outlined && 'x-list--outline', loading && 'x-list--loading', !loading && !hasContent && 'x-list--empty', className),
+        "data-slot": "list-root",
+        "data-mode": resolvedMode,
+        "data-variant": outlined ? 'outline' : resolvedMode,
+        "data-testid": testID,
+        style: _objectSpread({
+          boxSizing: 'border-box',
+          backgroundColor: resolvedMode === 'card' ? colors.card : colors.muted,
+          borderRadius: resolvedMode === 'card' || outlined ? 'var(--x-list-card-radius)' : 0,
+          borderWidth: resolvedMode === 'card' || outlined ? 1 : 0,
+          borderStyle: 'solid',
+          borderColor: colors.border,
+          overflow: resolvedMode === 'card' || outlined ? 'hidden' : 'visible',
+          boxShadow: resolvedMode === 'card' ? 'var(--x-list-card-shadow)' : 'none'
+        }, style),
+        children: [hasRenderableNode(header) ? /*#__PURE__*/_jsx(View, {
+          className: "x-list__header",
+          "data-slot": "list-header",
+          style: {
+            paddingTop: 12,
+            paddingBottom: 12,
+            paddingLeft: 16,
+            paddingRight: 16,
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: colors.border,
+            fontSize: headerFontSize,
+            lineHeight: "".concat(headerFontSize + 6, "px"),
+            fontWeight: '500',
+            color: colors['muted-foreground']
+          },
+          children: header
+        }) : null, /*#__PURE__*/_jsx(View, {
+          className: "x-list__body",
+          "data-slot": "list-body",
+          style: {
+            backgroundColor: colors.card
+          },
+          children: loading ? /*#__PURE__*/_jsx(View, {
+            className: "x-list__loading",
+            "data-slot": "list-loading",
+            style: {
+              padding: 24,
+              textAlign: 'center'
+            },
+            children: renderTextNode(loadingText, {
+              color: colors['muted-foreground']
+            })
+          }) : hasContent ? contentEntries.map(function (_ref2, index) {
+            var key = _ref2.key,
+              node = _ref2.node;
+            return /*#__PURE__*/_jsx(ListItemPositionContext.Provider, {
+              value: {
+                managed: true,
+                isLast: index === contentEntries.length - 1
+              },
+              children: node
+            }, key);
+          }) : /*#__PURE__*/_jsx(View, {
+            className: "x-list__empty",
+            "data-slot": "list-empty",
+            style: {
+              padding: 48,
+              textAlign: 'center'
+            },
+            children: renderTextNode(emptyText, {
+              color: colors['muted-foreground']
+            })
+          })
+        })]
+      }))
+    })
+  });
+};
+export var ListItem = function ListItem(_ref3) {
+  var title = _ref3.title,
+    description = _ref3.description,
+    children = _ref3.children,
+    prefix = _ref3.prefix,
+    suffix = _ref3.suffix,
+    extra = _ref3.extra,
+    footer = _ref3.footer,
+    arrow = _ref3.arrow,
+    sizeProp = _ref3.size,
+    clickable = _ref3.clickable,
+    bordered = _ref3.bordered,
+    disabledProp = _ref3.disabled,
+    onClick = _ref3.onClick,
+    className = _ref3.className,
+    style = _ref3.style,
+    testID = _ref3.testID,
+    _onTouchStart = _ref3.onTouchStart,
+    _onTouchEnd = _ref3.onTouchEnd,
+    _onTouchCancel = _ref3.onTouchCancel,
+    viewProps = _objectWithoutProperties(_ref3, _excluded2);
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors;
+  var providerSize = useSize();
+  var providerDisabled = useDisabled();
+  var listPrefixWidth = useContext(ListPrefixWidthContext);
+  var listDivider = useContext(ListDividerContext);
+  var itemPosition = useContext(ListItemPositionContext);
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : providerSize;
+  var disabled = Boolean(disabledProp || providerDisabled);
+  var isClickable = clickable !== null && clickable !== void 0 ? clickable : Boolean(onClick);
+  var showArrow = arrow === undefined ? isClickable : arrow;
+  var hasMainContent = [title, children, description].some(hasRenderableNode);
+  var metrics = rowMetrics[size];
+  var typography = getListTypographyTokens(size);
+  var resolvedBordered = bordered !== null && bordered !== void 0 ? bordered : listDivider;
+  var showDivider = resolvedBordered && !(itemPosition.managed && itemPosition.isLast);
+  var _usePressable = usePressable({
+      disabled: disabled || !isClickable,
+      onPress: onClick,
+      scale: 0.995
+    }),
+    pressed = _usePressable.pressed,
+    handlers = _usePressable.handlers,
+    pressStyle = _usePressable.style;
+  var prefixSlotWidth = listPrefixWidth !== null && listPrefixWidth !== void 0 ? listPrefixWidth : 24;
+  var composedHandlers = _objectSpread(_objectSpread({}, handlers), {}, {
+    onTouchStart: function onTouchStart(event) {
+      handlers.onTouchStart();
+      _onTouchStart === null || _onTouchStart === void 0 || _onTouchStart(event);
+    },
+    onTouchEnd: function onTouchEnd(event) {
+      handlers.onTouchEnd();
+      _onTouchEnd === null || _onTouchEnd === void 0 || _onTouchEnd(event);
+    },
+    onTouchCancel: function onTouchCancel(event) {
+      handlers.onTouchCancel();
+      _onTouchCancel === null || _onTouchCancel === void 0 || _onTouchCancel(event);
+    }
+  });
+  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread(_objectSpread({}, viewProps), {}, {
+    role: isClickable ? 'button' : undefined,
+    ariaRole: isClickable ? 'button' : undefined,
+    ariaDisabled: disabled ? 'true' : 'false',
+    className: classNames('x-list-item', isClickable && 'x-list-item--clickable', pressed && 'x-list-item--pressed', disabled && 'x-list-item--disabled', className),
+    "data-slot": "list-item",
+    "data-clickable": isClickable ? 'true' : 'false',
+    "data-disabled": disabled ? 'true' : 'false',
+    "data-last": itemPosition.managed && itemPosition.isLast ? 'true' : undefined,
+    "data-size": size,
+    "data-testid": testID,
+    style: _objectSpread(_objectSpread({
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: hasRenderableNode(footer) ? 'wrap' : 'nowrap',
+      minHeight: metrics.minHeight,
+      boxSizing: 'border-box',
+      paddingTop: metrics.paddingY,
+      paddingBottom: metrics.paddingY,
+      paddingLeft: metrics.paddingX,
+      paddingRight: metrics.paddingX,
+      borderBottomWidth: showDivider ? 1 : 0,
+      borderBottomStyle: 'solid',
+      borderBottomColor: colors.border,
+      backgroundColor: pressed ? colors.accent : colors.card,
+      opacity: disabled ? 0.5 : 1
+    }, pressStyle), {}, {
+      transition: "background-color ".concat(designSystemMotion.durationsMs.emphasis, "ms ").concat(designSystemMotion.easing.standard, ", transform ").concat(designSystemMotion.durationsMs.emphasis, "ms ").concat(designSystemMotion.easing.standard)
+    }, style)
+  }, composedHandlers), {}, {
+    children: [hasRenderableNode(prefix) ? /*#__PURE__*/_jsx(View, {
+      "data-slot": "list-prefix",
+      style: iconSlot(prefixSlotWidth, {
+        flexShrink: 0,
+        width: prefixSlotWidth,
+        minWidth: prefixSlotWidth,
+        marginRight: 12
+      }),
+      children: prefix
+    }) : null, hasMainContent ? /*#__PURE__*/_jsx(View, {
+      "data-slot": "list-item-main",
+      style: {
+        display: 'flex',
+        minWidth: 0,
+        flex: 1,
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsxs(View, {
+        "data-slot": "list-content",
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: 0,
+          flex: 1,
+          gap: 2
+        },
+        children: [hasRenderableNode(title) ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "list-title",
+          style: {
+            whiteSpace: 'normal',
+            overflowWrap: 'anywhere',
+            fontSize: typography.titleFontSize,
+            lineHeight: "".concat(Math.max(14, typography.titleFontSize + 4), "px"),
+            fontWeight: '400',
+            color: colors['muted-foreground']
+          },
+          children: title
+        }) : null, hasRenderableNode(children) ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "list-body-text",
+          style: {
+            fontSize: typography.titleFontSize,
+            lineHeight: "".concat(Math.max(14, typography.titleFontSize + 4), "px"),
+            fontWeight: '400',
+            color: colors.foreground
+          },
+          children: children
+        }) : null, hasRenderableNode(description) ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "list-description",
+          style: {
+            minHeight: size === 'mini' ? 14 : size === 'small' ? 16 : size === 'middle' ? 20 : 24,
+            fontSize: typography.descriptionFontSize,
+            lineHeight: size === 'mini' ? '14px' : size === 'small' ? '16px' : size === 'middle' ? '20px' : '24px',
+            color: colors['muted-foreground']
+          },
+          children: description
+        }) : null]
+      })
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      "data-slot": "list-extra-wrap",
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        flexShrink: 0,
+        marginLeft: 12
+      },
+      children: [hasRenderableNode(extra) ? /*#__PURE__*/_jsx(View, {
+        "data-slot": "list-extra",
+        style: {
+          fontSize: 16,
+          lineHeight: '24px',
+          fontWeight: '400',
+          color: colors['muted-foreground']
+        },
+        children: extra
+      }) : null, hasRenderableNode(suffix) ? /*#__PURE__*/_jsx(View, {
+        "data-slot": "list-suffix",
+        style: {
+          fontSize: 16,
+          lineHeight: '24px',
+          fontWeight: '400',
+          color: colors['muted-foreground']
+        },
+        children: suffix
+      }) : null, hasRenderableNode(showArrow) ? /*#__PURE__*/_jsx(View, {
+        "data-slot": "list-arrow",
+        style: iconSlot(16, {
+          fontSize: 16,
+          lineHeight: '16px',
+          color: colors['muted-foreground']
+        }),
+        children: showArrow === true ? /*#__PURE__*/_jsx(Icon, {
+          name: "ChevronRight",
+          size: 16,
+          color: colors['muted-foreground'],
+          block: true
+        }) : showArrow
+      }) : null]
+    }), hasRenderableNode(footer) ? /*#__PURE__*/_jsx(View, {
+      "data-slot": "list-footer",
+      style: {
+        flexBasis: '100%',
+        width: '100%',
+        marginTop: 8,
+        fontSize: 16,
+        lineHeight: '24px',
+        fontWeight: '400',
+        color: colors.foreground
+      },
+      children: footer
+    }) : null]
+  }));
+};
+ListItem.displayName = 'List.Item';
+export var List = Object.assign(ListRoot, {
+  displayName: 'List',
+  Item: ListItem
+});
+export default List;

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

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import type { ViewProps as TaroViewProps } from '@tarojs/components/types/View';
+import type { SizeVariant } from '../../theme/types';
+declare type NativeListViewProps = Omit<TaroViewProps, 'children' | 'className' | 'ref' | 'style'>;
+declare type NativeListItemViewProps = Omit<TaroViewProps, 'children' | 'className' | 'onClick' | 'ref' | 'style'>;
+export declare type ListVariant = 'plain' | 'card' | 'outline';
+export interface ListProps<T = unknown> extends NativeListViewProps {
+    dataSource?: T[];
+    renderItem?: (item: T, index: number) => ReactNode;
+    keyExtractor?: (item: T, index: number) => React.Key;
+    emptyText?: ReactNode;
+    loading?: boolean;
+    loadingText?: ReactNode;
+    divider?: boolean;
+    header?: ReactNode;
+    headerFontSize?: number;
+    prefixWidth?: number | string;
+    /** x-mobile-ui canonical modes. `plain` is retained as a compatibility alias. */
+    mode?: 'default' | 'card' | 'plain';
+    variant?: ListVariant;
+    children?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Native-compatible stable test id. */
+    testID?: string;
+}
+export interface ListItemProps extends NativeListItemViewProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Main body content, aligned with x-mobile-ui. */
+    children?: ReactNode;
+    prefix?: ReactNode;
+    /** Legacy trailing content alias. */
+    suffix?: ReactNode;
+    extra?: ReactNode;
+    footer?: ReactNode;
+    arrow?: boolean | ReactNode;
+    size?: SizeVariant;
+    clickable?: boolean;
+    bordered?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Native-compatible stable test id. */
+    testID?: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/es/components/list/types.js

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

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

@@ -0,0 +1,5 @@
+export * from './types';
+export { default as Mask } from './mask';
+export { default } from './mask';
+export { useMaskOpacity, useMaskColors, useMaskStyle, useMaskAnimation } from './tokens';
+//# sourceMappingURL=index.d.ts.map

package/es/components/mask/index.js

@@ -0,0 +1,4 @@
+export * from "./types";
+export { default as Mask } from "./mask";
+export { default } from "./mask";
+export { useMaskOpacity, useMaskColors, useMaskStyle, useMaskAnimation } from "./tokens";

package/es/components/mask/mask.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Mask Component
+ *
+ * @description
+ * Design system aligned mask component
+ */
+import React from 'react';
+import type { MaskProps } from './types';
+export declare const Mask: React.ForwardRefExoticComponent<MaskProps & React.RefAttributes<unknown>>;
+export default Mask;
+//# sourceMappingURL=mask.d.ts.map

package/es/components/mask/mask.js

@@ -0,0 +1,150 @@
+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 = ["visible", "mounted", "opacity", "opacityValue", "zIndex", "closable", "color", "disableBodyScroll", "getContainer", "centerContent", "enterDuration", "exitDuration", "enterTimingFunction", "exitTimingFunction", "children", "onClose", "onClick", "onMaskClick", "className", "style", "testID"];
+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; }
+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; }
+/**
+ * Mask Component
+ *
+ * @description
+ * Design system aligned mask component
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { View } from '@tarojs/components';
+import { classNames } from "../../utils";
+import { useMaskAnimation, useMaskOpacity, useMaskStyle } from "./tokens";
+import { useConfig } from "../configProvider";
+import { Portal } from "../portal";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Mask = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
+  var _props$visible = props.visible,
+    visible = _props$visible === void 0 ? false : _props$visible,
+    controlledMounted = props.mounted,
+    _props$opacity = props.opacity,
+    opacity = _props$opacity === void 0 ? 'default' : _props$opacity,
+    opacityValue = props.opacityValue,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 1000 : _props$zIndex,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? false : _props$closable,
+    color = props.color,
+    _props$disableBodyScr = props.disableBodyScroll,
+    disableBodyScroll = _props$disableBodyScr === void 0 ? true : _props$disableBodyScr,
+    getContainer = props.getContainer,
+    _props$centerContent = props.centerContent,
+    centerContent = _props$centerContent === void 0 ? false : _props$centerContent,
+    _props$enterDuration = props.enterDuration,
+    enterDuration = _props$enterDuration === void 0 ? 300 : _props$enterDuration,
+    _props$exitDuration = props.exitDuration,
+    exitDuration = _props$exitDuration === void 0 ? enterDuration : _props$exitDuration,
+    _props$enterTimingFun = props.enterTimingFunction,
+    enterTimingFunction = _props$enterTimingFun === void 0 ? 'ease-out' : _props$enterTimingFun,
+    _props$exitTimingFunc = props.exitTimingFunction,
+    exitTimingFunction = _props$exitTimingFunc === void 0 ? enterTimingFunction : _props$exitTimingFunc,
+    children = props.children,
+    onClose = props.onClose,
+    onClick = props.onClick,
+    onMaskClick = props.onMaskClick,
+    className = props.className,
+    style = props.style,
+    testID = props.testID,
+    nativeProps = _objectWithoutProperties(props, _excluded);
+  var config = useConfig();
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldRender = _useState2[0],
+    setShouldRender = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalMounted = _useState4[0],
+    setInternalMounted = _useState4[1];
+  var mounted = controlledMounted !== null && controlledMounted !== void 0 ? controlledMounted : internalMounted;
+  var defaultOpacity = useMaskOpacity(opacity);
+  var targetOpacity = opacityValue !== null && opacityValue !== void 0 ? opacityValue : defaultOpacity;
+  var maskStyle = useMaskStyle(opacity, opacityValue, zIndex, color);
+  var animationStyle = useMaskAnimation(mounted, targetOpacity, enterDuration, exitDuration, enterTimingFunction, exitTimingFunction);
+  useEffect(function () {
+    if (controlledMounted !== undefined) {
+      if (visible) {
+        setShouldRender(true);
+        return undefined;
+      }
+      var _timer = setTimeout(function () {
+        return setShouldRender(false);
+      }, exitDuration);
+      return function () {
+        return clearTimeout(_timer);
+      };
+    }
+    if (visible) {
+      setShouldRender(true);
+      var _timer2 = setTimeout(function () {
+        return setInternalMounted(true);
+      }, 16);
+      return function () {
+        return clearTimeout(_timer2);
+      };
+    }
+    setInternalMounted(false);
+    var timer = setTimeout(function () {
+      return setShouldRender(false);
+    }, exitDuration);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [controlledMounted, exitDuration, visible]);
+  useEffect(function () {
+    var runtimeDocument = globalThis['document'];
+    if (!visible || !disableBodyScroll || !(runtimeDocument !== null && runtimeDocument !== void 0 && runtimeDocument.body)) return undefined;
+    var previousOverflow = runtimeDocument.body.style.overflow;
+    runtimeDocument.body.style.overflow = 'hidden';
+    return function () {
+      runtimeDocument.body.style.overflow = previousOverflow;
+    };
+  }, [disableBodyScroll, visible]);
+  var handleClick = useCallback(function (event) {
+    onClick === null || onClick === void 0 || onClick(event);
+    if ((event === null || event === void 0 ? void 0 : event.target) !== (event === null || event === void 0 ? void 0 : event.currentTarget)) return;
+    onMaskClick === null || onMaskClick === void 0 || onMaskClick();
+    if (closable) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+  }, [closable, onClick, onMaskClick, onClose]);
+  if (!visible && !shouldRender) return null;
+  var content = /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({}, nativeProps), {}, {
+    ref: forwardedRef,
+    "data-slot": "mask",
+    "data-testid": testID,
+    "aria-hidden": !visible,
+    className: classNames("".concat(config.prefixCls, "-mask"), "".concat(config.prefixCls, "-mask--").concat(opacity), closable && "".concat(config.prefixCls, "-mask--closable"), className),
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, maskStyle), centerContent ? {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    } : null), process.env.TARO_ENV === 'h5' && (onMaskClick || closable) ? {
+      cursor: 'pointer'
+    } : null), animationStyle), style),
+    onClick: handleClick,
+    children: children
+  }));
+  if (process.env.TARO_ENV === 'h5' && getContainer) {
+    return /*#__PURE__*/_jsx(Portal, {
+      container: getContainer,
+      children: content
+    });
+  }
+  return content;
+});
+Mask.displayName = 'Mask';
+export default Mask;