@nex-ui/react/dist/cjs/components/switch/Switch.cjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var utils = require('@nex-ui/utils');
var hooks = require('@nex-ui/hooks');
var Context = require('../provider/Context.cjs');
var useDefaultProps = require('../utils/useDefaultProps.cjs');
var useStyles = require('../utils/useStyles.cjs');
var useSlot = require('../utils/useSlot.cjs');
var composeClasses = require('../utils/composeClasses.cjs');
var _switch = require('../../theme/recipes/switch.cjs');
var getUtilityClass = require('../utils/getUtilityClass.cjs');

const useSlotClasses = (ownerState)=>{
    const { prefix } = Context.useNexUI();
    const { size, color, disabled, checked, classes } = ownerState;
    return react.useMemo(()=>{
        const switchRoot = `${prefix}-switch`;
        const slots = {
            root: [
                'root',
                `color-${color}`,
                `size-${size}`,
                disabled && 'disabled',
                checked && 'checked'
            ],
            input: [
                'input'
            ],
            track: [
                'track'
            ],
            thumb: [
                'thumb'
            ],
            startIcon: [
                'start-icon'
            ],
            endIcon: [
                'end-icon'
            ],
            label: [
                'label'
            ]
        };
        return composeClasses.composeClasses(slots, getUtilityClass.getUtilityClass(switchRoot), classes);
    }, [
        checked,
        classes,
        color,
        disabled,
        size,
        prefix
    ]);
};
const useSlotAriaProps = (ownerState)=>{
    const { checked, disabled, children, slotProps, role = 'switch', tabIndex = 0, type = 'checkbox', as = 'input', 'aria-labelledby': labelledBy, 'aria-label': ariaLabel, 'aria-checked': ariaChecked, 'aria-disabled': ariaDisabled } = ownerState;
    const id = react.useId();
    return react.useMemo(()=>{
        const stringChildren = utils.isString(children);
        const labelProps = slotProps?.label ?? {};
        const labelId = labelProps.id ?? (stringChildren ? id : undefined);
        let input = {
            role,
            tabIndex: disabled ? -1 : tabIndex,
            'aria-labelledby': labelledBy ?? labelId,
            'aria-label': ariaLabel ?? (stringChildren ? children : undefined)
        };
        if (as === 'input' || utils.isFunction(as)) {
            input = {
                ...input,
                type,
                disabled,
                checked
            };
        } else {
            input = {
                ...input,
                'aria-checked': ariaChecked ?? checked,
                'aria-disabled': ariaDisabled ?? (disabled || undefined)
            };
        }
        const label = {
            id: labelId
        };
        return {
            input,
            label
        };
    }, [
        ariaChecked,
        ariaDisabled,
        ariaLabel,
        as,
        checked,
        children,
        disabled,
        id,
        labelledBy,
        role,
        slotProps?.label,
        tabIndex,
        type
    ]);
};
const Switch = (inProps)=>{
    const { primaryThemeColor } = Context.useNexUI();
    const props = useDefaultProps.useDefaultProps({
        name: 'Switch',
        props: inProps
    });
    const { sx, children, slotProps, className, startIcon, endIcon, onCheckedChange, thumbIcon: thumbIconProp, checked: checkdeProp, disabled = false, size = 'md', defaultChecked = false, color = primaryThemeColor, ...remainingProps } = props;
    const { focusVisible, focusProps } = hooks.useFocusRing();
    const [checked, setChecked] = hooks.useControlledState(checkdeProp, defaultChecked, onCheckedChange);
    const ownerState = {
        ...props,
        color,
        checked,
        disabled,
        size,
        defaultChecked
    };
    const handleChange = hooks.useEvent((event)=>{
        setChecked(event.target.checked);
    });
    const handleClick = hooks.useEvent((event)=>{
        // Compatible with non interactive elements
        if (event.currentTarget.tagName !== 'INPUT' && event.target === event.currentTarget) {
            setChecked(!checked);
        }
    });
    const handleKeyUp = hooks.useEvent((event)=>{
        // Keyboard accessibility for non interactive elements
        if (focusVisible && event.key === 'Space' && event.target === event.currentTarget && event.currentTarget.tagName !== 'INPUT') {
            event.currentTarget.click();
        }
    });
    const classes = useSlotClasses(ownerState);
    const styles = useStyles.useStyles({
        ownerState,
        name: 'Switch',
        recipe: _switch.switchRecipe
    });
    const slotAriaProps = useSlotAriaProps(ownerState);
    const [SwitchRoot, getSwitchRootProps] = useSlot.useSlot({
        ownerState,
        elementType: 'label',
        externalSlotProps: slotProps?.root,
        style: styles.root,
        classNames: classes.root,
        additionalProps: {
            className,
            sx
        }
    });
    const [SwitchInput, getSwitchInputProps] = useSlot.useSlot({
        ownerState,
        elementType: 'input',
        externalForwardedProps: remainingProps,
        style: styles.input,
        classNames: classes.input,
        a11y: slotAriaProps.input,
        additionalProps: {
            onChange: handleChange,
            onClick: handleClick,
            onKeyUp: handleKeyUp,
            'data-focus-visible': focusVisible || undefined,
            ...focusProps
        }
    });
    const [SwitchTrack, getSwitchTrackProps] = useSlot.useSlot({
        ownerState,
        elementType: 'span',
        externalSlotProps: slotProps?.track,
        style: styles.track,
        classNames: classes.track
    });
    const [SwitchThumb, getSwitchThumbProps] = useSlot.useSlot({
        ownerState,
        elementType: 'span',
        externalSlotProps: slotProps?.thumb,
        style: styles.thumb,
        classNames: classes.thumb
    });
    const [SwitchStartIcon, getSwitchStartIconProps] = useSlot.useSlot({
        ownerState,
        elementType: 'span',
        externalSlotProps: slotProps?.startIcon,
        style: styles.startIcon,
        classNames: classes.startIcon
    });
    const [SwitchEndIcon, getSwitchEndIconProps] = useSlot.useSlot({
        ownerState,
        elementType: 'span',
        externalSlotProps: slotProps?.endIcon,
        style: styles.endIcon,
        classNames: classes.endIcon
    });
    const [SwitchLabel, getSwitchLabelProps] = useSlot.useSlot({
        ownerState,
        elementType: 'span',
        externalSlotProps: slotProps?.label,
        style: styles.label,
        classNames: classes.label,
        a11y: slotAriaProps.label
    });
    const thumbIcon = utils.isFunction(thumbIconProp) ? thumbIconProp(ownerState) : thumbIconProp;
    return /*#__PURE__*/ jsxRuntime.jsxs(SwitchRoot, {
        ...getSwitchRootProps(),
        children: [
            /*#__PURE__*/ jsxRuntime.jsx(SwitchInput, {
                ...getSwitchInputProps()
            }),
            /*#__PURE__*/ jsxRuntime.jsxs(SwitchTrack, {
                ...getSwitchTrackProps(),
                children: [
                    startIcon && /*#__PURE__*/ jsxRuntime.jsx(SwitchStartIcon, {
                        ...getSwitchStartIconProps(),
                        children: startIcon
                    }),
                    /*#__PURE__*/ jsxRuntime.jsx(SwitchThumb, {
                        ...getSwitchThumbProps(),
                        children: thumbIcon
                    }),
                    endIcon && /*#__PURE__*/ jsxRuntime.jsx(SwitchEndIcon, {
                        ...getSwitchEndIconProps(),
                        children: endIcon
                    })
                ]
            }),
            children && /*#__PURE__*/ jsxRuntime.jsx(SwitchLabel, {
                ...getSwitchLabelProps(),
                children: children
            })
        ]
    });
};
Switch.displayName = 'Switch';

exports.Switch = Switch;