@lmb-it/kitsconcerto-native 0.1.236

package/form/inputs/PhoneInput/index.cjs

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('../../../apps/mobile/src/ui/accordion/index.cjs');
+require('../../../apps/mobile/src/ui/actionsheet/index.cjs');
+require('../../../apps/mobile/src/ui/alert/index.cjs');
+require('../../../apps/mobile/src/ui/alert-dialog/index.cjs');
+require('../../../apps/mobile/src/ui/avatar/index.cjs');
+require('../../../apps/mobile/src/ui/badge/index.cjs');
+require('../../../apps/mobile/src/ui/bottomsheet/index.cjs');
+require('../../../apps/mobile/src/ui/box/index.cjs');
+require('../../../apps/mobile/src/ui/button/index.cjs');
+require('../../../apps/mobile/src/ui/card/index.cjs');
+require('../../../apps/mobile/src/ui/center/index.cjs');
+require('../../../apps/mobile/src/ui/checkbox/index.cjs');
+require('../../../apps/mobile/src/ui/divider/index.cjs');
+require('../../../apps/mobile/src/ui/drawer/index.cjs');
+require('../../../apps/mobile/src/ui/fab/index.cjs');
+var reactNative = require('react-native');
+require('../../../apps/mobile/src/ui/form-control/index.cjs');
+require('../../../apps/mobile/src/ui/gluestack-ui-provider/config.cjs');
+require('@gluestack-ui/core/overlay/creator');
+require('@gluestack-ui/core/toast/creator');
+require('nativewind');
+require('../../../apps/mobile/src/ui/grid/index.cjs');
+require('../../../apps/mobile/src/ui/heading/index.cjs');
+require('../../../apps/mobile/src/ui/hstack/index.cjs');
+require('../../../apps/mobile/src/ui/icon/index.cjs');
+require('../../../apps/mobile/src/ui/image/index.cjs');
+require('../../../apps/mobile/src/ui/image-background/index.cjs');
+require('../../../apps/mobile/src/ui/input/index.cjs');
+require('../../../apps/mobile/src/ui/link/index.cjs');
+require('../../../apps/mobile/src/ui/menu/index.cjs');
+require('../../../apps/mobile/src/ui/modal/index.cjs');
+require('../../../apps/mobile/src/ui/popover/index.cjs');
+require('../../../apps/mobile/src/ui/portal/index.cjs');
+require('../../../apps/mobile/src/ui/pressable/index.cjs');
+require('../../../apps/mobile/src/ui/progress/index.cjs');
+require('../../../apps/mobile/src/ui/radio/index.cjs');
+require('react-native-safe-area-context');
+require('../../../apps/mobile/src/ui/select/index.cjs');
+require('../../../apps/mobile/src/ui/skeleton/index.cjs');
+require('../../../apps/mobile/src/ui/slider/index.cjs');
+require('../../../apps/mobile/src/ui/spinner/index.cjs');
+require('../../../apps/mobile/src/ui/switch/index.cjs');
+require('../../../apps/mobile/src/ui/table/index.cjs');
+require('../../../apps/mobile/src/ui/text/index.cjs');
+require('../../../apps/mobile/src/ui/textarea/index.cjs');
+require('../../../apps/mobile/src/ui/toast/index.cjs');
+require('../../../apps/mobile/src/ui/tooltip/index.cjs');
+require('../../../apps/mobile/src/ui/vstack/index.cjs');
+require('react-native-reanimated');
+require('react-icons/fa');
+require('react-icons/ai');
+require('react-icons/io');
+require('../../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.cjs');
+require('yup');
+require('../../../packages/types/src/Css/map/index.cjs');
+require('../../../packages/types/src/Theme/shadows.cjs');
+require('../../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
+var useSeparator = require('../../../apps/mobile/src/Factory/useSeparator.cjs');
+require('i18next');
+require('react-i18next');
+require('../../../apps/mobile/src/Core/AutoComplete/index.cjs');
+require('../../../apps/mobile/src/Core/Dropdown/index.cjs');
+require('../../../apps/mobile/src/Core/MultiSelect/index.cjs');
+require('../../../apps/mobile/src/Core/Trees/components/CoreTree.cjs');
+require('../../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.cjs');
+require('../../../apps/mobile/src/Core/Trees/components/CoreToolbar.cjs');
+require('../../../apps/mobile/src/Core/Paginator/index.cjs');
+require('lucide-react-native');
+require('../../../apps/mobile/src/Core/SelectButton/index.cjs');
+require('../../../apps/mobile/src/Core/DataTable/DataTable.cjs');
+require('../../../apps/mobile/src/Core/Tag/index.cjs');
+require('../../../apps/mobile/src/Core/Badge/index.cjs');
+require('../../../apps/mobile/src/Core/ProgressBar/index.cjs');
+require('../../../apps/mobile/src/Core/Checkbox/index.cjs');
+require('../../../apps/mobile/src/Core/RadioButton/index.cjs');
+require('../../../apps/mobile/src/Core/Input/index.cjs');
+require('../../../apps/mobile/src/Core/Input/Field.cjs');
+require('../../../apps/mobile/src/Core/Input/Slot.cjs');
+var usePhoneInput = require('./usePhoneInput.cjs');
+var Svg = require('react-native-svg');
+require('../../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../../hooks/useComponentDefaults.cjs');
+var useResolvedStyle = require('../../../hooks/useResolvedStyle.cjs');
+var index_native = require('../../../primitives/Icon/index.cjs');
+var index_native$1 = require('../../helpers/FormContainer/index.cjs');
+var index_native$2 = require('../InputText/index.cjs');
+require('axios');
+require('../../selects/SelectContext.cjs');
+
+const KitsPhoneComponent = ({
+  ref,
+  isWithCountryCode,
+  label,
+  value,
+  placeholder,
+  onChange,
+  invalid,
+  disabled,
+  required,
+  errors,
+  hideError,
+  id,
+  defaultCountry,
+  inputSize,
+  isFloatedLabel,
+  leftAddon,
+  rightAddon,
+  includedCountries,
+  excludedCountries,
+  outputFormat = "string",
+  ...props
+}) => {
+  const { mergedProps: _mergedProps, themeStyle, elementStyles } = useComponentDefaults.default("PhoneInput", props, "Input");
+  useResolvedStyle.default(themeStyle);
+  useResolvedStyle.default(elementStyles?.root || {});
+  useSeparator.default(props);
+  const {
+    displayValue,
+    e164Value,
+    objectValue,
+    countryFlagUrl,
+    countryISO,
+    handleChange
+  } = usePhoneInput.usePhoneInput({
+    value,
+    onChange,
+    outputFormat,
+    isWithCountryCode,
+    defaultCountry,
+    includedCountries,
+    excludedCountries
+  });
+  React.useImperativeHandle(ref, () => ({
+    value: outputFormat === "object" ? objectValue ?? e164Value : e164Value,
+    setValue: (v) => handleChange(typeof v === "string" ? v : "")
+  }));
+  const flagAddon = React.useMemo(() => {
+    if (!isWithCountryCode) return leftAddon;
+    if (countryFlagUrl) {
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { width: 20, height: 20, overflow: "hidden", borderRadius: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Svg.SvgUri,
+        {
+          uri: countryFlagUrl,
+          width: 20,
+          height: 20
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(index_native.Icon, { name: "phone", size: "2xs" });
+  }, [isWithCountryCode, countryFlagUrl, countryISO, leftAddon]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index_native$1.default,
+    {
+      id,
+      inputSize,
+      isFloatedLabel,
+      errors,
+      required,
+      hideError,
+      label,
+      elementStyles,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        index_native$2.default,
+        {
+          id: `${id}-phone`,
+          keyboardNavId: id,
+          value: displayValue,
+          rightAddon,
+          leftAddon: flagAddon,
+          onChange: (e) => handleChange(e.target.value),
+          invalid,
+          disabled,
+          keyboardType: "phone-pad",
+          placeholder: placeholder ?? (isWithCountryCode ? "+1 (555) 123-4567" : ""),
+          localProps: Object.keys(themeStyle).length ? { style: { width: "100%", ...themeStyle } } : void 0
+        }
+      )
+    }
+  );
+};
+
+exports.default = KitsPhoneComponent;
+//# sourceMappingURL=index.cjs.map

package/form/inputs/PhoneInput/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/inputs/PhoneInput/index.native.tsx"],"sourcesContent":["import type {IKitsPhoneInput} from \"@lmb-it/kitsconcerto-types\";\nimport {KitsContainer, KitsInputText, Icon} from \"../../../_compat\";\nimport {useImperativeHandle, useMemo} from \"react\";\nimport {useSeparator} from \"../../../factory\";\nimport {usePhoneInput} from \"./usePhoneInput\";\nimport {SvgUri} from \"react-native-svg\";\nimport {View} from \"react-native\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\n\n\nconst KitsPhoneComponent =\n    (\n        {\n            ref,\n            isWithCountryCode,\n            label,\n            value,\n            placeholder,\n            onChange,\n            invalid,\n            disabled,\n            required,\n            errors,\n            hideError,\n            id,\n            defaultCountry,\n            inputSize,\n            isFloatedLabel,\n            leftAddon,\n            rightAddon,\n            includedCountries,\n            excludedCountries,\n            outputFormat='string',\n            ...props\n        }: IKitsPhoneInput\n    ) => {\n        const { mergedProps: _mergedProps, themeStyle, elementStyles } = useComponentDefaults('PhoneInput', props as any, 'Input');\n        const resolvedThemeStyle = useResolvedStyle(themeStyle);\n        const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n        const {nativeProps} = useSeparator<any>(props);\n\n        const {\n            displayValue,\n            e164Value,\n            objectValue,\n            countryFlagUrl,\n            countryISO,\n            handleChange,\n        } = usePhoneInput({\n            value,\n            onChange,\n            outputFormat,\n            isWithCountryCode,\n            defaultCountry,\n            includedCountries,\n            excludedCountries,\n        });\n\n        useImperativeHandle(ref, () => ({\n            value: outputFormat === 'object' ? (objectValue ?? e164Value) : e164Value,\n            setValue: (v: any) => handleChange(typeof v === \"string\" ? v : \"\"),\n        }));\n\n        const flagAddon = useMemo(() => {\n            if (!isWithCountryCode) return leftAddon;\n\n            if (countryFlagUrl) {\n                return (\n                    <View style={{width: 20, height: 20, overflow: 'hidden', borderRadius: 2}}>\n                        <SvgUri\n                            uri={countryFlagUrl}\n                            width={20}\n                            height={20}\n                        />\n                    </View>\n                );\n            }\n\n            return <Icon name=\"phone\" size={'2xs'}/>;\n        }, [isWithCountryCode, countryFlagUrl, countryISO, leftAddon]);\n\n        return (\n            <KitsContainer\n                id={id}\n                inputSize={inputSize}\n                isFloatedLabel={isFloatedLabel}\n                errors={errors}\n                required={required}\n                hideError={hideError}\n                label={label}\n                elementStyles={elementStyles}\n            >\n                <KitsInputText\n                    id={`${id}-phone`}\n                    keyboardNavId={id}\n                    value={displayValue}\n                    rightAddon={rightAddon}\n                    leftAddon={flagAddon}\n                    onChange={(e: any) => handleChange(e.target.value)}\n                    invalid={invalid}\n                    disabled={disabled}\n                    keyboardType=\"phone-pad\"\n                    placeholder={placeholder ?? (isWithCountryCode ? \"+1 (555) 123-4567\" : \"\")}\n                    localProps={Object.keys(themeStyle).length ? { style: { width: '100%', ...(themeStyle as any) } } : undefined}\n                />\n            </KitsContainer>\n        );\n    }\n\n\nexport default KitsPhoneComponent;\n"],"names":["useComponentDefaults","useResolvedStyle","useSeparator","usePhoneInput","useImperativeHandle","useMemo","jsx","View","SvgUri","Icon","KitsContainer","KitsInputText"],"mappings":"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"}

package/form/inputs/PhoneInput/index.js

@@ -0,0 +1,186 @@
+import { jsx } from 'react/jsx-runtime';
+import { useImperativeHandle, useMemo } from 'react';
+import '../../../apps/mobile/src/ui/accordion/index.js';
+import '../../../apps/mobile/src/ui/actionsheet/index.js';
+import '../../../apps/mobile/src/ui/alert/index.js';
+import '../../../apps/mobile/src/ui/alert-dialog/index.js';
+import '../../../apps/mobile/src/ui/avatar/index.js';
+import '../../../apps/mobile/src/ui/badge/index.js';
+import '../../../apps/mobile/src/ui/bottomsheet/index.js';
+import '../../../apps/mobile/src/ui/box/index.js';
+import '../../../apps/mobile/src/ui/button/index.js';
+import '../../../apps/mobile/src/ui/card/index.js';
+import '../../../apps/mobile/src/ui/center/index.js';
+import '../../../apps/mobile/src/ui/checkbox/index.js';
+import '../../../apps/mobile/src/ui/divider/index.js';
+import '../../../apps/mobile/src/ui/drawer/index.js';
+import '../../../apps/mobile/src/ui/fab/index.js';
+import { View } from 'react-native';
+import '../../../apps/mobile/src/ui/form-control/index.js';
+import '../../../apps/mobile/src/ui/gluestack-ui-provider/config.js';
+import '@gluestack-ui/core/overlay/creator';
+import '@gluestack-ui/core/toast/creator';
+import 'nativewind';
+import '../../../apps/mobile/src/ui/grid/index.js';
+import '../../../apps/mobile/src/ui/heading/index.js';
+import '../../../apps/mobile/src/ui/hstack/index.js';
+import '../../../apps/mobile/src/ui/icon/index.js';
+import '../../../apps/mobile/src/ui/image/index.js';
+import '../../../apps/mobile/src/ui/image-background/index.js';
+import '../../../apps/mobile/src/ui/input/index.js';
+import '../../../apps/mobile/src/ui/link/index.js';
+import '../../../apps/mobile/src/ui/menu/index.js';
+import '../../../apps/mobile/src/ui/modal/index.js';
+import '../../../apps/mobile/src/ui/popover/index.js';
+import '../../../apps/mobile/src/ui/portal/index.js';
+import '../../../apps/mobile/src/ui/pressable/index.js';
+import '../../../apps/mobile/src/ui/progress/index.js';
+import '../../../apps/mobile/src/ui/radio/index.js';
+import 'react-native-safe-area-context';
+import '../../../apps/mobile/src/ui/select/index.js';
+import '../../../apps/mobile/src/ui/skeleton/index.js';
+import '../../../apps/mobile/src/ui/slider/index.js';
+import '../../../apps/mobile/src/ui/spinner/index.js';
+import '../../../apps/mobile/src/ui/switch/index.js';
+import '../../../apps/mobile/src/ui/table/index.js';
+import '../../../apps/mobile/src/ui/text/index.js';
+import '../../../apps/mobile/src/ui/textarea/index.js';
+import '../../../apps/mobile/src/ui/toast/index.js';
+import '../../../apps/mobile/src/ui/tooltip/index.js';
+import '../../../apps/mobile/src/ui/vstack/index.js';
+import 'react-native-reanimated';
+import 'react-icons/fa';
+import 'react-icons/ai';
+import 'react-icons/io';
+import '../../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.js';
+import 'yup';
+import '../../../packages/types/src/Css/map/index.js';
+import '../../../packages/types/src/Theme/shadows.js';
+import '../../../packages/types/src/Theme/defaultTheme.js';
+import '../../../apps/mobile/src/Factory/DimensionsContext.js';
+import useSeparator from '../../../apps/mobile/src/Factory/useSeparator.js';
+import 'i18next';
+import 'react-i18next';
+import '../../../apps/mobile/src/Core/AutoComplete/index.js';
+import '../../../apps/mobile/src/Core/Dropdown/index.js';
+import '../../../apps/mobile/src/Core/MultiSelect/index.js';
+import '../../../apps/mobile/src/Core/Trees/components/CoreTree.js';
+import '../../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.js';
+import '../../../apps/mobile/src/Core/Trees/components/CoreToolbar.js';
+import '../../../apps/mobile/src/Core/Paginator/index.js';
+import 'lucide-react-native';
+import '../../../apps/mobile/src/Core/SelectButton/index.js';
+import '../../../apps/mobile/src/Core/DataTable/DataTable.js';
+import '../../../apps/mobile/src/Core/Tag/index.js';
+import '../../../apps/mobile/src/Core/Badge/index.js';
+import '../../../apps/mobile/src/Core/ProgressBar/index.js';
+import '../../../apps/mobile/src/Core/Checkbox/index.js';
+import '../../../apps/mobile/src/Core/RadioButton/index.js';
+import '../../../apps/mobile/src/Core/Input/index.js';
+import '../../../apps/mobile/src/Core/Input/Field.js';
+import '../../../apps/mobile/src/Core/Input/Slot.js';
+import { usePhoneInput } from './usePhoneInput.js';
+import { SvgUri } from 'react-native-svg';
+import '../../../contexts/DialogContext.js';
+import useComponentDefaults from '../../../hooks/useComponentDefaults.js';
+import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
+import { Icon } from '../../../primitives/Icon/index.js';
+import KitsContainer from '../../helpers/FormContainer/index.js';
+import KitsInputText from '../InputText/index.js';
+import 'axios';
+import '../../selects/SelectContext.js';
+
+const KitsPhoneComponent = ({
+  ref,
+  isWithCountryCode,
+  label,
+  value,
+  placeholder,
+  onChange,
+  invalid,
+  disabled,
+  required,
+  errors,
+  hideError,
+  id,
+  defaultCountry,
+  inputSize,
+  isFloatedLabel,
+  leftAddon,
+  rightAddon,
+  includedCountries,
+  excludedCountries,
+  outputFormat = "string",
+  ...props
+}) => {
+  const { mergedProps: _mergedProps, themeStyle, elementStyles } = useComponentDefaults("PhoneInput", props, "Input");
+  useResolvedStyle(themeStyle);
+  useResolvedStyle(elementStyles?.root || {});
+  useSeparator(props);
+  const {
+    displayValue,
+    e164Value,
+    objectValue,
+    countryFlagUrl,
+    countryISO,
+    handleChange
+  } = usePhoneInput({
+    value,
+    onChange,
+    outputFormat,
+    isWithCountryCode,
+    defaultCountry,
+    includedCountries,
+    excludedCountries
+  });
+  useImperativeHandle(ref, () => ({
+    value: outputFormat === "object" ? objectValue ?? e164Value : e164Value,
+    setValue: (v) => handleChange(typeof v === "string" ? v : "")
+  }));
+  const flagAddon = useMemo(() => {
+    if (!isWithCountryCode) return leftAddon;
+    if (countryFlagUrl) {
+      return /* @__PURE__ */ jsx(View, { style: { width: 20, height: 20, overflow: "hidden", borderRadius: 2 }, children: /* @__PURE__ */ jsx(
+        SvgUri,
+        {
+          uri: countryFlagUrl,
+          width: 20,
+          height: 20
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(Icon, { name: "phone", size: "2xs" });
+  }, [isWithCountryCode, countryFlagUrl, countryISO, leftAddon]);
+  return /* @__PURE__ */ jsx(
+    KitsContainer,
+    {
+      id,
+      inputSize,
+      isFloatedLabel,
+      errors,
+      required,
+      hideError,
+      label,
+      elementStyles,
+      children: /* @__PURE__ */ jsx(
+        KitsInputText,
+        {
+          id: `${id}-phone`,
+          keyboardNavId: id,
+          value: displayValue,
+          rightAddon,
+          leftAddon: flagAddon,
+          onChange: (e) => handleChange(e.target.value),
+          invalid,
+          disabled,
+          keyboardType: "phone-pad",
+          placeholder: placeholder ?? (isWithCountryCode ? "+1 (555) 123-4567" : ""),
+          localProps: Object.keys(themeStyle).length ? { style: { width: "100%", ...themeStyle } } : void 0
+        }
+      )
+    }
+  );
+};
+
+export { KitsPhoneComponent as default };
+//# sourceMappingURL=index.js.map

package/form/inputs/PhoneInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/form/inputs/PhoneInput/index.native.tsx"],"sourcesContent":["import type {IKitsPhoneInput} from \"@lmb-it/kitsconcerto-types\";\nimport {KitsContainer, KitsInputText, Icon} from \"../../../_compat\";\nimport {useImperativeHandle, useMemo} from \"react\";\nimport {useSeparator} from \"../../../factory\";\nimport {usePhoneInput} from \"./usePhoneInput\";\nimport {SvgUri} from \"react-native-svg\";\nimport {View} from \"react-native\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\n\n\nconst KitsPhoneComponent =\n    (\n        {\n            ref,\n            isWithCountryCode,\n            label,\n            value,\n            placeholder,\n            onChange,\n            invalid,\n            disabled,\n            required,\n            errors,\n            hideError,\n            id,\n            defaultCountry,\n            inputSize,\n            isFloatedLabel,\n            leftAddon,\n            rightAddon,\n            includedCountries,\n            excludedCountries,\n            outputFormat='string',\n            ...props\n        }: IKitsPhoneInput\n    ) => {\n        const { mergedProps: _mergedProps, themeStyle, elementStyles } = useComponentDefaults('PhoneInput', props as any, 'Input');\n        const resolvedThemeStyle = useResolvedStyle(themeStyle);\n        const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n        const {nativeProps} = useSeparator<any>(props);\n\n        const {\n            displayValue,\n            e164Value,\n            objectValue,\n            countryFlagUrl,\n            countryISO,\n            handleChange,\n        } = usePhoneInput({\n            value,\n            onChange,\n            outputFormat,\n            isWithCountryCode,\n            defaultCountry,\n            includedCountries,\n            excludedCountries,\n        });\n\n        useImperativeHandle(ref, () => ({\n            value: outputFormat === 'object' ? (objectValue ?? e164Value) : e164Value,\n            setValue: (v: any) => handleChange(typeof v === \"string\" ? v : \"\"),\n        }));\n\n        const flagAddon = useMemo(() => {\n            if (!isWithCountryCode) return leftAddon;\n\n            if (countryFlagUrl) {\n                return (\n                    <View style={{width: 20, height: 20, overflow: 'hidden', borderRadius: 2}}>\n                        <SvgUri\n                            uri={countryFlagUrl}\n                            width={20}\n                            height={20}\n                        />\n                    </View>\n                );\n            }\n\n            return <Icon name=\"phone\" size={'2xs'}/>;\n        }, [isWithCountryCode, countryFlagUrl, countryISO, leftAddon]);\n\n        return (\n            <KitsContainer\n                id={id}\n                inputSize={inputSize}\n                isFloatedLabel={isFloatedLabel}\n                errors={errors}\n                required={required}\n                hideError={hideError}\n                label={label}\n                elementStyles={elementStyles}\n            >\n                <KitsInputText\n                    id={`${id}-phone`}\n                    keyboardNavId={id}\n                    value={displayValue}\n                    rightAddon={rightAddon}\n                    leftAddon={flagAddon}\n                    onChange={(e: any) => handleChange(e.target.value)}\n                    invalid={invalid}\n                    disabled={disabled}\n                    keyboardType=\"phone-pad\"\n                    placeholder={placeholder ?? (isWithCountryCode ? \"+1 (555) 123-4567\" : \"\")}\n                    localProps={Object.keys(themeStyle).length ? { style: { width: '100%', ...(themeStyle as any) } } : undefined}\n                />\n            </KitsContainer>\n        );\n    }\n\n\nexport default KitsPhoneComponent;\n"],"names":[],"mappings":"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"}

package/form/inputs/PhoneInput/usePhoneInput.cjs

@@ -0,0 +1,224 @@
+'use strict';
+
+var React = require('react');
+var phone_masks = require('../../../third-parties/phone_masks.cjs');
+var countries = require('../../../third-parties/countries.cjs');
+
+const dialCodeMap = (() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const country of countries.countries) {
+    const existing = map.get(country.code) ?? [];
+    existing.push(country);
+    map.set(country.code, existing);
+  }
+  return map;
+})();
+const sortedDialCodes = Array.from(dialCodeMap.keys()).sort(
+  (a, b) => b.length - a.length
+);
+const isoMap = (() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const country of countries.countries) {
+    map.set(country.iso, country);
+  }
+  return map;
+})();
+const isoMaskMap = phone_masks.phone_masks;
+function extractDigits(str) {
+  return str.replace(/\D/g, "");
+}
+function normalizeIncomingValue(value) {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "object") {
+    if ("countryCode" in value && "nationalNumber" in value) {
+      const national = extractDigits(value.nationalNumber);
+      return value.countryCode ? `+${value.countryCode}${national}` : national;
+    }
+    if ("phone" in value && "code" in value) {
+      const digits = extractDigits(value.phone);
+      return value.code ? `+${value.code}${digits}` : digits;
+    }
+  }
+  return String(value);
+}
+function detectCountryFromDigits(digits, defaultCountry, filteredISOs) {
+  if (!digits) return null;
+  for (const code of sortedDialCodes) {
+    if (digits.startsWith(code)) {
+      const entries = dialCodeMap.get(code);
+      const candidates = filteredISOs ? entries.filter((e) => filteredISOs.has(e.iso)) : entries;
+      if (candidates.length === 0) continue;
+      if (candidates.length === 1) return candidates[0] ?? null;
+      const preferred = candidates.find((e) => e.iso === defaultCountry);
+      return preferred ?? candidates[0] ?? null;
+    }
+  }
+  return null;
+}
+function formatWithMask(digits, mask) {
+  let result = "";
+  let digitIndex = 0;
+  for (let i = 0; i < mask.length; i++) {
+    if (digitIndex >= digits.length) break;
+    const maskChar = mask[i];
+    if (maskChar === "9") {
+      result += digits[digitIndex];
+      digitIndex++;
+    } else if (/\d/.test(maskChar)) {
+      if (digits[digitIndex] === maskChar) {
+        digitIndex++;
+      }
+      result += maskChar;
+    } else {
+      result += maskChar;
+    }
+  }
+  if (digitIndex < digits.length) {
+    result += digits.slice(digitIndex);
+  }
+  return result;
+}
+function deriveNationalFormatted(internationalFormatted, countryCode) {
+  let pos = 0;
+  let codeDigitsConsumed = 0;
+  if (internationalFormatted[pos] === "+") pos++;
+  while (pos < internationalFormatted.length && codeDigitsConsumed < countryCode.length) {
+    const ch = internationalFormatted[pos];
+    if (/\d/.test(ch)) {
+      codeDigitsConsumed++;
+    }
+    pos++;
+  }
+  while (pos < internationalFormatted.length && /[\s\-()]/.test(internationalFormatted[pos])) {
+    pos++;
+  }
+  return internationalFormatted.slice(pos);
+}
+function usePhoneInput({
+  value,
+  onChange,
+  outputFormat = "string",
+  isWithCountryCode,
+  defaultCountry = "US",
+  includedCountries,
+  excludedCountries
+}) {
+  const filteredISOs = React.useMemo(() => {
+    if (!includedCountries?.length && !excludedCountries?.length) return null;
+    let isos = new Set(isoMap.keys());
+    if (includedCountries?.length) {
+      const included = /* @__PURE__ */ new Set();
+      for (const c of countries.countries) {
+        if (includedCountries.includes(c.iso) || includedCountries.includes(c.name)) {
+          included.add(c.iso);
+        }
+      }
+      isos = included;
+    }
+    if (excludedCountries?.length) {
+      for (const c of countries.countries) {
+        if (excludedCountries.includes(c.iso) || excludedCountries.includes(c.name)) {
+          isos.delete(c.iso);
+        }
+      }
+    }
+    return isos;
+  }, [includedCountries, excludedCountries]);
+  const [rawDigits, setRawDigits] = React.useState(
+    () => extractDigits(normalizeIncomingValue(value))
+  );
+  React.useEffect(() => {
+    const normalized = normalizeIncomingValue(value);
+    const digits = extractDigits(normalized);
+    setRawDigits(digits);
+  }, [value]);
+  const detectedCountry = React.useMemo(() => {
+    if (!isWithCountryCode || !rawDigits) {
+      if (isWithCountryCode && defaultCountry) {
+        return isoMap.get(defaultCountry) ?? null;
+      }
+      return null;
+    }
+    return detectCountryFromDigits(rawDigits, defaultCountry, filteredISOs);
+  }, [rawDigits, isWithCountryCode, defaultCountry, filteredISOs]);
+  const displayValue = React.useMemo(() => {
+    if (!rawDigits) return "";
+    if (!isWithCountryCode) return rawDigits;
+    if (detectedCountry) {
+      const mask = isoMaskMap[detectedCountry.iso];
+      if (mask) return formatWithMask(rawDigits, mask);
+    }
+    return `+${rawDigits}`;
+  }, [rawDigits, isWithCountryCode, detectedCountry]);
+  const e164Value = React.useMemo(() => {
+    if (!rawDigits) return "";
+    return `+${rawDigits}`;
+  }, [rawDigits]);
+  const objectValue = React.useMemo(() => {
+    if (!rawDigits || !isWithCountryCode || !detectedCountry) return null;
+    const countryCode = detectedCountry.code;
+    const nationalNumber = rawDigits.startsWith(countryCode) ? rawDigits.slice(countryCode.length) : rawDigits;
+    const internationalFormatted = displayValue;
+    const nationalFormatted = deriveNationalFormatted(internationalFormatted, countryCode);
+    return {
+      countryCode,
+      nationalNumber,
+      internationalFormatted,
+      nationalFormatted,
+      iso: detectedCountry.iso
+    };
+  }, [rawDigits, isWithCountryCode, detectedCountry, displayValue]);
+  const handleChange = React.useCallback(
+    (raw) => {
+      const digits = extractDigits(raw);
+      setRawDigits(digits);
+      if (!isWithCountryCode) {
+        onChange?.(digits);
+        return;
+      }
+      if (outputFormat === "object") {
+        const country = detectCountryFromDigits(digits, defaultCountry, filteredISOs);
+        if (country && digits) {
+          const cc = country.code;
+          const national = digits.startsWith(cc) ? digits.slice(cc.length) : digits;
+          const mask = isoMaskMap[country.iso];
+          const intlFormatted = mask ? formatWithMask(digits, mask) : `+${digits}`;
+          const natFormatted = deriveNationalFormatted(intlFormatted, cc);
+          onChange?.({
+            countryCode: cc,
+            nationalNumber: national,
+            internationalFormatted: intlFormatted,
+            nationalFormatted: natFormatted,
+            iso: country.iso
+          });
+        } else {
+          onChange?.({
+            countryCode: "",
+            nationalNumber: digits,
+            internationalFormatted: digits ? `+${digits}` : "",
+            nationalFormatted: digits,
+            iso: ""
+          });
+        }
+      } else {
+        const e164 = digits ? `+${digits}` : "";
+        onChange?.(e164);
+      }
+    },
+    [isWithCountryCode, outputFormat, onChange, defaultCountry, filteredISOs]
+  );
+  return {
+    displayValue,
+    e164Value,
+    objectValue,
+    countryISO: detectedCountry?.iso ?? null,
+    countryFlagUrl: detectedCountry?.flag ?? null,
+    handleChange
+  };
+}
+
+exports.extractDigits = extractDigits;
+exports.normalizeIncomingValue = normalizeIncomingValue;
+exports.usePhoneInput = usePhoneInput;
+//# sourceMappingURL=usePhoneInput.cjs.map