formik-form-components 0.2.29 → 0.3.1

package/dist/index.d.ts

@@ -1,104 +1,52 @@
 import * as React$1 from 'react';
-import React__default, { ReactElement, ReactNode, SyntheticEvent, ElementType } from 'react';
+import React__default, { TextareaHTMLAttributes, ReactElement, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
 import { FormikValues, FormikConfig, FormikProps } from 'formik';
-import { SxProps, Theme, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, TextFieldProps, RadioGroupProps, BoxProps } from '@mui/material';
-import { Theme as Theme$1 } from '@mui/material/styles';
-import { SelectProps } from '@mui/material/Select';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Dayjs } from 'dayjs';
-import { DropzoneOptions } from 'react-dropzone';
+import { Accept } from 'react-dropzone';
 import { IconifyIcon } from '@iconify/react';
 
-type AppDatePickerProps = {
+declare const AppDatePicker: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value"> & {
     name: string;
     label?: string;
-    disabled?: boolean;
-    format?: string;
-    sx?: SxProps<Theme>;
-    textFieldSx?: SxProps<Theme>;
-};
-declare const AppDatePicker: React__default.ForwardRefExoticComponent<AppDatePickerProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface AppSelectOptions {
-    label: string;
-    value: string | number;
-}
-interface Props$7 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    options: AppSelectOptions[];
-    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, sx, formControlSx, textFieldSx, listboxSx, errorSx }: Props$7): React.JSX.Element;
+    required?: boolean;
+    helperText?: string;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    className?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    containerClassName?: string;
+    onValueChange?: (value: Dayjs | null) => void;
+} & React__default.RefAttributes<HTMLInputElement>>;
 
-interface AppDateAndTimePickerProps {
-    /** Field name for formik */
+declare const AppDateAndTimePicker: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value"> & {
     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;
-    /** 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: React__default.ForwardRefExoticComponent<Omit<AppDateAndTimePickerProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    className?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    containerClassName?: string;
+    onValueChange?: (value: Dayjs | null) => void;
+} & React__default.RefAttributes<HTMLInputElement>>;
 
-interface Props$6 {
+interface Props$2 {
     name: string;
     alwaysShow?: boolean;
-    sx?: SxProps<Theme>;
-    containerSx?: SxProps<Theme>;
-    textSx?: SxProps<Theme>;
+    className?: string;
+    containerClassName?: string;
 }
-declare function AppFormErrorMessage({ name, alwaysShow, sx, containerSx, textSx }: Props$6): React.JSX.Element | null;
+declare function AppFormErrorMessage({ name, alwaysShow, className, containerClassName, }: Props$2): React.JSX.Element | null;
 
-interface AppTextAreaProps {
+interface AppTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name"> {
     /** Field name for formik */
     name: 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 */
@@ -107,81 +55,67 @@ interface AppTextAreaProps {
     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>;
+    /** Helper text */
+    helperText?: string;
+    /** Custom class names */
+    className?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    counterClassName?: string;
+    containerClassName?: string;
     /** 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;
+    onValueChange?: (value: string) => void;
 }
-declare const AppTextArea: React$1.ForwardRefExoticComponent<Omit<AppTextAreaProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AppTextArea: React$1.ForwardRefExoticComponent<AppTextAreaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
-interface Props$5 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+interface AppTagsCreatorProps {
     name: string;
-    freeSolo?: boolean;
-    multiple?: boolean;
     label?: string;
     placeholder?: string;
-    options: 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>;
+    required?: boolean;
+    helperText?: string;
+    className?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    tagClassName?: string;
+    errorClassName?: string;
 }
-declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, sx, formControlSx, textFieldSx, chipSx, listboxSx, errorSx, chipContainerSx, inputSx, }: Props$5): React.JSX.Element;
+declare function AppTagsCreator({ placeholder, name, label, options, disabled, required, helperText, className, containerClassName, labelClassName, inputClassName, tagClassName, errorClassName, }: AppTagsCreatorProps): React__default.JSX.Element;
 
-interface AppSwitchInputProps {
+interface AppSwitchInputProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "name" | "onClick"> {
     name: string;
     label?: string;
+    helperText?: string;
     className?: string;
-    sx?: SxProps<Theme>;
-    containerSx?: SxProps<Theme>;
-    switchSx?: SxProps<Theme>;
-    labelSx?: SxProps<Theme>;
-    errorSx?: SxProps<Theme>;
-    labelPlacement?: "start" | "end" | "top" | "bottom";
+    containerClassName?: string;
+    switchClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    labelPlacement?: "start" | "end";
     disabled?: boolean;
-    [key: string]: unknown;
+    onValueChange?: (value: boolean) => void;
 }
-declare function AppSwitchInput({ name, label, className, sx, containerSx, switchSx, labelSx, errorSx, labelPlacement, disabled, ...otherProps }: AppSwitchInputProps): React__default.JSX.Element;
+declare function AppSwitchInput({ name, label, helperText, className, containerClassName, switchClassName, labelClassName, errorClassName, labelPlacement, disabled, onValueChange, ...otherProps }: AppSwitchInputProps): React__default.JSX.Element;
 
-interface AppSwitchProps {
+interface AppSwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "name" | "onClick"> {
     name: string;
     label: string;
-    sx?: SxProps<Theme>;
-    containerSx?: SxProps<Theme>;
-    switchSx?: SxProps<Theme>;
-    labelSx?: SxProps<Theme>;
-    errorSx?: SxProps<Theme>;
-    labelPlacement?: "start" | "end" | "top" | "bottom";
+    helperText?: string;
+    className?: string;
+    containerClassName?: string;
+    switchClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    labelPlacement?: "start" | "end";
     disabled?: boolean;
+    onValueChange?: (value: boolean) => void;
 }
-declare function AppSwitch({ name, label, sx, containerSx, switchSx, labelSx, errorSx, labelPlacement, disabled, ...otherProps }: AppSwitchProps): React.JSX.Element;
+declare function AppSwitch({ name, label, helperText, className, containerClassName, switchClassName, labelClassName, errorClassName, labelPlacement, disabled, onValueChange, ...otherProps }: AppSwitchProps): React.JSX.Element;
 
 interface FormProps<T> extends FormikConfig<T> {
     children?: ((props: FormikProps<T>) => ReactNode) | ReactNode;
@@ -189,79 +123,91 @@ interface FormProps<T> extends FormikConfig<T> {
 }
 declare const Form: <T extends FormikValues>({ children, className, ...props }: FormProps<T>) => ReactElement;
 
-interface Props$4 extends Omit<AutocompleteProps<string, true, boolean, false, 'div'>, 'renderInput' | 'onChange' | 'value' | 'multiple' | 'freeSolo'> {
+interface AppAutoCompleteProps {
     name: string;
+    label?: string;
+    placeholder?: string;
+    options?: string[];
+    required?: boolean;
+    disabled?: boolean;
     freeSolo?: boolean;
+    helperText?: string;
+    className?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    tagClassName?: string;
+    errorClassName?: string;
+}
+declare function AppAutoComplete({ placeholder, name, label, options, required, disabled, freeSolo, helperText, className, containerClassName, labelClassName, inputClassName, tagClassName, errorClassName, }: AppAutoCompleteProps): React__default.JSX.Element;
+
+interface SelectOption {
+    label: string;
+    value: string | number;
+}
+type OptionType = string | SelectOption;
+interface AppAutoCompleterProps {
+    name: string;
     label?: string;
     placeholder?: string;
-    options: string[];
-    value?: string[];
-    onChange?: (event: SyntheticEvent, value: string[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<string>) => void;
-    /** 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>;
+    options: OptionType[];
+    multiple?: boolean;
+    freeSolo?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    helperText?: string;
+    className?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    tagClassName?: string;
+    errorClassName?: string;
 }
-declare function AppAutoComplete({ placeholder, name, variant, label, options, value: propValue, onChange: propOnChange, sx, formControlSx, textFieldSx, chipSx, errorSx, }: Props$4): React.JSX.Element;
+declare function AppAutoCompleter({ name, label, placeholder, options, multiple, freeSolo, required, disabled, helperText, className, containerClassName, labelClassName, inputClassName, tagClassName, errorClassName, }: AppAutoCompleterProps): React__default.JSX.Element;
 
 interface CheckboxOption {
     label: string;
     name: string;
-    value: string | boolean | number;
+    value: string | number | boolean;
     disabled?: boolean;
 }
-interface Props$3 {
-    /** Array of checkbox options with label and value */
-    option: CheckboxOption[];
-    /** Field name for formik */
+interface AppCheckBoxProps {
     name: string;
-    /** Label for the checkbox group */
+    option: CheckboxOption[];
     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>;
+    className?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    containerClassName?: string;
+    checkboxClassName?: string;
+    itemClassName?: string;
+    checkboxProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "checked" | "onChange">;
 }
-declare const AppCheckBox: ({ name, option, label, required, disabled, row, sx, checkboxSx, labelSx, errorSx, containerSx, iconSx, checkedSx, ...rest }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const AppCheckBox: ({ name, option, label, required, disabled, row, className, labelClassName, errorClassName, containerClassName, checkboxClassName, itemClassName, checkboxProps, }: AppCheckBoxProps) => react_jsx_runtime.JSX.Element;
 
-interface Props$2 extends Omit<TextFieldProps, 'variant'> {
+interface CustomInputProps {
     name: string;
-    label: ReactNode;
-    tagUser?: string;
-    hasReply?: boolean;
+    label?: ReactNode;
     required?: boolean;
-    variant?: 'outlined' | 'filled' | 'standard';
+    helperText?: string;
+    className?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    containerClassName?: string;
 }
-declare function AppInputField({ name, label, type, InputProps, required, variant, ...otherProps }: Props$2): React__default.JSX.Element;
+type AppInputFieldProps = CustomInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "name">;
+declare function AppInputField({ name, label, type, required, helperText, className, labelClassName, errorClassName, containerClassName, ...otherProps }: AppInputFieldProps): React__default.JSX.Element;
 
 interface AppSelectOption$1 {
     label: string;
     value: string | number;
     disabled?: boolean;
-    sx?: SxProps<Theme>;
-    textSx?: SxProps<Theme>;
     icon?: ReactNode;
 }
-interface BaseMultiSelectProps {
+interface AppMultiSelectorProps {
     name: string;
     label?: string;
     options: AppSelectOption$1[];
@@ -270,29 +216,16 @@ interface BaseMultiSelectProps {
     maxSelections?: number;
     showSelectedCount?: boolean;
     helperText?: string;
-    variant?: "outlined" | "filled" | "standard";
     placeholder?: string;
-    sx?: SxProps<Theme>;
-    formControlSx?: SxProps<Theme>;
-    labelSx?: SxProps<Theme>;
-    chipSx?: SxProps<Theme>;
-    checkboxSx?: SxProps<Theme>;
+    className?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    tagClassName?: string;
+    errorClassName?: string;
+    dropdownClassName?: string;
     onChange?: (value: Array<string | number>) => void;
     onMaxSelectionsReached?: (maxSelections: number) => void;
 }
-interface AutocompleteMultiSelectProps extends BaseMultiSelectProps {
-    mode?: "autocomplete";
-    onSearchChange?: (query: string) => void;
-    searchDebounce?: number;
-    clearable?: boolean;
-}
-interface DropdownMultiSelectProps extends BaseMultiSelectProps {
-    mode: "dropdown";
-    onSearchChange?: never;
-    searchDebounce?: never;
-    clearable?: never;
-}
-type AppMultiSelectorProps = AutocompleteMultiSelectProps | DropdownMultiSelectProps;
 declare const AppMultiSelector: React__default.ForwardRefExoticComponent<AppMultiSelectorProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppPhoneNoInputProps {
@@ -301,63 +234,40 @@ interface AppPhoneNoInputProps {
     required?: boolean;
     defaultCountry?: string;
     placeholder?: string;
-    sx?: SxProps<Theme>;
-    containerSx?: SxProps<Theme>;
-    labelSx?: SxProps<Theme>;
-    inputSx?: React__default.CSSProperties;
-    errorSx?: SxProps<Theme>;
+    className?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    errorClassName?: string;
     international?: boolean;
     withCountryCallingCode?: boolean;
 }
 declare const AppPhoneNoInput: React__default.FC<AppPhoneNoInputProps>;
 
 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 */
+interface AppRadioGroupProps {
     name: string;
-    /** 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 */
+    helperText?: string;
+    className?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    containerClassName?: string;
+    radioClassName?: string;
+    itemClassName?: string;
     onChange?: (event: React__default.ChangeEvent<HTMLInputElement>, value: string) => void;
-    /** Callback when the field is blurred */
     onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+    radioProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "checked" | "onChange">;
 }
-declare const AppRadioGroup: React__default.ForwardRefExoticComponent<Omit<AppRadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const AppRadioGroup: React__default.ForwardRefExoticComponent<AppRadioGroupProps & React__default.RefAttributes<HTMLFieldSetElement>>;
 
 interface AppRatingProps {
     /** Field name for formik */
@@ -372,124 +282,60 @@ interface AppRatingProps {
     disabled?: boolean;
     /** Maximum rating value */
     max?: number;
-    /** Precision of the rating */
+    /** Precision of the rating (e.g., 0.5 for half stars) */
     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 */
+    size?: "small" | "medium" | "large";
+    /** Helper text */
     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 */
+    /** Callback when the rating changes */
+    onChange?: (value: number | null) => void;
+    /** Custom class names */
     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;
+    containerClassName?: string;
+    starsClassName?: string;
 }
 declare const AppRating: React$1.ForwardRefExoticComponent<AppRatingProps & React$1.RefAttributes<HTMLDivElement>>;
 
+type EditorButton = "bold" | "italic" | "underline" | "strike" | "bulletList" | "orderedList" | "alignLeft" | "alignCenter" | "alignRight" | "heading1" | "heading2" | "undo" | "redo" | "link";
 interface Props$1 {
     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>;
+    className?: string;
+    editorClassName?: string;
+    toolbarClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    showButtons?: EditorButton[];
 }
-declare const AppRichTextEditor: ({ name, label, required, variant, placeholder, sx, editorSx, toolbarSx, contentSx, errorSx, labelSx, buttonSx, activeButtonSx, dialogSx, }: Props$1) => react_jsx_runtime.JSX.Element | null;
+declare const AppRichTextEditor: React__default.FC<Props$1>;
 
 interface AppSelectOption {
     label: string;
     value: string | number;
     disabled?: boolean;
-    sx?: SxProps<Theme>;
-    textSx?: SxProps<Theme>;
     icon?: ReactNode;
 }
-interface BaseSelectProps {
+interface AppSelectInputProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "name"> {
     name: string;
     label?: string;
     options: AppSelectOption[];
     required?: boolean;
-    disabled?: boolean;
     showNoneOption?: boolean;
     noneOptionText?: string;
     helperText?: string;
-    variant?: "outlined" | "filled" | "standard";
     placeholder?: string;
-    sx?: SxProps<Theme>;
-    formControlSx?: SxProps<Theme>;
-    labelSx?: SxProps<Theme>;
-    onChange?: (value: string | number) => void;
-}
-interface AutocompleteSelectProps extends BaseSelectProps {
-    mode?: "autocomplete";
-    onSearchChange?: (query: string) => void;
-    searchDebounce?: number;
-    clearable?: boolean;
-}
-interface DropdownSelectProps extends BaseSelectProps {
-    mode: "dropdown";
-    onSearchChange?: never;
-    searchDebounce?: never;
-    clearable?: never;
+    className?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    containerClassName?: string;
+    onValueChange?: (value: string | number) => void;
 }
-type AppSelectInputProps = AutocompleteSelectProps | DropdownSelectProps;
-declare const AppSelectInput: React__default.ForwardRefExoticComponent<AppSelectInputProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const AppSelectInput: React__default.ForwardRefExoticComponent<AppSelectInputProps & React__default.RefAttributes<HTMLSelectElement>>;
 
 interface AppSimpleUploadFileProps {
     name: string;
@@ -500,79 +346,57 @@ interface AppSimpleUploadFileProps {
     required?: boolean;
     maxFiles?: number;
     maxSizeInBytes?: number;
-    sx?: SxProps<Theme>;
-    buttonSx?: SxProps<Theme>;
-    errorSx?: SxProps<Theme>;
+    helperText?: string;
+    className?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    buttonClassName?: string;
+    fileListClassName?: string;
     onAdd?: (file: File) => void;
     onRemove?: (file: File) => void;
     onError?: (error: string) => void;
 }
 declare const AppSimpleUploadFile: React__default.FC<AppSimpleUploadFileProps>;
 
-interface FileItem extends File {
-    id?: number | string;
-    preview?: string;
-    url?: string;
-    is_private?: boolean;
-    [key: string]: unknown;
-}
-
-interface CustomFile extends File {
-    path?: string;
-    preview?: string;
-    lastModifiedDate?: Date;
-}
-interface UploadProps extends DropzoneOptions {
-    error?: boolean;
-    sx?: SxProps<Theme$1>;
-    thumbnail?: boolean;
-    isClickable?: boolean;
-    placeholder?: React.ReactNode;
-    helperText?: React.ReactNode;
-    disableMultiple?: boolean;
-    isEditable?: boolean;
-    onDeleteButtonClick?: (file: FileItem) => void;
-    onPrivacyUpdateClick?: (file: FileItem) => void;
-    file?: CustomFile | string | File;
-    onDelete?: VoidFunction;
-    files?: (File | string | {
-        name: string;
-        url: string;
-    })[];
-    onUpload?: VoidFunction;
-    onRemove?: (file: CustomFile | string) => void;
-    onRemoveAll?: VoidFunction;
-}
-
-interface AppUploadFilePropTypes extends UploadProps {
+interface AppUploadFileProps {
     name: string;
     label?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: Accept;
+    disabled?: boolean;
+    required?: boolean;
+    helperText?: string;
+    className?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    dropzoneClassName?: string;
+    fileListClassName?: string;
 }
-declare const AppUploadFile: ({ name, ...rest }: AppUploadFilePropTypes) => react_jsx_runtime.JSX.Element;
+declare const AppUploadFile: ({ name, label, multiple, maxFiles, maxSize, accept, disabled, required, helperText, className, containerClassName, labelClassName, errorClassName, dropzoneClassName, fileListClassName, }: AppUploadFileProps) => react_jsx_runtime.JSX.Element;
 
-interface SubmitButtonProps {
+interface SubmitButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
     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;
+    variant?: "primary" | "secondary" | "outlined" | "text";
+    size?: "small" | "medium" | "large";
+    loadingText?: string;
+    className?: string;
 }
-declare const SubmitButton: ({ children, loading, disabled, fullWidth, variant, color, size, startIcon, endIcon, sx, buttonSx, loadingSx, disabledSx, ...rest }: SubmitButtonProps) => React__default.JSX.Element;
+declare const SubmitButton: ({ children, loading, disabled, fullWidth, variant, size, loadingText, className, ...rest }: SubmitButtonProps) => React__default.JSX.Element;
 
 type IconifyProps = IconifyIcon | string;
 
-interface Props extends BoxProps {
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     icon: IconifyProps;
+    width?: number | string;
+    height?: number | string;
+    color?: string;
 }
-declare const Iconify: React$1.ForwardRefExoticComponent<Omit<Props, "ref"> & React$1.RefAttributes<SVGElement>>;
+declare const Iconify: React$1.ForwardRefExoticComponent<Props & React$1.RefAttributes<HTMLSpanElement>>;
 
-export { AppAutoComplete, AppAutoCompleter, AppCheckBox, AppDateAndTimePicker, AppDatePicker, AppFormErrorMessage, AppInputField, AppMultiSelector, AppPhoneNoInput, AppRadioGroup, AppRating, AppRichTextEditor, 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, AppSelectInput, AppSelectOption, AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile, CheckboxOption, Form, Iconify, IconifyProps, RadioOption, SelectOption, SubmitButton };