@trionesdev/antd-mobile-base-react 0.0.2-beta.0

package/dist/InputNumber/style.scss

@@ -0,0 +1,43 @@
+@import "../style/variable";
+$trionesInputNumberCls: 'triones-antm-input-number';
+
+.#{$trionesInputNumberCls} {
+  display: inline-flex;
+  align-items: center;
+  gap: 4Px;
+  border-radius: $trionesBorderRadius;
+  background-color: $trionesColorTextQuaternary;
+
+  input {
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    border: 0;
+    text-align: center;
+    width: 30Px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &-button {
+    cursor: pointer;
+    display: flex;
+    font-size: 10Px;
+    height: 20Px;
+    width: 20Px;
+    justify-content: center;
+    align-items: center;
+    &-disabled{
+      cursor: not-allowed;
+      color: $trionesColorTextDisabled;
+    }
+    .triones-antm-icon{
+      font-size: 10Px!important;
+    }
+  }
+}

package/dist/Mask/index.d.ts

@@ -0,0 +1,3 @@
+import { Mask, MaskProps } from "./mask";
+export type { MaskProps };
+export default Mask;

package/dist/Mask/index.js

@@ -0,0 +1,2 @@
+import { Mask } from "./mask";
+export default Mask;

package/dist/Mask/mask-modal.d.ts

@@ -0,0 +1,45 @@
+import React, { CSSProperties, FC, PropsWithChildren } from "react";
+export type MaskModalProps = {
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * @description 样式
+     * @default horizontal
+     */
+    styles?: {
+        body?: CSSProperties;
+    };
+    /**
+     * @description Modal 完全关闭后的回调
+     * @default
+     */
+    afterClose?: () => void;
+    /**
+     * @description 是否打开
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * @description 是否蒙层关闭
+     * @default true
+     */
+    maskClosable?: boolean;
+    /**
+     * @description 关闭时销毁 Modal 里的子元素
+     * @default false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * @description 设置 Modal 的 z-index
+     * @default 1000
+     */
+    zIndex?: number;
+    /**
+     * @description 打开和关闭 Modal 时动画结束后的回调
+     * @default
+     */
+    afterOpenChange?: (open: boolean) => void;
+    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onDestroy?: () => void;
+};
+export declare const MaskModal: FC<PropsWithChildren<MaskModalProps>>;

package/dist/Mask/mask-modal.js

@@ -0,0 +1,32 @@
+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); }
+import React from "react";
+import classNames from "classnames";
+var maskCls = "triones-antm-mask2";
+export var MaskModal = function MaskModal(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    zIndex = _ref.zIndex,
+    open = _ref.open,
+    _ref$maskClosable = _ref.maskClosable,
+    maskClosable = _ref$maskClosable === void 0 ? true : _ref$maskClosable,
+    onMaskClick = _ref.onMaskClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(maskCls, _defineProperty({}, "".concat(maskCls, "-open"), open)),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      zIndex: zIndex
+    }),
+    onClick: function onClick(e) {
+      if (maskClosable) {
+        onMaskClick === null || onMaskClick === void 0 || onMaskClick(e);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(maskCls, "-inner"), className)
+  }, children));
+};

package/dist/Mask/mask.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+import "./style.scss";
+import { MaskModalProps } from "./mask-modal";
+export type MaskProps = Omit<MaskModalProps, 'onDestroy'>;
+export declare const Mask: FC<PropsWithChildren<MaskProps>>;

package/dist/Mask/mask.js

@@ -0,0 +1,19 @@
+var _excluded = ["children", "open"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+import React from "react";
+import "./style.scss";
+import { MaskModal } from "./mask-modal";
+export var Mask = function Mask(_ref) {
+  var children = _ref.children,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MaskModal, _extends({}, rest, {
+    open: open
+  }), children);
+};

package/dist/Mask/style.scss

@@ -0,0 +1,20 @@
+$maskCls:'triones-antm-mask2';
+
+.#{$maskCls}{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: none;
+  background-color: rgba(0, 0, 0, .15);
+  z-index: 1000;
+  &-open{
+    display: block;
+  }
+  &-inner{
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+}

package/dist/NavBar/index.d.ts

@@ -0,0 +1,3 @@
+import { NavBar } from './nav-bar';
+export type { NavBarProps } from './nav-bar';
+export default NavBar;

package/dist/NavBar/index.js

@@ -0,0 +1,2 @@
+import { NavBar } from "./nav-bar";
+export default NavBar;

package/dist/NavBar/nav-bar.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties, FC, ReactNode } from 'react';
+import './style.scss';
+export type NavBarProps = {
+    /**
+     * @description 返回区域的文字，如果为 `null` 的话，`backIcon` 也不会渲染
+     */
+    back?: ReactNode;
+    /**
+     * @description 是否显示返回区域的箭头，也可以传入 `ReactNode` 进行自定义
+     * @default true
+     */
+    backIcon?: boolean | ReactNode;
+    /**
+     * @description 左侧内容，渲染在返回区域的右侧
+     */
+    left?: ReactNode;
+    /**
+     * @description 右侧内容
+     */
+    right?: ReactNode;
+    /**
+     * @description 点击返回区域后的回调
+     */
+    onBack?: () => void;
+    /**
+     * @description 标题
+     */
+    children?: ReactNode;
+    style?: CSSProperties;
+};
+export declare const NavBar: FC<NavBarProps>;

package/dist/NavBar/nav-bar.js

@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import React from 'react';
+import { withNativeProps } from "../utils/native-props";
+import ConfigProvider from "../ConfigProvider";
+import { mergeProp, mergeProps } from "../utils/with-default-props";
+import { LeftOutline } from "../../../antd-mobile-icons-react";
+import "./style.scss";
+var classPrefix = "triones-antm-nav-bar";
+var defaultBackIcon = /*#__PURE__*/React.createElement(LeftOutline, null);
+export var NavBar = function NavBar(props) {
+  var _ConfigProvider$useCo = ConfigProvider.useConfig(),
+    _ConfigProvider$useCo2 = _ConfigProvider$useCo.navBar,
+    componentConfig = _ConfigProvider$useCo2 === void 0 ? {} : _ConfigProvider$useCo2;
+  var mergedProps = mergeProps(componentConfig, props);
+  var back = mergedProps.back,
+    backIcon = mergedProps.backIcon;
+  var mergedDefaultBackIcon = componentConfig.backIcon || defaultBackIcon;
+  var mergedBackIcon = mergeProp(defaultBackIcon, componentConfig.backIcon, backIcon === true ? mergedDefaultBackIcon : backIcon);
+  return withNativeProps(mergedProps, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-left"),
+    role: "button"
+  }, back !== null && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-back"),
+    onClick: mergedProps.onBack
+  }, mergedBackIcon && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classPrefix, "-back-arrow")
+  }, mergedBackIcon), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, back)), mergedProps.left), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-title")
+  }, mergedProps.children), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-right")
+  }, mergedProps.right)));
+};

package/dist/NavBar/style.scss

@@ -0,0 +1,61 @@
+@import "../style/variable";
+$trionesNavBarColorBg:$trionesColorBorderBg !default;
+$trionesNavBarColorText:$trionesColorTextBase !default;
+
+$class-prefix-nav-bar: 'triones-antm-nav-bar';
+/* prettier-ignore */
+.#{$class-prefix-nav-bar} {
+  --height: 45PX;
+  --border-bottom: none;
+  display: flex;
+  align-items: center;
+  height: var(--height);
+  border-bottom: var(--border-bottom);
+  padding: 0 12PX;
+  white-space: nowrap;
+  color: $trionesNavBarColorText;
+  background-color: $trionesNavBarColorBg;
+
+  &-left,
+  &-right {
+    flex: 1;
+  }
+  &-title {
+    flex: auto;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-back {
+    display: flex;
+    align-items: center;
+    margin-right: 16PX;
+    padding: 6PX 0;
+    cursor: pointer;
+    &-arrow {
+      font-size: 20PX;
+      margin-right: 5PX;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-left {
+    font-size: var(--triones-antm-font-size-7);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  &-title {
+    justify-content: center;
+    white-space: nowrap;
+    font-size: var(--triones-antm-font-size-10);
+    padding: 0 12PX;
+  }
+
+  &-right {
+    text-align: right;
+  }
+}

package/dist/NoticeBar/index.d.ts

@@ -0,0 +1,3 @@
+import { NoticeBar } from './notice-bar';
+export type { NoticeBarProps } from './notice-bar';
+export default NoticeBar;

package/dist/NoticeBar/index.js

@@ -0,0 +1,2 @@
+import { NoticeBar } from "./notice-bar";
+export default NoticeBar;

package/dist/NoticeBar/notice-bar.d.ts

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../utils/native-props';
+import './style.scss';
+export type NoticeBarProps = {
+    /**
+     * @description 通告栏的类型
+     */
+    color?: 'default' | 'alert' | 'error' | 'success' | 'info';
+    /**
+     * @description 延时展示，单位 ms
+     * @default 2000
+     */
+    delay?: number;
+    /**
+     * @description 滚动速度，单位 px/s
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * @description 公告内容
+     */
+    content: ReactNode;
+    /**
+     * @description 是否可关闭
+     */
+    closeable?: boolean;
+    /**
+     * @description 自定义关闭按钮图标
+     */
+    closeIcon?: ReactNode;
+    /**
+     * @description 关闭时的回调
+     */
+    onClose?: () => void;
+    /**
+     * @description 点击事件
+     */
+    onClick?: () => void;
+    /**
+     * @description 额外操作区域，显示在关闭按钮左侧
+     */
+    extra?: ReactNode;
+    /**
+     * @description 左侧广播图标
+     */
+    icon?: ReactNode;
+    /**
+     * @description 是否多行展示
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * @description 形状 (rectangular: 直角; neutral: 圆角; rounded: 圆形)
+     * @default rectangular
+     */
+    shape?: 'rectangular' | 'neutral' | 'rounded';
+    /**
+     * @description 边框可见性 (`block`: 上下边框; `true`: 全边框; `false`: 无边框)
+     * @default block
+     */
+    bordered?: 'block' | boolean;
+} & NativeProps;
+export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;

package/dist/NoticeBar/notice-bar.js

@@ -0,0 +1,119 @@
+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 _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 { CloseCircleOutline, SetOutline } from '@trionesdev/antd-mobile-icons-react';
+import classNames from 'classnames';
+import React, { memo, useRef, useState } from 'react';
+import ConfigProvider from "../ConfigProvider";
+import { withNativeProps } from "../utils/native-props";
+// import { useMutationEffect } from '../utils/use-mutation-effect';
+// import { useResizeEffect } from '../utils/use-resize-effect';
+import { mergeProp, mergeProps } from "../utils/with-default-props";
+import "./style.scss";
+var classPrefix = "triones-antm-notice-bar";
+var defaultProps = {
+  color: 'default',
+  delay: 2000,
+  speed: 50,
+  icon: /*#__PURE__*/React.createElement(SetOutline, null),
+  wrap: false,
+  shape: 'rectangular',
+  bordered: 'block'
+};
+export var NoticeBar = /*#__PURE__*/memo(function (props) {
+  var _ConfigProvider$useCo = ConfigProvider.useConfig(),
+    _ConfigProvider$useCo2 = _ConfigProvider$useCo.noticeBar,
+    componentConfig = _ConfigProvider$useCo2 === void 0 ? {} : _ConfigProvider$useCo2;
+  var mergedProps = mergeProps(defaultProps, componentConfig, props);
+  var closeIcon = mergeProp( /*#__PURE__*/React.createElement(CloseCircleOutline, {
+    className: "".concat(classPrefix, "-close-icon")
+  }), componentConfig.closeIcon, props.closeIcon);
+  var containerRef = useRef(null);
+  var textRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var speed = mergedProps.speed;
+  var delayLockRef = useRef(true);
+  var animatingRef = useRef(false);
+  function start() {
+    if (delayLockRef.current || mergedProps.wrap) return;
+    var container = containerRef.current;
+    var text = textRef.current;
+    if (!container || !text) return;
+    if (container.offsetWidth >= text.offsetWidth) {
+      animatingRef.current = false;
+      text.style.removeProperty('transition-duration');
+      text.style.removeProperty('transform');
+      return;
+    }
+    if (animatingRef.current) return;
+    var initial = !text.style.transform;
+    text.style.transitionDuration = '0s';
+    if (initial) {
+      text.style.transform = 'translateX(0)';
+    } else {
+      text.style.transform = "translateX(".concat(container.offsetWidth, "px)");
+    }
+    var distance = initial ? text.offsetWidth : container.offsetWidth + text.offsetWidth;
+    animatingRef.current = true;
+    text.style.transitionDuration = "".concat(Math.round(distance / speed), "s");
+    text.style.transform = "translateX(-".concat(text.offsetWidth, "px)");
+  }
+
+  // useTimeout(() => {
+  //   delayLockRef.current = false;
+  //   start();
+  // }, mergedProps.delay);
+
+  // useResizeEffect(() => {
+  //   start();
+  // }, containerRef);
+  //
+  // useMutationEffect(
+  //   () => {
+  //     start();
+  //   },
+  //   textRef,
+  //   {
+  //     subtree: true,
+  //     childList: true,
+  //     characterData: true,
+  //   },
+  // );
+
+  if (!visible) return null;
+  return withNativeProps(mergedProps, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-").concat(mergedProps.color), "".concat(classPrefix, "-").concat(mergedProps.shape), _defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-wrap"), mergedProps.wrap), "".concat(classPrefix, "-bordered"), mergedProps.bordered === true), "".concat(classPrefix, "-without-border"), mergedProps.bordered === false)),
+    onClick: mergedProps.onClick
+  }, mergedProps.icon && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-left")
+  }, mergedProps.icon), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "".concat(classPrefix, "-content")
+  }, /*#__PURE__*/React.createElement("div", {
+    onTransitionEnd: function onTransitionEnd() {
+      animatingRef.current = false;
+      start();
+    },
+    ref: textRef,
+    className: "".concat(classPrefix, "-content-inner")
+  }, mergedProps.content)), (mergedProps.closeable || mergedProps.extra) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-right")
+  }, mergedProps.extra, mergedProps.closeable && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-close"),
+    onClick: function onClick() {
+      var _mergedProps$onClose;
+      setVisible(false);
+      (_mergedProps$onClose = mergedProps.onClose) === null || _mergedProps$onClose === void 0 || _mergedProps$onClose.call(mergedProps);
+    }
+  }, closeIcon))));
+});

package/dist/NoticeBar/style.scss

@@ -0,0 +1,130 @@
+$class-prefix-notice-bar: 'triones-antm-notice-bar';
+/* prettier-ignore */
+.#{$class-prefix-notice-bar} {
+  --background-color: var(--triones-antm-color-weak);
+  --border-color: var(--triones-antm-color-weak);
+  --text-color: var(--triones-antm-color-text-light-solid);
+  --font-size: var(--triones-antm-font-size-7);
+  --icon-font-size: var(--triones-antm-font-size-10);
+  --height: 40PX;
+  --triones-antm-notice-bar-border-radius: 4PX;
+  --triones-antm-notice-bar-border-width: 1PX;
+
+  flex: 1 auto;
+  height: var(--height);
+  box-sizing: border-box;
+  font-size: var(--font-size);
+  padding: 0 12PX;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  border: solid var(--triones-antm-notice-bar-border-width) var(--border-color);
+  border-left-width: 0;
+  border-right-width: 0;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  & > span[role='img'] {
+    color: var(--text-color);
+  }
+
+  &.#{$class-prefix-notice-bar}-alert {
+    --background-color: #fff9ed;
+    --border-color: #fff3e9;
+    --text-color: var(--triones-antm-color-orange);
+  }
+  &.#{$class-prefix-notice-bar}-error {
+    --background-color: #d9281e;
+    --border-color: #d9281e;
+    --text-color: #fff;
+  }
+  &.#{$class-prefix-notice-bar}-info {
+    --background-color: #d0e4ff;
+    --border-color: #bcd8ff;
+    --text-color: var(--triones-antm-color-primary);
+  }
+  &.#{$class-prefix-notice-bar}-success {
+    --background-color: #d1fff0;
+    --border-color: #a8f0d8;
+    --text-color: var(--triones-antm-color-success);
+  }
+
+  & .#{$class-prefix-notice-bar}-left {
+    flex-shrink: 0;
+    margin-right: 8PX;
+    font-size: var(--icon-font-size);
+  }
+  & .#{$class-prefix-notice-bar}-content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    & .#{$class-prefix-notice-bar}-content-inner {
+      width: auto;
+      transition-timing-function: linear;
+      white-space: nowrap;
+    }
+  }
+
+  & .#{$class-prefix-notice-bar}-right {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: 12PX;
+  }
+
+  &-close {
+    width: 24PX;
+    height: 24PX;
+    margin-right: -3PX;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--triones-antm-font-size-10);
+  }
+
+  &-wrap {
+    height: auto;
+    align-items: flex-start;
+    padding-top: 8PX;
+    padding-bottom: 8PX;
+    line-height: 22PX;
+  }
+
+  &-neutral {
+    border-radius: var(--triones-antm-notice-bar-border-radius);
+    -webkit-border-radius: var(--triones-antm-notice-bar-border-radius);
+    -moz-border-radius: var(--triones-antm-notice-bar-border-radius);
+    -ms-border-radius: var(--triones-antm-notice-bar-border-radius);
+    -o-border-radius: var(--triones-antm-notice-bar-border-radius);
+  }
+
+  &-rounded {
+    border-radius: 1000PX;
+    -webkit-border-radius: 1000PX;
+    -moz-border-radius: 1000PX;
+    -ms-border-radius: 1000PX;
+    -o-border-radius: 1000PX;
+}
+
+  &-bordered {
+    border-left-width: var(--triones-antm-notice-bar-border-width);
+    border-right-width: var(--triones-antm-notice-bar-border-width);
+  }
+
+  &-without-border {
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+}
+
+.#{$class-prefix-notice-bar}.#{$class-prefix-notice-bar}-wrap {
+  .#{$class-prefix-notice-bar}-content {
+    .#{$class-prefix-notice-bar}-content-inner {
+      white-space: normal;
+    }
+  }
+}

package/dist/PageIndicator/index.d.ts

@@ -0,0 +1,3 @@
+import { PageIndicator } from './page-indicator';
+export type { PageIndicatorProps } from './page-indicator';
+export default PageIndicator;

package/dist/PageIndicator/index.js

@@ -0,0 +1,2 @@
+import { PageIndicator } from "./page-indicator";
+export default PageIndicator;

package/dist/PageIndicator/page-indicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { NativeProps } from '../utils/native-props';
+import './style.scss';
+export type PageIndicatorProps = {
+    total: number;
+    current: number;
+    direction?: 'horizontal' | 'vertical';
+    color?: 'primary' | 'white';
+} & NativeProps<'--dot-color' | '--active-dot-color' | '--dot-size' | '--active-dot-size' | '--dot-border-radius' | '--active-dot-border-radius' | '--dot-spacing'>;
+export declare const PageIndicator: React.NamedExoticComponent<PageIndicatorProps>;