@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 styled = require('@nex-ui/styled');
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 useSlotProps = require('../utils/useSlotProps.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 switchRoot = `${prefix}-switch`;
    const { size, color, disabled, checked, classes } = ownerState;
    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'
        ]
    };
    const composedClasses = composeClasses.composeClasses(slots, getUtilityClass.getUtilityClass(switchRoot), classes);
    return composedClasses;
};
const useSlotAriaProps = (ownerState)=>{
    const { checked, disabled, as, tabIndex, type, children } = ownerState;
    const childrenString = utils.isString(children);
    const id = react.useId();
    let input = {
        checked,
        disabled,
        type,
        tabIndex: disabled ? -1 : tabIndex,
        'aria-labelledby': childrenString ? id : undefined,
        'aria-label': childrenString ? children : undefined
    };
    if (as === 'input') {
        input = {
            ...input,
            role: 'switch'
        };
    } else {
        input = {
            ...input,
            role: 'switch',
            'aria-checked': checked,
            'aria-disabled': disabled || undefined
        };
    }
    const label = {
        id: childrenString ? id : undefined
    };
    return {
        input,
        label
    };
};
const Switch = (inProps)=>{
    const { primaryThemeColor } = Context.useNexUI();
    const inputRef = react.useRef(null);
    const props = useDefaultProps.useDefaultProps({
        name: 'Switch',
        props: inProps
    });
    const { sx, ref, children, slotProps, className, startIcon, endIcon, onCheckedChange, thumbIcon: thumbIconProp, checked: checkdeProp, disabled = false, size = 'md', type = 'checkbox', tabIndex = 0, as = 'input', defaultChecked = false, color = primaryThemeColor, ...remainingProps } = props;
    const [focusVisible] = hooks.useFocusVisible({
        ref: inputRef
    });
    const [checked, setChecked] = hooks.useControlledState(checkdeProp, defaultChecked, onCheckedChange);
    const ownerState = {
        ...props,
        as,
        color,
        checked,
        disabled,
        size,
        type,
        tabIndex,
        defaultChecked
    };
    const handleChange = hooks.useEvent((e)=>{
        setChecked(e.target.checked);
    });
    const handleClick = hooks.useEvent(()=>{
        // Compatible with non interactive elements
        if (utils.isString(as) && as !== 'input') {
            setChecked(!checked);
        }
    });
    const handleKeyUp = hooks.useEvent((event)=>{
        // Keyboard accessibility for non interactive elements
        if (focusVisible && as !== 'input' && event.code === 'Space') {
            event.currentTarget.click();
        }
    });
    const classes = useSlotClasses(ownerState);
    const styles = useStyles.useStyles({
        name: 'Switch',
        ownerState,
        recipe: _switch.switchRecipe
    });
    const slotAriaProps = useSlotAriaProps(ownerState);
    const mergedRefs = utils.mergeRefs(ref, inputRef);
    const rootProps = useSlotProps.useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.root,
        externalForwardedProps: {
            className,
            sx
        },
        sx: styles.root,
        classNames: classes.root
    });
    const inputProps = useSlotProps.useSlotProps({
        ownerState,
        externalForwardedProps: remainingProps,
        sx: styles.input,
        classNames: classes.input,
        additionalProps: {
            as,
            onChange: handleChange,
            onClick: handleClick,
            onKeyUp: handleKeyUp,
            ref: mergedRefs,
            ...slotAriaProps.input
        }
    });
    const trackProps = useSlotProps.useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.track,
        sx: styles.track,
        classNames: classes.track
    });
    const thumbProps = useSlotProps.useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.thumb,
        sx: styles.thumb,
        classNames: classes.thumb
    });
    const startIconProps = useSlotProps.useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.startIcon,
        sx: styles.startIcon,
        classNames: classes.startIcon
    });
    const endIconProps = useSlotProps.useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.endIcon,
        sx: styles.endIcon,
        classNames: classes.endIcon
    });
    const labelProps = useSlotProps.useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.label,
        sx: styles.label,
        classNames: classes.label,
        additionalProps: slotAriaProps.label
    });
    const thumbIcon = utils.isFunction(thumbIconProp) ? thumbIconProp(ownerState) : thumbIconProp;
    return /*#__PURE__*/ jsxRuntime.jsxs(styled.nex.label, {
        ...rootProps,
        children: [
            /*#__PURE__*/ jsxRuntime.jsx(styled.nex.input, {
                ...inputProps
            }),
            /*#__PURE__*/ jsxRuntime.jsxs(styled.nex.span, {
                ...trackProps,
                children: [
                    startIcon && /*#__PURE__*/ jsxRuntime.jsx(styled.nex.span, {
                        ...startIconProps,
                        children: startIcon
                    }),
                    /*#__PURE__*/ jsxRuntime.jsx(styled.nex.span, {
                        ...thumbProps,
                        children: thumbIcon
                    }),
                    endIcon && /*#__PURE__*/ jsxRuntime.jsx(styled.nex.span, {
                        ...endIconProps,
                        children: endIcon
                    })
                ]
            }),
            children && /*#__PURE__*/ jsxRuntime.jsx(styled.nex.span, {
                ...labelProps,
                children: children
            })
        ]
    });
};
Switch.displayName = 'Switch';

exports.Switch = Switch;