@via-profit/ui-kit 0.1.0-rc.2 → 0.1.0-rc.21

package/Modal/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const ModalDialog_1 = __importDefault(require("./ModalDialog"));
+const ModalConfirmBox_1 = __importDefault(require("./ModalConfirmBox"));
+const ModalMessageBox_1 = __importDefault(require("./ModalMessageBox"));
+const ModalDrawer_1 = __importDefault(require("./ModalDrawer"));
+const isDialog = (props) => ('variant' in props && props.variant === 'dialog') || typeof props.variant === 'undefined';
+const isConfirmBox = (props) => 'variant' in props && props.variant === 'confirm-box';
+const isMessageBox = (props) => 'variant' in props && props.variant === 'message-box';
+const isDrawer = (props) => 'variant' in props && props.variant === 'drawer';
+const Modal = (props, ref) => {
+    if (isDialog(props)) {
+        return React.createElement(ModalDialog_1.default, Object.assign({}, props, { ref: ref }));
+    }
+    if (isConfirmBox(props)) {
+        return React.createElement(ModalConfirmBox_1.default, Object.assign({}, props, { ref: ref }));
+    }
+    if (isMessageBox(props)) {
+        return React.createElement(ModalMessageBox_1.default, Object.assign({}, props, { ref: ref }));
+    }
+    if (isDrawer(props)) {
+        return React.createElement(ModalDrawer_1.default, Object.assign({}, props, { ref: ref }));
+    }
+    const { variant } = props;
+    throw new Error(`Expected «variant» property is «dialog», «drawer», «message-box» or «confirm-box», but got «${variant}»`);
+};
+exports.default = React.forwardRef(Modal);

package/NoSSR/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface NoSSRProps {
+    children: React.ReactNode | React.ReactNode[];
+    fallback?: React.ReactNode | React.ReactNode[];
+}
+declare const NoSSR: React.FC<NoSSRProps>;
+export default NoSSR;

package/NoSSR/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const NoSSR = props => {
+    const { fallback, children } = props;
+    const [mountedState, setMountedState] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        setMountedState(true);
+    }, []);
+    return mountedState ? react_1.default.createElement(react_1.default.Fragment, null, children) : react_1.default.createElement(react_1.default.Fragment, null, fallback ? fallback : null);
+};
+exports.default = NoSSR;

package/PhoneField/CountryFlagComponent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CountryFlagComponentProps extends React.HTMLAttributes<HTMLSpanElement> {
+    readonly flag: JSX.Element | null;
+}
+declare const CountryFlagComponent: React.FC<CountryFlagComponentProps>;
+export default CountryFlagComponent;

package/PhoneField/CountryFlagComponent.js

@@ -0,0 +1,44 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const UnknownFlag_1 = __importDefault(require("./UnknownFlag"));
+const CountryFlagContainer = styled_1.default.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+  border-radius: 100%;
+  overflow: hidden;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  position: relative;
+  width: 1em;
+  height: 1em;
+  border: 1px solid ${({ theme }) => theme.color.textPrimary.alpha(0.5).toString()};
+  & > svg {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+const CountryFlagComponent = props => {
+    const { flag } = props, otherProps = __rest(props, ["flag"]);
+    return (react_1.default.createElement(CountryFlagContainer, Object.assign({}, otherProps), typeof flag === 'undefined' || flag === null ? react_1.default.createElement(UnknownFlag_1.default, null) : flag));
+};
+exports.default = CountryFlagComponent;

package/PhoneField/UnknownFlag.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/PhoneField/UnknownFlag.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_1 = require("@emotion/react");
+const UnknownFlag = (props, ref) => {
+    const { color } = (0, react_1.useTheme)();
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
+        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: color.surface.toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
+        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: color.textPrimary.toString(), strokeWidth: ".72279" })));
+};
+exports.default = React.forwardRef(UnknownFlag);

package/PhoneField/index.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { TextFieldProps } from '../TextField';
+import type { CountryCode, CountryFlag, PhoneTemplate } from './templates';
+export interface PhoneFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
+    /**
+     * Phone string format 79876543210 or +7 (987) 654-32-10
+     */
+    readonly value: string;
+    readonly defaultCountry?: CountryCode | null;
+    readonly onChange: (payload: PhonePayload) => void;
+    readonly templates: readonly PhoneTemplate[];
+}
+export interface PhonePayload {
+    /**
+     * Phone formatted string, e.g.: +7 (987) 654-32-10
+     */
+    readonly value: string;
+    /**
+     * Country code (ISO 3166-1 alpha-2), e.g.: RU
+     */
+    readonly countryCode: string | null;
+    /**
+     * JSX Element of Country Flag
+     */
+    readonly CountryFlag: CountryFlag | null;
+    /**
+     * Phone template, e.g.: +7 (xxx) xxx-xx-xx. The symbol «x» - is a digit
+     */
+    readonly template: string;
+    /**
+     * Phone placeholder, e.g.: +7 (999) 999-99-99
+     */
+    readonly placeholder: string;
+    /**
+     * Country calling code, e.g.: 7
+     */
+    readonly callingCode: string | null;
+    /**
+     * Phone number without calling code and formatters
+     */
+    readonly number: string;
+    /**
+     * Phone number with calling code
+     */
+    readonly combined: string;
+    /**
+     * Phone validation status
+     */
+    readonly isValid: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<PhoneFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export * from './usePhoneUtils';
+export * from './templates';

package/PhoneField/index.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TextField_1 = __importDefault(require("../TextField"));
+const usePhoneUtils_1 = require("./usePhoneUtils");
+const CountryFlagComponent_1 = __importDefault(require("./CountryFlagComponent"));
+const PhoneField = (props, ref) => {
+    const { value, defaultCountry, templates, inputRef, onChange } = props, textFieldProps = __rest(props, ["value", "defaultCountry", "templates", "inputRef", "onChange"]);
+    const { formatParsedInput, parseInput, parseAndFormat } = (0, usePhoneUtils_1.usePhoneUtils)({ templates });
+    const textInputRef = react_1.default.useRef(null);
+    const initialValue = react_1.default.useRef(value);
+    const [state, setState] = react_1.default.useState(() => {
+        const { text, countryCode, placeholder, number, CountryFlag } = parseAndFormat(String(initialValue.current));
+        return {
+            currentValue: text,
+            number,
+            countryCode,
+            placeholder,
+            CountryFlag,
+        };
+    });
+    const { countryCode, currentValue, placeholder, CountryFlag } = state;
+    react_1.default.useEffect(() => {
+        if (initialValue.current !== value) {
+            initialValue.current = value;
+            const formatted = parseAndFormat(String(value));
+            if (formatted.text !== currentValue) {
+                setState(prev => (Object.assign(Object.assign({}, prev), { currentValue: formatted.text, countryCode: formatted.countryCode, placeholder: formatted.placeholder, CountryFlag: formatted.CountryFlag })));
+            }
+        }
+    }, [countryCode, currentValue, parseAndFormat, placeholder, value]);
+    const handleChange = event => {
+        var _a;
+        const parsed = parseInput(String(event.currentTarget.value), ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
+        const { caret, text, template, placeholder, countryCode, callingCode, CountryFlag, number, isValid, } = formatParsedInput(parsed.text, parsed.caret);
+        onChange({
+            value: text,
+            placeholder,
+            CountryFlag,
+            template,
+            countryCode,
+            callingCode,
+            number,
+            isValid,
+            combined: `${callingCode}${number}`,
+        });
+        setState(prev => (Object.assign(Object.assign({}, prev), { currentValue: text, countryCode,
+            placeholder,
+            CountryFlag })));
+        setTimeout(() => {
+            var _a;
+            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
+        }, 15);
+    };
+    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref }, textFieldProps, { startIcon: react_1.default.createElement(CountryFlagComponent_1.default, { flag: CountryFlag, onClick: () => {
+                if (textInputRef.current) {
+                    textInputRef.current.select();
+                    textInputRef.current.focus();
+                }
+            } }), value: currentValue, placeholder: placeholder, onChange: handleChange, inputRef: input => {
+            textInputRef.current = input;
+            if (inputRef && typeof inputRef === 'object') {
+                inputRef.current = input;
+            }
+        } })));
+};
+exports.default = react_1.default.forwardRef(PhoneField);
+__exportStar(require("./usePhoneUtils"), exports);
+__exportStar(require("./templates"), exports);

package/PhoneField/templates.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+export type CallingCode = string;
+/**
+ * Template mask - is a string with chars:\
+ * x - digit
+ * any - hardcoded symbols\
+ * Example (third index in array - is a template mask):
+ * ```tsx
+ * <PhoneField
+      templates={[
+        [
+          'RU',
+          <RU key="ru" />,
+          '7',
+          '+x (xxx) xxx-xx-xx', // <-- Template mask
+          '+7 (987) 654-32-10',
+          /^\+$/,
+        ],
+      ]}
+      ...
+    />
+ * ```
+ */
+export type TemplateMask = string;
+/**
+ * Input placeholder
+ * Example (fourth index in array - is a placeholer):
+ * ```tsx
+ * <PhoneField
+      templates={[
+        [
+          'RU',
+          <RU key="ru" />,
+          '7',
+          '+x (xxx) xxx-xx-xx',
+          '+7 (987) 654-32-10', // <-- Placeholder
+          /^\+$/,
+        ],
+      ]}
+      ...
+    />
+ * ```
+ */
+export type Placeholder = string;
+/**
+ * RegEx for template detection
+ * Example (fifth index in array - is a RegEx):
+ * ```tsx
+ * <PhoneField
+      templates={[
+        [
+          'RU',
+          <RU key="ru" />,
+          '7',
+          '+x (xxx) xxx-xx-xx',
+          '+7 (987) 654-32-10',
+          /^\+$/, // <-- RegEx. All input starts «+» will be deteced as current (RU) template
+        ],
+      ]}
+      ...
+    />
+ * ```
+ */
+export type RegExpDetect = RegExp;
+/**
+ * JSX Element for display Country Flag
+ */
+export type CountryFlag = JSX.Element;
+/**
+ * Country ISO-2 code
+ */
+export type CountryCode = 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AO' | 'AQ' | 'AR' | 'AS' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'EU' | 'FI' | 'FJ' | 'FK' | 'FM' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GEAB' | 'GEOS' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GU' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'IC' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MH' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MP' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PR' | 'PS' | 'PT' | 'PW' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VI' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW';
+export type PhoneTemplate = [
+    CountryCode | null,
+    CountryFlag | null,
+    CallingCode | null,
+    TemplateMask,
+    Placeholder,
+    RegExpDetect
+];
+export declare const templates: PhoneTemplate[];
+export default templates;

package/PhoneField/templates.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templates = void 0;
+const react_1 = __importDefault(require("react"));
+// import UnknownFlag from './UnknownFlag';
+const RU_1 = __importDefault(require("@via-profit/ui-kit/src/CountryFlags/RU"));
+const BY_1 = __importDefault(require("@via-profit/ui-kit/src/CountryFlags/BY"));
+const KZ_1 = __importDefault(require("@via-profit/ui-kit/src/CountryFlags/KZ"));
+const UA_1 = __importDefault(require("@via-profit/ui-kit/src/CountryFlags/UA"));
+const JP_1 = __importDefault(require("@via-profit/ui-kit/src/CountryFlags/JP"));
+const US_1 = __importDefault(require("@via-profit/ui-kit/src/CountryFlags/US"));
+const IL_1 = __importDefault(require("@via-profit/ui-kit/src/CountryFlags/IL"));
+exports.templates = [
+    // Russian template
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/],
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/],
+    // ['RU', '7', '+7 (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+{0,1}7{0,1}9/], // 912...
+    [
+        'RU',
+        react_1.default.createElement(RU_1.default, { key: "ru-3" }),
+        '7',
+        '+7 (xxx) xxx-xx-xx',
+        '+7 (987) 654-32-10',
+        /^\+{0,1}7([0-5]|[8-9])[0-9][0-9]/,
+    ],
+    // Other fucking countries
+    ['BY', react_1.default.createElement(BY_1.default, { key: "by" }), '375', '+375 (xx) xxx-xx-xx', '+375 (98) 765-43-21', /^\+{0,1}375/],
+    ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '7', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
+    [
+        'KZ',
+        react_1.default.createElement(KZ_1.default, { key: "kz-2" }),
+        '7',
+        '+7 (xxx) xxx-xx-xx',
+        '+7 (600) 765-43-21',
+        /^\+{0,1}7[6-7][0-9][0-9]/,
+    ],
+    ['UA', react_1.default.createElement(UA_1.default, { key: "ua" }), '380', '+380 (xx) xxx-xxxx', '+380 (98) 765-4321', /^\+{0,1}380/],
+    ['JP', react_1.default.createElement(JP_1.default, { key: "jp" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
+    ['US', react_1.default.createElement(US_1.default, { key: "us" }), '1', '+1 xxx xxx-xx-xx', '+1 987 654-32-10', /^\+{0,1}1/],
+    ['IL', react_1.default.createElement(IL_1.default, { key: "il" }), '972', '+972 xx xxx-xx-xx', '+972 65 432-10-01', /^\+972/],
+];
+exports.default = exports.templates;

package/PhoneField/usePhoneUtils.d.ts

@@ -0,0 +1,69 @@
+import type { CountryCode, PhoneTemplate, CountryFlag } from './templates';
+export interface Formatted {
+    readonly text: string;
+    readonly caret: number;
+    readonly countryCode: CountryCode | null;
+    readonly CountryFlag: CountryFlag | null;
+    readonly callingCode: string | null;
+    readonly number: string;
+    readonly template: string;
+    readonly placeholder: string;
+    readonly isValid: boolean;
+}
+type Parse = (text: string, caret?: number) => {
+    readonly text: string;
+    readonly caret: number;
+};
+type GetTemplateInfo = (parsedValue: string) => {
+    readonly countryCode: CountryCode | null;
+    readonly CountryFlag: CountryFlag | null;
+    readonly callingCode: string | null;
+    readonly template: string;
+    readonly placeholder: string;
+    readonly regexp: RegExp;
+};
+type Validate = (inputValue: string, template: string) => boolean;
+type Format = (text: string, caret: number, defaultCountry?: string | null) => Formatted;
+type ParseAndValidate = (inputValue: string) => boolean;
+type ParseAndFormat = (inputValue: string, caret?: number) => Formatted;
+export declare const usePhoneUtils: (params: {
+    templates: readonly PhoneTemplate[];
+}) => {
+    /**
+     * Validate parsed phone string by template\
+     * ```js
+     * // Example:
+     * validateParsedInput('79129876543', '7 (xxx) xxx-xx-xx'); // true
+     * validateParsedInput('79129876', '7 (xxx) xxx-xx-xx'); // false
+     * ```
+     */
+    validateParsedInput: Validate;
+    getTemplateInfo: GetTemplateInfo;
+    /**
+     * Parse plain phone string and validate result\
+     * ```js
+     * // Example:
+     * parseAndValidate('+7 912 659-99-88'); // true
+     * parseAndValidate('+7 912 659-99-'); // false
+     * ```
+     */
+    parseAndValidate: ParseAndValidate;
+    parseAndFormat: ParseAndFormat;
+    /**
+     * Format phone string by template\
+     * ```js
+     * // Example:
+     * format('')
+     * ```
+     */
+    formatParsedInput: Format;
+    /**
+     * Parse input phone string\
+     * ```js
+     * // Example:
+     * const { text, caret } = parseInput('+7 (912', 7); // { '7912', 4 }
+     * ```
+     */
+    parseInput: Parse;
+};
+export {};