x-ui-design 0.1.97 → 0.1.98

package/dist/esm/types/components/Button/Button.d.ts

@@ -1,9 +1,5 @@
 import { ReactElement } from 'react';
 import { ButtonProps } from '../../types/button';
 import './style.css';
-type ButtonBaseProps = ButtonProps & {
-    iconNode?: React.ReactNode;
-    isLoading?: boolean;
-};
-declare const ButtonBase: ({ type, variant, color, shape, size, htmlType, className, rootClassName, classNames: customClassNames, styles, prefixCls, iconPosition, disabled, ghost, danger, block, children, href, iconNode, isLoading, ...restProps }: ButtonBaseProps) => ReactElement;
-export default ButtonBase;
+declare const ButtonComponent: ({ type, variant, color, shape, size, htmlType, className, rootClassName, classNames: customClassNames, styles, prefixCls, icon, iconPosition, loading, disabled, ghost, danger, block, children, href, ...restProps }: ButtonProps) => ReactElement;
+export default ButtonComponent;

package/dist/esm/types/components/Button/index.d.ts

@@ -1 +1 @@
-export { default as Button } from './Button.client';
+export { default as Button } from './Button';

package/dist/esm/types/index.d.ts

@@ -18,7 +18,7 @@ export { default as SkeletonInput } from "./components/Skeleton/Input/Input";
 export { default as SkeletonAvatar } from "./components/Skeleton/Avatar/Avatar";
 export { default as SkeletonButton } from "./components/Skeleton/Button/Button";
 export { default as Empty } from "./components/Empty/Empty";
-export { default as Button } from "./components/Button/Button.client";
+export { default as Button } from "./components/Button/Button";
 export { default as Upload } from "./components/Upload/Upload";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { ClearIcon, ArrowIcon, LoadingIcon, CheckIcon, SearchIcon, CalendarIcon, SuccessIcon, ErrorIcon, DateDistanceIcon, TimeIcon, StampleIcon, TrashIcon, SpinerIcon } from './components/Icons/Icons';

package/dist/index.d.ts

@@ -593,7 +593,7 @@ interface ButtonProps extends BaseButtonProps, Omit<ButtonHTMLAttributes<HTMLBut
     htmlType?: ButtonHTMLType;
 }
 
-declare const MyButton: (props: ButtonProps) => react.JSX.Element;
+declare const ButtonComponent: ({ type, variant, color, shape, size, htmlType, className, rootClassName, classNames: customClassNames, styles, prefixCls, icon, iconPosition, loading, disabled, ghost, danger, block, children, href, ...restProps }: ButtonProps) => ReactElement;
 
 interface RcFile extends File {
     uid: string;
@@ -697,4 +697,4 @@ type UseWatchProps = {
 };
 declare const useWatch: ({ name, defaultValue, form }: UseWatchProps) => any;
 
-export { ArrowIcon, MyButton as Button, CalendarIcon, CheckIcon, Checkbox, ClearIcon, DateDistanceIcon, DatePicker, EmptyContent as Empty, ErrorIcon, Form, FormItem, Input, LoadingIcon, Option, Radio, RadioButton, RadioGroup, RangePicker, SearchIcon, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, SpinerIcon, StampleIcon, SuccessIcon, Tag, Textarea, TimeIcon, TimePicker, TrashIcon, Upload, useForm, useWatch };
+export { ArrowIcon, ButtonComponent as Button, CalendarIcon, CheckIcon, Checkbox, ClearIcon, DateDistanceIcon, DatePicker, EmptyContent as Empty, ErrorIcon, Form, FormItem, Input, LoadingIcon, Option, Radio, RadioButton, RadioGroup, RangePicker, SearchIcon, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, SpinerIcon, StampleIcon, SuccessIcon, Tag, Textarea, TimeIcon, TimePicker, TrashIcon, Upload, useForm, useWatch };

package/dist/index.esm.js

@@ -2547,7 +2547,7 @@ Skeleton.Button = SkeletonButton;
 var css_248z$2 = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:40px;padding:8px 20px}.xUi-button-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-circle.xUi-button-size-large{height:40px;width:40px}.xUi-button-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-light);border-color:var(--xui-primary-color-light);color:#fff}.xUi-button-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-outlined{color:#fff}.xUi-button-filled,.xUi-button-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
 styleInject(css_248z$2);
 
-const ButtonBase = ({
+const ButtonComponent = ({
   type = 'default',
   variant = 'solid',
   color = 'default',
@@ -2559,34 +2559,52 @@ const ButtonBase = ({
   classNames: customClassNames = {},
   styles = {},
   prefixCls = prefixClsButton,
+  icon,
   iconPosition = 'start',
+  loading = false,
   disabled = false,
   ghost = false,
   danger = false,
   block = false,
   children,
   href,
-  iconNode,
-  isLoading = false,
   ...restProps
 }) => {
+  const [innerLoading, setInnerLoading] = useState(false);
+  useEffect(() => {
+    if (typeof loading === 'boolean') {
+      setInnerLoading(loading);
+    } else if (typeof loading === 'object' && loading.delay) {
+      const timeout = setTimeout(() => setInnerLoading(true), loading.delay);
+      return () => clearTimeout(timeout);
+    } else {
+      setInnerLoading(!!loading);
+    }
+  }, [loading]);
   const classes = clsx(prefixCls, rootClassName, `${prefixCls}-${type}`, `${prefixCls}-${variant}`, `${prefixCls}-${color}`, `${prefixCls}-${shape}`, `${prefixCls}-size-${size}`, {
     [`${prefixCls}-block`]: block,
     [`${prefixCls}-ghost`]: ghost,
     [`${prefixCls}-danger`]: danger,
-    [`${prefixCls}-loading`]: isLoading,
+    [`${prefixCls}-loading`]: innerLoading,
     [`${prefixCls}-disabled`]: disabled
   }, className);
-  const mergedDisabled = disabled || isLoading;
-  const content = /*#__PURE__*/React.createElement(React.Fragment, null, iconNode && iconPosition === 'start' && /*#__PURE__*/React.createElement("span", {
-    className: clsx(`${prefixCls}-icon`, customClassNames.icon),
-    style: styles.icon
-  }, iconNode), /*#__PURE__*/React.createElement("span", {
-    className: `${prefixCls}-content`
-  }, children), iconNode && iconPosition === 'end' && /*#__PURE__*/React.createElement("span", {
-    className: clsx(`${prefixCls}-icon`, customClassNames.icon),
-    style: styles.icon
-  }, iconNode));
+  const iconNode = useMemo(() => {
+    return innerLoading ? typeof loading === 'object' && loading.icon || /*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-spinner`
+    }) : icon;
+  }, [icon, innerLoading, loading, prefixCls]);
+  const content = useMemo(() => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, iconNode && iconPosition === 'start' && /*#__PURE__*/React.createElement("span", {
+      className: clsx(`${prefixCls}-icon`, customClassNames.icon),
+      style: styles.icon
+    }, iconNode), /*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-content`
+    }, children), iconNode && iconPosition === 'end' && /*#__PURE__*/React.createElement("span", {
+      className: clsx(`${prefixCls}-icon`, customClassNames.icon),
+      style: styles.icon
+    }, iconNode));
+  }, [children, customClassNames.icon, iconNode, iconPosition, prefixCls, styles.icon]);
+  const mergedDisabled = disabled || innerLoading;
   if (href) {
     return /*#__PURE__*/React.createElement("a", {
       className: classes,
@@ -2601,34 +2619,6 @@ const ButtonBase = ({
   }, restProps), content);
 };
 
-const MyButton = props => {
-  const {
-    loading = false,
-    icon,
-    prefixCls = prefixClsButton
-  } = props;
-  const [innerLoading, setInnerLoading] = useState(false);
-  useEffect(() => {
-    if (typeof loading === 'boolean') {
-      setInnerLoading(loading);
-    } else if (typeof loading === 'object' && loading.delay) {
-      const timeout = setTimeout(() => setInnerLoading(true), loading.delay);
-      return () => clearTimeout(timeout);
-    } else {
-      setInnerLoading(!!loading);
-    }
-  }, [loading]);
-  const iconNode = useMemo(() => {
-    return innerLoading ? typeof loading === 'object' && loading.icon || /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-spinner`
-    }) : icon;
-  }, [icon, innerLoading, loading, prefixCls]);
-  return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, props, {
-    isLoading: innerLoading,
-    iconNode: iconNode
-  }));
-};
-
 var css_248z$1 = ".xUi-upload-wrapper{font-family:Arial,sans-serif;width:100%}.xUi-upload{align-items:center;border-radius:6px;color:#666;cursor:pointer;display:flex;justify-content:flex-start;text-align:center;transition:all .3s}.xUi-upload:hover{border-color:var(--xui-primary-color,var(--xui-primary-color));color:var(--xui-primary-color,var(--xui-primary-color))}.xUi-upload-disabled{cursor:not-allowed;opacity:.6}.xUi-upload-disabled .xUi-upload-picture button{cursor:not-allowed}.xUi-upload-input{display:none}.xUi-upload-list{list-style:none;margin:0;padding:0}.xUi-upload-list-picture .xUi-upload-item{border:1px dashed var(--xui-border-color);line-height:unset;margin-top:8px;padding:8px}.xUi-upload-list-picture .xUi-upload-item-done{border:1px solid var(--xui-border-color)}.xUi-upload-list-picture .xUi-upload-item-error{border:1px solid var(--xui-error-color)}.xUi-upload-list-picture .xUi-upload-item-error .xUi-upload-item-title{color:var(--xui-error-color)}.xUi-upload-item{align-items:center;border-radius:8px;color:#333;display:flex;font-size:14px;gap:8px;line-height:35px;margin:0;transition:background .3s}.xUi-upload-item.uploading{color:var(--xui-primary-color)}.xUi-upload-item.done{color:var(--xui-success-color)}.xUi-upload-item.error{color:var(--xui-error-color)}.xUi-upload-remove{color:rgba(0,0,0,.45)}.xUi-upload-item-title{align-items:center;color:var(--xui-text-color);display:flex;justify-content:space-between}.xUi-upload-item-title svg{color:var(--xui-error-color)}.xUi-upload-list-picture-card{display:flex;flex-wrap:wrap;gap:8px}.xUi-upload-list-picture-card .xUi-upload-item{align-items:center;border-radius:4px;display:flex;flex-direction:column;height:104px;justify-content:center;position:relative;width:104px}.xUi-upload-list-picture-card .xUi-upload-item img{max-height:100%;max-width:100%;object-fit:cover}.xUi-upload-list-picture-card .xUi-upload-remove{border-radius:50%;color:#fff;font-size:12px;line-height:1;padding:2px 6px;position:absolute;right:4px;top:4px}.xUi-upload-item-thumbnail{border-radius:4px;height:40px;object-fit:cover;width:40px}.xUi-upload-item-progress-line{border:1px solid var(--xui-border-color);height:0;width:calc(100% - 8px)}.xUi-upload-item-progress-line-percent{border:1px solid red;height:0;position:relative;top:-2px}";
 styleInject(css_248z$1);
 
@@ -2942,5 +2932,5 @@ const useWatch = ({
   return value;
 };
 
-export { ArrowIcon, MyButton as Button, CalendarIcon, CheckIcon, Checkbox, ClearIcon, DateDistanceIcon, DatePicker, EmptyContent as Empty, ErrorIcon, Form, FormItem, Input, LoadingIcon, Option, Radio, RadioButton, RadioGroup, RangePicker, SearchIcon, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, SpinerIcon, StampleIcon, SuccessIcon, Tag, Textarea, TimeIcon, TimePicker, TrashIcon, Upload, useForm, useWatch };
+export { ArrowIcon, ButtonComponent as Button, CalendarIcon, CheckIcon, Checkbox, ClearIcon, DateDistanceIcon, DatePicker, EmptyContent as Empty, ErrorIcon, Form, FormItem, Input, LoadingIcon, Option, Radio, RadioButton, RadioGroup, RangePicker, SearchIcon, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, SpinerIcon, StampleIcon, SuccessIcon, Tag, Textarea, TimeIcon, TimePicker, TrashIcon, Upload, useForm, useWatch };
 //# sourceMappingURL=index.esm.js.map