import { clsx } from 'clsx';
import { useInputAttributes } from '../inputs/contexts.mjs';
import { jsxs, 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,
    onClick,
    disabled
  } = props;
  const handleKeyDown = event => {
    if (event.key === ' ') {
      event.preventDefault();
      onClick();
    }
  };
  const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
  return /*#__PURE__*/jsxs("span", {
    className: clsx('np-switch', {
      'np-switch--unchecked': !checked,
      'np-switch--checked': checked,
      disabled
    }, className),
    tabIndex: 0,
    role: "switch",
    "aria-checked": checked,
    "aria-label": ariaLabel,
    ...inputAttributes,
    "aria-labelledby": ariaLabelledby,
    id: id,
    "aria-disabled": disabled,
    onClick: !disabled ? onClick : undefined,
    onKeyDown: !disabled ? handleKeyDown : undefined,
    children: [/*#__PURE__*/jsx("span", {
      className: "np-switch--thumb"
    }), /*#__PURE__*/jsx("input", {
      type: "checkbox",
      checked: checked,
      readOnly: true
    })]
  });
};

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