@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/tooltip/index.js

@@ -25,8 +25,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _configProvider = require("../config-provider");
 
-var _colors = require("../_util/colors");
-
 var _motion = require("../_util/motion");
 
 var _placements = _interopRequireDefault(require("../_util/placements"));
@@ -35,6 +33,12 @@ var _reactNode = require("../_util/reactNode");
 
 var _warning = _interopRequireDefault(require("../_util/warning"));
 
+var _PurePanel = _interopRequireDefault(require("./PurePanel"));
+
+var _style = _interopRequireDefault(require("./style"));
+
+var _util = require("./util");
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -61,12 +65,11 @@ var splitObject = function splitObject(obj, keys) {
     picked: picked,
     omitted: omitted
   };
-};
-
-var PresetColorRegex = new RegExp("^(".concat(_colors.PresetColorTypes.join('|'), ")(-inverse)?$")); // Fix Tooltip won't hide at disabled button
+}; // Fix Tooltip won't hide at disabled button
 // mouse events don't trigger at disabled button in Chrome
 // https://github.com/react-component/tooltip/issues/18
 
+
 function getDisabledCompatibleChildren(element, prefixCls) {
   var elementType = element.type;
 
@@ -92,7 +95,7 @@ function getDisabledCompatibleChildren(element, prefixCls) {
     });
     return /*#__PURE__*/React.createElement("span", {
       style: spanStyle,
-      className: (0, _classnames["default"])(element.props.className, "".concat(prefixCls, "-disabled-compatible-wrapper"))
+      className: (0, _classnames["default"])(element.props.className, prefixCls + "-disabled-compatible-wrapper")
     }, child);
   }
 
@@ -100,13 +103,22 @@ function getDisabledCompatibleChildren(element, prefixCls) {
 }
 
 var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames2;
+  var _a, _b;
+
+  var customizePrefixCls = props.prefixCls,
+      openClassName = props.openClassName,
+      getTooltipContainer = props.getTooltipContainer,
+      overlayClassName = props.overlayClassName,
+      color = props.color,
+      overlayInnerStyle = props.overlayInnerStyle,
+      children = props.children,
+      afterOpenChange = props.afterOpenChange,
+      afterVisibleChange = props.afterVisibleChange;
 
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
       getContextPopupContainer = _React$useContext.getPopupContainer,
       getPrefixCls = _React$useContext.getPrefixCls,
-      direction = _React$useContext.direction; // Warning for deprecated usage
-
+      direction = _React$useContext.direction;
 
   if (process.env.NODE_ENV !== 'production') {
     [['visible', 'open'], ['defaultVisible', 'defaultOpen'], ['onVisibleChange', 'onOpenChange'], ['afterVisibleChange', 'afterOpenChange']].forEach(function (_ref) {
@@ -114,13 +126,13 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
           deprecatedName = _ref2[0],
           newName = _ref2[1];
 
-      process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(deprecatedName in props), 'Tooltip', "`".concat(deprecatedName, "` is deprecated which will be removed in next major version, please use `").concat(newName, "` instead.")) : void 0;
+      process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(deprecatedName in props), 'Tooltip', "`" + deprecatedName + "` is deprecated, please use `" + newName + "` instead.") : void 0;
     });
   }
 
   var _useMergedState = (0, _useMergedState3["default"])(false, {
-    value: props.open !== undefined ? props.open : props.visible,
-    defaultValue: props.defaultOpen !== undefined ? props.defaultOpen : props.defaultVisible
+    value: (_a = props.open) !== null && _a !== void 0 ? _a : props.visible,
+    defaultValue: (_b = props.defaultOpen) !== null && _b !== void 0 ? _b : props.defaultVisible
   }),
       _useMergedState2 = (0, _slicedToArray2["default"])(_useMergedState, 2),
       open = _useMergedState2[0],
@@ -177,18 +189,18 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
 
     if (/top|Bottom/.test(placement)) {
-      transformOrigin.top = "".concat(rect.height - align.offset[1], "px");
+      transformOrigin.top = rect.height - align.offset[1] + "px";
     } else if (/Top|bottom/.test(placement)) {
-      transformOrigin.top = "".concat(-align.offset[1], "px");
+      transformOrigin.top = -align.offset[1] + "px";
     }
 
     if (/left|Right/.test(placement)) {
-      transformOrigin.left = "".concat(rect.width - align.offset[0], "px");
+      transformOrigin.left = rect.width - align.offset[0] + "px";
     } else if (/right|Left/.test(placement)) {
-      transformOrigin.left = "".concat(-align.offset[0], "px");
+      transformOrigin.left = -align.offset[0] + "px";
     }
 
-    domNode.style.transformOrigin = "".concat(transformOrigin.left, " ").concat(transformOrigin.top);
+    domNode.style.transformOrigin = transformOrigin.left + " " + transformOrigin.top;
   };
 
   var getOverlay = function getOverlay() {
@@ -209,17 +221,12 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
       mouseEnterDelay = _props$mouseEnterDela === void 0 ? 0.1 : _props$mouseEnterDela,
       _props$mouseLeaveDela = props.mouseLeaveDelay,
       mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0.1 : _props$mouseLeaveDela,
-      otherProps = __rest(props, ["getPopupContainer", "placement", "mouseEnterDelay", "mouseLeaveDelay"]);
+      overlayStyle = props.overlayStyle,
+      otherProps = __rest(props, ["getPopupContainer", "placement", "mouseEnterDelay", "mouseLeaveDelay", "overlayStyle"]);
 
-  var customizePrefixCls = props.prefixCls,
-      openClassName = props.openClassName,
-      getTooltipContainer = props.getTooltipContainer,
-      overlayClassName = props.overlayClassName,
-      color = props.color,
-      overlayInnerStyle = props.overlayInnerStyle,
-      children = props.children;
   var prefixCls = getPrefixCls('tooltip', customizePrefixCls);
   var rootPrefixCls = getPrefixCls();
+  var injectFromPopover = props['data-popover-inject'];
   var tempOpen = open; // Hide tooltip when there is no title
 
   if (!('open' in props) && !('visible' in props) && isNoTitle()) {
@@ -228,38 +235,36 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var child = getDisabledCompatibleChildren((0, _reactNode.isValidElement)(children) && !(0, _reactNode.isFragment)(children) ? children : /*#__PURE__*/React.createElement("span", null, children), prefixCls);
   var childProps = child.props;
-  var childCls = !childProps.className || typeof childProps.className === 'string' ? (0, _classnames["default"])(childProps.className, (0, _defineProperty2["default"])({}, openClassName || "".concat(prefixCls, "-open"), true)) : childProps.className;
-  var customOverlayClassName = (0, _classnames["default"])(overlayClassName, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-").concat(color), color && PresetColorRegex.test(color)), _classNames2));
-  var formattedOverlayInnerStyle = overlayInnerStyle;
-  var arrowContentStyle = {};
-
-  if (color && !PresetColorRegex.test(color)) {
-    formattedOverlayInnerStyle = (0, _extends2["default"])((0, _extends2["default"])({}, overlayInnerStyle), {
-      background: color
-    }); // @ts-ignore
-
-    arrowContentStyle = {
-      '--antd-arrow-background-color': color
-    };
-  }
+  var childCls = !childProps.className || typeof childProps.className === 'string' ? (0, _classnames["default"])(childProps.className, (0, _defineProperty2["default"])({}, openClassName || prefixCls + "-open", true)) : childProps.className; // Style
+
+  var _useStyle = (0, _style["default"])(prefixCls, !injectFromPopover),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1]; // Color
+
 
-  return /*#__PURE__*/React.createElement(_rcTooltip["default"], (0, _extends2["default"])({}, otherProps, {
+  var colorInfo = (0, _util.parseColor)(prefixCls, color);
+  var formattedOverlayInnerStyle = (0, _extends2["default"])((0, _extends2["default"])({}, overlayInnerStyle), colorInfo.overlayStyle);
+  var arrowContentStyle = colorInfo.arrowStyle;
+  var customOverlayClassName = (0, _classnames["default"])(overlayClassName, (0, _defineProperty2["default"])({}, prefixCls + "-rtl", direction === 'rtl'), colorInfo.className, hashId);
+  return wrapSSR( /*#__PURE__*/React.createElement(_rcTooltip["default"], (0, _extends2["default"])({}, otherProps, {
     placement: placement,
     mouseEnterDelay: mouseEnterDelay,
     mouseLeaveDelay: mouseLeaveDelay,
     prefixCls: prefixCls,
     overlayClassName: customOverlayClassName,
+    overlayStyle: (0, _extends2["default"])((0, _extends2["default"])({}, arrowContentStyle), overlayStyle),
     getTooltipContainer: getPopupContainer || getTooltipContainer || getContextPopupContainer,
     ref: ref,
     builtinPlacements: getTooltipPlacements(),
     overlay: getOverlay(),
     visible: tempOpen,
     onVisibleChange: onOpenChange,
+    afterVisibleChange: afterOpenChange !== null && afterOpenChange !== void 0 ? afterOpenChange : afterVisibleChange,
     onPopupAlign: onPopupAlign,
     overlayInnerStyle: formattedOverlayInnerStyle,
     arrowContent: /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-arrow-content"),
-      style: arrowContentStyle
+      className: prefixCls + "-arrow-content"
     }),
     motion: {
       motionName: (0, _motion.getTransitionName)(rootPrefixCls, 'zoom-big-fast', props.transitionName),
@@ -267,12 +272,13 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }), tempOpen ? (0, _reactNode.cloneElement)(child, {
     className: childCls
-  }) : child);
+  }) : child));
 });
 
 if (process.env.NODE_ENV !== 'production') {
   Tooltip.displayName = 'Tooltip';
 }
 
+Tooltip._InternalPanelDoNotUseOrYouWillBeFired = _PurePanel["default"];
 var _default = Tooltip;
 exports["default"] = _default;

package/lib/tooltip/style/index.d.ts

@@ -1,2 +1,7 @@
-import '../../style/default.less';
-import './index.less';
+import type { UseComponentStyleResult } from '../../theme/internal';
+export interface ComponentToken {
+    zIndexPopup: number;
+    colorBgDefault: string;
+}
+declare const _default: (prefixCls: string, injectStyle: boolean) => UseComponentStyleResult;
+export default _default;

package/lib/tooltip/style/index.js

@@ -1,5 +1,135 @@
 "use strict";
 
-require("../../style/default.less");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 
-require("./index.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _motion = require("../../style/motion");
+
+var _internal = require("../../theme/internal");
+
+var _style = require("../../style");
+
+var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow"));
+
+var generatorTooltipPresetColor = function generatorTooltipPresetColor(token) {
+  var componentCls = token.componentCls;
+  return _internal.PresetColors.reduce(function (previousValue, currentValue) {
+    var _previousValue;
+
+    var lightColor = token[currentValue + "-6"];
+    previousValue["&" + componentCls + "-" + currentValue] = (_previousValue = {}, (0, _defineProperty2["default"])(_previousValue, componentCls + "-inner", {
+      backgroundColor: lightColor
+    }), (0, _defineProperty2["default"])(_previousValue, componentCls + "-arrow", {
+      '--antd-arrow-background-color': lightColor
+    }), _previousValue);
+    return previousValue;
+  }, {});
+};
+
+var genTooltipStyle = function genTooltipStyle(token) {
+  var _extends2;
+
+  var componentCls = token.componentCls,
+      tooltipMaxWidth = token.tooltipMaxWidth,
+      tooltipColor = token.tooltipColor,
+      tooltipBg = token.tooltipBg,
+      tooltipBorderRadius = token.tooltipBorderRadius,
+      zIndexPopup = token.zIndexPopup,
+      controlHeight = token.controlHeight,
+      boxShadowSecondary = token.boxShadowSecondary,
+      paddingSM = token.paddingSM,
+      paddingXS = token.paddingXS,
+      tooltipRadiusOuter = token.tooltipRadiusOuter;
+  return [(0, _defineProperty2["default"])({}, componentCls, (0, _extends3["default"])((0, _extends3["default"])((0, _extends3["default"])((0, _extends3["default"])({}, (0, _style.resetComponent)(token)), (_extends2 = {
+    position: 'absolute',
+    zIndex: zIndexPopup,
+    display: 'block',
+    '&': [{
+      width: 'max-content'
+    }, {
+      width: 'intrinsic'
+    }],
+    maxWidth: tooltipMaxWidth,
+    visibility: 'visible',
+    '&-hidden': {
+      display: 'none'
+    },
+    '--antd-arrow-background-color': tooltipBg
+  }, (0, _defineProperty2["default"])(_extends2, componentCls + "-inner", {
+    minWidth: controlHeight,
+    minHeight: controlHeight,
+    padding: paddingSM / 2 + "px " + paddingXS + "px",
+    color: tooltipColor,
+    textAlign: 'start',
+    textDecoration: 'none',
+    wordWrap: 'break-word',
+    backgroundColor: tooltipBg,
+    borderRadius: tooltipBorderRadius,
+    boxShadow: boxShadowSecondary
+  }), (0, _defineProperty2["default"])(_extends2, ["&-placement-left", "&-placement-leftTop", "&-placement-leftBottom", "&-placement-right", "&-placement-rightTop", "&-placement-rightBottom"].join(','), (0, _defineProperty2["default"])({}, componentCls + "-inner", {
+    borderRadius: tooltipBorderRadius > _placementArrow.MAX_VERTICAL_CONTENT_RADIUS ? _placementArrow.MAX_VERTICAL_CONTENT_RADIUS : tooltipBorderRadius
+  })), (0, _defineProperty2["default"])(_extends2, componentCls + "-content", {
+    position: 'relative'
+  }), _extends2)), generatorTooltipPresetColor(token)), {
+    // RTL
+    '&-rtl': {
+      direction: 'rtl'
+    }
+  })), // Arrow Style
+  (0, _placementArrow["default"])((0, _internal.mergeToken)(token, {
+    borderRadiusOuter: tooltipRadiusOuter
+  }), {
+    colorBg: 'var(--antd-arrow-background-color)',
+    showArrowCls: '',
+    contentRadius: tooltipBorderRadius,
+    limitVerticalRadius: true
+  }), // Pure Render
+  (0, _defineProperty2["default"])({}, componentCls + "-pure", {
+    position: 'relative',
+    maxWidth: 'none'
+  })];
+}; // ============================== Export ==============================
+
+
+var _default = function _default(prefixCls, injectStyle) {
+  var useOriginHook = (0, _internal.genComponentStyleHook)('Tooltip', function (token) {
+    // Popover use Tooltip as internal component. We do not need to handle this.
+    if (injectStyle === false) {
+      return [];
+    }
+
+    var borderRadius = token.borderRadius,
+        colorTextLightSolid = token.colorTextLightSolid,
+        colorBgDefault = token.colorBgDefault,
+        borderRadiusOuter = token.borderRadiusOuter;
+    var TooltipToken = (0, _internal.mergeToken)(token, {
+      // default variables
+      tooltipMaxWidth: 250,
+      tooltipColor: colorTextLightSolid,
+      tooltipBorderRadius: borderRadius,
+      tooltipBg: colorBgDefault,
+      tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter
+    });
+    return [genTooltipStyle(TooltipToken), (0, _motion.initZoomMotion)(token, 'zoom-big-fast')];
+  }, function (_ref3) {
+    var zIndexPopupBase = _ref3.zIndexPopupBase,
+        colorBgSpotlight = _ref3.colorBgSpotlight;
+    return {
+      zIndexPopup: zIndexPopupBase + 70,
+      colorBgDefault: colorBgSpotlight
+    };
+  });
+  return useOriginHook(prefixCls);
+};
+
+exports["default"] = _default;

package/lib/tooltip/util.d.ts

@@ -0,0 +1,6 @@
+import type * as React from 'react';
+export declare function parseColor(prefixCls: string, color?: string): {
+    className: string;
+    overlayStyle: React.CSSProperties;
+    arrowStyle: React.CSSProperties;
+};

package/lib/tooltip/util.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseColor = parseColor;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _colors = require("../_util/colors");
+/* eslint-disable import/prefer-default-export */
+
+
+var PresetColorRegex = new RegExp("^(" + _colors.PresetColorTypes.join('|') + ")(-inverse)?$");
+
+function parseColor(prefixCls, color) {
+  var className = (0, _classnames["default"])((0, _defineProperty2["default"])({}, prefixCls + "-" + color, color && PresetColorRegex.test(color)));
+  var overlayStyle = {};
+  var arrowStyle = {};
+
+  if (color && !PresetColorRegex.test(color)) {
+    overlayStyle.background = color; // @ts-ignore
+
+    arrowStyle['--antd-arrow-background-color'] = color;
+  }
+
+  return {
+    className: className,
+    overlayStyle: overlayStyle,
+    arrowStyle: arrowStyle
+  };
+}

package/lib/tour/PurePanel.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { TourStepProps } from './interface';
+export interface PurePanelProps extends TourStepProps {
+}
+declare const PurePanel: React.FC<PurePanelProps>;
+export default PurePanel;

package/lib/tour/PurePanel.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _configProvider = require("../config-provider");
+
+var _panelRender = _interopRequireDefault(require("./panelRender"));
+
+var _PurePanel = require("../popover/PurePanel");
+
+var _style = _interopRequireDefault(require("./style"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var PurePanel = function PurePanel(props) {
+  var customizePrefixCls = props.prefixCls,
+      _props$current = props.current,
+      current = _props$current === void 0 ? 0 : _props$current,
+      _props$total = props.total,
+      total = _props$total === void 0 ? 6 : _props$total,
+      className = props.className,
+      style = props.style,
+      type = props.type,
+      restProps = __rest(props, ["prefixCls", "current", "total", "className", "style", "type"]);
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('tour', customizePrefixCls);
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var node = (0, _panelRender["default"])((0, _extends2["default"])((0, _extends2["default"])({}, restProps), {
+    prefixCls: prefixCls,
+    total: total
+  }), current, type);
+  return wrapSSR( /*#__PURE__*/React.createElement(_PurePanel.RawPurePanel, {
+    prefixCls: prefixCls,
+    hashId: hashId,
+    className: (0, _classnames["default"])(className, prefixCls + "-pure", type && prefixCls + "-" + type),
+    style: style
+  }, node)); // return node as React.ReactElement;
+};
+
+var _default = PurePanel;
+exports["default"] = _default;

package/lib/tour/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TourProps } from './interface';
+import PurePanel from './PurePanel';
+declare const Tour: React.ForwardRefRenderFunction<HTMLDivElement, TourProps> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+};
+export default Tour;

package/lib/tour/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _tour = _interopRequireDefault(require("@rc-component/tour"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _panelRender = _interopRequireDefault(require("./panelRender"));
+
+var _configProvider = require("../config-provider");
+
+var _style = _interopRequireDefault(require("./style"));
+
+var _PurePanel = _interopRequireDefault(require("./PurePanel"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var Tour = function Tour(props) {
+  var customizePrefixCls = props.prefixCls,
+      steps = props.steps,
+      current = props.current,
+      type = props.type,
+      rootClassName = props.rootClassName,
+      restProps = __rest(props, ["prefixCls", "steps", "current", "type", "rootClassName"]);
+
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      direction = _useContext.direction;
+
+  var prefixCls = getPrefixCls('tour', customizePrefixCls);
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var customClassName = (0, _classnames["default"])((0, _defineProperty2["default"])({}, prefixCls + "-rtl", direction === 'rtl'), (0, _defineProperty2["default"])({}, prefixCls + "-primary", type === 'primary'), hashId, rootClassName);
+
+  var mergedRenderPanel = function mergedRenderPanel(stepProps, stepCurrent) {
+    return (0, _panelRender["default"])(stepProps, stepCurrent, type);
+  };
+
+  return wrapSSR( /*#__PURE__*/_react["default"].createElement(_tour["default"], (0, _extends2["default"])({}, restProps, {
+    rootClassName: customClassName,
+    prefixCls: prefixCls,
+    steps: steps,
+    current: current,
+    animated: true,
+    renderPanel: mergedRenderPanel
+  })));
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Tour.displayName = 'Tour';
+}
+
+Tour._InternalPanelDoNotUseOrYouWillBeFired = _PurePanel["default"];
+var _default = Tour;
+exports["default"] = _default;

package/lib/tour/interface.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { TourProps as RCTourProps, TourStepProps as RCTourStepProps } from '@rc-component/tour';
+export interface TourProps extends Omit<RCTourProps, 'renderPanel'> {
+    steps?: TourStepProps[];
+    className?: string;
+    prefixCls?: string;
+    current?: number;
+    stepRender?: (current: number, total: number) => ReactNode;
+    type?: 'default' | 'primary';
+}
+export interface TourStepProps extends RCTourStepProps {
+    cover?: ReactNode;
+    nextButtonProps?: {
+        children?: ReactNode;
+        onClick?: () => void;
+    };
+    prevButtonProps?: {
+        children?: ReactNode;
+        onClick?: () => void;
+    };
+    stepRender?: (current: number, total: number) => ReactNode;
+    type?: 'default' | 'primary';
+}
+export interface TourLocale {
+    Next: string;
+    Previous: string;
+    Finish: string;
+}

package/lib/tour/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/tour/panelRender.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+import type { TourStepProps } from './interface';
+declare const panelRender: (props: TourStepProps, current: number, type: TourStepProps['type']) => ReactNode;
+export default panelRender;