react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/toast/Toast.js

@@ -0,0 +1,258 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toast = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _hooks = require("../../hooks");
+var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
+var _loading = _interopRequireDefault(require("../loading"));
+function _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _overlay = require("../overlay");
+var _validate = require("../../utils/validate");
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const Toast = props => {
+  const {
+    visible,
+    message,
+    icon,
+    type = 'info',
+    iconSize,
+    loadingType = 'circular',
+    duration = 2000,
+    position = 'middle',
+    forbidClick = false,
+    overlay = false,
+    overlayStyle,
+    closeOnClickOverlay = false,
+    closeOnClick = false,
+    loadingIndicator,
+    safeAreaInsetTop: safeAreaInsetTopProp,
+    safeAreaInsetBottom: safeAreaInsetBottomProp,
+    tokensOverride,
+    style,
+    textStyle,
+    onClose,
+    onOpen,
+    onOpened,
+    onClosed
+  } = props;
+  const tokens = (0, _tokens.useToastTokens)(tokensOverride);
+  const {
+    colors
+  } = tokens;
+  const {
+    height: windowHeight
+  } = (0, _reactNative().useWindowDimensions)();
+  const durationMs = (0, _validate.isFiniteNumber)(duration) ? Math.max(0, duration) : 0;
+  const {
+    mounted,
+    animated
+  } = (0, _usePresenceAnimation.usePresenceAnimation)(visible, {
+    duration: tokens.animationDuration
+  });
+  const {
+    zIndex: stackZIndex
+  } = (0, _overlay.useOverlayStack)({
+    visible: mounted,
+    type: 'toast'
+  });
+  const prevVisibleRef = (0, _react().useRef)(visible);
+  const closingRef = (0, _react().useRef)(false);
+  const positionOffset = windowHeight > 0 ? Math.round(windowHeight * 0.2) : 60;
+  const needsSafeAreaTop = safeAreaInsetTopProp !== undefined ? safeAreaInsetTopProp : position === 'top';
+  const needsSafeAreaBottom = safeAreaInsetBottomProp !== undefined ? safeAreaInsetBottomProp : position === 'bottom';
+  const positionStyle = position === 'top' ? {
+    justifyContent: 'flex-start',
+    paddingTop: positionOffset
+  } : position === 'bottom' ? {
+    justifyContent: 'flex-end',
+    paddingBottom: positionOffset
+  } : {
+    justifyContent: 'center'
+  };
+  (0, _react().useEffect)(() => {
+    let timer = null;
+    if (visible) {
+      if (durationMs > 0) {
+        timer = setTimeout(() => {
+          onClose?.();
+        }, durationMs);
+      }
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [durationMs, onClose, visible]);
+  (0, _react().useEffect)(() => {
+    let openedTimer = null;
+    if (visible) {
+      closingRef.current = false;
+      if (!prevVisibleRef.current) {
+        onOpen?.();
+        if (onOpened) {
+          openedTimer = setTimeout(onOpened, tokens.animationDuration);
+        }
+      }
+    } else if (prevVisibleRef.current) {
+      closingRef.current = true;
+    }
+    prevVisibleRef.current = visible;
+    return () => {
+      if (openedTimer) clearTimeout(openedTimer);
+    };
+  }, [onOpen, onOpened, tokens.animationDuration, visible]);
+  (0, _react().useEffect)(() => {
+    if (!mounted && closingRef.current) {
+      closingRef.current = false;
+      onClosed?.();
+    }
+  }, [mounted, onClosed]);
+  const handleClose = () => {
+    onClose?.();
+  };
+  const toastPress = (0, _hooks.useAriaPress)({
+    disabled: !closeOnClick,
+    onPress: handleClose,
+    extraProps: {
+      accessibilityRole: closeOnClick ? 'button' : 'alert',
+      accessibilityHint: closeOnClick ? '双击关闭提示' : undefined,
+      accessibilityLiveRegion: 'assertive'
+    }
+  });
+  const renderIcon = () => {
+    if (icon) return icon;
+    const resolvedIconSize = iconSize ?? tokens.iconSize;
+    switch (type) {
+      case 'success':
+        return /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Checked, {
+          size: resolvedIconSize,
+          fill: colors.text,
+          color: colors.text
+        });
+      case 'fail':
+        return /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
+          size: resolvedIconSize,
+          fill: colors.text,
+          color: colors.text
+        });
+      case 'loading':
+        return loadingIndicator ?? /*#__PURE__*/_react().default.createElement(_loading.default, {
+          type: loadingType,
+          color: colors.text,
+          size: resolvedIconSize
+        });
+      default:
+        return null;
+    }
+  };
+  const iconNode = renderIcon();
+  const isTextToast = type === 'info' && !iconNode;
+  const boxStyle = isTextToast ? {
+    minWidth: tokens.textMinWidth,
+    minHeight: 0,
+    paddingVertical: tokens.textPaddingVertical,
+    paddingHorizontal: tokens.textPaddingHorizontal
+  } : {
+    minWidth: tokens.defaultWidth,
+    minHeight: tokens.defaultMinHeight,
+    padding: tokens.defaultPadding
+  };
+  const toastStyle = {
+    borderRadius: tokens.radius,
+    opacity: closeOnClick && toastPress.states.pressed ? 0.85 : animated,
+    backgroundColor: tokens.colors.variants[type],
+    maxWidth: tokens.maxWidth,
+    ...boxStyle
+  };
+  if (!mounted) return null;
+  const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
+  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.backdrop, positionStyle, stackZIndex ? {
+      zIndex: stackZIndex
+    } : undefined],
+    pointerEvents: forbidClick || overlay || closeOnClick ? 'auto' : 'none'
+  }, overlay || forbidClick ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+    testID: "rv-toast-overlay",
+    style: [styles.overlay, overlay && {
+      backgroundColor: colors.backdrop
+    }, overlayStyle],
+    pointerEvents: "auto",
+    onPress: overlay && closeOnClickOverlay ? handleClose : undefined,
+    onStartShouldSetResponder: () => true,
+    onMoveShouldSetResponder: () => true
+  }) : null, needsSafeAreaTop && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+    style: {
+      width: '100%'
+    },
+    pointerEvents: "none"
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    disabled: !closeOnClick
+  }, toastPress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    style: [styles.toast, toastStyle, style]
+  }, iconNode ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      marginBottom: tokens.gap
+    }
+  }, iconNode) : null, hasMessage ? (0, _validate.isText)(message) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [styles.message, {
+      color: colors.text,
+      fontSize: tokens.fontSize,
+      lineHeight: tokens.lineHeight
+    }, textStyle]
+  }, message) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      alignItems: 'center'
+    }
+  }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+    style: {
+      width: '100%'
+    },
+    pointerEvents: "none"
+  })));
+};
+exports.Toast = Toast;
+const styles = _reactNative().StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: 'transparent'
+  },
+  overlay: {
+    ..._reactNative().StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent'
+  },
+  toast: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  }
+});
+Toast.displayName = 'Toast';
+var _default = exports.default = Toast;

package/dist/cjs/toast/imperative.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastImperative = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _utils = require("../../utils");
+var _Toast = _interopRequireDefault(require("./Toast"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const activeKeys = new Set();
+const toastOptions = new Map();
+const toastControllers = new Map();
+let allowMultiple = false;
+const baseOptions = {
+  type: 'info',
+  position: 'middle',
+  forbidClick: false,
+  overlay: false
+};
+let currentOptions = {
+  ...baseOptions
+};
+const typeDefaults = new Map();
+const parseOptions = input => {
+  if (/*#__PURE__*/_react().default.isValidElement(input) || (0, _utils.isText)(input)) {
+    return {
+      message: input
+    };
+  }
+  return input ?? {};
+};
+const mergeOptions = (input, fallbackType) => {
+  const type = input.type ?? fallbackType;
+  const base = {
+    ...currentOptions,
+    ...typeDefaults.get(type)
+  };
+  const merged = {
+    ...base,
+    ...input,
+    type
+  };
+  if (merged.duration === undefined || merged.duration === null) {
+    merged.duration = base.duration ?? 2000;
+  }
+  return merged;
+};
+const removeToast = key => {
+  _Portal.default.remove(key);
+  activeKeys.delete(key);
+  toastOptions.delete(key);
+  toastControllers.delete(key);
+};
+const closeToast = key => {
+  const controller = toastControllers.get(key);
+  if (controller) {
+    controller.close();
+  } else {
+    removeToast(key);
+  }
+};
+const ToastPortal = ({
+  id,
+  options
+}) => {
+  const [visible, setVisible] = (0, _react().useState)(true);
+  (0, _react().useEffect)(() => {
+    toastControllers.set(id, {
+      close: () => setVisible(false)
+    });
+    return () => {
+      toastControllers.delete(id);
+    };
+  }, [id]);
+  const handleClose = (0, _react().useCallback)(() => {
+    options.onClose?.();
+    setVisible(false);
+  }, [options]);
+  const handleClosed = (0, _react().useCallback)(() => {
+    options.onClosed?.();
+    removeToast(id);
+  }, [id, options]);
+  return /*#__PURE__*/_react().default.createElement(_Toast.default, _extends({}, options, {
+    visible: visible,
+    onClose: handleClose,
+    onClosed: handleClosed
+  }));
+};
+const showToast = (input, fallbackType = 'info') => {
+  const opts = mergeOptions(parseOptions(input), fallbackType);
+  if (!allowMultiple) {
+    activeKeys.forEach(key => closeToast(key));
+  }
+  const key = _Portal.default.add(null);
+  toastOptions.set(key, opts);
+  _Portal.default.update(key, /*#__PURE__*/_react().default.createElement(ToastPortal, {
+    id: key,
+    options: opts
+  }));
+  activeKeys.add(key);
+  const config = next => {
+    const prev = toastOptions.get(key);
+    if (!prev) return;
+    const nextInput = (0, _utils.isFunction)(next) ? next(prev) : next;
+    const parsed = parseOptions(nextInput);
+    const nextType = parsed.type ?? prev.type ?? fallbackType;
+    const merged = {
+      ...prev,
+      ...parsed,
+      type: nextType
+    };
+    if ('duration' in parsed && (parsed.duration === undefined || parsed.duration === null)) {
+      merged.duration = typeDefaults.get(nextType)?.duration ?? currentOptions.duration ?? baseOptions.duration ?? 2000;
+    }
+    toastOptions.set(key, merged);
+    _Portal.default.update(key, /*#__PURE__*/_react().default.createElement(ToastPortal, {
+      id: key,
+      options: merged
+    }));
+  };
+  return {
+    clear: () => closeToast(key),
+    update: next => config(next),
+    config
+  };
+};
+const ToastImperative = exports.ToastImperative = {
+  show: options => showToast(options),
+  info: options => showToast(options, 'info'),
+  success: options => showToast(options, 'success'),
+  fail: options => showToast(options, 'fail'),
+  loading: options => showToast(options, 'loading'),
+  clear: () => {
+    activeKeys.forEach(key => closeToast(key));
+  },
+  allowMultiple: (value = true) => {
+    allowMultiple = value;
+  },
+  setDefaultOptions: (typeOrOptions, options) => {
+    if ((0, _utils.isString)(typeOrOptions)) {
+      typeDefaults.set(typeOrOptions, options ?? {});
+    } else {
+      currentOptions = {
+        ...currentOptions,
+        ...typeOrOptions
+      };
+    }
+  },
+  resetDefaultOptions: type => {
+    if (type) {
+      typeDefaults.delete(type);
+    } else {
+      currentOptions = {
+        ...baseOptions
+      };
+      typeDefaults.clear();
+    }
+  }
+};

package/dist/cjs/toast/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toast = void 0;
+var _Toast = require("./Toast");
+var _imperative = require("./imperative");
+const Toast = exports.Toast = Object.assign(_Toast.Toast, _imperative.ToastImperative);
+var _default = exports.default = Toast;

package/dist/cjs/toast/tokens.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToastTokens = exports.createToastTokens = void 0;
+var _designSystem = require("../../design-system");
+const createToastTokens = foundations => {
+  const onDarkText = foundations.palette.primary.foreground ?? '#ffffff';
+  const backdrop = 'rgba(0,0,0,0.7)';
+  return {
+    colors: {
+      text: onDarkText,
+      backdrop,
+      variants: {
+        info: backdrop,
+        success: backdrop,
+        fail: backdrop,
+        loading: backdrop
+      }
+    },
+    fontSize: foundations.fontSize.sm,
+    lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier),
+    radius: foundations.radii.md,
+    gap: foundations.spacing.sm,
+    iconSize: 36,
+    maxWidth: '70%',
+    textMinWidth: 96,
+    textPaddingVertical: foundations.spacing.sm,
+    textPaddingHorizontal: foundations.spacing.md,
+    defaultPadding: foundations.spacing.lg,
+    defaultWidth: 88,
+    defaultMinHeight: 88,
+    animationDuration: 160
+  };
+};
+exports.createToastTokens = createToastTokens;
+const useToastTokens = exports.useToastTokens = (0, _designSystem.createComponentTokensHook)('toast', createToastTokens);

package/dist/cjs/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/typography/Typography.js

@@ -0,0 +1,194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Typography = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _platform = require("../../platform");
+var _tokens = require("./tokens");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const FLEX_SHRINK_STYLE = {
+  flexShrink: 1
+};
+const resolveEllipsisRows = ellipsis => {
+  if (!ellipsis) return undefined;
+  if ((0, _utils.isBoolean)(ellipsis)) return ellipsis ? 1 : undefined;
+  if ((0, _utils.isNumber)(ellipsis)) return ellipsis;
+  return ellipsis.rows ?? 1;
+};
+const hasTypographyColorKey = (colors, key) => Object.prototype.hasOwnProperty.call(colors, key);
+const isEllipsisObject = ellipsis => (0, _utils.isPlainObject)(ellipsis);
+const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    tokensOverride,
+    children,
+    type: typeProp,
+    color: colorProp,
+    size: sizeProp,
+    level,
+    disabled: disabledProp,
+    delete: deleted,
+    underline,
+    center,
+    strong,
+    ellipsis,
+    style,
+    onPress,
+    ...textProps
+  } = props;
+  const tokens = (0, _tokens.useTypographyTokens)(tokensOverride);
+  const type = typeProp ?? tokens.defaults.type;
+  const size = sizeProp ?? tokens.defaults.size;
+  const disabled = disabledProp ?? tokens.defaults.disabled;
+  const ellipsisRows = resolveEllipsisRows(ellipsis);
+  const ellipsisConfig = isEllipsisObject(ellipsis) ? ellipsis : undefined;
+  const [isTruncated, setIsTruncated] = (0, _react().useState)(false);
+  const [expanded, setExpanded] = (0, _react().useState)(false);
+  const isWeb = (0, _platform.isWeb)();
+  const handleTextLayout = (0, _react().useCallback)(event => {
+    if (!ellipsisRows || expanded) return;
+    const exceeded = event.nativeEvent.lines.length > ellipsisRows;
+    setIsTruncated(prev => prev === exceeded ? prev : exceeded);
+  }, [ellipsisRows, expanded]);
+  let resolvedColor = tokens.colors[type] ?? tokens.colors.default;
+  if (colorProp !== undefined && colorProp !== null) {
+    const colorKey = String(colorProp);
+    resolvedColor = hasTypographyColorKey(tokens.colors, colorKey) ? tokens.colors[colorKey] : colorKey;
+  }
+  const fontSize = level ? tokens.sizing.titles[level].fontSize : tokens.sizing.sizes[size];
+  const lineHeight = level ? tokens.sizing.titles[level].lineHeight : fontSize * tokens.sizing.lineHeightMultiplier;
+  const baseStyle = (0, _react().useMemo)(() => {
+    const textDecorationLine = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
+    const computedStyle = {
+      color: resolvedColor,
+      fontSize,
+      lineHeight,
+      fontFamily: tokens.typography.fontFamily,
+      fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
+      includeFontPadding: false,
+      textDecorationLine,
+      textAlign: center ? 'center' : undefined,
+      opacity: disabled ? tokens.opacity.disabled : 1
+    };
+    return [computedStyle, style];
+  }, [resolvedColor, fontSize, lineHeight, tokens.typography.fontFamily, tokens.opacity.disabled, tokens.typography.weight.regular, tokens.typography.weight.strong, strong, center, disabled, underline, deleted, style]);
+  const hasActionText = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
+  const shouldShowAction = hasActionText && (isTruncated || expanded || isWeb);
+  const handleToggleEllipsis = (0, _react().useCallback)(() => {
+    if (!ellipsisConfig) return;
+    setExpanded(prev => {
+      const next = !prev;
+      ellipsisConfig.onExpand?.(next);
+      return next;
+    });
+  }, [ellipsisConfig]);
+  const actionLabel = (0, _react().useMemo)(() => {
+    if (!ellipsisConfig) return undefined;
+    return expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
+  }, [ellipsisConfig, expanded]);
+  const actionTextStyle = (0, _react().useMemo)(() => ({
+    color: tokens.colors.primary,
+    fontSize: tokens.sizing.sizes.sm,
+    fontWeight: tokens.typography.weight.medium,
+    marginLeft: tokens.sizing.actionMarginLeft,
+    includeFontPadding: false
+  }), [tokens.colors.primary, tokens.sizing.sizes.sm, tokens.typography.weight.medium, tokens.sizing.actionMarginLeft]);
+  const textStyle = (0, _react().useMemo)(() => {
+    if (!shouldShowAction) return baseStyle;
+    return [baseStyle, FLEX_SHRINK_STYLE];
+  }, [shouldShowAction, baseStyle]);
+  const textNode = /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
+    ref: ref,
+    style: textStyle,
+    onPress: onPress,
+    numberOfLines: !expanded ? ellipsisRows : undefined,
+    ellipsizeMode: "tail",
+    onTextLayout: hasActionText && ellipsisRows && !expanded && !isWeb ? handleTextLayout : undefined
+  }, textProps), children);
+  if (!shouldShowAction) {
+    return center ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: tokens.layout.centerWrapper
+    }, textNode) : textNode;
+  }
+  const actionNode = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.actionRow
+  }, textNode, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    onPress: handleToggleEllipsis,
+    suppressHighlighting: true,
+    style: actionTextStyle
+  }, actionLabel));
+  return center ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.centerWrapper
+  }, actionNode) : actionNode;
+});
+TypographyTextBaseInner.displayName = 'TypographyText';
+const TypographyTextBase = /*#__PURE__*/_react().default.memo(TypographyTextBaseInner);
+TypographyTextBase.displayName = 'TypographyText';
+const TypographyTitle = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    level = 5,
+    accessibilityRole,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_react().default.createElement(TypographyTextBase, _extends({
+    ref: ref,
+    level: level,
+    accessibilityRole: accessibilityRole ?? 'header'
+  }, rest));
+});
+TypographyTitle.displayName = 'TypographyTitle';
+const TypographyLink = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    href,
+    onPress,
+    underline = true,
+    type = 'primary',
+    accessibilityRole,
+    ...rest
+  } = props;
+  const handlePress = (0, _react().useCallback)(async event => {
+    if (onPress) {
+      onPress(event);
+      return;
+    }
+    if (href) {
+      try {
+        await _reactNative().Linking.openURL(href);
+      } catch (error) {
+        if (typeof __DEV__ !== 'undefined' && __DEV__) {
+          console.warn('[Typography.Link] Failed to open url', error);
+        }
+      }
+    }
+  }, [onPress, href]);
+  return /*#__PURE__*/_react().default.createElement(TypographyTextBase, _extends({
+    ref: ref,
+    underline: underline,
+    type: type,
+    onPress: handlePress,
+    accessibilityRole: accessibilityRole ?? 'link'
+  }, rest));
+});
+TypographyLink.displayName = 'TypographyLink';
+const Typography = exports.Typography = Object.assign(TypographyTextBase, {
+  Text: TypographyTextBase,
+  Title: TypographyTitle,
+  Link: TypographyLink
+});
+var _default = exports.default = Typography;

package/dist/cjs/typography/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Typography = _interopRequireDefault(require("./Typography"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Typography.default;