x-ui-design 0.3.99 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { SwitchProps } from '../../types/switch';
3
+ import './index.css';
4
+ declare const Switch: {
5
+ ({ prefixCls, checked, onChange, onClick, disabled, className, style, defaultChecked, value }: SwitchProps): React.JSX.Element;
6
+ displayName: string;
7
+ };
8
+ export default Switch;
@@ -0,0 +1 @@
1
+ export { default as Switch } from './Switch';
@@ -20,6 +20,7 @@ declare const Checkbox: import("react").ComponentType<import("@/types").DefaultP
20
20
  defaultChecked?: boolean;
21
21
  checked?: boolean;
22
22
  } & import("react").RefAttributes<HTMLDivElement>>;
23
+ declare const Switch: import("react").ComponentType<import("./types/switch").SwitchProps>;
23
24
  declare const Empty: import("react").ComponentType<import("./types/empty").EmptyContentProps>;
24
25
  declare const Upload: import("react").ComponentType<import("@/types/upload").UploadProps>;
25
26
  declare const DatePicker: import("react").ComponentType<import("@/types/datepicker").TDatePickerProps>;
@@ -155,7 +156,7 @@ declare const SkeletonAvatar: import("react").ComponentType<import("./types/skel
155
156
  declare const SkeletonButton: import("react").ComponentType<import("./types/skeleton").SkeletonButtonProps>;
156
157
  declare const SkeletonImage: import("react").ComponentType<import("./types/skeleton").SkeletonImageProps>;
157
158
  declare const SkeletonInput: import("react").ComponentType<import("./types/skeleton").SkeletonInputProps>;
158
- export { Button, Checkbox, Empty, DatePicker, RangePicker, TimePicker, Form, FormItem, Input, Textarea, Radio, RadioButton, RadioGroup, Select, Option, Tag, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Upload };
159
+ export { Button, Checkbox, Empty, DatePicker, RangePicker, TimePicker, Form, FormItem, Input, Textarea, Radio, RadioButton, RadioGroup, Select, Option, Tag, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Upload, Switch };
159
160
  export { ClearIcon, ArrowIcon, LoadingIcon, CheckIcon, SearchIcon, CalendarIcon, SuccessIcon, ErrorIcon, DateDistanceIcon, TimeIcon, StampleIcon, TrashIcon, SpinerIcon, } from '@/components/Icons';
160
161
  export { useForm } from '@/hooks/useForm';
161
162
  export { useWatch } from '@/hooks/useWatch';
@@ -0,0 +1,22 @@
1
+ import { KeyboardEventHandler, MouseEvent, MouseEventHandler, ReactNode } from 'react';
2
+ import { DefaultProps, TargetProps } from '.';
3
+ export type SwitchProps = DefaultProps & {
4
+ disabled?: boolean;
5
+ onChange?: (e: MouseEvent<HTMLInputElement> & TargetProps) => void;
6
+ onClick?: MouseEventHandler<HTMLElement>;
7
+ onMouseEnter?: MouseEventHandler<HTMLElement>;
8
+ onMouseLeave?: MouseEventHandler<HTMLElement>;
9
+ onKeyPress?: KeyboardEventHandler<HTMLElement>;
10
+ onKeyDown?: KeyboardEventHandler<HTMLElement>;
11
+ value?: boolean;
12
+ tabIndex?: number;
13
+ name?: string;
14
+ children?: ReactNode;
15
+ id?: string;
16
+ autoFocus?: boolean;
17
+ type?: string;
18
+ skipGroup?: boolean;
19
+ required?: boolean;
20
+ defaultChecked?: boolean;
21
+ checked?: boolean;
22
+ };
@@ -4,6 +4,7 @@ export declare const prefixClsEmpty = "xUi-empty";
4
4
  export declare const prefixClsInput = "xUi-input";
5
5
  export declare const prefixClsSelect = "xUi-select";
6
6
  export declare const prefixClsCheckbox = "xUi-checkbox";
7
+ export declare const prefixClsSwitch = "xUi-switch";
7
8
  export declare const prefixClsRadio = "xUi-radio";
8
9
  export declare const prefixClsTextArea = "xUi-textarea";
9
10
  export declare const prefixClsUpload = "xUi-upload";
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { CSSProperties, ReactNode } from 'react';
2
+ import { CSSProperties, ReactNode, MouseEvent, MouseEventHandler, KeyboardEventHandler } from 'react';
3
3
  import * as __types_select from '@/types/select';
4
4
  export { CustomTagProps, DisplayValueType, OptionProps, OptionType, SelectProps, TagProps } from '@/types/select';
5
5
  import * as __types_radio from '@/types/radio';
@@ -23,12 +23,18 @@ export { FormContext } from '@/components/Form/Form';
23
23
  export { clsx, createArray, parseValue } from '@/helpers';
24
24
  export { flattenChildren } from '@/helpers/flatten';
25
25
 
26
+ type RuleType = any;
26
27
  interface DefaultProps {
27
28
  prefixCls?: string;
28
29
  className?: string;
29
30
  style?: CSSProperties;
30
31
  noStyle?: boolean;
31
32
  }
33
+ type TargetProps = {
34
+ target: {
35
+ value: RuleType;
36
+ };
37
+ };
32
38
 
33
39
  declare type widthUnit = number | string;
34
40
  interface SkeletonElementProps {
@@ -84,6 +90,27 @@ type EmptyContentProps = DefaultProps & {
84
90
  icon?: ReactNode;
85
91
  };
86
92
 
93
+ type SwitchProps = DefaultProps & {
94
+ disabled?: boolean;
95
+ onChange?: (e: MouseEvent<HTMLInputElement> & TargetProps) => void;
96
+ onClick?: MouseEventHandler<HTMLElement>;
97
+ onMouseEnter?: MouseEventHandler<HTMLElement>;
98
+ onMouseLeave?: MouseEventHandler<HTMLElement>;
99
+ onKeyPress?: KeyboardEventHandler<HTMLElement>;
100
+ onKeyDown?: KeyboardEventHandler<HTMLElement>;
101
+ value?: boolean;
102
+ tabIndex?: number;
103
+ name?: string;
104
+ children?: ReactNode;
105
+ id?: string;
106
+ autoFocus?: boolean;
107
+ type?: string;
108
+ skipGroup?: boolean;
109
+ required?: boolean;
110
+ defaultChecked?: boolean;
111
+ checked?: boolean;
112
+ };
113
+
87
114
  declare const Button: react.ComponentType<__types_button.ButtonProps>;
88
115
  declare const Checkbox: react.ComponentType<__types.DefaultProps & {
89
116
  disabled?: boolean;
@@ -105,6 +132,7 @@ declare const Checkbox: react.ComponentType<__types.DefaultProps & {
105
132
  defaultChecked?: boolean;
106
133
  checked?: boolean;
107
134
  } & react.RefAttributes<HTMLDivElement>>;
135
+ declare const Switch: react.ComponentType<SwitchProps>;
108
136
  declare const Empty: react.ComponentType<EmptyContentProps>;
109
137
  declare const Upload: react.ComponentType<__types_upload.UploadProps>;
110
138
  declare const DatePicker: react.ComponentType<__types_datepicker.TDatePickerProps>;
@@ -241,4 +269,4 @@ declare const SkeletonButton: react.ComponentType<SkeletonButtonProps>;
241
269
  declare const SkeletonImage: react.ComponentType<SkeletonImageProps>;
242
270
  declare const SkeletonInput: react.ComponentType<SkeletonInputProps>;
243
271
 
244
- export { Button, Checkbox, DatePicker, Empty, Form, FormItem, Input, Option, Radio, RadioButton, RadioGroup, RangePicker, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Tag, Textarea, TimePicker, Upload };
272
+ export { Button, Checkbox, DatePicker, Empty, Form, FormItem, Input, Option, Radio, RadioButton, RadioGroup, RangePicker, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Switch, Tag, Textarea, TimePicker, Upload };
package/dist/index.esm.js CHANGED
@@ -442,8 +442,8 @@ function styleInject(css, ref) {
442
442
  }
443
443
  }
444
444
 
445
- var css_248z$l = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color)}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
446
- styleInject(css_248z$l);
445
+ var css_248z$m = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color)}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
446
+ styleInject(css_248z$m);
447
447
 
448
448
  const ClearIcon = () => /*#__PURE__*/React$1.createElement("svg", {
449
449
  width: "10",
@@ -857,6 +857,7 @@ const prefixClsEmpty = 'xUi-empty';
857
857
  const prefixClsInput = 'xUi-input';
858
858
  const prefixClsSelect = 'xUi-select';
859
859
  const prefixClsCheckbox = 'xUi-checkbox';
860
+ const prefixClsSwitch = 'xUi-switch';
860
861
  const prefixClsRadio = 'xUi-radio';
861
862
  const prefixClsTextArea = 'xUi-textarea';
862
863
  const prefixClsUpload = 'xUi-upload';
@@ -919,8 +920,8 @@ function flattenChildren(children) {
919
920
  return result;
920
921
  }
921
922
 
922
- var css_248z$k = ".xUi-form-item{display:flex;margin-bottom:10px;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{bottom:-6px;color:var(--xui-error-color);font-size:var(--xui-font-size-xs);line-height:16px;position:absolute;right:0;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{margin-bottom:12px!important;width:-webkit-fill-available}.xUi-form-item .xUi-datepicker-container{margin-bottom:10px}.xUi-form-item .xUi-select{margin-bottom:15px}";
923
- styleInject(css_248z$k);
923
+ var css_248z$l = ".xUi-form-item{display:flex;margin-bottom:10px;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{bottom:-6px;color:var(--xui-error-color);font-size:var(--xui-font-size-xs);line-height:16px;position:absolute;right:0;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{margin-bottom:12px!important;width:-webkit-fill-available}.xUi-form-item .xUi-datepicker-container{margin-bottom:10px}.xUi-form-item .xUi-select{margin-bottom:15px}";
924
+ styleInject(css_248z$l);
924
925
 
925
926
  const REF_CLIENT_HEIGHT = 24;
926
927
  const FormItem$1 = ({
@@ -1210,6 +1211,9 @@ const Button$3 = dynamic$1(() => Promise.resolve().then(function () { return But
1210
1211
  const Checkbox$2 = dynamic$1(() => Promise.resolve().then(function () { return Checkbox$1; }), {
1211
1212
  ssr: false
1212
1213
  });
1214
+ const Switch$2 = dynamic$1(() => Promise.resolve().then(function () { return Switch$1; }), {
1215
+ ssr: false
1216
+ });
1213
1217
  const Empty$1 = dynamic$1(() => Promise.resolve().then(function () { return Empty; }), {
1214
1218
  ssr: false
1215
1219
  });
@@ -1271,8 +1275,8 @@ const SkeletonInput$1 = dynamic$1(() => Promise.resolve().then(function () { ret
1271
1275
  ssr: false
1272
1276
  });
1273
1277
 
1274
- var css_248z$j = ".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}";
1275
- styleInject(css_248z$j);
1278
+ var css_248z$k = ".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}";
1279
+ styleInject(css_248z$k);
1276
1280
 
1277
1281
  const ButtonComponent = ({
1278
1282
  type = 'default',
@@ -1353,8 +1357,8 @@ var Button$2 = /*#__PURE__*/Object.freeze({
1353
1357
  default: ButtonComponent
1354
1358
  });
1355
1359
 
1356
- var css_248z$i = ".xUi-checkbox-wrapper{align-items:center;color:var(--xui-main-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);margin:16px 0}.xUi-checkbox{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);display:inline-block;height:14px;position:relative;transition:all .3s;width:14px}.xUi-checkbox.xUi-checkbox-checked{background-color:#f0f5ff;border-color:var(--xui-primary-color)}.xUi-checkbox input{cursor:pointer;inset:0;opacity:0;position:absolute}.xUi-checkbox-inner{border-left:0;border-top:0;border:2px solid var(--xui-background-color);height:6px;left:50%;position:absolute;top:50%;transform:rotate(45deg) scale(0);transition:transform .2s ease-in-out;width:10px}.xUi-checkbox-check{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);display:block;height:100%;position:relative;transition:.1s ease;width:100%}.xUi-checkbox-check:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:8px;left:3px;position:absolute;top:1px;transform:rotate(45deg);width:5px}.xUi-checkbox-disabled,.xUi-checkbox-disabled .xUi-checkbox-check{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color)!important;cursor:not-allowed;opacity:.5}.xUi-checkbox-label{font-size:14px;margin-left:8px;user-select:none}.xUi-checkbox:focus:not(.disabled),.xUi-checkbox:hover:not(.disabled){border-color:var(--xui-primary-color);cursor:pointer}.xUi-checkbox.disabled{cursor:not-allowed;opacity:.5}";
1357
- styleInject(css_248z$i);
1360
+ var css_248z$j = ".xUi-checkbox-wrapper{align-items:center;color:var(--xui-main-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);margin:16px 0}.xUi-checkbox{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);display:inline-block;height:14px;position:relative;transition:all .3s;width:14px}.xUi-checkbox.xUi-checkbox-checked{background-color:#f0f5ff;border-color:var(--xui-primary-color)}.xUi-checkbox input{cursor:pointer;inset:0;opacity:0;position:absolute}.xUi-checkbox-inner{border-left:0;border-top:0;border:2px solid var(--xui-background-color);height:6px;left:50%;position:absolute;top:50%;transform:rotate(45deg) scale(0);transition:transform .2s ease-in-out;width:10px}.xUi-checkbox-check{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);display:block;height:100%;position:relative;transition:.1s ease;width:100%}.xUi-checkbox-check:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:8px;left:3px;position:absolute;top:1px;transform:rotate(45deg);width:5px}.xUi-checkbox-disabled,.xUi-checkbox-disabled .xUi-checkbox-check{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color)!important;cursor:not-allowed;opacity:.5}.xUi-checkbox-label{font-size:14px;margin-left:8px;user-select:none}.xUi-checkbox:focus:not(.disabled),.xUi-checkbox:hover:not(.disabled){border-color:var(--xui-primary-color);cursor:pointer}.xUi-checkbox.disabled{cursor:not-allowed;opacity:.5}";
1361
+ styleInject(css_248z$j);
1358
1362
 
1359
1363
  const Checkbox = /*#__PURE__*/forwardRef(({
1360
1364
  prefixCls = prefixClsCheckbox,
@@ -1437,6 +1441,54 @@ var Checkbox$1 = /*#__PURE__*/Object.freeze({
1437
1441
  default: Checkbox
1438
1442
  });
1439
1443
 
1444
+ var css_248z$i = ".xUi-switch{background-color:var(--xui-color-disabled);border:0;border-radius:100px;box-sizing:border-box;color:#000000d9;cursor:pointer;display:inline-block;font-size:14px;font-variant:tabular-nums;height:22px;list-style:none;margin:0;min-width:44px;padding:0;position:relative;transition:all .2s;user-select:none;vertical-align:middle}.xUi-switch.xUi-switch__disabled{opacity:.5;pointer-events:none}.xUi-switch .xUi-switch__slider{background-color:#fff;border-radius:50%;height:18px;left:2px;position:absolute;top:2px;transition:transform .3s;width:18px}.xUi-switch__checked .xUi-switch__slider{transform:translateX(21px)}.xUi-switch__checked{background-color:var(--xui-primary-color)}";
1445
+ styleInject(css_248z$i);
1446
+
1447
+ const Switch = ({
1448
+ prefixCls = prefixClsSwitch,
1449
+ checked = false,
1450
+ onChange,
1451
+ onClick,
1452
+ disabled = false,
1453
+ className = '',
1454
+ style = {},
1455
+ defaultChecked,
1456
+ value
1457
+ }) => {
1458
+ const isChecked = checked !== undefined ? checked : defaultChecked || value;
1459
+ const [internalChecked, setInternalChecked] = useState(isChecked);
1460
+ const handleClick = e => {
1461
+ e.stopPropagation();
1462
+ if (disabled) {
1463
+ return;
1464
+ }
1465
+ setInternalChecked(!internalChecked);
1466
+ e.target.value = !internalChecked;
1467
+ onClick?.(e);
1468
+ onChange?.(e);
1469
+ };
1470
+ useEffect(() => {
1471
+ if (checked !== undefined) {
1472
+ setInternalChecked(checked);
1473
+ }
1474
+ }, [checked]);
1475
+ return /*#__PURE__*/React$1.createElement("div", {
1476
+ className: `${prefixCls} ${className} ${disabled ? `${prefixCls}__disabled` : ''}`,
1477
+ style: style
1478
+ }, /*#__PURE__*/React$1.createElement("div", {
1479
+ className: `${prefixCls} ${internalChecked ? `${prefixCls}__checked` : ''}`,
1480
+ onClick: handleClick
1481
+ }, /*#__PURE__*/React$1.createElement("div", {
1482
+ className: `${prefixCls}__slider`
1483
+ })));
1484
+ };
1485
+ Switch.displayName = 'Switch';
1486
+
1487
+ var Switch$1 = /*#__PURE__*/Object.freeze({
1488
+ __proto__: null,
1489
+ default: Switch
1490
+ });
1491
+
1440
1492
  var css_248z$h = ".xUi-empty{align-items:center;display:grid;gap:4px;justify-content:center;padding:14px}.xUi-empty-description{color:var(--xui-text-color);font-size:var(--xui-font-size-md);text-align:center}";
1441
1493
  styleInject(css_248z$h);
1442
1494
 
@@ -3814,5 +3866,5 @@ var Skeleton$1 = /*#__PURE__*/Object.freeze({
3814
3866
  default: Skeleton
3815
3867
  });
3816
3868
 
3817
- export { ArrowIcon, Button$3 as Button, CalendarIcon, CheckIcon, Checkbox$2 as Checkbox, ClearIcon, DateDistanceIcon, DatePicker$2 as DatePicker, Empty$1 as Empty, ErrorIcon, Form, FormContext, FormItem, Input$3 as Input, LoadingIcon, Option$2 as Option, Radio$3 as Radio, RadioButton$1 as RadioButton, RadioGroup$1 as RadioGroup, RangePicker$2 as RangePicker, SearchIcon, Select$2 as Select, Skeleton$2 as Skeleton, SkeletonAvatar$1 as SkeletonAvatar, SkeletonButton$1 as SkeletonButton, SkeletonImage$1 as SkeletonImage, SkeletonInput$1 as SkeletonInput, SpinerIcon, StampleIcon, SuccessIcon, Tag$2 as Tag, Textarea$2 as Textarea, TimeIcon, TimePicker$2 as TimePicker, TrashIcon, Upload$2 as Upload, clsx, createArray, flattenChildren, parseValue, useForm, useWatch };
3869
+ export { ArrowIcon, Button$3 as Button, CalendarIcon, CheckIcon, Checkbox$2 as Checkbox, ClearIcon, DateDistanceIcon, DatePicker$2 as DatePicker, Empty$1 as Empty, ErrorIcon, Form, FormContext, FormItem, Input$3 as Input, LoadingIcon, Option$2 as Option, Radio$3 as Radio, RadioButton$1 as RadioButton, RadioGroup$1 as RadioGroup, RangePicker$2 as RangePicker, SearchIcon, Select$2 as Select, Skeleton$2 as Skeleton, SkeletonAvatar$1 as SkeletonAvatar, SkeletonButton$1 as SkeletonButton, SkeletonImage$1 as SkeletonImage, SkeletonInput$1 as SkeletonInput, SpinerIcon, StampleIcon, SuccessIcon, Switch$2 as Switch, Tag$2 as Tag, Textarea$2 as Textarea, TimeIcon, TimePicker$2 as TimePicker, TrashIcon, Upload$2 as Upload, clsx, createArray, flattenChildren, parseValue, useForm, useWatch };
3818
3870
  //# sourceMappingURL=index.esm.js.map