react-restyle-components 0.4.39 → 0.4.41

package/lib/src/core-components/src/components/DynamicGrid/utils.js

@@ -1 +1,193 @@
-"use strict";import{useCallback as d,useEffect as f,useState as h}from"react";import{gapSizeValues as S,gapSizes as R}from"./types";const a={xs:0,sm:375,md:768,lg:1024,xl:1280,"2xl":1440};export const pxToRem=e=>e/16,remToPx=e=>e*16,getGapValue=e=>typeof e=="number"?R[e]||R[1]:S[e]||S.md;const b=(e,t)=>Math.floor(e/t)*t;export const calcColumns=({minWidth:e,elementWidth:t,gap:n,modulo:r,maxColumns:c,scrollHint:o=0})=>{if(t===0)return 1;const s=parseFloat(n),g=pxToRem(t),m=Math.min(Math.floor((g+s-e*o)/(e+s)),c);return Math.max(1,b(m,r))},getResponsiveColumns=(e,t)=>{let n=1;return e.xs!==void 0&&t>=a.xs&&(n=e.xs),e.sm!==void 0&&t>=a.sm&&(n=e.sm),e.md!==void 0&&t>=a.md&&(n=e.md),e.lg!==void 0&&t>=a.lg&&(n=e.lg),e.xl!==void 0&&t>=a.xl&&(n=e.xl),e["2xl"]!==void 0&&t>=a["2xl"]&&(n=e["2xl"]),n},useWindowWidth=()=>{const[e,t]=h(typeof window<"u"?window.innerWidth:1024);return f(()=>{if(typeof window>"u")return;const n=()=>{t(window.innerWidth)};return window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]),e},useElementResize=(e,t)=>{f(()=>{const n=e.current;if(!n||(t(n.clientWidth,n.clientHeight),!window.ResizeObserver))return;const r=new ResizeObserver(c=>{window.requestAnimationFrame(()=>{const o=c[0];o&&t(o.contentRect.width,o.contentRect.height)})});return r.observe(n),()=>r.disconnect()},[e,t])},useScrollToKeyboardFocus=(e,t)=>{const n=d(r=>{const{target:c}=r;c instanceof HTMLElement&&t?.enabled&&r.key==="Tab"&&c.scrollIntoView({inline:"center",block:"nearest",behavior:t.smoothScroll!==!1?"smooth":"auto"})},[t]);f(()=>{const r=e.current;if(r)return r.addEventListener("keyup",n),()=>{r.removeEventListener("keyup",n)}},[n,e])},useScrollNavigation=(e,t,n)=>{const[r,c]=h({canScrollLeft:!1,canScrollRight:!0,currentPage:0}),o=Math.ceil(t/n);f(()=>{const l=e.current;if(!l)return;const i=()=>{const{scrollLeft:u,scrollWidth:p,clientWidth:x}=l,w=u>0,L=u+x<p-1,P=Math.round(u/x);c({canScrollLeft:w,canScrollRight:L,currentPage:P})};return l.addEventListener("scroll",i),i(),()=>l.removeEventListener("scroll",i)},[e]);const s=d(l=>{const i=e.current;if(!i)return;const{clientWidth:u}=i;i.scrollTo({left:l*u,behavior:"smooth"})},[e]),g=d(()=>{r.currentPage>0&&s(r.currentPage-1)},[r.currentPage,s]),m=d(()=>{r.currentPage<o-1&&s(r.currentPage+1)},[r.currentPage,o,s]);return{...r,totalPages:o,scrollTo:s,scrollLeft:g,scrollRight:m}},getItemCount=e=>e?Array.isArray(e)?e.filter(Boolean).length:1:0,generateGridId=()=>`grid-${Math.random().toString(36).substr(2,9)}`;
+import { useCallback, useEffect, useState } from 'react';
+import { gapSizeValues, gapSizes, } from './types';
+// Breakpoint values in pixels
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 375,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1440,
+};
+/**
+ * Convert pixels to rem
+ */
+export const pxToRem = (px) => px / 16;
+/**
+ * Convert rem to pixels
+ */
+export const remToPx = (rem) => rem * 16;
+/**
+ * Get gap value from GapSize or LegacyGapSize
+ */
+export const getGapValue = (gap) => {
+    if (typeof gap === 'number') {
+        return gapSizes[gap] || gapSizes[1];
+    }
+    return gapSizeValues[gap] || gapSizeValues.md;
+};
+const moduloColumns = (columns, modulo) => Math.floor(columns / modulo) * modulo;
+export const calcColumns = ({ minWidth, elementWidth, gap, modulo, maxColumns, scrollHint = 0, }) => {
+    if (elementWidth === 0)
+        return 1;
+    const gapSize = parseFloat(gap);
+    const elementWidthInRem = pxToRem(elementWidth);
+    const columns = Math.min(Math.floor((elementWidthInRem + gapSize - minWidth * scrollHint) /
+        (minWidth + gapSize)), maxColumns);
+    return Math.max(1, moduloColumns(columns, modulo));
+};
+/**
+ * Get responsive columns based on window width
+ */
+export const getResponsiveColumns = (responsiveColumns, windowWidth) => {
+    let columns = 1;
+    if (responsiveColumns.xs !== undefined && windowWidth >= BREAKPOINTS.xs) {
+        columns = responsiveColumns.xs;
+    }
+    if (responsiveColumns.sm !== undefined && windowWidth >= BREAKPOINTS.sm) {
+        columns = responsiveColumns.sm;
+    }
+    if (responsiveColumns.md !== undefined && windowWidth >= BREAKPOINTS.md) {
+        columns = responsiveColumns.md;
+    }
+    if (responsiveColumns.lg !== undefined && windowWidth >= BREAKPOINTS.lg) {
+        columns = responsiveColumns.lg;
+    }
+    if (responsiveColumns.xl !== undefined && windowWidth >= BREAKPOINTS.xl) {
+        columns = responsiveColumns.xl;
+    }
+    if (responsiveColumns['2xl'] !== undefined && windowWidth >= BREAKPOINTS['2xl']) {
+        columns = responsiveColumns['2xl'];
+    }
+    return columns;
+};
+/**
+ * Hook to get current window width
+ */
+export const useWindowWidth = () => {
+    const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleResize = () => {
+            setWidth(window.innerWidth);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return width;
+};
+/**
+ * Hook to observe element resize
+ */
+export const useElementResize = (ref, callback) => {
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        // Initial size
+        callback(element.clientWidth, element.clientHeight);
+        if (!window.ResizeObserver)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            window.requestAnimationFrame(() => {
+                const entry = entries[0];
+                if (entry) {
+                    callback(entry.contentRect.width, entry.contentRect.height);
+                }
+            });
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref, callback]);
+};
+/**
+ * Hook to handle keyboard focus scrolling in scroll mode
+ */
+export const useScrollToKeyboardFocus = (ref, scroll) => {
+    const scrollToFocused = useCallback((keyboardEvent) => {
+        const { target } = keyboardEvent;
+        if (target instanceof HTMLElement &&
+            scroll?.enabled &&
+            keyboardEvent.key === 'Tab') {
+            target.scrollIntoView({
+                inline: 'center',
+                block: 'nearest',
+                behavior: scroll.smoothScroll !== false ? 'smooth' : 'auto',
+            });
+        }
+    }, [scroll]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener('keyup', scrollToFocused);
+        return () => {
+            element.removeEventListener('keyup', scrollToFocused);
+        };
+    }, [scrollToFocused, ref]);
+};
+export const useScrollNavigation = (ref, itemCount, columns) => {
+    const [scrollState, setScrollState] = useState({
+        canScrollLeft: false,
+        canScrollRight: true,
+        currentPage: 0,
+    });
+    const totalPages = Math.ceil(itemCount / columns);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const handleScroll = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = element;
+            const canScrollLeft = scrollLeft > 0;
+            const canScrollRight = scrollLeft + clientWidth < scrollWidth - 1;
+            const currentPage = Math.round(scrollLeft / clientWidth);
+            setScrollState({ canScrollLeft, canScrollRight, currentPage });
+        };
+        element.addEventListener('scroll', handleScroll);
+        handleScroll(); // Initial check
+        return () => element.removeEventListener('scroll', handleScroll);
+    }, [ref]);
+    const scrollTo = useCallback((index) => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const { clientWidth } = element;
+        element.scrollTo({
+            left: index * clientWidth,
+            behavior: 'smooth',
+        });
+    }, [ref]);
+    const scrollLeft = useCallback(() => {
+        if (scrollState.currentPage > 0) {
+            scrollTo(scrollState.currentPage - 1);
+        }
+    }, [scrollState.currentPage, scrollTo]);
+    const scrollRight = useCallback(() => {
+        if (scrollState.currentPage < totalPages - 1) {
+            scrollTo(scrollState.currentPage + 1);
+        }
+    }, [scrollState.currentPage, totalPages, scrollTo]);
+    return {
+        ...scrollState,
+        totalPages,
+        scrollTo,
+        scrollLeft,
+        scrollRight,
+    };
+};
+/**
+ * Get item count from children
+ */
+export const getItemCount = (children) => {
+    if (!children)
+        return 0;
+    if (Array.isArray(children))
+        return children.filter(Boolean).length;
+    return 1;
+};
+/**
+ * Generate unique ID for accessibility
+ */
+export const generateGridId = () => `grid-${Math.random().toString(36).substr(2, 9)}`;

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

@@ -1 +1,103 @@
-"use strict";import{jsx as t,Fragment as Z,jsxs as L}from"react/jsx-runtime";import p from"react";import{Input as M}from"../../core-components/atoms/Input/Input";import{Textarea as ee}from"../../core-components/atoms/Textarea/Textarea";import{PasswordInput as ae,ToggleInput as te,RadioInput as ne,CheckboxInput as re,CheckboxGroupInput as ie,DatePickerInput as le,DropdownInput as de,TextDropdownInput as ce,PinInput as oe,OtpInput as ue,CssMultilineInput as se}from"./components";export{PasswordInput,ToggleInput,RadioInput,CheckboxInput,CheckboxGroupInput,DatePickerInput,DropdownInput,TextDropdownInput,PinInput,OtpInput,CssMultilineInput}from"./components";export const Label=a=>t(Z,{children:t("label",{htmlFor:a.htmlFor,className:`${a.hasError?"text-red-400":"text-gray-700"} block text-3xs font-medium  mb-1`,style:{...a.style},children:a.children})}),InputWrapper=a=>L("div",{className:a.className,ref:a.ref,children:[t(Label,{htmlFor:a.id||"",hasError:a.hasError,style:{...a.style},children:t("span",{className:"dark:text-white",children:a.label})}),a.children]}),FormField=p.forwardRef(({label:a,error:m,hasError:I,id:T,labelProps:d,required:c,type:i="text",showPasswordToggle:b,radioOptions:g,checkboxLabel:v,checkboxOptions:N,isToggleLabel:y=!0,dateFormat:P="yyyy-MM-dd",dropdownItems:k=[],allowCustomInput:R=!0,pinLength:B=12,otpLength:O=6,pinValue:w=[],pinErrorMsg:C,pinDefaultMsg:F,cssProperties:j,onReset:E,onMoreInfo:q,value:u,onChange:n,onValueChange:h,onBlur:x,onValueBlur:f,disabled:s,children:G,...e},l)=>{const r=T||`field-${Math.random().toString(36).substr(2,9)}`,S=i==="textarea",_=i==="toggle",z=i==="radio",W=i==="checkbox",$=i==="checkbox-group",V=i==="date-picker",A=i==="input-dropdown",H=i==="text-input-dropdown",J=i==="input-pin",K=i==="input-otp",Q=i==="css-multiline",D=i==="password",U=i==="input-wrapper",o=m||(I?" ":void 0),X=Y=>{n&&n(Y)};return _?t(te,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,disabled:s,isToggleLabel:y,labelProps:d,className:e.className,...e}):z&&g?t(ne,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,disabled:s,radioOptions:g,name:e.name,className:e.className,labelProps:d,...e}):W?t(re,{ref:l,id:r,label:a,checkboxLabel:v,error:o,required:c,value:u,onChange:X,disabled:s,name:e.name,labelProps:d,...e}):$&&N?t(ie,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,disabled:s,checkboxOptions:N,className:e.className,labelProps:d,...e}):V?t(le,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,disabled:s,dateFormat:P,placeholder:e.placeholder,className:e.className,labelProps:d,...e}):A?t(de,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,disabled:s,dropdownItems:k,placeholder:e.placeholder,name:e.name,className:e.className,labelProps:d,...e}):H?t(ce,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,onBlur:e.onBlur,disabled:s,dropdownItems:k,allowCustomInput:R,placeholder:e.placeholder,name:e.name,className:e.className,labelProps:d,...e}):J?t(oe,{ref:l,id:r,label:a,error:o,required:c,value:w,onChange:n,disabled:s,pinLength:B,pinErrorMsg:C,pinDefaultMsg:F,className:e.className,labelProps:d,...e}):K?t(ue,{ref:l,id:r,label:a,error:o,required:c,value:w,onChange:n,disabled:s,otpLength:O,pinErrorMsg:C,pinDefaultMsg:F,className:e.className,labelProps:d,...e}):Q?t(se,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,disabled:s,cssProperties:j,onReset:E,onMoreInfo:q,placeholder:e.placeholder,className:e.className,labelProps:d,...e}):U?L(InputWrapper,{id:r,label:a,className:e.className,hasError:!!m||!!I,style:e.style,ref:l,children:[G||t("input",{id:r,type:"text",value:u,onChange:n,onFocus:e.onFocus,onBlur:e.onBlur,disabled:s,placeholder:e.placeholder,name:e.name,autoComplete:e.autoComplete,autoFocus:e.autoFocus,readOnly:e.readOnly,maxLength:e.maxLength,minLength:e.minLength,tabIndex:e.tabIndex,"aria-label":e["aria-label"],"aria-describedby":e["aria-describedby"],"aria-invalid":e["aria-invalid"],"aria-required":e["aria-required"],style:{width:"100%",padding:"8px 12px",border:m||I?"1px solid #ef4444":"1px solid #d1d5db",borderRadius:"6px",fontSize:"14px"}}),m&&t("div",{style:{color:"#ef4444",fontSize:"12px",marginTop:"4px"},children:m})]}):S?t(ee,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,onValueChange:h,onBlur:x,onValueBlur:f,...d,...e}):D&&!b?t(M,{ref:l,id:r,type:i,label:a,error:o,required:c,value:u,onChange:n,onValueChange:h,onBlur:x,onValueBlur:f,...d,...e}):D&&b?t(ae,{ref:l,id:r,label:a,error:o,required:c,value:u,onChange:n,onValueChange:h,onBlur:x,onValueBlur:f,disabled:s,labelProps:d,...e}):t(M,{ref:l,id:r,type:i,label:a,error:o,required:c,value:u,onChange:n,onValueChange:h,onBlur:x,onValueBlur:f,...d,...e})});FormField.displayName="FormField";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Input } from '../../core-components/atoms/Input/Input';
+import { Textarea, } from '../../core-components/atoms/Textarea/Textarea';
+import { PasswordInput, ToggleInput, RadioInput, CheckboxInput, CheckboxGroupInput, DatePickerInput, DropdownInput, TextDropdownInput, PinInput, OtpInput, CssMultilineInput, } from './components';
+// Re-export all FormField components for direct use
+export { PasswordInput, ToggleInput, RadioInput, CheckboxInput, CheckboxGroupInput, DatePickerInput, DropdownInput, TextDropdownInput, PinInput, OtpInput, CssMultilineInput, } from './components';
+export const Label = (props) => (_jsx(_Fragment, { children: _jsx("label", { htmlFor: props.htmlFor, className: `${props.hasError ? 'text-red-400' : 'text-gray-700'} block text-3xs font-medium  mb-1`, style: { ...props.style }, children: props.children }) }));
+export const InputWrapper = (props) => (_jsxs("div", { className: props.className, ref: props.ref, children: [_jsx(Label, { htmlFor: props.id || '', hasError: props.hasError, style: { ...props.style }, children: _jsx("span", { className: "dark:text-white", children: props.label }) }), props.children] }));
+export const FormField = React.forwardRef(({ label, error, hasError, id, labelProps, required, type = 'text', showPasswordToggle, radioOptions, checkboxLabel, checkboxOptions, isToggleLabel = true, dateFormat = 'yyyy-MM-dd', dropdownItems = [], allowCustomInput = true, pinLength = 12, otpLength = 6, pinValue = [], pinErrorMsg, pinDefaultMsg, cssProperties, onReset, onMoreInfo, value, onChange, onValueChange, onBlur, onValueBlur, disabled, children, ...props }, ref) => {
+    const fieldId = id || `field-${Math.random().toString(36).substr(2, 9)}`;
+    const isTextarea = type === 'textarea';
+    const isToggle = type === 'toggle';
+    const isRadio = type === 'radio';
+    const isCheckbox = type === 'checkbox';
+    const isCheckboxGroup = type === 'checkbox-group';
+    const isDatePicker = type === 'date-picker';
+    const isInputDropdown = type === 'input-dropdown';
+    const isTextInputDropdown = type === 'text-input-dropdown';
+    const isInputPin = type === 'input-pin';
+    const isInputOtp = type === 'input-otp';
+    const isCssMultiline = type === 'css-multiline';
+    const isPassword = type === 'password';
+    const isInputWrapper = type === 'input-wrapper';
+    // Calculate effective error: use error message if provided, otherwise use hasError for styling
+    const effectiveError = error || (hasError ? ' ' : undefined);
+    // Handle checkbox change
+    const handleCheckboxChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    // Render toggle switch
+    if (isToggle) {
+        return (_jsx(ToggleInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, disabled: disabled, isToggleLabel: isToggleLabel, labelProps: labelProps, className: props.className, ...props }));
+    }
+    // Render radio buttons
+    if (isRadio && radioOptions) {
+        return (_jsx(RadioInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, disabled: disabled, radioOptions: radioOptions, name: props.name, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render checkbox
+    if (isCheckbox) {
+        return (_jsx(CheckboxInput, { ref: ref, id: fieldId, label: label, checkboxLabel: checkboxLabel, error: effectiveError, required: required, value: value, onChange: handleCheckboxChange, disabled: disabled, name: props.name, labelProps: labelProps, ...props }));
+    }
+    // Render checkbox group
+    if (isCheckboxGroup && checkboxOptions) {
+        return (_jsx(CheckboxGroupInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, disabled: disabled, checkboxOptions: checkboxOptions, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render date picker
+    if (isDatePicker) {
+        return (_jsx(DatePickerInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, disabled: disabled, dateFormat: dateFormat, placeholder: props.placeholder, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render input dropdown
+    if (isInputDropdown) {
+        return (_jsx(DropdownInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, disabled: disabled, dropdownItems: dropdownItems, placeholder: props.placeholder, name: props.name, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render text input dropdown
+    if (isTextInputDropdown) {
+        return (_jsx(TextDropdownInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onBlur: props.onBlur, disabled: disabled, dropdownItems: dropdownItems, allowCustomInput: allowCustomInput, placeholder: props.placeholder, name: props.name, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render input PIN
+    if (isInputPin) {
+        return (_jsx(PinInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: pinValue, onChange: onChange, disabled: disabled, pinLength: pinLength, pinErrorMsg: pinErrorMsg, pinDefaultMsg: pinDefaultMsg, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render input OTP
+    if (isInputOtp) {
+        return (_jsx(OtpInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: pinValue, onChange: onChange, disabled: disabled, otpLength: otpLength, pinErrorMsg: pinErrorMsg, pinDefaultMsg: pinDefaultMsg, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render CSS Multiline
+    if (isCssMultiline) {
+        return (_jsx(CssMultilineInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, disabled: disabled, cssProperties: cssProperties, onReset: onReset, onMoreInfo: onMoreInfo, placeholder: props.placeholder, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render InputWrapper
+    if (isInputWrapper) {
+        return (_jsxs(InputWrapper, { id: fieldId, label: label, className: props.className, hasError: !!error || !!hasError, style: props.style, ref: ref, children: [children || (_jsx("input", { id: fieldId, type: "text", value: value, onChange: onChange, onFocus: props.onFocus, onBlur: props.onBlur, disabled: disabled, placeholder: props.placeholder, name: props.name, autoComplete: props.autoComplete, autoFocus: props.autoFocus, readOnly: props.readOnly, maxLength: props.maxLength, minLength: props.minLength, tabIndex: props.tabIndex, "aria-label": props['aria-label'], "aria-describedby": props['aria-describedby'], "aria-invalid": props['aria-invalid'], "aria-required": props['aria-required'], style: {
+                        width: '100%',
+                        padding: '8px 12px',
+                        border: error || hasError ? '1px solid #ef4444' : '1px solid #d1d5db',
+                        borderRadius: '6px',
+                        fontSize: '14px',
+                    } })), error && (_jsx("div", { style: {
+                        color: '#ef4444',
+                        fontSize: '12px',
+                        marginTop: '4px',
+                    }, children: error }))] }));
+    }
+    // Render textarea - use Textarea atom component
+    if (isTextarea) {
+        return (_jsx(Textarea, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onValueBlur: onValueBlur, ...labelProps, ...props }));
+    }
+    // Render standard input - use Input atom component
+    // For password without toggle, use Input atom
+    if (isPassword && !showPasswordToggle) {
+        return (_jsx(Input, { ref: ref, id: fieldId, type: type, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onValueBlur: onValueBlur, ...labelProps, ...props }));
+    }
+    // For password with toggle, use PasswordInput component
+    if (isPassword && showPasswordToggle) {
+        return (_jsx(PasswordInput, { ref: ref, id: fieldId, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onValueBlur: onValueBlur, disabled: disabled, labelProps: labelProps, ...props }));
+    }
+    // Render standard input - use Input atom component
+    return (_jsx(Input, { ref: ref, id: fieldId, type: type, label: label, error: effectiveError, required: required, value: value, onChange: onChange, onValueChange: onValueChange, onBlur: onBlur, onValueBlur: onValueBlur, ...labelProps, ...props }));
+});
+FormField.displayName = 'FormField';

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

@@ -1 +1,37 @@
-"use strict";import{jsx as r,jsxs as h}from"react/jsx-runtime";import j,{useState as w,useEffect as x}from"react";import{Label as G}from"../../../core-components/atoms/Label/Label";import{Icon as u}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as o}from"../../../utils";export const CheckboxGroupInput=j.forwardRef(({id:L,label:k,error:a,required:C,value:i,onChange:f,disabled:l,checkboxOptions:s=[],className:d,labelProps:I,...R},_)=>{const[p,n]=w(s);x(()=>{s&&n(s)},[s]),x(()=>{i&&n(i)},[i]);const b=m=>{const c=p.map((t,N)=>N===m?{...t,checked:!t.checked}:{...t});n(c),f&&f(c.filter(t=>t.checked))};return h("div",{className:o(e["w-full"],d),children:[r(G,{label:k,required:C,...I,children:p?.map((m,c)=>h("div",{className:o(e.flex,e["flex-row"],e["items-center"],e["mb-2"],d),onClick:()=>{l||b(c)},children:[r("div",{className:o(e.flex,e["gap-2"]),children:m.checked?r(u,{nameIcon:"ImCheckboxChecked"}):r(u,{nameIcon:"ImCheckboxUnchecked"})}),r("span",{className:o(e["text-sm"],e["font-medium"],e["ml-2"],l&&e["cursor-not-allowed"],!l&&e["cursor-pointer"]),children:m?.title})]},c))}),a&&r("p",{className:o(e["mt-1"],e["text-sm"],e["text-red-600"],e["dark:text-red-400"]),children:a})]})});CheckboxGroupInput.displayName="CheckboxGroupInput";
+import { jsx as _jsx, jsxs as _jsxs } 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 CheckboxGroupInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, checkboxOptions = [], className, labelProps, ...props }, ref) => {
+    const [checkboxList, setCheckboxList] = useState(checkboxOptions);
+    useEffect(() => {
+        if (checkboxOptions) {
+            setCheckboxList(checkboxOptions);
+        }
+    }, [checkboxOptions]);
+    useEffect(() => {
+        if (value) {
+            setCheckboxList(value);
+        }
+    }, [value]);
+    const handleCheckboxGroupChange = (index) => {
+        const result = checkboxList.map((e, i) => {
+            if (i === index)
+                return { ...e, checked: !e.checked };
+            else
+                return { ...e };
+        });
+        setCheckboxList(result);
+        if (onChange) {
+            onChange(result.filter((item) => item.checked));
+        }
+    };
+    return (_jsxs("div", { className: cn(s['w-full'], className), children: [_jsx(Label, { label: label, required: required, ...labelProps, children: checkboxList?.map((item, index) => (_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center'], s['mb-2'], className), onClick: () => {
+                        if (!disabled) {
+                            handleCheckboxGroupChange(index);
+                        }
+                    }, children: [_jsx("div", { className: cn(s['flex'], s['gap-2']), children: item.checked ? (_jsx(Icon, { nameIcon: "ImCheckboxChecked" })) : (_jsx(Icon, { nameIcon: "ImCheckboxUnchecked" })) }), _jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['ml-2'], disabled && s['cursor-not-allowed'], !disabled && s['cursor-pointer']), children: item?.title })] }, index))) }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+CheckboxGroupInput.displayName = 'CheckboxGroupInput';

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

@@ -1 +1,8 @@
-"use strict";import{jsx as a,jsxs as i}from"react/jsx-runtime";import u from"react";import r from"../../../tc.module.css";import{cn as e}from"../../../utils";export const CheckboxInput=u.forwardRef(({id:s,label:t,checkboxLabel:o,error:d,required:x,value:n,onChange:l,disabled:m,name:f,className:c,labelProps:b,...p},g)=>i("div",{className:e(r["w-full"],c),children:[i("div",{className:e(r.flex,r["items-center"],r["gap-2"]),children:[a("input",{ref:g,type:"checkbox",id:s,name:f,checked:n,onChange:l,disabled:m,className:e(r["w-4"],r["h-4"],r["text-blue-600"],r["bg-gray-100"],r["border-gray-300"],r["focus:ring-blue-500"],r["dark:focus:ring-blue-600"],r["dark:ring-offset-gray-800"],r["focus:ring-2"],r["dark:bg-gray-700"],r["dark:border-gray-600"],c),...p}),(o||t)&&a("label",{htmlFor:s,className:e(r["cursor-pointer"]),children:o||t})]}),d&&a("p",{className:e(r["mt-1"],r["text-sm"],r["text-red-600"],r["dark:text-red-400"]),children:d})]}));CheckboxInput.displayName="CheckboxInput";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const CheckboxInput = React.forwardRef(({ id, label, checkboxLabel, error, required, value, onChange, disabled, name, className, labelProps, ...props }, ref) => {
+    return (_jsxs("div", { className: cn(s['w-full'], className), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), children: [_jsx("input", { ref: ref, type: "checkbox", id: id, name: name, checked: value, onChange: onChange, 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'], className), ...props }), (checkboxLabel || label) && (_jsx("label", { htmlFor: id, className: cn(s['cursor-pointer']), children: checkboxLabel || label }))] }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+CheckboxInput.displayName = 'CheckboxInput';

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

@@ -1 +1,192 @@
-"use strict";import{jsx as f,jsxs as g}from"react/jsx-runtime";import U,{useState as M,useEffect as C,useRef as O}from"react";import{Textarea as V}from"../../../core-components/atoms/Textarea/Textarea";import{Icon as R}from"../../Icon/Icon";import t from"../../../tc.module.css";import{cn as u}from"../../../utils";import{properties as I}from"../css-properties";const N=v=>{const p=[];return v.forEach(function(d,j){const a=Object.keys(d)[0],l=a;p.push([l,d[a]])}),p};export const CssMultilineInput=U.forwardRef(({id:v,label:p,error:d,required:j,value:a,onChange:l,onBlur:o,disabled:z,cssProperties:m,onReset:y,onMoreInfo:w,placeholder:E="fontSize: 12,backgroundColor:'#000000'",className:W,labelProps:A,...T},_)=>{const[k,S]=M(!1),[L,h]=M(m||N(I)),r=O(a||""),b=O(null);C(()=>{h(m||N(I))},[m]),C(()=>{a!==void 0&&(r.current=a)},[a]),C(()=>{function e(n){b.current&&!b.current.contains(n.target)&&k&&S(!1)}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[k]);const $=e=>{const n=m||N(I);if(e.length===0){h(n);return}const c=e.split(/,\s*/),s=c[c.length-1].split(":")[0]?.split("'")[0]?.trim(),x=n.filter(P=>P[0]?.startsWith(s||""));h(x)},q=e=>{r.current=e,$(e)},F=e=>{const n=e.target.value;if(q(n),S(!0),l)try{const i=l.toString().match(/\(([^)]+)\)/);if(i){const s=i[1].trim();s&&s!=="e"&&s!=="event"&&!s.startsWith("e:")?l(n):l(e)}else l(e)}catch{try{l(e)}catch{l(n)}}},H=e=>{if(o){const n=e.target.value;try{const i=o.toString().match(/\(([^)]+)\)/);if(i){const s=i[1].trim();s&&s!=="e"&&s!=="event"&&!s.startsWith("e:")?o(n):o(e)}else o(e)}catch{try{o(e)}catch{o(n)}}}},K=()=>{const e=r.current.split(",").filter(Boolean);e.length>0?(e.pop(),r.current=e.join(",")+(e.length?",":"")):r.current="",y&&y(r.current),l&&l(r.current)};return g("div",{className:u(t.flex,t["flex-col"],t["w-full"],t.relative,W),ref:b,children:[g("div",{className:u(t.flex,t.absolute,t["gap-2"],t["right-2"],t["z-10"]),children:[y&&f(R,{nameIcon:"MdLockReset",propsIcon:{color:"#000000",size:24},onClick:K}),w&&f(R,{nameIcon:"MdInfoOutline",propsIcon:{color:"#000000",size:24},onClick:w})]}),f(V,{ref:_,id:v,label:p,error:d,required:j,placeholder:E,value:r.current,onChange:F,onBlur:H,onKeyUp:()=>S(!0),disabled:z,...A,...T}),k&&L.length>0&&f("div",{children:f("ul",{className:u(t.flex,t["flex-col"],t["bg-black"],t["text-white"],t["overflow-y-scroll"],t["w-full"]),style:{maxHeight:"calc(100vh - 20vh)"},children:L?.map((e,n)=>g("li",{className:u(t.flex,t["gap-4"],t["p-2"]),children:[f("span",{className:u(t.underline),children:e[0]}),e[1]?.map((c,i)=>g("li",{className:u(t.flex,t["bg-slate-800"],t["rounded-md"],t["items-center"],t["cursor-pointer"]),onClick:()=>{let s=r.current?.split(",");r.current.includes(",")?(s=s.map(x=>{if(x?.includes(":"))return x}),c!="number"?s.push(`${e[0]}:'${c}',`):s.push(`${e[0]}:1,`),r.current=s.join(",").replaceAll(",,",",")):c!="number"?r.current=`${e[0]}:'${c}',`:r.current=`${e[0]}:1,`,$(s.join(""))},children:[" ",c," "]},i))]},n))})}),d&&f("p",{className:u(t["mt-1"],t["text-sm"],t["text-red-600"],t["dark:text-red-400"]),children:d})]})});CssMultilineInput.displayName="CssMultilineInput";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import { Textarea } from '../../../core-components/atoms/Textarea/Textarea';
+import { Icon } from '../../Icon/Icon';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+import { properties as defaultCssProperties } from '../css-properties';
+// Helper function to map CSS properties to array format
+const mapToArray = (arr) => {
+    const res = [];
+    arr.forEach(function (obj, index) {
+        const key = Object.keys(obj)[0];
+        const value = key;
+        res.push([value, obj[key]]);
+    });
+    return res;
+};
+export const CssMultilineInput = React.forwardRef(({ id, label, error, required, value, onChange, onBlur, disabled, cssProperties, onReset, onMoreInfo, placeholder = "fontSize: 12,backgroundColor:'#000000'", className, labelProps, ...props }, ref) => {
+    const [isCssListOpen, setIsCssListOpen] = useState(false);
+    const [cssPropertiesList, setCssPropertiesList] = useState(cssProperties || mapToArray(defaultCssProperties));
+    const cssValueRef = useRef(value || '');
+    const cssWrapperRef = useRef(null);
+    useEffect(() => {
+        if (cssProperties) {
+            setCssPropertiesList(cssProperties);
+        }
+        else {
+            setCssPropertiesList(mapToArray(defaultCssProperties));
+        }
+    }, [cssProperties]);
+    useEffect(() => {
+        if (value !== undefined) {
+            cssValueRef.current = value;
+        }
+    }, [value]);
+    // Outside click handler
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (cssWrapperRef.current &&
+                !cssWrapperRef.current.contains(event.target) &&
+                isCssListOpen) {
+                setIsCssListOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isCssListOpen]);
+    const handleCssFilter = (css) => {
+        const props = cssProperties || mapToArray(defaultCssProperties);
+        if (css.length === 0) {
+            setCssPropertiesList(props);
+            return;
+        }
+        const matchString = css.split(/,\s*/);
+        const lastPart = matchString[matchString.length - 1];
+        const key = lastPart.split(':')[0]?.split("'")[0]?.trim();
+        const filtered = props.filter((item) => item[0]?.startsWith(key || ''));
+        setCssPropertiesList(filtered);
+    };
+    const handleCssChange = (css) => {
+        cssValueRef.current = css;
+        handleCssFilter(css);
+    };
+    // Handle onChange - support both event and value patterns
+    const handleChange = (e) => {
+        const css = e.target.value;
+        handleCssChange(css);
+        setIsCssListOpen(true);
+        if (onChange) {
+            // Support both patterns:
+            // 1. Standard React: onChange={(e) => { const val = e.target.value; ... }}
+            // 2. Custom: onChange={(value) => { ... value ... }}
+            // Check if onChange expects a string (custom pattern) by examining function signature
+            // If parameter name suggests it expects a value (not 'e' or 'event'), call with value
+            // Otherwise, call with event (standard React pattern)
+            try {
+                const funcStr = onChange.toString();
+                const paramMatch = funcStr.match(/\(([^)]+)\)/);
+                if (paramMatch) {
+                    const param = paramMatch[1].trim();
+                    // If parameter is not 'e', 'event', or starts with 'e:', it might expect value
+                    if (param &&
+                        param !== 'e' &&
+                        param !== 'event' &&
+                        !param.startsWith('e:')) {
+                        // Custom pattern - call with value
+                        onChange(css);
+                    }
+                    else {
+                        // Standard React pattern - call with event
+                        onChange(e);
+                    }
+                }
+                else {
+                    // Default to standard React pattern
+                    onChange(e);
+                }
+            }
+            catch (error) {
+                // If calling with value fails, try with event
+                try {
+                    onChange(e);
+                }
+                catch {
+                    // If both fail, call with value as fallback
+                    onChange(css);
+                }
+            }
+        }
+    };
+    // Handle onBlur - support both event and value patterns
+    const handleBlur = (e) => {
+        if (onBlur) {
+            const css = e.target.value;
+            // Similar logic for onBlur
+            try {
+                const funcStr = onBlur.toString();
+                const paramMatch = funcStr.match(/\(([^)]+)\)/);
+                if (paramMatch) {
+                    const param = paramMatch[1].trim();
+                    if (param &&
+                        param !== 'e' &&
+                        param !== 'event' &&
+                        !param.startsWith('e:')) {
+                        onBlur(css);
+                    }
+                    else {
+                        onBlur(e);
+                    }
+                }
+                else {
+                    onBlur(e);
+                }
+            }
+            catch (error) {
+                // If calling with value fails, try with event
+                try {
+                    onBlur(e);
+                }
+                catch {
+                    // If both fail, call with value as fallback
+                    onBlur(css);
+                }
+            }
+        }
+    };
+    const handleReset = () => {
+        const styles = cssValueRef.current.split(',').filter(Boolean);
+        if (styles.length > 0) {
+            styles.pop();
+            cssValueRef.current = styles.join(',') + (styles.length ? ',' : '');
+        }
+        else {
+            cssValueRef.current = '';
+        }
+        if (onReset) {
+            onReset(cssValueRef.current);
+        }
+        if (onChange) {
+            // When resetting, we call onChange with the value directly (custom pattern)
+            // since we don't have an event object
+            onChange(cssValueRef.current);
+        }
+    };
+    return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['relative'], className), ref: cssWrapperRef, children: [_jsxs("div", { className: cn(s['flex'], s['absolute'], s['gap-2'], s['right-2'], s['z-10']), children: [onReset && (_jsx(Icon, { nameIcon: "MdLockReset", propsIcon: { color: '#000000', size: 24 }, onClick: handleReset })), onMoreInfo && (_jsx(Icon, { nameIcon: "MdInfoOutline", propsIcon: { color: '#000000', size: 24 }, onClick: onMoreInfo }))] }), _jsx(Textarea, { ref: ref, id: id, label: label, error: error, required: required, placeholder: placeholder, value: cssValueRef.current, onChange: handleChange, onBlur: handleBlur, onKeyUp: () => setIsCssListOpen(true), disabled: disabled, ...labelProps, ...props }), isCssListOpen && cssPropertiesList.length > 0 && (_jsx("div", { children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['bg-black'], s['text-white'], s['overflow-y-scroll'], s['w-full']), style: { maxHeight: 'calc(100vh - 20vh)' }, children: cssPropertiesList?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop, propIndex) => (_jsxs("li", { className: cn(s['flex'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['cursor-pointer']), onClick: () => {
+                                    let existsString = cssValueRef.current?.split(',');
+                                    if (cssValueRef.current.includes(',')) {
+                                        existsString = existsString.map((item) => {
+                                            if (item?.includes(':'))
+                                                return item;
+                                        });
+                                        if (prop != 'number')
+                                            existsString.push(`${item[0]}:'${prop}',`);
+                                        else
+                                            existsString.push(`${item[0]}:1,`);
+                                        cssValueRef.current = existsString
+                                            .join(',')
+                                            .replaceAll(',,', ',');
+                                    }
+                                    else {
+                                        if (prop != 'number')
+                                            cssValueRef.current = `${item[0]}:'${prop}',`;
+                                        else {
+                                            cssValueRef.current = `${item[0]}:1,`;
+                                        }
+                                    }
+                                    handleCssFilter(existsString.join(''));
+                                }, children: [' ', prop, ' '] }, propIndex)))] }, index))) }) })), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+CssMultilineInput.displayName = 'CssMultilineInput';