shineout 3.0.0-alpha.5 → 3.0.0-alpha.7

package/cjs/alert/__example__/02-type.js

@@ -19,7 +19,7 @@ var _default = function _default() {
     style: {
       display: 'flex',
       flexWrap: 'wrap',
-      gap: 32
+      gap: 24
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Alert, {
       icon: true,

package/cjs/alert/__example__/03-closeable.js

@@ -17,8 +17,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * cn - 允许关闭
- *    -- 通过设置 `closable` 属性可以展示关闭按钮。通过 `onClose` 属性可以设置关闭回调函数。
- *    -- 注意 `onClose` 属性未来不再支持 boolean 类型，`hideClose` 属性即将弃用，请使用 `closable`。
+ *    -- 通过设置 `closable` 属性可以展示关闭按钮。通过 `onClose` 属性可以设置关闭回调函数
+ *    -- 注意 `onClose` 属性未来不再支持 boolean 类型，`hideClose` 属性即将弃用，请使用 `closable`
  * en - Basic
  *    -- The basic usage of Alert, used to display important prompt information in the page.
  */
@@ -40,9 +40,6 @@ var _default = function _default() {
       onClick: handleReset,
       mode: "text",
       type: "primary",
-      style: {
-        marginBottom: 12
-      },
       children: "\u91CD\u7F6E"
     }), reset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Alert, {
       icon: true,

package/cjs/alert/__example__/04-title.js

@@ -10,7 +10,7 @@ var _ = require("../..");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * cn - 标题模式
- *    -- 通过设置 `title` 属性可以展示标题模式的提示框。
+ *    -- 通过设置 `title` 属性可以展示标题模式的提示框
  * en - Title
  *    -- Set the `title` property to display the title mode alert box.
  */

package/cjs/alert/__example__/05-bordered.js

@@ -10,7 +10,7 @@ var _ = require("../..");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * cn - 无边框
- *    -- 设置 `bordered` 属性为 false 可以隐藏提示框的边框。
+ *    -- 设置 `bordered` 属性为 false 可以隐藏提示框的边框
  * en - No border
  *    -- Set the `bordered` property to false to hide the border of the alert box.
  */

package/cjs/alert/alert.type.d.ts

@@ -1,2 +1,5 @@
 import { AlertProps as UnStyledAlertProps } from '@sheinx/base';
+/**
+ * @title Alert
+ */
 export declare type AlertProps = Omit<UnStyledAlertProps, 'jssStyle'>;

package/cjs/breadcrumb/__example__/02-separator.js

@@ -31,7 +31,10 @@ var App = function App() {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Breadcrumb, {
       data: data,
-      separator: "/"
+      separator: "/",
+      style: {
+        marginBottom: '24px'
+      }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Breadcrumb, {
       data: data,
       separator: /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, {})

package/cjs/button/button.type.d.ts

@@ -1,2 +1,5 @@
 import { ButtonProps as UnStyledButtonProps } from '@sheinx/base';
+/**
+ * @title Button
+ */
 export declare type ButtonProps = Omit<UnStyledButtonProps, 'jssStyle'>;

package/cjs/button/group.type.d.ts

@@ -1,3 +1,6 @@
 import { ButtonGroupProps as UnStyledButtonGroupProps } from '@sheinx/base';
 export declare type BaseButtonGroupProps = Omit<UnStyledButtonGroupProps, 'jssStyle'>;
+/**
+ * @title Button.Group
+ */
 export declare type ButtonGroupProps = BaseButtonGroupProps;

package/cjs/card/__example__/03-hover.js

@@ -30,7 +30,7 @@ var iconStyle = {
 var HoverCard = function HoverCard(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
     style: _objectSpread(_objectSpread({}, cardStyle), {}, {
-      marginInlineEnd: 32
+      margin: '16px'
     }),
     split: true,
     className: props.className,
@@ -125,6 +125,11 @@ var useStyle = (0, _reactJss.createUseStyles)({
 var App = function App() {
   var classes = useStyle();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      margin: '-16px'
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HoverCard, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(HoverCard, {
       className: classes === null || classes === void 0 ? void 0 : classes.customCard
     })]

package/cjs/card/__example__/06-form.js

@@ -29,13 +29,13 @@ var App = function App() {
           console.log(data);
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
-          label: "User name",
+          label: "User name :",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
             name: "name",
             defaultValue: "user"
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
-          label: "Email",
+          label: "Email :",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
             name: "email",
             defaultValue: "test@example.com"

package/cjs/card/body.type.d.ts

@@ -1,2 +1,5 @@
 import { CardBodyProps as UnStyledCardBodyProps } from '@sheinx/base';
+/**
+ * @title Card.Body
+ */
 export declare type CardBodyProps = Omit<UnStyledCardBodyProps, 'jssStyle'>;

package/cjs/card/card.type.d.ts

@@ -1,2 +1,5 @@
 import { CardProps as UnStyledCardProps } from '@sheinx/base';
+/**
+ * @title Card
+ */
 export declare type CardProps = Omit<UnStyledCardProps, 'jssStyle'>;

package/cjs/card/footer.type.d.ts

@@ -1,2 +1,5 @@
 import { CardFooterProps as UnStyledCardFooterProps } from '@sheinx/base';
+/**
+ * @title Card.Footer
+ */
 export declare type CardFooterProps = Omit<UnStyledCardFooterProps, 'jssStyle'>;

package/cjs/card/header.type.d.ts

@@ -1,2 +1,5 @@
 import { CardHeaderProps as UnStyledCardHeaderProps } from '@sheinx/base';
+/**
+ * @title Card.Header
+ */
 export declare type CardHeaderProps = Omit<UnStyledCardHeaderProps, 'jssStyle'>;

package/cjs/carousel/carousel.type.d.ts

@@ -1,2 +1,5 @@
 import { CarouselProps as UnStyledCarouselProps } from '@sheinx/base';
+/**
+ * @title Carousel
+ */
 export declare type CarouselProps = Omit<UnStyledCarouselProps, 'jssStyle'>;

package/cjs/cascader/__example__/01-base.js

@@ -36,6 +36,7 @@ var _default = function _default() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Cascader, {
       width: 300,
+      clearable: true,
       placeholder: "Please select city",
       data: data,
       keygen: "value",

package/cjs/cascader/__example__/02-01-multiple.js

@@ -46,6 +46,9 @@ var _default = function _default() {
       compressed: true,
       compressedBound: 2,
       width: 300,
+      onChange: function onChange(d) {
+        return console.log(d);
+      },
       placeholder: "Please select city",
       data: data,
       keygen: "value",

package/cjs/cascader/__example__/06-01-filter.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 过滤数据（本地）
+ *    -- 设置`onFilter`属性且返回内容为函数时，会根据返回的过滤函数对本地数据进行过滤
+ * en - Filter data (local)
+ *    -- Set the `onFilter` property and return the content as a function, the local data will be filtered according to the returned filter function
+ */
+
+var data = [{
+  value: 'jiangsu',
+  children: [{
+    value: 'nanjing',
+    children: [{
+      value: 'jiangning'
+    }, {
+      value: 'gulou'
+    }]
+  }]
+}, {
+  value: 'anhui',
+  children: [{
+    value: 'hefei',
+    children: [{
+      value: 'feidong'
+    }]
+  }]
+}];
+var _default = function _default() {
+  var onFilter = function onFilter(text) {
+    return function (d) {
+      return d.value.indexOf(text) >= 0;
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      gap: 32
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Cascader, {
+      width: 300,
+      placeholder: "Please select city",
+      data: data,
+      keygen: "value",
+      onFilter: onFilter,
+      renderItem: function renderItem(n) {
+        return "".concat(n === null || n === void 0 ? void 0 : n.value);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Cascader, {
+      mode: 3,
+      width: 300,
+      placeholder: "Please select city",
+      data: data,
+      keygen: "value",
+      onFilter: onFilter,
+      renderItem: function renderItem(n) {
+        return "".concat(n === null || n === void 0 ? void 0 : n.value);
+      }
+    })]
+  });
+};
+exports.default = _default;

package/cjs/cascader/__example__/{06-filter.js → 06-02-filter.js}

@@ -9,10 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _ = require("../..");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * cn - 过滤数据（本地）
- *    -- 设置`onFilter`属性且返回内容为函数时，会根据返回的过滤函数对本地数据进行过滤
- * en - Filter data (local)
- *    -- Set the `onFilter` property and return the content as a function, the local data will be filtered according to the returned filter function
+ * cn - 宽泛过滤
+ *    -- 打开`wideMatch`后，将筛选出所有可能的匹配项目
+ * en - Wide match
+ *    -- After opening `wideMatch`, all possible matching items will be filtered out
  */
 
 var data = [{
@@ -21,6 +21,8 @@ var data = [{
     value: 'nanjing',
     children: [{
       value: 'jiangning'
+    }, {
+      value: 'gulou'
     }]
   }]
 }, {
@@ -39,7 +41,12 @@ var _default = function _default() {
     };
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: 'flex',
+      gap: 32
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Cascader, {
+      wideMatch: true,
       width: 300,
       placeholder: "Please select city",
       data: data,

package/cjs/cascader/__example__/07-inner-title.d.ts

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

package/cjs/cascader/__example__/07-inner-title.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ /**
+ * cn - 内嵌标题
+ *    -- 使用 innerTitle 展示内嵌标题
+ * en - inner title
+ *    -- use innerTitle to display the inner title
+ */
+
+var data = [{
+  value: 'jiangsu',
+  children: [{
+    value: 'nanjing',
+    children: [{
+      value: 'jiangning'
+    }]
+  }]
+}, {
+  value: 'anhui',
+  children: [{
+    value: 'hefei',
+    children: [{
+      value: 'feidong'
+    }]
+  }]
+}];
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Cascader, {
+      innerTitle: "Inner Title",
+      width: 300,
+      placeholder: "Please select city",
+      data: data,
+      keygen: "value",
+      renderItem: function renderItem(n) {
+        return "".concat(n === null || n === void 0 ? void 0 : n.value);
+      }
+    })
+  });
+};
+exports.default = _default;

package/cjs/cascader/__example__/08-unmatch.d.ts

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

package/cjs/cascader/__example__/08-unmatch.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 渲染未匹配值
+ *    -- 通过`renderUnmatched`属性可以渲染未匹配的值
+ * en - renderUnmatched
+ *    -- The unmatched value can be rendered through the `renderUnmatched` property.
+ */
+
+var data = [{
+  value: 'jiangsu',
+  children: [{
+    value: 'nanjing',
+    children: [{
+      value: 'jiangning'
+    }]
+  }]
+}, {
+  value: 'anhui',
+  children: [{
+    value: 'hefei',
+    children: [{
+      value: 'feidong'
+    }]
+  }]
+}];
+var _default = function _default() {
+  var renderUnmatched = function renderUnmatched(text) {
+    return "Unmatched: ".concat(text);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Cascader, {
+      width: 300,
+      unmatch: true,
+      defaultValue: ['shanghai'],
+      placeholder: "Please select city",
+      data: data,
+      renderUnmatched: renderUnmatched,
+      keygen: "value",
+      renderItem: function renderItem(n) {
+        return "".concat(n === null || n === void 0 ? void 0 : n.value);
+      }
+    })
+  });
+};
+exports.default = _default;

package/cjs/cascader/cascader.type.d.ts

@@ -2,4 +2,7 @@ import { CascaderProps as UnStyledCascaderProps } from '@sheinx/base';
 import { KeygenResult } from '@sheinx/hooks';
 import { GetWithFieldProps } from '../hooks/use-field-common';
 export declare type BaseCascaderProps<DataItem, Value extends KeygenResult[]> = Omit<UnStyledCascaderProps<DataItem, Value>, 'jssStyle'>;
+/**
+ * @title Cascader
+ */
 export declare type CascaderProps<DataItem, Value extends KeygenResult[]> = GetWithFieldProps<BaseCascaderProps<DataItem, Value>, BaseCascaderProps<DataItem, Value>['value']>;

package/cjs/checkbox/__example__/001-size.d.ts

@@ -1,6 +1,6 @@
 /**
  * cn - 尺寸
- *    -- 设置 `size` 属性改变组件的尺寸大小, 内置三种尺寸：small、default、large。
+ *    -- 设置 `size` 属性改变组件的尺寸大小, 内置三种尺寸：small、default、large
  * en - Base
  *    -- Set the size property to change the size of the component. There are three built-in sizes: small, default, and large.
  */

package/cjs/checkbox/__example__/001-size.js

@@ -10,7 +10,7 @@ var _ = require("../..");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * cn - 尺寸
- *    -- 设置 `size` 属性改变组件的尺寸大小, 内置三种尺寸：small、default、large。
+ *    -- 设置 `size` 属性改变组件的尺寸大小, 内置三种尺寸：small、default、large
  * en - Base
  *    -- Set the size property to change the size of the component. There are three built-in sizes: small, default, and large.
  */

package/cjs/checkbox/__example__/002-checked-1.d.ts

@@ -1,6 +1,6 @@
 /**
  * cn - 状态
- *    -- checked 有三个值，选中(true)、未选中(false)、半选中('indeterminate')，checked 设置时为受控组件（此示例没有处理 onChange 事件）。
+ *    -- checked 有三个值，选中(true)、未选中(false)、半选中('indeterminate')，checked 设置时为受控组件（此示例没有处理 onChange 事件）
  * en - Checked
  *    -- The checked has three values: true(checked), false(not checked), 'indeterminate'(half-checked).
  */

package/cjs/checkbox/__example__/002-checked-1.js

@@ -10,7 +10,7 @@ var _ = require("../..");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * cn - 状态
- *    -- checked 有三个值，选中(true)、未选中(false)、半选中('indeterminate')，checked 设置时为受控组件（此示例没有处理 onChange 事件）。
+ *    -- checked 有三个值，选中(true)、未选中(false)、半选中('indeterminate')，checked 设置时为受控组件（此示例没有处理 onChange 事件）
  * en - Checked
  *    -- The checked has three values: true(checked), false(not checked), 'indeterminate'(half-checked).
  */

package/cjs/checkbox/__example__/002-checked-2.d.ts

@@ -1,6 +1,6 @@
 /**
  * cn - 全选/半选
- *    -- 通过设置 checked = 'indeterminate' 属性，可以实现半选效果。
+ *    -- 通过设置 checked = 'indeterminate' 属性，可以实现半选效果
  * en - Check all
  *    -- Set checked = 'indeterminate' to achieve half-check effect.
  */

package/cjs/checkbox/__example__/002-checked-2.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * cn - 全选/半选
- *    -- 通过设置 checked = 'indeterminate' 属性，可以实现半选效果。
+ *    -- 通过设置 checked = 'indeterminate' 属性，可以实现半选效果
  * en - Check all
  *    -- Set checked = 'indeterminate' to achieve half-check effect.
  */

package/cjs/checkbox/__example__/003-value.d.ts

@@ -1,6 +1,6 @@
 /**
  * cn - 选中值
- *    -- 未设置htmlValue的状态下，checkbox选中时返回true，如果设置 htmlValue，返回 htmlValue。未选中状态都是返回 undefined。
+ *    -- 未设置htmlValue的状态下，checkbox选中时返回true，如果设置 htmlValue，返回 htmlValue。未选中状态都是返回 undefined
  * en - Value
  *    -- When the htmlValue is set, the checkbox return the htmlValue (checked) and undefined (not checked);
  *    -- When the htmlValue is not set, the checkbox selected return true (checked) and undefined (not checked);

package/cjs/checkbox/__example__/003-value.js

@@ -10,7 +10,7 @@ var _ = require("../..");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * cn - 选中值
- *    -- 未设置htmlValue的状态下，checkbox选中时返回true，如果设置 htmlValue，返回 htmlValue。未选中状态都是返回 undefined。
+ *    -- 未设置htmlValue的状态下，checkbox选中时返回true，如果设置 htmlValue，返回 htmlValue。未选中状态都是返回 undefined
  * en - Value
  *    -- When the htmlValue is set, the checkbox return the htmlValue (checked) and undefined (not checked);
  *    -- When the htmlValue is not set, the checkbox selected return true (checked) and undefined (not checked);

package/cjs/checkbox/checkbox.type.d.ts

@@ -1,4 +1,7 @@
 import { CheckboxProps as UnStyledCheckboxProps } from '@sheinx/base';
 import { GetWithFieldProps } from '../hooks/use-field-common';
 export declare type BaseCheckboxProps<T> = Omit<UnStyledCheckboxProps<T>, 'jssStyle'>;
+/**
+ * @title Checkbox
+ */
 export declare type CheckboxProps<T> = GetWithFieldProps<BaseCheckboxProps<T>, T>;

package/cjs/checkbox/group.type.d.ts

@@ -1,4 +1,7 @@
 import { CheckboxGroupProps as UnStyledCheckboxGroupProps } from '@sheinx/base';
 import { GetWithFieldProps } from '../hooks/use-field-common';
 export declare type BaseCheckboxGroupProps<DataItem, Value extends any[]> = Omit<UnStyledCheckboxGroupProps<DataItem, Value>, 'jssStyle'>;
+/**
+ * @title Checkbox.Group
+ */
 export declare type CheckboxGroupProps<DataItem, Value extends any[]> = GetWithFieldProps<BaseCheckboxGroupProps<DataItem, Value>, BaseCheckboxGroupProps<DataItem, Value>['value']>;

package/cjs/collapse/collapse-item.type.d.ts

@@ -1,2 +1,5 @@
 import { CollapseItemProps as UnStyledCollapseItemProps } from '@sheinx/base';
+/**
+ * @title Collapse.Item
+ */
 export declare type CollapseItemProps = Omit<UnStyledCollapseItemProps, 'jssStyle'>;

package/cjs/collapse/collapse.type.d.ts

@@ -1,2 +1,5 @@
 import { CollapseProps as UnStyledCollapseProps } from '@sheinx/base';
+/**
+ * @title Collapse
+ */
 export declare type CollapseProps = Omit<UnStyledCollapseProps, 'jssStyle'>;

package/cjs/date-picker/__example__/03-size.js

@@ -23,41 +23,35 @@ var App = function App() {
     size = _React$useState2[0],
     setSize = _React$useState2[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
       button: 'outline',
       data: Size,
       value: size,
       onChange: setSize,
-      keygen: true,
-      style: {
-        marginBottom: 24
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
+      keygen: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       size: size,
       type: "date",
-      style: {
-        marginBottom: 16
-      }
-    }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
+      showSelNow: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       size: size,
       type: "datetime",
-      style: {
-        marginBottom: 16
-      }
-    }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
+      showSelNow: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       size: size,
       type: "date",
       range: true,
-      style: {
-        marginBottom: 16
-      }
-    }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
+      showSelNow: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       size: size,
       type: "datetime",
       range: true,
-      style: {
-        marginBottom: 16
-      }
+      showSelNow: true
     })]
   });
 };

package/cjs/date-picker/__example__/07-time-0.js

@@ -15,24 +15,23 @@ var _jsxRuntime = require("react/jsx-runtime");
  *    -- Set type to be time to select time and automatically load the corresponding selection column according to the format property.
  */
 
-var style = {
-  marginBottom: 16
-};
 var now = Date.now();
 var App = function App() {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
-      style: style,
       type: "time",
       defaultValue: now,
       showSelNow: true
-    }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
-      style: style,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       type: "time",
       format: "HH:mm",
       defaultValue: now
-    }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
-      style: style,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       type: "time",
       format: "hh:mm A",
       defaultValue: now

package/cjs/date-picker/__example__/07-time-1.js

@@ -15,25 +15,23 @@ var _jsxRuntime = require("react/jsx-runtime");
  *    -- Set step of TimePicker
  */
 
-var style = {
-  marginInlineEnd: 12
-};
 var step = 2;
 var App = function App() {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      gap: '24px'
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       placeholder: "Hour Step",
-      style: style,
       type: "time",
       hourStep: step
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       placeholder: "Minute Step",
-      style: style,
       type: "time",
       minuteStep: step
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
       placeholder: "Second Step",
-      style: style,
       type: "time",
       secondStep: step
     })]