@hanwenbo/x-taro-ui 0.0.1

package/es/components/popover/popover.js

@@ -0,0 +1,174 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { typographyLineHeight, useTokens } from "../../theme";
+import { classNames } from "../../utils";
+import { useConfigProvider } from "../configProvider";
+import { Tooltip } from "../tooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function renderNode(node, style) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: style,
+      children: node
+    });
+  }
+  return node;
+}
+function hasRenderableNode(node) {
+  return node !== undefined && node !== null && node !== false && node !== '';
+}
+export var Popover = function Popover(_ref) {
+  var _trigger$;
+  var content = _ref.content,
+    title = _ref.title,
+    controlledOpen = _ref.open,
+    visible = _ref.visible,
+    defaultOpen = _ref.defaultOpen,
+    _ref$defaultVisible = _ref.defaultVisible,
+    defaultVisible = _ref$defaultVisible === void 0 ? false : _ref$defaultVisible,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+    _ref$autoAdjustOverfl = _ref.autoAdjustOverflow,
+    autoAdjustOverflow = _ref$autoAdjustOverfl === void 0 ? true : _ref$autoAdjustOverfl,
+    mouseEnterDelay = _ref.mouseEnterDelay,
+    mouseLeaveDelay = _ref.mouseLeaveDelay,
+    _ref$destroyOnHidden = _ref.destroyOnHidden,
+    destroyOnHidden = _ref$destroyOnHidden === void 0 ? false : _ref$destroyOnHidden,
+    _ref$fresh = _ref.fresh,
+    fresh = _ref$fresh === void 0 ? false : _ref$fresh,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1080 : _ref$zIndex,
+    getPopupContainer = _ref.getPopupContainer,
+    onOpenChange = _ref.onOpenChange,
+    onVisibleChange = _ref.onVisibleChange,
+    overlayClassName = _ref.overlayClassName,
+    overlayStyle = _ref.overlayStyle,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    semanticClassNames = _ref.classNames,
+    semanticStyles = _ref.styles;
+  var config = useConfigProvider();
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    motion = _useTokens.motion,
+    radius = _useTokens.radius,
+    spacing = _useTokens.spacing,
+    typography = _useTokens.typography;
+  var controlledValue = controlledOpen !== undefined ? controlledOpen : visible;
+  var isControlled = controlledValue !== undefined;
+  var _useState = useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : defaultVisible),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalOpen = _useState2[0],
+    setInternalOpen = _useState2[1];
+  var active = isControlled ? Boolean(controlledValue) : internalOpen;
+  var resolvedTrigger = Array.isArray(trigger) ? (_trigger$ = trigger[0]) !== null && _trigger$ !== void 0 ? _trigger$ : 'manual' : trigger;
+  var hasPanelContent = hasRenderableNode(title) || hasRenderableNode(content);
+  var setActive = useCallback(function (nextOpen) {
+    if (!isControlled) setInternalOpen(nextOpen);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpen);
+    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(nextOpen);
+  }, [isControlled, onOpenChange, onVisibleChange]);
+  var panelContent = hasPanelContent ? /*#__PURE__*/_jsxs(View, {
+    "data-slot": "popover-content-wrapper",
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: hasRenderableNode(title) && hasRenderableNode(content) ? spacing['1.5'] : 0
+    },
+    children: [hasRenderableNode(title) ? /*#__PURE__*/_jsx(View, {
+      "data-slot": "popover-title",
+      className: classNames("".concat(config.prefixCls, "-popover__title"), semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.title),
+      style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.title,
+      children: renderNode(title, _objectSpread({
+        color: "var(--x-popover-foreground, ".concat(colors['popover-foreground'], ")"),
+        fontSize: typography.roles.label.fontSize,
+        fontWeight: typography.roles.h5.fontWeight,
+        lineHeight: typographyLineHeight('label')
+      }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.title))
+    }) : null, hasRenderableNode(content) ? /*#__PURE__*/_jsx(View, {
+      "data-slot": "popover-content",
+      className: classNames("".concat(config.prefixCls, "-popover__content"), semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.content),
+      style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.content,
+      children: renderNode(content, _objectSpread({
+        color: "var(--x-popover-foreground, ".concat(colors['popover-foreground'], ")"),
+        fontSize: typography.roles.helper.fontSize,
+        fontWeight: typography.roles.helper.fontWeight,
+        lineHeight: typographyLineHeight('helper')
+      }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.content))
+    }) : null]
+  }) : undefined;
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "popover-root",
+    className: classNames("".concat(config.prefixCls, "-popover"), "".concat(config.prefixCls, "-popover--").concat(placement), semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.root, className),
+    style: _objectSpread(_objectSpread({
+      position: 'relative',
+      display: 'inline-flex'
+    }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.root), style),
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: panelContent,
+      open: active,
+      placement: placement,
+      trigger: resolvedTrigger,
+      size: size,
+      variant: "light",
+      disabled: disabled,
+      arrow: arrow,
+      autoAdjustOverflow: autoAdjustOverflow,
+      mouseEnterDelay: mouseEnterDelay,
+      mouseLeaveDelay: mouseLeaveDelay,
+      destroyOnHidden: destroyOnHidden,
+      fresh: fresh,
+      zIndex: zIndex,
+      getPopupContainer: getPopupContainer,
+      onOpenChange: setActive,
+      className: classNames("".concat(config.prefixCls, "-popover__panel"), semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.panel, overlayClassName),
+      style: _objectSpread(_objectSpread({
+        minWidth: 180,
+        maxWidth: "min(320px, calc(100vw - ".concat(spacing[2] * 2, "px))"),
+        paddingTop: spacing[3],
+        paddingRight: spacing[3],
+        paddingBottom: spacing[3],
+        paddingLeft: spacing[3],
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: "var(--x-border, ".concat(colors.border, ")"),
+        borderRadius: "var(--x-radius-lg, ".concat(radius.lg, "px)"),
+        backgroundColor: "var(--x-popover, ".concat(colors.popover, ")"),
+        color: "var(--x-popover-foreground, ".concat(colors['popover-foreground'], ")"),
+        boxShadow: 'var(--x-shadow-lg)',
+        transition: "opacity ".concat(active ? motion.durationsMs.overlayExit : motion.durationsMs.standard, "ms var(--x-easing-").concat(active ? 'decelerate' : 'accelerate', ", ").concat(active ? motion.easing.decelerate : motion.easing.accelerate, "), transform ").concat(active ? motion.durationsMs.overlayExit : motion.durationsMs.standard, "ms var(--x-easing-").concat(active ? 'decelerate' : 'accelerate', ", ").concat(active ? motion.easing.decelerate : motion.easing.accelerate, "), visibility 0ms linear ").concat(active ? 0 : motion.durationsMs.standard, "ms")
+      }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.panel), overlayStyle),
+      classNames: {
+        arrow: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.arrow
+      },
+      styles: {
+        arrow: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.arrow
+      },
+      children: children
+    })
+  });
+};
+Popover.displayName = 'Popover';
+export default Popover;

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

@@ -0,0 +1,51 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { TooltipPlacement, TooltipSize, TooltipTrigger } from '../tooltip';
+export declare type PopoverTrigger = TooltipTrigger | TooltipTrigger[];
+export interface PopoverClassNames {
+    root?: string;
+    panel?: string;
+    title?: string;
+    content?: string;
+    arrow?: string;
+}
+export interface PopoverStyles {
+    root?: CSSProperties;
+    panel?: CSSProperties;
+    title?: CSSProperties;
+    content?: CSSProperties;
+    arrow?: CSSProperties;
+}
+export interface PopoverProps {
+    content?: ReactNode;
+    title?: ReactNode;
+    open?: boolean;
+    visible?: boolean;
+    defaultOpen?: boolean;
+    defaultVisible?: boolean;
+    placement?: TooltipPlacement;
+    /** Uses the first trigger when an array is provided, matching the x-web-ui contract. */
+    trigger?: PopoverTrigger;
+    size?: TooltipSize;
+    disabled?: boolean;
+    arrow?: boolean | {
+        pointAtCenter: boolean;
+    };
+    autoAdjustOverflow?: boolean;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    destroyOnHidden?: boolean;
+    fresh?: boolean;
+    zIndex?: number;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    onOpenChange?: (open: boolean) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    overlayClassName?: string;
+    overlayStyle?: CSSProperties;
+    children?: ReactNode;
+    /** Root wrapper class and style, preserving the original Taro contract. */
+    className?: string;
+    style?: CSSProperties;
+    classNames?: PopoverClassNames;
+    styles?: PopoverStyles;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/popover/types.js

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

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

@@ -0,0 +1,4 @@
+export { Popup } from './popup';
+export type { PopupProps, PopupPlacement, PopupAnimation } from './types';
+export { usePopupTokens, usePopupAnimation, usePopupBorderRadius, usePopupStyle } from './tokens';
+//# sourceMappingURL=index.d.ts.map

package/es/components/popup/index.js

@@ -0,0 +1,2 @@
+export { Popup } from "./popup";
+export { usePopupTokens, usePopupAnimation, usePopupBorderRadius, usePopupStyle } from "./tokens";

package/es/components/popup/popup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Popup Component
+ * Mobile sheet-style popup (per x-design-system mobile family spec)
+ */
+import React from 'react';
+import type { PopupProps } from './types';
+export declare const Popup: React.FC<PopupProps>;
+export default Popup;
+//# sourceMappingURL=popup.d.ts.map

package/es/components/popup/popup.js

@@ -0,0 +1,205 @@
+var _excluded = ["padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
+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 _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 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); }
+/**
+ * Popup Component
+ * Mobile sheet-style popup (per x-design-system mobile family spec)
+ */
+
+import React, { useCallback } from 'react';
+import { View } from '@tarojs/components';
+import { OverlayHost } from "../../adapters/miniapp";
+import { classNames } from "../../utils";
+import { usePopupTokens, usePopupStyle } from "./tokens";
+import { useTokens } from "../../theme";
+import { Icon } from "../icon";
+import { designSystemMotion } from "../../theme/generated/design-system.generated";
+import { useConfig } from "../configProvider";
+import { resolveLocaleText } from "../../utils/locale";
+import { renderTextNode } from "../_shared/render";
+import { usePressable } from "../../patterns/pressable";
+import { addCssEnvironmentInset, resolveBlockPaddingEdge, resolvePhysicalPadding, toCssLength } from "../../utils/style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Popup = function Popup(_ref) {
+  var _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10;
+  var _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+    position = _ref.position,
+    _ref$mask = _ref.mask,
+    mask = _ref$mask === void 0 ? true : _ref$mask,
+    _ref$maskClosable = _ref.maskClosable,
+    maskClosable = _ref$maskClosable === void 0 ? true : _ref$maskClosable,
+    closeOnMaskClick = _ref.closeOnMaskClick,
+    onMaskPress = _ref.onMaskPress,
+    _ref$maskTransparent = _ref.maskTransparent,
+    maskTransparent = _ref$maskTransparent === void 0 ? false : _ref$maskTransparent,
+    _ref$destroyOnClose = _ref.destroyOnClose,
+    destroyOnClose = _ref$destroyOnClose === void 0 ? false : _ref$destroyOnClose,
+    _ref$forceRender = _ref.forceRender,
+    forceRender = _ref$forceRender === void 0 ? false : _ref$forceRender,
+    bodyStyle = _ref.bodyStyle,
+    contentStyle = _ref.contentStyle,
+    headerStyle = _ref.headerStyle,
+    maskStyle = _ref.maskStyle,
+    _ref$round = _ref.round,
+    round = _ref$round === void 0 ? true : _ref$round,
+    _ref$safeArea = _ref.safeArea,
+    safeArea = _ref$safeArea === void 0 ? true : _ref$safeArea,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
+    title = _ref.title,
+    _ref$closeIcon = _ref.closeIcon,
+    closeIcon = _ref$closeIcon === void 0 ? false : _ref$closeIcon,
+    _ref$animation = _ref.animation,
+    animation = _ref$animation === void 0 ? 'slide' : _ref$animation,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? designSystemMotion.durationsMs.overlayDefault : _ref$duration,
+    size = _ref.size,
+    children = _ref.children,
+    onClose = _ref.onClose,
+    afterClose = _ref.afterClose,
+    onMaskClick = _ref.onMaskClick,
+    onPress = _ref.onPress,
+    className = _ref.className,
+    style = _ref.style,
+    testID = _ref.testID;
+  var config = useConfig();
+  var resolvedPlacement = position !== null && position !== void 0 ? position : placement;
+  var resolvedMaskClosable = closeOnMaskClick !== null && closeOnMaskClick !== void 0 ? closeOnMaskClick : maskClosable;
+  var resolvedSize = size !== null && size !== void 0 ? size : config.size;
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors;
+  var tokens = usePopupTokens(resolvedPlacement, resolvedSize, round);
+  var popupStyle = usePopupStyle(resolvedPlacement, resolvedSize, round);
+  var closeLabel = resolveLocaleText(config.locale, 'common.close', '关闭');
+  var closePress = usePressable({
+    onPress: onClose,
+    scale: 0.985
+  });
+  var handleMaskClick = useCallback(function () {
+    onMaskClick === null || onMaskClick === void 0 || onMaskClick();
+    if (!resolvedMaskClosable) return;
+    onMaskPress === null || onMaskPress === void 0 || onMaskPress();
+    onClose === null || onClose === void 0 || onClose();
+  }, [onClose, onMaskClick, onMaskPress, resolvedMaskClosable]);
+  var contentAnimation = animation === 'none' ? 'none' : animation === 'fade' ? 'fade' : animation === 'scale' ? 'scale' : 'slide';
+  var resolvedHeaderStyle = _objectSpread({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: "".concat(tokens.headerPadding, "px ").concat(tokens.contentPadding, "px"),
+    borderBottom: title ? "1px solid ".concat(colors.border) : 'none',
+    position: 'relative'
+  }, headerStyle);
+  var _ref2 = contentStyle !== null && contentStyle !== void 0 ? contentStyle : {},
+    padding = _ref2.padding,
+    paddingTop = _ref2.paddingTop,
+    paddingRight = _ref2.paddingRight,
+    paddingBottom = _ref2.paddingBottom,
+    paddingLeft = _ref2.paddingLeft,
+    paddingBlock = _ref2.paddingBlock,
+    paddingBlockStart = _ref2.paddingBlockStart,
+    paddingBlockEnd = _ref2.paddingBlockEnd,
+    customContentStyle = _objectWithoutProperties(_ref2, _excluded);
+  var normalizedPadding = toCssLength(padding);
+  var topPadding = (_ref3 = (_ref4 = (_ref5 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingBlockStart) !== null && _ref5 !== void 0 ? _ref5 : resolveBlockPaddingEdge(paddingBlock, 'start')) !== null && _ref4 !== void 0 ? _ref4 : resolvePhysicalPadding(normalizedPadding, 'top')) !== null && _ref3 !== void 0 ? _ref3 : tokens.contentPadding;
+  var rightPadding = (_ref6 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : resolvePhysicalPadding(normalizedPadding, 'right')) !== null && _ref6 !== void 0 ? _ref6 : tokens.contentPadding;
+  var bottomPadding = (_ref7 = (_ref8 = (_ref9 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingBlockEnd) !== null && _ref9 !== void 0 ? _ref9 : resolveBlockPaddingEdge(paddingBlock, 'end')) !== null && _ref8 !== void 0 ? _ref8 : resolvePhysicalPadding(normalizedPadding, 'bottom')) !== null && _ref7 !== void 0 ? _ref7 : tokens.contentPadding;
+  var leftPadding = (_ref10 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : resolvePhysicalPadding(normalizedPadding, 'left')) !== null && _ref10 !== void 0 ? _ref10 : tokens.contentPadding;
+  return /*#__PURE__*/_jsx(OverlayHost, {
+    visible: visible,
+    placement: resolvedPlacement,
+    config: {
+      zIndex: zIndex,
+      backdrop: mask,
+      closeOnBackdrop: true,
+      closeOnEscape: false,
+      keepMounted: forceRender || !destroyOnClose,
+      disableBodyScroll: mask,
+      enterDuration: duration,
+      exitDuration: duration,
+      contentAnimation: contentAnimation,
+      backdropStyle: _objectSpread(_objectSpread({}, maskTransparent ? {
+        opacity: 0
+      } : {}), maskStyle)
+    },
+    onBackdropClick: handleMaskClick,
+    afterClose: afterClose,
+    children: /*#__PURE__*/_jsxs(View, {
+      role: "dialog",
+      ariaLabel: typeof title === 'string' ? title : undefined,
+      "aria-hidden": !visible,
+      "data-slot": "popup-panel",
+      "data-position": resolvedPlacement,
+      "data-size": resolvedSize,
+      "data-testid": testID,
+      className: classNames("".concat(config.prefixCls, "-popup"), "".concat(config.prefixCls, "-popup--").concat(resolvedPlacement), "".concat(config.prefixCls, "-popup--").concat(resolvedSize), "".concat(config.prefixCls, "-popup--animation-").concat(animation), round && "".concat(config.prefixCls, "-popup--round"), className),
+      style: _objectSpread(_objectSpread(_objectSpread({}, popupStyle), {}, {
+        marginLeft: resolvedPlacement === 'right' ? 'auto' : undefined,
+        marginRight: resolvedPlacement === 'left' ? 'auto' : undefined
+      }, bodyStyle), style),
+      onClick: onPress,
+      children: [(title || closeIcon) && /*#__PURE__*/_jsxs(View, {
+        "data-slot": "popup-header",
+        className: "".concat(config.prefixCls, "-popup__header"),
+        style: resolvedHeaderStyle,
+        children: [title && renderTextNode(title, {
+          fontSize: tokens.titleFontSize,
+          fontWeight: 600,
+          color: colors.foreground
+        }), closeIcon && /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
+          role: "button",
+          ariaLabel: closeLabel,
+          "data-slot": "popup-close",
+          className: "".concat(config.prefixCls, "-popup__close"),
+          style: _objectSpread(_objectSpread({
+            position: 'absolute',
+            right: Math.max(4, tokens.headerPadding - 12),
+            top: '50%',
+            width: 40,
+            height: 40,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 'var(--x-radius-full)'
+          }, closePress.style), {}, {
+            transform: "translateY(-50%) ".concat(closePress.style.transform)
+          })
+        }, closePress.handlers), {}, {
+          onClick: function onClick(event) {
+            var _event$stopPropagatio;
+            event === null || event === void 0 || (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);
+            closePress.handlers.onClick();
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "X",
+            size: 16,
+            color: colors['muted-foreground']
+          })
+        }))]
+      }), /*#__PURE__*/_jsx(View, {
+        "data-slot": "popup-body",
+        className: "".concat(config.prefixCls, "-popup__body"),
+        style: _objectSpread({
+          paddingTop: topPadding,
+          paddingRight: rightPadding,
+          paddingBottom: addCssEnvironmentInset(safeArea && resolvedPlacement === 'bottom', 'safe-area-inset-bottom', bottomPadding),
+          paddingLeft: leftPadding,
+          overflow: 'auto',
+          flex: 1
+        }, customContentStyle),
+        children: children
+      })]
+    })
+  });
+};
+export default Popup;

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

@@ -0,0 +1,38 @@
+/**
+ * Popup Component Tokens
+ * Defines how Popup consumes design system tokens
+ */
+/// <reference types="react" />
+import type { SizeVariant } from '../../theme/types';
+import type { PopupPlacement, PopupAnimation } from './types';
+export interface PopupTokens {
+    width?: string;
+    height?: string;
+    maxWidth?: number;
+    maxHeight?: string;
+    borderRadius: number | string;
+    headerPadding: number;
+    contentPadding: number;
+    titleFontSize: number;
+}
+/**
+ * Get popup size tokens based on placement and size
+ */
+export declare function usePopupTokens(placement: PopupPlacement, size?: SizeVariant, round?: boolean): PopupTokens;
+/**
+ * Get popup animation config
+ */
+export declare function usePopupAnimation(placement: PopupPlacement, animation: PopupAnimation, duration?: number): {
+    transition: string;
+    initialTransform: string;
+    initialOpacity: number;
+};
+/**
+ * Get popup border radius for placement
+ */
+export declare function usePopupBorderRadius(placement: PopupPlacement, round: boolean): string;
+/**
+ * Build popup style object
+ */
+export declare function usePopupStyle(placement: PopupPlacement, size: SizeVariant, round: boolean): React.CSSProperties;
+//# sourceMappingURL=tokens.d.ts.map

package/es/components/popup/tokens.js

@@ -0,0 +1,162 @@
+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); }
+/**
+ * Popup Component Tokens
+ * Defines how Popup consumes design system tokens
+ */
+
+import { useMemo } from 'react';
+import { designSystemMotion, useTokens } from "../../theme";
+/**
+ * Get popup size tokens based on placement and size
+ */
+export function usePopupTokens(placement) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'middle';
+  var round = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  return useMemo(function () {
+    var sizeMap = {
+      mini: {
+        maxWidth: 400,
+        titleFontSize: 13,
+        headerPadding: 16,
+        contentPadding: 16
+      },
+      small: {
+        maxWidth: 520,
+        titleFontSize: 14,
+        headerPadding: 20,
+        contentPadding: 20
+      },
+      middle: {
+        maxWidth: 640,
+        titleFontSize: 16,
+        headerPadding: 24,
+        contentPadding: 24
+      },
+      large: {
+        maxWidth: 750,
+        titleFontSize: 18,
+        headerPadding: 32,
+        contentPadding: 32
+      }
+    };
+    var sizeConfig = sizeMap[size];
+
+    // Placement-specific sizing
+    var isVertical = placement === 'top' || placement === 'bottom';
+    var isHorizontal = placement === 'left' || placement === 'right';
+    var isCenter = placement === 'center';
+    return _objectSpread(_objectSpread({}, sizeConfig), {}, {
+      width: isHorizontal ? size === 'mini' ? '60%' : size === 'small' ? '70%' : size === 'middle' ? '80%' : '90%' : undefined,
+      height: undefined,
+      maxHeight: isVertical ? size === 'mini' ? '40%' : size === 'small' ? '50%' : size === 'middle' ? '70%' : '80%' : isCenter ? '90%' : '100%',
+      borderRadius: round ? isCenter ? 'var(--x-popup-radius-center)' : isHorizontal ? 'var(--x-popup-radius-side)' : 'var(--x-popup-radius-edge)' : 0,
+      headerPadding: sizeConfig.headerPadding,
+      contentPadding: sizeConfig.contentPadding,
+      titleFontSize: sizeConfig.titleFontSize
+    });
+  }, [placement, size, round]);
+}
+
+/**
+ * Get popup animation config
+ */
+export function usePopupAnimation(placement, animation) {
+  var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : designSystemMotion.durationsMs.overlayDefault;
+  return useMemo(function () {
+    var baseTransition = "transform ".concat(duration, "ms ").concat(designSystemMotion.easing.decelerate, ", opacity ").concat(duration, "ms ").concat(designSystemMotion.easing.decelerate);
+    if (animation === 'none') {
+      return {
+        transition: 'none',
+        initialTransform: 'none',
+        initialOpacity: 1
+      };
+    }
+    if (animation === 'fade') {
+      return {
+        transition: baseTransition,
+        initialTransform: 'none',
+        initialOpacity: 0
+      };
+    }
+    if (animation === 'scale') {
+      return {
+        transition: baseTransition,
+        initialTransform: 'scale(0.9)',
+        initialOpacity: 0
+      };
+    }
+
+    // slide animation (default)
+    var transforms = {
+      top: 'translateY(-100%)',
+      bottom: 'translateY(100%)',
+      left: 'translateX(-100%)',
+      right: 'translateX(100%)',
+      center: 'scale(0.9)'
+    };
+    return {
+      transition: baseTransition,
+      initialTransform: transforms[placement],
+      initialOpacity: placement === 'center' ? 0 : 1
+    };
+  }, [placement, animation, duration]);
+}
+
+/**
+ * Get popup border radius for placement
+ */
+export function usePopupBorderRadius(placement, round) {
+  return useMemo(function () {
+    if (!round) return '0';
+    var edgeRadius = 'var(--x-popup-radius-edge)';
+    var sideRadius = 'var(--x-popup-radius-side)';
+    switch (placement) {
+      case 'bottom':
+        return "".concat(edgeRadius, " ").concat(edgeRadius, " 0 0");
+      case 'top':
+        return "0 0 ".concat(edgeRadius, " ").concat(edgeRadius);
+      case 'left':
+        return "0 ".concat(sideRadius, " ").concat(sideRadius, " 0");
+      case 'right':
+        return "".concat(sideRadius, " 0 0 ").concat(sideRadius);
+      case 'center':
+      default:
+        return 'var(--x-popup-radius-center)';
+    }
+  }, [placement, round]);
+}
+
+/**
+ * Build popup style object
+ */
+export function usePopupStyle(placement, size, round) {
+  var tokens = usePopupTokens(placement, size, round);
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors;
+  var borderRadius = usePopupBorderRadius(placement, round);
+  var isHorizontal = placement === 'left' || placement === 'right';
+  return useMemo(function () {
+    return {
+      backgroundColor: 'var(--x-popup-surface, ' + colors.background + ')',
+      color: 'var(--x-popup-foreground, ' + colors.foreground + ')',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'var(--x-popup-border, ' + colors.border + ')',
+      boxShadow: 'var(--x-popup-shadow, none)',
+      borderRadius: borderRadius,
+      boxSizing: 'border-box',
+      width: tokens.width || (placement === 'center' ? '80%' : '100%'),
+      height: isHorizontal ? '100%' : tokens.height,
+      maxWidth: placement === 'center' ? tokens.maxWidth : undefined,
+      maxHeight: tokens.maxHeight,
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column'
+    };
+  }, [tokens, colors.background, colors.foreground, colors.border, borderRadius, placement, isHorizontal]);
+}