@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 useSlotClasses = require('../utils/useSlotClasses.cjs');
var useStyles = require('../utils/useStyles.cjs');
var useSlot = require('../utils/useSlot.cjs');
var InputBase = require('../inputBase/InputBase.cjs');
var _switch = require('../../theme/recipes/switch.cjs');

const slots = [
    'root',
    'input',
    'track',
    'thumb',
    'startIcon',
    'endIcon',
    'label'
];
const useSlotAriaProps = (ownerState)=>{
    const { children, slotProps, role, 'aria-labelledby': labelledBy, 'aria-label': ariaLabel } = ownerState;
    const id = react.useId();
    return react.useMemo(()=>{
        const hasLabel = !!children;
        const stringChildren = utils.isString(children);
        const labelProps = slotProps?.label ?? {};
        const labelId = labelProps.id ?? (hasLabel ? id : undefined);
        return {
            input: {
                role,
                'aria-labelledby': labelledBy ?? labelId,
                'aria-label': ariaLabel ?? (stringChildren ? children : undefined)
            },
            label: {
                id: labelId
            }
        };
    }, [
        ariaLabel,
        children,
        id,
        labelledBy,
        role,
        slotProps?.label
    ]);
};
const Switch = (inProps)=>{
    const { primaryThemeColor } = Context.useNexUI();
    const props = useDefaultProps.useDefaultProps({
        name: 'Switch',
        props: inProps
    });
    const { sx, children, slotProps, className, classNames, startIcon, endIcon, onCheckedChange, thumbIcon: thumbIconProp, checked: checkedProp, role = 'switch', disabled = false, as = 'input', size = 'md', type = 'checkbox', defaultChecked = false, color = primaryThemeColor, ...remainingProps } = props;
    const [checked, setChecked] = hooks.useControlledState(checkedProp, defaultChecked, onCheckedChange);
    const ownerState = {
        ...props,
        color,
        as,
        type,
        checked,
        disabled,
        size,
        defaultChecked,
        role
    };
    const slotClasses = useSlotClasses.useSlotClasses({
        name: 'Switch',
        slots,
        classNames
    });
    const styles = useStyles.useStyles({
        ownerState,
        name: 'Switch',
        recipe: _switch.switchRecipe
    });
    const slotAriaProps = useSlotAriaProps(ownerState);
    const [SwitchRoot, getSwitchRootProps] = useSlot.useSlot({
        elementType: 'label',
        externalSlotProps: slotProps?.root,
        style: styles.root,
        classNames: slotClasses.root,
        additionalProps: {
            className,
            sx
        },
        dataAttrs: {
            color,
            size,
            disabled,
            checked
        }
    });
    const [SwitchInput, getSwitchInputProps] = useSlot.useSlot({
        elementType: InputBase.InputBase,
        externalForwardedProps: remainingProps,
        style: styles.input,
        classNames: slotClasses.input,
        a11y: slotAriaProps.input,
        shouldForwardComponent: false,
        additionalProps: {
            as,
            type,
            role,
            checked,
            disabled,
            onCheckedChange: setChecked
        }
    });
    const [SwitchTrack, getSwitchTrackProps] = useSlot.useSlot({
        elementType: 'span',
        externalSlotProps: slotProps?.track,
        style: styles.track,
        classNames: slotClasses.track
    });
    const [SwitchThumb, getSwitchThumbProps] = useSlot.useSlot({
        elementType: 'span',
        externalSlotProps: slotProps?.thumb,
        style: styles.thumb,
        classNames: slotClasses.thumb
    });
    const [SwitchStartIcon, getSwitchStartIconProps] = useSlot.useSlot({
        elementType: 'span',
        externalSlotProps: slotProps?.startIcon,
        style: styles.startIcon,
        classNames: slotClasses.startIcon
    });
    const [SwitchEndIcon, getSwitchEndIconProps] = useSlot.useSlot({
        elementType: 'span',
        externalSlotProps: slotProps?.endIcon,
        style: styles.endIcon,
        classNames: slotClasses.endIcon
    });
    const [SwitchLabel, getSwitchLabelProps] = useSlot.useSlot({
        elementType: 'span',
        externalSlotProps: slotProps?.label,
        style: styles.label,
        classNames: slotClasses.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;