@spark-web/password-input/dist/spark-web-password-input.esm.js

--- title: Password Input storybookPath: forms-passwordinput--default isExperimentalPackage: true ---

import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import { css } from '@emotion/react';
import { useButtonStyles, BaseButton } from '@spark-web/button';
import { useFieldContext } from '@spark-web/field';
import { EyeOffIcon, EyeIcon } from '@spark-web/icon';
import { TextInput, InputAdornment } from '@spark-web/text-input';
import { forwardRef, useState } from 'react';
import { jsx } from '@emotion/react/jsx-runtime';

function useIconButtonStyles() {
  var _useButtonStyles = useButtonStyles({
      iconOnly: false,
      prominence: 'none',
      size: 'medium',
      tone: 'neutral'
    }),
    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
    buttonStyles = _useButtonStyles2[1];
  return [{
    alignItems: 'center',
    borderRadius: 'full',
    cursor: 'pointer',
    display: 'inline-flex',
    gap: 'small',
    height: 'small',
    justifyContent: 'center',
    paddingX: 'xsmall',
    position: 'relative',
    width: 'small'
  }, buttonStyles];
}

var PasswordInput = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
  var _useFieldContext = useFieldContext(),
    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
    disabled = _useFieldContext2[0].disabled;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showPassword = _useState2[0],
    setShowPassword = _useState2[1];
  var toggleShowPassword = function toggleShowPassword() {
    return setShowPassword(!showPassword);
  };
  var _useIconButtonStyles = useIconButtonStyles(),
    _useIconButtonStyles2 = _slicedToArray(_useIconButtonStyles, 2),
    boxProps = _useIconButtonStyles2[0],
    buttonStyles = _useIconButtonStyles2[1];
  var Icon = showPassword ? EyeOffIcon : EyeIcon;
  return jsx(TextInput, _objectSpread(_objectSpread({}, props), {}, {
    ref: forwardedRef,
    inputMode: "text",
    type: showPassword ? 'text' : 'password',
    children: jsx(InputAdornment, {
      placement: "end",
      children: jsx(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
        "aria-checked": showPassword,
        "aria-label": "".concat(showPassword ? 'Hide' : 'Show', " password"),
        css: css(buttonStyles),
        disabled: disabled,
        onClick: toggleShowPassword,
        role: "switch"
        // The input is not keyboard navigable when disabled and so we are
        // also removing the button from the tab index to make it less
        // confusing to keyboard and assitive technology users.
        ,
        tabIndex: disabled ? -1 : undefined,
        children: jsx(Icon, {
          tone: disabled ? 'disabled' : 'neutral'
        })
      }))
    })
  }));
});
PasswordInput.displayName = 'PasswordInput';

export { PasswordInput };