@onesy/ui-react/Switch/Switch.js

UI for React

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@onesy/utils");
const style_react_1 = require("@onesy/style-react");
const Keyframes_1 = __importDefault(require("../Keyframes"));
const IconButton_1 = __importDefault(require("../IconButton"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
    root: {
        position: 'relative',
        display: 'inline-flex',
        cursor: 'pointer',
        transition: theme.methods.transitions.make('box-shadow'),
        '&:focus-visible': {
            boxShadow: `0px 0px 0px 1px ${theme.palette.text.default.primary}`
        }
    },
    input: {
        position: 'absolute',
        inset: '0',
        width: '100%',
        height: '100%',
        opacity: '0',
        cursor: 'inherit',
        zIndex: '1'
    },
    // Color
    color_default: { color: theme.palette.text.default.primary },
    color_themed: { color: theme.palette.text.default.primary },
    color_inverted: { color: theme.palette.background.default.primary },
    color_neutral: { color: theme.palette.color.neutral.main },
    color_primary: { color: theme.palette.color.primary.main },
    color_secondary: { color: theme.palette.color.secondary.main },
    color_tertiary: { color: theme.palette.color.tertiary.main },
    color_quaternary: { color: theme.palette.color.quaternary.main },
    color_info: { color: theme.palette.color.info.main },
    color_success: { color: theme.palette.color.success.main },
    color_warning: { color: theme.palette.color.warning.main },
    color_error: { color: theme.palette.color.error.main },
    // Tonal
    tonal_color_neutral: { color: theme.methods.palette.color.value('neutral', 60) },
    tonal_color_primary: { color: theme.methods.palette.color.value('primary', 60) },
    tonal_color_secondary: { color: theme.methods.palette.color.value('secondary', 60) },
    tonal_color_tertiary: { color: theme.methods.palette.color.value('tertiary', 60) },
    tonal_color_quaternary: { color: theme.methods.palette.color.value('quaternary', 60) },
    tonal_color_info: { color: theme.methods.palette.color.value('info', 60) },
    tonal_color_success: { color: theme.methods.palette.color.value('success', 60) },
    tonal_color_warning: { color: theme.methods.palette.color.value('warning', 60) },
    tonal_color_error: { color: theme.methods.palette.color.value('error', 60) },
    size_small: {
        height: '24px',
        width: '44px',
        borderRadius: `${theme.shape.radius.unit * 1.5}px`
    },
    size_regular: {
        height: '32px',
        width: '52px',
        borderRadius: `${theme.shape.radius.unit * 2}px`
    },
    size_large: {
        height: '40px',
        width: '60px',
        borderRadius: `${theme.shape.radius.unit * 2.5}px`
    },
    background: {
        display: 'inline-flex',
        position: 'absolute',
        inset: '0',
        width: '100%',
        height: '100%',
        borderRadius: 'inherit',
        transition: theme.methods.transitions.make(['opacity', 'background'], { duration: 'sm' })
    },
    border: {
        display: 'inline-flex',
        position: 'absolute',
        inset: '0',
        width: '100%',
        height: '100%',
        border: `2px solid`,
        borderColor: theme.palette.text.default.secondary,
        boxSizing: 'border-box',
        borderRadius: 'inherit',
        transition: theme.methods.transitions.make(['opacity'], { duration: 'sm' })
    },
    // Tonal
    border_tonal_color_neutral: { borderColor: theme.palette.color['neutral'][theme.palette.light ? 40 : 20] },
    border_tonal_color_primary: { borderColor: theme.palette.color['primary'][theme.palette.light ? 40 : 20] },
    border_tonal_color_secondary: { borderColor: theme.palette.color['secondary'][theme.palette.light ? 40 : 20] },
    border_tonal_color_tertiary: { borderColor: theme.palette.color['tertiary'][theme.palette.light ? 40 : 20] },
    border_tonal_color_quaternary: { borderColor: theme.palette.color['quaternary'][theme.palette.light ? 40 : 20] },
    border_tonal_color_info: { borderColor: theme.palette.color['info'][theme.palette.light ? 40 : 20] },
    border_tonal_color_success: { borderColor: theme.palette.color['success'][theme.palette.light ? 40 : 20] },
    border_tonal_color_warning: { borderColor: theme.palette.color['warning'][theme.palette.light ? 40 : 20] },
    border_tonal_color_error: { borderColor: theme.palette.color['error'][theme.palette.light ? 40 : 20] },
    iconButton: {
        position: 'absolute',
        top: '50%'
    },
    icon: {
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '1em',
        height: '1em',
        background: 'currentColor',
        borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.5em)`,
        transition: theme.methods.transitions.make('background')
    },
    disabled: {
        cursor: 'default',
        opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.disabled : '1',
        pointerEvents: 'none'
    }
}), { name: 'onesy-Switch' });
const Icon = (props) => {
    const { size, style, children } = props, other = __rest(props, ["size", "style", "children"]);
    let fontSize = 24;
    if (size === 'very small')
        fontSize = 12;
    else if (size === 'small')
        fontSize = 18;
    else if (size === 'regular')
        fontSize = 24;
    else if (size === 'medium')
        fontSize = 30;
    else if (size === 'large')
        fontSize = 38;
    else if (size === 'very large')
        fontSize = 42;
    else if (size !== undefined)
        fontSize = size;
    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: Object.assign(Object.assign({}, style), { fontSize }) }, other, { children: children && react_1.default.cloneElement(children, { size: fontSize / 1.5 }) })));
};
const Switch = react_1.default.forwardRef((props_, ref) => {
    const theme = (0, style_react_1.useOnesyTheme)();
    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySwitch) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
    const Keyframes = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Keyframes) || Keyframes_1.default; }, [theme]);
    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
    const { tonal: tonal_ = true, color: color_ = 'primary', size = 'regular', inputRef, valueDefault: valueDefault_, checkedDefault: checkedDefault_, value: value_, checked: checked_, onChange, OnIcon, OffIcon, disabled, Component = 'span', className, style, children, 
    // Other
    version: version_, colorUnchecked } = props, other = __rest(props, ["tonal", "color", "size", "inputRef", "valueDefault", "checkedDefault", "value", "checked", "onChange", "OnIcon", "OffIcon", "disabled", "Component", "className", "style", "children", "version", "colorUnchecked"]);
    const { classes } = useStyle();
    const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
    const checked = value_ !== undefined ? value_ : checked_;
    const [value, setValue] = react_1.default.useState((checkedDefault !== undefined ? checkedDefault : checked) || false);
    const refs = {
        value: react_1.default.useRef(undefined),
        input: react_1.default.useRef(undefined),
        animation: react_1.default.useRef(undefined)
    };
    refs.value.current = value;
    let color = color_;
    let tonal = tonal_;
    if (disabled) {
        color = 'neutral';
        tonal = true;
    }
    const styles = {
        root: {},
        border: {},
        background: {},
        iconButton: {}
    };
    react_1.default.useEffect(() => {
        if (checked !== undefined && checked !== refs.value.current) {
            setValue(checked);
            refs.animation.current = true;
        }
    }, [checked]);
    const onUpdate = (event) => {
        if (!disabled && !refs.animation.current) {
            // Inner controlled value
            if (!props.hasOwnProperty('checked')) {
                setValue(event.target.checked);
                refs.animation.current = true;
            }
            if ((0, utils_1.is)('function', onChange))
                onChange(event.target.checked, event);
        }
    };
    let palette;
    if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
        palette = theme.methods.color(color);
        styles.root.color = color;
    }
    const keyframes = {
        checked: [
            { name: 'growStart', timeout: 240 },
            { name: 'waitStart', timeout: 0 },
            { name: 'moveEnd', timeout: 70 },
            { name: 'doneEnd', timeout: 100 }
        ],
        unchecked: [
            { name: 'growEnd', timeout: 240 },
            { name: 'waitEnd', timeout: 0 },
            { name: 'moveStart', timeout: 70 },
            { name: 'doneStart', timeout: 100 }
        ]
    };
    const ltrSign = (item = '') => {
        if (theme.direction === 'ltr')
            return item;
        return !item ? '-' : '';
    };
    const sizes = (version, element) => {
        if (element === 'iconButton') {
            switch (version) {
                case 'unchecked':
                    if (size === 'small')
                        return `translate(${ltrSign('-')}3px, -50%)`;
                    if (size === 'large')
                        return `translate(${ltrSign('-')}5px, -50%)`;
                    return `translate(${ltrSign('-')}4px, -50%)`;
                case 'grow-start':
                    if (size === 'small')
                        return `translate(${ltrSign('-')}3px, -50%)`;
                    if (size === 'large')
                        return `translate(${ltrSign('-')}5px, -50%)`;
                    return `translate(${ltrSign('-')}4px, -50%)`;
                case 'move-end':
                    if (size === 'small')
                        return `translate(${ltrSign()}11px, -50%)`;
                    if (size === 'large')
                        return `translate(${ltrSign()}11px, -50%)`;
                    return `translate(${ltrSign()}11px, -50%)`;
                case 'grow-end':
                    if (size === 'small')
                        return `translate(${ltrSign()}17px, -50%)`;
                    if (size === 'large')
                        return `translate(${ltrSign()}16px, -50%)`;
                    return `translate(${ltrSign()}16px, -50%)`;
                case 'move-start':
                    if (size === 'small')
                        return `translate(${ltrSign()}1px, -50%)`;
                    if (size === 'large')
                        return `translate(${ltrSign()}1px, -50%)`;
                    return `translate(${ltrSign()}1px, -50%)`;
                case 'checked':
                    if (size === 'small')
                        return `translate(${ltrSign()}16px, -50%)`;
                    if (size === 'large')
                        return `translate(${ltrSign()}16px, -50%)`;
                    return `translate(${ltrSign()}16px, -50%)`;
                default:
                    break;
            }
        }
        else {
            switch (version) {
                case 'unchecked':
                    if (OffIcon) {
                        if (size === 'small')
                            return 'scale(1)';
                        if (size === 'large')
                            return 'scale(1)';
                        return 'scale(1)';
                    }
                    if (size === 'small')
                        return 'scale(0.6665)';
                    if (size === 'large')
                        return 'scale(0.6665)';
                    return 'scale(0.6665)';
                case 'grow-start':
                    if (size === 'small')
                        return 'scale(1.116)';
                    if (size === 'large')
                        return 'scale(1.2)';
                    return 'scale(1.1665)';
                case 'move-end':
                    if (size === 'small')
                        return {
                            transform: 'scale(1)',
                            width: 24
                        };
                    if (size === 'large')
                        return {
                            transform: 'scale(1)',
                            width: 41
                        };
                    return {
                        transform: 'scale(1)',
                        width: 33
                    };
                case 'grow-end':
                    if (size === 'small')
                        return 'scale(1.116)';
                    if (size === 'large')
                        return 'scale(1.2)';
                    return 'scale(1.1665)';
                case 'move-start':
                    if (OffIcon) {
                        if (size === 'small')
                            return {
                                transform: 'scale(1)',
                                width: 24
                            };
                        if (size === 'large')
                            return {
                                transform: 'scale(1)',
                                width: 41
                            };
                        return {
                            transform: 'scale(1)',
                            width: 33
                        };
                    }
                    if (size === 'small')
                        return {
                            transform: 'scale(0.6665)',
                            width: 24
                        };
                    if (size === 'large')
                        return {
                            transform: 'scale(0.6665)',
                            width: 41
                        };
                    return {
                        transform: 'scale(0.6665)',
                        width: 33
                    };
                case 'checked':
                    if (size === 'small')
                        return 'scale(1)';
                    if (size === 'large')
                        return 'scale(1)';
                    return 'scale(1)';
                default:
                    break;
            }
        }
    };
    const initial = () => {
        const paletteColor = theme.palette.color[color] || palette || theme.palette.color.neutral;
        const dynamicBackgroundColor = tonal ? paletteColor[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
        return ({
            background: {
                checked: {
                    opacity: 1,
                    background: 'currentColor'
                },
                unchecked: {
                    background: theme.methods.palette.color.value(color, 95, true, paletteColor)
                }
            },
            border: {
                checked: {
                    opacity: 0
                },
                unchecked: {
                    opacity: 1
                }
            },
            iconButton: {
                checked: {
                    transform: sizes('checked', 'iconButton'),
                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor'
                },
                unchecked: {
                    transform: sizes('unchecked', 'iconButton'),
                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20]
                }
            },
            icon: {
                checked: {
                    transform: sizes('checked', 'icon'),
                    background: dynamicBackgroundColor,
                    color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light')
                },
                unchecked: {
                    transform: sizes('unchecked', 'icon'),
                    background: (['default', 'themed', 'inherit'].includes(color) && !theme.palette.light) ? theme.palette.text.default.secondary : (tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary),
                    color: tonal ? paletteColor[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary
                }
            }
        });
    };
    const styleKeyframes = () => {
        const paletteColor = theme.palette.color[color] || palette || theme.palette.color.neutral;
        const dynamicBackgroundColor = tonal ? paletteColor[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
        return {
            background: {
                growEnd: Object.assign({}, initial().background.checked),
                waitEnd: Object.assign({}, initial().background.checked),
                moveStart: Object.assign(Object.assign({}, initial().background.unchecked), { transition: theme.methods.transitions.make(['opacity', 'background'], { duration: 35, delay: 35 }) }),
                doneStart: Object.assign({}, initial().background.unchecked),
                growStart: Object.assign({}, initial().background.unchecked),
                waitStart: Object.assign({}, initial().background.checked),
                moveEnd: Object.assign(Object.assign({}, initial().background.checked), { transition: theme.methods.transitions.make(['opacity', 'background'], { duration: 35, delay: 35 }) }),
                doneEnd: Object.assign({}, initial().background.checked)
            },
            border: {
                growEnd: Object.assign({}, initial().border.checked),
                waitEnd: Object.assign({}, initial().border.checked),
                moveStart: Object.assign(Object.assign({}, initial().border.unchecked), { transition: theme.methods.transitions.make(['opacity'], { duration: 35, delay: 35 }) }),
                doneStart: Object.assign({}, initial().border.unchecked),
                growStart: Object.assign({}, initial().border.unchecked),
                waitStart: Object.assign({}, initial().border.checked),
                moveEnd: Object.assign(Object.assign({}, initial().border.checked), { transition: theme.methods.transitions.make(['opacity'], { duration: 35, delay: 35 }) }),
                doneEnd: Object.assign({}, initial().border.checked)
            },
            iconButton: {
                growStart: {
                    transform: sizes('grow-start', 'iconButton'),
                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
                    transition: theme.methods.transitions.make('transform', { duration: 240, timing_function: 'decelerated' })
                },
                waitStart: {
                    transform: sizes('grow-start', 'iconButton'),
                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20]
                },
                moveEnd: {
                    transform: sizes('move-end', 'iconButton'),
                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
                    transition: `${theme.methods.transitions.make('width', { duration: 70 })}, ${theme.methods.transitions.make('transform', { duration: 70 })}, ${theme.methods.transitions.make('background', { duration: 35, delay: 35 })}`
                },
                doneEnd: Object.assign(Object.assign({}, initial().iconButton.checked), { transition: `${theme.methods.transitions.make('width', { duration: 100 })}, , ${theme.methods.transitions.make('transform', { duration: 100 })}` }),
                growEnd: {
                    transform: sizes('grow-end', 'iconButton'),
                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
                    transition: theme.methods.transitions.make('transform', { duration: 240, timing_function: 'decelerated' })
                },
                waitEnd: {
                    transform: sizes('grow-end', 'iconButton'),
                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor'
                },
                moveStart: {
                    transform: sizes('move-start', 'iconButton'),
                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
                    transition: `${theme.methods.transitions.make('width', { duration: 70 })}, ${theme.methods.transitions.make('transform', { duration: 70 })}, ${theme.methods.transitions.make('background', { duration: 35, delay: 35 })}`
                },
                doneStart: Object.assign(Object.assign({}, initial().iconButton.unchecked), { transition: `${theme.methods.transitions.make('width', { duration: 100 })}, , ${theme.methods.transitions.make('transform', { duration: 100 })}` })
            },
            icon: {
                growStart: {
                    transform: sizes('grow-start', 'icon'),
                    background: (['default', 'themed', 'inherit'].includes(color) && !theme.palette.light) ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
                    color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary,
                    transition: theme.methods.transitions.make('transform', { duration: 240, timing_function: 'decelerated' })
                },
                waitStart: {
                    transform: sizes('grow-start', 'icon'),
                    background: (['default', 'themed', 'inherit'].includes(color) && !theme.palette.light) ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
                    color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary
                },
                moveEnd: Object.assign(Object.assign({}, sizes('move-end', 'icon')), { background: dynamicBackgroundColor, color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'), transition: `${theme.methods.transitions.make('width', { duration: 70 })}, ${theme.methods.transitions.make('transform', { duration: 70 })}, ${theme.methods.transitions.make('background', { duration: 35, delay: 35 })}` }),
                doneEnd: Object.assign(Object.assign({}, initial().icon.checked), { transition: `${theme.methods.transitions.make('width', { duration: 100 })}, , ${theme.methods.transitions.make('transform', { duration: 100 })}` }),
                growEnd: {
                    transform: sizes('grow-end', 'icon'),
                    background: dynamicBackgroundColor,
                    color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
                    transition: theme.methods.transitions.make('transform', { duration: 240, timing_function: 'decelerated' })
                },
                waitEnd: {
                    transform: sizes('grow-end', 'icon'),
                    background: dynamicBackgroundColor,
                    color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
                },
                moveStart: Object.assign(Object.assign({}, sizes('move-start', 'icon')), { background: tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary, color: tonal ? paletteColor[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary, transition: `${theme.methods.transitions.make('width', { duration: 70 })}, ${theme.methods.transitions.make('transform', { duration: 70 })}, ${theme.methods.transitions.make('background', { duration: 35, delay: 35 })}` }),
                doneStart: Object.assign(Object.assign({}, initial().icon.unchecked), { transition: `${theme.methods.transitions.make('width', { duration: 100 })}, , ${theme.methods.transitions.make('transform', { duration: 100 })}` })
            }
        };
    };
    const onKeyDown = (event) => {
        switch (event.key) {
            case 'Enter':
                if (refs.input.current)
                    refs.input.current.click();
                break;
            default:
                break;
        }
    };
    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, role: 'switch', "aria-checked": value, "aria-disabled": disabled, onKeyDown: onKeyDown, className: (0, style_react_1.classNames)([
            (0, utils_2.staticClassName)('Switch', theme) && [
                'onesy-Switch-root',
                `onesy-Switch-size-${size}`,
                value && `onesy-Switch-checked`,
                disabled && `onesy-Switch-disabled`
            ],
            className,
            classes.root,
            classes[`color_${color}`],
            classes[`size_${size}`],
            tonal && classes[`tonal_color_${color}`],
            disabled && classes.disabled
        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: [(0, jsx_runtime_1.jsx)("input", { ref: item => {
                    if (inputRef)
                        inputRef.current = item;
                    refs.input.current = item;
                }, tabIndex: -1, type: 'checkbox', checked: value, onChange: onUpdate, className: (0, style_react_1.classNames)([
                    (0, utils_2.staticClassName)('Switch', theme) && [
                        'onesy-Switch-input'
                    ],
                    classes.input
                ]), disabled: disabled }), (0, jsx_runtime_1.jsx)(Keyframes, Object.assign({ keyframes: keyframes[refs.value.current ? 'checked' : 'unchecked'], update: refs.value.current, appendStatusPost: !refs.value.current ? 'doneStart' : 'doneEnd', append: true }, { children: (status) => {
                    if ((refs.value.current && status === 'doneEnd') ||
                        (!refs.value.current && status === 'doneStart'))
                        refs.animation.current = false;
                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
                                    (0, utils_2.staticClassName)('Switch', theme) && [
                                        'onesy-Switch-background'
                                    ],
                                    classes.background,
                                    disabled && classes.background_disabled
                                ]), style: Object.assign(Object.assign(Object.assign({}, styles.background), (status === 'appended' && initial().background[refs.value.current ? 'checked' : 'unchecked'])), styleKeyframes().background[status]) }), (0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
                                    (0, utils_2.staticClassName)('Switch', theme) && [
                                        'onesy-Switch-border'
                                    ],
                                    classes.border,
                                    classes[`color_${color}`],
                                    tonal && classes[`border_tonal_color_${color}`]
                                ]), style: Object.assign(Object.assign(Object.assign({}, styles.border), (status === 'appended' && initial().border[refs.value.current ? 'checked' : 'unchecked'])), styleKeyframes().border[status]) }), (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tabIndex: '-1', size: size, className: (0, style_react_1.classNames)([
                                    (0, utils_2.staticClassName)('Switch', theme) && [
                                        'onesy-Switch-icon-button'
                                    ],
                                    classes.iconButton
                                ]), style: Object.assign(Object.assign(Object.assign({}, styles.iconButton), (status === 'appended' && initial().iconButton[refs.value.current ? 'checked' : 'unchecked'])), styleKeyframes().iconButton[status]) }, { children: (0, jsx_runtime_1.jsx)(Icon, Object.assign({ className: (0, style_react_1.classNames)([
                                        (0, utils_2.staticClassName)('Switch', theme) && [
                                            'onesy-Switch-icon'
                                        ],
                                        classes.icon
                                    ]), style: Object.assign(Object.assign({}, (status === 'appended' && initial().icon[refs.value.current ? 'checked' : 'unchecked'])), styleKeyframes().icon[status]) }, { children: (((status === 'appended' && refs.value.current) || ['growEnd', 'doneEnd'].includes(status)) && OnIcon) ||
                                        (((status === 'appended' && !refs.value.current) || ['growStart', 'doneStart'].includes(status)) && OffIcon) })) }))] });
                } }))] })));
});
Switch.displayName = 'onesy-Switch';
exports.default = Switch;