react-restyle-components 0.4.39 → 0.4.41

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

@@ -1 +1,99 @@
-"use strict";import{jsx as r,jsxs as m}from"react/jsx-runtime";import q,{useState as x,useEffect as I,useRef as z}from"react";import c from"dayjs";import{Label as H}from"../../../core-components/atoms/Label/Label";import{Icon as k}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as n}from"../../../utils";const V=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],W=["January","February","March","April","May","June","July","August","September","October","November","December"];export const DatePickerInput=q.forwardRef(({id:S,label:f,error:N,required:O,value:o,onChange:v,disabled:h,dateFormat:D="YYYY-MM-DD",placeholder:j="Select Date",className:R,labelProps:Y,...B},G)=>{const[d,w]=x(o&&typeof o=="string"?c(o).toDate():null),[u,g]=x(!1),[a,p]=x(c(d||new Date)),b=z(null);I(()=>{if(o){const t=typeof o=="string"?c(o).toDate():o;w(t),p(c(t))}},[o]),I(()=>{const t=s=>{b.current&&!b.current.contains(s.target)&&g(!1)};return u&&document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[u]);const L=t=>{w(t),g(!1),v&&v(c(t).format(D))},P=()=>{const t=a.startOf("month"),s=a.endOf("month"),J=t.day(),_=s.date(),y=[];for(let i=0;i<J;i++)y.push(null);for(let i=1;i<=_;i++)y.push(i);return y},l=t=>{if(!t||!d)return!1;const s=a.date(t);return c(d).isSame(s,"day")},M=t=>t?a.date(t).isSame(c(),"day"):!1,T=()=>{p(a.subtract(1,"month"))},A=()=>{p(a.add(1,"month"))},E=d?c(d).format(D):j,F=()=>m("div",{ref:b,className:n(e.absolute,e["top-full"],e["left-0"],e["mt-2"],e["bg-white"],e["dark:bg-gray-800"],e.border,e["border-gray-300"],e["dark:border-gray-600"],e["rounded-lg"],e["shadow-lg"],e["p-4"],e["z-50"],e["w-80"]),children:[m("div",{className:n(e.flex,e["justify-between"],e["items-center"],e["mb-4"]),children:[r("button",{type:"button",onClick:T,className:n(e["p-2"],e["hover:bg-gray-100"],e["dark:hover:bg-gray-700"],e.rounded),children:r(k,{nameIcon:"FaChevronLeft"})}),m("div",{className:n(e["font-semibold"],e["text-gray-900"],e["dark:text-gray-100"]),children:[W[a.month()]," ",a.year()]}),r("button",{type:"button",onClick:A,className:n(e["p-2"],e["hover:bg-gray-100"],e["dark:hover:bg-gray-700"],e.rounded),children:r(k,{nameIcon:"FaChevronRight"})})]}),r("div",{className:n(e.grid,e["grid-cols-7"],e["gap-1"],e["mb-2"]),children:V.map(t=>r("div",{className:n(e["text-center"],e["text-xs"],e["font-semibold"],e["text-gray-600"],e["dark:text-gray-400"],e["py-2"]),children:t},t))}),r("div",{className:n(e.grid,e["grid-cols-7"],e["gap-1"]),children:P().map((t,s)=>r("div",{className:n(e["text-center"]),children:t?r("button",{type:"button",onClick:()=>L(a.date(t).toDate()),className:n(e["w-full"],e["py-2"],e.rounded,e["text-sm"],e["hover:bg-blue-100"],e["dark:hover:bg-blue-900"],l(t)&&e["bg-blue-500"],l(t)&&e["text-white"],l(t)&&e["hover:bg-blue-600"],M(t)&&!l(t)&&e.border,M(t)&&!l(t)&&e["border-blue-500"],!l(t)&&e["text-gray-900"],!l(t)&&e["dark:text-gray-100"]),children:t}):r("div",{className:n(e["w-full"],e["py-2"])})},s))})]}),C=()=>m("div",{className:n(e.relative,e["w-full"]),children:[m("div",{onClick:()=>!h&&g(!u),className:n(e["border-gray-300"],e["dark:border-gray-600"],e.border,e["rounded-md"],e["px-3"],e["py-2"],e.flex,e["items-center"],e["w-full"],e["cursor-pointer"],e["bg-white"],e["dark:bg-gray-800"],h&&e["cursor-not-allowed"],h&&e["opacity-50"]),children:[r("span",{className:n(e["flex-1"],e["font-arimaRegular"],d?e["text-gray-900"]:e["text-gray-400"],d?e["dark:text-gray-100"]:e["dark:text-gray-500"],e["text-base"]),children:E}),r(k,{nameIcon:"ImCalendar"})]}),u&&r(F,{})]});return m("div",{className:n(e["w-full"],R),children:[f&&r(H,{id:S,required:O,label:f,...Y,children:r(C,{})}),!f&&r(C,{}),N&&r("p",{className:n(e["mt-1"],e["text-sm"],e["text-red-600"],e["dark:text-red-400"]),children:N})]})});DatePickerInput.displayName="DatePickerInput";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import dayjs from 'dayjs';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import { Icon } from '../../Icon/Icon';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const MONTHS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+export const DatePickerInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, dateFormat = 'YYYY-MM-DD', placeholder = 'Select Date', className, labelProps, ...props }, ref) => {
+    const [pickedDate, setPickedDate] = useState(value && typeof value === 'string' ? dayjs(value).toDate() : null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [currentMonth, setCurrentMonth] = useState(dayjs(pickedDate || new Date()));
+    const calendarRef = useRef(null);
+    useEffect(() => {
+        if (value) {
+            const date = typeof value === 'string' ? dayjs(value).toDate() : value;
+            setPickedDate(date);
+            setCurrentMonth(dayjs(date));
+        }
+    }, [value]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (calendarRef.current &&
+                !calendarRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleDateChange = (date) => {
+        setPickedDate(date);
+        setIsOpen(false);
+        if (onChange) {
+            onChange(dayjs(date).format(dateFormat));
+        }
+    };
+    const getDaysInMonth = () => {
+        const startOfMonth = currentMonth.startOf('month');
+        const endOfMonth = currentMonth.endOf('month');
+        const startDay = startOfMonth.day();
+        const daysInMonth = endOfMonth.date();
+        const days = [];
+        // Add empty cells for days before month starts
+        for (let i = 0; i < startDay; i++) {
+            days.push(null);
+        }
+        // Add actual days
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push(i);
+        }
+        return days;
+    };
+    const isSelectedDate = (day) => {
+        if (!day || !pickedDate)
+            return false;
+        const date = currentMonth.date(day);
+        return dayjs(pickedDate).isSame(date, 'day');
+    };
+    const isToday = (day) => {
+        if (!day)
+            return false;
+        const date = currentMonth.date(day);
+        return date.isSame(dayjs(), 'day');
+    };
+    const handlePrevMonth = () => {
+        setCurrentMonth(currentMonth.subtract(1, 'month'));
+    };
+    const handleNextMonth = () => {
+        setCurrentMonth(currentMonth.add(1, 'month'));
+    };
+    const displayValue = pickedDate
+        ? dayjs(pickedDate).format(dateFormat)
+        : placeholder;
+    const CalendarComponent = () => (_jsxs("div", { ref: calendarRef, className: cn(s['absolute'], s['top-full'], s['left-0'], s['mt-2'], s['bg-white'], s['dark:bg-gray-800'], s['border'], s['border-gray-300'], s['dark:border-gray-600'], s['rounded-lg'], s['shadow-lg'], s['p-4'], s['z-50'], s['w-80']), children: [_jsxs("div", { className: cn(s['flex'], s['justify-between'], s['items-center'], s['mb-4']), children: [_jsx("button", { type: "button", onClick: handlePrevMonth, className: cn(s['p-2'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-700'], s['rounded']), children: _jsx(Icon, { nameIcon: "FaChevronLeft" }) }), _jsxs("div", { className: cn(s['font-semibold'], s['text-gray-900'], s['dark:text-gray-100']), children: [MONTHS[currentMonth.month()], " ", currentMonth.year()] }), _jsx("button", { type: "button", onClick: handleNextMonth, className: cn(s['p-2'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-700'], s['rounded']), children: _jsx(Icon, { nameIcon: "FaChevronRight" }) })] }), _jsx("div", { className: cn(s['grid'], s['grid-cols-7'], s['gap-1'], s['mb-2']), children: DAYS.map((day) => (_jsx("div", { className: cn(s['text-center'], s['text-xs'], s['font-semibold'], s['text-gray-600'], s['dark:text-gray-400'], s['py-2']), children: day }, day))) }), _jsx("div", { className: cn(s['grid'], s['grid-cols-7'], s['gap-1']), children: getDaysInMonth().map((day, index) => (_jsx("div", { className: cn(s['text-center']), children: day ? (_jsx("button", { type: "button", onClick: () => handleDateChange(currentMonth.date(day).toDate()), className: cn(s['w-full'], s['py-2'], s['rounded'], s['text-sm'], s['hover:bg-blue-100'], s['dark:hover:bg-blue-900'], isSelectedDate(day) && s['bg-blue-500'], isSelectedDate(day) && s['text-white'], isSelectedDate(day) && s['hover:bg-blue-600'], isToday(day) && !isSelectedDate(day) && s['border'], isToday(day) &&
+                            !isSelectedDate(day) &&
+                            s['border-blue-500'], !isSelectedDate(day) && s['text-gray-900'], !isSelectedDate(day) && s['dark:text-gray-100']), children: day })) : (_jsx("div", { className: cn(s['w-full'], s['py-2']) })) }, index))) })] }));
+    const InputComponent = () => (_jsxs("div", { className: cn(s['relative'], s['w-full']), children: [_jsxs("div", { onClick: () => !disabled && setIsOpen(!isOpen), className: cn(s['border-gray-300'], s['dark:border-gray-600'], s['border'], s['rounded-md'], s['px-3'], s['py-2'], s['flex'], s['items-center'], s['w-full'], s['cursor-pointer'], s['bg-white'], s['dark:bg-gray-800'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50']), children: [_jsx("span", { className: cn(s['flex-1'], s['font-arimaRegular'], pickedDate ? s['text-gray-900'] : s['text-gray-400'], pickedDate ? s['dark:text-gray-100'] : s['dark:text-gray-500'], s['text-base']), children: displayValue }), _jsx(Icon, { nameIcon: "ImCalendar" })] }), isOpen && _jsx(CalendarComponent, {})] }));
+    return (_jsxs("div", { className: cn(s['w-full'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps, children: _jsx(InputComponent, {}) })), !label && _jsx(InputComponent, {}), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+DatePickerInput.displayName = 'DatePickerInput';

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

@@ -1 +1,70 @@
-"use strict";import{jsx as n,jsxs as h}from"react/jsx-runtime";import q,{useState as x,useEffect as g,useRef as A}from"react";import{Label as F}from"../../../core-components/atoms/Label/Label";import{Icon as b}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as s}from"../../../utils";export const DropdownInput=q.forwardRef(({id:f,label:d,error:u,required:v,value:l,onChange:p,disabled:t,dropdownItems:i=[],placeholder:D,name:k,className:I,labelProps:N,...C},R)=>{const[o,c]=x(!1),[L,m]=x(l||""),[j,y]=x(i),w=A(null);g(()=>{i&&y(i)},[i]),g(()=>{l!==void 0&&m(l)},[l]),g(()=>{function r(a){w.current&&!w.current.contains(a.target)&&o&&c(!1)}return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[o]);const z=r=>{const a=r.target.value;m(a);const O=i.filter(V=>V.toLowerCase().includes(a.toLowerCase()));y(O),p&&p(a)},E=r=>{m(r),c(!1),p&&p(r)};return h("div",{className:s(e["w-full"],e.relative,I),children:[d&&n(F,{id:f,required:v,label:d,...N}),h("div",{className:s(e.flex,e["flex-row"],e["items-center"]),ref:w,children:[n("input",{ref:R,id:f,type:"text",name:k||f,placeholder:D||d,value:L,disabled:t,className:s(e["pt-3"],e["pb-2"],e["w-full"],e["px-0"],e["mt-0"],e["bg-transparent"],e["border-gray-secondary"],e["border-0"],e["border-b"],e["appearance-none"],e["focus:outline-none"],e["focus:ring-0"],e["font-arimaRegular"],e["text-md"],t&&e["cursor-not-allowed"],t&&e["opacity-50"],u&&e["border-red-500"]),onClick:()=>{t||c(!o)},onChange:z,...C}),!o&&n(b,{nameIcon:"MdKeyboardArrowDown",propsIcon:{size:"24",color:"#000000"},onClick:()=>{t||c(!o)}}),o&&n(b,{nameIcon:"MdKeyboardArrowUp",propsIcon:{size:"24",color:"#000000"},onClick:()=>{t||c(!o)}})]}),o&&n("div",{className:s(e["z-10"],e["w-full"],e.absolute,e["text-base"],e["list-none"],e["bg-white"],e.rounded,e["divide-y"],e["divide-gray-100"],e.shadow,e["dark:bg-gray-700"]),children:n("ul",{className:e["py-1"],children:j?.map((r,a)=>n("li",{className:s(e.block,e["py-2"],e["px-4"],e["text-md"],e["hover:bg-gray-100"],e["dark:hover:bg-gray-600"],e["dark:text-gray-200"],e["font-arimaRegular"],e["cursor-pointer"]),onClick:()=>{t||E(r)},children:r},a))})}),u&&n("span",{className:s(e["text-red"],e["text-4xs"]),id:"error",children:u||`${d||"Field"} is required`})]})});DropdownInput.displayName="DropdownInput";
+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/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.js

@@ -1 +1,81 @@
-"use strict";import{jsx as o,jsxs as S}from"react/jsx-runtime";import _,{useState as E,useEffect as K,useRef as O}from"react";import{Label as q}from"../../../core-components/atoms/Label/Label";import t from"../../../tc.module.css";import{cn as i}from"../../../utils";export const OtpInput=_.forwardRef(({id:b,label:N,error:a,required:v,value:u,onChange:n,disabled:m,otpLength:h=6,pinErrorMsg:x,pinDefaultMsg:w,className:g,labelProps:j,...P},p)=>{const[f,d]=E(u||[]),c=O([]);K(()=>{u&&d(u)},[u]);const k=(l,r)=>{const e=l.target.value,s=Number(e.trim());if(!(isNaN(s)||e.length===0)&&s>=0&&s<=9){const y=[...f];if(y[r]=s,d(y),n&&n(y),r<h-1){const R=c.current[r+1];R&&R.focus()}}},I=(l,r)=>{if(l.nativeEvent.code==="Backspace"){if(f[r]!==void 0){const e=[...f];if(e[r]=void 0,d(e),n&&n(e),r>0){const s=c.current[r-1];s&&s.focus()}}else if(r>0){const e=c.current[r-1];e&&e.focus()}}};return S("div",{className:i(t["w-full"],t.relative,g),children:[N&&o(q,{id:b,required:v,label:N,...j}),o("div",{className:i(t.flex,t["gap-2"],t["p-2"],t["text-center"]),children:Array.from({length:h},(l,r)=>o("input",{ref:e=>{e&&(c.current[r]=e),r===0&&p&&(typeof p=="function"?p(e):p.current=e)},type:"tel",disabled:m,className:i(t["text-md"],t["font-extrabold"],t["bg-transparent"],t["text-center"],t["z-20"],t.border,t["border-gray-secondary"],t["rounded-full"],m&&t["cursor-not-allowed"],m&&t["opacity-50"],a&&t["border-red-500"]),style:{width:"30px",height:"30px"},onKeyDown:e=>I(e,r),onMouseUp:()=>{if(f.join("").length<=0){const e=c.current[0];e&&e.focus()}},onClick:()=>{f.join("").length<=0&&n&&n([])},onChange:e=>k(e,r),value:f[r]||"",...P},r))}),a&&o("p",{className:i(t["mt-1"],t["text-sm"],t["text-red-600"],t["dark:text-red-400"]),children:a||x}),!a&&w&&o("p",{className:i(t["mt-1"],t["text-sm"],t["text-gray-600"],t["dark:text-gray-400"]),children:w})]})});OtpInput.displayName="OtpInput";
+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.js

@@ -1 +1,40 @@
-"use strict";import{jsx as s,jsxs as c}from"react/jsx-runtime";import F,{useState as S}from"react";import e from"../../../tc.module.css";import{cn as t}from"../../../utils";import{Icon as V}from"../../Icon/Icon";export const PasswordInput=F.forwardRef(({id:i,label:d,error:a,required:f,value:g,onChange:u,onValueChange:y,onBlur:x,onValueBlur:h,onFocus:w,disabled:o,placeholder:b,className:m,labelProps:k,...p},N)=>{const[n,v]=S(!1),I=()=>{v(r=>!r)},j=r=>{const l=r.target.value;y?.(l),u&&u(r)},P=r=>{const l=r.target.value;h?.(l),x?.(r)};return c("div",{className:t(e["w-full"],m),children:[d&&c("label",{htmlFor:i,className:t(e.block,e["text-sm"],e["font-medium"],e["text-gray-700"],e["dark:text-gray-300"],e["mb-1"]),...k,children:[d,f&&s("span",{className:t(e["text-red-500"],e["ml-1"]),children:"*"})]}),c("div",{className:t(e.flex,e["items-center"],e.relative),children:[s("input",{ref:N,id:i,type:n?"text":"password",required:f,disabled:o,value:g,onChange:j,onBlur:P,onFocus:w,placeholder:b,className:t(e["w-full"],e["px-4"],e["py-2"],e["pr-12"],e.border,e["rounded-lg"],e["transition-colors"],e["bg-white"],e["dark:bg-gray-800"],e["border-gray-300"],e["dark:border-gray-600"],e["text-gray-900"],e["dark:text-gray-100"],e["placeholder-gray-500"],e["dark:placeholder-gray-400"],e["focus:outline-none"],e["focus:ring-2"],e["focus:ring-primary"],e["focus:ring-offset-1"],a&&e["border-red-500"],a&&e["focus:ring-red-500"],m),style:{...p.style,"--tw-ring-offset-color":"#ffffff"},...p}),s("button",{type:"button",onClick:I,disabled:o,className:t(e.absolute,e["right-3"],e.flex,e["items-center"],e["justify-center"],e["focus:outline-none"],e["transition-colors"],e["cursor-pointer"],o&&e["cursor-not-allowed"],o&&e["opacity-50"]),style:{background:"transparent",border:"none",padding:"4px"},"aria-label":n?"Hide password":"Show password",tabIndex:-1,children:s(V,{nameIcon:n?"FiEyeOff":"FiEye",propsIcon:{size:20,color:o?"#9ca3af":"#6b7280"}})})]}),a&&s("p",{className:t(e["mt-1"],e["text-sm"],e["text-red-600"],e["dark:text-red-400"]),children:a})]})});PasswordInput.displayName="PasswordInput";
+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';
+import { Icon } from '../../Icon/Icon';
+export const PasswordInput = React.forwardRef(({ id, label, error, required, value, onChange, onValueChange, onBlur, onValueBlur, onFocus, disabled, placeholder, className, labelProps, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const togglePasswordVisibility = () => {
+        setShowPassword((prev) => !prev);
+    };
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        // Call onValueChange with just the value
+        onValueChange?.(newValue);
+        // Call onChange with the event (or value for backward compatibility)
+        if (onChange) {
+            // Try to call with event first, some consumers expect the value directly
+            onChange(e);
+        }
+    };
+    const handleBlur = (e) => {
+        const blurValue = e.target.value;
+        // Call onValueBlur with just the value
+        onValueBlur?.(blurValue);
+        // Call onBlur with the event
+        onBlur?.(e);
+    };
+    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: handleChange, onBlur: handleBlur, onFocus: onFocus, 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("button", { type: "button", onClick: togglePasswordVisibility, disabled: disabled, className: cn(s['absolute'], s['right-3'], s['flex'], s['items-center'], s['justify-center'], s['focus:outline-none'], s['transition-colors'], s['cursor-pointer'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50']), style: {
+                            background: 'transparent',
+                            border: 'none',
+                            padding: '4px',
+                        }, "aria-label": showPassword ? 'Hide password' : 'Show password', tabIndex: -1, children: _jsx(Icon, { nameIcon: showPassword ? 'FiEyeOff' : 'FiEye', propsIcon: {
+                                size: 20,
+                                color: disabled ? '#9ca3af' : '#6b7280',
+                            } }) })] }), 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.js

@@ -1 +1,75 @@
-"use strict";import{jsx as o,jsxs as x}from"react/jsx-runtime";import _,{useState as E,useEffect as K,useRef as V}from"react";import{Label as q}from"../../../core-components/atoms/Label/Label";import e from"../../../tc.module.css";import{cn as i}from"../../../utils";export const PinInput=_.forwardRef(({id:h,label:b,error:c,required:P,value:f,onChange:n,disabled:d,pinLength:N=12,pinErrorMsg:g,pinDefaultMsg:R,className:j,labelProps:v,...S},l)=>{const[a,y]=E(f||[]),u=V([]);K(()=>{f&&y(f)},[f]);const k=(m,s)=>{const t=m.target.value,p=parseInt(t,10);if(!isNaN(p)&&p>=0&&p<=9){const r=[...a];if(r[s]=p,y(r),n&&n(r),s<N-1){const w=u.current[s+1];w&&w.focus()}}else if(t===""){const r=[...a];r[s]=void 0,y(r),n&&n(r)}},I=(m,s)=>{if(m.key==="Backspace"&&!a[s]&&s>0){const t=u.current[s-1];t&&t.focus()}};return x("div",{className:i(e["w-full"],e.relative,j),children:[b&&o(q,{id:h,required:P,label:b,...v}),o("div",{className:i(e.flex,e["space-x-1"]),children:Array.from({length:N},(m,s)=>x("div",{className:i(e.flex,e["space-x-1"],e["max-w-full"],e["items-stretch"]),children:[o("input",{ref:t=>{t&&(u.current[s]=t),s===0&&l&&(typeof l=="function"?l(t):l.current=t)},"data-testid":"inputElementPin",type:"tel",disabled:d,className:i(e["pb-2"],e.block,e["w-4"],e["px-0"],e["mt-0"],e["bg-transparent"],e["text-center"],e["border-0"],e["border-b"],e["z-20"],e["appearance-none"],e["rounded-none"],e["focus:outline-none"],e["focus:ring-0"],e["focus:border-gray-secondary"],e["border-gray-secondary"],e["font-arimaRegular"],d&&e["cursor-not-allowed"],d&&e["opacity-50"],c&&e["border-red-500"]),onKeyDown:t=>I(t,s),onMouseUp:()=>{if(a.join("").length<=0){const t=u.current[0];t&&t.focus()}},onClick:()=>{a.join("").length<=0&&n&&n([])},onChange:t=>k(t,s),value:a[s]?.toString()||"",...S}),o("div",{className:e.invisible,children:(s+1)%4===0?"ss":null})]},s))}),c&&o("span",{className:i(e["text-sm"],e["text-red"],e["text-4xs"],e["font-arimaRegular"]),id:"error",children:c||g||""}),!c&&R&&o("span",{className:i(e["text-sm"],e["text-4xs"],e["font-arimaRegular"]),id:"error",children:R})]})});PinInput.displayName="PinInput";
+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.js

@@ -1 +1,54 @@
-"use strict";import{jsx as a,jsxs as p,Fragment as g}from"react/jsx-runtime";import _,{useState as B,useEffect as C}from"react";import{Label as q}from"../../../core-components/atoms/Label/Label";import{Icon as N}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as t}from"../../../utils";export const RadioInput=_.forwardRef(({id:o,label:m,error:x,required:b,value:w,onChange:i,disabled:s,radioOptions:l=[],name:j,className:v,labelProps:y,...$},F)=>{const[n,k]=B(l);C(()=>{l&&k(l)},[l]);const f=n[0],u=f&&("title"in f||"checked"in f),h=c=>{if(u){const r=n.map((d,L)=>L===c?{...d,checked:!0}:{...d,checked:!1});k(r),i&&i(r.find(d=>d.checked))}else{const r=n[c];i&&r?.value&&i(r.value)}},R=()=>a(g,{children:n.map((c,r)=>a("div",{className:t(e.flex,e["items-center"],e["mb-1"],!s&&e["cursor-pointer"],s&&e["cursor-not-allowed"],s&&e["opacity-50"],v),onClick:()=>{s||h(r)},children:p("div",{className:t(e.flex,e["flex-row"],e["gap-1"],e["items-center"]),children:[c.checked?a(N,{nameIcon:"ImRadioChecked"}):a(N,{nameIcon:"ImRadioUnchecked"}),a("span",{className:t(e["text-4xs"]),children:c.title})]})},r))}),I=()=>a(g,{children:n.map((c,r)=>p("div",{className:t(e.flex,e["items-center"],e["gap-2"],e["mb-2"]),onClick:()=>{!s&&c.value&&h(r)},children:[a("input",{ref:F,type:"radio",id:`${o}-${r}`,name:j||o,value:c.value,checked:w===c.value,onChange:()=>{c.value&&h(r)},disabled:s,className:t(e["w-4"],e["h-4"],e["text-blue-600"],e["bg-gray-100"],e["border-gray-300"],e["focus:ring-blue-500"],e["dark:focus:ring-blue-600"],e["dark:ring-offset-gray-800"],e["focus:ring-2"],e["dark:bg-gray-700"],e["dark:border-gray-600"]),...$}),a("label",{htmlFor:`${o}-${r}`,className:t(e["cursor-pointer"]),children:c.label})]},r))});return p("div",{className:t(e["w-full"],v),children:[m&&a(q,{id:o,required:b,label:m,...y,children:u?R():I()}),!m&&a(g,{children:u?R():I()}),x&&a("p",{className:t(e["mt-1"],e["text-sm"],e["text-red-600"],e["dark:text-red-400"]),children:x})]})});RadioInput.displayName="RadioInput";
+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/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.js

@@ -1 +1,94 @@
-"use strict";import{jsx as s,jsxs as m}from"react/jsx-runtime";import _,{useState as g,useEffect as h,useRef as U}from"react";import{Label as W}from"../../../core-components/atoms/Label/Label";import{Icon as C}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as l}from"../../../utils";export const TextDropdownInput=_.forwardRef(({id:w,label:y,error:b,required:E,value:d,onChange:f,onBlur:u,disabled:o,dropdownItems:n=[],allowCustomInput:p=!0,placeholder:j="Select an option",name:F,className:O,labelProps:z,...A},M)=>{const[c,k]=g(!1),[t,D]=g(d||""),[N,x]=g(n),[T,i]=g(!1),v=U(null);h(()=>{n&&x(n)},[n]),h(()=>{d!==void 0&&D(d)},[d]),h(()=>{if(T&&t){const r=n.filter(a=>a.toLowerCase().includes(t.toLowerCase()));x(r)}else x(n)},[t,n,T]),h(()=>{function r(a){v.current&&!v.current.contains(a.target)&&c&&(k(!1),i(!1))}return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[c]);const S=r=>{const a=r.target.value;D(a),i(!0);const I=n.filter(K=>K.toLowerCase().includes(a.toLowerCase()));x(I),f&&f(a)},R=r=>{D(r),k(!1),i(!1),f&&f(r),u&&u(null,r)},L=()=>{o||(k(!c),i(!0))},V=()=>{o||i(!0)},q=r=>{setTimeout(()=>{i(!1)},150),u&&u(r,t)};return m("div",{className:l(e["w-full"],e.relative,O),children:[y&&s(W,{id:w,required:E,label:y,...z}),m("div",{className:l(e.flex,e["flex-row"],e["items-center"],e["leading-4"],e["p-2"],e["dark:bg-boxdark"],e["focus:outline-none"],e["focus:ring"],e.block,e["w-full"],e["shadow-sm"],e["sm:text-base"],e.border,e["rounded-md"],b?e["border-red"]:e["border-gray-300"],o&&e["cursor-not-allowed"],o&&e["opacity-50"]),ref:v,children:[s("input",{ref:M,id:w,type:"text",name:F||w,placeholder:j,value:t,disabled:o,readOnly:!p,className:l(e["w-full"],e["bg-transparent"],e["border-0"],e["appearance-none"],e["focus:outline-none"],e["focus:ring-0"],e["font-arimaRegular"],e["text-md"],o&&e["cursor-not-allowed"],o&&e["opacity-50"]),onClick:L,onChange:p?S:void 0,onFocus:V,onBlur:q,...A}),!o&&s(C,{nameIcon:c?"MdKeyboardArrowUp":"MdKeyboardArrowDown",propsIcon:{size:"16",color:"#000000"},onClick:L})]}),c&&!o&&s("div",{className:l(e["z-10"],e["w-full"],e.absolute,e["text-base"],e["list-none"],e["bg-white"],e.rounded,e["divide-y"],e["divide-gray-100"],e.shadow,e["dark:bg-gray-700"],e["max-h-60"],e["overflow-y-auto"]),children:m("ul",{className:e["py-1"],children:[N.length>0?N.map((r,a)=>s("li",{className:l(e.block,e["py-2"],e["px-4"],e["text-md"],e["hover:bg-gray-100"],e["dark:hover:bg-gray-600"],e["dark:text-gray-200"],e["font-arimaRegular"],e["cursor-pointer"],t===r&&e["bg-blue-50"],t===r&&e["text-blue-700"]),onClick:()=>R(r),children:r},a)):s("li",{className:l(e.block,e["py-2"],e["px-4"],e["text-md"],e["text-gray-500"],e["font-arimaRegular"]),children:p?"No matches found":"No options available"}),p&&t&&!n.includes(t)&&T&&s("li",{className:l(e.block,e["py-2"],e["px-4"],e["text-md"],e["hover:bg-gray-100"],e["dark:hover:bg-gray-600"],e["dark:text-gray-200"],e["font-arimaRegular"],e["cursor-pointer"],e["border-t"],e["border-gray-200"],e["bg-green-50"],e["text-green-700"]),onClick:()=>R(t),children:m("span",{className:l(e.flex,e["ml-2"],e["items-center"],e["gap-1"]),children:[s(C,{nameIcon:"MdAdd",propsIcon:{size:"16",color:"#059669"}}),'"',t,'"']})})]})}),b&&s("span",{className:l(e["text-red"],e["text-4xs"]),id:"error",children:b||`${y||"Field"} is required`})]})});TextDropdownInput.displayName="TextDropdownInput";
+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/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';