react-restyle-components 0.3.77 → 0.3.80

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

@@ -1,14 +1,7 @@
 export * from './src/components/';
-import * as Form from './src/components/Form/form.component';
 export * from './src/components/button/button.component';
 export * from './src/components/button/buttonGroup/buttonGroup.component';
-export * from './src/components/check-box/checkBox.component';
-export * from './src/components/date-picker/date-picker.component';
-export * from './src/components/Input/InputOTP/input-otp.component';
-export * from './src/components/Input/InputPin/input-pin.component';
-export * from './src/components/input-dropdown/input-dropdown.component';
 export * from './src/components/Loader/loader.component';
-export * from './src/components/radio/radio.component';
 export * from './src/components/stepper/stepper.component';
 export * from './src/components/timer/timer.component';
 export * from './src/components/tooltip/tooltip.component';
@@ -19,8 +12,6 @@ export * from './src/components/pdf/pdf-table.components';
 export * from './src/components/pdf/pdf-typography.components';
 export * from './src/components/pdf/pdf-wrapped-view.components';
 export * from './src/components/Accordion/collapsible/collapsible.component';
-export * from './src/components/text-input-dropdown/text-input-dropdown.component';
-export * from './src/components/Input/CSSMultilineInput/css-multiline-input.component';
 export * from './src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
 export * from './src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
 export * from './src/components/Selection/multi-select/multi-select.component';
@@ -37,5 +28,4 @@ export * from './src/components/AutoComplete/auto-complete-filter-multi-select-m
 export * from './src/components/Selection/single-select/single-select.component';
 export * from './src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component';
 export * from './src/components/Accordion/AccordionSection';
-export { Form };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,KAAK,IAAI,MAAM,sCAAsC,CAAC;AAC7D,cAAc,0CAA0C,CAAC;AACzD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AACpE,cAAc,qDAAqD,CAAC;AACpE,cAAc,0DAA0D,CAAC;AACzE,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kDAAkD,CAAC;AACjE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,oEAAoE,CAAC;AAEnF,cAAc,wEAAwE,CAAC;AACvF,cAAc,mKAAmK,CAAC;AAClL,cAAc,+JAA+J,CAAC;AAC9K,cAAc,gEAAgE,CAAC;AAC/E,cAAc,sFAAsF,CAAC;AACrG,cAAc,mDAAmD,CAAC;AAClE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,yDAAyD,CAAC;AACxE,cAAc,uFAAuF,CAAC;AACtG,cAAc,6DAA6D,CAAC;AAC5E,cAAc,yEAAyE,CAAC;AACxF,cAAc,+GAA+G,CAAC;AAC9H,cAAc,uJAAuJ,CAAC;AACtK,cAAc,2KAA2K,CAAC;AAC1L,cAAc,kEAAkE,CAAC;AACjF,cAAc,qLAAqL,CAAC;AAGpM,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAC,IAAI,EAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,0CAA0C,CAAC;AACzD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kDAAkD,CAAC;AACjE,cAAc,8DAA8D,CAAC;AAE7E,cAAc,mKAAmK,CAAC;AAClL,cAAc,+JAA+J,CAAC;AAC9K,cAAc,gEAAgE,CAAC;AAC/E,cAAc,sFAAsF,CAAC;AACrG,cAAc,mDAAmD,CAAC;AAClE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,yDAAyD,CAAC;AACxE,cAAc,uFAAuF,CAAC;AACtG,cAAc,6DAA6D,CAAC;AAC5E,cAAc,yEAAyE,CAAC;AACxF,cAAc,+GAA+G,CAAC;AAC9H,cAAc,uJAAuJ,CAAC;AACtK,cAAc,2KAA2K,CAAC;AAC1L,cAAc,kEAAkE,CAAC;AACjF,cAAc,qLAAqL,CAAC;AAGpM,cAAc,6CAA6C,CAAC"}

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

@@ -1,14 +1,7 @@
 export * from './src/components/';
-import * as Form from './src/components/Form/form.component';
 export * from './src/components/button/button.component';
 export * from './src/components/button/buttonGroup/buttonGroup.component';
-export * from './src/components/check-box/checkBox.component';
-export * from './src/components/date-picker/date-picker.component';
-export * from './src/components/Input/InputOTP/input-otp.component';
-export * from './src/components/Input/InputPin/input-pin.component';
-export * from './src/components/input-dropdown/input-dropdown.component';
 export * from './src/components/Loader/loader.component';
-export * from './src/components/radio/radio.component';
 export * from './src/components/stepper/stepper.component';
 export * from './src/components/timer/timer.component';
 export * from './src/components/tooltip/tooltip.component';
@@ -19,8 +12,6 @@ export * from './src/components/pdf/pdf-table.components';
 export * from './src/components/pdf/pdf-typography.components';
 export * from './src/components/pdf/pdf-wrapped-view.components';
 export * from './src/components/Accordion/collapsible/collapsible.component';
-export * from './src/components/text-input-dropdown/text-input-dropdown.component';
-export * from './src/components/Input/CSSMultilineInput/css-multiline-input.component';
 export * from './src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
 export * from './src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
 export * from './src/components/Selection/multi-select/multi-select.component';
@@ -38,4 +29,3 @@ export * from './src/components/Selection/single-select/single-select.component'
 export * from './src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component';
 // New comp. added
 export * from './src/components/Accordion/AccordionSection';
-export { Form };

package/lib/src/core-components/src/components/Badge/Badge.d.ts

@@ -7,6 +7,8 @@ export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.R
 } & {
     Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
         children?: React.ReactNode;
+        content?: string | undefined;
+        className?: string | undefined;
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
@@ -17,7 +19,6 @@ export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.R
         accessKey?: string | undefined;
         autoCapitalize?: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters" | undefined;
         autoFocus?: boolean | undefined;
-        className?: string | undefined;
         contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
@@ -33,7 +34,6 @@ export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.R
         radioGroup?: string | undefined;
         role?: React.AriaRole | undefined;
         about?: string | undefined;
-        content?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
         prefix?: string | undefined;
@@ -54,11 +54,11 @@ export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.R
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "both" | "none" | "list" | "inline" | undefined;
+        "aria-autocomplete"?: "inline" | "both" | "none" | "list" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -73,7 +73,7 @@ export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.R
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;

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

@@ -2,7 +2,10 @@ import React from 'react';
 import { InputProps } from '../../core-components/atoms/Input/Input';
 import { TextareaProps } from '../../core-components/atoms/Textarea/Textarea';
 import { LabelProps } from '../../core-components/atoms/Label/Label';
+import { type RadioOption, type CheckboxOption } from './components';
 export type { InputProps, TextareaProps, LabelProps };
+export type { RadioOption, CheckboxOption } from './components';
+export { PasswordInput, ToggleInput, RadioInput, CheckboxInput, CheckboxGroupInput, DatePickerInput, DropdownInput, TextDropdownInput, PinInput, OtpInput, CssMultilineInput, } from './components';
 interface BaseFormFieldProps {
     /** Label text displayed above the input */
     label?: string;
@@ -14,13 +17,45 @@ interface BaseFormFieldProps {
     id?: string;
     /** Whether the field is required */
     required?: boolean;
-    /** Input type - use 'textarea' to render a Textarea component */
-    type?: React.InputHTMLAttributes<HTMLInputElement>['type'] | 'textarea';
+    /** Input type - use 'textarea', 'toggle', 'radio', 'checkbox', 'checkbox-group', 'date-picker', 'input-dropdown', 'text-input-dropdown', 'input-pin', 'input-otp', or 'css-multiline' for special types */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'] | 'textarea' | 'toggle' | 'radio' | 'checkbox' | 'checkbox-group' | 'date-picker' | 'input-dropdown' | 'text-input-dropdown' | 'input-pin' | 'input-otp' | 'css-multiline';
+    /** Show password toggle button (only for type="password") */
+    showPasswordToggle?: boolean;
+    /** Radio options (only for type="radio") */
+    radioOptions?: RadioOption[];
+    /** Checkbox label (only for type="checkbox") */
+    checkboxLabel?: string;
+    /** Checkbox group options (only for type="checkbox-group") */
+    checkboxOptions?: CheckboxOption[];
+    /** Toggle label visibility (only for type="toggle") */
+    isToggleLabel?: boolean;
+    /** Date format (only for type="date-picker") */
+    dateFormat?: string;
+    /** Dropdown items (only for type="input-dropdown" or "text-input-dropdown") */
+    dropdownItems?: string[];
+    /** Allow custom input values (only for type="text-input-dropdown", default: true) */
+    allowCustomInput?: boolean;
+    /** PIN length (only for type="input-pin", default: 12) */
+    pinLength?: number;
+    /** OTP length (only for type="input-otp", default: 6) */
+    otpLength?: number;
+    /** PIN/OTP value array (only for type="input-pin" or "input-otp") */
+    pinValue?: Array<number | undefined>;
+    /** Error message for PIN/OTP (only for type="input-pin" or "input-otp") */
+    pinErrorMsg?: string;
+    /** Default message for PIN/OTP (only for type="input-pin" or "input-otp") */
+    pinDefaultMsg?: string;
+    /** CSS properties data (only for type="css-multiline") */
+    cssProperties?: Array<[string, string[]]>;
+    /** On reset callback (only for type="css-multiline") */
+    onReset?: (value: string) => void;
+    /** On more info callback (only for type="css-multiline") */
+    onMoreInfo?: () => void;
 }
 type HTMLFieldAttributes = React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 type SafeHTMLAttributes = Pick<HTMLFieldAttributes, 'name' | 'placeholder' | 'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'autoFocus' | 'autoComplete' | 'className' | 'style' | 'maxLength' | 'minLength' | 'tabIndex' | 'aria-label' | 'aria-describedby' | 'aria-invalid' | 'aria-required'>;
 type FieldEventHandlers = {
-    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string | boolean) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/FormField/FormField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/FormField/FormField.tsx"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,84 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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 { Label } from '../../core-components/atoms/Label/Label';
-export const FormField = React.forwardRef(({ label, error, id, labelProps, required, type, ...props }, ref) => {
+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 FormField = React.forwardRef(({ label, error, 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, disabled, ...props }, ref) => {
     const fieldId = id || `field-${Math.random().toString(36).substr(2, 9)}`;
     const isTextarea = type === 'textarea';
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { id: fieldId, required: required, ...labelProps, children: label })), isTextarea ? (_jsx(Textarea, { ref: ref, id: fieldId, error: error, required: required, ...props })) : (_jsx(Input, { ref: ref, id: fieldId, type: type, error: error, required: required, ...props }))] }));
+    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';
+    // 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: error, 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: error, 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: error, 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: error, 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: error, 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: error, 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: error, 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: error, 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: error, 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: error, required: required, value: value, onChange: onChange, disabled: disabled, cssProperties: cssProperties, onReset: onReset, onMoreInfo: onMoreInfo, placeholder: props.placeholder, className: props.className, labelProps: labelProps, ...props }));
+    }
+    // Render textarea - use Textarea atom component
+    if (isTextarea) {
+        return (_jsx(Textarea, { ref: ref, id: fieldId, label: label, error: error, required: required, ...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: error, required: required, ...labelProps, ...props }));
+    }
+    // For password with toggle, use PasswordInput component
+    if (isPassword && showPasswordToggle) {
+        return (_jsx(PasswordInput, { ref: ref, id: fieldId, label: label, error: error, required: required, value: value, onChange: onChange, disabled: disabled, labelProps: labelProps, ...props }));
+    }
+    // Render standard input - use Input atom component
+    return (_jsx(Input, { ref: ref, id: fieldId, type: type, label: label, error: error, required: required, ...labelProps, ...props }));
 });
 FormField.displayName = 'FormField';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroupInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/CheckboxGroupInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,+GAqG9B,CAAC"}

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

@@ -0,0 +1,37 @@
+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';
+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.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,0GAqEzB,CAAC"}

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

@@ -0,0 +1,8 @@
+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.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CssMultilineInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/CssMultilineInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAkBzD,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,iHA+N7B,CAAC"}

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

@@ -0,0 +1,114 @@
+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';
+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, 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);
+        if (onChange) {
+            onChange(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) {
+            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: (e) => {
+                    const css = e.target.value;
+                    handleCssChange(css);
+                    setIsCssListOpen(true);
+                }, 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';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/FormField/components/DatePickerInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,4CAA4C,CAAC;AAOpD,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA0CD,eAAO,MAAM,eAAe,4GAqF3B,CAAC"}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, forwardRef } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import { Icon } from '../../Icon';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+const DatePickerCustomInput = forwardRef((customInputProps, customInputRef) => {
+    return (_jsxs("div", { onClick: !customInputProps.disabled && customInputProps.onClick, ref: customInputRef, className: cn(s['border-gray-300'], s['place-items-center'], s['border'], s['rounded-md'], s['px-2'], s['py-2'], s['flex'], s['items-center'], s['w-full'], s['cursor-pointer'], customInputProps.disabled && s['cursor-not-allowed'], customInputProps.disabled && s['opacity-50']), children: [_jsx("label", { className: cn(s['mr-3'], s['font-arimaRegular'], s['text-gray-900'], s['dark:text-gray-100'], s['text-base'], s['flex-1']), children: customInputProps.value || customInputProps.placeholder }), _jsx(Icon, { nameIcon: "ImCalendar" })] }));
+});
+DatePickerCustomInput.displayName = 'DatePickerCustomInput';
+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);
+    useEffect(() => {
+        if (value) {
+            setPickedDate(typeof value === 'string' ? dayjs(value).toDate() : value);
+        }
+    }, [value]);
+    const handleDateChange = (date) => {
+        setPickedDate(date);
+        if (onChange && date) {
+            onChange(dayjs(date).format(dateFormat));
+        }
+    };
+    return (_jsxs("div", { className: cn(s['w-full'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps, children: _jsx("div", { className: cn(s['flex'], s['z-50']), children: _jsx(DatePicker, { selected: pickedDate || undefined, dateFormat: dateFormat, placeholderText: placeholder, onChange: handleDateChange, customInput: _jsx(DatePickerCustomInput, { disabled: disabled }), disabled: disabled, ...props }) }) })), !label && (_jsx("div", { className: cn(s['flex'], s['z-50'], className), children: _jsx(DatePicker, { selected: pickedDate || undefined, dateFormat: dateFormat, placeholderText: placeholder, onChange: handleDateChange, customInput: _jsx(DatePickerCustomInput, { disabled: disabled }), disabled: disabled, ...props }) })), 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.d.ts

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

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

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