import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled, useStyleConfig, vui } from '../core';
import { cs, filterUndefined, isReactText } from '../utils';
import { SwitchProvider } from './context';
import { SwitchButton } from './switchButton';
import { SwitchLabel } from './switchLabel';
export const SwitchBase = styled.labelBox `
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  line-height: normal;
  width: fit-content;

  &[aria-disabled='true'] {
    cursor: not-allowed;

    .vui-switchLabel {
      color: disabled.color;
    }
  }
`;
/**
 * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.
 * Forwards many relevant props to the innner input element. Exposes some props to the children via context.
 */
export const Switch = vui((props, ref) => {
    const { button, checked, children, className, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, labelLeft, labelRight, name, onBlur, onChange, onFocus, required, size, value, variant, ...rest } = props;
    const styles = useStyleConfig('Switch', props);
    const context = useMemo(() => filterUndefined({
        checked,
        defaultChecked,
        disabled,
        name,
        onBlur,
        onChange,
        onFocus,
        required,
        size,
        value,
        variant,
    }), [checked, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]);
    const aliasedProps = filterUndefined({
        'aria-disabled': disabled,
    });
    return (_jsx(SwitchProvider, { value: context, children: _jsxs(SwitchBase, { className: cs('vui-switch', className), ref: ref, ...styles.container, ...aliasedProps, ...rest, children: [isReactText(labelLeft) ? _jsx(SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft, children ?? button ?? _jsx(SwitchButton, { id, innerLabelOff, innerLabelOn, inputProps, inputRef }), isReactText(labelRight) ? _jsx(SwitchLabel, { ml: 1, text: labelRight }) : labelRight] }) }));
});
Switch.Button = SwitchButton;
Switch.Label = SwitchLabel;
Switch.displayName = 'Switch';
export default Switch;
//# sourceMappingURL=switchMain.js.map