@hanwenbo/x-taro-ui 0.0.1

package/es/components/toast/toast.js

@@ -0,0 +1,348 @@
+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 _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 _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; }
+/**
+ * Toast Component
+ * Compact transient feedback aligned with x-mobile-ui.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { OverlayHost } from "../../adapters/miniapp";
+import { classNames } from "../../utils";
+import { useToastColors, useToastStyle, useToastTokens } from "./tokens";
+import { Icon } from "../icon";
+import { useConfig } from "../configProvider";
+import { Portal } from "../portal";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var controllers = [];
+var TOAST_TRANSITION_DURATION_MS = 300;
+function registerController(controller) {
+  controllers.push(controller);
+  return function () {
+    var remainingControllers = controllers.filter(function (item) {
+      return item !== controller;
+    });
+    controllers.splice.apply(controllers, [0, controllers.length].concat(_toConsumableArray(remainingControllers)));
+  };
+}
+function activeController() {
+  return controllers[controllers.length - 1];
+}
+function semanticIconName(icon, type) {
+  if (icon === 'success') return 'CircleCheck';
+  if (icon === 'fail') return 'CircleX';
+  if (icon === 'loading') return 'LoaderCircle';
+  if (type === 'success') return 'CircleCheck';
+  if (type === 'error') return 'CircleX';
+  if (type === 'warning') return 'TriangleAlert';
+  if (type === 'loading') return 'LoaderCircle';
+  return undefined;
+}
+function isBuiltInIcon(icon) {
+  return icon === 'success' || icon === 'fail' || icon === 'loading';
+}
+export var InternalToast = function InternalToast(props) {
+  var config = useConfig();
+  var imperativeRef = useRef(null);
+  var closingImperativeRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    imperativeParams = _useState2[0],
+    setImperativeParams = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    closingImperativeParams = _useState4[0],
+    setClosingImperativeParams = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    panelMounted = _useState6[0],
+    setPanelMounted = _useState6[1];
+  var showImperative = useCallback(function (options) {
+    closingImperativeRef.current = null;
+    setClosingImperativeParams(null);
+    imperativeRef.current = options;
+    setImperativeParams(options);
+  }, []);
+  var hideImperative = useCallback(function () {
+    var current = imperativeRef.current;
+    if (!current) return;
+    imperativeRef.current = null;
+    closingImperativeRef.current = current;
+    setClosingImperativeParams(current);
+    setImperativeParams(null);
+  }, []);
+  var controller = useMemo(function () {
+    return {
+      show: showImperative,
+      hide: hideImperative
+    };
+  }, [hideImperative, showImperative]);
+  useEffect(function () {
+    return registerController(controller);
+  }, [controller]);
+  var retainedImperativeParams = imperativeParams !== null && imperativeParams !== void 0 ? imperativeParams : closingImperativeParams;
+  var effectiveProps = retainedImperativeParams ? _objectSpread(_objectSpread(_objectSpread({}, props), retainedImperativeParams), {}, {
+    visible: imperativeParams !== null
+  }) : props;
+  var _effectiveProps$visib = effectiveProps.visible,
+    visible = _effectiveProps$visib === void 0 ? false : _effectiveProps$visib,
+    content = effectiveProps.content,
+    title = effectiveProps.title,
+    icon = effectiveProps.icon,
+    _effectiveProps$type = effectiveProps.type,
+    type = _effectiveProps$type === void 0 ? 'info' : _effectiveProps$type,
+    _effectiveProps$durat = effectiveProps.duration,
+    duration = _effectiveProps$durat === void 0 ? 1000 : _effectiveProps$durat,
+    _effectiveProps$posit = effectiveProps.position,
+    position = _effectiveProps$posit === void 0 ? 'center' : _effectiveProps$posit,
+    _effectiveProps$mask = effectiveProps.mask,
+    mask = _effectiveProps$mask === void 0 ? true : _effectiveProps$mask,
+    _effectiveProps$maskC = effectiveProps.maskClickable,
+    maskClickable = _effectiveProps$maskC === void 0 ? true : _effectiveProps$maskC,
+    maskStyle = effectiveProps.maskStyle,
+    _effectiveProps$size = effectiveProps.size,
+    size = _effectiveProps$size === void 0 ? 'middle' : _effectiveProps$size,
+    afterClose = effectiveProps.afterClose,
+    onClose = effectiveProps.onClose,
+    className = effectiveProps.className,
+    style = effectiveProps.style;
+  var tokens = useToastTokens(size);
+  var colors = useToastColors(type);
+  var toastStyle = useToastStyle(type, size, position);
+  var requestClose = useCallback(function () {
+    var imperative = imperativeRef.current;
+    if (imperative) {
+      var _imperative$onClose;
+      (_imperative$onClose = imperative.onClose) === null || _imperative$onClose === void 0 || _imperative$onClose.call(imperative);
+      hideImperative();
+      return;
+    }
+    onClose === null || onClose === void 0 || onClose();
+  }, [hideImperative, onClose]);
+  var notifyAfterClose = useCallback(function () {
+    var closingImperative = closingImperativeRef.current;
+    if (closingImperative) {
+      var _closingImperative$af;
+      closingImperativeRef.current = null;
+      setClosingImperativeParams(null);
+      (_closingImperative$af = closingImperative.afterClose) === null || _closingImperative$af === void 0 || _closingImperative$af.call(closingImperative);
+      return;
+    }
+    afterClose === null || afterClose === void 0 || afterClose();
+  }, [afterClose]);
+  useEffect(function () {
+    if (!visible || duration <= 0) return undefined;
+    var timer = setTimeout(requestClose, duration);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [duration, requestClose, visible]);
+  useEffect(function () {
+    if (!visible) {
+      setPanelMounted(false);
+      return undefined;
+    }
+    var timer = setTimeout(function () {
+      return setPanelMounted(true);
+    }, 16);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [visible]);
+  var builtInIcon = isBuiltInIcon(icon) ? icon : undefined;
+  var iconName = semanticIconName(builtInIcon, type);
+  var shouldShowLegacyTypeIcon = icon === undefined && type !== 'info';
+  var shouldShowBuiltInIcon = builtInIcon !== undefined || shouldShowLegacyTypeIcon;
+  var iconNode = icon !== undefined && icon !== null && typeof icon !== 'string' ? icon : shouldShowBuiltInIcon && iconName ? /*#__PURE__*/_jsx(Icon, {
+    name: iconName,
+    size: tokens.iconSize,
+    color: builtInIcon ? colors.text : colors.icon,
+    className: type === 'loading' || builtInIcon === 'loading' ? 'x-toast__loading-icon' : undefined,
+    block: true
+  }) : null;
+  var hostAlignment = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    transform: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center',
+    paddingTop: position === 'top' ? 80 : 0,
+    paddingBottom: position === 'bottom' ? 80 : 0,
+    pointerEvents: 'none',
+    boxSizing: 'border-box'
+  };
+  return /*#__PURE__*/_jsx(Portal, {
+    root: true,
+    children: /*#__PURE__*/_jsx(OverlayHost, {
+      visible: visible,
+      placement: "center",
+      config: {
+        zIndex: 3000,
+        backdrop: mask,
+        closeOnBackdrop: maskClickable,
+        closeOnEscape: false,
+        disableBodyScroll: false,
+        enterDuration: TOAST_TRANSITION_DURATION_MS,
+        exitDuration: TOAST_TRANSITION_DURATION_MS,
+        contentAnimation: 'none',
+        backdropOpacity: 0.35,
+        backdropStyle: _objectSpread({
+          backgroundColor: colors.mask
+        }, maskStyle),
+        contentStyle: hostAlignment
+      },
+      onBackdropClick: maskClickable ? requestClose : undefined,
+      afterClose: notifyAfterClose,
+      children: /*#__PURE__*/_jsxs(View, {
+        role: "status",
+        "aria-live": "polite",
+        "data-slot": "toast-panel",
+        "data-position": position,
+        "data-type": type,
+        "data-size": size,
+        className: classNames("".concat(config.prefixCls, "-toast"), "".concat(config.prefixCls, "-toast--").concat(position), "".concat(config.prefixCls, "-toast--").concat(type), "".concat(config.prefixCls, "-toast--").concat(size), className),
+        style: _objectSpread(_objectSpread({}, toastStyle), {}, {
+          fontSize: tokens.fontSize,
+          lineHeight: "".concat(tokens.contentLineHeight, "px"),
+          opacity: panelMounted ? 1 : 0,
+          transform: panelMounted ? 'translateY(0) scale(1)' : position === 'top' ? 'translateY(-8px) scale(0.95)' : position === 'bottom' ? 'translateY(8px) scale(0.95)' : 'scale(0.95)',
+          transition: "transform ".concat(TOAST_TRANSITION_DURATION_MS, "ms ease-out, opacity ").concat(TOAST_TRANSITION_DURATION_MS, "ms ease-out"),
+          willChange: 'transform, opacity'
+        }, style),
+        children: [iconNode ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "toast-icon",
+          className: "".concat(config.prefixCls, "-toast__icon"),
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingTop: tokens.iconPaddingY,
+            paddingBottom: tokens.iconPaddingY,
+            paddingLeft: tokens.iconPaddingX,
+            paddingRight: tokens.iconPaddingX
+          },
+          children: iconNode
+        }) : null, title !== undefined && title !== null ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "toast-title",
+          className: "".concat(config.prefixCls, "-toast__title"),
+          style: {
+            fontSize: tokens.titleFontSize,
+            lineHeight: "".concat(tokens.titleLineHeight, "px"),
+            marginBottom: tokens.titleMarginBottom,
+            textAlign: 'center'
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: {
+              fontSize: tokens.titleFontSize,
+              fontWeight: 500,
+              color: colors.title,
+              textAlign: 'center',
+              lineHeight: "".concat(tokens.titleLineHeight, "px")
+            },
+            children: title
+          })
+        }) : null, content !== undefined && content !== null ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "toast-content",
+          className: "".concat(config.prefixCls, "-toast__content"),
+          style: {
+            fontSize: tokens.fontSize,
+            lineHeight: "".concat(tokens.contentLineHeight, "px"),
+            textAlign: 'center'
+          },
+          children: typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/_jsx(Text, {
+            style: {
+              fontSize: tokens.fontSize,
+              color: colors.content,
+              textAlign: 'center',
+              lineHeight: "".concat(tokens.contentLineHeight, "px")
+            },
+            children: content
+          }) : content
+        }) : null]
+      })
+    })
+  });
+};
+InternalToast.displayName = 'InternalToast';
+export var Toast = InternalToast;
+Toast.show = function (options) {
+  var _activeController;
+  return (_activeController = activeController()) === null || _activeController === void 0 ? void 0 : _activeController.show(options);
+};
+Toast.hide = function () {
+  var _activeController2;
+  return (_activeController2 = activeController()) === null || _activeController2 === void 0 ? void 0 : _activeController2.hide();
+};
+Toast.displayName = 'Toast';
+export var toast = {
+  show: function show(options) {
+    return Toast.show(options);
+  },
+  success: function success(content, duration, size) {
+    return Toast.show({
+      content: content,
+      type: 'success',
+      duration: duration,
+      size: size
+    });
+  },
+  error: function error(content, duration, size) {
+    return Toast.show({
+      content: content,
+      type: 'error',
+      duration: duration,
+      size: size
+    });
+  },
+  info: function info(content, duration, size) {
+    return Toast.show({
+      content: content,
+      type: 'info',
+      duration: duration,
+      size: size
+    });
+  },
+  warning: function warning(content, duration, size) {
+    return Toast.show({
+      content: content,
+      type: 'warning',
+      duration: duration,
+      size: size
+    });
+  },
+  loading: function loading() {
+    var content = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Loading...';
+    var size = arguments.length > 1 ? arguments[1] : undefined;
+    return Toast.show({
+      content: content,
+      type: 'loading',
+      duration: 0,
+      size: size,
+      mask: true
+    });
+  },
+  hide: function hide() {
+    return Toast.hide();
+  }
+};
+export default Toast;

package/es/components/toast/tokens.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Toast Component Tokens
+ * Defines how Toast consumes design system tokens
+ */
+/// <reference types="react" />
+import type { SizeVariant } from '../../theme/types';
+import type { ToastType } from './types';
+export interface ToastTokens {
+    paddingY: number;
+    paddingX: number;
+    borderRadius: number;
+    iconSize: number;
+    fontSize: number;
+    minWidth: number;
+    maxWidth: string;
+    gap: number;
+    iconPaddingY: number;
+    iconPaddingX: number;
+    contentLineHeight: number;
+    titleFontSize: number;
+    titleLineHeight: number;
+    titleMarginBottom: number;
+}
+/**
+ * Get toast size tokens
+ */
+export declare function useToastTokens(size?: SizeVariant): ToastTokens;
+/**
+ * Get toast icon for type
+ */
+export declare function useToastIcon(type?: ToastType): string;
+/**
+ * Get toast colors for type
+ */
+export declare function useToastColors(type?: ToastType): {
+    background: string;
+    text: string;
+    title: string;
+    content: string;
+    icon: string;
+    mask: string;
+    shadow: string;
+};
+/**
+ * Build toast style object
+ */
+export declare function useToastStyle(type: ToastType, size: SizeVariant, position: 'top' | 'center' | 'bottom'): React.CSSProperties;
+//# sourceMappingURL=tokens.d.ts.map

package/es/components/toast/tokens.js

@@ -0,0 +1,179 @@
+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); }
+/**
+ * Toast Component Tokens
+ * Defines how Toast consumes design system tokens
+ */
+
+import { useMemo } from 'react';
+import { useTokens, withOpacity } from "../../theme";
+import { mixSolidColors } from "../../theme/runtime/componentTokens";
+/**
+ * Get toast size tokens
+ */
+export function useToastTokens() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'middle';
+  var _useTokens = useTokens(),
+    radius = _useTokens.radius;
+  return useMemo(function () {
+    var sizeMap = {
+      mini: {
+        paddingY: 8,
+        paddingX: 12,
+        borderRadius: radius.xl,
+        iconSize: 20,
+        fontSize: 12,
+        minWidth: 0,
+        maxWidth: '70vw',
+        gap: 0,
+        iconPaddingY: 20,
+        iconPaddingX: 28,
+        contentLineHeight: 18,
+        titleFontSize: 14,
+        titleLineHeight: 20,
+        titleMarginBottom: 4
+      },
+      small: {
+        paddingY: 8,
+        paddingX: 16,
+        borderRadius: radius.xl,
+        iconSize: 24,
+        fontSize: 13,
+        minWidth: 0,
+        maxWidth: '70vw',
+        gap: 0,
+        iconPaddingY: 24,
+        iconPaddingX: 32,
+        contentLineHeight: 18,
+        titleFontSize: 15,
+        titleLineHeight: 22,
+        titleMarginBottom: 4
+      },
+      middle: {
+        paddingY: 10,
+        paddingX: 20,
+        borderRadius: radius.xl,
+        iconSize: 36,
+        fontSize: 14,
+        minWidth: 0,
+        maxWidth: '70vw',
+        gap: 0,
+        iconPaddingY: 32,
+        iconPaddingX: 40,
+        contentLineHeight: 20,
+        titleFontSize: 16,
+        titleLineHeight: 24,
+        titleMarginBottom: 4
+      },
+      large: {
+        paddingY: 12,
+        paddingX: 24,
+        borderRadius: radius.xl,
+        iconSize: 40,
+        fontSize: 16,
+        minWidth: 0,
+        maxWidth: '70vw',
+        gap: 0,
+        iconPaddingY: 36,
+        iconPaddingX: 44,
+        contentLineHeight: 24,
+        titleFontSize: 18,
+        titleLineHeight: 26,
+        titleMarginBottom: 4
+      }
+    };
+    return sizeMap[size];
+  }, [size, radius]);
+}
+
+/**
+ * Get toast icon for type
+ */
+export function useToastIcon() {
+  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'info';
+  return useMemo(function () {
+    switch (type) {
+      case 'success':
+        return 'CircleCheck';
+      case 'error':
+        return 'CircleX';
+      case 'warning':
+        return 'TriangleAlert';
+      case 'loading':
+        return 'MoreHorizontal';
+      case 'info':
+      default:
+        return 'Info';
+    }
+  }, [type]);
+}
+
+/**
+ * Get toast colors for type
+ */
+export function useToastColors() {
+  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'info';
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors;
+  return useMemo(function () {
+    var base = {
+      background: withOpacity(colors.card, 0.95),
+      text: colors['card-foreground'],
+      title: colors.foreground,
+      content: colors['card-foreground'],
+      icon: colors['card-foreground'],
+      mask: mixSolidColors(colors.foreground, colors.background, 0.25),
+      shadow: "0 12px 32px ".concat(withOpacity(colors.foreground, 0.12))
+    };
+    switch (type) {
+      case 'success':
+        return _objectSpread(_objectSpread({}, base), {}, {
+          icon: colors.success
+        });
+      case 'error':
+        return _objectSpread(_objectSpread({}, base), {}, {
+          icon: colors.destructive
+        });
+      case 'warning':
+        return _objectSpread(_objectSpread({}, base), {}, {
+          icon: colors.warning
+        });
+      case 'loading':
+        return _objectSpread(_objectSpread({}, base), {}, {
+          icon: colors['card-foreground']
+        });
+      case 'info':
+      default:
+        return base;
+    }
+  }, [type, colors]);
+}
+
+/**
+ * Build toast style object
+ */
+export function useToastStyle(type, size, position) {
+  var tokens = useToastTokens(size);
+  var colors = useToastColors(type);
+  return useMemo(function () {
+    return {
+      padding: "".concat(tokens.paddingY, "px ").concat(tokens.paddingX, "px"),
+      backgroundColor: colors.background,
+      color: colors.text,
+      borderRadius: tokens.borderRadius,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: tokens.gap,
+      minWidth: tokens.minWidth,
+      maxWidth: tokens.maxWidth,
+      boxShadow: colors.shadow,
+      boxSizing: 'border-box',
+      pointerEvents: 'auto'
+    };
+  }, [tokens, colors, position]);
+}

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

@@ -0,0 +1,47 @@
+/**
+ * Toast Component Types
+ */
+import type { ReactNode } from 'react';
+import type { SizeVariant } from '../../theme/types';
+export declare type ToastType = 'info' | 'success' | 'error' | 'warning' | 'loading';
+export declare type ToastPosition = 'top' | 'center' | 'bottom';
+export declare type ToastIcon = 'success' | 'fail' | 'loading' | ReactNode | null;
+export interface ToastProps {
+    /** Visible state. Omit it when the component is used as a static API host. */
+    visible?: boolean;
+    /** Toast content */
+    content?: ReactNode;
+    /** Optional heading */
+    title?: string;
+    /** Canonical x-mobile-ui icon or a custom node */
+    icon?: ToastIcon;
+    /** Semantic compatibility type */
+    type?: ToastType;
+    /** Duration in ms (0 for persistent) */
+    duration?: number;
+    /** Position */
+    position?: ToastPosition;
+    /** Whether to render the backdrop */
+    mask?: boolean;
+    /** Whether tapping the backdrop closes the toast */
+    maskClickable?: boolean;
+    maskStyle?: React.CSSProperties;
+    /** Called after the exit transition completes */
+    afterClose?: () => void;
+    /** Size variant */
+    size?: SizeVariant;
+    /** Close request handler */
+    onClose?: () => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+export interface ToastShowOptions extends Omit<ToastProps, 'visible'> {
+    content: ReactNode;
+}
+export interface ToastController {
+    show: (options: ToastShowOptions) => void;
+    hide: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/toast/types.js

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

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

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './tokens';
+export { default as Tooltip } from './tooltip';
+export { default } from './tooltip';
+//# sourceMappingURL=index.d.ts.map

package/es/components/tooltip/index.js

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./tokens";
+export { default as Tooltip } from "./tooltip";
+export { default } from "./tooltip";

package/es/components/tooltip/tokens.d.ts

@@ -0,0 +1,32 @@
+import type { ThemeColors } from '../../theme';
+import type { TooltipSize, TooltipVariant } from './types';
+export declare const tooltipSizeTokens: Record<TooltipSize, {
+    paddingX: number;
+    paddingY: number;
+    fontSize: number;
+    maxWidth: number;
+}>;
+export declare const TOOLTIP_DEFAULTS: {
+    placement: "top";
+    trigger: "hover";
+    mouseEnterDelay: number;
+    mouseLeaveDelay: number;
+    zIndex: number;
+    arrowSize: number;
+    gap: number;
+    viewportPadding: number;
+};
+export declare const TOOLTIP_TRANSITION_DURATION: 200;
+export interface TooltipVisualTokens {
+    surface: string;
+    foreground: string;
+    ring: string;
+    radius: string;
+    shadow: string;
+}
+/**
+ * Mirrors the component variables used by x-mobile-ui while keeping concrete
+ * fallbacks for mini-program runtimes that do not resolve inherited CSS vars.
+ */
+export declare function getTooltipVisualTokens(variant: TooltipVariant, colors: ThemeColors, radius: number, customColor?: string): TooltipVisualTokens;
+//# sourceMappingURL=tokens.d.ts.map