@lmb-it/kitsconcerto-native 0.1.236

package/form/helpers/FormContainer/index.cjs

@@ -0,0 +1,236 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactNative = require('react-native');
+var _ = require('lodash');
+var errormessage_native = require('../ErrorMessage/errormessage.cjs');
+require('../../../apps/mobile/src/ui/accordion/index.cjs');
+require('../../../apps/mobile/src/ui/actionsheet/index.cjs');
+require('../../../apps/mobile/src/ui/alert/index.cjs');
+require('../../../apps/mobile/src/ui/alert-dialog/index.cjs');
+require('../../../apps/mobile/src/ui/avatar/index.cjs');
+require('../../../apps/mobile/src/ui/badge/index.cjs');
+require('../../../apps/mobile/src/ui/bottomsheet/index.cjs');
+require('../../../apps/mobile/src/ui/box/index.cjs');
+require('../../../apps/mobile/src/ui/button/index.cjs');
+require('../../../apps/mobile/src/ui/card/index.cjs');
+require('../../../apps/mobile/src/ui/center/index.cjs');
+require('../../../apps/mobile/src/ui/checkbox/index.cjs');
+require('../../../apps/mobile/src/ui/divider/index.cjs');
+require('../../../apps/mobile/src/ui/drawer/index.cjs');
+require('../../../apps/mobile/src/ui/fab/index.cjs');
+var index = require('../../../apps/mobile/src/ui/form-control/index.cjs');
+require('../../../apps/mobile/src/ui/gluestack-ui-provider/config.cjs');
+require('@gluestack-ui/core/overlay/creator');
+require('@gluestack-ui/core/toast/creator');
+require('nativewind');
+require('../../../apps/mobile/src/ui/grid/index.cjs');
+require('../../../apps/mobile/src/ui/heading/index.cjs');
+require('../../../apps/mobile/src/ui/hstack/index.cjs');
+require('../../../apps/mobile/src/ui/icon/index.cjs');
+require('../../../apps/mobile/src/ui/image/index.cjs');
+require('../../../apps/mobile/src/ui/image-background/index.cjs');
+require('../../../apps/mobile/src/ui/input/index.cjs');
+require('../../../apps/mobile/src/ui/link/index.cjs');
+require('../../../apps/mobile/src/ui/menu/index.cjs');
+require('../../../apps/mobile/src/ui/modal/index.cjs');
+require('../../../apps/mobile/src/ui/popover/index.cjs');
+require('../../../apps/mobile/src/ui/portal/index.cjs');
+require('../../../apps/mobile/src/ui/pressable/index.cjs');
+require('../../../apps/mobile/src/ui/progress/index.cjs');
+require('../../../apps/mobile/src/ui/radio/index.cjs');
+require('react-native-safe-area-context');
+require('../../../apps/mobile/src/ui/select/index.cjs');
+require('../../../apps/mobile/src/ui/skeleton/index.cjs');
+require('../../../apps/mobile/src/ui/slider/index.cjs');
+require('../../../apps/mobile/src/ui/spinner/index.cjs');
+require('../../../apps/mobile/src/ui/switch/index.cjs');
+require('../../../apps/mobile/src/ui/table/index.cjs');
+require('../../../apps/mobile/src/ui/text/index.cjs');
+require('../../../apps/mobile/src/ui/textarea/index.cjs');
+require('../../../apps/mobile/src/ui/toast/index.cjs');
+require('../../../apps/mobile/src/ui/tooltip/index.cjs');
+require('../../../apps/mobile/src/ui/vstack/index.cjs');
+require('react-native-reanimated');
+var style = require('../../../apps/mobile/src/Factory/helpers/style.cjs');
+require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
+require('react-icons/fa');
+require('react-icons/ai');
+require('react-icons/io');
+require('../../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.cjs');
+require('yup');
+require('../../../packages/types/src/Css/map/index.cjs');
+require('../../../packages/types/src/Theme/shadows.cjs');
+require('../../../packages/types/src/Theme/defaultTheme.cjs');
+require('i18next');
+require('react-i18next');
+require('../../../apps/mobile/src/Core/AutoComplete/index.cjs');
+require('../../../apps/mobile/src/Core/Dropdown/index.cjs');
+require('../../../apps/mobile/src/Core/MultiSelect/index.cjs');
+require('../../../apps/mobile/src/Core/Trees/components/CoreTree.cjs');
+require('../../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.cjs');
+require('../../../apps/mobile/src/Core/Trees/components/CoreToolbar.cjs');
+require('../../../apps/mobile/src/Core/Paginator/index.cjs');
+require('lucide-react-native');
+require('../../../apps/mobile/src/Core/SelectButton/index.cjs');
+require('../../../apps/mobile/src/Core/DataTable/DataTable.cjs');
+require('../../../apps/mobile/src/Core/Tag/index.cjs');
+require('../../../apps/mobile/src/Core/Badge/index.cjs');
+require('../../../apps/mobile/src/Core/ProgressBar/index.cjs');
+require('../../../apps/mobile/src/Core/Checkbox/index.cjs');
+require('../../../apps/mobile/src/Core/RadioButton/index.cjs');
+require('../../../apps/mobile/src/Core/Input/index.cjs');
+require('../../../apps/mobile/src/Core/Input/Field.cjs');
+require('../../../apps/mobile/src/Core/Input/Slot.cjs');
+require('../../../contexts/DialogContext.cjs');
+var useResolvedElementStyles = require('../../../hooks/useResolvedElementStyles.cjs');
+var useThemedFont = require('../../../hooks/useThemedFont.cjs');
+var KitsThemeProvider_native = require('../../../contexts/Theme/KitsThemeProvider.cjs');
+var label_native = require('../Label/label.cjs');
+var index_native = require('../../../primitives/Text/index.cjs');
+
+const KitsContainer = (props) => {
+  const {
+    id,
+    helperText,
+    children,
+    rightAddon,
+    leftAddon,
+    errors,
+    invalid,
+    required,
+    hideError,
+    label,
+    isFloatedLabel,
+    containerStyle,
+    disabled,
+    bare,
+    elementStyles: parentElementStyles
+  } = props;
+  const elStyles = useResolvedElementStyles.default(parentElementStyles || {});
+  const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
+  const themedFont = useThemedFont.default("body");
+  const elementId = id ? `${id}_element` : _.uniqueId("element_");
+  const placement = React.useMemo(() => {
+    if (label && typeof label === "object" && "placement" in label) {
+      return label.placement;
+    }
+    return "T";
+  }, [label]);
+  const isHorizontal = placement === "RL";
+  const isBottom = placement === "B";
+  const labelElement = !isFloatedLabel ? /* @__PURE__ */ jsxRuntime.jsx(label_native.default, { label, elementId, required, style: elStyles.label || void 0 }) : null;
+  const renderAddon = (addon) => {
+    if (!addon) return null;
+    if (typeof addon === "string" || typeof addon === "number") {
+      return /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { fontSize: 14, children: addon });
+    }
+    if (typeof addon === "function") {
+      return addon({ size: 16 });
+    }
+    if (React.isValidElement(addon)) {
+      return addon;
+    }
+    return null;
+  };
+  const inputGroupStyle = React.useMemo(() => {
+    if (bare) {
+      return {
+        width: "100%",
+        borderWidth: 0,
+        borderRadius: 0,
+        overflow: "visible"
+      };
+    }
+    const userStyle = elStyles.inputGroup || {};
+    const userOverrodeBorderColor = "borderColor" in userStyle;
+    return {
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "stretch",
+      overflow: "hidden",
+      ...userStyle,
+      ...invalid && !userOverrodeBorderColor ? { borderColor: resolveToken("danger") } : {}
+    };
+  }, [bare, elStyles.inputGroup, invalid, resolveToken]);
+  const addonSeparatorColor = elStyles.inputGroup && elStyles.inputGroup.borderColor || resolveToken("border");
+  const addonBaseStyle = {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: resolveToken("bg-input")
+  };
+  const contentElement = /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: inputGroupStyle, children: [
+    leftAddon ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          ...addonBaseStyle,
+          borderEndWidth: 1,
+          borderEndColor: addonSeparatorColor,
+          ...elStyles.leftAddon || {}
+        },
+        children: renderAddon(leftAddon)
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flex: 1, justifyContent: "center" }, children }),
+    rightAddon ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          ...addonBaseStyle,
+          borderStartWidth: 1,
+          borderStartColor: addonSeparatorColor,
+          ...elStyles.rightAddon || {}
+        },
+        children: renderAddon(rightAddon)
+      }
+    ) : null
+  ] });
+  const containerRnStyle = React.useMemo(
+    () => containerStyle && Object.keys(containerStyle).length ? style.style(containerStyle) : {},
+    [containerStyle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    index.FormControl,
+    {
+      isInvalid: invalid,
+      size: "md",
+      isDisabled: disabled,
+      isReadOnly: disabled,
+      isRequired: required,
+      style: {
+        width: "100%",
+        gap: 4,
+        // `bare` strips the container's DEFAULT frame, but must not
+        // override an explicit `container` slot. Spread it FIRST so a
+        // user's borderRadius / borderWidth / overflow (e.g. an Object
+        // or Group styled as a card) wins over the reset.
+        ...bare ? { borderWidth: 0, borderRadius: 0, overflow: "visible" } : {},
+        ...elStyles.container || {},
+        ...containerRnStyle || {}
+      },
+      children: [
+        isHorizontal ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "row", alignItems: "center", gap: 8, width: "100%" }, children: [
+          labelElement,
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flex: 1 }, children: contentElement })
+        ] }) : isBottom ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          contentElement,
+          labelElement
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          labelElement,
+          contentElement
+        ] }),
+        helperText && typeof helperText !== "function" && /* @__PURE__ */ jsxRuntime.jsx(index.FormControlHelper, { children: /* @__PURE__ */ jsxRuntime.jsx(index.FormControlHelperText, { style: { ...themedFont ? { fontFamily: themedFont } : {}, ...elStyles.helperText || {} }, children: helperText }) }),
+        !hideError && /* @__PURE__ */ jsxRuntime.jsx(errormessage_native.default, { invalid, errors, style: elStyles.error || void 0 })
+      ]
+    }
+  );
+};
+
+exports.default = KitsContainer;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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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"}

package/form/helpers/FormContainer/index.js

@@ -0,0 +1,232 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { uniqueId } from 'lodash';
+import ErrorMessage from '../ErrorMessage/errormessage.js';
+import '../../../apps/mobile/src/ui/accordion/index.js';
+import '../../../apps/mobile/src/ui/actionsheet/index.js';
+import '../../../apps/mobile/src/ui/alert/index.js';
+import '../../../apps/mobile/src/ui/alert-dialog/index.js';
+import '../../../apps/mobile/src/ui/avatar/index.js';
+import '../../../apps/mobile/src/ui/badge/index.js';
+import '../../../apps/mobile/src/ui/bottomsheet/index.js';
+import '../../../apps/mobile/src/ui/box/index.js';
+import '../../../apps/mobile/src/ui/button/index.js';
+import '../../../apps/mobile/src/ui/card/index.js';
+import '../../../apps/mobile/src/ui/center/index.js';
+import '../../../apps/mobile/src/ui/checkbox/index.js';
+import '../../../apps/mobile/src/ui/divider/index.js';
+import '../../../apps/mobile/src/ui/drawer/index.js';
+import '../../../apps/mobile/src/ui/fab/index.js';
+import { FormControl, FormControlHelper, FormControlHelperText } from '../../../apps/mobile/src/ui/form-control/index.js';
+import '../../../apps/mobile/src/ui/gluestack-ui-provider/config.js';
+import '@gluestack-ui/core/overlay/creator';
+import '@gluestack-ui/core/toast/creator';
+import 'nativewind';
+import '../../../apps/mobile/src/ui/grid/index.js';
+import '../../../apps/mobile/src/ui/heading/index.js';
+import '../../../apps/mobile/src/ui/hstack/index.js';
+import '../../../apps/mobile/src/ui/icon/index.js';
+import '../../../apps/mobile/src/ui/image/index.js';
+import '../../../apps/mobile/src/ui/image-background/index.js';
+import '../../../apps/mobile/src/ui/input/index.js';
+import '../../../apps/mobile/src/ui/link/index.js';
+import '../../../apps/mobile/src/ui/menu/index.js';
+import '../../../apps/mobile/src/ui/modal/index.js';
+import '../../../apps/mobile/src/ui/popover/index.js';
+import '../../../apps/mobile/src/ui/portal/index.js';
+import '../../../apps/mobile/src/ui/pressable/index.js';
+import '../../../apps/mobile/src/ui/progress/index.js';
+import '../../../apps/mobile/src/ui/radio/index.js';
+import 'react-native-safe-area-context';
+import '../../../apps/mobile/src/ui/select/index.js';
+import '../../../apps/mobile/src/ui/skeleton/index.js';
+import '../../../apps/mobile/src/ui/slider/index.js';
+import '../../../apps/mobile/src/ui/spinner/index.js';
+import '../../../apps/mobile/src/ui/switch/index.js';
+import '../../../apps/mobile/src/ui/table/index.js';
+import '../../../apps/mobile/src/ui/text/index.js';
+import '../../../apps/mobile/src/ui/textarea/index.js';
+import '../../../apps/mobile/src/ui/toast/index.js';
+import '../../../apps/mobile/src/ui/tooltip/index.js';
+import '../../../apps/mobile/src/ui/vstack/index.js';
+import 'react-native-reanimated';
+import { style } from '../../../apps/mobile/src/Factory/helpers/style.js';
+import '../../../apps/mobile/src/Factory/DimensionsContext.js';
+import 'react-icons/fa';
+import 'react-icons/ai';
+import 'react-icons/io';
+import '../../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.js';
+import 'yup';
+import '../../../packages/types/src/Css/map/index.js';
+import '../../../packages/types/src/Theme/shadows.js';
+import '../../../packages/types/src/Theme/defaultTheme.js';
+import 'i18next';
+import 'react-i18next';
+import '../../../apps/mobile/src/Core/AutoComplete/index.js';
+import '../../../apps/mobile/src/Core/Dropdown/index.js';
+import '../../../apps/mobile/src/Core/MultiSelect/index.js';
+import '../../../apps/mobile/src/Core/Trees/components/CoreTree.js';
+import '../../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.js';
+import '../../../apps/mobile/src/Core/Trees/components/CoreToolbar.js';
+import '../../../apps/mobile/src/Core/Paginator/index.js';
+import 'lucide-react-native';
+import '../../../apps/mobile/src/Core/SelectButton/index.js';
+import '../../../apps/mobile/src/Core/DataTable/DataTable.js';
+import '../../../apps/mobile/src/Core/Tag/index.js';
+import '../../../apps/mobile/src/Core/Badge/index.js';
+import '../../../apps/mobile/src/Core/ProgressBar/index.js';
+import '../../../apps/mobile/src/Core/Checkbox/index.js';
+import '../../../apps/mobile/src/Core/RadioButton/index.js';
+import '../../../apps/mobile/src/Core/Input/index.js';
+import '../../../apps/mobile/src/Core/Input/Field.js';
+import '../../../apps/mobile/src/Core/Input/Slot.js';
+import '../../../contexts/DialogContext.js';
+import useResolvedElementStyles from '../../../hooks/useResolvedElementStyles.js';
+import useThemedFont from '../../../hooks/useThemedFont.js';
+import { useKitsTheme } from '../../../contexts/Theme/KitsThemeProvider.js';
+import Label from '../Label/label.js';
+import Text from '../../../primitives/Text/index.js';
+
+const KitsContainer = (props) => {
+  const {
+    id,
+    helperText,
+    children,
+    rightAddon,
+    leftAddon,
+    errors,
+    invalid,
+    required,
+    hideError,
+    label,
+    isFloatedLabel,
+    containerStyle,
+    disabled,
+    bare,
+    elementStyles: parentElementStyles
+  } = props;
+  const elStyles = useResolvedElementStyles(parentElementStyles || {});
+  const { resolveToken } = useKitsTheme();
+  const themedFont = useThemedFont("body");
+  const elementId = id ? `${id}_element` : uniqueId("element_");
+  const placement = useMemo(() => {
+    if (label && typeof label === "object" && "placement" in label) {
+      return label.placement;
+    }
+    return "T";
+  }, [label]);
+  const isHorizontal = placement === "RL";
+  const isBottom = placement === "B";
+  const labelElement = !isFloatedLabel ? /* @__PURE__ */ jsx(Label, { label, elementId, required, style: elStyles.label || void 0 }) : null;
+  const renderAddon = (addon) => {
+    if (!addon) return null;
+    if (typeof addon === "string" || typeof addon === "number") {
+      return /* @__PURE__ */ jsx(Text, { fontSize: 14, children: addon });
+    }
+    if (typeof addon === "function") {
+      return addon({ size: 16 });
+    }
+    if (React.isValidElement(addon)) {
+      return addon;
+    }
+    return null;
+  };
+  const inputGroupStyle = useMemo(() => {
+    if (bare) {
+      return {
+        width: "100%",
+        borderWidth: 0,
+        borderRadius: 0,
+        overflow: "visible"
+      };
+    }
+    const userStyle = elStyles.inputGroup || {};
+    const userOverrodeBorderColor = "borderColor" in userStyle;
+    return {
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "stretch",
+      overflow: "hidden",
+      ...userStyle,
+      ...invalid && !userOverrodeBorderColor ? { borderColor: resolveToken("danger") } : {}
+    };
+  }, [bare, elStyles.inputGroup, invalid, resolveToken]);
+  const addonSeparatorColor = elStyles.inputGroup && elStyles.inputGroup.borderColor || resolveToken("border");
+  const addonBaseStyle = {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: resolveToken("bg-input")
+  };
+  const contentElement = /* @__PURE__ */ jsxs(View, { style: inputGroupStyle, children: [
+    leftAddon ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          ...addonBaseStyle,
+          borderEndWidth: 1,
+          borderEndColor: addonSeparatorColor,
+          ...elStyles.leftAddon || {}
+        },
+        children: renderAddon(leftAddon)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(View, { style: { flex: 1, justifyContent: "center" }, children }),
+    rightAddon ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          ...addonBaseStyle,
+          borderStartWidth: 1,
+          borderStartColor: addonSeparatorColor,
+          ...elStyles.rightAddon || {}
+        },
+        children: renderAddon(rightAddon)
+      }
+    ) : null
+  ] });
+  const containerRnStyle = useMemo(
+    () => containerStyle && Object.keys(containerStyle).length ? style(containerStyle) : {},
+    [containerStyle]
+  );
+  return /* @__PURE__ */ jsxs(
+    FormControl,
+    {
+      isInvalid: invalid,
+      size: "md",
+      isDisabled: disabled,
+      isReadOnly: disabled,
+      isRequired: required,
+      style: {
+        width: "100%",
+        gap: 4,
+        // `bare` strips the container's DEFAULT frame, but must not
+        // override an explicit `container` slot. Spread it FIRST so a
+        // user's borderRadius / borderWidth / overflow (e.g. an Object
+        // or Group styled as a card) wins over the reset.
+        ...bare ? { borderWidth: 0, borderRadius: 0, overflow: "visible" } : {},
+        ...elStyles.container || {},
+        ...containerRnStyle || {}
+      },
+      children: [
+        isHorizontal ? /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 8, width: "100%" }, children: [
+          labelElement,
+          /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: contentElement })
+        ] }) : isBottom ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          contentElement,
+          labelElement
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          labelElement,
+          contentElement
+        ] }),
+        helperText && typeof helperText !== "function" && /* @__PURE__ */ jsx(FormControlHelper, { children: /* @__PURE__ */ jsx(FormControlHelperText, { style: { ...themedFont ? { fontFamily: themedFont } : {}, ...elStyles.helperText || {} }, children: helperText }) }),
+        !hideError && /* @__PURE__ */ jsx(ErrorMessage, { invalid, errors, style: elStyles.error || void 0 })
+      ]
+    }
+  );
+};
+
+export { KitsContainer as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;;;;"}

package/form/helpers/Functions.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+require('react');
+
+function ClHelper({
+  isChecked,
+  isInvalid,
+  isDisabled,
+  inputSize
+}) {
+  const classes = ["check-input"];
+  if (isDisabled) {
+    classes.push("p-disable");
+  }
+  return classes.join(" ");
+}
+
+exports.ClHelper = ClHelper;
+//# sourceMappingURL=Functions.cjs.map

package/form/helpers/Functions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Functions.cjs","sources":["../../../../src/form/helpers/Functions.ts"],"sourcesContent":["import {useEffect, useState} from \"react\";\nimport type {IList} from \"@lmb-it/kitsconcerto-types\";\n\n\nexport const listToObject = (list:any[], labelKey:string, valueKey:string)=>{\n    if (Array.isArray(list)) {\n        if (list.some(o => typeof o == \"string\")) {\n            return list.map(o => {\n                return {\n                    [labelKey]: o,\n                    [valueKey]: o\n                }\n            });\n        }\n        if (list.some(o => !(labelKey in o && valueKey in o))) {\n            throw Error(\"Tags component: In List prop you should pass either strings or object with keys match your dataLabelKey and dataIdKey or label and id\");\n        }\n        return list;\n    }\n\n    return [];\n}\n\nexport const selectHelper=(customProps:any, field:any, value:any, listFetcher:any) =>{\n    const {\n        list,\n        dataLabelKey = \"label\",\n        dataIdKey = \"id\",\n    } = customProps;\n\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [filteredOptions, setFilteredOptions] = useState<IList[]>([]);\n\n    const getList = () => {\n        if (Array.isArray(list)) {\n            return listToObject(list, dataLabelKey, dataIdKey);\n        }\n        if (typeof list === \"function\") {\n            return listToObject(list(value), dataLabelKey, dataIdKey);\n        }\n\n        return [];\n    };\n\n    useEffect(() => {\n        const _list = getList();\n\n        if (JSON.stringify(_list) !== JSON.stringify(filteredOptions)) {\n            setFilteredOptions(_list);\n        }\n    }, []);\n\n    const removeDuplicates = (list: string[]) => {\n        if (Array.isArray(field.value)) {\n            return list.filter((val) => !field.value.includes(val));\n        }\n\n        return list;\n    };\n\n    const onSearchValue = (dataItem:any) => {\n        if (listFetcher) {\n            setIsLoading(true);\n            listFetcher(dataItem)\n                .then((res:any) => {\n                    let newList: IList[] = [];\n\n                    if (res.length > 0) {\n                        newList = newList.concat(removeDuplicates(res));\n                    }\n\n                    setFilteredOptions(newList);\n                })\n                .finally(() => {\n                    setIsLoading(false);\n                });\n        }\n    };\n\n    return {\n        isLoading,\n        filteredOptions,\n        onSearchValue,\n    };\n}\n\n\nexport function ClHelper({\n                             isChecked,\n                             isInvalid,\n                             isDisabled,\n                             inputSize,\n                         }: {\n    isChecked: boolean;\n    isInvalid: boolean;\n    isDisabled: boolean;\n    inputSize: string;\n}): string {\n    const classes = [\"check-input\"];\n\n    if (isChecked) {\n        classes.push(\"p-checked\");\n    }\n\n    // p-invalid and size classes are now applied by KitsContainer's inner wrapper Flex,\n    // so they're not duplicated here. Individual elements that use `attached` mode\n    // (bypassing the container) should handle these themselves if needed.\n\n    if (isDisabled) {\n        classes.push(\"p-disable\");\n    }\n\n    return classes.join(\" \");\n}\n"],"names":[],"mappings":";;;;AAuFO,SAAS,QAAA,CAAS;AAAA,EACI,SAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACJ,CAAA,EAKd;AACP,EAAA,MAAM,OAAA,GAAU,CAAC,aAAa,CAAA;AAU9B,EAAA,IAAI,UAAA,EAAY;AACZ,IAAA,OAAA,CAAQ,KAAK,WAAW,CAAA;AAAA,EAC5B;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AAC3B;;;;"}

package/form/helpers/Functions.js

@@ -0,0 +1,17 @@
+import 'react';
+
+function ClHelper({
+  isChecked,
+  isInvalid,
+  isDisabled,
+  inputSize
+}) {
+  const classes = ["check-input"];
+  if (isDisabled) {
+    classes.push("p-disable");
+  }
+  return classes.join(" ");
+}
+
+export { ClHelper };
+//# sourceMappingURL=Functions.js.map

package/form/helpers/Functions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Functions.js","sources":["../../../../src/form/helpers/Functions.ts"],"sourcesContent":["import {useEffect, useState} from \"react\";\nimport type {IList} from \"@lmb-it/kitsconcerto-types\";\n\n\nexport const listToObject = (list:any[], labelKey:string, valueKey:string)=>{\n    if (Array.isArray(list)) {\n        if (list.some(o => typeof o == \"string\")) {\n            return list.map(o => {\n                return {\n                    [labelKey]: o,\n                    [valueKey]: o\n                }\n            });\n        }\n        if (list.some(o => !(labelKey in o && valueKey in o))) {\n            throw Error(\"Tags component: In List prop you should pass either strings or object with keys match your dataLabelKey and dataIdKey or label and id\");\n        }\n        return list;\n    }\n\n    return [];\n}\n\nexport const selectHelper=(customProps:any, field:any, value:any, listFetcher:any) =>{\n    const {\n        list,\n        dataLabelKey = \"label\",\n        dataIdKey = \"id\",\n    } = customProps;\n\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [filteredOptions, setFilteredOptions] = useState<IList[]>([]);\n\n    const getList = () => {\n        if (Array.isArray(list)) {\n            return listToObject(list, dataLabelKey, dataIdKey);\n        }\n        if (typeof list === \"function\") {\n            return listToObject(list(value), dataLabelKey, dataIdKey);\n        }\n\n        return [];\n    };\n\n    useEffect(() => {\n        const _list = getList();\n\n        if (JSON.stringify(_list) !== JSON.stringify(filteredOptions)) {\n            setFilteredOptions(_list);\n        }\n    }, []);\n\n    const removeDuplicates = (list: string[]) => {\n        if (Array.isArray(field.value)) {\n            return list.filter((val) => !field.value.includes(val));\n        }\n\n        return list;\n    };\n\n    const onSearchValue = (dataItem:any) => {\n        if (listFetcher) {\n            setIsLoading(true);\n            listFetcher(dataItem)\n                .then((res:any) => {\n                    let newList: IList[] = [];\n\n                    if (res.length > 0) {\n                        newList = newList.concat(removeDuplicates(res));\n                    }\n\n                    setFilteredOptions(newList);\n                })\n                .finally(() => {\n                    setIsLoading(false);\n                });\n        }\n    };\n\n    return {\n        isLoading,\n        filteredOptions,\n        onSearchValue,\n    };\n}\n\n\nexport function ClHelper({\n                             isChecked,\n                             isInvalid,\n                             isDisabled,\n                             inputSize,\n                         }: {\n    isChecked: boolean;\n    isInvalid: boolean;\n    isDisabled: boolean;\n    inputSize: string;\n}): string {\n    const classes = [\"check-input\"];\n\n    if (isChecked) {\n        classes.push(\"p-checked\");\n    }\n\n    // p-invalid and size classes are now applied by KitsContainer's inner wrapper Flex,\n    // so they're not duplicated here. Individual elements that use `attached` mode\n    // (bypassing the container) should handle these themselves if needed.\n\n    if (isDisabled) {\n        classes.push(\"p-disable\");\n    }\n\n    return classes.join(\" \");\n}\n"],"names":[],"mappings":";;AAuFO,SAAS,QAAA,CAAS;AAAA,EACI,SAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACJ,CAAA,EAKd;AACP,EAAA,MAAM,OAAA,GAAU,CAAC,aAAa,CAAA;AAU9B,EAAA,IAAI,UAAA,EAAY;AACZ,IAAA,OAAA,CAAQ,KAAK,WAAW,CAAA;AAAA,EAC5B;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AAC3B;;;;"}