shineout 0.0.1-alpha.1

package/cjs/tabs/__example__/06-extra.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 额外内容
+ *    -- 通过配置 `extra` 属性，允许传入额外的内容
+ * en - extra
+ *    -- Set the `extra` property to add extra content
+ */
+var _default = function _default() {
+  var tabs = [];
+  for (var i = 0; i < 3; i++) {
+    tabs.push({
+      title: "Tab ".concat(i + 1),
+      content: "Content of Tab ".concat(i + 1)
+    });
+  }
+  var renderExtra = function renderExtra() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+      mode: "text",
+      type: "primary",
+      children: "extra operation"
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height: 100
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs, {
+      shape: "line",
+      defaultActive: 0,
+      extra: renderExtra(),
+      children: tabs.map(function (tab, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs.Panel, {
+          tab: tab.title,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              padding: 5,
+              height: '100%'
+            },
+            children: tab.content
+          })
+        }, index);
+      })
+    })
+  });
+};
+exports.default = _default;

package/cjs/tabs/__example__/07-scroll.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tabs/__example__/07-scroll.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 滚动
+ *    -- 当 Tabs 数量过多时，将自动开启滚动功能。
+ * en - Scroll
+ *    -- When there are too many Tabs, the scroll function will be automatically enabled.
+ */
+var _default = function _default() {
+  var tabs = [];
+  for (var i = 0; i < 100; i++) {
+    tabs.push({
+      title: "Tab ".concat(i + 1),
+      content: "Content of Tab ".concat(i + 1)
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height: 100
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs, {
+      shape: "line",
+      defaultActive: 0,
+      children: tabs.map(function (tab, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs.Panel, {
+          tab: tab.title,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              padding: 5,
+              height: '100%'
+            },
+            children: tab.content
+          })
+        }, index);
+      })
+    })
+  });
+};
+exports.default = _default;

package/cjs/tabs/__example__/08-collapsible.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tabs/__example__/08-collapsible.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 折叠
+ *    -- 通过设置 `collapsible` 属性折叠面板区域。
+ * en - Collapsible
+ *    -- Set the `collapsible` property to collapse the panel area.
+ */
+var _default = function _default() {
+  var renderIcon = function renderIcon() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      style: {
+        marginRight: 8
+      },
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M9.33333 0.583374C9.88789 0.583374 10.4468 1.11488 10.4964 1.67055L10.5 1.75004V2.33337H11.0833C11.6379 2.33337 12.1968 2.86488 12.2464 3.42055L12.25 3.50004V12.8334C12.25 13.2408 11.8466 13.5155 11.4748 13.3844L11.4132 13.3587L7.875 11.6515L4.33683 13.3587C3.99148 13.5254 3.59669 13.3191 3.51518 12.9676L3.50366 12.9L3.5 12.8334V11.168L2.58683 11.6087C2.24148 11.7754 1.84669 11.5691 1.76518 11.2176L1.75366 11.15L1.75 11.0834V1.75004C1.75 1.209 2.31633 0.637838 2.84192 0.587033L2.91667 0.583374H9.33333ZM10.7917 3.50004H4.95833C4.81515 3.50004 4.69606 3.60322 4.67137 3.73928L4.66667 3.79171V11.4396C4.66667 11.4834 4.67657 11.5268 4.69564 11.5663C4.75786 11.6953 4.90254 11.7577 5.03582 11.7208L5.08508 11.7022L7.47075 10.5508L7.6215 10.4785C7.7359 10.4233 7.86383 10.4075 7.98596 10.4312L8.05839 10.4501L8.11974 10.4749L8.13701 10.4826L10.298 11.525L10.6649 11.7022C10.7045 11.7213 10.7478 11.7312 10.7917 11.7312C10.9349 11.7312 11.0539 11.628 11.0786 11.492L11.0833 11.4396V3.79171C11.0833 3.63062 10.9527 3.50004 10.7917 3.50004ZM9.04167 1.75004H3.20833C3.06515 1.75004 2.94606 1.85322 2.92137 1.98928L2.91667 2.04171V9.68956C2.91667 9.73345 2.92657 9.77677 2.94564 9.8163C3.00787 9.94526 3.15254 10.0077 3.28582 9.9708L3.33508 9.95225L3.5 9.87237V3.50004C3.5 2.96452 4.05684 2.38834 4.59063 2.33707L4.66667 2.33337H9.33333V2.04171C9.33333 1.89852 9.23016 1.77944 9.09409 1.75474L9.04167 1.75004Z",
+        fill: "#666C7C"
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
+      shape: "line",
+      defaultActive: 0,
+      collapsible: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs.Panel, {
+        tab: "Tab 1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            padding: 5,
+            height: '100%',
+            fontWeight: 300,
+            fontSize: 14,
+            lineHeight: '20px'
+          },
+          children: "Joy in living comes from having fine emotions, trusting them, giving them the freedom of a bird in the open. Joy in living can never be assumed as a pose, or put on from the outside as a mask. People who have this joy do not need to talk about it; they radiate it. They just live out their joy and let it splash its sunlight and glow into other lives as naturally as bird sings. We can never get it by working for it directly. It comes, like happiness, to those who are aiming at something higher. It is a byproduct of great, simple living. The joy of living comes from what we put into living, not from what we seek to get from it. As you travel through life there are always those times when decisions just have to be made when the choices are hard, and solutions seem scarce and the rain seems to soak your parade!"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs.Panel, {
+        tab: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: [renderIcon(), "Tab 2"]
+        }),
+        children: "Content of Tab 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs.Panel, {
+        tab: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: [renderIcon(), "Tab 3"]
+        }),
+        children: "Content of Tab 3"
+      })]
+    })
+  });
+};
+exports.default = _default;

package/cjs/tabs/index.d.ts

@@ -0,0 +1,13 @@
+import Tabs from './tabs';
+import Panel from './tabs-panel';
+declare type RefTabs = typeof Tabs;
+declare type RefTabsPabel = typeof Panel;
+export interface TabsComponent extends RefTabs {
+    displayName: string;
+    Panel: RefTabsPabel;
+}
+export interface TabsPanelComponent extends RefTabsPabel {
+    displayName: string;
+}
+declare const TabsComp: TabsComponent;
+export default TabsComp;

package/cjs/tabs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _tabs = _interopRequireDefault(require("./tabs"));
+var _tabsPanel = _interopRequireDefault(require("./tabs-panel"));
+var TabsComp = _tabs.default;
+var TabsPanelComp = _tabsPanel.default;
+TabsComp.displayName = 'ShineoutTabs';
+TabsComp.Panel = TabsPanelComp;
+TabsPanelComp.displayName = 'ShineoutTabsPanel';
+var _default = TabsComp;
+exports.default = _default;

package/cjs/tabs/interface.d.ts

@@ -0,0 +1 @@
+export type { TabsProps as Props } from './tabs.type';

package/cjs/tabs/interface.js

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

package/cjs/tabs/tabs-panel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TabsPanelProps } from '@sheinx/base';
+declare const _default: (props: TabsPanelProps) => JSX.Element;
+export default _default;

package/cjs/tabs/tabs-panel.js

@@ -0,0 +1,26 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var jssStyle = {
+  tabs: _shineoutStyle.useTabsStyle,
+  button: _shineoutStyle.useButtonStyle
+};
+var _default = function _default(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.TabsPanel, _objectSpread({
+    jssStyle: jssStyle
+  }, props));
+};
+exports.default = _default;

package/cjs/tabs/tabs.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TabsProps } from './tabs.type';
+declare const _default: (props: TabsProps) => JSX.Element;
+export default _default;

package/cjs/tabs/tabs.js

@@ -0,0 +1,26 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var jssStyle = {
+  tabs: _shineoutStyle.useTabsStyle,
+  button: _shineoutStyle.useButtonStyle
+};
+var _default = function _default(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Tabs, _objectSpread({
+    jssStyle: jssStyle
+  }, props));
+};
+exports.default = _default;

package/cjs/tabs/tabs.type.d.ts

@@ -0,0 +1,2 @@
+import { TabsProps as UnStyledTabsProps } from '@sheinx/base';
+export declare type TabsProps = Omit<UnStyledTabsProps, 'jssStyle'>;

package/cjs/tabs/tabs.type.js

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

package/cjs/tag/__example__/s-001-base.d.ts

@@ -0,0 +1,11 @@
+/**
+ * cn - 基本用法
+ *    -- 标签常用的 5 种基本功能，默认、信息、危险、警告、成功。
+ *    -- 注意，`type` 属性将弃用，请使用 `color` 属性。
+ * en - Base
+ *    -- The five basic functions of the tag, default, info, danger, warning, success
+ *   -- Note that the `type` property will be deprecated, please use the `color` property.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tag/__example__/s-001-base.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    -- 标签常用的 5 种基本功能，默认、信息、危险、警告、成功。
+ *    -- 注意，`type` 属性将弃用，请使用 `color` 属性。
+ * en - Base
+ *    -- The five basic functions of the tag, default, info, danger, warning, success
+ *   -- Note that the `type` property will be deprecated, please use the `color` property.
+ */
+var _default = function _default() {
+  var TagColor = ['default', 'info', 'danger', 'warning', 'success'];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: TagColor.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+        size: "small",
+        color: item,
+        children: item
+      }, index);
+    })
+  });
+};
+exports.default = _default;

package/cjs/tag/__example__/s-002-size.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 标签尺寸
+ *    -- 标签尺寸分为 小、中、大 3 种。
+ * en - Size
+ *    -- The size of the tag is divided into small, default and large.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tag/__example__/s-002-size.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 标签尺寸
+ *    -- 标签尺寸分为 小、中、大 3 种。
+ * en - Size
+ *    -- The size of the tag is divided into small, default and large.
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+      size: "small",
+      children: "Small"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+      children: "Default"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+      size: "large",
+      children: "Large"
+    })]
+  });
+};
+exports.default = _default;

package/cjs/tag/__example__/s-003-mode.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 标签样式
+ *    -- 标签样式分为 亮色、填充、线框、亮色线框 4 种
+ * en - Mode
+ *    -- The mode of the tag is divided into bright, fill, outline, brightOutline line 4 kinds.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tag/__example__/s-003-mode.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 标签样式
+ *    -- 标签样式分为 亮色、填充、线框、亮色线框 4 种
+ * en - Mode
+ *    -- The mode of the tag is divided into bright, fill, outline, brightOutline line 4 kinds.
+ */
+var _default = function _default() {
+  var TagColor = ['default', 'info', 'danger', 'warning', 'success'];
+  var TagMode = ['bright', 'fill', 'outline', 'brightOutline'];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: TagMode.map(function (mode, midx) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginBottom: 8
+        },
+        children: TagColor.map(function (color, cidx) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+            mode: mode,
+            color: color,
+            children: color
+          }, cidx);
+        })
+      }, midx);
+    })
+  });
+};
+exports.default = _default;

package/cjs/tag/__example__/s-004-color.d.ts

@@ -0,0 +1,11 @@
+/**
+ * cn - 多色标签
+ *    -- 除常用 5 种常用的基本功能色外，组件还提供了其他色系的标签。
+ *    -- 注意，`type` 属性将弃用，`color` 属性同样支持 type 同属性值的样式。
+ * en - Color
+ *    -- In addition to the five basic functions of the commonly used tag, the component also provides tags of other colors.
+ *    -- Note that the `type` property will be deprecated, and the `color` property also supports the style of the same property value as type.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tag/__example__/s-004-color.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 多色标签
+ *    -- 除常用 5 种常用的基本功能色外，组件还提供了其他色系的标签。
+ *    -- 注意，`type` 属性将弃用，`color` 属性同样支持 type 同属性值的样式。
+ * en - Color
+ *    -- In addition to the five basic functions of the commonly used tag, the component also provides tags of other colors.
+ *    -- Note that the `type` property will be deprecated, and the `color` property also supports the style of the same property value as type.
+ */
+var _default = function _default() {
+  var TagColor = ['tangerine', 'magenta', 'purple', 'indigo', 'cyan', 'neon', 'lemon', 'orange'];
+  var TagMode = ['bright', 'fill', 'outline', 'brightOutline'];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: TagMode.map(function (mode, midx) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginBottom: 24
+        },
+        children: TagColor.map(function (color, cidx) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+            mode: mode,
+            color: color,
+            children: "Tag"
+          }, cidx);
+        })
+      }, midx);
+    })
+  });
+};
+exports.default = _default;

package/cjs/tag/__example__/s-005-dynamic.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 可删除和添加标签
+ *    -- 通过数组生成tags,动态增改
+ * en - Delete and add tags
+ *    -- Generate tags through arrays, dynamically increase and change
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tag/__example__/s-005-dynamic.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 可删除和添加标签
+ *    -- 通过数组生成tags,动态增改
+ * en - Delete and add tags
+ *    -- Generate tags through arrays, dynamically increase and change
+ */
+var _default = function _default() {
+  var _useState = (0, _react.useState)(['Tag 1', 'Tag 2', 'Tag 3']),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    tags = _useState2[0],
+    setTags = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    inputVisible = _useState4[0],
+    setInputVisible = _useState4[1];
+  var remove = function remove(removedTag) {
+    var t = tags.filter(function (tag) {
+      return tag !== removedTag;
+    });
+    setTags(t);
+  };
+  var showInput = function showInput() {
+    setInputVisible(true);
+  };
+  var handleInputBlur = function handleInputBlur(value) {
+    var newTags = tags;
+    if (value && tags.indexOf(value) === -1) {
+      newTags = [].concat((0, _toConsumableArray2.default)(tags), [value]);
+    }
+    setTags(newTags);
+    setInputVisible(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [tags.map(function (a) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+        onClose: function onClose() {
+          return remove(a);
+        },
+        children: a
+      }, a);
+    }), inputVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag.Input, {
+      onBlur: handleInputBlur
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+      onClick: showInput,
+      style: {
+        background: '#fff',
+        borderStyle: 'dashed'
+      },
+      children: "+ New Tag"
+    })]
+  });
+};
+exports.default = _default;

package/cjs/tag/__example__/s-006-editable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 可编辑标签
+ *    -- 通过设置 `onCompleted` 属性开启编辑模式，编辑完成后会调用该函数，参数为编辑后的值。
+ * en - onCompleted
+ *    -- Set the `onCompleted` property to enable edit mode, and the function will be called after editing is completed, and the parameter is the edited value.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tag/__example__/s-006-editable.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 可编辑标签
+ *    -- 通过设置 `onCompleted` 属性开启编辑模式，编辑完成后会调用该函数，参数为编辑后的值。
+ * en - onCompleted
+ *    -- Set the `onCompleted` property to enable edit mode, and the function will be called after editing is completed, and the parameter is the edited value.
+ */
+var _default = function _default() {
+  var _useState = (0, _react.useState)('abc'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+      onCompleted: function onCompleted(val) {
+        setValue(val);
+      },
+      onClose: function onClose() {
+        console.log('close');
+      },
+      children: value
+    })
+  });
+};
+exports.default = _default;

package/cjs/tag/__example__/s-007-shape.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 标签形状
+ *    -- 通过设置 `shape` 属性可以设置标签的形状，可选值为 rounded 全圆角形。
+ * en - Shape
+ *    -- The shape of the tag can be set by setting the `shape` property. The optional value is rounded.
+ */
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/tag/__example__/s-007-shape.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 标签形状
+ *    -- 通过设置 `shape` 属性可以设置标签的形状，可选值为 rounded 全圆角形。
+ * en - Shape
+ *    -- The shape of the tag can be set by setting the `shape` property. The optional value is rounded.
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+      children: "Default"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+      shape: "rounded",
+      children: "Rounded"
+    })]
+  });
+};
+exports.default = _default;