react-restyle-components 0.3.77 → 0.3.80

package/lib/src/core-components/src/components/FormField/components/DropdownInput.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import { Icon } from '../../Icon';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const DropdownInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, dropdownItems = [], placeholder, name, className, labelProps, ...props }, ref) => {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [dropdownValue, setDropdownValue] = useState(value || '');
+    const [filteredDropdownItems, setFilteredDropdownItems] = useState(dropdownItems);
+    const dropdownWrapperRef = useRef(null);
+    useEffect(() => {
+        if (dropdownItems) {
+            setFilteredDropdownItems(dropdownItems);
+        }
+    }, [dropdownItems]);
+    useEffect(() => {
+        if (value !== undefined) {
+            setDropdownValue(value);
+        }
+    }, [value]);
+    // Outside click handler
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (dropdownWrapperRef.current &&
+                !dropdownWrapperRef.current.contains(event.target) &&
+                isDropdownOpen) {
+                setIsDropdownOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isDropdownOpen]);
+    const handleDropdownInputChange = (event) => {
+        const inputValue = event.target.value;
+        setDropdownValue(inputValue);
+        const filtered = dropdownItems.filter((item) => item.toLowerCase().includes(inputValue.toLowerCase()));
+        setFilteredDropdownItems(filtered);
+        if (onChange) {
+            onChange(inputValue);
+        }
+    };
+    const handleDropdownItemSelect = (item) => {
+        setDropdownValue(item);
+        setIsDropdownOpen(false);
+        if (onChange) {
+            onChange(item);
+        }
+    };
+    return (_jsxs("div", { className: cn(s['w-full'], s['relative'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps })), _jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center']), ref: dropdownWrapperRef, children: [_jsx("input", { ref: ref, id: id, type: "text", name: name || id, placeholder: placeholder || label, value: dropdownValue, disabled: disabled, className: cn(s['pt-3'], s['pb-2'], s['w-full'], s['px-0'], s['mt-0'], s['bg-transparent'], s['border-gray-secondary'], s['border-0'], s['border-b'], s['appearance-none'], s['focus:outline-none'], s['focus:ring-0'], s['font-arimaRegular'], s['text-md'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50'], error && s['border-red-500']), onClick: () => {
+                            if (!disabled) {
+                                setIsDropdownOpen(!isDropdownOpen);
+                            }
+                        }, onChange: handleDropdownInputChange, ...props }), !isDropdownOpen && (_jsx(Icon, { nameIcon: "MdKeyboardArrowDown", propsIcon: { size: '24', color: '#000000' }, onClick: () => {
+                            if (!disabled) {
+                                setIsDropdownOpen(!isDropdownOpen);
+                            }
+                        } })), isDropdownOpen && (_jsx(Icon, { nameIcon: "MdKeyboardArrowUp", propsIcon: { size: '24', color: '#000000' }, onClick: () => {
+                            if (!disabled) {
+                                setIsDropdownOpen(!isDropdownOpen);
+                            }
+                        } }))] }), isDropdownOpen && (_jsx("div", { className: cn(s['z-10'], s['w-full'], s['absolute'], s['text-base'], s['list-none'], s['bg-white'], s['rounded'], s['divide-y'], s['divide-gray-100'], s['shadow'], s['dark:bg-gray-700']), children: _jsx("ul", { className: s['py-1'], children: filteredDropdownItems?.map((item, index) => (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular'], s['cursor-pointer']), onClick: () => {
+                            if (!disabled) {
+                                handleDropdownItemSelect(item);
+                            }
+                        }, children: item }, index))) }) })), error && (_jsx("span", { className: cn(s['text-red'], s['text-4xs']), id: "error", children: error || `${label || 'Field'} is required` }))] }));
+});
+DropdownInput.displayName = 'DropdownInput';

package/lib/src/core-components/src/components/FormField/components/OtpInput.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface OtpInputProps {
+    id: string;
+    label?: string;
+    error?: string;
+    required?: boolean;
+    value?: Array<number | undefined>;
+    onChange?: (value: Array<number | undefined>) => void;
+    disabled?: boolean;
+    otpLength?: number;
+    pinErrorMsg?: string;
+    pinDefaultMsg?: string;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+export declare const OtpInput: React.ForwardRefExoticComponent<Omit<OtpInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=OtpInput.d.ts.map

package/lib/src/core-components/src/components/FormField/components/OtpInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/OtpInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,qGA6JpB,CAAC"}

package/lib/src/core-components/src/components/FormField/components/OtpInput.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const OtpInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, otpLength = 6, pinErrorMsg, pinDefaultMsg, className, labelProps, ...props }, ref) => {
+    const [pinState, setPinState] = useState(value || []);
+    const pinInputRefs = useRef([]);
+    useEffect(() => {
+        if (value) {
+            setPinState(value);
+        }
+    }, [value]);
+    const handlePinChange = (event, index) => {
+        const val = event.target.value;
+        const pinNumber = Number(val.trim());
+        if (isNaN(pinNumber) || val.length === 0)
+            return;
+        if (pinNumber >= 0 && pinNumber <= 9) {
+            const newPin = [...pinState];
+            newPin[index] = pinNumber;
+            setPinState(newPin);
+            if (onChange) {
+                onChange(newPin);
+            }
+            if (index < otpLength - 1) {
+                const nextRef = pinInputRefs.current[index + 1];
+                if (nextRef)
+                    nextRef.focus();
+            }
+        }
+    };
+    const handlePinKeyDown = (event, index) => {
+        if (event.nativeEvent.code !== 'Backspace')
+            return;
+        if (pinState[index] !== undefined) {
+            const newPin = [...pinState];
+            newPin[index] = undefined;
+            setPinState(newPin);
+            if (onChange) {
+                onChange(newPin);
+            }
+            if (index > 0) {
+                const prevRef = pinInputRefs.current[index - 1];
+                if (prevRef)
+                    prevRef.focus();
+            }
+        }
+        else if (index > 0) {
+            const prevRef = pinInputRefs.current[index - 1];
+            if (prevRef)
+                prevRef.focus();
+        }
+    };
+    return (_jsxs("div", { className: cn(s['w-full'], s['relative'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps })), _jsx("div", { className: cn(s['flex'], s['gap-2'], s['p-2'], s['text-center']), children: Array.from({ length: otpLength }, (_, index) => (_jsx("input", { ref: (el) => {
+                        if (el) {
+                            pinInputRefs.current[index] = el;
+                        }
+                        if (index === 0 && ref) {
+                            if (typeof ref === 'function') {
+                                ref(el);
+                            }
+                            else {
+                                ref.current = el;
+                            }
+                        }
+                    }, type: "tel", disabled: disabled, className: cn(s['text-md'], s['font-extrabold'], s['bg-transparent'], s['text-center'], s['z-20'], s['border'], s['border-gray-secondary'], s['rounded-full'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50'], error && s['border-red-500']), style: { width: '30px', height: '30px' }, onKeyDown: (event) => handlePinKeyDown(event, index), onMouseUp: () => {
+                        if (pinState.join('').length <= 0) {
+                            const firstRef = pinInputRefs.current[0];
+                            if (firstRef)
+                                firstRef.focus();
+                        }
+                    }, onClick: () => {
+                        if (pinState.join('').length <= 0) {
+                            if (onChange) {
+                                onChange([]);
+                            }
+                        }
+                    }, onChange: (event) => handlePinChange(event, index), value: pinState[index] || '', ...props }, index))) }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error || pinErrorMsg })), !error && pinDefaultMsg && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-gray-600'], s['dark:text-gray-400']), children: pinDefaultMsg }))] }));
+});
+OtpInput.displayName = 'OtpInput';

package/lib/src/core-components/src/components/FormField/components/PasswordInput.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface PasswordInputProps {
+    id: string;
+    label?: string;
+    error?: string;
+    required?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=PasswordInput.d.ts.map

package/lib/src/core-components/src/components/FormField/components/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,UAAU,kBAAkB;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,0GAsIzB,CAAC"}

package/lib/src/core-components/src/components/FormField/components/PasswordInput.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const PasswordInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, placeholder, className, labelProps, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const handlePasswordMouseDown = () => {
+        setShowPassword(true);
+    };
+    const handlePasswordMouseUp = () => {
+        setShowPassword(false);
+    };
+    return (_jsxs("div", { className: cn(s['w-full'], className), children: [label && (_jsxs("label", { htmlFor: id, className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], s['mb-1']), ...labelProps, children: [label, required && (_jsx("span", { className: cn(s['text-red-500'], s['ml-1']), children: "*" }))] })), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['relative']), children: [_jsx("input", { ref: ref, id: id, type: showPassword ? 'text' : 'password', required: required, disabled: disabled, value: value, onChange: (e) => onChange?.(e.target.value), placeholder: placeholder, className: cn(s['w-full'], s['px-4'], s['py-2'], s['pr-12'], s['border'], s['rounded-lg'], s['transition-colors'], s['bg-white'], s['dark:bg-gray-800'], s['border-gray-300'], s['dark:border-gray-600'], s['text-gray-900'], s['dark:text-gray-100'], s['placeholder-gray-500'], s['dark:placeholder-gray-400'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-primary'], s['focus:ring-offset-1'], error && s['border-red-500'], error && s['focus:ring-red-500'], className), style: {
+                            ...props.style,
+                            '--tw-ring-offset-color': '#ffffff',
+                        }, ...props }), _jsx("div", { className: cn(s['flex'], s['absolute'], s['right-3'], s['z-10']), children: _jsx("svg", { className: cn(s['h-6'], s['w-6'], s['cursor-pointer']), fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", onMouseDown: handlePasswordMouseDown, onMouseUp: handlePasswordMouseUp, onMouseLeave: handlePasswordMouseUp, children: showPassword ? (_jsx("path", { fill: "currentColor", d: "M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z" })) : (_jsx("path", { fill: "currentColor", d: "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z" })) }) })] }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+PasswordInput.displayName = 'PasswordInput';

package/lib/src/core-components/src/components/FormField/components/PinInput.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface PinInputProps {
+    id: string;
+    label?: string;
+    error?: string;
+    required?: boolean;
+    value?: Array<number | undefined>;
+    onChange?: (value: Array<number | undefined>) => void;
+    disabled?: boolean;
+    pinLength?: number;
+    pinErrorMsg?: string;
+    pinDefaultMsg?: string;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+export declare const PinInput: React.ForwardRefExoticComponent<Omit<PinInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=PinInput.d.ts.map

package/lib/src/core-components/src/components/FormField/components/PinInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/PinInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,qGAkLpB,CAAC"}

package/lib/src/core-components/src/components/FormField/components/PinInput.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const PinInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, pinLength = 12, pinErrorMsg, pinDefaultMsg, className, labelProps, ...props }, ref) => {
+    const [pinState, setPinState] = useState(value || []);
+    const pinInputRefs = useRef([]);
+    useEffect(() => {
+        if (value) {
+            setPinState(value);
+        }
+    }, [value]);
+    const handlePinChange = (event, index) => {
+        const inputValue = event.target.value;
+        const numericValue = parseInt(inputValue, 10);
+        if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 9) {
+            const newPinState = [...pinState];
+            newPinState[index] = numericValue;
+            setPinState(newPinState);
+            if (onChange) {
+                onChange(newPinState);
+            }
+            // Move to next input
+            if (index < pinLength - 1) {
+                const nextRef = pinInputRefs.current[index + 1];
+                if (nextRef) {
+                    nextRef.focus();
+                }
+            }
+        }
+        else if (inputValue === '') {
+            const newPinState = [...pinState];
+            newPinState[index] = undefined;
+            setPinState(newPinState);
+            if (onChange) {
+                onChange(newPinState);
+            }
+        }
+    };
+    const handlePinKeyDown = (event, index) => {
+        if (event.key === 'Backspace' && !pinState[index] && index > 0) {
+            const prevRef = pinInputRefs.current[index - 1];
+            if (prevRef) {
+                prevRef.focus();
+            }
+        }
+    };
+    return (_jsxs("div", { className: cn(s['w-full'], s['relative'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps })), _jsx("div", { className: cn(s['flex'], s['space-x-1']), children: Array.from({ length: pinLength }, (_, index) => (_jsxs("div", { className: cn(s['flex'], s['space-x-1'], s['max-w-full'], s['items-stretch']), children: [_jsx("input", { ref: (el) => {
+                                if (el) {
+                                    pinInputRefs.current[index] = el;
+                                }
+                                if (index === 0 && ref) {
+                                    if (typeof ref === 'function') {
+                                        ref(el);
+                                    }
+                                    else {
+                                        ref.current = el;
+                                    }
+                                }
+                            }, "data-testid": "inputElementPin", type: "tel", disabled: disabled, className: cn(s['pb-2'], s['block'], s['w-4'], s['px-0'], s['mt-0'], s['bg-transparent'], s['text-center'], s['border-0'], s['border-b'], s['z-20'], s['appearance-none'], s['rounded-none'], s['focus:outline-none'], s['focus:ring-0'], s['focus:border-gray-secondary'], s['border-gray-secondary'], s['font-arimaRegular'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50'], error && s['border-red-500']), onKeyDown: (event) => handlePinKeyDown(event, index), onMouseUp: () => {
+                                if (pinState.join('').length <= 0) {
+                                    const firstRef = pinInputRefs.current[0];
+                                    if (firstRef)
+                                        firstRef.focus();
+                                }
+                            }, onClick: () => {
+                                if (pinState.join('').length <= 0) {
+                                    if (onChange) {
+                                        onChange([]);
+                                    }
+                                }
+                            }, onChange: (event) => handlePinChange(event, index), value: pinState[index]?.toString() || '', ...props }), _jsx("div", { className: s['invisible'], children: (index + 1) % 4 === 0 ? 'ss' : null })] }, index))) }), error && (_jsx("span", { className: cn(s['text-sm'], s['text-red'], s['text-4xs'], s['font-arimaRegular']), id: "error", children: error || pinErrorMsg || '' })), !error && pinDefaultMsg && (_jsx("span", { className: cn(s['text-sm'], s['text-4xs'], s['font-arimaRegular']), id: "error", children: pinDefaultMsg }))] }));
+});
+PinInput.displayName = 'PinInput';

package/lib/src/core-components/src/components/FormField/components/RadioInput.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface RadioOption {
+    label?: string;
+    value?: string;
+    title?: string;
+    checked?: boolean;
+}
+export interface RadioInputProps {
+    id: string;
+    label?: string;
+    error?: string;
+    required?: boolean;
+    value?: string | RadioOption;
+    onChange?: (value: string | RadioOption) => void;
+    disabled?: boolean;
+    radioOptions?: RadioOption[];
+    name?: string;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+export declare const RadioInput: React.ForwardRefExoticComponent<Omit<RadioInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=RadioInput.d.ts.map

package/lib/src/core-components/src/components/FormField/components/RadioInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/RadioInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,uGAmKtB,CAAC"}

package/lib/src/core-components/src/components/FormField/components/RadioInput.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import { Icon } from '../../Icon';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const RadioInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, radioOptions = [], name, className, labelProps, ...props }, ref) => {
+    const [radioList, setRadioList] = useState(radioOptions);
+    useEffect(() => {
+        if (radioOptions) {
+            setRadioList(radioOptions);
+        }
+    }, [radioOptions]);
+    // Check if using icon-based radio (has title/checked properties)
+    const firstOption = radioList[0];
+    const isIconBased = firstOption && ('title' in firstOption || 'checked' in firstOption);
+    const handleRadioChange = (index) => {
+        if (isIconBased) {
+            const result = radioList.map((e, i) => {
+                if (i === index)
+                    return { ...e, checked: true };
+                else
+                    return { ...e, checked: false };
+            });
+            setRadioList(result);
+            if (onChange) {
+                onChange(result.find((item) => item.checked));
+            }
+        }
+        else {
+            // Native radio button behavior
+            const selectedOption = radioList[index];
+            if (onChange && selectedOption?.value) {
+                onChange(selectedOption.value);
+            }
+        }
+    };
+    const renderIconBasedRadio = () => (_jsx(_Fragment, { children: radioList.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['mb-1'], !disabled && s['cursor-pointer'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50'], className), onClick: () => {
+                if (!disabled) {
+                    handleRadioChange(index);
+                }
+            }, children: _jsxs("div", { className: cn(s['flex'], s['flex-row'], s['gap-1'], s['items-center']), children: [item.checked ? (_jsx(Icon, { nameIcon: "ImRadioChecked" })) : (_jsx(Icon, { nameIcon: "ImRadioUnchecked" })), _jsx("span", { className: cn(s['text-4xs']), children: item.title })] }) }, index))) }));
+    const renderNativeRadio = () => (_jsx(_Fragment, { children: radioList.map((item, key) => (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2'], s['mb-2']), onClick: () => {
+                if (!disabled && item.value) {
+                    handleRadioChange(key);
+                }
+            }, children: [_jsx("input", { ref: ref, type: "radio", id: `${id}-${key}`, name: name || id, value: item.value, checked: value === item.value, onChange: () => {
+                        if (item.value) {
+                            handleRadioChange(key);
+                        }
+                    }, disabled: disabled, className: cn(s['w-4'], s['h-4'], s['text-blue-600'], s['bg-gray-100'], s['border-gray-300'], s['focus:ring-blue-500'], s['dark:focus:ring-blue-600'], s['dark:ring-offset-gray-800'], s['focus:ring-2'], s['dark:bg-gray-700'], s['dark:border-gray-600']), ...props }), _jsx("label", { htmlFor: `${id}-${key}`, className: cn(s['cursor-pointer']), children: item.label })] }, key))) }));
+    return (_jsxs("div", { className: cn(s['w-full'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps, children: isIconBased ? renderIconBasedRadio() : renderNativeRadio() })), !label && (_jsx(_Fragment, { children: isIconBased ? renderIconBasedRadio() : renderNativeRadio() })), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+RadioInput.displayName = 'RadioInput';

package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface TextDropdownInputProps {
+    id: string;
+    label?: string;
+    error?: string;
+    required?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement> | null, value?: string) => void;
+    disabled?: boolean;
+    dropdownItems?: string[];
+    allowCustomInput?: boolean;
+    placeholder?: string;
+    name?: string;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+export declare const TextDropdownInput: React.ForwardRefExoticComponent<Omit<TextDropdownInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TextDropdownInput.d.ts.map

package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDropdownInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/TextDropdownInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAMzD,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,IAAI,EAChD,KAAK,CAAC,EAAE,MAAM,KACX,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,8GA+S7B,CAAC"}

package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import { Icon } from '../../Icon';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const TextDropdownInput = React.forwardRef(({ id, label, error, required, value, onChange, onBlur, disabled, dropdownItems = [], allowCustomInput = true, placeholder = 'Select an option', name, className, labelProps, ...props }, ref) => {
+    const [isTextDropdownOpen, setIsTextDropdownOpen] = useState(false);
+    const [textDropdownValue, setTextDropdownValue] = useState(value || '');
+    const [filteredTextDropdownItems, setFilteredTextDropdownItems] = useState(dropdownItems);
+    const [isTextEditing, setIsTextEditing] = useState(false);
+    const textDropdownWrapperRef = useRef(null);
+    useEffect(() => {
+        if (dropdownItems) {
+            setFilteredTextDropdownItems(dropdownItems);
+        }
+    }, [dropdownItems]);
+    useEffect(() => {
+        if (value !== undefined) {
+            setTextDropdownValue(value);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (isTextEditing && textDropdownValue) {
+            const filtered = dropdownItems.filter((item) => item.toLowerCase().includes(textDropdownValue.toLowerCase()));
+            setFilteredTextDropdownItems(filtered);
+        }
+        else {
+            setFilteredTextDropdownItems(dropdownItems);
+        }
+    }, [textDropdownValue, dropdownItems, isTextEditing]);
+    // Outside click handler
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (textDropdownWrapperRef.current &&
+                !textDropdownWrapperRef.current.contains(event.target) &&
+                isTextDropdownOpen) {
+                setIsTextDropdownOpen(false);
+                setIsTextEditing(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isTextDropdownOpen]);
+    const handleTextDropdownInputChange = (event) => {
+        const inputValue = event.target.value;
+        setTextDropdownValue(inputValue);
+        setIsTextEditing(true);
+        const filtered = dropdownItems.filter((item) => item.toLowerCase().includes(inputValue.toLowerCase()));
+        setFilteredTextDropdownItems(filtered);
+        if (onChange) {
+            onChange(inputValue);
+        }
+    };
+    const handleTextDropdownItemSelect = (item) => {
+        setTextDropdownValue(item);
+        setIsTextDropdownOpen(false);
+        setIsTextEditing(false);
+        if (onChange) {
+            onChange(item);
+        }
+        if (onBlur) {
+            onBlur(null, item);
+        }
+    };
+    const handleTextDropdownClick = () => {
+        if (!disabled) {
+            setIsTextDropdownOpen(!isTextDropdownOpen);
+            setIsTextEditing(true);
+        }
+    };
+    const handleTextDropdownFocus = () => {
+        if (!disabled) {
+            setIsTextEditing(true);
+        }
+    };
+    const handleTextDropdownBlur = (event) => {
+        setTimeout(() => {
+            setIsTextEditing(false);
+        }, 150);
+        if (onBlur) {
+            onBlur(event, textDropdownValue);
+        }
+    };
+    return (_jsxs("div", { className: cn(s['w-full'], s['relative'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps })), _jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center'], s['leading-4'], s['p-2'], s['dark:bg-boxdark'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], error ? s['border-red'] : s['border-gray-300'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50']), ref: textDropdownWrapperRef, children: [_jsx("input", { ref: ref, id: id, type: "text", name: name || id, placeholder: placeholder, value: textDropdownValue, disabled: disabled, readOnly: !allowCustomInput, className: cn(s['w-full'], s['bg-transparent'], s['border-0'], s['appearance-none'], s['focus:outline-none'], s['focus:ring-0'], s['font-arimaRegular'], s['text-md'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50']), onClick: handleTextDropdownClick, onChange: allowCustomInput ? handleTextDropdownInputChange : undefined, onFocus: handleTextDropdownFocus, onBlur: handleTextDropdownBlur, ...props }), !disabled && (_jsx(Icon, { nameIcon: isTextDropdownOpen ? 'MdKeyboardArrowUp' : 'MdKeyboardArrowDown', propsIcon: { size: '16', color: '#000000' }, onClick: handleTextDropdownClick }))] }), isTextDropdownOpen && !disabled && (_jsx("div", { className: cn(s['z-10'], s['w-full'], s['absolute'], s['text-base'], s['list-none'], s['bg-white'], s['rounded'], s['divide-y'], s['divide-gray-100'], s['shadow'], s['dark:bg-gray-700'], s['max-h-60'], s['overflow-y-auto']), children: _jsxs("ul", { className: s['py-1'], children: [filteredTextDropdownItems.length > 0 ? (filteredTextDropdownItems.map((item, index) => (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular'], s['cursor-pointer'], textDropdownValue === item && s['bg-blue-50'], textDropdownValue === item && s['text-blue-700']), onClick: () => handleTextDropdownItemSelect(item), children: item }, index)))) : (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['text-gray-500'], s['font-arimaRegular']), children: allowCustomInput
+                                ? 'No matches found'
+                                : 'No options available' })), allowCustomInput &&
+                            textDropdownValue &&
+                            !dropdownItems.includes(textDropdownValue) &&
+                            isTextEditing && (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular'], s['cursor-pointer'], s['border-t'], s['border-gray-200'], s['bg-green-50'], s['text-green-700']), onClick: () => handleTextDropdownItemSelect(textDropdownValue), children: _jsxs("span", { className: cn(s['flex'], s['ml-2'], s['items-center'], s['gap-1']), children: [_jsx(Icon, { nameIcon: "MdAdd", propsIcon: { size: '16', color: '#059669' } }), "\"", textDropdownValue, "\""] }) }))] }) })), error && (_jsx("span", { className: cn(s['text-red'], s['text-4xs']), id: "error", children: error || `${label || 'Field'} is required` }))] }));
+});
+TextDropdownInput.displayName = 'TextDropdownInput';

package/lib/src/core-components/src/components/FormField/components/ToggleInput.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import '../toggle.css';
+export interface ToggleInputProps {
+    id: string;
+    label?: string;
+    error?: string;
+    required?: boolean;
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    isToggleLabel?: boolean;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+export declare const ToggleInput: React.ForwardRefExoticComponent<Omit<ToggleInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=ToggleInput.d.ts.map

package/lib/src/core-components/src/components/FormField/components/ToggleInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/ToggleInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,wGAiGvB,CAAC"}

package/lib/src/core-components/src/components/FormField/components/ToggleInput.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+import '../toggle.css';
+export const ToggleInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, isToggleLabel = true, className, labelProps, ...props }, ref) => {
+    const [toggleValue, setToggleValue] = useState(value ?? false);
+    useEffect(() => {
+        if (value !== undefined) {
+            setToggleValue(value);
+        }
+    }, [value]);
+    const handleToggleClick = () => {
+        if (disabled)
+            return;
+        const newValue = !toggleValue;
+        setToggleValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+    const toggleClasses = classNames('wrg-toggle', {
+        'wrg-toggle--checked': toggleValue,
+        'wrg-toggle--disabled': disabled,
+    }, className);
+    return (_jsxs("div", { className: cn(s['w-full'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps })), _jsxs("div", { onClick: handleToggleClick, className: toggleClasses, children: [_jsx("div", { className: cn('wrg-toggle-container', {
+                            [s['bg-green-700']]: toggleValue,
+                            [s['bg-black']]: !toggleValue,
+                        }), children: isToggleLabel && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn('wrg-toggle-check'), children: _jsx("span", { className: cn(s['text-white'], s['ml-1']), children: "Yes" }) }), _jsx("div", { className: cn('wrg-toggle-uncheck'), children: _jsx("span", { className: cn(s['dark:text-black']), children: "No" }) })] })) }), _jsx("div", { className: cn('wrg-toggle-circle', s['dark:bg-black'], {
+                            'ml-1': toggleValue,
+                            'mr-1': !toggleValue,
+                        }) }), _jsx("input", { ref: ref, type: "checkbox", "aria-label": "Toggle Button", className: cn('wrg-toggle-input'), checked: toggleValue, readOnly: true, ...props })] }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+ToggleInput.displayName = 'ToggleInput';

package/lib/src/core-components/src/components/FormField/components/index.d.ts

@@ -0,0 +1,12 @@
+export { PasswordInput } from './PasswordInput';
+export { ToggleInput } from './ToggleInput';
+export { RadioInput, type RadioOption } from './RadioInput';
+export { CheckboxInput } from './CheckboxInput';
+export { CheckboxGroupInput, type CheckboxOption } from './CheckboxGroupInput';
+export { DatePickerInput } from './DatePickerInput';
+export { DropdownInput } from './DropdownInput';
+export { TextDropdownInput } from './TextDropdownInput';
+export { PinInput } from './PinInput';
+export { OtpInput } from './OtpInput';
+export { CssMultilineInput } from './CssMultilineInput';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/FormField/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,UAAU,EAAE,KAAK,WAAW,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,kBAAkB,EAAE,KAAK,cAAc,EAAC,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC"}

package/lib/src/core-components/src/components/FormField/components/index.js

@@ -0,0 +1,11 @@
+export { PasswordInput } from './PasswordInput';
+export { ToggleInput } from './ToggleInput';
+export { RadioInput } from './RadioInput';
+export { CheckboxInput } from './CheckboxInput';
+export { CheckboxGroupInput } from './CheckboxGroupInput';
+export { DatePickerInput } from './DatePickerInput';
+export { DropdownInput } from './DropdownInput';
+export { TextDropdownInput } from './TextDropdownInput';
+export { PinInput } from './PinInput';
+export { OtpInput } from './OtpInput';
+export { CssMultilineInput } from './CssMultilineInput';