@delightui/components 0.1.76 → 0.1.78

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, InputHTMLAttributes, TextareaHTMLAttributes, Dispatch, SetStateAction, Ref, FormHTMLAttributes, LiHTMLAttributes, CSSProperties, RefObject, TableHTMLAttributes, TdHTMLAttributes } from 'react';
+import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, Ref, FormHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, Dispatch, SetStateAction, LiHTMLAttributes, CSSProperties, RefObject, TableHTMLAttributes, TdHTMLAttributes } from 'react';
 import { LinkProps } from 'react-router-dom';
 import { Plugin } from 'flatpickr/dist/types/options';
 import FlatPickr from 'react-flatpickr';
@@ -179,29 +179,236 @@ interface IconButtonProps extends Omit<ButtonProps, 'leadingIcon' | 'trailingIco
 declare const IconButton: (props: IconButtonProps) => React__default.JSX.Element;
 
 /**
- * Enum for different input types.
+ * Type representing the allowed values for form fields
  */
-type InputTypeEnum = 'Text' | 'Number' | 'Email' | 'Password';
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> & {
+type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
+/**
+ * Type representing the form values as a partial record of field names to field values
+ * @example
+ * ```typescript
+ * const formState: FormState = {
+ *   name: 'John Doe',
+ *   age: 30,
+ *   dob: new Date('1990-01-01')
+ * };
+ * ```
+ */
+type FormState<T extends FieldValue = FieldValue> = Partial<Record<string, T>>;
+/**
+ * Type representing the form errors as a partial record of field names to error messages
+ */
+type FormErrors<T extends FormState = FormState> = Partial<Record<keyof T, string>>;
+/**
+ * Type representing a validation function for a form field
+ * It takes an error setter function and the field value (optional) and returns a boolean indicating if the value is valid
+ * @example
+ * ```typescript
+ * const nameValidator: FieldValidationFunction = (setError, value) => {
+ *   if (!value) {
+ *     setError('Name is required');
+ *     return false;
+ *   }
+ *   return true;
+ * };
+ * ```
+ */
+type FieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => boolean;
+/**
+ * Type representing the required fields in a form
+ * It's a partial record of field names to a boolean indicating if the field is required
+ */
+type RequiredFields<T extends FormState = FormState> = Partial<Record<keyof T, boolean>>;
+/**
+ * Type representing the validation functions for each field in a form
+ * It's a partial record of field names to validation functions (or undefined)
+ * @example
+ * ```typescript
+ * const nameValidator: FieldValidationFunction = (setError, value) => {
+ *   if (!value) {
+ *     setError('Name is required');
+ *     return false;
+ *   }
+ *   return true;
+ * };
+ * const fieldValidators: FieldValidators = {
+ *   name: nameValidator,
+ *   age: undefined,
+ * };
+ * ```
+ */
+type FieldValidators<T extends FormState = FormState> = Partial<Record<keyof T, FieldValidationFunction | undefined>>;
+/**
+ * Type representing a function that handles form state changes
+ * It takes the new form state and an error setter function and doesn't return anything
+ * @example
+ * ```typescript
+ * const handleFormStateChange: FormStateChangeHandler = (state, setError) => {
+ *   // Validate form state and set errors
+ *   if (!state.name) {
+ *     setError('name', 'Name is required');
+ *   }
+ * };
+ * ```
+ */
+type FormStateChangeHandler<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
+/**
+ * Type representing a function that validates the entire form
+ * It takes the form values and an error setter function and returns a boolean indicating if the form is valid
+ * @example
+ * ```typescript
+ * const validateForm: FormValidator = (state, setError) => {
+ *   let isValid = true;
+ *   if (!state.name) {
+ *     setError('name', 'Name is required');
+ *     isValid = false;
+ *   }
+ *   if (!state.age || typeof state.age !== 'number') {
+ *     setError('age', 'Age must be a number');
+ *     isValid = false;
+ *   }
+ *   return isValid;
+ * };
+ * ```
+ */
+type FormValidator<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
+/**
+ * Type representing a function that handles form submission.
+ * It takes updated form state and a function to set error messages for specific fields.
+ *
+ * @template T - The type of the form state, defaulting to `FormState`.
+ *
+ * @param {T} values - The updated form state values.
+ * @param {(field: keyof T, errorMessage: string) => void} setError - A function to set error messages for specific fields.
+ *
+ * @example
+ * ```typescript
+ * const handleFormSubmit: FormSubmitHandler = (values, setError) => {
+ *   // Submit form data
+ *   console.log(values);
+ * };
+ * ```
+ */
+type FormSubmitHandler<T extends FormState = FormState> = (values: T, setError: (field: keyof T, errorMessage: string) => void) => void;
+type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> & {
+    formRef?: Ref<HTMLFormElement>;
+};
+type FormContextValues<T extends FormState = FormState> = {
+    formRef?: Ref<HTMLFormElement>;
+    formState?: T;
+    updateFieldValue: (name: string, value: FieldValue) => void;
+    formErrors: FormErrors<T>;
+    updateFieldError: (name: keyof T, errorMessage: string) => void;
+    onFormSubmit: React__default.FormEventHandler<HTMLFormElement>;
+    updateFieldValidators: (name: keyof T, validate?: FieldValidationFunction) => void;
+    updateRequiredFields: (name: keyof T, required?: boolean) => void;
+};
+type FormProviderProps<T extends FormState = FormState> = {
+    formRef?: Ref<HTMLFormElement>;
+    children?: React__default.ReactNode;
+    formState?: T;
+    onFormStateChange?: FormStateChangeHandler<T>;
+    formValidator?: FormValidator<T>;
+    onSubmit?: FormSubmitHandler<T>;
+    validateOnChange?: boolean;
+};
+
+/**
+ * Props for the FormField component.
+ */
+type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
     /**
-     * The type of input.
-     * @default 'Text'
+     * Name of the form field
      */
-    inputType?: InputTypeEnum;
+    name: string;
     /**
-     * The value of the input.
+     * Label for the form field
      */
-    value?: string;
+    label?: string;
     /**
-     * Callback function when the input value changes.
-     * @param value - The new value of the input.
+     * Children for the form field
      */
-    onValueChanged?: (value: string) => void;
+    children: React.ReactNode;
+    /**
+     * Message for the form field
+     */
+    message?: string;
+    /**
+     * There is a message/error for the form field
+     */
+    hasMessage?: boolean;
+    /**
+     * Info icon for the form field
+     */
+    infoIcon?: React.ReactNode;
     /**
-     * Indicates if the input is invalid.
+     * Indicates if the form field is required
+     */
+    required?: boolean;
+    /**
+     * Validation function for the form field
+     */
+    validate?: FieldValidationFunction;
+    /**
+     * Indicates if the form field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if the form field is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Id for the form field
+     */
+    id?: string;
+};
+/**
+ * Props that must be implemented by all form field components that are controlled inputs
+ */
+type ControlledFormComponentProps<T extends FieldValue> = {
+    /**
+     * the initial value for the field
+     */
+    initialValue?: T;
+    /**
+     * the initial value for the field
+     */
+    checked?: boolean;
+    /**
+     * The current value of the form field
+     */
+    value?: T;
+    /**
+     * Callback function that is called when the field value changes
+     * @param value - The new value of the form field
+     */
+    onValueChange?: (value: T) => void;
+    /**
+     * Whether the form field is disabled and cannot be interacted with
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the form field must have a value
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the form field's current value is invalid
      * @default false
      */
     invalid?: boolean;
+};
+
+/**
+ * Enum for different input types.
+ */
+type InputTypeEnum = 'Text' | 'Number' | 'Email' | 'Password';
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> & ControlledFormComponentProps<string> & {
+    /**
+     * The type of input.
+     * @default 'Text'
+     */
+    inputType?: InputTypeEnum;
     /**
      * Icon to be displayed before the input.
      */
@@ -214,23 +421,14 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'>
      * provide a way to override the styling
      */
     'component-variant'?: string;
-    /**
-     * The input is independent of the parent form field context.
-     * @default false
-     */
-    independent?: boolean;
 };
 
-declare const Input: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & {
+declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & ControlledFormComponentProps<string> & {
     inputType?: InputTypeEnum;
-    value?: string;
-    onValueChanged?: (value: string) => void;
-    invalid?: boolean;
-    leadingIcon?: React__default.ReactNode;
-    trailingIcon?: React__default.ReactNode;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
     'component-variant'?: string;
-    independent?: boolean;
-} & React__default.RefAttributes<HTMLInputElement>>;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
 type PasswordProps = Omit<InputProps, 'inputType' | 'trailingIcon'> & {
     hideTrailingIcon?: boolean;
@@ -324,33 +522,9 @@ interface TextProps {
  */
 declare const Text: (props: TextProps) => React__default.JSX.Element;
 
-type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
-    /**
-      * The value of the text area.
-      */
-    value?: string;
-    /**
-     * Callback function when the value of the text area changes.
-     * @param value - The new value of the text area.
-     */
-    onValueChanged?: (value: string) => void;
-    /**
-     * Indicates if the text area is in an invalid state.
-      * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Additional class for styling.
-     */
-    className?: string;
-};
+type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & ControlledFormComponentProps<string>;
 
-declare const TextArea: React__default.ForwardRefExoticComponent<Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & {
-    value?: string;
-    onValueChanged?: (value: string) => void;
-    invalid?: boolean;
-    className?: string;
-} & React__default.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: React$1.ForwardRefExoticComponent<Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & ControlledFormComponentProps<string> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 type ResponsiveComponentProps<T> = {
     className?: string;
@@ -424,30 +598,11 @@ type SelectListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
 declare const SelectListItem: (props: SelectListItemProps) => React__default.JSX.Element;
 
 type ToggleLabelAlignmentEnum = 'Left' | 'Right';
-type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'checked'> & {
+type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'checked'> & ControlledFormComponentProps<boolean> & {
     /**
      * The label of the toggle.
      */
     children?: React.ReactNode;
-    /**
-     * The checked state of the toggle.
-     */
-    checked?: boolean;
-    /**
-     * Callback function when the toggle state changes.
-     * @param value - The new checked state of the toggle.
-     */
-    onValueChanged?: (value: boolean) => void;
-    /**
-     * Default checked state of the toggle.
-     * @default false
-     */
-    defaultChecked?: boolean;
-    /**
-     * Indicates if the toggle is invalid.
-     * @default false
-     */
-    invalid?: boolean;
     /**
      * Alignment of the label.
      * @default 'Left'
@@ -455,51 +610,22 @@ type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'
     labelAlignment?: ToggleLabelAlignmentEnum;
 };
 
-declare const Toggle: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
-    children?: React__default.ReactNode;
-    checked?: boolean;
-    onValueChanged?: (value: boolean) => void;
-    defaultChecked?: boolean;
-    invalid?: boolean;
+declare const Toggle: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & ControlledFormComponentProps<boolean> & {
+    children?: React.ReactNode;
     labelAlignment?: ToggleLabelAlignmentEnum;
-} & React__default.RefAttributes<HTMLInputElement>>;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const ToggleButton: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "type" | "actionType"> & {
-    checked?: boolean;
+declare const ToggleButton: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "type" | "actionType"> & ControlledFormComponentProps<boolean> & {
     defaultChecked?: boolean;
-    onValueChanged?: (value: boolean) => void;
-    disabled?: boolean;
-    required?: boolean;
-    invalid?: boolean;
     children?: React__default.ReactNode;
     className?: string;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
-type ToggleButtonProps = Omit<ButtonProps, 'type' | 'actionType'> & {
-    /**
-     * Controlled state of the toggle
-     */
-    checked?: boolean;
+type ToggleButtonProps = Omit<ButtonProps, 'type' | 'actionType'> & ControlledFormComponentProps<boolean> & {
     /**
      * Default value for uncontrolled component
      */
     defaultChecked?: boolean;
-    /**
-     * Callback function when toggle state changes
-     */
-    onValueChanged?: (value: boolean) => void;
-    /**
-     * Disable the toggle
-     */
-    disabled?: boolean;
-    /**
-     * Make the toggle required
-     */
-    required?: boolean;
-    /**
-     * Show invalid state
-     */
-    invalid?: boolean;
     /**
      * Content of the button
      */
@@ -571,31 +697,13 @@ type TooltipProps = {
 
 declare const Tooltip: ({ children, direction, alignment, action, style, isVisible, target, className, }: TooltipProps) => React__default.JSX.Element;
 
-interface CustomToggleProps {
-    /**
-     * Controlled state of the toggle
-     */
-    checked?: boolean;
-    /**
-     * Default value for uncontrolled component
-     */
-    defaultChecked?: boolean;
-    /**
-     * Callback function when toggle state changes
-     */
-    onValueChanged?: (value: boolean) => void;
-    /**
-     * Disable the toggle
-     */
-    disabled?: boolean;
-    /**
-     * Make the toggle required
-     */
-    required?: boolean;
-    /**
-     * Show invalid state
-     */
-    invalid?: boolean;
+declare const CustomToggle: React$1.ForwardRefExoticComponent<ControlledFormComponentProps<boolean> & {
+    offContent?: React$1.ReactNode;
+    onContent?: React$1.ReactNode;
+    className?: string;
+} & React$1.RefAttributes<HTMLInputElement>>;
+
+type CustomToggleProps = ControlledFormComponentProps<boolean> & {
     /**
      * Content to show when toggle is off
      */
@@ -608,9 +716,7 @@ interface CustomToggleProps {
      * Additional className for the toggle
      */
     className?: string;
-}
-
-declare const CustomToggle: React__default.ForwardRefExoticComponent<CustomToggleProps & React__default.RefAttributes<HTMLInputElement>>;
+};
 
 type ChipTypeEnum = 'Bright' | 'BrightOutline' | 'Subdued' | 'SubduedOutline';
 type ChipStyleEnum = 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
@@ -681,7 +787,7 @@ declare const Chip: (props: ChipProps) => React__default.JSX.Element;
 type CheckboxSizeEnum = 'Small' | 'Medium' | 'Large';
 type CheckboxLabelAlignmentEnum = 'Left' | 'Right';
 type CheckboxTypeEnum = 'Default' | 'Inverse';
-type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & ControlledFormComponentProps<boolean> & {
     /**
      * The label of the checkbox.
      */
@@ -696,66 +802,38 @@ type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'check
      * @default 'Default'
      */
     type?: CheckboxTypeEnum;
-    /**
-     * The checked state of the checkbox.
-     */
-    checked?: boolean;
-    /**
-     * Callback function when the checkbox state changes.
-     * @param value - The new checked state of the checkbox.
-     */
-    onValueChanged?: (value: boolean) => void;
     /**
      * Default checked state of the checkbox.
      * @default false
      */
     defaultChecked?: boolean;
-    /**
-     * Indicates if the checkbox is invalid.
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * The value of the checkbox.
-     */
-    value?: string | number;
     /**
      * The alignment of the label.
      */
     labelAlignment?: CheckboxLabelAlignmentEnum;
-    /**
-     * The checkbox is independent of the parent form field context.
-     * @default false
-     */
-    independent?: boolean;
 };
 
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
-    children?: React__default.ReactNode;
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & ControlledFormComponentProps<boolean> & {
+    children?: React.ReactNode;
     size?: CheckboxSizeEnum;
     type?: CheckboxTypeEnum;
-    checked?: boolean;
-    onValueChanged?: (value: boolean) => void;
     defaultChecked?: boolean;
-    invalid?: boolean;
-    value?: string | number;
     labelAlignment?: CheckboxLabelAlignmentEnum;
-    independent?: boolean;
-} & React__default.RefAttributes<HTMLInputElement>>;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const CheckboxItem: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "onValueChanged"> & {
-    onChange?: (value: boolean) => void;
+declare const CheckboxItem: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & ControlledFormComponentProps<boolean> & {
+    children?: React__default.ReactNode;
+    size?: CheckboxSizeEnum;
+    type?: CheckboxTypeEnum;
+    defaultChecked?: boolean;
+    labelAlignment?: CheckboxLabelAlignmentEnum;
+} & {
     showRightButton?: boolean;
     onRightButtonClick?: () => void;
     rightButtonIcon?: React__default.ReactNode;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
-type CheckboxItemProps = Omit<CheckboxProps, 'onValueChanged'> & {
-    /**
-     * Callback function when the checkbox state changes.
-     * @param value: boolean - The new checked state of the checkbox.
-     */
-    onChange?: (value: boolean) => void;
+type CheckboxItemProps = CheckboxProps & {
     /**
      * Flag to show right button.
      * @default false
@@ -771,7 +849,7 @@ type CheckboxItemProps = Omit<CheckboxProps, 'onValueChanged'> & {
     rightButtonIcon?: ReactNode;
 };
 
-type SliderProps = React.HTMLAttributes<HTMLDivElement> & {
+type SliderProps = React.HTMLAttributes<HTMLDivElement> & ControlledFormComponentProps<number | [number, number]> & {
     /**
      * The minimum value of the slider.
      * @default 0
@@ -787,16 +865,6 @@ type SliderProps = React.HTMLAttributes<HTMLDivElement> & {
      * @default 1
      */
     step?: number;
-    /**
-     * The current value of the slider.
-     * Can be a single number or an array with exactly two numbers for range selection.
-     */
-    value?: number | [number, number];
-    /**
-     * Callback function triggered when the slider value changes.
-     * @param value - The new value of the slider.
-     */
-    onValueChange?: (value: number | [number, number]) => void;
     /**
      * Whether to display the minimum value label.
      * @default false
@@ -817,19 +885,14 @@ type SliderProps = React.HTMLAttributes<HTMLDivElement> & {
      * @default false
      */
     enableRange?: boolean;
-    /**
-     * Flag to disabled slider.
-     * @default false
-     */
-    disabled?: boolean;
     className?: string;
 };
 
-declare const Slider: (props: SliderProps) => React__default.JSX.Element;
+declare const Slider: (props: SliderProps) => React$1.JSX.Element;
 
 type RadioButtonSizeEnum = 'Small' | 'Medium' | 'Large';
 type RadioButtonLabelAlignmentEnum = 'Left' | 'Right';
-type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
+type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'value'> & ControlledFormComponentProps<string | number> & {
     /**
      * The label of the radio button.
      */
@@ -839,54 +902,30 @@ type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'ch
      * @default 'Medium'
      */
     size?: RadioButtonSizeEnum;
-    /**
-     * The checked state of the radio button.
-     */
-    checked?: boolean;
-    /**
-     * Callback function when the radio button state changes.
-     * @param value - The new checked state of the radio button.
-     */
-    onValueChanged?: (value: string | number) => void;
-    /**
-     * Indicates if the radio button is invalid.
-     * @default false
-     */
-    invalid?: boolean;
     /**
      * Flag to show the label on the right side of the radio button.
      * @default false
      */
     labelAlignment?: RadioButtonLabelAlignmentEnum;
-    /**
-     * The value of the radio button.
-     */
-    value?: string | number;
 };
 
-declare const RadioButton: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
-    children?: React__default.ReactNode;
+declare const RadioButton: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & ControlledFormComponentProps<string | number> & {
+    children?: React.ReactNode;
     size?: RadioButtonSizeEnum;
-    checked?: boolean;
-    onValueChanged?: (value: string | number) => void;
-    invalid?: boolean;
     labelAlignment?: RadioButtonLabelAlignmentEnum;
-    value?: string | number;
-} & React__default.RefAttributes<HTMLInputElement>>;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const RadioButtonItem: React__default.ForwardRefExoticComponent<Omit<RadioButtonProps, "onValueChanged"> & {
-    onChange?: (value: string | number) => void;
+declare const RadioButtonItem: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & ControlledFormComponentProps<string | number> & {
+    children?: React__default.ReactNode;
+    size?: RadioButtonSizeEnum;
+    labelAlignment?: RadioButtonLabelAlignmentEnum;
+} & {
     showRightButton?: boolean;
     onRightButtonClick?: () => void;
     rightButtonIcon?: React__default.ReactNode;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
-type RadioButtonItemProps = Omit<RadioButtonProps, 'onValueChanged'> & {
-    /**
-     * Callback function when the radio button state changes.
-     * @param value: string | number - The value of the selected radio button.
-     */
-    onChange?: (value: string | number) => void;
+type RadioButtonItemProps = RadioButtonProps & {
     /**
      * Flag to show right button.
      * @default false
@@ -1229,7 +1268,7 @@ type ContextMenuProps<T extends ListItemType> = ListProps<T>;
 declare const ContextMenu: <T extends ListItemType>(props: ContextMenuProps<T>) => React__default.JSX.Element;
 
 type DatePickerPosition = 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
-type DatePickerProps = {
+type DatePickerProps = ControlledFormComponentProps<string | Date | (string | Date)[]> & {
     /**
      * Additional class for styling.
      */
@@ -1262,12 +1301,6 @@ type DatePickerProps = {
      * For info about what formats exist, refer to the flatpickr documentation
      */
     dateFormat?: string;
-    /**
-     * Callback function when the date(s) are changed.
-     * @param dates - Array of selected dates.
-     * @param dateStr - String representation of the selected date(s). Will match the date format.
-     */
-    onChange?: (dates: Date[], dateStr: string) => void;
     /**
      * Callback function when the date picker is opened.
      * @param dates - Array of selected dates.
@@ -1331,248 +1364,7 @@ type CustomTimePickerConfig = {
 
 declare const DatePicker: (props: DatePickerProps) => React__default.JSX.Element;
 
-/**
- * Type representing the allowed values for form fields
- */
-type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
-/**
- * Type representing the form values as a partial record of field names to field values
- * @example
- * ```typescript
- * const formState: FormState = {
- *   name: 'John Doe',
- *   age: 30,
- *   dob: new Date('1990-01-01')
- * };
- * ```
- */
-type FormState<T extends FieldValue = FieldValue> = Partial<Record<string, T>>;
-/**
- * Type representing the form errors as a partial record of field names to error messages
- */
-type FormErrors<T extends FormState = FormState> = Partial<Record<keyof T, string>>;
-/**
- * Type representing a validation function for a form field
- * It takes an error setter function and the field value (optional) and returns a boolean indicating if the value is valid
- * @example
- * ```typescript
- * const nameValidator: FieldValidationFunction = (setError, value) => {
- *   if (!value) {
- *     setError('Name is required');
- *     return false;
- *   }
- *   return true;
- * };
- * ```
- */
-type FieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => boolean;
-/**
- * Type representing the required fields in a form
- * It's a partial record of field names to a boolean indicating if the field is required
- */
-type RequiredFields<T extends FormState = FormState> = Partial<Record<keyof T, boolean>>;
-/**
- * Type representing the validation functions for each field in a form
- * It's a partial record of field names to validation functions (or undefined)
- * @example
- * ```typescript
- * const nameValidator: FieldValidationFunction = (setError, value) => {
- *   if (!value) {
- *     setError('Name is required');
- *     return false;
- *   }
- *   return true;
- * };
- * const fieldValidators: FieldValidators = {
- *   name: nameValidator,
- *   age: undefined,
- * };
- * ```
- */
-type FieldValidators<T extends FormState = FormState> = Partial<Record<keyof T, FieldValidationFunction | undefined>>;
-/**
- * Type representing a function that handles form state changes
- * It takes the new form state and an error setter function and doesn't return anything
- * @example
- * ```typescript
- * const handleFormStateChange: FormStateChangeHandler = (state, setError) => {
- *   // Validate form state and set errors
- *   if (!state.name) {
- *     setError('name', 'Name is required');
- *   }
- * };
- * ```
- */
-type FormStateChangeHandler<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
-/**
- * Type representing a function that validates the entire form
- * It takes the form values and an error setter function and returns a boolean indicating if the form is valid
- * @example
- * ```typescript
- * const validateForm: FormValidator = (state, setError) => {
- *   let isValid = true;
- *   if (!state.name) {
- *     setError('name', 'Name is required');
- *     isValid = false;
- *   }
- *   if (!state.age || typeof state.age !== 'number') {
- *     setError('age', 'Age must be a number');
- *     isValid = false;
- *   }
- *   return isValid;
- * };
- * ```
- */
-type FormValidator<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
-/**
- * Type representing a function that handles form submission.
- * It takes updated form state and a function to set error messages for specific fields.
- *
- * @template T - The type of the form state, defaulting to `FormState`.
- *
- * @param {T} values - The updated form state values.
- * @param {(field: keyof T, errorMessage: string) => void} setError - A function to set error messages for specific fields.
- *
- * @example
- * ```typescript
- * const handleFormSubmit: FormSubmitHandler = (values, setError) => {
- *   // Submit form data
- *   console.log(values);
- * };
- * ```
- */
-type FormSubmitHandler<T extends FormState = FormState> = (values: T, setError: (field: keyof T, errorMessage: string) => void) => void;
-type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> & {
-    formRef?: Ref<HTMLFormElement>;
-};
-type FormContextValues<T extends FormState = FormState> = {
-    formRef?: Ref<HTMLFormElement>;
-    formState?: T;
-    updateFieldValue: (name: string, value: FieldValue) => void;
-    formErrors: FormErrors<T>;
-    updateFieldError: (name: keyof T, errorMessage: string) => void;
-    onFormSubmit: React__default.FormEventHandler<HTMLFormElement>;
-    updateFieldValidators: (name: keyof T, validate?: FieldValidationFunction) => void;
-    updateRequiredFields: (name: keyof T, required?: boolean) => void;
-};
-type FormProviderProps<T extends FormState = FormState> = {
-    formRef?: Ref<HTMLFormElement>;
-    children?: React__default.ReactNode;
-    formState?: T;
-    onFormStateChange?: FormStateChangeHandler<T>;
-    formValidator?: FormValidator<T>;
-    onSubmit?: FormSubmitHandler<T>;
-    validateOnChange?: boolean;
-};
-
-/**
- * Props for the FormField component.
- */
-type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The label for the form field
-     */
-    label?: string;
-    /**
-     * Optional message for the form field
-     */
-    message?: string;
-    /**
-     * Info icon for message
-     */
-    infoIcon?: React.ReactNode;
-    /**
-     * Optional field for possible error message
-     */
-    hasMessage?: boolean;
-};
-/**
- * Props for the FormFieldProvider component.
- */
-type FormFieldProviderProps = {
-    /**
-     * Child components
-     */
-    children: React.ReactNode;
-    /**
-     * Name of the form field
-     */
-    name: string;
-    /**
-     * Indicates if the field is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Indicates if the field is invalid
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Indicates if the field is required
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Validation function for the field
-     */
-    validate?: FieldValidationFunction;
-    /**
-     * id attribute to connect label and field of form field
-     * note:- this is optional as FormFieldContext will generate an id
-     */
-    id?: string;
-};
-/**
- * Props for the UseField hook.
- */
-type UseFieldProps<T extends FieldValue = FieldValue> = {
-    /**
-     * The value of the field
-     */
-    value?: T;
-    /**
-     * Indicates if the field is invalid
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Callback when the field value changes
-     */
-    onValueChanged?: (value: T) => void;
-    /**
-     * Indicates if the field is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Indicates if the field is required
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Default value for the field
-     */
-    defaultValue?: T;
-    /**
-     * the field is independent of the parent form field contexts
-     * @default false
-     */
-    independent?: boolean;
-};
-
-declare const useField: <T extends FieldValue = FieldValue>(props: UseFieldProps<T>) => {
-    fieldValue: T;
-    updateFieldValue: (newValue: T) => void;
-    disabledField: boolean | undefined;
-    requiredField: boolean | undefined;
-    invalidField: boolean | undefined;
-    formFieldId: string | undefined;
-    name: string | undefined;
-};
-
-type FormFieldPropsWithProvider = FormFieldProviderProps & FormFieldProps;
-declare const FormField: (props: FormFieldPropsWithProvider) => React__default.JSX.Element;
+declare const FormField: (props: FormFieldProps) => React$1.JSX.Element;
 
 type GridProps = HTMLAttributes<HTMLDivElement> & {
     columns?: number;
@@ -1959,42 +1751,20 @@ type SelectContextType = {
      * Indicates whether the field is disabled.
      */
     disabledField?: boolean;
-    /**
-     * id to use as htmlFor for label, which will be fetched from FormFieldContext
-     */
-    formFieldId: string;
 };
 /**
  * Props for the SelectProvider component, which manages state and provides context for Select.
  */
-type SelectProviderProps = {
+type SelectProviderProps = ControlledFormComponentProps<FieldValue> & {
     /**
      * Child elements to be rendered within the SelectProvider.
      */
     children: ReactNode;
-    /**
-     * Currently selected value (if controlled).
-     */
-    value?: FieldValue;
     /**
      * Indicates if multiple options can be selected.
      * @default false
      */
     multiple?: boolean;
-    /**
-     * Default selected value (if uncontrolled).
-     */
-    defaultValue?: FieldValue;
-    /**
-     * Indicates whether the Select is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Callback function invoked when the selected value changes.
-     * @param event - Optional event containing the new field value.
-     */
-    onValueChanged?: (event?: FieldValue) => void;
     /**
      * Indicates whether the selected field is hasDefaultOption or not.
      * @default false
@@ -2087,7 +1857,7 @@ declare const useSelectContext: () => SelectContextType;
  * @param props - Props for configuring the SelectProvider.
  * @returns JSX element that provides context to its children.
  */
-declare const SelectProvider: ({ children, value, defaultValue, multiple, disabled, onValueChanged, }: SelectProviderProps) => React__default.JSX.Element;
+declare const SelectProvider: ({ children, value, multiple, disabled, invalid, onValueChange, }: SelectProviderProps) => React__default.JSX.Element;
 
 /**
  * Select component that wraps SelectComponent with SelectProvider.
@@ -2104,15 +1874,13 @@ type ChipListItemProps = {
     props: ChipProps | InputProps;
     inputRef?: RefObject<HTMLInputElement>;
 };
-type ChipInputProps = {
+type ChipInputProps = ControlledFormComponentProps<string[]> & {
     inputValue?: string;
     onInputChange?: (value: string) => void;
     options?: string[];
     placeholder?: string;
     className?: string;
-    onValueChanged?: (value: string[]) => void;
     onAddNewOption?: (value: string) => void;
-    selectedValues?: string[];
 };
 
 declare const _default: React__default.NamedExoticComponent<ChipInputProps>;
@@ -2129,7 +1897,7 @@ type DropzoneStatus = 'Empty' | 'Loading' | 'Uploaded';
  * @param onFilesUpload (file: File) => void - callback when files are selected
  * @param onFilesReset () => void - callback when files are reset
  */
-type DropzoneProps = {
+type DropzoneProps = ControlledFormComponentProps<File[]> & {
     className?: string;
     /**
      * The empty state of the dropzone.
@@ -2162,12 +1930,6 @@ type DropzoneProps = {
      * @default 1
      */
     maxFiles?: number;
-    disabled?: boolean;
-    required?: boolean;
-    /**
-     * callback when files are selected
-     */
-    onFilesSelected?: (files: File[]) => Promise<void> | void;
     /**
      * callback when files are reset
      */
@@ -2220,7 +1982,7 @@ type DropzoneFilenameProps = TextProps & {
     fileIndex?: number;
 };
 
-declare const Dropzone: (props: DropzoneProps) => React__default.JSX.Element;
+declare const Dropzone: (props: DropzoneProps) => React$1.JSX.Element;
 declare const useDropzoneContext: () => DropzoneContextType;
 
 declare const DropzoneClear: (props: DropzoneClearProps) => React__default.JSX.Element;
@@ -2451,4 +2213,4 @@ declare const NotificationContext: React__default.Context<NotificationContextVal
 declare const NotificationProvider: React__default.FC<NotificationProviderProps>;
 declare const useNotification: () => NotificationContextValue;
 
-export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, _default as ChipInput, type ChipInputProps, type ChipListItemProps, type ChipListItemTypeEnum, type ChipProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormFieldPropsWithProvider, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type NotificationContainerProps, NotificationContext, NotificationProvider, Option, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RepeaterList, type RepeaterListProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, useDropzoneContext, useField, useNotification, useSelectContext, useTab };
+export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, _default as ChipInput, type ChipInputProps, type ChipListItemProps, type ChipListItemTypeEnum, type ChipProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type NotificationContainerProps, NotificationContext, NotificationProvider, Option, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RepeaterList, type RepeaterListProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, useDropzoneContext, useNotification, useSelectContext, useTab };