@dpocean/chatui 1.0.0

package/lib/components/ScrollView/Item.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Item = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+var observerOptions = {
+  threshold: [0, 0.1]
+};
+var Item = exports.Item = function Item(props) {
+  var item = props.item,
+    effect = props.effect,
+    children = props.children,
+    onIntersect = props.onIntersect;
+  var itemRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!onIntersect) return undefined;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+        entry = _ref2[0];
+      if (entry.intersectionRatio > 0) {
+        // 根据回调返回值判断是否继续监听
+        if (!onIntersect(item, entry)) {
+          observer.unobserve(entry.target);
+        }
+      }
+    }, observerOptions);
+    if (itemRef.current) {
+      observer.observe(itemRef.current);
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [item, onIntersect]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('ScrollView-item', {
+      'slide-in-right-item': effect === 'slide',
+      'A-fadeIn': effect === 'fade'
+    }),
+    ref: itemRef
+  }, children);
+};

package/lib/components/ScrollView/ScrollView.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ScrollViewItemProps } from './Item';
+export type ScrollViewProps<T> = Pick<ScrollViewItemProps, 'effect' | 'onIntersect'> & {
+    data: Array<T>;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    className?: string;
+    fullWidth?: boolean;
+    scrollX?: boolean;
+    itemKey?: string | ((item: T, index: number) => string);
+    onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    children?: React.ReactNode;
+};
+export interface ScrollViewHandle {
+    scrollTo: (coord: {
+        x?: number;
+        y?: number;
+    }) => void;
+}
+export declare const ScrollView: React.ForwardRefExoticComponent<Pick<ScrollViewItemProps, "effect" | "onIntersect"> & {
+    data: any[];
+    renderItem: (item: any, index: number) => React.ReactNode;
+    className?: string;
+    fullWidth?: boolean;
+    scrollX?: boolean;
+    itemKey?: string | ((item: any, index: number) => string) | undefined;
+    onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    children?: React.ReactNode;
+} & React.RefAttributes<ScrollViewHandle>>;

package/lib/components/ScrollView/ScrollView.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Item = require("./Item");
+var _IconButton = require("../IconButton");
+var _canUse = _interopRequireDefault(require("../../utils/canUse"));
+var _excluded = ["className", "fullWidth", "scrollX", "effect", "data", "itemKey", "renderItem", "onIntersect", "onScroll", "children"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+var hasControls = !(0, _canUse.default)('touch');
+var ScrollView = exports.ScrollView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    fullWidth = props.fullWidth,
+    _props$scrollX = props.scrollX,
+    scrollX = _props$scrollX === void 0 ? true : _props$scrollX,
+    _props$effect = props.effect,
+    effect = _props$effect === void 0 ? 'slide' : _props$effect,
+    data = props.data,
+    itemKey = props.itemKey,
+    renderItem = props.renderItem,
+    onIntersect = props.onIntersect,
+    onScroll = props.onScroll,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var scrollerRef = (0, _react.useRef)(null);
+  function handlePrev() {
+    var el = scrollerRef.current;
+    el.scrollLeft -= el.offsetWidth;
+  }
+  function handleNext() {
+    var el = scrollerRef.current;
+    el.scrollLeft += el.offsetWidth;
+  }
+  var getItemKey = (0, _react.useCallback)(function (item, index) {
+    var key;
+    if (itemKey) {
+      key = typeof itemKey === 'function' ? itemKey(item, index) : item[itemKey];
+    }
+    return key || index;
+  }, [itemKey]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      scrollTo: function scrollTo(_ref) {
+        var x = _ref.x,
+          y = _ref.y;
+        if (x != null) {
+          scrollerRef.current.scrollLeft = x;
+        }
+        if (y != null) {
+          scrollerRef.current.scrollTop = y;
+        }
+      }
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('ScrollView', {
+      'ScrollView--fullWidth': fullWidth,
+      'ScrollView--x': scrollX,
+      'ScrollView--hasControls': hasControls
+    }, className),
+    ref: ref
+  }, other), hasControls && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: "ScrollView-control",
+    icon: "chevron-left",
+    "aria-label": "Previous",
+    onClick: handlePrev
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ScrollView-scroller",
+    ref: scrollerRef,
+    onScroll: onScroll
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ScrollView-inner"
+  }, data.map(function (item, i) {
+    return /*#__PURE__*/_react.default.createElement(_Item.Item, {
+      item: item,
+      effect: item.effect || effect,
+      onIntersect: onIntersect,
+      key: getItemKey(item, i)
+    }, renderItem(item, i));
+  }), children ? /*#__PURE__*/_react.default.createElement(_Item.Item, {
+    item: {},
+    effect: effect,
+    onIntersect: onIntersect
+  }, children) : null)), hasControls && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: "ScrollView-control",
+    icon: "chevron-right",
+    "aria-label": "Next",
+    onClick: handleNext
+  }));
+});

package/lib/components/ScrollView/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollView } from './ScrollView';
+export type { ScrollViewProps } from './ScrollView';

package/lib/components/ScrollView/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ScrollView", {
+  enumerable: true,
+  get: function get() {
+    return _ScrollView.ScrollView;
+  }
+});
+var _ScrollView = require("./ScrollView");

package/lib/components/Search/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputProps } from '../Input';
+export interface SearchProps extends Omit<InputProps, 'value'> {
+    className?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    showSearch?: boolean;
+    onSearch?: (query: string, event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onChange?: (value: string) => void;
+    onClear?: () => void;
+}
+export declare const Search: ({ className, onSearch, onChange, onClear, value, disabled, clearable, showSearch, ...other }: SearchProps) => React.JSX.Element;

package/lib/components/Search/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Search = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icon = require("../Icon");
+var _IconButton = require("../IconButton");
+var _Button = require("../Button");
+var _Input = require("../Input");
+var _ConfigProvider = require("../ConfigProvider");
+var _excluded = ["className", "onSearch", "onChange", "onClear", "value", "disabled", "clearable", "showSearch"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+var Search = exports.Search = function Search(_ref) {
+  var className = _ref.className,
+    onSearch = _ref.onSearch,
+    onChange = _ref.onChange,
+    onClear = _ref.onClear,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
+    other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(value || ''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var _useLocale = (0, _ConfigProvider.useLocale)('Search'),
+    trans = _useLocale.trans;
+  var handleChange = function handleChange(val) {
+    setQuery(val);
+    if (onChange) {
+      onChange(val);
+    }
+  };
+  var handleClear = function handleClear() {
+    setQuery('');
+    if (onClear) {
+      onClear();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === 13) {
+      if (onSearch) {
+        onSearch(query, e);
+      }
+      e.preventDefault();
+    }
+  };
+  var handleSearchClick = function handleSearchClick(e) {
+    if (onSearch) {
+      onSearch(query, e);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Search', className),
+    "data-disabled": disabled
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "Search-icon",
+    type: "search"
+  }), /*#__PURE__*/_react.default.createElement(_Input.Input, (0, _extends2.default)({
+    className: "Search-input",
+    type: "search",
+    value: query,
+    disabled: disabled,
+    enterKeyHint: "search",
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
+  }, other)), clearable && query && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: "Search-clear",
+    icon: "x-circle-fill",
+    onClick: handleClear
+  }), showSearch && /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    className: "Search-btn",
+    color: "primary",
+    onClick: handleSearchClick
+  }, trans('search')));
+};

package/lib/components/Select/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputVariant } from '../Input';
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    placeholder?: string;
+    variant?: InputVariant;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/lib/components/Select/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _excluded = ["className", "placeholder", "variant", "children"];
+var Select = exports.Select = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    placeholder = _ref.placeholder,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("select", (0, _extends2.default)({
+    className: (0, _clsx.default)('Input Select', "Input--".concat(variant), className)
+  }, rest, {
+    ref: ref
+  }), placeholder && /*#__PURE__*/_react.default.createElement("option", {
+    value: ""
+  }, placeholder), children);
+});

package/lib/components/SendConfirm/SendConfirm.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type SendConfirmProps = {
+    file: Blob;
+    onCancel: () => void;
+    onSend: () => void;
+};
+export declare const SendConfirm: (props: SendConfirmProps) => React.JSX.Element;

package/lib/components/SendConfirm/SendConfirm.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SendConfirm = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Modal = require("../Modal");
+var _Flex = require("../Flex");
+var _ConfigProvider = require("../ConfigProvider");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+var SendConfirm = exports.SendConfirm = function SendConfirm(props) {
+  var file = props.file,
+    onCancel = props.onCancel,
+    onSend = props.onSend;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    img = _useState2[0],
+    setImg = _useState2[1];
+  var _useLocale = (0, _ConfigProvider.useLocale)('SendConfirm'),
+    trans = _useLocale.trans;
+  (0, _react.useEffect)(function () {
+    var reader = new FileReader();
+    reader.onload = function (e) {
+      if (e.target) {
+        setImg(e.target.result);
+      }
+    };
+    reader.readAsDataURL(file);
+  }, [file]);
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    className: "SendConfirm",
+    title: trans('title'),
+    active: !!img,
+    vertical: false,
+    actions: [{
+      label: trans('cancel'),
+      onClick: onCancel
+    }, {
+      label: trans('send'),
+      color: 'primary',
+      onClick: onSend
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "SendConfirm-inner",
+    center: true
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: img,
+    alt: ""
+  })));
+};

package/lib/components/SendConfirm/index.d.ts

@@ -0,0 +1 @@
+export { SendConfirm } from './SendConfirm';

package/lib/components/SendConfirm/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SendConfirm", {
+  enumerable: true,
+  get: function get() {
+    return _SendConfirm.SendConfirm;
+  }
+});
+var _SendConfirm = require("./SendConfirm");

package/lib/components/Skeleton/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface SkeletonProps {
+    className?: string;
+    w?: React.CSSProperties['width'];
+    h?: React.CSSProperties['height'];
+    mb?: React.CSSProperties['marginBottom'];
+    style?: React.CSSProperties;
+    r?: 'sm' | 'md' | 'xl' | 'none';
+}
+export declare const Skeleton: ({ className, w, h, mb, r, style }: SkeletonProps) => React.JSX.Element;

package/lib/components/Skeleton/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Skeleton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+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) { (0, _defineProperty2.default)(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; }
+var Skeleton = exports.Skeleton = function Skeleton(_ref) {
+  var className = _ref.className,
+    w = _ref.w,
+    h = _ref.h,
+    mb = _ref.mb,
+    r = _ref.r,
+    style = _ref.style;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Skeleton', r && "Skeleton--r-".concat(r), className),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      width: w,
+      height: h,
+      marginBottom: mb
+    })
+  });
+};

package/lib/components/StatusBadge/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface StatusBadgeProps {
+    className?: string;
+    text: string;
+}
+export declare const StatusBadge: (props: StatusBadgeProps) => React.JSX.Element;

package/lib/components/StatusBadge/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusBadge = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Text = require("../Text");
+var StatusBadge = exports.StatusBadge = function StatusBadge(props) {
+  var className = props.className,
+    text = props.text;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('StatusBadge', className)
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    className: "StatusBadge-bg",
+    width: "48",
+    height: "20",
+    fill: "none",
+    viewBox: "0 0 96 40"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "var(--status-badge-bg)",
+    d: "M0 0c6.627 0 12 5.373 12 12V0zm84 28c6.627 0 12 5.373 12 12V28zM12 0h72c6.627 0 12 5.373 12 12v16H24c-6.627 0-12-5.373-12-12Z"
+  })), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "StatusBadge-text",
+    truncate: true
+  }, text));
+};

package/lib/components/Stepper/Step.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type StepStatus = 'success' | 'fail' | 'abort';
+export type StepProps = {
+    className?: string;
+    active?: boolean;
+    completed?: boolean;
+    disabled?: boolean;
+    status?: StepStatus;
+    index?: number;
+    title?: string;
+    subTitle?: string;
+    desc?: React.ReactNode;
+    children?: React.ReactNode;
+};
+export declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLLIElement>>;

package/lib/components/Stepper/Step.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Step = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icon = require("../Icon");
+var _excluded = ["className", "active", "completed", "disabled", "status", "index", "title", "subTitle", "desc", "children"];
+function renderDot(status) {
+  if (status) {
+    var iconMap = {
+      success: 'check-circle-fill',
+      fail: 'warning-circle-fill',
+      abort: 'dash-circle-fill'
+    };
+    return /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      type: iconMap[status]
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "Step-dot"
+  });
+}
+var Step = exports.Step = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$active = props.active,
+    active = _props$active === void 0 ? false : _props$active,
+    _props$completed = props.completed,
+    completed = _props$completed === void 0 ? false : _props$completed,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    status = props.status,
+    index = props.index,
+    title = props.title,
+    subTitle = props.subTitle,
+    desc = props.desc,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
+    className: (0, _clsx.default)('Step', {
+      'Step--active': active,
+      'Step--completed': completed,
+      'Step--disabled': disabled
+    }, className),
+    ref: ref,
+    "data-status": status
+  }, other), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Step-icon"
+  }, renderDot(status)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Step-line"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Step-content"
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Step-title"
+  }, title && /*#__PURE__*/_react.default.createElement("span", null, title), subTitle && /*#__PURE__*/_react.default.createElement("small", null, subTitle)), desc && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Step-desc"
+  }, desc), children));
+});

package/lib/components/Stepper/Stepper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { StepStatus } from './Step';
+export type StepperProps = {
+    className?: string;
+    current?: number;
+    status?: StepStatus;
+    inverted?: boolean;
+    children?: React.ReactNode;
+};
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLUListElement>>;

package/lib/components/Stepper/Stepper.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Stepper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _excluded = ["className", "current", "status", "inverted", "children"];
+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) { (0, _defineProperty2.default)(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; }
+var Stepper = exports.Stepper = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$current = props.current,
+    current = _props$current === void 0 ? 0 : _props$current,
+    status = props.status,
+    inverted = props.inverted,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var childrenArray = _react.default.Children.toArray(children);
+  var steps = childrenArray.map(function (child, index) {
+    var state = {
+      index: index,
+      active: false,
+      completed: false,
+      disabled: false
+    };
+    if (current === index) {
+      state.active = true;
+      state.status = status;
+    } else if (current > index) {
+      state.completed = true;
+    } else {
+      state.disabled = !inverted;
+      state.completed = inverted;
+    }
+    return /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, state), child.props)) : null;
+  });
+  return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
+    className: (0, _clsx.default)('Stepper', className),
+    ref: ref
+  }, other), steps);
+});

package/lib/components/Stepper/index.d.ts

@@ -0,0 +1,4 @@
+export { Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+export { Step } from './Step';
+export type { StepProps } from './Step';