formik-form-components 0.2.10 → 0.2.12

package/dist/index.d.ts

@@ -1,59 +1,172 @@
 import * as React$1 from 'react';
-import React__default, { ReactElement, ReactNode, SetStateAction } from 'react';
+import React__default, { ReactElement, ReactNode, ElementType, SetStateAction } from 'react';
 import { FormikValues, FormikConfig, FormikProps } from 'formik';
-import { SelectProps } from '@mui/material/Select';
-import { Dayjs } from 'dayjs';
-import { StandardTextFieldProps, RadioGroupProps, AutocompleteProps, SxProps, BoxProps } from '@mui/material';
+import { SxProps, Theme, SelectProps as SelectProps$1, StandardTextFieldProps, SelectChangeEvent, RadioGroupProps, AutocompleteRenderInputParams, AutocompleteRenderOptionState, AutocompleteRenderGroupParams, CheckboxProps, ChipProps, AutocompleteProps, BoxProps } from '@mui/material';
+import { Theme as Theme$1 } from '@mui/material/styles';
+import { SelectProps, SelectChangeEvent as SelectChangeEvent$1 } from '@mui/material/Select';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Theme } from '@mui/material/styles';
+import { Dayjs } from 'dayjs';
+import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { DropzoneOptions } from 'react-dropzone';
 import { IconifyIcon } from '@iconify/react';
 
-interface Props$e {
+type PickerChangeHandlerContext = {
+    validationError: string | null;
+};
+
+declare const AppDatePicker: React__default.ForwardRefExoticComponent<Omit<DatePickerProps<boolean, Dayjs, Dayjs>, "value" | "onChange" | "renderInput" | "slotProps"> & {
+    /** Variant of the input field */
+    variant?: "outlined" | "filled" | "standard";
+    /** Field name for formik */
     name: string;
-    label: string;
+    /** Label for the date picker */
+    label?: string;
+    /** Whether the field is required */
     required?: boolean;
-    minDate?: Dayjs;
-    disablePast?: boolean;
-    [key: string]: unknown;
-}
-declare const AppDatePicker: ({ name, label, required, disablePast, ...otherProps }: Props$e) => React__default.JSX.Element;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether to show the calendar icon */
+    showIcon?: boolean;
+    /** Format for the displayed date */
+    format?: string;
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the form control */
+    formControlSx?: SxProps<Theme>;
+    /** Custom styles for the text field */
+    textFieldSx?: SxProps<Theme>;
+    /** Custom styles for the label */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the input */
+    inputSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Custom styles for the calendar icon */
+    iconSx?: SxProps<Theme>;
+    /** Callback when the value changes */
+    onChange?: (value: Dayjs | null, context: PickerChangeHandlerContext) => void;
+    /** Callback when the field is blurred */
+    onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+} & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppSelectOptions$4 {
     label: string;
     value: string | number;
 }
-interface Props$d extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+interface Props$8 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
     name: string;
     label?: string;
     placeholder?: string;
     options: AppSelectOptions$4[];
     disabled?: boolean;
+    sx?: SxProps<Theme>;
+    formControlSx?: SxProps<Theme>;
+    textFieldSx?: SxProps<Theme>;
+    listboxSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
 }
-declare function AppAutoCompleter({ placeholder, name, label, options, disabled }: Props$d): React.JSX.Element;
+declare function AppAutoCompleter({ placeholder, name, label, options, disabled, sx, formControlSx, textFieldSx, listboxSx, errorSx }: Props$8): React.JSX.Element;
 
-interface Props$c {
+interface AppDateAndTimePickerProps {
+    /** Field name for formik */
     name: string;
+    /** Label for the date and time picker */
     label?: string;
+    /** Variant of the input field */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /** Placeholder text */
     placeholder?: string;
+    /** Whether the field is required */
     required?: boolean;
-    [key: string]: unknown;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Minimum selectable date */
+    minDate?: Date | Dayjs | null;
+    /** Maximum selectable date */
+    maxDate?: Date | Dayjs | null;
+    /** Format string for the displayed date and time */
+    format?: string;
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the form control */
+    formControlSx?: SxProps<Theme>;
+    /** Custom styles for the text field */
+    textFieldSx?: SxProps<Theme>;
+    /** Custom styles for the label */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the input */
+    inputSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Custom styles for the helper text */
+    helperTextSx?: SxProps<Theme>;
+    /** Whether to show the helper text when no error */
+    showHelperText?: boolean;
+    /** Custom helper text to display */
+    helperText?: string;
+    /** Callback when the value changes */
+    onChange?: (value: Dayjs | null) => void;
+    /** Callback when the field is blurred */
+    onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+    /** Additional props to pass to the DateTimePicker */
+    [key: string]: any;
 }
-declare const AppDateAndTimePicker: ({ name, label, required, ...otherProps }: Props$c) => React__default.JSX.Element;
+declare const AppDateAndTimePicker: React__default.ForwardRefExoticComponent<Omit<AppDateAndTimePickerProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-interface Props$b {
+interface Props$7 {
     name: string;
     alwaysShow?: boolean;
+    sx?: SxProps<Theme>;
+    containerSx?: SxProps<Theme>;
+    textSx?: SxProps<Theme>;
 }
-declare function AppFormErrorMessage({ name, alwaysShow }: Props$b): React.JSX.Element | null;
+declare function AppFormErrorMessage({ name, alwaysShow, sx, containerSx, textSx }: Props$7): React.JSX.Element | null;
 
 interface AppTextAreaProps {
+    /** Field name for formik */
     name: string;
-    label: string;
+    /** Label for the textarea */
+    label?: string;
+    /** Variant of the input field */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /** Placeholder text */
+    placeholder?: string;
+    /** Number of visible text lines */
+    rows?: number;
+    /** Maximum number of characters */
+    maxLength?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Whether to show character counter */
+    showCount?: boolean;
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the TextField component */
+    textFieldSx?: SxProps<Theme>;
+    /** Custom styles for the label */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the input */
+    inputSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Custom styles for the character counter */
+    counterSx?: SxProps<Theme>;
+    /** Callback when the value changes */
+    onChange?: (value: string) => void;
+    /** Callback when the field is focused */
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /** Callback when the field is blurred */
+    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /** Additional props for the TextField component */
+    [key: string]: any;
 }
-declare function AppTextArea({ name, label }: AppTextAreaProps): React.JSX.Element;
+declare const AppTextArea: React$1.ForwardRefExoticComponent<Omit<AppTextAreaProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-interface Props$a extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+interface Props$6 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
     name: string;
     freeSolo?: boolean;
     multiple?: boolean;
@@ -61,24 +174,44 @@ interface Props$a extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChan
     placeholder?: string;
     options: string[];
     disabled?: boolean;
+    sx?: SxProps<Theme>;
+    formControlSx?: SxProps<Theme>;
+    textFieldSx?: SxProps<Theme>;
+    chipSx?: SxProps<Theme>;
+    listboxSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
+    chipContainerSx?: SxProps<Theme>;
+    inputSx?: SxProps<Theme>;
 }
-declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, }: Props$a): React.JSX.Element;
+declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, sx, formControlSx, textFieldSx, chipSx, listboxSx, errorSx, chipContainerSx, inputSx, }: Props$6): React.JSX.Element;
 
 interface AppSwitchInputProps {
     name: string;
     label?: string;
     className?: string;
-    style?: React__default.CSSProperties;
-    inputStyle?: React__default.CSSProperties;
+    sx?: SxProps<Theme>;
+    containerSx?: SxProps<Theme>;
+    switchSx?: SxProps<Theme>;
+    labelSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+    disabled?: boolean;
     [key: string]: unknown;
 }
-declare function AppSwitchInput({ name, label, className, style, inputStyle, ...otherProps }: AppSwitchInputProps): React__default.JSX.Element;
+declare function AppSwitchInput({ name, label, className, sx, containerSx, switchSx, labelSx, errorSx, labelPlacement, disabled, ...otherProps }: AppSwitchInputProps): React__default.JSX.Element;
 
 interface AppSwitchProps {
     name: string;
     label: string;
+    sx?: SxProps<Theme>;
+    containerSx?: SxProps<Theme>;
+    switchSx?: SxProps<Theme>;
+    labelSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+    disabled?: boolean;
 }
-declare function AppSwitch({ name, label }: AppSwitchProps): React.JSX.Element;
+declare function AppSwitch({ name, label, sx, containerSx, switchSx, labelSx, errorSx, labelPlacement, disabled, ...otherProps }: AppSwitchProps): React.JSX.Element;
 
 interface FormProps<T> extends FormikConfig<T> {
     children?: ((props: FormikProps<T>) => ReactNode) | ReactNode;
@@ -86,93 +219,445 @@ interface FormProps<T> extends FormikConfig<T> {
 }
 declare const Form: <T extends FormikValues>({ children, className, ...props }: FormProps<T>) => ReactElement;
 
-interface Props$9 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+interface Props$5 extends Omit<SelectProps$1, 'name' | 'label' | 'value' | 'onChange' | 'variant'> {
     name: string;
     freeSolo?: boolean;
     label?: string;
     placeholder?: string;
     options: string[];
+    /** Variant of the input field */
+    variant?: 'outlined' | 'filled' | 'standard';
+    sx?: SxProps<Theme$1>;
+    formControlSx?: SxProps<Theme$1>;
+    textFieldSx?: SxProps<Theme$1>;
+    chipSx?: SxProps<Theme$1>;
+    errorSx?: SxProps<Theme$1>;
 }
-declare function AppAutoComplete({ placeholder, name, label, options }: Props$9): React.JSX.Element;
+declare function AppAutoComplete({ placeholder, name, variant, label, options, sx, formControlSx, textFieldSx, chipSx, errorSx }: Props$5): React.JSX.Element;
 
-interface Props$8 {
-    option: {
-        label: string;
-        name: string;
-    }[];
+interface CheckboxOption {
+    label: string;
     name: string;
+    disabled?: boolean;
 }
-declare const CheckboxField: React__default.FC<Props$8>;
+interface Props$4 {
+    /** Array of checkbox options with label and value */
+    option: CheckboxOption[];
+    /** Field name for formik */
+    name: string;
+    /** Label for the checkbox group */
+    label?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the checkbox group is disabled */
+    disabled?: boolean;
+    /** Whether the checkbox group is in a row */
+    row?: boolean;
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the checkbox component */
+    checkboxSx?: SxProps<Theme>;
+    /** Custom styles for the label */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Custom styles for the checkbox container */
+    containerSx?: SxProps<Theme>;
+    /** Custom styles for the checkbox icon */
+    iconSx?: SxProps<Theme>;
+    /** Custom styles for the checked state */
+    checkedSx?: SxProps<Theme>;
+}
+declare const AppCheckBox: ({ name, option, label, required, disabled, row, sx, checkboxSx, labelSx, errorSx, containerSx, iconSx, checkedSx, ...rest }: Props$4) => react_jsx_runtime.JSX.Element;
 
-interface Props$7 extends StandardTextFieldProps {
+interface Props$3 extends Omit<StandardTextFieldProps, 'variant'> {
     name: string;
     label: ReactNode;
     tagUser?: string;
     hasReply?: boolean;
     required?: boolean;
+    variant?: 'outlined' | 'filled' | 'standard';
 }
-declare function AppInputField({ name, label, type, InputProps, required, ...otherProps }: Props$7): React__default.JSX.Element;
+declare function AppInputField({ name, label, type, InputProps, required, variant, ...otherProps }: Props$3): React__default.JSX.Element;
 
 interface AppSelectOptions$3 {
+    /** The label to display for this option */
     label: string;
+    /** The value to be used when this option is selected */
     value: string | number;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+    /** Custom styles for this specific menu item */
+    sx?: SxProps<Theme>;
+    /** Custom styles for this specific menu item text */
+    textSx?: SxProps<Theme>;
 }
-interface Props$6 extends Omit<SelectProps<(string | number)[]>, 'name' | 'label' | 'value' | 'onChange'> {
+interface AppMultiSelectorProps extends Omit<SelectProps<(string | number)[]>, "name" | "label" | "value" | "onChange"> {
+    /** Field name for formik */
     name: string;
-    label: string;
+    /** Label for the multi-selector */
+    label?: string;
+    /** Whether multiple selection is allowed */
     multiple?: boolean;
+    /** Array of select options */
     options: AppSelectOptions$3[];
+    /** Whether the field is required */
     required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Maximum number of items that can be selected */
+    maxSelections?: number;
+    /** Whether to show the selected count in the label */
+    showSelectedCount?: boolean;
+    /** Whether to show the helper text when no error */
+    showHelperText?: boolean;
+    /** Variant of the input field */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /** Custom helper text to display */
+    helperText?: string;
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the form control */
+    formControlSx?: SxProps<Theme>;
+    /** Custom styles for the select component */
+    selectSx?: SxProps<Theme>;
+    /** Custom styles for the label */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the chip components */
+    chipSx?: SxProps<Theme>;
+    /** Custom styles for the checkbox components */
+    checkboxSx?: SxProps<Theme>;
+    /** Custom styles for the menu items */
+    menuItemSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Custom styles for the helper text */
+    helperTextSx?: SxProps<Theme>;
+    /** Custom styles for the select icon */
+    iconSx?: SxProps<Theme>;
+    /** Callback when the value changes */
+    onChange?: (event: SelectChangeEvent<(string | number)[]>, child: ReactNode) => void;
+    /** Callback when the menu opens */
+    onOpen?: (event: React.SyntheticEvent) => void;
+    /** Callback when the menu closes */
+    onClose?: (event: React.SyntheticEvent) => void;
+    /** Custom render function for the selected value */
+    renderValue?: (selected: Array<string | number>) => ReactNode;
+    /** Custom render function for menu items */
+    renderMenuItem?: (option: AppSelectOptions$3, isSelected: boolean) => ReactNode;
 }
-declare function AppMultiSelector({ multiple, name, label, options, required, ...otherProps }: Props$6): React.JSX.Element;
+declare const AppMultiSelector: React$1.ForwardRefExoticComponent<Omit<AppMultiSelectorProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 interface AppPhoneNoInputProps {
     name: string;
     label?: string;
     required?: boolean;
+    sx?: SxProps<Theme>;
+    containerSx?: SxProps<Theme>;
+    labelSx?: SxProps<Theme>;
+    inputSx?: React__default.CSSProperties;
+    errorSx?: SxProps<Theme>;
     [key: string]: unknown;
 }
 declare const AppPhoneNoInput: React__default.FC<AppPhoneNoInputProps>;
 
-type Props$5 = RadioGroupProps & {
+interface RadioOption {
+    /** The label to be shown next to the radio button */
+    label: string;
+    /** The value to be used when this option is selected */
+    value: string | number;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+    /** Custom styles for this specific radio option */
+    sx?: SxProps<Theme>;
+    /** Custom styles for this specific radio button */
+    radioSx?: SxProps<Theme>;
+    /** Custom styles for this specific label */
+    labelSx?: SxProps<Theme>;
+}
+interface AppRadioGroupProps extends Omit<RadioGroupProps, 'onChange' | 'onBlur' | 'value'> {
+    /** Field name for formik */
     name: string;
-    options: {
-        label: string;
-        value: string | number;
-    }[];
-};
-declare function AppRadioGroup({ name, options, ...rest }: Props$5): React.JSX.Element;
+    /** Array of radio options */
+    options: RadioOption[];
+    /** Label for the radio group */
+    label?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the radio group is disabled */
+    disabled?: boolean;
+    /** Whether to show the radio group in a row */
+    row?: boolean;
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the form control */
+    formControlSx?: SxProps<Theme>;
+    /** Custom styles for the radio group */
+    radioGroupSx?: SxProps<Theme>;
+    /** Custom styles for the form label */
+    formLabelSx?: SxProps<Theme>;
+    /** Custom styles for the radio buttons */
+    radioSx?: SxProps<Theme>;
+    /** Custom styles for the radio labels */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Callback when the value changes */
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>, value: string) => void;
+    /** Callback when the field is blurred */
+    onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+}
+declare const AppRadioGroup: React__default.ForwardRefExoticComponent<Omit<AppRadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppRatingProps {
+    /** Field name for formik */
     name: string;
-    label: string;
+    /** Label for the rating */
+    label?: string;
+    /** Whether the rating is required */
+    required?: boolean;
+    /** Whether the rating is read-only */
+    readOnly?: boolean;
+    /** Whether the rating is disabled */
+    disabled?: boolean;
+    /** Maximum rating value */
+    max?: number;
+    /** Precision of the rating */
+    precision?: number;
+    /** Size of the rating icons */
+    size?: 'small' | 'medium' | 'large' | number;
+    /** Custom icon for empty rating */
+    emptyIcon?: ReactNode;
+    /** Custom icon for filled rating */
+    icon?: ReactNode;
+    /** Custom icon component */
+    IconContainerComponent?: ElementType<{
+        value: number;
+    }>;
+    /** Custom label for the rating value */
+    getLabelText?: (value: number) => string;
+    /** Callback when the rating changes */
+    onChange?: (event: React.SyntheticEvent, value: number | null) => void;
+    /** Callback when the rating is hovered */
+    onChangeActive?: (event: React.SyntheticEvent, value: number) => void;
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the label */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the rating component */
+    ratingSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Custom styles for the helper text */
+    helperTextSx?: SxProps<Theme>;
+    /** Whether to show the helper text when no error */
+    showHelperText?: boolean;
+    /** Custom helper text to display */
+    helperText?: string;
+    /** Custom component for the label */
+    labelComponent?: ElementType;
+    /** Custom component for the rating */
+    ratingComponent?: ElementType;
+    /** Custom component for the error */
+    errorComponent?: ElementType;
+    /** Custom component for the helper text */
+    helperTextComponent?: ElementType;
+    /** Custom props for the label component */
+    labelProps?: Record<string, any>;
+    /** Custom props for the rating component */
+    ratingProps?: Record<string, any>;
+    /** Custom props for the error component */
+    errorProps?: Record<string, any>;
+    /** Custom props for the helper text component */
+    helperTextProps?: Record<string, any>;
+    /** Custom class name for the root container */
+    className?: string;
+    /** Custom class name for the label */
+    labelClassName?: string;
+    /** Custom class name for the rating */
+    ratingClassName?: string;
+    /** Custom class name for the error */
+    errorClassName?: string;
+    /** Custom class name for the helper text */
+    helperTextClassName?: string;
 }
-declare function AppRating({ name, label }: AppRatingProps): React.JSX.Element;
+declare const AppRating: React$1.ForwardRefExoticComponent<AppRatingProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface Props$4 {
+interface Props$2 {
     name: string;
     label?: string;
     placeholder?: string;
     required?: boolean;
+    /** Variant of the input field */
+    variant?: 'outlined' | 'filled' | 'standard';
+    sx?: SxProps<Theme>;
+    editorSx?: SxProps<Theme>;
+    toolbarSx?: SxProps<Theme>;
+    contentSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
+    labelSx?: SxProps<Theme>;
+    buttonSx?: SxProps<Theme>;
+    activeButtonSx?: SxProps<Theme>;
+    dialogSx?: SxProps<Theme>;
 }
-declare const AppRichTextEditor: ({ name, label, required, placeholder }: Props$4) => react_jsx_runtime.JSX.Element | null;
+declare const AppRichTextEditor: ({ name, label, required, variant, placeholder, sx, editorSx, toolbarSx, contentSx, errorSx, labelSx, buttonSx, activeButtonSx, dialogSx, }: Props$2) => react_jsx_runtime.JSX.Element | null;
 
 interface AppSelectOptions$2 {
+    /** Display text for the option */
     label: string;
-    value: number;
+    /** Unique value for the option */
+    value: number | string;
+    /** Additional searchable text */
     searchAbleValue1?: string;
+    /** Additional searchable text */
     searchAbleValue2?: string;
+    /** Additional searchable text */
     searchAbleValue3?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Custom styles for the option */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the option text */
+    textSx?: SxProps<Theme>;
+    /** Custom icon for the option */
+    icon?: ReactNode;
+    /** Custom component to render the option */
+    component?: ElementType;
+    /** Custom props for the option component */
+    componentProps?: Record<string, any>;
 }
-interface Props$3 {
+type CustomAutocompleteProps = Omit<AutocompleteProps<AppSelectOptions$2, boolean, boolean, boolean>, "renderInput" | "options" | "renderTags" | "onChange" | "value" | "multiple">;
+interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
+    /** Field name for formik */
     name: string;
-    label: string;
+    /** Label for the input */
+    label?: string;
+    /** Whether multiple selections are allowed */
     multiple?: boolean;
+    /** Available options */
     options: AppSelectOptions$2[];
+    /** Callback when search query changes */
     setSearchQuery: React__default.Dispatch<SetStateAction<string>>;
+    /** Whether the field is required */
     required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Whether to show the helper text when no error */
+    showHelperText?: boolean;
+    /** Custom helper text */
+    helperText?: string;
+    /** Maximum number of selectable items */
+    maxSelections?: number;
+    /** Whether to show the selected count */
+    showSelectedCount?: boolean;
+    /** Variant of the input field */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the form control */
+    formControlSx?: SxProps<Theme>;
+    /** Custom styles for the label */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the input */
+    inputSx?: SxProps<Theme>;
+    /** Custom styles for the text field */
+    textFieldSx?: SxProps<Theme>;
+    /** Custom styles for the autocomplete */
+    autocompleteSx?: SxProps<Theme>;
+    /** Custom styles for the listbox */
+    listboxSx?: SxProps<Theme>;
+    /** Custom styles for the option */
+    optionSx?: SxProps<Theme>;
+    /** Custom styles for the chip */
+    chipSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Custom styles for the helper text */
+    helperTextSx?: SxProps<Theme>;
+    /** Custom styles for the selected count */
+    selectedCountSx?: SxProps<Theme>;
+    /** Custom render function for the input */
+    renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
+    /** Custom render function for the option */
+    renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement>, option: AppSelectOptions$2, state: AutocompleteRenderOptionState, ownerState: any) => ReactNode;
+    /** Custom render function for the selected value */
+    renderTags?: (value: AppSelectOptions$2[], getTagProps: (params: {
+        index: number;
+    }) => {
+        key: number | string;
+    }, ownerState: any) => ReactNode;
+    /** Custom render function for the group */
+    renderGroup?: (params: AutocompleteRenderGroupParams) => ReactNode;
+    /** Custom component for the label */
+    labelComponent?: ElementType;
+    /** Custom component for the input */
+    inputComponent?: ElementType;
+    /** Custom component for the error */
+    errorComponent?: ElementType;
+    /** Custom component for the helper text */
+    helperTextComponent?: ElementType;
+    /** Custom props for the label component */
+    labelProps?: Record<string, any>;
+    /** Custom props for the input component */
+    inputProps?: Record<string, any>;
+    /** Custom props for the text field component */
+    textFieldProps?: Record<string, any>;
+    /** Custom props for the autocomplete component */
+    autocompleteProps?: Record<string, any>;
+    /** Custom props for the checkbox component */
+    checkboxProps?: CheckboxProps;
+    /** Custom props for the chip component */
+    chipProps?: ChipProps;
+    /** Custom props for the error component */
+    errorProps?: Record<string, any>;
+    /** Custom props for the helper text component */
+    helperTextProps?: Record<string, any>;
+    /** Custom class name for the root container */
+    className?: string;
+    /** Custom class name for the form control */
+    formControlClassName?: string;
+    /** Custom class name for the label */
+    labelClassName?: string;
+    /** Custom class name for the input */
+    inputClassName?: string;
+    /** Custom class name for the text field */
+    textFieldClassName?: string;
+    /** Custom class name for the autocomplete */
+    autocompleteClassName?: string;
+    /** Custom class name for the listbox */
+    listboxClassName?: string;
+    /** Custom class name for the option */
+    optionClassName?: string;
+    /** Custom class name for the chip */
+    chipClassName?: string;
+    /** Custom class name for the error */
+    errorClassName?: string;
+    /** Custom class name for the helper text */
+    helperTextClassName?: string;
+    /** Callback when the selection changes */
+    onChange?: (event: React__default.SyntheticEvent, value: AppSelectOptions$2[], reason: string) => void;
+    /** Callback when the input value changes */
+    onInputChange?: (event: React__default.SyntheticEvent, value: string, reason: string) => void;
+    /** Callback when the dropdown is opened */
+    onOpen?: (event: React__default.SyntheticEvent) => void;
+    /** Callback when the dropdown is closed */
+    onClose?: (event: React__default.SyntheticEvent, reason: string) => void;
+    /** Callback when the blur event occurs */
+    onBlur?: (event: React__default.FocusEvent) => void;
+    /** Callback when the focus event occurs */
+    onFocus?: (event: React__default.FocusEvent) => void;
+    /** Callback when the clear button is clicked */
+    onClear?: () => void;
+    /** Callback when the maximum number of selections is reached */
+    onMaxSelectionsReached?: (maxSelections: number) => void;
+    /** Callback when a selection is removed */
+    onRemove?: (value: AppSelectOptions$2) => void;
+    /** Callback when a selection is added */
+    onAdd?: (value: AppSelectOptions$2) => void;
 }
-declare function AppSearchableMultiSelector({ multiple, name, label, options, required, setSearchQuery, }: Props$3): React__default.JSX.Element;
+declare const AppSearchableMultiSelector: React__default.ForwardRefExoticComponent<Omit<AppSearchableMultiSelectorProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppSelectOptions$1 {
     label: string;
@@ -181,7 +666,7 @@ interface AppSelectOptions$1 {
     searchAbleValue2?: string;
     searchAbleValue3?: string;
 }
-interface Props$2 extends Omit<AutocompleteProps<AppSelectOptions$1, false, false, false>, 'options' | 'renderInput' | 'value' | 'onChange'> {
+interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions$1, false, false, false>, 'options' | 'renderInput' | 'value' | 'onChange'> {
     name: string;
     label: string;
     options: AppSelectOptions$1[];
@@ -189,28 +674,115 @@ interface Props$2 extends Omit<AutocompleteProps<AppSelectOptions$1, false, fals
     required?: boolean;
     placeholder?: string;
     isResetRequired?: boolean;
+    variant?: 'outlined' | 'filled' | 'standard';
 }
-declare function AppSearchableSelectInput({ name, label, required, options, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$2): React__default.JSX.Element;
+declare function AppSearchableSelectInput({ name, label, options, required, variant, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$1): React__default.JSX.Element;
 
 interface AppSelectOptions {
+    /** The label to display for this option */
     label: string;
+    /** The value to be used when this option is selected */
     value: string | number;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+    /** Custom styles for this specific menu item */
+    sx?: SxProps<Theme>;
+    /** Custom styles for this specific menu item text */
+    textSx?: SxProps<Theme>;
+    /** Custom icon for the option */
+    icon?: ReactNode;
+    /** Custom component to render the option */
+    component?: ElementType;
+    /** Custom props for the option component */
+    componentProps?: Record<string, any>;
 }
-interface Props$1 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+interface AppSelectInputProps extends Omit<SelectProps, "name" | "label" | "value" | "onChange" | "sx"> {
+    /** Field name for formik */
     name: string;
-    label: string;
+    /** Label for the select */
+    label?: string;
+    /** Array of select options */
     options: AppSelectOptions[];
+    /** Whether the field is required */
     required?: boolean;
-    fullWidth?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Variant of the select input */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /** Whether to show a 'None' option */
+    showNoneOption?: boolean;
+    /** Text to display for the 'None' option */
+    noneOptionText?: string;
+    /** Whether to show the helper text when no error */
+    showHelperText?: boolean;
+    /** Custom helper text to display */
+    helperText?: string;
+    /** Custom styles for the root container */
+    sx?: SxProps<Theme>;
+    /** Custom styles for the form control */
+    formControlSx?: SxProps<Theme>;
+    /** Custom styles for the select component */
+    selectSx?: SxProps<Theme>;
+    /** Custom styles for the input */
+    inputSx?: SxProps<Theme>;
+    /** Custom styles for the label */
+    labelSx?: SxProps<Theme>;
+    /** Custom styles for the menu paper */
+    menuPaperSx?: SxProps<Theme>;
+    /** Custom styles for all menu items */
+    menuItemSx?: SxProps<Theme>;
+    /** Custom styles for the selected menu item */
+    selectedMenuItemSx?: SxProps<Theme>;
+    /** Custom styles for the error message */
+    errorSx?: SxProps<Theme>;
+    /** Custom styles for the helper text */
+    helperTextSx?: SxProps<Theme>;
+    /** Custom styles for the select icon */
+    iconSx?: SxProps<Theme>;
+    /** Custom component for the label */
+    labelComponent?: ElementType;
+    /** Custom component for the error message */
+    errorComponent?: ElementType;
+    /** Custom component for the helper text */
+    helperTextComponent?: ElementType;
+    /** Callback when the value changes */
+    onChange?: (event: SelectChangeEvent$1<unknown>, child: ReactNode) => void;
+    /** Callback when the menu opens */
+    onOpen?: (event: React.SyntheticEvent) => void;
+    /** Callback when the menu closes */
+    onClose?: (event: React.SyntheticEvent) => void;
+    /** Callback when the field is blurred */
+    onBlur?: (event: React.FocusEvent) => void;
+    /** Custom render function for the selected value */
+    renderValue?: (value: unknown) => ReactNode;
+    /** Custom render function for menu items */
+    renderMenuItem?: (option: AppSelectOptions, index: number) => ReactNode;
+    /** Custom props for the MenuProps */
+    MenuProps?: any;
+    /** Custom props for the input component */
+    inputProps?: any;
 }
-declare function AppSelectInput({ name, label, fullWidth, required, options, ...otherProps }: Props$1): React.JSX.Element;
+declare const AppSelectInput: React$1.ForwardRefExoticComponent<Omit<AppSelectInputProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-interface AppSimpleUploadFilePropTypes {
+interface AppSimpleUploadFileProps {
     name: string;
     label?: string;
+    accept?: string;
     multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    maxFiles?: number;
+    maxSizeInBytes?: number;
+    sx?: SxProps<Theme>;
+    buttonSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
+    onAdd?: (file: File) => void;
+    onRemove?: (file: File) => void;
+    onError?: (error: string) => void;
 }
-declare const AppSimpleUploadFile: ({ name, multiple }: AppSimpleUploadFilePropTypes) => React.JSX.Element;
+declare const AppSimpleUploadFile: React__default.FC<AppSimpleUploadFileProps>;
 
 interface FileItem extends File {
     id?: number | string;
@@ -227,7 +799,7 @@ interface CustomFile extends File {
 }
 interface UploadProps extends DropzoneOptions {
     error?: boolean;
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme$1>;
     thumbnail?: boolean;
     isClickable?: boolean;
     placeholder?: React.ReactNode;
@@ -250,15 +822,32 @@ interface UploadProps extends DropzoneOptions {
 interface AppUploadFilePropTypes extends UploadProps {
     name: string;
     label?: string;
+    sx?: SxProps<Theme>;
+    uploadSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
+    helperTextSx?: SxProps<Theme>;
+    previewSx?: SxProps<Theme>;
+    dropZoneSx?: SxProps<Theme>;
 }
-declare const AppUploadFile: ({ name, ...rest }: AppUploadFilePropTypes) => react_jsx_runtime.JSX.Element;
+declare const AppUploadFile: ({ name, sx, uploadSx, errorSx, helperTextSx, previewSx, dropZoneSx, ...rest }: AppUploadFilePropTypes) => react_jsx_runtime.JSX.Element;
 
 interface SubmitButtonProps {
     children: React__default.ReactNode;
     loading?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    variant?: 'text' | 'outlined' | 'contained';
+    color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    size?: 'small' | 'medium' | 'large';
+    startIcon?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+    sx?: SxProps<Theme>;
+    buttonSx?: SxProps<Theme>;
+    loadingSx?: SxProps<Theme>;
+    disabledSx?: SxProps<Theme>;
     [key: string]: any;
 }
-declare const SubmitButton: ({ children, loading, disabled, ...rest }: SubmitButtonProps) => React__default.JSX.Element;
+declare const SubmitButton: ({ children, loading, disabled, fullWidth, variant, color, size, startIcon, endIcon, sx, buttonSx, loadingSx, disabledSx, ...rest }: SubmitButtonProps) => React__default.JSX.Element;
 
 type IconifyProps = IconifyIcon | string;
 
@@ -267,4 +856,4 @@ interface Props extends BoxProps {
 }
 declare const Iconify: React$1.ForwardRefExoticComponent<Omit<Props, "ref"> & React$1.RefAttributes<SVGElement>>;
 
-export { AppAutoComplete, AppAutoCompleter, CheckboxField as AppCheckBox, AppDateAndTimePicker, AppDatePicker, AppFormErrorMessage, AppInputField, AppMultiSelector, AppPhoneNoInput, AppRadioGroup, AppRating, AppRichTextEditor, AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput, AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile, Form, Iconify, IconifyProps, SubmitButton, UploadProps };
+export { AppAutoComplete, AppAutoCompleter, AppCheckBox, AppDateAndTimePicker, AppDatePicker, AppFormErrorMessage, AppInputField, AppMultiSelector, AppPhoneNoInput, AppRadioGroup, AppRating, AppRichTextEditor, AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput, AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile, Form, Iconify, IconifyProps, SubmitButton, UploadProps };