react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,193 +1 @@
-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)}`;
+"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)}`;

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

@@ -1,103 +1 @@
-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';
+"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";

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

@@ -1,37 +1 @@
-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';
+"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";

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

@@ -1,8 +1 @@
-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';
+"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";

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

@@ -1,192 +1 @@
-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';
+"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";