@type-dom/ui 0.1.0 → 0.1.1

package/src/components/form/td-switch/td-switch.class.js

@@ -3,250 +3,274 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSwitch = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../styles/var");
+const signals_1 = require("@type-dom/signals");
+const svgs_1 = require("@type-dom/svgs");
 const event_1 = require("../../../constants/event");
-const td_switch_core_1 = require("./widget/td-switch-core");
-const td_switch_left_1 = require("./widget/td-switch-left");
-const td_switch_right_1 = require("./widget/td-switch-right");
-const td_switch_style_1 = require("./td-switch.style");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const use_form_common_props_1 = require("../td-form/hooks/use-form-common-props");
+const use_form_item_1 = require("../td-form/hooks/use-form-item");
+const td_switch_const_1 = require("./td-switch.const");
+require("./style/index");
 class TdSwitch extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         super();
         this.className = 'TdSwitch';
-        this.style.addObj({
-            display: 'inline-flex',
-            alignItems: 'center',
-            position: 'relative',
-            verticalAlign: 'middle',
-            fontSize: td_switch_style_1.$switchFontSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
-            lineHeight: td_switch_style_1.$switchCoreHeight[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
-            height: td_switch_style_1.$switchHeight[(params === null || params === void 0 ? void 0 : params.size) || 'default']
-        });
-        this.isControlled = (params === null || params === void 0 ? void 0 : params.modelValue) !== false;
-        this.modelValue = (_a = params === null || params === void 0 ? void 0 : params.modelValue) !== null && _a !== void 0 ? _a : false;
-        this.activeValue = (_b = params === null || params === void 0 ? void 0 : params.activeValue) !== null && _b !== void 0 ? _b : true;
-        this.inactiveValue = (_c = params === null || params === void 0 ? void 0 : params.inactiveValue) !== null && _c !== void 0 ? _c : false;
-        if (![params === null || params === void 0 ? void 0 : params.activeValue, params === null || params === void 0 ? void 0 : params.inactiveValue].includes(this.actualValue)) {
-            // emit(UPDATE_MODEL_EVENT, params?.inactiveValue)
-            (_e = (_d = params === null || params === void 0 ? void 0 : params.emits) === null || _d === void 0 ? void 0 : _d[event_1.UPDATE_MODEL_EVENT]) === null || _e === void 0 ? void 0 : _e.call(_d, params === null || params === void 0 ? void 0 : params.inactiveValue);
-            // emit(CHANGE_EVENT, params?.inactiveValue)
-            (_g = (_f = params === null || params === void 0 ? void 0 : params.emits) === null || _f === void 0 ? void 0 : _f[event_1.CHANGE_EVENT]) === null || _g === void 0 ? void 0 : _g.call(_f, params === null || params === void 0 ? void 0 : params.inactiveValue);
-            // emit(INPUT_EVENT, params?.inactiveValue)
-            (_j = (_h = params === null || params === void 0 ? void 0 : params.emits) === null || _h === void 0 ? void 0 : _h[event_1.INPUT_EVENT]) === null || _j === void 0 ? void 0 : _j.call(_h, params === null || params === void 0 ? void 0 : params.inactiveValue);
-        }
-        this.input = new framework_1.Input({
-            attrObj: {
-                type: 'checkbox',
-                role: 'switch'
-            },
-            styleObj: {
-                display: 'none'
-            }
-        });
-        this.addChild(this.input);
-        if (!(params === null || params === void 0 ? void 0 : params.inlinePrompt) &&
-            ((params === null || params === void 0 ? void 0 : params.inactiveIcon) || (params === null || params === void 0 ? void 0 : params.inactiveText))) {
-            this.left = new td_switch_left_1.TdSwitchLeft(params);
-            this.addChild(this.left);
-        }
-        this.core = new td_switch_core_1.TdSwitchCore(Object.assign({}, params, {
-            modelValue: this.modelValue,
-            activeValue: this.activeValue,
-            inactiveValue: this.inactiveValue
-        }));
-        this.addChild(this.core);
-        if (!(params === null || params === void 0 ? void 0 : params.inlinePrompt) && ((params === null || params === void 0 ? void 0 : params.activeIcon) || (params === null || params === void 0 ? void 0 : params.activeText))) {
-            console.log('td-switch right .');
-            this.right = new td_switch_right_1.TdSwitchRight(params);
-            this.addChild(this.right);
-        }
+        this.attr.addName('td-switch');
+        this.addEmits(td_switch_const_1.switchEmits);
+        this.assignProps(td_switch_const_1.switchProps);
         this.props = this.useParams(params);
     }
-    get actualValue() {
-        return this.isControlled ? this.props.modelValue : false;
-    }
-    get checked() {
-        return this.actualValue === this.props.activeValue;
-    }
-    mounted() {
-        const props = this.props;
-        this.setChecked(this.modelValue === this.activeValue);
-        if (props === null || props === void 0 ? void 0 : props.disabled) {
-            this.setDisabled(props.disabled);
-        }
-        if (props.loading) {
-            this.setLoading(props.loading);
-        }
-    }
     setup() {
-        this.addEvents({
-            click: (evt) => {
-                // changeValue
-                evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                this.switchValue();
-            }
-        });
-    }
-    handleChange() {
-        console.log('handleChange . ');
         const props = this.props;
-        const checked = this.modelValue === this.activeValue;
-        // this.modelValue = !this.modelValue;
-        this.modelValue = checked ? this.inactiveValue : this.activeValue;
-        const val = checked ? this.inactiveValue : this.activeValue;
-        this.emit(event_1.UPDATE_MODEL_EVENT, val);
-        // this.props.emits?.[UPDATE_MODEL_EVENT]?.(val);
-        this.emit(event_1.CHANGE_EVENT, val);
-        // this.props.emits?.[CHANGE_EVENT]?.(val);
-        this.emit(event_1.INPUT_EVENT, val);
-        // this.props.emits?.[INPUT_EVENT]?.(val);
-        (0, framework_1.nextTick)(() => {
-            this.input.dom.checked = !checked;
-            console.log('handleChange . this.input.dom.checked is ', checked);
-            // this.input.setValue(val);
-            this.setChecked(!checked);
+        const COMPONENT_NAME = 'TdSwitch';
+        const emit = this.emit;
+        const { formItem } = (0, use_form_item_1.useFormItem)();
+        const switchSize = (0, use_form_common_props_1.useFormSize)();
+        const ns = (0, use_namespace_1.useNamespace)('switch');
+        const { inputId } = (0, use_form_item_1.useFormItemInputId)(props, {
+            formItemContext: formItem,
         });
-    }
-    setDisabled(disabled) {
-        var _a, _b;
-        if (disabled) {
-            this.style.setObj({
-                opacity: 0.6
-            });
-            this.input.attr.setObj({
-                disabled: true,
-                ariaDisabled: true
-            });
-            (_a = this.left) === null || _a === void 0 ? void 0 : _a.style.setObj({
-                cursor: 'not-allowed'
-            });
-            this.core.style.setObj({
-                cursor: 'not-allowed'
-            });
-        }
-        else {
-            this.style.setObj({
-                opacity: 1
-            });
-            this.input.attr.setObj({
-                disabled: false,
-                ariaDisabled: false
-            });
-            (_b = this.left) === null || _b === void 0 ? void 0 : _b.style.setObj({
-                cursor: 'auto'
-            });
-            this.core.style.setObj({
-                cursor: 'auto'
-            });
+        const switchDisabled = (0, use_form_common_props_1.useFormDisabled)((0, signals_1.computed)(() => (0, signals_1.unref)(props.loading)));
+        const isControlled = (0, signals_1.signal)(props.modelValue !== false);
+        const input = (0, signals_1.signal)();
+        const core = (0, signals_1.signal)();
+        const switchKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.m(switchSize.get()),
+            ns.is('disabled', switchDisabled.get()),
+            ns.is('checked', checked.get()),
+        ]);
+        const labelLeftKls = (0, signals_1.computed)(() => [
+            ns.e('label'),
+            ns.em('label', 'left'),
+            ns.is('active', !checked.get()),
+        ]);
+        const labelRightKls = (0, signals_1.computed)(() => [
+            ns.e('label'),
+            ns.em('label', 'right'),
+            ns.is('active', checked.get()),
+        ]);
+        const coreStyle = (0, signals_1.computed)(() => ({
+            width: (0, utils_1.addUnit)(props.width),
+            backgroundColor: checked.get()
+                ? props.switchOnColor
+                : props.switchOffColor,
+        }));
+        (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
+            isControlled.set(true);
+        });
+        const actualValue = (0, signals_1.computed)(() => {
+            var _a;
+            return isControlled.get() ? (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get() : false;
+        });
+        const checked = (0, signals_1.computed)(() => actualValue.get() === props.activeValue);
+        if (![props.activeValue, props.inactiveValue].includes(actualValue.get())) {
+            emit(event_1.UPDATE_MODEL_EVENT, props.inactiveValue);
+            emit(event_1.CHANGE_EVENT, props.inactiveValue);
+            emit(event_1.INPUT_EVENT, props.inactiveValue);
         }
-    }
-    // setStyleObj 应该在渲染后执行。
-    setChecked(checked) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (checked) {
-            this.core.style.setObj({
-                backgroundColor: (_a = this.props.switchOnColor) !== null && _a !== void 0 ? _a : td_switch_style_1.$switchOnColor
-            });
-            this.core.action.style.setObj({
-                color: td_switch_style_1.$switchOnColor,
-                // left: calc(100% - #{map.get($switch-button-size, 'default') + 1px});
-                left: 'calc(100% - ' +
-                    td_switch_style_1.$switchButtonSize[this.props.size || 'default'] +
-                    ' - 1px)'
-            });
-            if (this.right) {
-                this.right.style.setObj({
-                    color: var_1.$colors.primary.base
-                });
-            }
-            if (this.left) {
-                this.left.style.setObj({
-                    color: var_1.$colors.default.base
-                });
-            }
-            if (this.props.inlinePrompt) {
-                this.core.setInnerChecked(true);
+        (0, signals_1.watch)(checked, (val) => {
+            var _a;
+            if (input.get()) {
+                input.get().checked = val;
             }
-            if (this.props.activeActionIcon) {
-                (_b = this.core.actionIcon) === null || _b === void 0 ? void 0 : _b.replaceSvg(this.props.activeActionIcon);
+            if (props.validateEvent) {
+                (_a = formItem === null || formItem === void 0 ? void 0 : formItem.validate) === null || _a === void 0 ? void 0 : _a.call(formItem, 'change').catch((err) => (0, utils_1.debugWarn)(err));
             }
-            else if (this.props.activeActionText) {
-                (_d = (_c = this.core.actionSpan) === null || _c === void 0 ? void 0 : _c.textNode) === null || _d === void 0 ? void 0 : _d.setText(this.props.activeActionText);
-            }
-        }
-        else {
-            this.core.style.setObj({
-                backgroundColor: (_e = this.props.switchOffColor) !== null && _e !== void 0 ? _e : td_switch_style_1.$switchOffColor
-            });
-            this.core.action.style.setObj({
-                left: '1px',
-                color: td_switch_style_1.$switchOffColor
+        });
+        const handleChange = () => {
+            const val = checked.get() ? props.inactiveValue : props.activeValue;
+            emit(event_1.UPDATE_MODEL_EVENT, val);
+            emit(event_1.CHANGE_EVENT, val);
+            emit(event_1.INPUT_EVENT, val);
+            (0, framework_1.nextTick)(() => {
+                input.get().checked = checked.get();
             });
-            if (this.left) {
-                this.left.style.setObj({
-                    color: var_1.$colors.primary.base
-                });
-            }
-            if (this.right) {
-                this.right.style.setObj({
-                    color: var_1.$colors.default.base
-                });
+        };
+        const switchValue = () => {
+            if (switchDisabled.get())
+                return;
+            const { beforeChange } = props;
+            if (!beforeChange) {
+                handleChange();
+                return;
             }
-            if (this.props.inlinePrompt) {
-                this.core.setInnerChecked(false);
+            const shouldChange = beforeChange();
+            const isPromiseOrBool = [
+                (0, utils_1.isPromise)(shouldChange),
+                (0, utils_1.isBoolean)(shouldChange),
+            ].includes(true);
+            if (!isPromiseOrBool) {
+                (0, utils_1.throwError)(COMPONENT_NAME, 'beforeChange must return type `Promise<boolean>` or `boolean`');
             }
-            if (this.props.inactiveActionIcon) {
-                (_f = this.core.actionIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.props.inactiveActionIcon);
+            if ((0, utils_1.isPromise)(shouldChange)) {
+                shouldChange
+                    .then((result) => {
+                    if (result) {
+                        handleChange();
+                    }
+                })
+                    .catch((e) => {
+                    (0, utils_1.debugWarn)(COMPONENT_NAME, `some error occurred: ${e}`);
+                });
             }
-            else if (this.props.inactiveActionText) {
-                (_h = (_g = this.core.actionSpan) === null || _g === void 0 ? void 0 : _g.textNode) === null || _h === void 0 ? void 0 : _h.setText(this.props.inactiveActionText);
+            else if (shouldChange) {
+                handleChange();
             }
-        }
-    }
-    setLoading(loading) {
-        if (loading) {
-            this.setDisabled(true);
-        }
-    }
-    switchValue() {
-        console.log('switchValue . ');
-        const props = this.props;
-        if ((props === null || props === void 0 ? void 0 : props.loading) || (props === null || props === void 0 ? void 0 : props.disabled)) {
-            return;
-        }
-        const beforeChange = props === null || props === void 0 ? void 0 : props.beforeChange;
-        if (!beforeChange) {
-            this.handleChange();
-            return;
-        }
-        const shouldChange = beforeChange();
-        const isPromiseOrBool = [
-            (0, utils_1.isPromise)(shouldChange),
-            (0, utils_1.isBoolean)(shouldChange)
-        ].includes(true);
-        if (!isPromiseOrBool) {
-            // throwError(
-            //   COMPONENT_NAME,
-            //   'beforeChange must return type `Promise<boolean>` or `boolean`'
-            // )
-            console.error('beforeChange must return type `Promise<boolean>` or `boolean`');
-        }
-        if ((0, utils_1.isPromise)(shouldChange)) {
-            shouldChange
-                .then((result) => {
-                if (result) {
-                    this.handleChange();
-                }
+        };
+        const focus = () => {
+            var _a, _b;
+            (_b = (_a = input.get()) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        (0, framework_1.onMounted)(() => {
+            input.get().checked = checked.get();
+        });
+        (0, framework_1.defineExpose)({
+            /**
+             *  @description manual focus to the switch component
+             **/
+            focus,
+            /**
+             * @description whether Switch is checked
+             */
+            checked,
+        });
+        this.attr.addClass(switchKls);
+        this.addEvents({
+            click: (evt) => {
+                switchValue();
+                evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+            },
+        });
+        this.addChildren(new framework_1.Input({
+            refDom: input,
+            attrObj: {
+                id: inputId.get(),
+                class: ns.e('input'),
+                type: 'checkbox',
+                role: 'switch',
+                ariaChecked: checked,
+                ariaDisabled: switchDisabled,
+                ariaLabel: props.ariaLabel,
+                // name: name,
+                trueValue: props.activeValue,
+                falseValue: props.inactiveValue,
+                disabled: switchDisabled,
+                tabindex: props.tabindex,
+            },
+            events: {
+                change: handleChange,
+                keydown: (evt) => {
+                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
+                        switchValue();
+                    }
+                },
+            },
+        }), !props.inlinePrompt && (props.inactiveIcon || props.inactiveText)
+            ? new framework_1.Span({
+                class: labelLeftKls,
+                slot: [
+                    props.inactiveIcon
+                        ? new td_icon_class_1.TdIcon({
+                            slot: props.inactiveIcon,
+                        })
+                        : undefined,
+                    !props.inactiveIcon && props.inactiveText
+                        ? new framework_1.Span({
+                            attrObj: {
+                                ariaHidden: checked,
+                            },
+                            slot: props.inactiveText,
+                        })
+                        : undefined,
+                ],
             })
-                .catch((e) => {
-                // debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)
-                console.error(`some error occurred: ${e}`);
-            });
-        }
-        else if (shouldChange) {
-            this.handleChange();
-        }
+            : undefined, new framework_1.Span({
+            refDom: core,
+            class: ns.e('core'),
+            styleObj: coreStyle,
+            slot: [
+                props.inlinePrompt
+                    ? new framework_1.Div({
+                        class: ns.e('inner'),
+                        slot: props.activeIcon || props.inactiveIcon
+                            ? new td_icon_class_1.TdIcon({
+                                class: ns.is('icon'),
+                                slot: (0, signals_1.computed)(() => checked.get() ? props.activeIcon : props.inactiveIcon),
+                            })
+                            : props.activeText || props.inactiveText
+                                ? new framework_1.Span({
+                                    class: ns.is('text'),
+                                    // vIf: props.activeText || props.inactiveText,
+                                    attrObj: {
+                                        ariaHidden: !checked.get(),
+                                    },
+                                    slot: (0, signals_1.computed)(() => checked.get() ? props.activeText : props.inactiveText),
+                                })
+                                : undefined,
+                    })
+                    : undefined,
+                new framework_1.Div({
+                    class: ns.e('action'),
+                    slot: (0, signals_1.computed)(() => {
+                        var _a, _b;
+                        if (props.loading) {
+                            return new td_icon_class_1.TdIcon({
+                                class: ns.is('loading'),
+                                slot: new svgs_1.ElLoadingSvg(),
+                            });
+                        }
+                        else if (checked.get()) {
+                            if ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.activeAction) {
+                                return props.slots.activeAction;
+                            }
+                            else {
+                                if (props.activeActionIcon) {
+                                    return new td_icon_class_1.TdIcon({
+                                        slot: props.activeActionIcon,
+                                    });
+                                }
+                            }
+                        }
+                        else if (!checked.get()) {
+                            if ((_b = props.slots) === null || _b === void 0 ? void 0 : _b.inactiveAction) {
+                                return props.slots.inactiveAction;
+                            }
+                            else {
+                                if (props.inactiveActionIcon) {
+                                    return new td_icon_class_1.TdIcon({
+                                        slot: props.inactiveActionIcon,
+                                    });
+                                }
+                            }
+                        }
+                        return undefined;
+                    }),
+                }),
+            ],
+        }), !props.inlinePrompt && (props.activeIcon || props.activeText)
+            ? new framework_1.Span({
+                class: labelRightKls,
+                slot: (() => {
+                    const slot = [];
+                    if (props.activeIcon) {
+                        slot.push(new td_icon_class_1.TdIcon({
+                            slot: props.activeIcon,
+                        }));
+                    }
+                    if (!props.activeIcon && props.activeText) {
+                        slot.push(new framework_1.Span({
+                            attrObj: {
+                                ariaHidden: !checked.get(),
+                            },
+                            slot: props.activeText,
+                        }));
+                    }
+                    return slot;
+                })(),
+            })
+            : undefined);
     }
 }
 exports.TdSwitch = TdSwitch;

package/src/components/form/td-switch/td-switch.const.d.ts

@@ -0,0 +1,10 @@
+import { InjectionKey } from '@type-dom/framework';
+import { SelectContext } from '../td-select/td-select.interface';
+import { SwitchProps } from './td-switch.interface';
+export declare const switchProps: SwitchProps;
+export declare const switchEmits: {
+    "update:modelValue": (val: boolean | string | number) => boolean;
+    change: (val: boolean | string | number) => boolean;
+    input: (val: boolean | string | number) => boolean;
+};
+export declare const switchKey: InjectionKey<SelectContext>;

package/src/components/form/td-switch/td-switch.const.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switchKey = exports.switchEmits = exports.switchProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.switchProps = {
+    modelValue: false,
+    width: '',
+    activeText: '',
+    inactiveText: '',
+    activeValue: true,
+    inactiveValue: false,
+    name: '',
+    validateEvent: true,
+};
+// 这些只是验证器，与双向绑定没有任何关系的。
+exports.switchEmits = {
+    [event_1.UPDATE_MODEL_EVENT]: (val) => {
+        console.log('switch emit update:modelValue . ');
+        return (0, utils_1.isBoolean)(val) || (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val);
+    },
+    [event_1.CHANGE_EVENT]: (val) => (0, utils_1.isBoolean)(val) || (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val),
+    [event_1.INPUT_EVENT]: (val) => (0, utils_1.isBoolean)(val) || (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val),
+};
+exports.switchKey = Symbol('TdSwitch');

package/src/components/form/td-switch/td-switch.interface.d.ts

@@ -1,14 +1,15 @@
-import { ITypeConfig, ITypeDiv, TypeSvgSvg } from '@type-dom/framework';
-import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from '../../../constants/event';
+import { ITypeDiv, TypeDivProps, TypeSvgSvg } from '@type-dom/framework';
+import { MaybeRef, Signal } from '@type-dom/signals';
 export interface ITdSwitch extends ITypeDiv {
     className: 'TdSwitch';
 }
-export interface ITdSwitchConfig extends ITypeConfig {
+export interface SwitchProps extends TypeDivProps {
     /**
      * @description binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type
      * default: false
      */
     modelValue?: boolean | number | string;
+    vModel?: Signal<boolean | number | string>;
     /**
      * @description whether Switch is disabled
      * default false
@@ -18,7 +19,7 @@ export interface ITdSwitchConfig extends ITypeConfig {
      * @description whether Switch is in loading state
      * default false
      */
-    loading?: boolean;
+    loading?: MaybeRef<boolean>;
     /**
      * @description size of Switch
      */
@@ -77,6 +78,7 @@ export interface ITdSwitchConfig extends ITypeConfig {
     /**
      * @description before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching
      */
+    beforeChange?: () => Promise<boolean> | boolean;
     /**
      * @description id for input
      */
@@ -89,14 +91,11 @@ export interface ITdSwitchConfig extends ITypeConfig {
      * @description native input aria-label
      */
     label?: string;
-    emits?: {
-        [UPDATE_MODEL_EVENT]?: (val?: boolean | string | number) => void;
-        [CHANGE_EVENT]?: (val?: boolean | string | number) => void;
-        [INPUT_EVENT]?: (val?: boolean | string | number) => void;
-    };
     switchOnColor?: string;
     switchOffColor?: string;
     activeActionText?: string;
     inactiveActionText?: string;
-    beforeChange?: () => boolean;
+}
+export interface SwitchContext {
+    checked: MaybeRef<boolean>;
 }

package/src/components/form/td-switch/td-switch.interface.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const event_1 = require("../../../constants/event");

package/src/components/form/td-switch/td-switch.style.d.ts

@@ -1,3 +1,4 @@
+import { IStyle } from '@type-dom/css-type';
 export declare const $switchOnColor: string;
 export declare const $switchOffColor: string;
 export declare const $switchBorderColor: string;
@@ -36,6 +37,18 @@ export declare const $switchContentPadding: {
     default: string;
     small: string;
 };
+export declare const $switch: {
+    onColor: string;
+    offColor: {
+        base: string;
+        light: string;
+        lighter: string;
+        extraLight: string;
+        dark: string;
+        darker: string;
+    };
+};
+export declare const $switchStyle: IStyle;
 export declare const $switchLabel: {
     transition: string;
     display: string;
@@ -44,3 +57,9 @@ export declare const $switchLabel: {
     verticalAlign: string;
     color: string;
 };
+export declare const $switchInputStyle: IStyle;
+export declare const $switchCoreStyle: IStyle;
+export declare const $switchDisabledStyle: IStyle;
+export declare const $disabledStyle: IStyle;
+export declare const $switchCoreInnerStyle: IStyle;
+export declare const $switchCoreActionStyle: IStyle;