@lmb-it/kitsconcerto-native 0.1.243 → 0.1.244

package/form/helpers/FormContainer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/form/helpers/FormContainer/index.native.tsx"],"sourcesContent":["import React, { type FC, type PropsWithChildren, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport { uniqueId } from \"lodash\";\nimport ErrorMessage from \"../ErrorMessage\";\nimport type {IKitsContainer} from \"@lmb-it/kitsconcerto-types\";\nimport {\n    FormControl,\n    FormControlHelper,\n    FormControlHelperText,\n    style as resolveStyle,\n} from \"@lmb-it/kitsconcertomobile\"\nimport { Label, Text, useKitsTheme } from \"../../../_compat\";\nimport {useResolvedElementStyles, useThemedFont} from \"@lmb-it/kitsconcerto/hooks\";\n\n/**\n * KitsContainer (native) — wraps all form inputs with label, addons, helper\n * text, and errors. Mirror of the web variant: a pure renderer that does NO\n * independent theme lookup. Every slot style comes from `elementStyles`\n * passed by the parent input (already merged through the\n *   FormElement < Input/Select < InputText/DropdownSelect/… < per-instance slots\n * chain by the parent's `useComponentDefaults` call).\n *\n * Addon rendering is inlined here (matches web FormContainer). There is NO\n * `Addons` component on either platform anymore — the previous native Addons\n * helper re-resolved tokens and hardcoded `borderRadius / borderWidth /\n * padding / backgroundColor / borderColor` defaults that clobbered\n * `kitsTheme.components.*.leftAddon.style` overrides. Both bugs are fixed by\n * deleting the indirection.\n *\n * Element slots applied here (identical contract to web):\n *   container  → outer FormControl wrapper\n *   label      → Label component (plain Text path on native — see Label.native)\n *   inputGroup → input group wrapper (around addons + input). On native this\n *                wrapper carries the visual border that web gets from the\n *                `.p-inputgroup` CSS class.\n *   leftAddon  → left addon View\n *   rightAddon → right addon View\n *   helperText → helper text below the group\n *   error      → error message below the group\n *\n * The `root` slot is NOT applied here — it is applied by the parent form\n * input component directly to the inner Input/Textarea element.\n */\nconst KitsContainer: FC<PropsWithChildren<IKitsContainer>> = (props) => {\n    const {\n        id,\n        helperText,\n        children,\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        required,\n        hideError,\n        label,\n        isFloatedLabel,\n        containerStyle,\n        disabled,\n        bare,\n        elementStyles: parentElementStyles,\n    } = props;\n\n    // Pure renderer: resolve the elementStyles passed in by the parent.\n    // No `useComponentDefaults('FormContainer', …)` lookup — that key is\n    // intentionally not part of the consumer-facing theme contract.\n    const elStyles = useResolvedElementStyles(parentElementStyles || {});\n    const { resolveToken } = useKitsTheme();\n    const themedFont = useThemedFont('body');\n\n    // Generate a unique element ID (for parity with web; not used in native labels)\n    const elementId = id ? `${id}_element` : uniqueId(\"element_\");\n\n    // Derive label placement from the label prop\n    const placement = useMemo(() => {\n        if (label && typeof label === 'object' && 'placement' in label) {\n            return label.placement; // \"RL\" | \"B\" | \"T\"\n        }\n        return \"T\"; // default: top\n    }, [label]);\n\n    // Determine layout direction based on placement\n    // T = top (column, label first), B = bottom (column-reverse), RL = side-by-side (row)\n    const isHorizontal = placement === \"RL\";\n    const isBottom = placement === \"B\";\n\n    // Label uses the plain Text path (NOT the FormControlLabel path) because\n    // @lmb-it/kitsconcertomobile's FormControlLabelText strips arbitrary\n    // inline styles, which broke `kitsTheme.components.Input.label.style`\n    // overrides on native. The plain Text path forwards `style` directly.\n    const labelElement = !isFloatedLabel ? (\n        <Label label={label} elementId={elementId} required={required} style={elStyles.label || undefined} />\n    ) : null;\n\n    /**\n     * Inline addon renderer. Mirrors the dispatch web uses in FormContainer\n     * (string → text, ReactElement → element) AND adds the function-arg\n     * branch native needs because lucide-react-native icons are passed as\n     * functions `(props) => <Icon …/>`. The function-arg branch never runs\n     * on web (web never goes through this code) so it cannot affect web.\n     */\n    const renderAddon = (\n        addon: IKitsContainer[\"leftAddon\"] | IKitsContainer[\"rightAddon\"],\n    ) => {\n        if (!addon) return null;\n        if (typeof addon === \"string\" || typeof addon === \"number\") {\n            return <Text fontSize={14}>{addon}</Text>;\n        }\n        if (typeof addon === \"function\") {\n            return (addon as (args: { size: number }) => React.ReactNode)({ size: 16 });\n        }\n        if (React.isValidElement(addon)) {\n            return addon;\n        }\n        return null;\n    };\n\n    // Resolved inputGroup wrapper style. The default theme provides\n    // `Input.inputGroup.style.{borderColor, borderRadius, borderWidth, height}`\n    // — these are what give the group its visual frame. Defaults are layered\n    // *under* the user's resolved style, so a per-instance override always wins.\n    //\n    // The `invalid` border color is applied as a fallback default (after\n    // theme defaults, before user `inputGroup.borderColor` override). When\n    // `bare` is set, the whole frame is suppressed (matches web's\n    // `bareInputGroupStyle`).\n    const inputGroupStyle = useMemo(() => {\n        if (bare) {\n            // Bare mode (FilePicker, Radio, Checkbox group, …): drop ALL\n            // inputGroup chrome including `height: 52` from the theme. Web's\n            // FormContainer does the same — it passes `style={{}}` when\n            // bare (see helpers/FormContainer/index.web.tsx, the bare\n            // branch of the row Flex). Without this, the non-classic file\n            // uploader's 200px dashed drop zone was being squashed to 52px.\n            return {\n                width: \"100%\" as const,\n                borderWidth: 0,\n                borderRadius: 0,\n                overflow: \"visible\" as const,\n            };\n        }\n        const userStyle = elStyles.inputGroup || {};\n        const userOverrodeBorderColor = \"borderColor\" in userStyle;\n        return {\n            width: \"100%\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            overflow: \"hidden\" as const,\n            ...userStyle,\n            ...(invalid && !userOverrodeBorderColor\n                ? { borderColor: resolveToken(\"danger\") }\n                : {}),\n        };\n    }, [bare, elStyles.inputGroup, invalid, resolveToken]);\n\n    // Addon baseline chrome — mirrors what PrimeReact's `.p-inputgroup-addon`\n    // CSS class gives web addons (gray fill + horizontal padding + 1px\n    // separator border on the input-facing edge). On web these defaults\n    // come from CSS; on native we must apply them inline. Theme overrides\n    // (`elStyles.leftAddon` / `rightAddon`) are spread LAST so per-instance\n    // values always win. The separator border colour falls back to the\n    // inputGroup border colour for visual continuity.\n    const addonSeparatorColor = (\n        (elStyles.inputGroup && elStyles.inputGroup.borderColor) ||\n        resolveToken(\"border\")\n    );\n    const addonBaseStyle = {\n        alignItems: \"center\" as const,\n        justifyContent: \"center\" as const,\n        paddingHorizontal: 12,\n        paddingVertical: 8,\n        backgroundColor: resolveToken(\"bg-input\"),\n    };\n\n    const contentElement = (\n        <View style={inputGroupStyle}>\n            {leftAddon ? (\n                <View\n                    style={{\n                        ...addonBaseStyle,\n                        borderEndWidth: 1,\n                        borderEndColor: addonSeparatorColor,\n                        ...(elStyles.leftAddon || {}),\n                    }}\n                >\n                    {renderAddon(leftAddon)}\n                </View>\n            ) : null}\n\n            {/* `justifyContent: 'center'` vertically centres the inner Input\n                inside the 52px-tall inputGroup (matching web, where flex\n                items default to vertical alignment via the inputGroup row\n                + the input's intrinsic line-box centring). Without this,\n                placeholders and selected values sat near the top edge of\n                the input. Tall children that already fill the height\n                (textarea) are unaffected because `justifyContent: 'center'`\n                is a no-op on items that match the parent's cross-axis. */}\n            <View style={{ flex: 1, justifyContent: 'center' }}>{children}</View>\n\n            {rightAddon ? (\n                <View\n                    style={{\n                        ...addonBaseStyle,\n                        borderStartWidth: 1,\n                        borderStartColor: addonSeparatorColor,\n                        ...(elStyles.rightAddon || {}),\n                    }}\n                >\n                    {renderAddon(rightAddon)}\n                </View>\n            ) : null}\n        </View>\n    );\n\n    const containerRnStyle = useMemo(\n        () => (containerStyle && Object.keys(containerStyle).length ? resolveStyle(containerStyle) : {}),\n        [containerStyle],\n    );\n\n    return(\n        <FormControl\n            isInvalid={invalid}\n            size=\"md\"\n            isDisabled={disabled}\n            isReadOnly={disabled}\n            isRequired={required}\n            style={{\n                width:'100%', gap: 4,\n                // `bare` strips the container's DEFAULT frame, but must not\n                // override an explicit `container` slot. Spread it FIRST so a\n                // user's borderRadius / borderWidth / overflow (e.g. an Object\n                // or Group styled as a card) wins over the reset.\n                ...(bare ? { borderWidth: 0, borderRadius: 0, overflow: 'visible' } : {}),\n                ...(elStyles.container || {}),\n                ...(containerRnStyle || {}),\n            }}\n        >\n            {isHorizontal ? (\n                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, width: '100%' }}>\n                    {labelElement}\n                    <View style={{ flex: 1 }}>{contentElement}</View>\n                </View>\n            ) : isBottom ? (\n                <>\n                    {contentElement}\n                    {labelElement}\n                </>\n            ) : (\n                <>\n                    {labelElement}\n                    {contentElement}\n                </>\n            )}\n            {helperText && typeof helperText !== \"function\" && <FormControlHelper>\n                <FormControlHelperText style={{...(themedFont ? {fontFamily: themedFont} : {}), ...(elStyles.helperText || {})}}>\n                    {helperText}\n                </FormControlHelperText>\n            </FormControlHelper>}\n\n            {!hideError && <ErrorMessage invalid={invalid} errors={errors} style={elStyles.error || undefined} />}\n        </FormControl>\n    )\n};\n\nexport default KitsContainer;\n"],"names":["useResolvedElementStyles","useKitsTheme","useThemedFont","uniqueId","useMemo","jsx","Label","Text","jsxs","View","resolveStyle","FormControl","Fragment","FormControlHelper","FormControlHelperText","ErrorMessage"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/helpers/FormContainer/index.native.tsx"],"sourcesContent":["import React, { type FC, type PropsWithChildren, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport { uniqueId } from \"lodash\";\nimport ErrorMessage from \"../ErrorMessage\";\nimport type {IKitsContainer} from \"@lmb-it/kitsconcerto-types\";\nimport {\n    FormControl,\n    FormControlHelper,\n    FormControlHelperText,\n    style as resolveStyle,\n} from \"@lmb-it/kitsconcertomobile\"\nimport { Label, Text, useKitsTheme } from \"../../../_compat\";\nimport {useResolvedElementStyles, useThemedFont} from \"@lmb-it/kitsconcerto/hooks\";\n\n/**\n * KitsContainer (native) — wraps all form inputs with label, addons, helper\n * text, and errors. Mirror of the web variant: a pure renderer that does NO\n * independent theme lookup. Every slot style comes from `elementStyles`\n * passed by the parent input (already merged through the\n *   FormElement < Input/Select < InputText/DropdownSelect/… < per-instance slots\n * chain by the parent's `useComponentDefaults` call).\n *\n * Addon rendering is inlined here (matches web FormContainer). There is NO\n * `Addons` component on either platform anymore — the previous native Addons\n * helper re-resolved tokens and hardcoded `borderRadius / borderWidth /\n * padding / backgroundColor / borderColor` defaults that clobbered\n * `kitsTheme.components.*.leftAddon.style` overrides. Both bugs are fixed by\n * deleting the indirection.\n *\n * Element slots applied here (identical contract to web):\n *   container  → outer FormControl wrapper\n *   label      → Label component (plain Text path on native — see Label.native)\n *   inputGroup → input group wrapper (around addons + input). On native this\n *                wrapper carries the visual border that web gets from the\n *                `.p-inputgroup` CSS class.\n *   leftAddon  → left addon View\n *   rightAddon → right addon View\n *   helperText → helper text below the group\n *   error      → error message below the group\n *\n * The `root` slot is NOT applied here — it is applied by the parent form\n * input component directly to the inner Input/Textarea element.\n */\nconst KitsContainer: FC<PropsWithChildren<IKitsContainer>> = (props) => {\n    const {\n        id,\n        helperText,\n        children,\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        required,\n        hideError,\n        label,\n        isFloatedLabel,\n        containerStyle,\n        disabled,\n        bare,\n        elementStyles: parentElementStyles,\n    } = props;\n\n    // Pure renderer: resolve the elementStyles passed in by the parent.\n    // No `useComponentDefaults('FormContainer', …)` lookup — that key is\n    // intentionally not part of the consumer-facing theme contract.\n    const elStyles = useResolvedElementStyles(parentElementStyles || {});\n    const { resolveToken } = useKitsTheme();\n    const themedFont = useThemedFont('body');\n\n    // Generate a unique element ID (for parity with web; not used in native labels)\n    const elementId = id ? `${id}_element` : uniqueId(\"element_\");\n\n    // Derive label placement from the label prop\n    const placement = useMemo(() => {\n        if (label && typeof label === 'object' && 'placement' in label) {\n            return label.placement; // \"RL\" | \"B\" | \"T\"\n        }\n        return \"T\"; // default: top\n    }, [label]);\n\n    // Determine layout direction based on placement\n    // T = top (column, label first), B = bottom (column-reverse), RL = side-by-side (row)\n    const isHorizontal = placement === \"RL\";\n    const isBottom = placement === \"B\";\n\n    // Label uses the plain Text path (NOT the FormControlLabel path) because\n    // @lmb-it/kitsconcertomobile's FormControlLabelText strips arbitrary\n    // inline styles, which broke `kitsTheme.components.Input.label.style`\n    // overrides on native. The plain Text path forwards `style` directly.\n    const labelElement = !isFloatedLabel ? (\n        <Label label={label} elementId={elementId} required={required} style={elStyles.label || undefined} />\n    ) : null;\n\n    /**\n     * Inline addon renderer. Mirrors the dispatch web uses in FormContainer\n     * (string → text, ReactElement → element) AND adds the function-arg\n     * branch native needs because lucide-react-native icons are passed as\n     * functions `(props) => <Icon …/>`. The function-arg branch never runs\n     * on web (web never goes through this code) so it cannot affect web.\n     */\n    const renderAddon = (\n        addon: IKitsContainer[\"leftAddon\"] | IKitsContainer[\"rightAddon\"],\n    ) => {\n        if (!addon) return null;\n        if (typeof addon === \"string\" || typeof addon === \"number\") {\n            return <Text fontSize={14}>{addon}</Text>;\n        }\n        if (typeof addon === \"function\") {\n            return (addon as (args: { size: number }) => React.ReactNode)({ size: 16 });\n        }\n        if (React.isValidElement(addon)) {\n            return addon;\n        }\n        return null;\n    };\n\n    // Resolved inputGroup wrapper style. The default theme provides\n    // `Input.inputGroup.style.{borderColor, borderRadius, borderWidth, height}`\n    // — these are what give the group its visual frame. Defaults are layered\n    // *under* the user's resolved style, so a per-instance override always wins.\n    //\n    // The `invalid` border color is applied as a fallback default (after\n    // theme defaults, before user `inputGroup.borderColor` override). When\n    // `bare` is set, the whole frame is suppressed (matches web's\n    // `bareInputGroupStyle`).\n    const inputGroupStyle = useMemo(() => {\n        if (bare) {\n            // Bare mode (FilePicker, Radio, Checkbox group, …): drop ALL\n            // inputGroup chrome including `height: 52` from the theme. Web's\n            // FormContainer does the same — it passes `style={{}}` when\n            // bare (see helpers/FormContainer/index.web.tsx, the bare\n            // branch of the row Flex). Without this, the non-classic file\n            // uploader's 200px dashed drop zone was being squashed to 52px.\n            return {\n                width: \"100%\" as const,\n                borderWidth: 0,\n                borderRadius: 0,\n                overflow: \"visible\" as const,\n            };\n        }\n        const userStyle = elStyles.inputGroup || {};\n        const userOverrodeBorderColor = \"borderColor\" in userStyle;\n        return {\n            width: \"100%\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            overflow: \"hidden\" as const,\n            ...userStyle,\n            ...(invalid && !userOverrodeBorderColor\n                ? { borderColor: resolveToken(\"danger\") }\n                : {}),\n        };\n    }, [bare, elStyles.inputGroup, invalid, resolveToken]);\n\n    // Addon baseline chrome — mirrors what PrimeReact's `.p-inputgroup-addon`\n    // CSS class gives web addons (gray fill + horizontal padding + 1px\n    // separator border on the input-facing edge). On web these defaults\n    // come from CSS; on native we must apply them inline. Theme overrides\n    // (`elStyles.leftAddon` / `rightAddon`) are spread LAST so per-instance\n    // values always win. The separator border colour falls back to the\n    // inputGroup border colour for visual continuity.\n    const addonSeparatorColor = (\n        (elStyles.inputGroup && elStyles.inputGroup.borderColor) ||\n        resolveToken(\"border\")\n    );\n    const addonBaseStyle = {\n        alignItems: \"center\" as const,\n        justifyContent: \"center\" as const,\n        paddingHorizontal: 12,\n        paddingVertical: 8,\n        backgroundColor: resolveToken(\"bg-input\"),\n    };\n\n    const contentElement = (\n        <View style={inputGroupStyle}>\n            {leftAddon ? (\n                <View\n                    style={{\n                        ...addonBaseStyle,\n                        borderEndWidth: 1,\n                        borderEndColor: addonSeparatorColor,\n                        ...(elStyles.leftAddon || {}),\n                    }}\n                >\n                    {renderAddon(leftAddon)}\n                </View>\n            ) : null}\n\n            {/* `justifyContent: 'center'` vertically centres the inner Input\n                inside the 52px-tall inputGroup (matching web, where flex\n                items default to vertical alignment via the inputGroup row\n                + the input's intrinsic line-box centring). Without this,\n                placeholders and selected values sat near the top edge of\n                the input. Tall children that already fill the height\n                (textarea) are unaffected because `justifyContent: 'center'`\n                is a no-op on items that match the parent's cross-axis. */}\n            <View style={{ flex: 1, justifyContent: 'center' }}>{children}</View>\n\n            {rightAddon ? (\n                <View\n                    style={{\n                        ...addonBaseStyle,\n                        borderStartWidth: 1,\n                        borderStartColor: addonSeparatorColor,\n                        ...(elStyles.rightAddon || {}),\n                    }}\n                >\n                    {renderAddon(rightAddon)}\n                </View>\n            ) : null}\n        </View>\n    );\n\n    const containerRnStyle = useMemo(\n        () => (containerStyle && Object.keys(containerStyle).length ? resolveStyle(containerStyle) : {}),\n        [containerStyle],\n    );\n\n    return(\n        <FormControl\n            isInvalid={invalid}\n            size=\"md\"\n            isDisabled={disabled}\n            isReadOnly={disabled}\n            isRequired={required}\n            style={{\n                width:'100%', gap: 4,\n                // `bare` strips the container's DEFAULT frame, but must not\n                // override an explicit `container` slot. Spread it FIRST so a\n                // user's borderRadius / borderWidth / overflow (e.g. an Object\n                // or Group styled as a card) wins over the reset.\n                ...(bare ? { borderWidth: 0, borderRadius: 0, overflow: 'visible' } : {}),\n                ...(elStyles.container || {}),\n                ...(containerRnStyle || {}),\n            }}\n        >\n            {isHorizontal ? (\n                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, width: '100%' }}>\n                    {labelElement}\n                    <View style={{ flex: 1 }}>{contentElement}</View>\n                </View>\n            ) : isBottom ? (\n                <>\n                    {contentElement}\n                    {labelElement}\n                </>\n            ) : (\n                <>\n                    {labelElement}\n                    {contentElement}\n                </>\n            )}\n            {helperText && typeof helperText !== \"function\" && <FormControlHelper>\n                <FormControlHelperText style={{...(themedFont ? {fontFamily: themedFont} : {}), ...(elStyles.helperText || {})}}>\n                    {helperText}\n                </FormControlHelperText>\n            </FormControlHelper>}\n\n            {!hideError && <ErrorMessage invalid={invalid} errors={errors} style={elStyles.error || undefined} />}\n        </FormControl>\n    )\n};\n\nexport default KitsContainer;\n"],"names":["useResolvedElementStyles","useKitsTheme","useThemedFont","uniqueId","useMemo","jsx","Label","Text","jsxs","View","resolveStyle","FormControl","Fragment","FormControlHelper","FormControlHelperText","ErrorMessage"],"mappings":"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"}

package/form/helpers/FormContainer/index.js

@@ -61,6 +61,8 @@ 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 '../../../packages/types/src/Theme/alphaColors.js';
+import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';
 import 'react-i18next';
 import '../../../apps/mobile/src/Core/AutoComplete/index.js';

package/form/helpers/FormContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/form/helpers/FormContainer/index.native.tsx"],"sourcesContent":["import React, { type FC, type PropsWithChildren, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport { uniqueId } from \"lodash\";\nimport ErrorMessage from \"../ErrorMessage\";\nimport type {IKitsContainer} from \"@lmb-it/kitsconcerto-types\";\nimport {\n    FormControl,\n    FormControlHelper,\n    FormControlHelperText,\n    style as resolveStyle,\n} from \"@lmb-it/kitsconcertomobile\"\nimport { Label, Text, useKitsTheme } from \"../../../_compat\";\nimport {useResolvedElementStyles, useThemedFont} from \"@lmb-it/kitsconcerto/hooks\";\n\n/**\n * KitsContainer (native) — wraps all form inputs with label, addons, helper\n * text, and errors. Mirror of the web variant: a pure renderer that does NO\n * independent theme lookup. Every slot style comes from `elementStyles`\n * passed by the parent input (already merged through the\n *   FormElement < Input/Select < InputText/DropdownSelect/… < per-instance slots\n * chain by the parent's `useComponentDefaults` call).\n *\n * Addon rendering is inlined here (matches web FormContainer). There is NO\n * `Addons` component on either platform anymore — the previous native Addons\n * helper re-resolved tokens and hardcoded `borderRadius / borderWidth /\n * padding / backgroundColor / borderColor` defaults that clobbered\n * `kitsTheme.components.*.leftAddon.style` overrides. Both bugs are fixed by\n * deleting the indirection.\n *\n * Element slots applied here (identical contract to web):\n *   container  → outer FormControl wrapper\n *   label      → Label component (plain Text path on native — see Label.native)\n *   inputGroup → input group wrapper (around addons + input). On native this\n *                wrapper carries the visual border that web gets from the\n *                `.p-inputgroup` CSS class.\n *   leftAddon  → left addon View\n *   rightAddon → right addon View\n *   helperText → helper text below the group\n *   error      → error message below the group\n *\n * The `root` slot is NOT applied here — it is applied by the parent form\n * input component directly to the inner Input/Textarea element.\n */\nconst KitsContainer: FC<PropsWithChildren<IKitsContainer>> = (props) => {\n    const {\n        id,\n        helperText,\n        children,\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        required,\n        hideError,\n        label,\n        isFloatedLabel,\n        containerStyle,\n        disabled,\n        bare,\n        elementStyles: parentElementStyles,\n    } = props;\n\n    // Pure renderer: resolve the elementStyles passed in by the parent.\n    // No `useComponentDefaults('FormContainer', …)` lookup — that key is\n    // intentionally not part of the consumer-facing theme contract.\n    const elStyles = useResolvedElementStyles(parentElementStyles || {});\n    const { resolveToken } = useKitsTheme();\n    const themedFont = useThemedFont('body');\n\n    // Generate a unique element ID (for parity with web; not used in native labels)\n    const elementId = id ? `${id}_element` : uniqueId(\"element_\");\n\n    // Derive label placement from the label prop\n    const placement = useMemo(() => {\n        if (label && typeof label === 'object' && 'placement' in label) {\n            return label.placement; // \"RL\" | \"B\" | \"T\"\n        }\n        return \"T\"; // default: top\n    }, [label]);\n\n    // Determine layout direction based on placement\n    // T = top (column, label first), B = bottom (column-reverse), RL = side-by-side (row)\n    const isHorizontal = placement === \"RL\";\n    const isBottom = placement === \"B\";\n\n    // Label uses the plain Text path (NOT the FormControlLabel path) because\n    // @lmb-it/kitsconcertomobile's FormControlLabelText strips arbitrary\n    // inline styles, which broke `kitsTheme.components.Input.label.style`\n    // overrides on native. The plain Text path forwards `style` directly.\n    const labelElement = !isFloatedLabel ? (\n        <Label label={label} elementId={elementId} required={required} style={elStyles.label || undefined} />\n    ) : null;\n\n    /**\n     * Inline addon renderer. Mirrors the dispatch web uses in FormContainer\n     * (string → text, ReactElement → element) AND adds the function-arg\n     * branch native needs because lucide-react-native icons are passed as\n     * functions `(props) => <Icon …/>`. The function-arg branch never runs\n     * on web (web never goes through this code) so it cannot affect web.\n     */\n    const renderAddon = (\n        addon: IKitsContainer[\"leftAddon\"] | IKitsContainer[\"rightAddon\"],\n    ) => {\n        if (!addon) return null;\n        if (typeof addon === \"string\" || typeof addon === \"number\") {\n            return <Text fontSize={14}>{addon}</Text>;\n        }\n        if (typeof addon === \"function\") {\n            return (addon as (args: { size: number }) => React.ReactNode)({ size: 16 });\n        }\n        if (React.isValidElement(addon)) {\n            return addon;\n        }\n        return null;\n    };\n\n    // Resolved inputGroup wrapper style. The default theme provides\n    // `Input.inputGroup.style.{borderColor, borderRadius, borderWidth, height}`\n    // — these are what give the group its visual frame. Defaults are layered\n    // *under* the user's resolved style, so a per-instance override always wins.\n    //\n    // The `invalid` border color is applied as a fallback default (after\n    // theme defaults, before user `inputGroup.borderColor` override). When\n    // `bare` is set, the whole frame is suppressed (matches web's\n    // `bareInputGroupStyle`).\n    const inputGroupStyle = useMemo(() => {\n        if (bare) {\n            // Bare mode (FilePicker, Radio, Checkbox group, …): drop ALL\n            // inputGroup chrome including `height: 52` from the theme. Web's\n            // FormContainer does the same — it passes `style={{}}` when\n            // bare (see helpers/FormContainer/index.web.tsx, the bare\n            // branch of the row Flex). Without this, the non-classic file\n            // uploader's 200px dashed drop zone was being squashed to 52px.\n            return {\n                width: \"100%\" as const,\n                borderWidth: 0,\n                borderRadius: 0,\n                overflow: \"visible\" as const,\n            };\n        }\n        const userStyle = elStyles.inputGroup || {};\n        const userOverrodeBorderColor = \"borderColor\" in userStyle;\n        return {\n            width: \"100%\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            overflow: \"hidden\" as const,\n            ...userStyle,\n            ...(invalid && !userOverrodeBorderColor\n                ? { borderColor: resolveToken(\"danger\") }\n                : {}),\n        };\n    }, [bare, elStyles.inputGroup, invalid, resolveToken]);\n\n    // Addon baseline chrome — mirrors what PrimeReact's `.p-inputgroup-addon`\n    // CSS class gives web addons (gray fill + horizontal padding + 1px\n    // separator border on the input-facing edge). On web these defaults\n    // come from CSS; on native we must apply them inline. Theme overrides\n    // (`elStyles.leftAddon` / `rightAddon`) are spread LAST so per-instance\n    // values always win. The separator border colour falls back to the\n    // inputGroup border colour for visual continuity.\n    const addonSeparatorColor = (\n        (elStyles.inputGroup && elStyles.inputGroup.borderColor) ||\n        resolveToken(\"border\")\n    );\n    const addonBaseStyle = {\n        alignItems: \"center\" as const,\n        justifyContent: \"center\" as const,\n        paddingHorizontal: 12,\n        paddingVertical: 8,\n        backgroundColor: resolveToken(\"bg-input\"),\n    };\n\n    const contentElement = (\n        <View style={inputGroupStyle}>\n            {leftAddon ? (\n                <View\n                    style={{\n                        ...addonBaseStyle,\n                        borderEndWidth: 1,\n                        borderEndColor: addonSeparatorColor,\n                        ...(elStyles.leftAddon || {}),\n                    }}\n                >\n                    {renderAddon(leftAddon)}\n                </View>\n            ) : null}\n\n            {/* `justifyContent: 'center'` vertically centres the inner Input\n                inside the 52px-tall inputGroup (matching web, where flex\n                items default to vertical alignment via the inputGroup row\n                + the input's intrinsic line-box centring). Without this,\n                placeholders and selected values sat near the top edge of\n                the input. Tall children that already fill the height\n                (textarea) are unaffected because `justifyContent: 'center'`\n                is a no-op on items that match the parent's cross-axis. */}\n            <View style={{ flex: 1, justifyContent: 'center' }}>{children}</View>\n\n            {rightAddon ? (\n                <View\n                    style={{\n                        ...addonBaseStyle,\n                        borderStartWidth: 1,\n                        borderStartColor: addonSeparatorColor,\n                        ...(elStyles.rightAddon || {}),\n                    }}\n                >\n                    {renderAddon(rightAddon)}\n                </View>\n            ) : null}\n        </View>\n    );\n\n    const containerRnStyle = useMemo(\n        () => (containerStyle && Object.keys(containerStyle).length ? resolveStyle(containerStyle) : {}),\n        [containerStyle],\n    );\n\n    return(\n        <FormControl\n            isInvalid={invalid}\n            size=\"md\"\n            isDisabled={disabled}\n            isReadOnly={disabled}\n            isRequired={required}\n            style={{\n                width:'100%', gap: 4,\n                // `bare` strips the container's DEFAULT frame, but must not\n                // override an explicit `container` slot. Spread it FIRST so a\n                // user's borderRadius / borderWidth / overflow (e.g. an Object\n                // or Group styled as a card) wins over the reset.\n                ...(bare ? { borderWidth: 0, borderRadius: 0, overflow: 'visible' } : {}),\n                ...(elStyles.container || {}),\n                ...(containerRnStyle || {}),\n            }}\n        >\n            {isHorizontal ? (\n                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, width: '100%' }}>\n                    {labelElement}\n                    <View style={{ flex: 1 }}>{contentElement}</View>\n                </View>\n            ) : isBottom ? (\n                <>\n                    {contentElement}\n                    {labelElement}\n                </>\n            ) : (\n                <>\n                    {labelElement}\n                    {contentElement}\n                </>\n            )}\n            {helperText && typeof helperText !== \"function\" && <FormControlHelper>\n                <FormControlHelperText style={{...(themedFont ? {fontFamily: themedFont} : {}), ...(elStyles.helperText || {})}}>\n                    {helperText}\n                </FormControlHelperText>\n            </FormControlHelper>}\n\n            {!hideError && <ErrorMessage invalid={invalid} errors={errors} style={elStyles.error || undefined} />}\n        </FormControl>\n    )\n};\n\nexport default KitsContainer;\n"],"names":["resolveStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,aAAA,GAAuD,CAAC,KAAA,KAAU;AACpE,EAAA,MAAM;AAAA,IACF,EAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,aAAA,EAAe;AAAA,GACnB,GAAI,KAAA;AAKJ,EAAA,MAAM,QAAA,GAAW,wBAAA,CAAyB,mBAAA,IAAuB,EAAE,CAAA;AACnE,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,YAAA,EAAa;AACtC,EAAA,MAAM,UAAA,GAAa,cAAc,MAAM,CAAA;AAGvC,EAAA,MAAM,YAAY,EAAA,GAAK,CAAA,EAAG,EAAE,CAAA,QAAA,CAAA,GAAa,SAAS,UAAU,CAAA;AAG5D,EAAA,MAAM,SAAA,GAAY,QAAQ,MAAM;AAC5B,IAAA,IAAI,KAAA,IAAS,OAAO,KAAA,KAAU,QAAA,IAAY,eAAe,KAAA,EAAO;AAC5D,MAAA,OAAO,KAAA,CAAM,SAAA;AAAA,IACjB;AACA,IAAA,OAAO,GAAA;AAAA,EACX,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAIV,EAAA,MAAM,eAAe,SAAA,KAAc,IAAA;AACnC,EAAA,MAAM,WAAW,SAAA,KAAc,GAAA;AAM/B,EAAA,MAAM,YAAA,GAAe,CAAC,cAAA,mBAClB,GAAA,CAAC,KAAA,EAAA,EAAM,KAAA,EAAc,SAAA,EAAsB,QAAA,EAAoB,KAAA,EAAO,QAAA,CAAS,KAAA,IAAS,MAAA,EAAW,CAAA,GACnG,IAAA;AASJ,EAAA,MAAM,WAAA,GAAc,CAChB,KAAA,KACC;AACD,IAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AACnB,IAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,OAAO,UAAU,QAAA,EAAU;AACxD,MAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAK,QAAA,EAAU,EAAA,EAAK,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACtC;AACA,IAAA,IAAI,OAAO,UAAU,UAAA,EAAY;AAC7B,MAAA,OAAQ,KAAA,CAAsD,EAAE,IAAA,EAAM,EAAA,EAAI,CAAA;AAAA,IAC9E;AACA,IAAA,IAAI,KAAA,CAAM,cAAA,CAAe,KAAK,CAAA,EAAG;AAC7B,MAAA,OAAO,KAAA;AAAA,IACX;AACA,IAAA,OAAO,IAAA;AAAA,EACX,CAAA;AAWA,EAAA,MAAM,eAAA,GAAkB,QAAQ,MAAM;AAClC,IAAA,IAAI,IAAA,EAAM;AAON,MAAA,OAAO;AAAA,QACH,KAAA,EAAO,MAAA;AAAA,QACP,WAAA,EAAa,CAAA;AAAA,QACb,YAAA,EAAc,CAAA;AAAA,QACd,QAAA,EAAU;AAAA,OACd;AAAA,IACJ;AACA,IAAA,MAAM,SAAA,GAAY,QAAA,CAAS,UAAA,IAAc,EAAC;AAC1C,IAAA,MAAM,0BAA0B,aAAA,IAAiB,SAAA;AACjD,IAAA,OAAO;AAAA,MACH,KAAA,EAAO,MAAA;AAAA,MACP,aAAA,EAAe,KAAA;AAAA,MACf,UAAA,EAAY,SAAA;AAAA,MACZ,QAAA,EAAU,QAAA;AAAA,MACV,GAAG,SAAA;AAAA,MACH,GAAI,OAAA,IAAW,CAAC,uBAAA,GACV,EAAE,aAAa,YAAA,CAAa,QAAQ,CAAA,EAAE,GACtC;AAAC,KACX;AAAA,EACJ,GAAG,CAAC,IAAA,EAAM,SAAS,UAAA,EAAY,OAAA,EAAS,YAAY,CAAC,CAAA;AASrD,EAAA,MAAM,sBACD,QAAA,CAAS,UAAA,IAAc,SAAS,UAAA,CAAW,WAAA,IAC5C,aAAa,QAAQ,CAAA;AAEzB,EAAA,MAAM,cAAA,GAAiB;AAAA,IACnB,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,iBAAA,EAAmB,EAAA;AAAA,IACnB,eAAA,EAAiB,CAAA;AAAA,IACjB,eAAA,EAAiB,aAAa,UAAU;AAAA,GAC5C;AAEA,EAAA,MAAM,cAAA,mBACF,IAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAO,eAAA,EACR,QAAA,EAAA;AAAA,IAAA,SAAA,mBACG,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACG,KAAA,EAAO;AAAA,UACH,GAAG,cAAA;AAAA,UACH,cAAA,EAAgB,CAAA;AAAA,UAChB,cAAA,EAAgB,mBAAA;AAAA,UAChB,GAAI,QAAA,CAAS,SAAA,IAAa;AAAC,SAC/B;AAAA,QAEC,sBAAY,SAAS;AAAA;AAAA,KAC1B,GACA,IAAA;AAAA,oBAUJ,GAAA,CAAC,QAAK,KAAA,EAAO,EAAE,MAAM,CAAA,EAAG,cAAA,EAAgB,QAAA,EAAS,EAAI,QAAA,EAAS,CAAA;AAAA,IAE7D,UAAA,mBACG,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACG,KAAA,EAAO;AAAA,UACH,GAAG,cAAA;AAAA,UACH,gBAAA,EAAkB,CAAA;AAAA,UAClB,gBAAA,EAAkB,mBAAA;AAAA,UAClB,GAAI,QAAA,CAAS,UAAA,IAAc;AAAC,SAChC;AAAA,QAEC,sBAAY,UAAU;AAAA;AAAA,KAC3B,GACA;AAAA,GAAA,EACR,CAAA;AAGJ,EAAA,MAAM,gBAAA,GAAmB,OAAA;AAAA,IACrB,MAAO,cAAA,IAAkB,MAAA,CAAO,IAAA,CAAK,cAAc,EAAE,MAAA,GAASA,KAAA,CAAa,cAAc,CAAA,GAAI,EAAC;AAAA,IAC9F,CAAC,cAAc;AAAA,GACnB;AAEA,EAAA,uBACI,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,OAAA;AAAA,MACX,IAAA,EAAK,IAAA;AAAA,MACL,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA,EAAO;AAAA,QACH,KAAA,EAAM,MAAA;AAAA,QAAQ,GAAA,EAAK,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKnB,GAAI,IAAA,GAAO,EAAE,WAAA,EAAa,CAAA,EAAG,cAAc,CAAA,EAAG,QAAA,EAAU,SAAA,EAAU,GAAI,EAAC;AAAA,QACvE,GAAI,QAAA,CAAS,SAAA,IAAa,EAAC;AAAA,QAC3B,GAAI,oBAAoB;AAAC,OAC7B;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,YAAA,mBACG,IAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAO,EAAE,aAAA,EAAe,KAAA,EAAO,UAAA,EAAY,QAAA,EAAU,GAAA,EAAK,CAAA,EAAG,KAAA,EAAO,MAAA,EAAO,EAC5E,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,8BACA,IAAA,EAAA,EAAK,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,IAAM,QAAA,EAAA,cAAA,EAAe;AAAA,SAAA,EAC9C,CAAA,GACA,2BACA,IAAA,CAAA,QAAA,EAAA,EACK,QAAA,EAAA;AAAA,UAAA,cAAA;AAAA,UACA;AAAA,SAAA,EACL,oBAEA,IAAA,CAAA,QAAA,EAAA,EACK,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,UACA;AAAA,SAAA,EACL,CAAA;AAAA,QAEH,UAAA,IAAc,OAAO,UAAA,KAAe,UAAA,oBAAc,GAAA,CAAC,qBAChD,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,KAAA,EAAO,EAAC,GAAI,UAAA,GAAa,EAAC,UAAA,EAAY,UAAA,EAAU,GAAI,EAAC,EAAI,GAAI,QAAA,CAAS,UAAA,IAAc,EAAC,EAAE,EACzG,QAAA,EAAA,UAAA,EACL,CAAA,EACJ,CAAA;AAAA,QAEC,CAAC,6BAAa,GAAA,CAAC,YAAA,EAAA,EAAa,SAAkB,MAAA,EAAgB,KAAA,EAAO,QAAA,CAAS,KAAA,IAAS,MAAA,EAAW;AAAA;AAAA;AAAA,GACvG;AAER;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form/helpers/FormContainer/index.native.tsx"],"sourcesContent":["import React, { type FC, type PropsWithChildren, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport { uniqueId } from \"lodash\";\nimport ErrorMessage from \"../ErrorMessage\";\nimport type {IKitsContainer} from \"@lmb-it/kitsconcerto-types\";\nimport {\n    FormControl,\n    FormControlHelper,\n    FormControlHelperText,\n    style as resolveStyle,\n} from \"@lmb-it/kitsconcertomobile\"\nimport { Label, Text, useKitsTheme } from \"../../../_compat\";\nimport {useResolvedElementStyles, useThemedFont} from \"@lmb-it/kitsconcerto/hooks\";\n\n/**\n * KitsContainer (native) — wraps all form inputs with label, addons, helper\n * text, and errors. Mirror of the web variant: a pure renderer that does NO\n * independent theme lookup. Every slot style comes from `elementStyles`\n * passed by the parent input (already merged through the\n *   FormElement < Input/Select < InputText/DropdownSelect/… < per-instance slots\n * chain by the parent's `useComponentDefaults` call).\n *\n * Addon rendering is inlined here (matches web FormContainer). There is NO\n * `Addons` component on either platform anymore — the previous native Addons\n * helper re-resolved tokens and hardcoded `borderRadius / borderWidth /\n * padding / backgroundColor / borderColor` defaults that clobbered\n * `kitsTheme.components.*.leftAddon.style` overrides. Both bugs are fixed by\n * deleting the indirection.\n *\n * Element slots applied here (identical contract to web):\n *   container  → outer FormControl wrapper\n *   label      → Label component (plain Text path on native — see Label.native)\n *   inputGroup → input group wrapper (around addons + input). On native this\n *                wrapper carries the visual border that web gets from the\n *                `.p-inputgroup` CSS class.\n *   leftAddon  → left addon View\n *   rightAddon → right addon View\n *   helperText → helper text below the group\n *   error      → error message below the group\n *\n * The `root` slot is NOT applied here — it is applied by the parent form\n * input component directly to the inner Input/Textarea element.\n */\nconst KitsContainer: FC<PropsWithChildren<IKitsContainer>> = (props) => {\n    const {\n        id,\n        helperText,\n        children,\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        required,\n        hideError,\n        label,\n        isFloatedLabel,\n        containerStyle,\n        disabled,\n        bare,\n        elementStyles: parentElementStyles,\n    } = props;\n\n    // Pure renderer: resolve the elementStyles passed in by the parent.\n    // No `useComponentDefaults('FormContainer', …)` lookup — that key is\n    // intentionally not part of the consumer-facing theme contract.\n    const elStyles = useResolvedElementStyles(parentElementStyles || {});\n    const { resolveToken } = useKitsTheme();\n    const themedFont = useThemedFont('body');\n\n    // Generate a unique element ID (for parity with web; not used in native labels)\n    const elementId = id ? `${id}_element` : uniqueId(\"element_\");\n\n    // Derive label placement from the label prop\n    const placement = useMemo(() => {\n        if (label && typeof label === 'object' && 'placement' in label) {\n            return label.placement; // \"RL\" | \"B\" | \"T\"\n        }\n        return \"T\"; // default: top\n    }, [label]);\n\n    // Determine layout direction based on placement\n    // T = top (column, label first), B = bottom (column-reverse), RL = side-by-side (row)\n    const isHorizontal = placement === \"RL\";\n    const isBottom = placement === \"B\";\n\n    // Label uses the plain Text path (NOT the FormControlLabel path) because\n    // @lmb-it/kitsconcertomobile's FormControlLabelText strips arbitrary\n    // inline styles, which broke `kitsTheme.components.Input.label.style`\n    // overrides on native. The plain Text path forwards `style` directly.\n    const labelElement = !isFloatedLabel ? (\n        <Label label={label} elementId={elementId} required={required} style={elStyles.label || undefined} />\n    ) : null;\n\n    /**\n     * Inline addon renderer. Mirrors the dispatch web uses in FormContainer\n     * (string → text, ReactElement → element) AND adds the function-arg\n     * branch native needs because lucide-react-native icons are passed as\n     * functions `(props) => <Icon …/>`. The function-arg branch never runs\n     * on web (web never goes through this code) so it cannot affect web.\n     */\n    const renderAddon = (\n        addon: IKitsContainer[\"leftAddon\"] | IKitsContainer[\"rightAddon\"],\n    ) => {\n        if (!addon) return null;\n        if (typeof addon === \"string\" || typeof addon === \"number\") {\n            return <Text fontSize={14}>{addon}</Text>;\n        }\n        if (typeof addon === \"function\") {\n            return (addon as (args: { size: number }) => React.ReactNode)({ size: 16 });\n        }\n        if (React.isValidElement(addon)) {\n            return addon;\n        }\n        return null;\n    };\n\n    // Resolved inputGroup wrapper style. The default theme provides\n    // `Input.inputGroup.style.{borderColor, borderRadius, borderWidth, height}`\n    // — these are what give the group its visual frame. Defaults are layered\n    // *under* the user's resolved style, so a per-instance override always wins.\n    //\n    // The `invalid` border color is applied as a fallback default (after\n    // theme defaults, before user `inputGroup.borderColor` override). When\n    // `bare` is set, the whole frame is suppressed (matches web's\n    // `bareInputGroupStyle`).\n    const inputGroupStyle = useMemo(() => {\n        if (bare) {\n            // Bare mode (FilePicker, Radio, Checkbox group, …): drop ALL\n            // inputGroup chrome including `height: 52` from the theme. Web's\n            // FormContainer does the same — it passes `style={{}}` when\n            // bare (see helpers/FormContainer/index.web.tsx, the bare\n            // branch of the row Flex). Without this, the non-classic file\n            // uploader's 200px dashed drop zone was being squashed to 52px.\n            return {\n                width: \"100%\" as const,\n                borderWidth: 0,\n                borderRadius: 0,\n                overflow: \"visible\" as const,\n            };\n        }\n        const userStyle = elStyles.inputGroup || {};\n        const userOverrodeBorderColor = \"borderColor\" in userStyle;\n        return {\n            width: \"100%\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            overflow: \"hidden\" as const,\n            ...userStyle,\n            ...(invalid && !userOverrodeBorderColor\n                ? { borderColor: resolveToken(\"danger\") }\n                : {}),\n        };\n    }, [bare, elStyles.inputGroup, invalid, resolveToken]);\n\n    // Addon baseline chrome — mirrors what PrimeReact's `.p-inputgroup-addon`\n    // CSS class gives web addons (gray fill + horizontal padding + 1px\n    // separator border on the input-facing edge). On web these defaults\n    // come from CSS; on native we must apply them inline. Theme overrides\n    // (`elStyles.leftAddon` / `rightAddon`) are spread LAST so per-instance\n    // values always win. The separator border colour falls back to the\n    // inputGroup border colour for visual continuity.\n    const addonSeparatorColor = (\n        (elStyles.inputGroup && elStyles.inputGroup.borderColor) ||\n        resolveToken(\"border\")\n    );\n    const addonBaseStyle = {\n        alignItems: \"center\" as const,\n        justifyContent: \"center\" as const,\n        paddingHorizontal: 12,\n        paddingVertical: 8,\n        backgroundColor: resolveToken(\"bg-input\"),\n    };\n\n    const contentElement = (\n        <View style={inputGroupStyle}>\n            {leftAddon ? (\n                <View\n                    style={{\n                        ...addonBaseStyle,\n                        borderEndWidth: 1,\n                        borderEndColor: addonSeparatorColor,\n                        ...(elStyles.leftAddon || {}),\n                    }}\n                >\n                    {renderAddon(leftAddon)}\n                </View>\n            ) : null}\n\n            {/* `justifyContent: 'center'` vertically centres the inner Input\n                inside the 52px-tall inputGroup (matching web, where flex\n                items default to vertical alignment via the inputGroup row\n                + the input's intrinsic line-box centring). Without this,\n                placeholders and selected values sat near the top edge of\n                the input. Tall children that already fill the height\n                (textarea) are unaffected because `justifyContent: 'center'`\n                is a no-op on items that match the parent's cross-axis. */}\n            <View style={{ flex: 1, justifyContent: 'center' }}>{children}</View>\n\n            {rightAddon ? (\n                <View\n                    style={{\n                        ...addonBaseStyle,\n                        borderStartWidth: 1,\n                        borderStartColor: addonSeparatorColor,\n                        ...(elStyles.rightAddon || {}),\n                    }}\n                >\n                    {renderAddon(rightAddon)}\n                </View>\n            ) : null}\n        </View>\n    );\n\n    const containerRnStyle = useMemo(\n        () => (containerStyle && Object.keys(containerStyle).length ? resolveStyle(containerStyle) : {}),\n        [containerStyle],\n    );\n\n    return(\n        <FormControl\n            isInvalid={invalid}\n            size=\"md\"\n            isDisabled={disabled}\n            isReadOnly={disabled}\n            isRequired={required}\n            style={{\n                width:'100%', gap: 4,\n                // `bare` strips the container's DEFAULT frame, but must not\n                // override an explicit `container` slot. Spread it FIRST so a\n                // user's borderRadius / borderWidth / overflow (e.g. an Object\n                // or Group styled as a card) wins over the reset.\n                ...(bare ? { borderWidth: 0, borderRadius: 0, overflow: 'visible' } : {}),\n                ...(elStyles.container || {}),\n                ...(containerRnStyle || {}),\n            }}\n        >\n            {isHorizontal ? (\n                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, width: '100%' }}>\n                    {labelElement}\n                    <View style={{ flex: 1 }}>{contentElement}</View>\n                </View>\n            ) : isBottom ? (\n                <>\n                    {contentElement}\n                    {labelElement}\n                </>\n            ) : (\n                <>\n                    {labelElement}\n                    {contentElement}\n                </>\n            )}\n            {helperText && typeof helperText !== \"function\" && <FormControlHelper>\n                <FormControlHelperText style={{...(themedFont ? {fontFamily: themedFont} : {}), ...(elStyles.helperText || {})}}>\n                    {helperText}\n                </FormControlHelperText>\n            </FormControlHelper>}\n\n            {!hideError && <ErrorMessage invalid={invalid} errors={errors} style={elStyles.error || undefined} />}\n        </FormControl>\n    )\n};\n\nexport default KitsContainer;\n"],"names":["resolveStyle"],"mappings":"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"}

package/form/helpers/Label/label.cjs

@@ -61,6 +61,8 @@ 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('../../../packages/types/src/Theme/alphaColors.cjs');
+require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');
 require('react-i18next');

package/form/helpers/Label/label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"label.cjs","sources":["../../../../../src/form/helpers/Label/label.native.tsx"],"sourcesContent":["import React, { type FunctionComponent, isValidElement, useMemo } from \"react\";\nimport { Text } from \"../../../_compat\";\nimport { useLanguage } from \"../../../_compat\";\nimport type {ILabelProps} from \"@lmb-it/kitsconcerto-types\";\nimport {FormControlLabel, FormControlLabelText} from \"@lmb-it/kitsconcertomobile\";\nimport useThemedFont from \"../../../hooks/useThemedFont\";\n\n\n\nconst Label: FunctionComponent<ILabelProps> = ({ label, className, isFormControl = false, elementId, required, style }) => {\n    const { isRTL } = useLanguage();\n    const labelFont = useThemedFont('body');\n\n    const renderLabel = useMemo(() => {\n        if (!label) return \"\";\n\n        if (isValidElement(label) || typeof label === \"string\") {\n            return label;\n        }\n\n        if (\"element\" in label && label.element) {\n            return label.element;\n        }\n\n        if (\"text\" in label && label.text) {\n            return label.text;\n        }\n\n        return \"\";\n    }, [label]);\n\n    const labelClasses = useMemo(() => {\n        const classes: string[] = [\"label-position\", \"w-full\"];\n\n        if(className){\n            classes.push(className)\n        }\n        // NOTE: `text-right` used to be pushed via className for RTL labels,\n        // but the underlying Text primitive does not process NativeWind class\n        // names on native — the class was silently dropped. Direction is now\n        // applied via inline `textAlign` below so it actually renders.\n        if (label && typeof label !== \"string\" && \"placement\" in label) {\n            if (label.placement === \"RL\") classes.push(\"RL\");\n            if (label.placement === \"B\") classes.push(\"B\");\n            if (label.placement === \"T\") classes.push(\"T\");\n        }\n\n        return classes.join(\" \");\n    }, [label, className]);\n\n    // Inline style — applied on top of any consumer-supplied `style` so per-\n    // element overrides still win, but a global RTL/LTR alignment is always\n    // present. textAlign='auto' fails on iOS for short standalone labels\n    // because RN cannot detect script when the string is too short — so we\n    // pick explicit left/right based on the active locale.\n    const directionStyle = useMemo(\n        () => ({\n            textAlign: (isRTL ? \"right\" : \"left\") as \"right\" | \"left\",\n            writingDirection: (isRTL ? \"rtl\" : \"ltr\") as \"rtl\" | \"ltr\",\n        }),\n        [isRTL],\n    );\n\n    if (!label) return null;\n\n    // If the resolved label is already a ReactElement, render it directly without wrapping in Text\n    if (isValidElement(renderLabel)) {\n        return <>{renderLabel}</>;\n    }\n\n    if(!isFormControl){\n        return(\n            <Text\n                className={labelClasses}\n                style={{ ...directionStyle, ...(style || {}) }}\n                // htmlFor does not exist on native; we keep the prop name out completely.\n            >\n                {renderLabel}\n            </Text>\n        )\n    }\n    return(\n        <FormControlLabel className={labelClasses} style={{padding:0, ...directionStyle, ...(style || {})}}>\n            <FormControlLabelText style={{padding:0, ...(labelFont ? {fontFamily: labelFont} : {}), ...directionStyle, ...(style || {})}}>{renderLabel}</FormControlLabelText>\n        </FormControlLabel>\n    )\n};\n\nexport default Label;\n"],"names":["useLanguage","useThemedFont","useMemo","isValidElement","jsx","Text","FormControlLabel","FormControlLabelText"],"mappings":"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"}
+{"version":3,"file":"label.cjs","sources":["../../../../../src/form/helpers/Label/label.native.tsx"],"sourcesContent":["import React, { type FunctionComponent, isValidElement, useMemo } from \"react\";\nimport { Text } from \"../../../_compat\";\nimport { useLanguage } from \"../../../_compat\";\nimport type {ILabelProps} from \"@lmb-it/kitsconcerto-types\";\nimport {FormControlLabel, FormControlLabelText} from \"@lmb-it/kitsconcertomobile\";\nimport useThemedFont from \"../../../hooks/useThemedFont\";\n\n\n\nconst Label: FunctionComponent<ILabelProps> = ({ label, className, isFormControl = false, elementId, required, style }) => {\n    const { isRTL } = useLanguage();\n    const labelFont = useThemedFont('body');\n\n    const renderLabel = useMemo(() => {\n        if (!label) return \"\";\n\n        if (isValidElement(label) || typeof label === \"string\") {\n            return label;\n        }\n\n        if (\"element\" in label && label.element) {\n            return label.element;\n        }\n\n        if (\"text\" in label && label.text) {\n            return label.text;\n        }\n\n        return \"\";\n    }, [label]);\n\n    const labelClasses = useMemo(() => {\n        const classes: string[] = [\"label-position\", \"w-full\"];\n\n        if(className){\n            classes.push(className)\n        }\n        // NOTE: `text-right` used to be pushed via className for RTL labels,\n        // but the underlying Text primitive does not process NativeWind class\n        // names on native — the class was silently dropped. Direction is now\n        // applied via inline `textAlign` below so it actually renders.\n        if (label && typeof label !== \"string\" && \"placement\" in label) {\n            if (label.placement === \"RL\") classes.push(\"RL\");\n            if (label.placement === \"B\") classes.push(\"B\");\n            if (label.placement === \"T\") classes.push(\"T\");\n        }\n\n        return classes.join(\" \");\n    }, [label, className]);\n\n    // Inline style — applied on top of any consumer-supplied `style` so per-\n    // element overrides still win, but a global RTL/LTR alignment is always\n    // present. textAlign='auto' fails on iOS for short standalone labels\n    // because RN cannot detect script when the string is too short — so we\n    // pick explicit left/right based on the active locale.\n    const directionStyle = useMemo(\n        () => ({\n            textAlign: (isRTL ? \"right\" : \"left\") as \"right\" | \"left\",\n            writingDirection: (isRTL ? \"rtl\" : \"ltr\") as \"rtl\" | \"ltr\",\n        }),\n        [isRTL],\n    );\n\n    if (!label) return null;\n\n    // If the resolved label is already a ReactElement, render it directly without wrapping in Text\n    if (isValidElement(renderLabel)) {\n        return <>{renderLabel}</>;\n    }\n\n    if(!isFormControl){\n        return(\n            <Text\n                className={labelClasses}\n                style={{ ...directionStyle, ...(style || {}) }}\n                // htmlFor does not exist on native; we keep the prop name out completely.\n            >\n                {renderLabel}\n            </Text>\n        )\n    }\n    return(\n        <FormControlLabel className={labelClasses} style={{padding:0, ...directionStyle, ...(style || {})}}>\n            <FormControlLabelText style={{padding:0, ...(labelFont ? {fontFamily: labelFont} : {}), ...directionStyle, ...(style || {})}}>{renderLabel}</FormControlLabelText>\n        </FormControlLabel>\n    )\n};\n\nexport default Label;\n"],"names":["useLanguage","useThemedFont","useMemo","isValidElement","jsx","Text","FormControlLabel","FormControlLabelText"],"mappings":"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"}

package/form/helpers/Label/label.js

@@ -57,6 +57,8 @@ 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 '../../../packages/types/src/Theme/alphaColors.js';
+import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';
 import 'react-i18next';

package/form/helpers/Label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sources":["../../../../../src/form/helpers/Label/label.native.tsx"],"sourcesContent":["import React, { type FunctionComponent, isValidElement, useMemo } from \"react\";\nimport { Text } from \"../../../_compat\";\nimport { useLanguage } from \"../../../_compat\";\nimport type {ILabelProps} from \"@lmb-it/kitsconcerto-types\";\nimport {FormControlLabel, FormControlLabelText} from \"@lmb-it/kitsconcertomobile\";\nimport useThemedFont from \"../../../hooks/useThemedFont\";\n\n\n\nconst Label: FunctionComponent<ILabelProps> = ({ label, className, isFormControl = false, elementId, required, style }) => {\n    const { isRTL } = useLanguage();\n    const labelFont = useThemedFont('body');\n\n    const renderLabel = useMemo(() => {\n        if (!label) return \"\";\n\n        if (isValidElement(label) || typeof label === \"string\") {\n            return label;\n        }\n\n        if (\"element\" in label && label.element) {\n            return label.element;\n        }\n\n        if (\"text\" in label && label.text) {\n            return label.text;\n        }\n\n        return \"\";\n    }, [label]);\n\n    const labelClasses = useMemo(() => {\n        const classes: string[] = [\"label-position\", \"w-full\"];\n\n        if(className){\n            classes.push(className)\n        }\n        // NOTE: `text-right` used to be pushed via className for RTL labels,\n        // but the underlying Text primitive does not process NativeWind class\n        // names on native — the class was silently dropped. Direction is now\n        // applied via inline `textAlign` below so it actually renders.\n        if (label && typeof label !== \"string\" && \"placement\" in label) {\n            if (label.placement === \"RL\") classes.push(\"RL\");\n            if (label.placement === \"B\") classes.push(\"B\");\n            if (label.placement === \"T\") classes.push(\"T\");\n        }\n\n        return classes.join(\" \");\n    }, [label, className]);\n\n    // Inline style — applied on top of any consumer-supplied `style` so per-\n    // element overrides still win, but a global RTL/LTR alignment is always\n    // present. textAlign='auto' fails on iOS for short standalone labels\n    // because RN cannot detect script when the string is too short — so we\n    // pick explicit left/right based on the active locale.\n    const directionStyle = useMemo(\n        () => ({\n            textAlign: (isRTL ? \"right\" : \"left\") as \"right\" | \"left\",\n            writingDirection: (isRTL ? \"rtl\" : \"ltr\") as \"rtl\" | \"ltr\",\n        }),\n        [isRTL],\n    );\n\n    if (!label) return null;\n\n    // If the resolved label is already a ReactElement, render it directly without wrapping in Text\n    if (isValidElement(renderLabel)) {\n        return <>{renderLabel}</>;\n    }\n\n    if(!isFormControl){\n        return(\n            <Text\n                className={labelClasses}\n                style={{ ...directionStyle, ...(style || {}) }}\n                // htmlFor does not exist on native; we keep the prop name out completely.\n            >\n                {renderLabel}\n            </Text>\n        )\n    }\n    return(\n        <FormControlLabel className={labelClasses} style={{padding:0, ...directionStyle, ...(style || {})}}>\n            <FormControlLabelText style={{padding:0, ...(labelFont ? {fontFamily: labelFont} : {}), ...directionStyle, ...(style || {})}}>{renderLabel}</FormControlLabelText>\n        </FormControlLabel>\n    )\n};\n\nexport default Label;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"label.js","sources":["../../../../../src/form/helpers/Label/label.native.tsx"],"sourcesContent":["import React, { type FunctionComponent, isValidElement, useMemo } from \"react\";\nimport { Text } from \"../../../_compat\";\nimport { useLanguage } from \"../../../_compat\";\nimport type {ILabelProps} from \"@lmb-it/kitsconcerto-types\";\nimport {FormControlLabel, FormControlLabelText} from \"@lmb-it/kitsconcertomobile\";\nimport useThemedFont from \"../../../hooks/useThemedFont\";\n\n\n\nconst Label: FunctionComponent<ILabelProps> = ({ label, className, isFormControl = false, elementId, required, style }) => {\n    const { isRTL } = useLanguage();\n    const labelFont = useThemedFont('body');\n\n    const renderLabel = useMemo(() => {\n        if (!label) return \"\";\n\n        if (isValidElement(label) || typeof label === \"string\") {\n            return label;\n        }\n\n        if (\"element\" in label && label.element) {\n            return label.element;\n        }\n\n        if (\"text\" in label && label.text) {\n            return label.text;\n        }\n\n        return \"\";\n    }, [label]);\n\n    const labelClasses = useMemo(() => {\n        const classes: string[] = [\"label-position\", \"w-full\"];\n\n        if(className){\n            classes.push(className)\n        }\n        // NOTE: `text-right` used to be pushed via className for RTL labels,\n        // but the underlying Text primitive does not process NativeWind class\n        // names on native — the class was silently dropped. Direction is now\n        // applied via inline `textAlign` below so it actually renders.\n        if (label && typeof label !== \"string\" && \"placement\" in label) {\n            if (label.placement === \"RL\") classes.push(\"RL\");\n            if (label.placement === \"B\") classes.push(\"B\");\n            if (label.placement === \"T\") classes.push(\"T\");\n        }\n\n        return classes.join(\" \");\n    }, [label, className]);\n\n    // Inline style — applied on top of any consumer-supplied `style` so per-\n    // element overrides still win, but a global RTL/LTR alignment is always\n    // present. textAlign='auto' fails on iOS for short standalone labels\n    // because RN cannot detect script when the string is too short — so we\n    // pick explicit left/right based on the active locale.\n    const directionStyle = useMemo(\n        () => ({\n            textAlign: (isRTL ? \"right\" : \"left\") as \"right\" | \"left\",\n            writingDirection: (isRTL ? \"rtl\" : \"ltr\") as \"rtl\" | \"ltr\",\n        }),\n        [isRTL],\n    );\n\n    if (!label) return null;\n\n    // If the resolved label is already a ReactElement, render it directly without wrapping in Text\n    if (isValidElement(renderLabel)) {\n        return <>{renderLabel}</>;\n    }\n\n    if(!isFormControl){\n        return(\n            <Text\n                className={labelClasses}\n                style={{ ...directionStyle, ...(style || {}) }}\n                // htmlFor does not exist on native; we keep the prop name out completely.\n            >\n                {renderLabel}\n            </Text>\n        )\n    }\n    return(\n        <FormControlLabel className={labelClasses} style={{padding:0, ...directionStyle, ...(style || {})}}>\n            <FormControlLabelText style={{padding:0, ...(labelFont ? {fontFamily: labelFont} : {}), ...directionStyle, ...(style || {})}}>{renderLabel}</FormControlLabelText>\n        </FormControlLabel>\n    )\n};\n\nexport default Label;\n"],"names":[],"mappings":"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"}

package/form/inputs/InputMask/index.cjs

@@ -64,6 +64,8 @@ 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('../../../packages/types/src/Theme/alphaColors.cjs');
+require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');
 require('react-i18next');

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

@@ -1 +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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"}
+{"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

@@ -60,6 +60,8 @@ 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 '../../../packages/types/src/Theme/alphaColors.js';
+import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';
 import 'react-i18next';

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

@@ -1 +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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"}
+{"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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"}

package/form/inputs/InputNumber/index.cjs

@@ -64,6 +64,8 @@ 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('../../../packages/types/src/Theme/alphaColors.cjs');
+require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');
 require('react-i18next');

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/form/inputs/InputNumber/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IKitsInputNumber} from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport {clampNumber, formatNumber, parseLooseNumber,} from \"../../helpers/native/numberFormat\";\nimport {applyKeyFilterKeepPrev} from \"../../helpers/native/keyfilter\";\nimport {\n    KitsCoreInput as Input,\n    KitsCoreInputField as InputField,\n} from \"@lmb-it/kitsconcertomobile\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {useFormFieldKeyboardNav} from \"../../../hooks/useFormFieldKeyboardNav\";\nimport {mergeRefs} from \"../../../utils/mergeRefs\";\nimport { useLanguage } from \"../../../_compat\";\n\nconst KitsInputNumber = ({ref, ...rawProps}: IKitsInputNumber) => {\n    // Theme key aligned with web: read `Input` (base group) + `InputNumber`\n    // (specific). This matches the alignment plan — both platforms now\n    // expose the same override surface (`kitsTheme.components.InputNumber.*`).\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('InputNumber', rawProps, 'Input');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const { isRTL } = useLanguage();\n    const {\n        id,\n        label,\n        required,\n        value,\n        defaultValue,\n        errors,\n        hideError,\n        invalid,\n        isFloatedLabel,\n        disabled,\n        helperText,\n        localProps,\n        onChange,\n\n        leftAddon,\n        rightAddon,\n        // Prime-like numeric props\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n        keyFilter,\n\n        ...rest\n    } = props as any;\n\n    const {inputRef, navProps} = useFormFieldKeyboardNav(id);\n\n    /** 🔑 CONTROL DETECTION (ONLY value decides) */\n    const isControlled = value !== undefined;\n\n    /** 🔹 Internal numeric value (uncontrolled mode only) */\n    const [internalNumber, setInternalNumber] = React.useState<number | null>(\n        defaultValue ?? null\n    );\n\n    /** 🔹 Display text */\n    const [text, setText] = React.useState<string>(() => {\n        const n =\n            isControlled\n                ? value\n                : internalNumber;\n\n        return typeof n === \"number\"\n            ? formatNumber(n, {\n                locale,\n                useGrouping,\n                minFractionDigits,\n                maxFractionDigits,\n                mode,\n                currency,\n                prefix,\n                suffix,\n                min,\n                max,\n            })\n            : \"\";\n    });\n\n    /** 🔄 Sync when controlled value changes */\n    React.useEffect(() => {\n        if (isControlled) {\n            if (typeof value === \"number\") {\n                setText(\n                    formatNumber(value, {\n                        locale,\n                        useGrouping,\n                        minFractionDigits,\n                        maxFractionDigits,\n                        mode,\n                        currency,\n                        prefix,\n                        suffix,\n                        min,\n                        max,\n                    })\n                );\n            } else {\n                setText(\"\");\n            }\n        }\n    }, [\n        isControlled,\n        value,\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n    ]);\n\n    /** 📤 Emit Prime-like change */\n    const emitChange = (n: number | null) => {\n        onChange?.({value: n} as any);\n    };\n\n    /** ✍️ Typing handler\n     *  NOTE: do NOT clamp to [min,max] here — partial values typed by the user\n     *  (e.g. \"2\" when min=1950) would otherwise snap to min on the first\n     *  keystroke, hijacking the input. Clamping is deferred to onBlur, and\n     *  hard range enforcement belongs in the Yup schema at submit time.\n     */\n    const onChangeText = (raw: string) => {\n        const prev = text;\n        const next = keyFilter ? applyKeyFilterKeepPrev(prev, raw, keyFilter) : raw;\n\n        setText(next);\n\n        const parsed = parseLooseNumber(next);\n        if (parsed == null) {\n            if (!isControlled) setInternalNumber(null);\n            emitChange(null);\n            return;\n        }\n\n        if (!isControlled) {\n            setInternalNumber(parsed);\n        }\n\n        emitChange(parsed);\n    };\n\n    /** 🎯 Format on blur */\n    const onBlur = () => {\n        const parsed = parseLooseNumber(text);\n        if (parsed == null) return;\n\n        const clamped = clampNumber(parsed, min, max);\n\n        setText(\n            formatNumber(clamped, {\n                locale,\n                useGrouping,\n                minFractionDigits,\n                maxFractionDigits,\n                mode,\n                currency,\n                prefix,\n                suffix,\n                min,\n                max,\n            })\n        );\n    };\n\n    const [isFocused, setIsFocused] = React.useState(false);\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            {/* Addons are rendered by KitsContainer (matches web behaviour).\n                The inner Input is borderless via the Input.root.style theme\n                defaults; the visual frame is provided by the inputGroup\n                wrapper inside KitsContainer. */}\n            <Input\n                {...(localProps as any)}\n                isDisabled={!!disabled}\n                isInvalid={!!invalid}\n                isFocused={isFocused}\n                {...(rest as any)}\n                style={{width: \"100%\", ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle)}}\n            >\n                <InputField\n                    ref={mergeRefs(inputRef, ref)}\n                    value={text}\n                    keyboardType=\"numeric\"\n                    onChangeText={onChangeText}\n                    onFocus={() => setIsFocused(true)}\n                    onBlur={() => {\n                        setIsFocused(false);\n                        onBlur();\n                    }}\n                    editable={!disabled}\n                    // Numerics still read left-to-right semantically, but the\n                    // *placeholder* and caret position should sit at the start\n                    // of the reading direction so the user sees a consistent\n                    // input edge with adjacent text fields.\n                    style={{\n                        textAlign: isRTL ? \"right\" : \"left\",\n                        writingDirection: isRTL ? \"rtl\" : \"ltr\",\n                    }}\n                    {...navProps}\n                />\n            </Input>\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputNumber;\n"],"names":["useComponentDefaults","useResolvedStyle","useLanguage","locale","useFormFieldKeyboardNav","formatNumber","applyKeyFilterKeepPrev","parseLooseNumber","clampNumber","jsx","KitsContainer","Input","InputField","mergeRefs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/inputs/InputNumber/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IKitsInputNumber} from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport {clampNumber, formatNumber, parseLooseNumber,} from \"../../helpers/native/numberFormat\";\nimport {applyKeyFilterKeepPrev} from \"../../helpers/native/keyfilter\";\nimport {\n    KitsCoreInput as Input,\n    KitsCoreInputField as InputField,\n} from \"@lmb-it/kitsconcertomobile\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {useFormFieldKeyboardNav} from \"../../../hooks/useFormFieldKeyboardNav\";\nimport {mergeRefs} from \"../../../utils/mergeRefs\";\nimport { useLanguage } from \"../../../_compat\";\n\nconst KitsInputNumber = ({ref, ...rawProps}: IKitsInputNumber) => {\n    // Theme key aligned with web: read `Input` (base group) + `InputNumber`\n    // (specific). This matches the alignment plan — both platforms now\n    // expose the same override surface (`kitsTheme.components.InputNumber.*`).\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('InputNumber', rawProps, 'Input');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const { isRTL } = useLanguage();\n    const {\n        id,\n        label,\n        required,\n        value,\n        defaultValue,\n        errors,\n        hideError,\n        invalid,\n        isFloatedLabel,\n        disabled,\n        helperText,\n        localProps,\n        onChange,\n\n        leftAddon,\n        rightAddon,\n        // Prime-like numeric props\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n        keyFilter,\n\n        ...rest\n    } = props as any;\n\n    const {inputRef, navProps} = useFormFieldKeyboardNav(id);\n\n    /** 🔑 CONTROL DETECTION (ONLY value decides) */\n    const isControlled = value !== undefined;\n\n    /** 🔹 Internal numeric value (uncontrolled mode only) */\n    const [internalNumber, setInternalNumber] = React.useState<number | null>(\n        defaultValue ?? null\n    );\n\n    /** 🔹 Display text */\n    const [text, setText] = React.useState<string>(() => {\n        const n =\n            isControlled\n                ? value\n                : internalNumber;\n\n        return typeof n === \"number\"\n            ? formatNumber(n, {\n                locale,\n                useGrouping,\n                minFractionDigits,\n                maxFractionDigits,\n                mode,\n                currency,\n                prefix,\n                suffix,\n                min,\n                max,\n            })\n            : \"\";\n    });\n\n    /** 🔄 Sync when controlled value changes */\n    React.useEffect(() => {\n        if (isControlled) {\n            if (typeof value === \"number\") {\n                setText(\n                    formatNumber(value, {\n                        locale,\n                        useGrouping,\n                        minFractionDigits,\n                        maxFractionDigits,\n                        mode,\n                        currency,\n                        prefix,\n                        suffix,\n                        min,\n                        max,\n                    })\n                );\n            } else {\n                setText(\"\");\n            }\n        }\n    }, [\n        isControlled,\n        value,\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n    ]);\n\n    /** 📤 Emit Prime-like change */\n    const emitChange = (n: number | null) => {\n        onChange?.({value: n} as any);\n    };\n\n    /** ✍️ Typing handler\n     *  NOTE: do NOT clamp to [min,max] here — partial values typed by the user\n     *  (e.g. \"2\" when min=1950) would otherwise snap to min on the first\n     *  keystroke, hijacking the input. Clamping is deferred to onBlur, and\n     *  hard range enforcement belongs in the Yup schema at submit time.\n     */\n    const onChangeText = (raw: string) => {\n        const prev = text;\n        const next = keyFilter ? applyKeyFilterKeepPrev(prev, raw, keyFilter) : raw;\n\n        setText(next);\n\n        const parsed = parseLooseNumber(next);\n        if (parsed == null) {\n            if (!isControlled) setInternalNumber(null);\n            emitChange(null);\n            return;\n        }\n\n        if (!isControlled) {\n            setInternalNumber(parsed);\n        }\n\n        emitChange(parsed);\n    };\n\n    /** 🎯 Format on blur */\n    const onBlur = () => {\n        const parsed = parseLooseNumber(text);\n        if (parsed == null) return;\n\n        const clamped = clampNumber(parsed, min, max);\n\n        setText(\n            formatNumber(clamped, {\n                locale,\n                useGrouping,\n                minFractionDigits,\n                maxFractionDigits,\n                mode,\n                currency,\n                prefix,\n                suffix,\n                min,\n                max,\n            })\n        );\n    };\n\n    const [isFocused, setIsFocused] = React.useState(false);\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            {/* Addons are rendered by KitsContainer (matches web behaviour).\n                The inner Input is borderless via the Input.root.style theme\n                defaults; the visual frame is provided by the inputGroup\n                wrapper inside KitsContainer. */}\n            <Input\n                {...(localProps as any)}\n                isDisabled={!!disabled}\n                isInvalid={!!invalid}\n                isFocused={isFocused}\n                {...(rest as any)}\n                style={{width: \"100%\", ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle)}}\n            >\n                <InputField\n                    ref={mergeRefs(inputRef, ref)}\n                    value={text}\n                    keyboardType=\"numeric\"\n                    onChangeText={onChangeText}\n                    onFocus={() => setIsFocused(true)}\n                    onBlur={() => {\n                        setIsFocused(false);\n                        onBlur();\n                    }}\n                    editable={!disabled}\n                    // Numerics still read left-to-right semantically, but the\n                    // *placeholder* and caret position should sit at the start\n                    // of the reading direction so the user sees a consistent\n                    // input edge with adjacent text fields.\n                    style={{\n                        textAlign: isRTL ? \"right\" : \"left\",\n                        writingDirection: isRTL ? \"rtl\" : \"ltr\",\n                    }}\n                    {...navProps}\n                />\n            </Input>\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputNumber;\n"],"names":["useComponentDefaults","useResolvedStyle","useLanguage","locale","useFormFieldKeyboardNav","formatNumber","applyKeyFilterKeepPrev","parseLooseNumber","clampNumber","jsx","KitsContainer","Input","InputField","mergeRefs"],"mappings":"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"}

package/form/inputs/InputNumber/index.js

@@ -60,6 +60,8 @@ 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 '../../../packages/types/src/Theme/alphaColors.js';
+import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';
 import 'react-i18next';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/form/inputs/InputNumber/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IKitsInputNumber} from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport {clampNumber, formatNumber, parseLooseNumber,} from \"../../helpers/native/numberFormat\";\nimport {applyKeyFilterKeepPrev} from \"../../helpers/native/keyfilter\";\nimport {\n    KitsCoreInput as Input,\n    KitsCoreInputField as InputField,\n} from \"@lmb-it/kitsconcertomobile\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {useFormFieldKeyboardNav} from \"../../../hooks/useFormFieldKeyboardNav\";\nimport {mergeRefs} from \"../../../utils/mergeRefs\";\nimport { useLanguage } from \"../../../_compat\";\n\nconst KitsInputNumber = ({ref, ...rawProps}: IKitsInputNumber) => {\n    // Theme key aligned with web: read `Input` (base group) + `InputNumber`\n    // (specific). This matches the alignment plan — both platforms now\n    // expose the same override surface (`kitsTheme.components.InputNumber.*`).\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('InputNumber', rawProps, 'Input');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const { isRTL } = useLanguage();\n    const {\n        id,\n        label,\n        required,\n        value,\n        defaultValue,\n        errors,\n        hideError,\n        invalid,\n        isFloatedLabel,\n        disabled,\n        helperText,\n        localProps,\n        onChange,\n\n        leftAddon,\n        rightAddon,\n        // Prime-like numeric props\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n        keyFilter,\n\n        ...rest\n    } = props as any;\n\n    const {inputRef, navProps} = useFormFieldKeyboardNav(id);\n\n    /** 🔑 CONTROL DETECTION (ONLY value decides) */\n    const isControlled = value !== undefined;\n\n    /** 🔹 Internal numeric value (uncontrolled mode only) */\n    const [internalNumber, setInternalNumber] = React.useState<number | null>(\n        defaultValue ?? null\n    );\n\n    /** 🔹 Display text */\n    const [text, setText] = React.useState<string>(() => {\n        const n =\n            isControlled\n                ? value\n                : internalNumber;\n\n        return typeof n === \"number\"\n            ? formatNumber(n, {\n                locale,\n                useGrouping,\n                minFractionDigits,\n                maxFractionDigits,\n                mode,\n                currency,\n                prefix,\n                suffix,\n                min,\n                max,\n            })\n            : \"\";\n    });\n\n    /** 🔄 Sync when controlled value changes */\n    React.useEffect(() => {\n        if (isControlled) {\n            if (typeof value === \"number\") {\n                setText(\n                    formatNumber(value, {\n                        locale,\n                        useGrouping,\n                        minFractionDigits,\n                        maxFractionDigits,\n                        mode,\n                        currency,\n                        prefix,\n                        suffix,\n                        min,\n                        max,\n                    })\n                );\n            } else {\n                setText(\"\");\n            }\n        }\n    }, [\n        isControlled,\n        value,\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n    ]);\n\n    /** 📤 Emit Prime-like change */\n    const emitChange = (n: number | null) => {\n        onChange?.({value: n} as any);\n    };\n\n    /** ✍️ Typing handler\n     *  NOTE: do NOT clamp to [min,max] here — partial values typed by the user\n     *  (e.g. \"2\" when min=1950) would otherwise snap to min on the first\n     *  keystroke, hijacking the input. Clamping is deferred to onBlur, and\n     *  hard range enforcement belongs in the Yup schema at submit time.\n     */\n    const onChangeText = (raw: string) => {\n        const prev = text;\n        const next = keyFilter ? applyKeyFilterKeepPrev(prev, raw, keyFilter) : raw;\n\n        setText(next);\n\n        const parsed = parseLooseNumber(next);\n        if (parsed == null) {\n            if (!isControlled) setInternalNumber(null);\n            emitChange(null);\n            return;\n        }\n\n        if (!isControlled) {\n            setInternalNumber(parsed);\n        }\n\n        emitChange(parsed);\n    };\n\n    /** 🎯 Format on blur */\n    const onBlur = () => {\n        const parsed = parseLooseNumber(text);\n        if (parsed == null) return;\n\n        const clamped = clampNumber(parsed, min, max);\n\n        setText(\n            formatNumber(clamped, {\n                locale,\n                useGrouping,\n                minFractionDigits,\n                maxFractionDigits,\n                mode,\n                currency,\n                prefix,\n                suffix,\n                min,\n                max,\n            })\n        );\n    };\n\n    const [isFocused, setIsFocused] = React.useState(false);\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            {/* Addons are rendered by KitsContainer (matches web behaviour).\n                The inner Input is borderless via the Input.root.style theme\n                defaults; the visual frame is provided by the inputGroup\n                wrapper inside KitsContainer. */}\n            <Input\n                {...(localProps as any)}\n                isDisabled={!!disabled}\n                isInvalid={!!invalid}\n                isFocused={isFocused}\n                {...(rest as any)}\n                style={{width: \"100%\", ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle)}}\n            >\n                <InputField\n                    ref={mergeRefs(inputRef, ref)}\n                    value={text}\n                    keyboardType=\"numeric\"\n                    onChangeText={onChangeText}\n                    onFocus={() => setIsFocused(true)}\n                    onBlur={() => {\n                        setIsFocused(false);\n                        onBlur();\n                    }}\n                    editable={!disabled}\n                    // Numerics still read left-to-right semantically, but the\n                    // *placeholder* and caret position should sit at the start\n                    // of the reading direction so the user sees a consistent\n                    // input edge with adjacent text fields.\n                    style={{\n                        textAlign: isRTL ? \"right\" : \"left\",\n                        writingDirection: isRTL ? \"rtl\" : \"ltr\",\n                    }}\n                    {...navProps}\n                />\n            </Input>\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputNumber;\n"],"names":["Input","InputField"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form/inputs/InputNumber/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IKitsInputNumber} from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport {clampNumber, formatNumber, parseLooseNumber,} from \"../../helpers/native/numberFormat\";\nimport {applyKeyFilterKeepPrev} from \"../../helpers/native/keyfilter\";\nimport {\n    KitsCoreInput as Input,\n    KitsCoreInputField as InputField,\n} from \"@lmb-it/kitsconcertomobile\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {useFormFieldKeyboardNav} from \"../../../hooks/useFormFieldKeyboardNav\";\nimport {mergeRefs} from \"../../../utils/mergeRefs\";\nimport { useLanguage } from \"../../../_compat\";\n\nconst KitsInputNumber = ({ref, ...rawProps}: IKitsInputNumber) => {\n    // Theme key aligned with web: read `Input` (base group) + `InputNumber`\n    // (specific). This matches the alignment plan — both platforms now\n    // expose the same override surface (`kitsTheme.components.InputNumber.*`).\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('InputNumber', rawProps, 'Input');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const { isRTL } = useLanguage();\n    const {\n        id,\n        label,\n        required,\n        value,\n        defaultValue,\n        errors,\n        hideError,\n        invalid,\n        isFloatedLabel,\n        disabled,\n        helperText,\n        localProps,\n        onChange,\n\n        leftAddon,\n        rightAddon,\n        // Prime-like numeric props\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n        keyFilter,\n\n        ...rest\n    } = props as any;\n\n    const {inputRef, navProps} = useFormFieldKeyboardNav(id);\n\n    /** 🔑 CONTROL DETECTION (ONLY value decides) */\n    const isControlled = value !== undefined;\n\n    /** 🔹 Internal numeric value (uncontrolled mode only) */\n    const [internalNumber, setInternalNumber] = React.useState<number | null>(\n        defaultValue ?? null\n    );\n\n    /** 🔹 Display text */\n    const [text, setText] = React.useState<string>(() => {\n        const n =\n            isControlled\n                ? value\n                : internalNumber;\n\n        return typeof n === \"number\"\n            ? formatNumber(n, {\n                locale,\n                useGrouping,\n                minFractionDigits,\n                maxFractionDigits,\n                mode,\n                currency,\n                prefix,\n                suffix,\n                min,\n                max,\n            })\n            : \"\";\n    });\n\n    /** 🔄 Sync when controlled value changes */\n    React.useEffect(() => {\n        if (isControlled) {\n            if (typeof value === \"number\") {\n                setText(\n                    formatNumber(value, {\n                        locale,\n                        useGrouping,\n                        minFractionDigits,\n                        maxFractionDigits,\n                        mode,\n                        currency,\n                        prefix,\n                        suffix,\n                        min,\n                        max,\n                    })\n                );\n            } else {\n                setText(\"\");\n            }\n        }\n    }, [\n        isControlled,\n        value,\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n    ]);\n\n    /** 📤 Emit Prime-like change */\n    const emitChange = (n: number | null) => {\n        onChange?.({value: n} as any);\n    };\n\n    /** ✍️ Typing handler\n     *  NOTE: do NOT clamp to [min,max] here — partial values typed by the user\n     *  (e.g. \"2\" when min=1950) would otherwise snap to min on the first\n     *  keystroke, hijacking the input. Clamping is deferred to onBlur, and\n     *  hard range enforcement belongs in the Yup schema at submit time.\n     */\n    const onChangeText = (raw: string) => {\n        const prev = text;\n        const next = keyFilter ? applyKeyFilterKeepPrev(prev, raw, keyFilter) : raw;\n\n        setText(next);\n\n        const parsed = parseLooseNumber(next);\n        if (parsed == null) {\n            if (!isControlled) setInternalNumber(null);\n            emitChange(null);\n            return;\n        }\n\n        if (!isControlled) {\n            setInternalNumber(parsed);\n        }\n\n        emitChange(parsed);\n    };\n\n    /** 🎯 Format on blur */\n    const onBlur = () => {\n        const parsed = parseLooseNumber(text);\n        if (parsed == null) return;\n\n        const clamped = clampNumber(parsed, min, max);\n\n        setText(\n            formatNumber(clamped, {\n                locale,\n                useGrouping,\n                minFractionDigits,\n                maxFractionDigits,\n                mode,\n                currency,\n                prefix,\n                suffix,\n                min,\n                max,\n            })\n        );\n    };\n\n    const [isFocused, setIsFocused] = React.useState(false);\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            {/* Addons are rendered by KitsContainer (matches web behaviour).\n                The inner Input is borderless via the Input.root.style theme\n                defaults; the visual frame is provided by the inputGroup\n                wrapper inside KitsContainer. */}\n            <Input\n                {...(localProps as any)}\n                isDisabled={!!disabled}\n                isInvalid={!!invalid}\n                isFocused={isFocused}\n                {...(rest as any)}\n                style={{width: \"100%\", ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle)}}\n            >\n                <InputField\n                    ref={mergeRefs(inputRef, ref)}\n                    value={text}\n                    keyboardType=\"numeric\"\n                    onChangeText={onChangeText}\n                    onFocus={() => setIsFocused(true)}\n                    onBlur={() => {\n                        setIsFocused(false);\n                        onBlur();\n                    }}\n                    editable={!disabled}\n                    // Numerics still read left-to-right semantically, but the\n                    // *placeholder* and caret position should sit at the start\n                    // of the reading direction so the user sees a consistent\n                    // input edge with adjacent text fields.\n                    style={{\n                        textAlign: isRTL ? \"right\" : \"left\",\n                        writingDirection: isRTL ? \"rtl\" : \"ltr\",\n                    }}\n                    {...navProps}\n                />\n            </Input>\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputNumber;\n"],"names":["Input","InputField"],"mappings":"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"}

package/form/inputs/InputPassword/index.cjs

@@ -62,6 +62,8 @@ 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('../../../packages/types/src/Theme/alphaColors.cjs');
+require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
 var useSeparator = require('../../../apps/mobile/src/Factory/useSeparator.cjs');
 require('i18next');

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/form/inputs/InputPassword/index.native.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport type {IKitsInputPassword} from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport {useSeparator} from \"../../../factory\";\nimport {\n    KitsCoreInput as Input,\n    KitsCoreInputField as InputField,\n    KitsCoreInputSlot as InputSlot,\n} from \"@lmb-it/kitsconcertomobile\";\nimport {useFormInputController} from \"../../helpers/useFormInputController\";\nimport Strengthen from \"./Strengthen\";\nimport {useComponentDefaults, useFocusStyles, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {useFormFieldKeyboardNav} from \"../../../hooks/useFormFieldKeyboardNav\";\nimport {mergeRefs} from \"../../../utils/mergeRefs\";\nimport { Icon } from \"../../../\";\nimport { useLanguage } from \"../../../_compat\";\n\nconst KitsInputPassword = ({ref, ...rawProps}: IKitsInputPassword) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('InputPassword', rawProps, 'Input');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const { isRTL } = useLanguage();\n    const {\n        id, label, helperText, errors, invalid, required, hideError,\n        leftAddon, rightAddon, isFloatedLabel, disabled,\n        promptLabel, weakLabel, mediumLabel, strongLabel, header, footer,\n        feedback, toggleEye, showStrengthProgress, placeholder,\n        value, defaultValue, onChange, schema,\n        eyeIcon, eyeSlashIcon,\n        inputSize, ...rest\n    } = props;\n\n    const {inputRef, navProps} = useFormFieldKeyboardNav(id);\n\n    const { nativeProps } = useSeparator<any>(rest);\n    const { value: internal, emitChange } = useFormInputController<string>({\n        value,\n        defaultValue,\n        onChange,\n    });\n\n    const [secure, setSecure] = useState(true);\n    const toggleSecure = () => setSecure(!secure);\n\n    const [isFocused, setFocused] = useState(false);\n    const rootStyle = resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle;\n    const focusResolvedStyle = useFocusStyles(rootStyle, isFocused);\n\n    return (\n        <KitsContainer\n            id={id}\n            helperText={helperText}\n            isFloatedLabel={isFloatedLabel}\n            hideError={hideError}\n            required={required}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            errors={errors}\n            invalid={invalid}\n            label={label}\n            disabled={disabled}\n            inputSize={inputSize}\n            elementStyles={elementStyles}\n        >\n            <Input\n                {...(rest as any)}\n                isDisabled={!!disabled}\n                isInvalid={!!invalid}\n                isFocused={isFocused}\n                style={{width: \"100%\", ...focusResolvedStyle}}\n            >\n                <InputField\n                    ref={mergeRefs(inputRef, ref)}\n                    value={internal ?? ''}\n                    onChangeText={(txt) => emitChange(txt)}\n                    secureTextEntry={secure}\n                    editable={!disabled}\n                    placeholder={placeholder}\n                    onFocus={(e: any) => {\n                        setFocused(true);\n                        (rest as any)?.onFocus?.(e);\n                    }}\n                    onBlur={(e: any) => {\n                        setFocused(false);\n                        (rest as any)?.onBlur?.(e);\n                    }}\n                    style={{\n                        textAlign: isRTL ? \"right\" : \"left\",\n                        writingDirection: isRTL ? \"rtl\" : \"ltr\",\n                    }}\n                    {...navProps}\n                />\n                {toggleEye && (\n                    <InputSlot onPress={toggleSecure} style={{paddingHorizontal: 12}}>\n                        {secure\n                            ? (eyeIcon ?? <Icon name={'eye'} />)\n                            : (eyeSlashIcon ?? <Icon name={'eye-slash'} />)\n                        }\n                    </InputSlot>\n                )}\n            </Input>\n\n            {showStrengthProgress && schema && (\n                <Strengthen\n                    value={internal ?? ''}\n                    show={false}\n                    schema={schema as any}\n                />\n            )}\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputPassword;\n"],"names":["useComponentDefaults","useResolvedStyle","useLanguage","useFormFieldKeyboardNav","useSeparator","useFormInputController","useState","useFocusStyles","jsxs","KitsContainer","Input","jsx","InputField","mergeRefs","InputSlot","Icon","Strengthen"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/inputs/InputPassword/index.native.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport type {IKitsInputPassword} from \"@lmb-it/kitsconcerto-types\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport {useSeparator} from \"../../../factory\";\nimport {\n    KitsCoreInput as Input,\n    KitsCoreInputField as InputField,\n    KitsCoreInputSlot as InputSlot,\n} from \"@lmb-it/kitsconcertomobile\";\nimport {useFormInputController} from \"../../helpers/useFormInputController\";\nimport Strengthen from \"./Strengthen\";\nimport {useComponentDefaults, useFocusStyles, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {useFormFieldKeyboardNav} from \"../../../hooks/useFormFieldKeyboardNav\";\nimport {mergeRefs} from \"../../../utils/mergeRefs\";\nimport { Icon } from \"../../../\";\nimport { useLanguage } from \"../../../_compat\";\n\nconst KitsInputPassword = ({ref, ...rawProps}: IKitsInputPassword) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('InputPassword', rawProps, 'Input');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const { isRTL } = useLanguage();\n    const {\n        id, label, helperText, errors, invalid, required, hideError,\n        leftAddon, rightAddon, isFloatedLabel, disabled,\n        promptLabel, weakLabel, mediumLabel, strongLabel, header, footer,\n        feedback, toggleEye, showStrengthProgress, placeholder,\n        value, defaultValue, onChange, schema,\n        eyeIcon, eyeSlashIcon,\n        inputSize, ...rest\n    } = props;\n\n    const {inputRef, navProps} = useFormFieldKeyboardNav(id);\n\n    const { nativeProps } = useSeparator<any>(rest);\n    const { value: internal, emitChange } = useFormInputController<string>({\n        value,\n        defaultValue,\n        onChange,\n    });\n\n    const [secure, setSecure] = useState(true);\n    const toggleSecure = () => setSecure(!secure);\n\n    const [isFocused, setFocused] = useState(false);\n    const rootStyle = resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle;\n    const focusResolvedStyle = useFocusStyles(rootStyle, isFocused);\n\n    return (\n        <KitsContainer\n            id={id}\n            helperText={helperText}\n            isFloatedLabel={isFloatedLabel}\n            hideError={hideError}\n            required={required}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            errors={errors}\n            invalid={invalid}\n            label={label}\n            disabled={disabled}\n            inputSize={inputSize}\n            elementStyles={elementStyles}\n        >\n            <Input\n                {...(rest as any)}\n                isDisabled={!!disabled}\n                isInvalid={!!invalid}\n                isFocused={isFocused}\n                style={{width: \"100%\", ...focusResolvedStyle}}\n            >\n                <InputField\n                    ref={mergeRefs(inputRef, ref)}\n                    value={internal ?? ''}\n                    onChangeText={(txt) => emitChange(txt)}\n                    secureTextEntry={secure}\n                    editable={!disabled}\n                    placeholder={placeholder}\n                    onFocus={(e: any) => {\n                        setFocused(true);\n                        (rest as any)?.onFocus?.(e);\n                    }}\n                    onBlur={(e: any) => {\n                        setFocused(false);\n                        (rest as any)?.onBlur?.(e);\n                    }}\n                    style={{\n                        textAlign: isRTL ? \"right\" : \"left\",\n                        writingDirection: isRTL ? \"rtl\" : \"ltr\",\n                    }}\n                    {...navProps}\n                />\n                {toggleEye && (\n                    <InputSlot onPress={toggleSecure} style={{paddingHorizontal: 12}}>\n                        {secure\n                            ? (eyeIcon ?? <Icon name={'eye'} />)\n                            : (eyeSlashIcon ?? <Icon name={'eye-slash'} />)\n                        }\n                    </InputSlot>\n                )}\n            </Input>\n\n            {showStrengthProgress && schema && (\n                <Strengthen\n                    value={internal ?? ''}\n                    show={false}\n                    schema={schema as any}\n                />\n            )}\n        </KitsContainer>\n    );\n};\n\nexport default KitsInputPassword;\n"],"names":["useComponentDefaults","useResolvedStyle","useLanguage","useFormFieldKeyboardNav","useSeparator","useFormInputController","useState","useFocusStyles","jsxs","KitsContainer","Input","jsx","InputField","mergeRefs","InputSlot","Icon","Strengthen"],"mappings":"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"}

package/form/inputs/InputPassword/index.js

@@ -58,6 +58,8 @@ 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 '../../../packages/types/src/Theme/alphaColors.js';
+import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../../apps/mobile/src/Factory/DimensionsContext.js';
 import useSeparator from '../../../apps/mobile/src/Factory/useSeparator.js';
 import 'i18next';