@app-studio/components 0.10.17

package/dist/native/components/Formik/Formik.CountryPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.CountryPicker.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.CountryPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yDAAyD,CAAC;AAChG,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,sBAAsB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACzD,OAAO,CAAC,iBAAiB,CAAC,IAAI,mBAAmB,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AACvE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,sBAAsB,CAAC"}

package/dist/native/components/Formik/Formik.DatePicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DatePickerProps } from '../Form/DatePicker/DatePicker/DatePicker.props';
+/**
+ * Date picker allows users to select a date from a calendar view.
+ */
+export declare const FormikDatePicker: React.FC<DatePickerProps>;

package/dist/native/components/Formik/Formik.DatePicker.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useDatePickerState } from '../Form/DatePicker/DatePicker/DatePicker.state';
+import DatePickerView from '../Form/DatePicker/DatePicker/DatePicker.view';
+import { useFormikInput } from './Formik.Hook';
+const DatePickerComponent = (props) => {
+    const formProps = useFormikInput(props);
+    const datePickerStates = useDatePickerState();
+    return <DatePickerView {...datePickerStates} {...formProps}/>;
+};
+/**
+ * Date picker allows users to select a date from a calendar view.
+ */
+export const FormikDatePicker = DatePickerComponent;
+//# sourceMappingURL=Formik.DatePicker.js.map

package/dist/native/components/Formik/Formik.DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.DatePicker.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACpF,OAAO,cAAc,MAAM,+CAA+C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,mBAAmB,GAA8B,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,gBAAgB,GAAG,kBAAkB,EAAE,CAAC;IAC9C,OAAO,CAAC,cAAc,CAAC,IAAI,gBAAgB,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AACjE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC"}

package/dist/native/components/Formik/Formik.EmojiPicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { EmojiPickerProps } from '../EmojiPicker/EmojiPicker/EmojiPicker.props';
+/**
+ * EmojiPicker allows users to select an emoji from a list with Formik integration.
+ */
+export declare const FormikEmojiPicker: React.FC<EmojiPickerProps>;

package/dist/native/components/Formik/Formik.EmojiPicker.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useEmojiPickerState } from '../EmojiPicker/EmojiPicker/EmojiPicker.state';
+import EmojiPickerView from '../EmojiPicker/EmojiPicker/EmojiPicker.view';
+import { useFormikInput } from './Formik.Hook';
+const EmojiPickerComponent = (props) => {
+    const formProps = useFormikInput(props);
+    // Use the Formik value as the current value
+    const propsWithValue = {
+        ...props,
+        value: formProps.value ?? props.value ?? props.defaultValue,
+    };
+    const emojiPickerStates = useEmojiPickerState(propsWithValue);
+    // Handle emoji selection
+    const handleEmojiSelect = (emoji) => {
+        emojiPickerStates.handleEmojiSelect(emoji);
+        formProps.onChange(emoji.emoji);
+        props.onEmojiSelect?.(emoji);
+    };
+    return (<EmojiPickerView {...emojiPickerStates} {...propsWithValue} handleEmojiSelect={handleEmojiSelect}/>);
+};
+/**
+ * EmojiPicker allows users to select an emoji from a list with Formik integration.
+ */
+export const FormikEmojiPicker = EmojiPickerComponent;
+//# sourceMappingURL=Formik.EmojiPicker.js.map

package/dist/native/components/Formik/Formik.EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.EmojiPicker.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,oBAAoB,GAA+B,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAExC,4CAA4C;IAC5C,MAAM,cAAc,GAAG;QACrB,GAAG,KAAK;QACR,KAAK,EAAE,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY;KAC5D,CAAC;IAEF,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,cAAc,CAAC,CAAC;IAE9D,yBAAyB;IACzB,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAE,EAAE;QACzC,iBAAiB,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3C,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChC,KAAK,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CACd,IAAI,iBAAiB,CAAC,CACtB,IAAI,cAAc,CAAC,CACnB,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,EACrC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,oBAAoB,CAAC"}

package/dist/native/components/Formik/Formik.Form.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FormikConfig } from 'formik';
+export declare const debounce: (...args: any) => void;
+interface CustomFormProps<T> extends FormikConfig<T> {
+    autoFocus?: boolean;
+    initFocus?: string;
+}
+interface FocusContextType {
+    active: boolean;
+    focusNextInput: (name: string) => void;
+    setInputRef: (name: string, ref: HTMLInputElement | null) => void;
+    handleSubmitEditing: (name: string) => void;
+    getReturnKeyType: (name: string) => 'next' | 'done';
+}
+interface CustomFormProps<T> extends FormikConfig<T> {
+    autoFocus?: boolean;
+    initFocus?: string;
+}
+interface FocusContextType {
+    active: boolean;
+    focusNextInput: (name: string) => void;
+    setInputRef: (name: string, ref: HTMLInputElement | null) => void;
+}
+export declare const useFormFocus: () => FocusContextType;
+export declare const FormikForm: <T extends {}>({ children, autoFocus, initFocus, onChange, ...props }: CustomFormProps<T> & any) => React.JSX.Element;
+export {};

package/dist/native/components/Formik/Formik.Form.js

@@ -0,0 +1,69 @@
+import React, { createContext, useContext, useRef, useEffect } from 'react';
+import { useFormikContext } from 'formik';
+import { Form as $Form } from 'app-studio';
+export const debounce = (func, timeout = 300) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func(...args);
+        }, timeout);
+    };
+};
+const FocusContext = createContext({
+    active: false,
+    focusNextInput: () => { },
+    setInputRef: () => { },
+    handleSubmitEditing: () => { },
+    getReturnKeyType: () => 'next',
+});
+export const useFormFocus = () => useContext(FocusContext);
+export const FormikForm = ({ children, autoFocus = false, initFocus, onChange = () => { }, ...props }) => {
+    const formik = useFormikContext();
+    useEffect(() => {
+        onChange(formik.values);
+    }, [formik.values]);
+    const inputRefs = useRef({});
+    const inputNames = useRef([]);
+    const setInputRef = (name, ref) => {
+        inputRefs.current[name] = ref;
+        if (!inputNames.current.includes(name)) {
+            inputNames.current.push(name);
+        }
+    };
+    const focusNextInput = (currentName) => {
+        if (autoFocus) {
+            const currentIndex = inputNames.current.indexOf(currentName);
+            const nextIndex = currentIndex + 1;
+            if (nextIndex < inputNames.current.length) {
+                inputRefs.current[inputNames.current[nextIndex]]?.focus();
+            }
+            else if (formik.onSubmit) {
+                formik.onSubmit(formik.values);
+            }
+        }
+    };
+    const contextValue = {
+        active: autoFocus,
+        focusNextInput,
+        setInputRef,
+        handleSubmitEditing: focusNextInput,
+        getReturnKeyType: (name) => inputNames.current.indexOf(name) === inputNames.current.length - 1
+            ? 'done'
+            : 'next',
+    };
+    useEffect(() => {
+        if (autoFocus) {
+            if (initFocus && inputRefs.current[initFocus]) {
+                inputRefs.current[initFocus]?.focus();
+            }
+            else if (inputNames.current[0]) {
+                inputRefs.current[inputNames.current[0]]?.focus();
+            }
+        }
+    }, [autoFocus, initFocus]);
+    return (<FocusContext.Provider value={contextValue}>
+      <$Form {...props}>{children}</$Form>
+    </FocusContext.Provider>);
+};
+//# sourceMappingURL=Formik.Form.js.map

package/dist/native/components/Formik/Formik.Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.Form.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.Form.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/Formik/Formik.Hook.d.ts

@@ -0,0 +1 @@
+export declare const useFormikInput: ({ name, type, ...props }: any) => any;

package/dist/native/components/Formik/Formik.Hook.js

@@ -0,0 +1,70 @@
+import { useFormikContext, getIn } from 'formik';
+import { useFormFocus } from './Formik.Form';
+const getInputTypeProps = (type) => {
+    switch (type) {
+        case 'email':
+            return {
+                autoCorrect: 'off',
+                // keyboardType: 'email-address',
+                inputMode: 'email',
+                autoCapitalize: 'none',
+            };
+        case 'password':
+            return {
+                autoCorrect: 'off',
+                secureTextEntry: true,
+                autoCapitalize: 'none',
+            };
+        case 'digits':
+            return {
+                // keyboardType: 'phone-pad',
+                inputMode: 'tel',
+            };
+        case 'numeric':
+            return {
+                // keyboardType: 'phone-pad',
+                inputMode: 'numeric',
+            };
+        case 'name':
+            return {
+                autoCorrect: 'off',
+            };
+        default:
+            return {};
+    }
+};
+export const useFormikInput = ({ name, type, ...props }) => {
+    const focus = useFormFocus();
+    const { touched, errors, submitCount, values, setFieldTouched, setFieldValue, } = useFormikContext();
+    const onChangeText = (text) => {
+        setFieldValue(name, text);
+        props.onChangeText?.(text);
+    };
+    const onChange = (value) => {
+        setFieldValue(name, value);
+        props.onChange?.(value);
+    };
+    const handleBlur = () => {
+        setFieldTouched(name, true);
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            focus.focusNextInput(name);
+        }
+    };
+    const isText = ['text', 'password', 'email', 'digits'].includes(type);
+    const error = getIn(touched, name) || submitCount > 0 ? getIn(errors, name) : undefined;
+    const value = getIn(values, name);
+    return {
+        ...getInputTypeProps(type),
+        ...props,
+        value,
+        error,
+        onBlur: handleBlur,
+        onKeyPress: handleKeyPress,
+        ...(isText ? { onChangeText } : { onChange }),
+        ...(focus.active ? { handleKeyPress } : {}),
+    };
+};
+//# sourceMappingURL=Formik.Hook.js.map

package/dist/native/components/Formik/Formik.Hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.Hook.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.Hook.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/Formik/Formik.IconPicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IconPickerProps } from '../IconPicker/IconPicker/IconPicker.props';
+/**
+ * IconPicker allows users to select an icon from a list with Formik integration.
+ */
+export declare const FormikIconPicker: React.FC<IconPickerProps>;

package/dist/native/components/Formik/Formik.IconPicker.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIconPickerState } from '../IconPicker/IconPicker/IconPicker.state';
+import IconPickerView from '../IconPicker/IconPicker/IconPicker.view';
+import { useFormikInput } from './Formik.Hook';
+const IconPickerComponent = (props) => {
+    const formProps = useFormikInput(props);
+    // Use the Formik value as the current value
+    const propsWithValue = {
+        ...props,
+        value: formProps.value ?? props.value ?? props.defaultValue,
+    };
+    const iconPickerStates = useIconPickerState(propsWithValue);
+    // Handle icon selection
+    const handleIconSelect = (iconName) => {
+        iconPickerStates.handleIconSelect(iconName);
+        formProps.onChange(iconName);
+    };
+    return (<IconPickerView {...iconPickerStates} {...propsWithValue} handleIconSelect={handleIconSelect}/>);
+};
+/**
+ * IconPicker allows users to select an icon from a list with Formik integration.
+ */
+export const FormikIconPicker = IconPickerComponent;
+//# sourceMappingURL=Formik.IconPicker.js.map

package/dist/native/components/Formik/Formik.IconPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.IconPicker.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.IconPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,cAAc,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,MAAM,mBAAmB,GAA8B,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAExC,4CAA4C;IAC5C,MAAM,cAAc,GAAG;QACrB,GAAG,KAAK;QACR,KAAK,EAAE,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY;KAC5D,CAAC;IAEF,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAE5D,wBAAwB;IACxB,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;QAC9C,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC5C,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,cAAc,CACb,IAAI,gBAAgB,CAAC,CACrB,IAAI,cAAc,CAAC,CACnB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,EACnC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC"}

package/dist/native/components/Formik/Formik.OTPInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { OTPInputProps } from '../OTPInput/OTPInput/OTPInput.props';
+/**
+ * OTPInput component for entering one-time passwords or verification codes with Formik integration.
+ * Provides multiple input fields for entering digits with auto-focus functionality.
+ * Supports step-based input and improved accessibility.
+ */
+export declare const FormikOTPInput: React.FC<OTPInputProps>;

package/dist/native/components/Formik/Formik.OTPInput.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { useOTPInputState } from '../OTPInput/OTPInput/OTPInput.state';
+import OTPInputView from '../OTPInput/OTPInput/OTPInput.view';
+import { useFormikInput } from './Formik.Hook';
+/**
+ * FormikOTPInput component for entering one-time passwords or verification codes
+ * with Formik integration for form state management.
+ */
+const OTPInputComponent = (props) => {
+    // Get Formik integration props
+    const formProps = useFormikInput(props);
+    // Get OTP input state
+    const { isFocused, setIsFocused, isHovered, setIsHovered, inputRef, containerRef, mirrorSelectionStart, mirrorSelectionEnd, setMirrorSelectionStart, setMirrorSelectionEnd, setInputRef, handleFocus, handleBlur, handleKeyDown, handlePaste, } = useOTPInputState(props);
+    // Handle value changes through Formik
+    const setValue = useCallback((value) => {
+        if (formProps.onChange) {
+            formProps.onChange(value);
+        }
+        // If onComplete is provided and the value is complete, call it
+        if (props.onComplete && value.length === (props.length || 6)) {
+            props.onComplete(value);
+        }
+        // Ensure the input field value is updated directly
+        if (inputRef.current) {
+            inputRef.current.value = value;
+        }
+    }, [formProps, props, inputRef]);
+    // Handle input changes
+    const handleChange = useCallback((e) => {
+        const newValue = e.currentTarget.value.slice(0, props.length || 6);
+        setValue(newValue);
+        // Ensure the input field value is updated directly
+        if (inputRef.current) {
+            inputRef.current.value = newValue;
+        }
+    }, [props.length, setValue, inputRef]);
+    return (<OTPInputView {...props} {...formProps} setValue={setValue} isFocused={isFocused} setIsFocused={setIsFocused} isHovered={isHovered} setIsHovered={setIsHovered} inputRef={inputRef} containerRef={containerRef} mirrorSelectionStart={mirrorSelectionStart} mirrorSelectionEnd={mirrorSelectionEnd} setMirrorSelectionStart={setMirrorSelectionStart} setMirrorSelectionEnd={setMirrorSelectionEnd} setInputRef={setInputRef} handleChange={handleChange} handleFocus={handleFocus} handleBlur={handleBlur} handleKeyDown={handleKeyDown} handlePaste={handlePaste} stepValues={props.stepValues}/>);
+};
+/**
+ * OTPInput component for entering one-time passwords or verification codes with Formik integration.
+ * Provides multiple input fields for entering digits with auto-focus functionality.
+ * Supports step-based input and improved accessibility.
+ */
+export const FormikOTPInput = OTPInputComponent;
+//# sourceMappingURL=Formik.OTPInput.js.map

package/dist/native/components/Formik/Formik.OTPInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.OTPInput.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.OTPInput.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/Formik/Formik.Password.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PasswordProps } from '../Form/Password/Password/Password.props';
+/**
+ * To allow users to securely enter sensitive information
+ */
+export declare const FormikPassword: React.FC<PasswordProps>;

package/dist/native/components/Formik/Formik.Password.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { usePasswordState } from '../Form/Password/Password/Password.state';
+import { View } from 'app-studio';
+import { CloseEyeIcon, OpenEyeIcon } from '../Icon/Icon';
+import TextFieldView from '../Form/TextField/TextField/TextField.view';
+import { useFormikInput } from './Formik.Hook';
+const PasswordComponent = ({ visibleIcon = <OpenEyeIcon widthHeight={14}/>, hiddenIcon = <CloseEyeIcon widthHeight={14}/>, ...props }) => {
+    const formProps = useFormikInput(props);
+    const { isVisible, setIsVisible, ...passwordProps } = usePasswordState(formProps);
+    return (<TextFieldView {...passwordProps} type={isVisible ? 'text' : 'password'} isClearable={false} right={<View onClick={() => {
+                if (!props.isDisabled) {
+                    setIsVisible(!isVisible);
+                }
+            }}>
+          {isVisible ? visibleIcon : hiddenIcon}
+        </View>}/>);
+};
+/**
+ * To allow users to securely enter sensitive information
+ */
+export const FormikPassword = PasswordComponent;
+//# sourceMappingURL=Formik.Password.js.map

package/dist/native/components/Formik/Formik.Password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.Password.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.Password.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,aAAa,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,iBAAiB,GAA4B,CAAC,EAClD,WAAW,GAAG,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAG,EAC9C,UAAU,GAAG,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAG,EAC9C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,GACjD,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAE9B,OAAO,CACL,CAAC,aAAa,CACZ,IAAI,aAAa,CAAC,CAClB,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CACtC,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,KAAK,CAAC,CACJ,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;oBACtB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;gBAC3B,CAAC;YACH,CAAC,CAAC,CAEF;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CACvC;QAAA,EAAE,IAAI,CACR,CAAC,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC"}

package/dist/native/components/Formik/Formik.Radio.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { RadioProps } from '../Form/Radio/Radio/Radio.props';
+/**
+ * Radio allows users to select one option from a set of choices with Formik integration.
+ */
+export declare const FormikRadio: React.FC<RadioProps>;

package/dist/native/components/Formik/Formik.Radio.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useRadioState } from '../Form/Radio/Radio/Radio.state';
+import RadioView from '../Form/Radio/Radio/Radio.view';
+import { useFormikInput } from './Formik.Hook';
+const RadioComponent = (props) => {
+    let { value, ...formProps } = useFormikInput(props);
+    formProps.isChecked = value === props.value;
+    const radioStates = useRadioState(props);
+    return <RadioView {...radioStates} {...formProps}/>;
+};
+/**
+ * Radio allows users to select one option from a set of choices with Formik integration.
+ */
+export const FormikRadio = RadioComponent;
+//# sourceMappingURL=Formik.Radio.js.map

package/dist/native/components/Formik/Formik.Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.Radio.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,SAAS,MAAM,gCAAgC,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,cAAc,GAAyB,CAAC,KAAK,EAAE,EAAE;IACrD,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACpD,SAAS,CAAC,SAAS,GAAG,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC;IAC5C,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,OAAO,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AACvD,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,cAAc,CAAC"}

package/dist/native/components/Formik/Formik.Select.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SelectProps } from '../Form/Select/Select/Select.props';
+/**
+ * Select provides a dropdown list of options for the user to choose from.
+ */
+export declare const FormikSelect: React.FC<SelectProps>;

package/dist/native/components/Formik/Formik.Select.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useSelectState } from '../Form/Select/Select/Select.state';
+import SelectView from '../Form/Select/Select/Select.view';
+import { useFormikInput } from './Formik.Hook';
+const SelectComponent = (props) => {
+    let formProps = useFormikInput(props);
+    formProps.selected = formProps.value;
+    const selectStates = useSelectState(props);
+    return <SelectView {...selectStates} {...formProps}/>;
+};
+/**
+ * Select provides a dropdown list of options for the user to choose from.
+ */
+export const FormikSelect = SelectComponent;
+//# sourceMappingURL=Formik.Select.js.map

package/dist/native/components/Formik/Formik.Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.Select.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,eAAe,GAA0B,CAAC,KAAK,EAAE,EAAE;IACvD,IAAI,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC;IACrC,MAAM,YAAY,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAC3C,OAAO,CAAC,UAAU,CAAC,IAAI,YAAY,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AACzD,CAAC,CAAC;AAEF;;GAEG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC"}

package/dist/native/components/Formik/Formik.Selector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SelectorProps } from '../Form/Selector/Selector/Selector.props';
+/**
+ * Selector provides a dropdown list of options for the user to choose from.
+ */
+export declare const FormikSelector: React.FC<SelectorProps>;

package/dist/native/components/Formik/Formik.Selector.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useSelectorState } from '../Form/Selector/Selector/Selector.state';
+import SelectorView from '../Form/Selector/Selector/Selector.view';
+import { useFormikInput } from './Formik.Hook';
+const SelectorComponent = (props) => {
+    let formProps = useFormikInput(props);
+    formProps.selected = formProps.value;
+    const selectorStates = useSelectorState(props);
+    return <SelectorView {...selectorStates} {...formProps}/>;
+};
+/**
+ * Selector provides a dropdown list of options for the user to choose from.
+ */
+export const FormikSelector = SelectorComponent;
+//# sourceMappingURL=Formik.Selector.js.map

package/dist/native/components/Formik/Formik.Selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.Selector.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.Selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,iBAAiB,GAA4B,CAAC,KAAK,EAAE,EAAE;IAC3D,IAAI,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC;IACrC,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC/C,OAAO,CAAC,YAAY,CAAC,IAAI,cAAc,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AAC7D,CAAC,CAAC;AAEF;;GAEG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC"}

package/dist/native/components/Formik/Formik.Slider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SliderProps } from '../Slider/Slider/Slider.props';
+/**
+ * Slider component integrated with Formik for form state management.
+ * Allows users to select a value from a range by moving a handle.
+ */
+export declare const FormikSlider: React.FC<SliderProps>;

package/dist/native/components/Formik/Formik.Slider.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useSliderState } from '../Slider/Slider/Slider.state';
+import { SliderView } from '../Slider/Slider/Slider.view';
+import { useFormikInput } from './Formik.Hook';
+const SliderComponent = (props) => {
+    // Get Formik props (value, onChange, etc.)
+    const formProps = useFormikInput(props);
+    // Get slider state and handlers
+    const sliderState = useSliderState({
+        ...props,
+        value: formProps.value !== undefined ? Number(formProps.value) : undefined,
+        onChange: (value) => {
+            // Call Formik's onChange
+            formProps.onChange(value);
+            // Call the original onChange if provided
+            props.onChange?.(value);
+        },
+    });
+    // Render the slider with both Formik props and slider state
+    return <SliderView {...props} {...sliderState} {...formProps}/>;
+};
+/**
+ * Slider component integrated with Formik for form state management.
+ * Allows users to select a value from a range by moving a handle.
+ */
+export const FormikSlider = SliderComponent;
+//# sourceMappingURL=Formik.Slider.js.map

package/dist/native/components/Formik/Formik.Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.Slider.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,eAAe,GAA0B,CAAC,KAAK,EAAE,EAAE;IACvD,2CAA2C;IAC3C,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAExC,gCAAgC;IAChC,MAAM,WAAW,GAAG,cAAc,CAAC;QACjC,GAAG,KAAK;QACR,KAAK,EAAE,SAAS,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QAC1E,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE;YAC1B,yBAAyB;YACzB,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC1B,yCAAyC;YACzC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;KACF,CAAC,CAAC;IAEH,4DAA4D;IAC5D,OAAO,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AACnE,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC"}

package/dist/native/components/Formik/Formik.Switch.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SwitchProps } from '../Form/Switch/Switch/Switch.props';
+export declare const FormikSwitch: React.FC<SwitchProps>;

package/dist/native/components/Formik/Formik.Switch.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useSwitchState } from '../Form/Switch/Switch/Switch.state';
+import SwitchView from '../Form/Switch/Switch/Switch.view';
+import { useFormikInput } from './Formik.Hook';
+const SwitchComponent = (props) => {
+    const formProps = useFormikInput(props);
+    const switchStates = useSwitchState(props);
+    return <SwitchView {...switchStates} {...formProps}/>;
+};
+export const FormikSwitch = SwitchComponent;
+//# sourceMappingURL=Formik.Switch.js.map

package/dist/native/components/Formik/Formik.Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.Switch.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,eAAe,GAA0B,CAAC,KAAK,EAAE,EAAE;IACvD,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAC3C,OAAO,CAAC,UAAU,CAAC,IAAI,YAAY,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AACzD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC"}

package/dist/native/components/Formik/Formik.TagInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TagInputProps } from '../Form/TagInput/TagInput/TagInput.props';
+/**
+ * TagInput allows users to add and manage a list of tags.
+ * Integrated with Formik for form validation and state management.
+ */
+export declare const FormikTagInput: React.FC<TagInputProps & {
+    name: string;
+}>;

package/dist/native/components/Formik/Formik.TagInput.js

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { useFormikContext, getIn } from 'formik';
+import { useTagInputState } from '../Form/TagInput/TagInput/TagInput.state';
+import TagInputView from '../Form/TagInput/TagInput/TagInput.view';
+/**
+ * Formik-integrated TagInput component
+ */
+const TagInputComponent = (props) => {
+    const { name, ...restProps } = props;
+    // Get Formik context directly for better control
+    const { values, errors, touched, submitCount, setFieldValue, setFieldTouched, } = useFormikContext();
+    // Get current field value and error state
+    const value = getIn(values, name) || [];
+    const error = getIn(touched, name) || submitCount > 0 ? getIn(errors, name) : undefined;
+    // Handle tags change with clean data
+    const handleTagsChange = useCallback((tags) => {
+        // Ensure we only pass clean string arrays to Formik
+        const cleanTags = Array.isArray(tags)
+            ? tags.filter((tag) => typeof tag === 'string')
+            : [];
+        setFieldValue(name, cleanTags);
+        props.onTagsChange?.(cleanTags);
+    }, [name, setFieldValue, props.onTagsChange]);
+    // Handle blur to mark field as touched
+    const handleBlur = useCallback(() => {
+        setFieldTouched(name, true);
+        props.onBlur?.();
+    }, [name, setFieldTouched, props.onBlur]);
+    // Get component state with Formik-controlled tags
+    const tagInputState = useTagInputState({
+        ...restProps,
+        tags: value,
+        onTagsChange: handleTagsChange,
+        onBlur: handleBlur,
+    });
+    // Separate tags from tagInputState to avoid type conflicts
+    const { tags, ...stateWithoutTags } = tagInputState;
+    // Render the view component with combined props and state
+    return (<TagInputView {...stateWithoutTags} {...restProps} tags={tags} error={error}/>);
+};
+/**
+ * TagInput allows users to add and manage a list of tags.
+ * Integrated with Formik for form validation and state management.
+ */
+export const FormikTagInput = TagInputComponent;
+//# sourceMappingURL=Formik.TagInput.js.map

package/dist/native/components/Formik/Formik.TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formik.TagInput.js","sourceRoot":"","sources":["../../../../src/components/Formik/Formik.TagInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,YAAY,MAAM,yCAAyC,CAAC;AAEnE;;GAEG;AACH,MAAM,iBAAiB,GAA+C,CACpE,KAAuC,EACvC,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAErC,iDAAiD;IACjD,MAAM,EACJ,MAAM,EACN,MAAM,EACN,OAAO,EACP,WAAW,EACX,aAAa,EACb,eAAe,GAChB,GAAG,gBAAgB,EAAE,CAAC;IAEvB,0CAA0C;IAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,MAAM,KAAK,GACT,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5E,qCAAqC;IACrC,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAc,EAAE,EAAE;QACjB,oDAAoD;QACpD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;YACnC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC;YAC/C,CAAC,CAAC,EAAE,CAAC;QACP,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QAC/B,KAAK,CAAC,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC,CAC1C,CAAC;IAEF,uCAAuC;IACvC,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC5B,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1C,kDAAkD;IAClD,MAAM,aAAa,GAAG,gBAAgB,CAAC;QACrC,GAAG,SAAS;QACZ,IAAI,EAAE,KAAK;QACX,YAAY,EAAE,gBAAgB;QAC9B,MAAM,EAAE,UAAU;KACnB,CAAC,CAAC;IAEH,2DAA2D;IAC3D,MAAM,EAAE,IAAI,EAAE,GAAG,gBAAgB,EAAE,GAAG,aAAa,CAAC;IAEpD,0DAA0D;IAC1D,OAAO,CACL,CAAC,YAAY,CACX,IAAI,gBAAgB,CAAC,CACrB,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC"}

package/dist/native/components/Formik/Formik.TextArea.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextAreaProps } from '../Form/TextArea/TextArea/TextArea.props';
+/**
+ * Text Area is an component used to create a multi-line input field.
+ */
+export declare const FormikTextArea: React.FC<TextAreaProps>;