@lmb-it/kitsconcerto-native 0.1.236

package/form/inputs/InputMask/index.cjs

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index_native = require('../../helpers/FormContainer/index.cjs');
+var mask = require('../../helpers/native/mask.cjs');
+var keyboardFromFilter = require('../../helpers/native/keyboardFromFilter.cjs');
+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');
+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');
+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');
+var index = require('../../../apps/mobile/src/Core/Input/index.cjs');
+var Field = require('../../../apps/mobile/src/Core/Input/Field.cjs');
+require('../../../apps/mobile/src/Core/Input/Slot.cjs');
+var useFormInputController_native = require('../../helpers/useFormInputController/useFormInputController.cjs');
+var locale = require('../../../hooks/locale.cjs');
+require('../../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../../hooks/useComponentDefaults.cjs');
+var useResolvedStyle = require('../../../hooks/useResolvedStyle.cjs');
+
+const KitsInputMask = ({ ref, ...rawProps }) => {
+  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults.default("InputMask", rawProps, "Input");
+  const { isRTL } = locale.useLanguage();
+  const resolvedThemeStyle = useResolvedStyle.default(themeStyle);
+  const resolvedRootStyle = useResolvedStyle.default(elementStyles?.root || {});
+  const {
+    id,
+    label,
+    required,
+    value,
+    defaultValue,
+    attached,
+    errors,
+    hideError,
+    invalid,
+    isFloatedLabel,
+    disabled,
+    helperText,
+    mask: mask$1,
+    unmask,
+    leftAddon,
+    rightAddon,
+    onChange,
+    placeholder
+  } = props;
+  const { emitChange } = useFormInputController_native.useFormInputController({
+    value,
+    defaultValue,
+    onChange
+  });
+  const [maskedDisplay, setMaskedDisplay] = React.useState(() => {
+    const incoming = String(value ?? defaultValue ?? "");
+    return mask$1 ? mask.formatWithMask(incoming, mask$1).masked : incoming;
+  });
+  React.useEffect(() => {
+    const incoming = String(value ?? defaultValue ?? "");
+    setMaskedDisplay(mask$1 ? mask.formatWithMask(incoming, mask$1).masked : incoming);
+  }, [value, defaultValue, mask$1]);
+  const resolvedKeyboardType = keyboardFromFilter.keyboardTypeFromMask(mask$1);
+  const handleChangeText = (raw) => {
+    const res = mask$1 ? mask.formatWithMask(raw, mask$1) : { masked: raw, unmasked: raw };
+    setMaskedDisplay(res.masked);
+    emitChange(unmask ? res.unmasked : res.masked);
+  };
+  const [isFocused, setIsFocused] = React.useState(false);
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      isDisabled: disabled,
+      isInvalid: !!invalid,
+      isFocused,
+      style: { width: "100%", ...resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Field.default,
+        {
+          ref,
+          value: maskedDisplay,
+          placeholder,
+          keyboardType: resolvedKeyboardType,
+          onChangeText: handleChangeText,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          style: {
+            textAlign: isRTL ? "right" : "left",
+            writingDirection: isRTL ? "rtl" : "ltr"
+          }
+        }
+      )
+    }
+  );
+  if (attached) {
+    return inputEl;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index_native.default,
+    {
+      id,
+      helperText,
+      isFloatedLabel,
+      errors,
+      invalid,
+      label,
+      hideError,
+      required,
+      disabled,
+      leftAddon,
+      rightAddon,
+      elementStyles,
+      children: inputEl
+    }
+  );
+};
+
+exports.default = KitsInputMask;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/inputs/InputMask/index.native.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { IKitsInputMask } from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { formatWithMask } from \"../../helpers/native/mask\";\nimport { keyboardTypeFromMask } from \"../../helpers/native/keyboardFromFilter\";\nimport {\n    KitsCoreInput as Input,\n    KitsCoreInputField as InputField,\n} from \"@lmb-it/kitsconcertomobile\";\nimport { useFormInputController } from \"../../helpers/useFormInputController\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport { useLanguage } from \"../../../_compat\";\n\nconst KitsInputMask = ({ ref, ...rawProps }: IKitsInputMask) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('InputMask', rawProps, 'Input');\n    const { isRTL } = useLanguage();\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        id,\n        label,\n        required,\n        value,\n        defaultValue,\n        attached,\n        errors,\n        hideError,\n        invalid,\n        isFloatedLabel,\n        disabled,\n        helperText,\n        mask,\n        unmask,\n        leftAddon,\n        rightAddon,\n        onChange,\n        placeholder,\n    } = props;\n\n    const { emitChange } =\n        useFormInputController<string>({\n            value,\n            defaultValue,\n            onChange,\n        });\n\n    // The displayed value is always the masked variant. We track it in local\n    // state so re-renders triggered by the form (which may receive either the\n    // masked or unmasked value depending on `unmask`) don't unmask the input.\n    const [maskedDisplay, setMaskedDisplay] = useState<string>(() => {\n        const incoming = String(value ?? defaultValue ?? \"\");\n        return mask ? formatWithMask(incoming, mask).masked : incoming;\n    });\n\n    useEffect(() => {\n        const incoming = String(value ?? defaultValue ?? \"\");\n        setMaskedDisplay(mask ? formatWithMask(incoming, mask).masked : incoming);\n    }, [value, defaultValue, mask]);\n\n    const resolvedKeyboardType = keyboardTypeFromMask(mask);\n\n    const handleChangeText = (raw: string) => {\n        const res = mask\n            ? formatWithMask(raw, mask)\n            : { masked: raw, unmasked: raw };\n\n        setMaskedDisplay(res.masked);\n        emitChange(unmask ? res.unmasked : res.masked);\n    };\n\n    const [isFocused, setIsFocused] = useState(false);\n\n    // Pure input element. The inner Input is borderless (theme defaults\n    // provide `Input.root.style.{borderWidth: 0, borderRadius: 0}`); the\n    // visual frame is owned by the FormContainer inputGroup wrapper. Addon\n    // rendering also lives in FormContainer — this component never wraps\n    // its own children in addons.\n    const inputEl = (\n        <Input\n            isDisabled={disabled}\n            isInvalid={!!invalid}\n            isFocused={isFocused}\n            style={{ width: \"100%\", ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        >\n            <InputField\n                ref={ref}\n                value={maskedDisplay}\n                placeholder={placeholder}\n                keyboardType={resolvedKeyboardType}\n                onChangeText={handleChangeText}\n                onFocus={() => setIsFocused(true)}\n                onBlur={() => setIsFocused(false)}\n                style={{\n                    textAlign: isRTL ? \"right\" : \"left\",\n                    writingDirection: isRTL ? \"rtl\" : \"ltr\",\n                }}\n            />\n        </Input>\n    );\n\n    // `attached`: input sits inside an outer group that already owns the\n    // chrome (FormContainer is upstream). Mirror web: return bare input.\n    if(attached){\n        return inputEl;\n    }\n\n    return (\n        <KitsContainer\n            id={id}\n            helperText={helperText}\n            isFloatedLabel={isFloatedLabel}\n            errors={errors}\n            invalid={invalid}\n            label={label}\n            hideError={hideError}\n            required={required}\n            disabled={disabled}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            elementStyles={elementStyles}\n        >\n            {inputEl}\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputMask;\n"],"names":["useComponentDefaults","useLanguage","useResolvedStyle","mask","useFormInputController","useState","formatWithMask","useEffect","keyboardTypeFromMask","jsx","Input","InputField","KitsContainer"],"mappings":"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"}

package/form/inputs/InputMask/index.js

@@ -0,0 +1,184 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import KitsContainer from '../../helpers/FormContainer/index.js';
+import { formatWithMask } from '../../helpers/native/mask.js';
+import { keyboardTypeFromMask } from '../../helpers/native/keyboardFromFilter.js';
+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 '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 '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 KitsCoreInput from '../../../apps/mobile/src/Core/Input/index.js';
+import KitsCoreInputField from '../../../apps/mobile/src/Core/Input/Field.js';
+import '../../../apps/mobile/src/Core/Input/Slot.js';
+import { useFormInputController } from '../../helpers/useFormInputController/useFormInputController.js';
+import { useLanguage } from '../../../hooks/locale.js';
+import '../../../contexts/DialogContext.js';
+import useComponentDefaults from '../../../hooks/useComponentDefaults.js';
+import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
+
+const KitsInputMask = ({ ref, ...rawProps }) => {
+  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults("InputMask", rawProps, "Input");
+  const { isRTL } = useLanguage();
+  const resolvedThemeStyle = useResolvedStyle(themeStyle);
+  const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});
+  const {
+    id,
+    label,
+    required,
+    value,
+    defaultValue,
+    attached,
+    errors,
+    hideError,
+    invalid,
+    isFloatedLabel,
+    disabled,
+    helperText,
+    mask,
+    unmask,
+    leftAddon,
+    rightAddon,
+    onChange,
+    placeholder
+  } = props;
+  const { emitChange } = useFormInputController({
+    value,
+    defaultValue,
+    onChange
+  });
+  const [maskedDisplay, setMaskedDisplay] = useState(() => {
+    const incoming = String(value ?? defaultValue ?? "");
+    return mask ? formatWithMask(incoming, mask).masked : incoming;
+  });
+  useEffect(() => {
+    const incoming = String(value ?? defaultValue ?? "");
+    setMaskedDisplay(mask ? formatWithMask(incoming, mask).masked : incoming);
+  }, [value, defaultValue, mask]);
+  const resolvedKeyboardType = keyboardTypeFromMask(mask);
+  const handleChangeText = (raw) => {
+    const res = mask ? formatWithMask(raw, mask) : { masked: raw, unmasked: raw };
+    setMaskedDisplay(res.masked);
+    emitChange(unmask ? res.unmasked : res.masked);
+  };
+  const [isFocused, setIsFocused] = useState(false);
+  const inputEl = /* @__PURE__ */ jsx(
+    KitsCoreInput,
+    {
+      isDisabled: disabled,
+      isInvalid: !!invalid,
+      isFocused,
+      style: { width: "100%", ...resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle },
+      children: /* @__PURE__ */ jsx(
+        KitsCoreInputField,
+        {
+          ref,
+          value: maskedDisplay,
+          placeholder,
+          keyboardType: resolvedKeyboardType,
+          onChangeText: handleChangeText,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          style: {
+            textAlign: isRTL ? "right" : "left",
+            writingDirection: isRTL ? "rtl" : "ltr"
+          }
+        }
+      )
+    }
+  );
+  if (attached) {
+    return inputEl;
+  }
+  return /* @__PURE__ */ jsx(
+    KitsContainer,
+    {
+      id,
+      helperText,
+      isFloatedLabel,
+      errors,
+      invalid,
+      label,
+      hideError,
+      required,
+      disabled,
+      leftAddon,
+      rightAddon,
+      elementStyles,
+      children: inputEl
+    }
+  );
+};
+
+export { KitsInputMask as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/form/inputs/InputMask/index.native.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { IKitsInputMask } from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { formatWithMask } from \"../../helpers/native/mask\";\nimport { keyboardTypeFromMask } from \"../../helpers/native/keyboardFromFilter\";\nimport {\n    KitsCoreInput as Input,\n    KitsCoreInputField as InputField,\n} from \"@lmb-it/kitsconcertomobile\";\nimport { useFormInputController } from \"../../helpers/useFormInputController\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport { useLanguage } from \"../../../_compat\";\n\nconst KitsInputMask = ({ ref, ...rawProps }: IKitsInputMask) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('InputMask', rawProps, 'Input');\n    const { isRTL } = useLanguage();\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        id,\n        label,\n        required,\n        value,\n        defaultValue,\n        attached,\n        errors,\n        hideError,\n        invalid,\n        isFloatedLabel,\n        disabled,\n        helperText,\n        mask,\n        unmask,\n        leftAddon,\n        rightAddon,\n        onChange,\n        placeholder,\n    } = props;\n\n    const { emitChange } =\n        useFormInputController<string>({\n            value,\n            defaultValue,\n            onChange,\n        });\n\n    // The displayed value is always the masked variant. We track it in local\n    // state so re-renders triggered by the form (which may receive either the\n    // masked or unmasked value depending on `unmask`) don't unmask the input.\n    const [maskedDisplay, setMaskedDisplay] = useState<string>(() => {\n        const incoming = String(value ?? defaultValue ?? \"\");\n        return mask ? formatWithMask(incoming, mask).masked : incoming;\n    });\n\n    useEffect(() => {\n        const incoming = String(value ?? defaultValue ?? \"\");\n        setMaskedDisplay(mask ? formatWithMask(incoming, mask).masked : incoming);\n    }, [value, defaultValue, mask]);\n\n    const resolvedKeyboardType = keyboardTypeFromMask(mask);\n\n    const handleChangeText = (raw: string) => {\n        const res = mask\n            ? formatWithMask(raw, mask)\n            : { masked: raw, unmasked: raw };\n\n        setMaskedDisplay(res.masked);\n        emitChange(unmask ? res.unmasked : res.masked);\n    };\n\n    const [isFocused, setIsFocused] = useState(false);\n\n    // Pure input element. The inner Input is borderless (theme defaults\n    // provide `Input.root.style.{borderWidth: 0, borderRadius: 0}`); the\n    // visual frame is owned by the FormContainer inputGroup wrapper. Addon\n    // rendering also lives in FormContainer — this component never wraps\n    // its own children in addons.\n    const inputEl = (\n        <Input\n            isDisabled={disabled}\n            isInvalid={!!invalid}\n            isFocused={isFocused}\n            style={{ width: \"100%\", ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        >\n            <InputField\n                ref={ref}\n                value={maskedDisplay}\n                placeholder={placeholder}\n                keyboardType={resolvedKeyboardType}\n                onChangeText={handleChangeText}\n                onFocus={() => setIsFocused(true)}\n                onBlur={() => setIsFocused(false)}\n                style={{\n                    textAlign: isRTL ? \"right\" : \"left\",\n                    writingDirection: isRTL ? \"rtl\" : \"ltr\",\n                }}\n            />\n        </Input>\n    );\n\n    // `attached`: input sits inside an outer group that already owns the\n    // chrome (FormContainer is upstream). Mirror web: return bare input.\n    if(attached){\n        return inputEl;\n    }\n\n    return (\n        <KitsContainer\n            id={id}\n            helperText={helperText}\n            isFloatedLabel={isFloatedLabel}\n            errors={errors}\n            invalid={invalid}\n            label={label}\n            hideError={hideError}\n            required={required}\n            disabled={disabled}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            elementStyles={elementStyles}\n        >\n            {inputEl}\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputMask;\n"],"names":["Input","InputField"],"mappings":"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"}