@nex-ui/react/dist/esm/components/switch/Switch.mjs

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

"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useId } from 'react';
import { nex } from '@nex-ui/styled';
import { isString, mergeRefs, isFunction } from '@nex-ui/utils';
import { useFocusVisible, useControlledState, useEvent } from '@nex-ui/hooks';
import { useNexUI } from '../provider/Context.mjs';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlotProps } from '../utils/useSlotProps.mjs';
import { composeClasses } from '../utils/composeClasses.mjs';
import { switchRecipe } from '../../theme/recipes/switch.mjs';
import { getUtilityClass } from '../utils/getUtilityClass.mjs';

const useSlotClasses = (ownerState)=>{
    const { prefix } = 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(slots, getUtilityClass(switchRoot), classes);
    return composedClasses;
};
const useSlotAriaProps = (ownerState)=>{
    const { checked, disabled, as, tabIndex, type, children } = ownerState;
    const childrenString = isString(children);
    const id = 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 } = useNexUI();
    const inputRef = useRef(null);
    const props = 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] = useFocusVisible({
        ref: inputRef
    });
    const [checked, setChecked] = useControlledState(checkdeProp, defaultChecked, onCheckedChange);
    const ownerState = {
        ...props,
        as,
        color,
        checked,
        disabled,
        size,
        type,
        tabIndex,
        defaultChecked
    };
    const handleChange = useEvent((e)=>{
        setChecked(e.target.checked);
    });
    const handleClick = useEvent(()=>{
        // Compatible with non interactive elements
        if (isString(as) && as !== 'input') {
            setChecked(!checked);
        }
    });
    const handleKeyUp = 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({
        name: 'Switch',
        ownerState,
        recipe: switchRecipe
    });
    const slotAriaProps = useSlotAriaProps(ownerState);
    const mergedRefs = mergeRefs(ref, inputRef);
    const rootProps = useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.root,
        externalForwardedProps: {
            className,
            sx
        },
        sx: styles.root,
        classNames: classes.root
    });
    const inputProps = 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({
        ownerState,
        externalSlotProps: slotProps?.track,
        sx: styles.track,
        classNames: classes.track
    });
    const thumbProps = useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.thumb,
        sx: styles.thumb,
        classNames: classes.thumb
    });
    const startIconProps = useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.startIcon,
        sx: styles.startIcon,
        classNames: classes.startIcon
    });
    const endIconProps = useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.endIcon,
        sx: styles.endIcon,
        classNames: classes.endIcon
    });
    const labelProps = useSlotProps({
        ownerState,
        externalSlotProps: slotProps?.label,
        sx: styles.label,
        classNames: classes.label,
        additionalProps: slotAriaProps.label
    });
    const thumbIcon = isFunction(thumbIconProp) ? thumbIconProp(ownerState) : thumbIconProp;
    return /*#__PURE__*/ jsxs(nex.label, {
        ...rootProps,
        children: [
            /*#__PURE__*/ jsx(nex.input, {
                ...inputProps
            }),
            /*#__PURE__*/ jsxs(nex.span, {
                ...trackProps,
                children: [
                    startIcon && /*#__PURE__*/ jsx(nex.span, {
                        ...startIconProps,
                        children: startIcon
                    }),
                    /*#__PURE__*/ jsx(nex.span, {
                        ...thumbProps,
                        children: thumbIcon
                    }),
                    endIcon && /*#__PURE__*/ jsx(nex.span, {
                        ...endIconProps,
                        children: endIcon
                    })
                ]
            }),
            children && /*#__PURE__*/ jsx(nex.span, {
                ...labelProps,
                children: children
            })
        ]
    });
};
Switch.displayName = 'Switch';

export { Switch };