@hanwenbo/x-taro-ui 0.0.1

package/lib/components/list/index.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/list/index.ts
+var index_exports = {};
+__export(index_exports, {
+  List: () => import_list.List,
+  ListItem: () => import_list.ListItem
+});
+module.exports = __toCommonJS(index_exports);
+var import_list = require("./list");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  List,
+  ListItem
+});

package/lib/components/list/list.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ListItemProps, ListProps } from './types';
+export declare const ListItem: React.FC<ListItemProps>;
+export declare const List: (<T>({ dataSource, renderItem, keyExtractor, emptyText, loading, loadingText, divider, header, headerFontSize, prefixWidth, mode, variant, children, className, style, testID, ...viewProps }: ListProps<T>) => React.JSX.Element) & {
+    displayName: string;
+    Item: React.FC<ListItemProps>;
+};
+export default List;
+//# sourceMappingURL=list.d.ts.map

package/lib/components/list/list.js

@@ -0,0 +1,444 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/list/list.tsx
+var list_exports = {};
+__export(list_exports, {
+  List: () => List,
+  ListItem: () => ListItem,
+  default: () => list_default
+});
+module.exports = __toCommonJS(list_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_patterns = require("../../patterns");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_iconSlot = require("../../utils/iconSlot");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var ListPrefixWidthContext = (0, import_react.createContext)(void 0);
+var ListDividerContext = (0, import_react.createContext)(true);
+var ListItemPositionContext = (0, import_react.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 = (node, style) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, node);
+  }
+  return node;
+};
+var hasRenderableNode = (node) => node !== null && node !== void 0 && node !== false;
+var flattenRenderableNodes = (nodes) => {
+  const flattened = [];
+  import_react.default.Children.forEach(nodes, (node) => {
+    if (!hasRenderableNode(node)) return;
+    if (import_react.default.isValidElement(node) && node.type === import_react.default.Fragment) {
+      flattened.push(
+        ...flattenRenderableNodes(
+          node.props.children
+        )
+      );
+      return;
+    }
+    flattened.push(node);
+  });
+  return flattened;
+};
+var resolveDataKey = (item, index, keyExtractor) => {
+  if (keyExtractor) return keyExtractor(item, index);
+  if (item && typeof item === "object") {
+    const record = item;
+    const key = record.key ?? record.id;
+    if (typeof key === "string" || typeof key === "number") return key;
+  }
+  return index;
+};
+var ListRoot = ({
+  dataSource,
+  renderItem,
+  keyExtractor,
+  emptyText = "暂无数据",
+  loading = false,
+  loadingText = "加载中…",
+  divider = true,
+  header,
+  headerFontSize = 14,
+  prefixWidth,
+  mode,
+  variant = "plain",
+  children,
+  className,
+  style,
+  testID,
+  ...viewProps
+}) => {
+  const { colors } = (0, import_theme.useTokens)();
+  const resolvedMode = mode === "card" || variant === "card" ? "card" : "default";
+  const outlined = variant === "outline";
+  const usesChildren = children !== void 0 && children !== null;
+  const contentEntries = usesChildren ? flattenRenderableNodes(children).map((node, index) => ({
+    key: import_react.default.isValidElement(node) && node.key !== null ? node.key : `child-${index}`,
+    node
+  })) : dataSource && renderItem ? dataSource.flatMap((item, index) => {
+    const dataKey = resolveDataKey(item, index, keyExtractor);
+    return flattenRenderableNodes(renderItem(item, index)).map((node, nodeIndex) => ({
+      key: nodeIndex === 0 ? dataKey : `${String(dataKey)}-${nodeIndex}`,
+      node
+    }));
+  }) : [];
+  const hasContent = contentEntries.length > 0;
+  return /* @__PURE__ */ import_react.default.createElement(ListPrefixWidthContext.Provider, { value: prefixWidth }, /* @__PURE__ */ import_react.default.createElement(ListDividerContext.Provider, { value: divider }, /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      ...viewProps,
+      className: (0, import_utils.classNames)(
+        "x-list",
+        `x-list--${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: {
+        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
+      }
+    },
+    hasRenderableNode(header) ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.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: `${headerFontSize + 6}px`,
+          fontWeight: "500",
+          color: colors["muted-foreground"]
+        }
+      },
+      header
+    ) : null,
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: "x-list__body",
+        "data-slot": "list-body",
+        style: { backgroundColor: colors.card }
+      },
+      loading ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: "x-list__loading",
+          "data-slot": "list-loading",
+          style: { padding: 24, textAlign: "center" }
+        },
+        renderTextNode(loadingText, { color: colors["muted-foreground"] })
+      ) : hasContent ? contentEntries.map(({ key, node }, index) => /* @__PURE__ */ import_react.default.createElement(
+        ListItemPositionContext.Provider,
+        {
+          key,
+          value: { managed: true, isLast: index === contentEntries.length - 1 }
+        },
+        node
+      )) : /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: "x-list__empty",
+          "data-slot": "list-empty",
+          style: { padding: 48, textAlign: "center" }
+        },
+        renderTextNode(emptyText, { color: colors["muted-foreground"] })
+      )
+    )
+  )));
+};
+var ListItem = ({
+  title,
+  description,
+  children,
+  prefix,
+  suffix,
+  extra,
+  footer,
+  arrow,
+  size: sizeProp,
+  clickable,
+  bordered,
+  disabled: disabledProp,
+  onClick,
+  className,
+  style,
+  testID,
+  onTouchStart,
+  onTouchEnd,
+  onTouchCancel,
+  ...viewProps
+}) => {
+  const { colors } = (0, import_theme.useTokens)();
+  const providerSize = (0, import_configProvider.useSize)();
+  const providerDisabled = (0, import_configProvider.useDisabled)();
+  const listPrefixWidth = (0, import_react.useContext)(ListPrefixWidthContext);
+  const listDivider = (0, import_react.useContext)(ListDividerContext);
+  const itemPosition = (0, import_react.useContext)(ListItemPositionContext);
+  const size = sizeProp ?? providerSize;
+  const disabled = Boolean(disabledProp || providerDisabled);
+  const isClickable = clickable ?? Boolean(onClick);
+  const showArrow = arrow === void 0 ? isClickable : arrow;
+  const hasMainContent = [title, children, description].some(hasRenderableNode);
+  const metrics = rowMetrics[size];
+  const typography = (0, import_theme.getListTypographyTokens)(size);
+  const resolvedBordered = bordered ?? listDivider;
+  const showDivider = resolvedBordered && !(itemPosition.managed && itemPosition.isLast);
+  const {
+    pressed,
+    handlers,
+    style: pressStyle
+  } = (0, import_patterns.usePressable)({
+    disabled: disabled || !isClickable,
+    onPress: onClick,
+    scale: 0.995
+  });
+  const prefixSlotWidth = listPrefixWidth ?? 24;
+  const composedHandlers = {
+    ...handlers,
+    onTouchStart: (event) => {
+      handlers.onTouchStart();
+      onTouchStart == null ? void 0 : onTouchStart(event);
+    },
+    onTouchEnd: (event) => {
+      handlers.onTouchEnd();
+      onTouchEnd == null ? void 0 : onTouchEnd(event);
+    },
+    onTouchCancel: (event) => {
+      handlers.onTouchCancel();
+      onTouchCancel == null ? void 0 : onTouchCancel(event);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      ...viewProps,
+      role: isClickable ? "button" : void 0,
+      ariaRole: isClickable ? "button" : void 0,
+      ariaDisabled: disabled ? "true" : "false",
+      className: (0, import_utils.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" : void 0,
+      "data-size": size,
+      "data-testid": testID,
+      style: {
+        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 ${import_theme.designSystemMotion.durationsMs.emphasis}ms ${import_theme.designSystemMotion.easing.standard}, transform ${import_theme.designSystemMotion.durationsMs.emphasis}ms ${import_theme.designSystemMotion.easing.standard}`,
+        ...style
+      },
+      ...composedHandlers
+    },
+    hasRenderableNode(prefix) ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "list-prefix",
+        style: (0, import_iconSlot.iconSlot)(prefixSlotWidth, {
+          flexShrink: 0,
+          width: prefixSlotWidth,
+          minWidth: prefixSlotWidth,
+          marginRight: 12
+        })
+      },
+      prefix
+    ) : null,
+    hasMainContent ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "list-item-main",
+        style: { display: "flex", minWidth: 0, flex: 1, alignItems: "center" }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "list-content",
+          style: { display: "flex", flexDirection: "column", minWidth: 0, flex: 1, gap: 2 }
+        },
+        hasRenderableNode(title) ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "list-title",
+            style: {
+              whiteSpace: "normal",
+              overflowWrap: "anywhere",
+              fontSize: typography.titleFontSize,
+              lineHeight: `${Math.max(14, typography.titleFontSize + 4)}px`,
+              fontWeight: "400",
+              color: colors["muted-foreground"]
+            }
+          },
+          title
+        ) : null,
+        hasRenderableNode(children) ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "list-body-text",
+            style: {
+              fontSize: typography.titleFontSize,
+              lineHeight: `${Math.max(14, typography.titleFontSize + 4)}px`,
+              fontWeight: "400",
+              color: colors.foreground
+            }
+          },
+          children
+        ) : null,
+        hasRenderableNode(description) ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.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"]
+            }
+          },
+          description
+        ) : null
+      )
+    ) : null,
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "list-extra-wrap",
+        style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0, marginLeft: 12 }
+      },
+      hasRenderableNode(extra) ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "list-extra",
+          style: {
+            fontSize: 16,
+            lineHeight: "24px",
+            fontWeight: "400",
+            color: colors["muted-foreground"]
+          }
+        },
+        extra
+      ) : null,
+      hasRenderableNode(suffix) ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "list-suffix",
+          style: {
+            fontSize: 16,
+            lineHeight: "24px",
+            fontWeight: "400",
+            color: colors["muted-foreground"]
+          }
+        },
+        suffix
+      ) : null,
+      hasRenderableNode(showArrow) ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "list-arrow",
+          style: (0, import_iconSlot.iconSlot)(16, {
+            fontSize: 16,
+            lineHeight: "16px",
+            color: colors["muted-foreground"]
+          })
+        },
+        showArrow === true ? /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "ChevronRight", size: 16, color: colors["muted-foreground"], block: true }) : showArrow
+      ) : null
+    ),
+    hasRenderableNode(footer) ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "list-footer",
+        style: {
+          flexBasis: "100%",
+          width: "100%",
+          marginTop: 8,
+          fontSize: 16,
+          lineHeight: "24px",
+          fontWeight: "400",
+          color: colors.foreground
+        }
+      },
+      footer
+    ) : null
+  );
+};
+ListItem.displayName = "List.Item";
+var List = Object.assign(ListRoot, { displayName: "List", Item: ListItem });
+var list_default = List;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  List,
+  ListItem
+});

package/lib/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/lib/components/list/types.js

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

package/lib/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/lib/components/mask/index.js

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

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