@para-ui/core 3.0.55 → 3.0.56

package/TimePicker/index.js

@@ -0,0 +1,80 @@
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import DatePicker from '../DatePicker/index.js';
+import 'rc-picker/es/generate/dayjs';
+import '../Button/index.js';
+import '../_verture/typeof-498dd2b1.js';
+import '../_verture/slicedToArray-76060636.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import 'clsx';
+import '@para-ui/icons/LoadingF';
+import '@para-ui/icons/Forbid';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '../_verture/constant-66aa48a1.js';
+import '../_verture/style-inject.es-300983ab.js';
+import '@para-ui/icons/Down';
+import '../_verture/index-77f9e0fb.js';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-87febeb9.js';
+import 'dayjs';
+import '@paraview/lib';
+import '../_verture/useFormatMessage-703f8b20.js';
+import '@para-ui/core/GlobalContext';
+import '../Tag/index.js';
+import '../_verture/defineProperty-62acccfc.js';
+import '@para-ui/icons/Close';
+import '../_verture/toConsumableArray-81040c9e.js';
+import '../AutoTips/index.js';
+import '@para-ui/icons/Plus';
+import 'rc-picker';
+import '@para-ui/icons/CloseCircle';
+import '@para-ui/icons/Calendar';
+import '@para-ui/icons/Time';
+import 'rc-picker/lib/locale/en_US';
+import 'rc-picker/lib/locale/zh_CN';
+import '../Label/index.js';
+import '../Help/index.js';
+import '@para-ui/icons/Help';
+import '../HelperText/index.js';
+import '@para-ui/icons/SortRight';
+
+var InternalTimePicker = DatePicker.TimePicker,
+  InternalRangePicker = DatePicker.RangePicker;
+//time range
+var RangePicker = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return jsx(InternalRangePicker, Object.assign({}, props, {
+    dropdownClassName: props.popupClassName,
+    picker: "time",
+    mode: undefined,
+    ref: ref
+  }));
+});
+var TimePicker = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var addon = _a.addon,
+    renderExtraFooter = _a.renderExtraFooter,
+    popupClassName = _a.popupClassName,
+    restProps = __rest(_a, ["addon", "renderExtraFooter", "popupClassName"]);
+  var internalRenderExtraFooter = React__default.useMemo(function () {
+    if (renderExtraFooter) {
+      return renderExtraFooter;
+    }
+    if (addon) {
+      return addon;
+    }
+    return undefined;
+  }, [addon, renderExtraFooter]);
+  return jsx(InternalTimePicker, Object.assign({}, restProps, {
+    dropdownClassName: popupClassName,
+    mode: undefined,
+    ref: ref,
+    renderExtraFooter: internalRenderExtraFooter
+  }));
+});
+TimePicker.displayName = 'TimePicker';
+TimePicker.TimeRangePicker = RangePicker;
+TimePicker.RangePicker = RangePicker;
+
+export { TimePicker as default };

package/TimePicker/locale/en_US.d.ts

@@ -0,0 +1,3 @@
+import { TimePickerLocale } from '../index';
+declare const locale: TimePickerLocale;
+export default locale;

package/TimePicker/locale/zh_CN.d.ts

@@ -0,0 +1,3 @@
+import { TimePickerLocale } from '../index';
+declare const locale: TimePickerLocale;
+export default locale;

package/TimePicker/style/index.d.ts

@@ -0,0 +1 @@
+import '../../DatePicker/style';

package/Timeline/TimelineItem.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @author Hanz
+ * @date 2022/6/9 下午7:27
+ * @description
+ */
+import React, { ReactNode } from 'react';
+export interface TimelineItemProps {
+    /** item cls */
+    className?: string;
+    /** 自定义色值 */
+    color?: string;
+    /** 自定义时间轴点 */
+    dot?: React.ReactNode;
+    /** 是否pending */
+    pending?: boolean;
+    /** 自定义节点位置 */
+    position?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 设置标签 */
+    label?: React.ReactNode;
+    /** 时间轴点图标 */
+    dotIcon?: ReactNode;
+    /** 时间轴内容 */
+    content?: ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+declare const TimelineItem: React.FC<TimelineItemProps>;
+export default TimelineItem;

package/Timeline/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @author Hanz
+ * @date 2022/6/9 下午7:21
+ * @description Timeline
+ */
+import React from 'react';
+import { TimelineItemProps } from './TimelineItem';
+import './index.scss';
+export interface TimelineProps {
+    /** cls */
+    className?: string;
+    /** 指定最后一个幽灵节点是否存在或内容 */
+    pending?: React.ReactNode;
+    /** 当最后一个幽灵节点存在時，指定其时间图点 */
+    pendingDot?: React.ReactNode;
+    /** style */
+    style?: React.CSSProperties;
+    /** 节点排序 */
+    reverse?: boolean;
+    /** 改变时间轴和内容的相对位置 */
+    mode?: 'left' | 'alternate' | 'right';
+    align?: 'left' | 'alternate' | 'right';
+    /** timeline item */
+    data?: TimelineItemProps[];
+    [name: string]: any;
+}
+interface TimelineType extends React.FC<TimelineProps> {
+    /** 时间项 */
+    Item: React.FC<TimelineItemProps>;
+}
+export declare const Timeline: TimelineType;
+export default Timeline;

package/Timeline/index.js

@@ -0,0 +1,148 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import clsx from 'clsx';
+import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/typeof-498dd2b1.js';
+
+//TimelineItem
+var TimelineItem = function TimelineItem(props) {
+  var _clsx, _clsx2;
+  var className = props.className,
+    color = props.color,
+    dot = props.dot,
+    _props$pending = props.pending,
+    pending = _props$pending === void 0 ? false : _props$pending;
+    props.position;
+    var label = props.label,
+    children = props.children,
+    restProps = __rest(props, ["className", "color", "dot", "pending", "position", "label", "children"]);
+  var prefixCls = "".concat($rcPrefixCls, "-timeline");
+  //item cls
+  var itemClassName = clsx((_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-item"), true), _defineProperty(_clsx, "".concat(prefixCls, "-item-pending"), pending), _clsx), className);
+  //dot cls
+  var dotClassName = clsx((_clsx2 = {}, _defineProperty(_clsx2, "".concat(prefixCls, "-item-head"), true), _defineProperty(_clsx2, "".concat(prefixCls, "-item-head-custom"), !!dot), _defineProperty(_clsx2, "".concat(prefixCls, "-item-head-").concat(color), color), _clsx2));
+  return jsxs("li", Object.assign({}, restProps, {
+    className: itemClassName
+  }, {
+    children: [label && jsx("div", Object.assign({
+      className: "".concat(prefixCls, "-item-label")
+    }, {
+      children: label
+    })), jsx("div", {
+      className: "".concat(prefixCls, "-item-tail")
+    }), jsx("div", Object.assign({
+      className: dotClassName,
+      style: {
+        borderColor: color,
+        color: color
+      }
+    }, {
+      children: dot
+    })), jsx("div", Object.assign({
+      className: "".concat(prefixCls, "-item-content")
+    }, {
+      children: children
+    }))]
+  }));
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/6/9 下午8:00\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-timeline {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1.5715;\n  list-style: none;\n}\n.paraui-v3-timeline .component-timeline-item {\n  position: relative;\n  margin: 0;\n  min-height: 70px;\n  padding-bottom: 20px;\n  font-size: 14px;\n  list-style: none;\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-head:not(.component-timeline-item-head-custom) {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-head svg {\n  color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-content {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-tail {\n  position: absolute;\n  top: 16px;\n  bottom: 8px;\n  left: 3.5px;\n  border-left: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-timeline .component-timeline-item-pending .component-timeline-item-head {\n  font-size: 12px;\n  background-color: transparent;\n}\n.paraui-v3-timeline .component-timeline-item-pending .component-timeline-item-tail {\n  display: none;\n}\n.paraui-v3-timeline .component-timeline-item-head {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background-color: rgb(54, 102, 214);\n  border-radius: 100px;\n}\n.paraui-v3-timeline .component-timeline-item-head-custom {\n  position: absolute;\n  top: 5.5px;\n  left: 5px;\n  width: auto;\n  height: auto;\n  margin-top: 0;\n  padding: 3px 1px;\n  line-height: 1;\n  text-align: center;\n  border: 0;\n  border-radius: 0;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n.paraui-v3-timeline .component-timeline-item-content {\n  position: relative;\n  top: -7px;\n  margin: 0 0 0 20px;\n  word-break: break-word;\n}\n.paraui-v3-timeline .component-timeline-item-last > .component-timeline-item-tail {\n  display: none;\n}\n.paraui-v3-timeline .component-timeline-item-last > .component-timeline-item-content {\n  min-height: 48px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head-custom {\n  left: 50%;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head {\n  margin-left: -4px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head-custom {\n  margin-left: 1px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-left .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-left .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-left .component-timeline-item-content {\n  left: calc(50% - 4px);\n  width: calc(50% - 14px);\n  text-align: left;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-right .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-right .component-timeline-item-content {\n  width: calc(50% - 12px);\n  margin: 0;\n  text-align: right;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-head-custom {\n  left: calc(100% - 4px - 2px);\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-content {\n  width: calc(100% - 18px);\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-pending .component-timeline-item-last .component-timeline-item-tail {\n  display: block;\n  height: calc(100% - 14px);\n  border-left: 2px dotted #f0f0f0;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-last .component-timeline-item-tail {\n  display: none;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-pending .component-timeline-item-tail {\n  top: 15px;\n  display: block;\n  height: calc(100% - 15px);\n  border-left: 2px dotted #f0f0f0;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-pending .component-timeline-item-content {\n  min-height: 48px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-label {\n  position: absolute;\n  top: -7.001px;\n  width: calc(50% - 12px);\n  text-align: right;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-right .component-timeline-item-label {\n  left: calc(50% + 14px);\n  width: calc(50% - 14px);\n  text-align: left;\n}";
+styleInject(css_248z);
+
+//Timeline
+var Timeline = function Timeline(props) {
+  var _clsx;
+  var _props$pending = props.pending,
+    pending = _props$pending === void 0 ? null : _props$pending,
+    pendingDot = props.pendingDot,
+    children = props.children,
+    className = props.className,
+    _props$reverse = props.reverse,
+    reverse = _props$reverse === void 0 ? false : _props$reverse,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'left' : _props$mode,
+    align = props.align,
+    data = props.data,
+    restProps = __rest(props, ["pending", "pendingDot", "children", "className", "reverse", "mode", "align", "data"]);
+  var prefixCls = "".concat($prefixCls, "-timeline");
+  var innerMode = align !== null && align !== void 0 ? align : mode; //时间轴和内容相对位置
+  var pendingNode = typeof pending === 'boolean' ? null : pending; //是否有幽灵节点
+  //pending节点项
+  var pendingItem = pending ? jsx(TimelineItem, Object.assign({
+    pending: !!pending,
+    dot: pendingDot
+  }, {
+    children: pendingNode
+  })) : null;
+  var timeLineItems = React__default.Children.toArray(children);
+  timeLineItems.push(pendingItem);
+  if (reverse) {
+    //取反
+    timeLineItems.reverse();
+  }
+  //position cls
+  var getPositionCls = function getPositionCls(ele, idx) {
+    var _a, _b, _c;
+    if (innerMode === 'alternate') {
+      if (((_a = ele === null || ele === void 0 ? void 0 : ele.props) === null || _a === void 0 ? void 0 : _a.position) === 'right') return "".concat($rcPrefixCls, "-timeline-item-right");
+      if (((_b = ele === null || ele === void 0 ? void 0 : ele.props) === null || _b === void 0 ? void 0 : _b.position) === 'left') return "".concat($rcPrefixCls, "-timeline-item-left");
+      return idx % 2 === 0 ? "".concat($rcPrefixCls, "-timeline-item-left") : "".concat($rcPrefixCls, "-timeline-item-right");
+    }
+    if (innerMode === 'left') return "".concat($rcPrefixCls, "-timeline-item-left");
+    if (innerMode === 'right') return "".concat($rcPrefixCls, "-timeline-item-right");
+    if (((_c = ele === null || ele === void 0 ? void 0 : ele.props) === null || _c === void 0 ? void 0 : _c.position) === 'right') return "".concat($rcPrefixCls, "-timeline-item-right");
+    return '';
+  };
+  //实际渲染项
+  var truthyItems = timeLineItems.filter(function (item) {
+    return !!item;
+  });
+  var itemsCount = React__default.Children.count(truthyItems);
+  var lastCls = "".concat($rcPrefixCls, "-timeline-item-last");
+  var items = React__default.Children.map(truthyItems, function (ele, idx) {
+    var pendingClass = idx === itemsCount - 2 ? lastCls : '';
+    var readyClass = idx === itemsCount - 1 ? lastCls : '';
+    return /*#__PURE__*/React__default.cloneElement(ele, {
+      className: clsx([ele.props.className, !reverse && !!pending ? pendingClass : readyClass, getPositionCls(ele, idx)])
+    });
+  });
+  //label
+  var hasLabelItem = timeLineItems.some(function (item) {
+    var _a;
+    return !!((_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.label);
+  });
+  //classname
+  var makeCls = clsx(prefixCls, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-pending"), !!pending), _defineProperty(_clsx, "".concat(prefixCls, "-reverse"), !!reverse), _defineProperty(_clsx, "".concat(prefixCls, "-").concat(innerMode), !!innerMode && !hasLabelItem), _defineProperty(_clsx, "".concat(prefixCls, "-label"), hasLabelItem), _clsx), className);
+  //渲染items
+  var renderItems = function renderItems() {
+    if (!(data === null || data === void 0 ? void 0 : data.length)) return items;
+    var itemsCount = data.length;
+    var lastCls = "".concat($rcPrefixCls, "-timeline-item-last");
+    return data.map(function (item, idx) {
+      var dotIcon = item.dotIcon,
+        content = item.content,
+        _item$disabled = item.disabled,
+        disabled = _item$disabled === void 0 ? false : _item$disabled,
+        className = item.className;
+      var pendingClass = idx === itemsCount - 2 ? lastCls : '';
+      var readyClass = idx === itemsCount - 1 ? lastCls : '';
+      return jsx(TimelineItem, Object.assign({
+        dot: dotIcon,
+        className: clsx([className, _defineProperty({}, "".concat($rcPrefixCls, "-timeline-item-disabled"), disabled), !reverse && !!pending ? pendingClass : readyClass, getPositionCls(null, idx)])
+      }, {
+        children: content
+      }), idx);
+    });
+  };
+  return jsx("ul", Object.assign({}, restProps, {
+    className: makeCls
+  }, {
+    children: renderItems()
+  }));
+};
+Timeline.Item = TimelineItem;
+
+export { Timeline, Timeline as default };

package/Title/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @author Hanz
+ * @date 2022/8/11 2:54 PM
+ * @description 标题
+ */
+import React, { FC, ReactNode } from 'react';
+import './index.scss';
+export interface TitleProps {
+    /** 标题 **/
+    title: ReactNode;
+    /** 副标题 **/
+    subTitle?: ReactNode;
+    /** 图标 **/
+    icon?: ReactNode;
+    /** 链接 **/
+    link?: {
+        href: string;
+        text: ReactNode;
+        target?: string;
+        onClick?: React.MouseEventHandler<HTMLElement>;
+    };
+    /** 尺寸，仅在 icon 存在时有效 **/
+    size?: 'small' | 'medium' | 'large';
+    /** cls */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+}
+export declare const Title: FC<TitleProps>;
+export default Title;

package/Title/index.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/11 2:55 PM\n* @description 标题\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-title {\n  display: flex;\n  align-items: center;\n  line-height: 20px;\n}\n.paraui-v3-title .title-ink {\n  width: 4px;\n  height: 14px;\n  background-color: rgb(54, 102, 214);\n  border-radius: 2px;\n}\n.paraui-v3-title .title-icon {\n  display: inline-flex;\n}\n.paraui-v3-title .title-text {\n  margin-left: 8px;\n  font-size: 14px;\n  font-weight: 700;\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-title .title-subtext {\n  margin-left: 12px;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-title .title-link {\n  margin-left: 12px;\n  text-decoration: none;\n  outline: none;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-title.paraui-v3-title-large .title-icon svg {\n  font-size: 30px;\n}\n.paraui-v3-title.paraui-v3-title-large .title-text {\n  font-size: 18px;\n}\n.paraui-v3-title.paraui-v3-title-medium .title-icon svg {\n  font-size: 24px;\n}\n.paraui-v3-title.paraui-v3-title-medium .title-text {\n  font-size: 16px;\n}\n.paraui-v3-title.paraui-v3-title-small .title-icon svg {\n  font-size: 20px;\n}\n.paraui-v3-title.paraui-v3-title-small .title-text {\n  margin-left: 4px;\n}";
+styleInject(css_248z);
+
+//标题
+var Title = function Title(props) {
+  var title = props.title,
+    subTitle = props.subTitle,
+    icon = props.icon,
+    link = props.link,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    className = props.className,
+    style = props.style;
+  //cls
+  var makeCls = clsx("".concat($prefixCls, "-title"), className, icon && "".concat($prefixCls, "-title-").concat(size));
+  return jsxs("div", Object.assign({
+    className: makeCls,
+    style: style
+  }, {
+    children: [icon ? jsx("span", Object.assign({
+      className: "title-icon"
+    }, {
+      children: icon
+    })) : jsx("span", {
+      className: "title-ink"
+    }), jsx("span", Object.assign({
+      className: "title-text"
+    }, {
+      children: title
+    })), subTitle && jsx("span", Object.assign({
+      className: "title-subtext"
+    }, {
+      children: subTitle
+    })), link && jsx("a", Object.assign({
+      className: "title-link",
+      target: link.target || '_blank',
+      href: link.href,
+      onClick: link.onClick
+    }, {
+      children: link.text
+    }))]
+  }));
+};
+
+export { Title, Title as default };

package/ToggleButton/ToggleButtonGroup.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @author Hanz
+ * @date 2021/11/23 上午11:17
+ * @description toggle button group
+ */
+import React, { FunctionComponent } from "react";
+import './index.scss';
+type Item = {
+    label: string;
+    value: any;
+    selected?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export interface ToggleButtonGroupProps {
+    type?: 'text' | 'outlined';
+    /**
+     * 类名
+     */
+    className?: string;
+    /**
+     * 样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 是否互斥
+     */
+    exclusive?: boolean;
+    /**
+     * 是否可切换选中项
+     */
+    toggleable?: boolean;
+    /**
+     * 按钮组value
+     */
+    value?: any;
+    /**
+     * 按钮组数据源
+     */
+    data?: Item[];
+    /**
+     * value变化时回调
+     * @param event
+     * @param value
+     */
+    onChange?: (event: React.MouseEvent, value: any) => void;
+}
+declare const ToggleButtonGroup: FunctionComponent<ToggleButtonGroupProps>;
+export default ToggleButtonGroup;

package/ToggleButton/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @author Hanz
+ * @date 2021/11/23 上午9:44
+ * @description toggleButton
+ */
+import React, { FunctionComponent } from "react";
+import ToggleButtonGroup, { ToggleButtonGroupProps } from './ToggleButtonGroup';
+import './index.scss';
+export interface ToggleButtonProps {
+    /**
+     * 类名
+     */
+    className?: string;
+    /**
+     * 样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 子节点
+     */
+    children?: string;
+    /**
+     * 禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否选中
+     */
+    selected?: boolean;
+    /**
+     * value
+     */
+    value?: any;
+    /**
+     * width
+     */
+    width?: number | string;
+    /**
+     * 点击回调
+     * @param event
+     * @param value
+     */
+    onClick?: (event: React.MouseEvent, value: any) => void;
+    [name: string]: any;
+}
+export declare const ToggleButton: FunctionComponent<ToggleButtonProps>;
+export type { ToggleButtonGroupProps };
+export { ToggleButtonGroup };
+export default ToggleButton;