@turnkey/react-wallet-kit/dist/components/design/Inputs.mjs

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { defaultCountries, parseCountry, usePhoneInput, FlagImage as FlagImage$1 } from 'react-international-phone';
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, Input } from '@headlessui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faSearch } from '@fortawesome/free-solid-svg-icons';
import parsePhoneNumberFromString from 'libphonenumber-js';
import { useRef, useState, useCallback, useEffect } from 'react';
import { useScreenSize } from '../../utils/utils.mjs';
import { BaseButton } from './Buttons.mjs';

var FlagImage = FlagImage$1;
// Supported country dial codes
var supported_country_codes = ["+1", "+33", "+420", "+358", "+49", "+30", "+36", "+354", "+353", "+39", "+371", "+370", "+352", "+356", "+373", "+382", "+31", "+47", "+48", "+351", "+40", "+381", "+386", "+34", "+46", "+41", "+355", "+376", "+244", "+54", "+374", "+61", "+43", "+994", "+1242", "+973", "+880", "+1246", "+32", "+501", "+229", "+591", "+387", "+267", "+55", "+1284", "+673", "+237", "+238", "+1345", "+235", "+56", "+57", "+506", "+385", "+599", "+357", "+243", "+45", "+253", "+1767", "+593", "+503", "+240", "+372", "+298", "+679", "+689", "+220", "+995", "+233", "+350", "+1473", "+502", "+590", "+224", "+592", "+509", "+504", "+852", "+91", "+62", "+972", "+225", "+1876", "+81", "+383", "+965", "+996", "+856", "+961", "+266", "+231", "+261", "+60", "+960", "+223", "+230", "+52", "+373", "+976", "+212", "+258", "+264", "+977", "+64", "+505", "+227", "+234", "+92", "+507", "+51", "+63", "+1787", "+1939", "+974", "+262", "+1758", "+1784", "+685", "+966", "+221", "+248", "+232", "+65", "+27", "+82", "+597", "+268", "+992", "+255", "+66", "+228", "+1868", "+216", "+598", "+998", "+58"];
var countries = defaultCountries.filter(function (country) {
  var _parseCountry = parseCountry(country),
    dialCode = _parseCountry.dialCode;
  return supported_country_codes.includes("+".concat(dialCode));
});
var isValidPhone = function isValidPhone(phone) {
  var _phoneNumber$isValid;
  var phoneNumber = parsePhoneNumberFromString(phone);
  return (_phoneNumber$isValid = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.isValid()) !== null && _phoneNumber$isValid !== void 0 ? _phoneNumber$isValid : false;
};
var desiredPanelHeight = 288; // tailwind's max-h-72
function PhoneInputBox(props) {
  var value = props.value,
    _onChange = props.onChange,
    onFocus = props.onFocus,
    onBlur = props.onBlur,
    onEnter = props.onEnter;
  var _usePhoneInput = usePhoneInput({
      value: value,
      defaultCountry: "us",
      disableDialCodeAndPrefix: true,
      countries: countries,
      onChange: function onChange(data) {
        _onChange(data.phone, "+".concat(data.country.dialCode, " ").concat(data.inputValue), isValidPhone(data.phone));
      }
    }),
    inputValue = _usePhoneInput.inputValue,
    handlePhoneValueChange = _usePhoneInput.handlePhoneValueChange,
    inputRef = _usePhoneInput.inputRef,
    country = _usePhoneInput.country,
    setCountry = _usePhoneInput.setCountry;
  var buttonRef = useRef(null);
  var _useState = useState("bottom start"),
    _useState2 = _slicedToArray(_useState, 2),
    placement = _useState2[0],
    setPlacement = _useState2[1];
  var _useScreenSize = useScreenSize(),
    height = _useScreenSize.height;
  var update = useCallback(function () {
    var btn = buttonRef.current;
    if (!btn) return;
    var b = btn.getBoundingClientRect();
    var spaceAbove = b.top - height;
    var spaceBelow = height - b.bottom;
    var next = spaceBelow < desiredPanelHeight && spaceAbove > spaceBelow ? "top start" : "bottom start";
    setPlacement(next);
  }, [height, desiredPanelHeight]);
  useEffect(function () {
    update();
  }, [update, height]);
  return jsxs("div", {
    className: "w-full flex items-center gap-2 rounded-md text-inherit bg-button-light dark:bg-button-dark border border-modal-background-dark/20 dark:border-modal-background-light/20 focus-within:outline-primary-light focus-within:dark:outline-primary-dark focus-within:outline-[1px] focus-within:outline-offset-0 box-border transition-all",
    children: [jsx(Listbox, {
      as: "div",
      value: country.iso2,
      onChange: setCountry,
      children: jsxs("div", {
        className: "relative",
        children: [jsxs(ListboxButton, {
          ref: buttonRef,
          className: "flex flex-row min-w-20 gap-2 px-3 cursor-pointer bg-button-light dark:bg-button-dark border-none rounded-md text-left items-center",
          children: [jsxs("div", {
            className: "flex flex-row space-x-2 items-center",
            children: [jsx(FlagImage, {
              iso2: country.iso2,
              className: "w-5 h-4 rounded-sm"
            }), jsxs("div", {
              className: "text-sm text-modal-text-light dark:text-modal-text-dark",
              children: ["+", country.dialCode]
            })]
          }), jsx(FontAwesomeIcon, {
            icon: faChevronDown,
            className: "size-3 text-icon-text-light dark:text-icon-text-dark"
          })]
        }), jsx(ListboxOptions, {
          transition: true,
          className: "absolute tk-scrollbar z-50 mt-1 border border-modal-background-dark/20 dark:border-modal-background-light/20 !max-h-72 !w-fit rounded-md shadow-lg overflow-y-auto overflow-x-hidden text-sm \n            transition duration-200 ease-out data-closed:-translate-y-2 data-closed:opacity-0",
          anchor: placement,
          children: countries.map(function (c) {
            var _parseCountry2 = parseCountry(c),
              iso2 = _parseCountry2.iso2,
              name = _parseCountry2.name,
              dialCode = _parseCountry2.dialCode;
            return jsxs(ListboxOption, {
              value: iso2,
              className: function className(_ref) {
                var active = _ref.active;
                return "cursor-pointer select-none py-2 px-3 bg-button-light dark:bg-button-dark flex items-center gap-2 ".concat(active ? "bg-modal-background-light dark:bg-modal-background-dark" : "");
              },
              children: [jsx(FlagImage, {
                iso2: iso2,
                className: "w-5 h-4 rounded-sm"
              }), jsx("span", {
                children: name
              }), jsxs("span", {
                className: "ml-auto text-xs text-icon-text-light dark:text-icon-text-dark",
                children: ["+", dialCode]
              })]
            }, iso2);
          })
        })]
      })
    }), jsx(Input, {
      type: "tel",
      value: inputValue,
      ref: inputRef,
      onChange: handlePhoneValueChange,
      onFocus: onFocus,
      onBlur: onBlur,
      onKeyDown: function onKeyDown(e) {
        if (e.key === "Enter") onEnter === null || onEnter === void 0 ? void 0 : onEnter();
      },
      placeholder: "Phone number",
      className: "w-full py-3 bg-transparent border-none text-inherit placeholder-icon-text-light dark:placeholder-icon-text-dark focus:outline-none focus:ring-0 focus:border-none"
    })]
  });
}
function SearchInputBox(props) {
  var value = props.value,
    _onChange2 = props.onChange,
    onClear = props.onClear,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? "Search..." : _props$placeholder;
  var inputRef = useRef(null);
  var handleClear = function handleClear() {
    _onChange2("");
    onClear === null || onClear === void 0 ? void 0 : onClear();
    if (inputRef.current) {
      inputRef.current.value = "";
    }
  };
  return jsxs("div", {
    className: "w-full flex items-center gap-2 rounded-md text-inherit bg-button-light dark:bg-button-dark border border-modal-background-dark/20 dark:border-modal-background-light/20 focus-within:outline-primary-light focus-within:dark:outline-primary-dark focus-within:outline-[1px] focus-within:outline-offset-0 box-border transition-all",
    children: [jsx(FontAwesomeIcon, {
      icon: faSearch,
      className: "relative text-icon-text-light dark:text-icon-text-dark px-2"
    }), jsx(Input, {
      ref: inputRef,
      type: "text",
      autoCapitalize: "none",
      autoComplete: "off",
      placeholder: placeholder,
      onChange: function onChange(e) {
        return _onChange2(e.target.value);
      },
      className: "w-full py-3 bg-transparent border-none text-inherit placeholder-icon-text-light dark:placeholder-icon-text-dark focus:outline-none focus:ring-0 focus:border-none"
    }), value && jsx(BaseButton, {
      className: "flex text-icon-text-light dark:text-icon-text-dark text-sm border-none self-stretch px-2 items-center justify-center",
      onClick: handleClear,
      children: "Clear"
    })]
  });
}

export { PhoneInputBox, SearchInputBox };
//# sourceMappingURL=Inputs.mjs.map