import { clsx } from 'clsx';
import { useInputAttributes } from '../inputs/contexts.mjs';
import { jsx } from 'react/jsx-runtime';

const Switch = props => {
  const inputAttributes = useInputAttributes({
    nonLabelable: true
  });
  const {
    checked,
    className,
    id = inputAttributes.id,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledbyProp,
    'aria-describedby': ariaDescribedbyProp,
    onClick,
    disabled
  } = props;
  const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
  return /*#__PURE__*/jsx("button", {
    className: clsx('np-switch', {
      'np-switch--unchecked': !checked,
      'np-switch--checked': checked,
      disabled
    }, className),
    type: "button",
    role: "switch",
    ...inputAttributes,
    id: id,
    "aria-checked": Boolean(checked),
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby,
    "aria-describedby": ariaDescribedbyProp,
    disabled: disabled,
    onClick: !disabled ? onClick : undefined,
    children: /*#__PURE__*/jsx("span", {
      className: "np-switch--thumb"
    })
  });
};

export { Switch as default };
//# sourceMappingURL=Switch.mjs.map
