formik-form-components 0.2.30 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +326 -123
  2. package/dist/index.d.ts +182 -332
  3. package/dist/index.js +1888 -3767
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1874 -3739
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +19 -23
package/dist/index.d.ts CHANGED
@@ -1,88 +1,52 @@
1
1
  import * as React$1 from 'react';
2
- import React__default, { ReactElement, ReactNode, SyntheticEvent, ElementType } from 'react';
2
+ import React__default, { TextareaHTMLAttributes, ReactElement, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
3
3
  import { FormikValues, FormikConfig, FormikProps } from 'formik';
4
- import { SxProps, Theme, SwitchProps, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, Checkbox, TextFieldProps, RadioGroupProps, BoxProps } from '@mui/material';
5
- import { Theme as Theme$1 } from '@mui/material/styles';
6
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
7
- import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
8
5
  import { Dayjs } from 'dayjs';
9
- import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
10
- import { SelectProps } from '@mui/material/Select';
11
- import { DropzoneOptions } from 'react-dropzone';
6
+ import { Accept } from 'react-dropzone';
12
7
  import { IconifyIcon } from '@iconify/react';
13
8
 
14
- declare const AppDatePicker: React__default.ForwardRefExoticComponent<{
9
+ declare const AppDatePicker: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value"> & {
15
10
  name: string;
16
11
  label?: string;
17
- disabled?: boolean;
12
+ required?: boolean;
13
+ helperText?: string;
18
14
  disablePast?: boolean;
19
- format?: string;
20
- sx?: SxProps<Theme>;
21
- textFieldSx?: SxProps<Theme>;
22
- } & Omit<DatePickerProps<true, Dayjs, Dayjs>, "value" | "onChange" | "renderInput"> & React__default.RefAttributes<HTMLDivElement>>;
15
+ disableFuture?: boolean;
16
+ className?: string;
17
+ labelClassName?: string;
18
+ errorClassName?: string;
19
+ containerClassName?: string;
20
+ onValueChange?: (value: Dayjs | null) => void;
21
+ } & React__default.RefAttributes<HTMLInputElement>>;
23
22
 
24
- type AppDateAndTimePickerProps = {
25
- /** Field name for formik */
23
+ declare const AppDateAndTimePicker: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value"> & {
26
24
  name: string;
27
- /** Label for the date and time picker */
28
25
  label?: string;
29
- /** Variant of the input field */
30
- variant?: "outlined" | "filled" | "standard";
31
- /** Placeholder text */
32
- placeholder?: string;
33
- /** Whether the field is required */
34
26
  required?: boolean;
35
- /** Whether the field is disabled */
36
- disabled?: boolean;
37
- /** Minimum selectable date */
38
- minDate?: Date | Dayjs | null;
39
- /** Maximum selectable date */
40
- maxDate?: Date | Dayjs | null;
41
- /** Format string for the displayed date and time */
42
- format?: string;
43
- /** Custom styles for the root container */
44
- sx?: SxProps<Theme>;
45
- /** Custom styles for the form control */
46
- formControlSx?: SxProps<Theme>;
47
- /** Custom styles for the text field */
48
- textFieldSx?: SxProps<Theme>;
49
- /** Custom styles for the label */
50
- labelSx?: SxProps<Theme>;
51
- /** Custom styles for the input */
52
- inputSx?: SxProps<Theme>;
53
- /** Custom styles for the error message */
54
- errorSx?: SxProps<Theme>;
55
- /** Custom styles for the helper text */
56
- helperTextSx?: SxProps<Theme>;
57
- /** Whether to show the helper text when no error */
58
- showHelperText?: boolean;
59
- /** Custom helper text to display */
60
27
  helperText?: string;
61
- /** Callback when the value changes */
62
- onChange?: (value: Dayjs | null) => void;
63
- /** Callback when the field is blurred */
64
- onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
65
- /** Additional props to pass to the DateTimePicker */
66
- [key: string]: any;
67
- } & Omit<DateTimePickerProps<true, Dayjs, Dayjs>, "value" | "onChange" | "renderInput">;
68
- declare const AppDateAndTimePicker: React__default.ForwardRefExoticComponent<Omit<AppDateAndTimePickerProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
28
+ disablePast?: boolean;
29
+ disableFuture?: boolean;
30
+ className?: string;
31
+ labelClassName?: string;
32
+ errorClassName?: string;
33
+ containerClassName?: string;
34
+ onValueChange?: (value: Dayjs | null) => void;
35
+ } & React__default.RefAttributes<HTMLInputElement>>;
69
36
 
70
- interface Props$6 {
37
+ interface Props$2 {
71
38
  name: string;
72
39
  alwaysShow?: boolean;
73
- sx?: SxProps<Theme>;
74
- containerSx?: SxProps<Theme>;
75
- textSx?: SxProps<Theme>;
40
+ className?: string;
41
+ containerClassName?: string;
76
42
  }
77
- declare function AppFormErrorMessage({ name, alwaysShow, sx, containerSx, textSx, }: Props$6): React.JSX.Element | null;
43
+ declare function AppFormErrorMessage({ name, alwaysShow, className, containerClassName, }: Props$2): React.JSX.Element | null;
78
44
 
79
- interface AppTextAreaProps {
45
+ interface AppTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name"> {
80
46
  /** Field name for formik */
81
47
  name: string;
82
48
  /** Label for the textarea */
83
49
  label?: string;
84
- /** Variant of the input field */
85
- variant?: 'outlined' | 'filled' | 'standard';
86
50
  /** Placeholder text */
87
51
  placeholder?: string;
88
52
  /** Number of visible text lines */
@@ -91,81 +55,67 @@ interface AppTextAreaProps {
91
55
  maxLength?: number;
92
56
  /** Whether the field is required */
93
57
  required?: boolean;
94
- /** Whether the field is disabled */
95
- disabled?: boolean;
96
- /** Whether the field is read-only */
97
- readOnly?: boolean;
98
58
  /** Whether to show character counter */
99
59
  showCount?: boolean;
100
- /** Custom styles for the root container */
101
- sx?: SxProps<Theme>;
102
- /** Custom styles for the TextField component */
103
- textFieldSx?: SxProps<Theme>;
104
- /** Custom styles for the label */
105
- labelSx?: SxProps<Theme>;
106
- /** Custom styles for the input */
107
- inputSx?: SxProps<Theme>;
108
- /** Custom styles for the error message */
109
- errorSx?: SxProps<Theme>;
110
- /** Custom styles for the character counter */
111
- counterSx?: SxProps<Theme>;
60
+ /** Helper text */
61
+ helperText?: string;
62
+ /** Custom class names */
63
+ className?: string;
64
+ labelClassName?: string;
65
+ errorClassName?: string;
66
+ counterClassName?: string;
67
+ containerClassName?: string;
112
68
  /** Callback when the value changes */
113
- onChange?: (value: string) => void;
114
- /** Callback when the field is focused */
115
- onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
116
- /** Callback when the field is blurred */
117
- onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
118
- /** Additional props for the TextField component */
119
- [key: string]: any;
69
+ onValueChange?: (value: string) => void;
120
70
  }
121
- declare const AppTextArea: React$1.ForwardRefExoticComponent<Omit<AppTextAreaProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
71
+ declare const AppTextArea: React$1.ForwardRefExoticComponent<AppTextAreaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
122
72
 
123
- interface Props$5 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
73
+ interface AppTagsCreatorProps {
124
74
  name: string;
125
- freeSolo?: boolean;
126
- multiple?: boolean;
127
75
  label?: string;
128
76
  placeholder?: string;
129
- options: string[];
77
+ options?: string[];
130
78
  disabled?: boolean;
131
- sx?: SxProps<Theme>;
132
- formControlSx?: SxProps<Theme>;
133
- textFieldSx?: SxProps<Theme>;
134
- chipSx?: SxProps<Theme>;
135
- listboxSx?: SxProps<Theme>;
136
- errorSx?: SxProps<Theme>;
137
- chipContainerSx?: SxProps<Theme>;
138
- inputSx?: SxProps<Theme>;
79
+ required?: boolean;
80
+ helperText?: string;
81
+ className?: string;
82
+ containerClassName?: string;
83
+ labelClassName?: string;
84
+ inputClassName?: string;
85
+ tagClassName?: string;
86
+ errorClassName?: string;
139
87
  }
140
- declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, sx, formControlSx, textFieldSx, chipSx, listboxSx, errorSx, chipContainerSx, inputSx, }: Props$5): React.JSX.Element;
88
+ declare function AppTagsCreator({ placeholder, name, label, options, disabled, required, helperText, className, containerClassName, labelClassName, inputClassName, tagClassName, errorClassName, }: AppTagsCreatorProps): React__default.JSX.Element;
141
89
 
142
- interface AppSwitchInputProps extends Omit<SwitchProps, "name" | "checked" | "onChange"> {
90
+ interface AppSwitchInputProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "name" | "onClick"> {
143
91
  name: string;
144
92
  label?: string;
93
+ helperText?: string;
145
94
  className?: string;
146
- sx?: SxProps<Theme>;
147
- containerSx?: SxProps<Theme>;
148
- switchSx?: SxProps<Theme>;
149
- labelSx?: SxProps<Theme>;
150
- errorSx?: SxProps<Theme>;
151
- labelPlacement?: "start" | "end" | "top" | "bottom";
95
+ containerClassName?: string;
96
+ switchClassName?: string;
97
+ labelClassName?: string;
98
+ errorClassName?: string;
99
+ labelPlacement?: "start" | "end";
152
100
  disabled?: boolean;
153
- [key: string]: unknown;
101
+ onValueChange?: (value: boolean) => void;
154
102
  }
155
- declare function AppSwitchInput({ name, label, className, sx, containerSx, switchSx, labelSx, errorSx, labelPlacement, disabled, ...otherProps }: AppSwitchInputProps): React__default.JSX.Element;
103
+ declare function AppSwitchInput({ name, label, helperText, className, containerClassName, switchClassName, labelClassName, errorClassName, labelPlacement, disabled, onValueChange, ...otherProps }: AppSwitchInputProps): React__default.JSX.Element;
156
104
 
157
- interface AppSwitchProps extends Omit<SwitchProps, "name" | "checked" | "onChange"> {
105
+ interface AppSwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "name" | "onClick"> {
158
106
  name: string;
159
107
  label: string;
160
- sx?: SxProps<Theme>;
161
- containerSx?: SxProps<Theme>;
162
- switchSx?: SxProps<Theme>;
163
- labelSx?: SxProps<Theme>;
164
- errorSx?: SxProps<Theme>;
165
- labelPlacement?: "start" | "end" | "top" | "bottom";
108
+ helperText?: string;
109
+ className?: string;
110
+ containerClassName?: string;
111
+ switchClassName?: string;
112
+ labelClassName?: string;
113
+ errorClassName?: string;
114
+ labelPlacement?: "start" | "end";
166
115
  disabled?: boolean;
116
+ onValueChange?: (value: boolean) => void;
167
117
  }
168
- declare function AppSwitch({ name, label, sx, containerSx, switchSx, labelSx, errorSx, labelPlacement, disabled, ...otherProps }: AppSwitchProps): React.JSX.Element;
118
+ declare function AppSwitch({ name, label, helperText, className, containerClassName, switchClassName, labelClassName, errorClassName, labelPlacement, disabled, onValueChange, ...otherProps }: AppSwitchProps): React.JSX.Element;
169
119
 
170
120
  interface FormProps<T> extends FormikConfig<T> {
171
121
  children?: ((props: FormikProps<T>) => ReactNode) | ReactNode;
@@ -173,43 +123,47 @@ interface FormProps<T> extends FormikConfig<T> {
173
123
  }
174
124
  declare const Form: <T extends FormikValues>({ children, className, ...props }: FormProps<T>) => ReactElement;
175
125
 
176
- interface Props$4 extends Omit<AutocompleteProps<string, true, boolean, false, "div">, "renderInput" | "onChange" | "value" | "multiple" | "freeSolo"> {
126
+ interface AppAutoCompleteProps {
177
127
  name: string;
178
- freeSolo?: boolean;
179
128
  label?: string;
180
129
  placeholder?: string;
181
- options: string[];
182
- value?: string[];
183
- onChange?: (event: SyntheticEvent, value: string[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<string>) => void;
184
- /** Variant of the input field */
185
- variant?: "outlined" | "filled" | "standard";
186
- sx?: SxProps<Theme$1>;
187
- formControlSx?: SxProps<Theme$1>;
188
- textFieldSx?: SxProps<Theme$1>;
189
- chipSx?: SxProps<Theme$1>;
190
- errorSx?: SxProps<Theme$1>;
130
+ options?: string[];
131
+ required?: boolean;
132
+ disabled?: boolean;
133
+ freeSolo?: boolean;
134
+ helperText?: string;
135
+ className?: string;
136
+ containerClassName?: string;
137
+ labelClassName?: string;
138
+ inputClassName?: string;
139
+ tagClassName?: string;
140
+ errorClassName?: string;
191
141
  }
192
- declare function AppAutoComplete({ placeholder, name, variant, label, options, value: propValue, onChange: propOnChange, sx, formControlSx, textFieldSx, chipSx, errorSx, }: Props$4): React.JSX.Element;
142
+ declare function AppAutoComplete({ placeholder, name, label, options, required, disabled, freeSolo, helperText, className, containerClassName, labelClassName, inputClassName, tagClassName, errorClassName, }: AppAutoCompleteProps): React__default.JSX.Element;
193
143
 
194
144
  interface SelectOption {
195
145
  label: string;
196
146
  value: string | number;
197
147
  }
198
148
  type OptionType = string | SelectOption;
199
- interface Props$3 extends Omit<AutocompleteProps<OptionType, boolean, boolean, boolean>, "renderInput" | "options" | "value" | "onChange"> {
149
+ interface AppAutoCompleterProps {
200
150
  name: string;
201
151
  label?: string;
202
152
  placeholder?: string;
203
153
  options: OptionType[];
204
154
  multiple?: boolean;
205
155
  freeSolo?: boolean;
206
- sx?: SxProps<Theme>;
207
- formControlSx?: SxProps<Theme>;
208
- textFieldSx?: SxProps<Theme>;
209
- chipSx?: SxProps<Theme>;
210
- errorSx?: SxProps<Theme>;
156
+ required?: boolean;
157
+ disabled?: boolean;
158
+ helperText?: string;
159
+ className?: string;
160
+ containerClassName?: string;
161
+ labelClassName?: string;
162
+ inputClassName?: string;
163
+ tagClassName?: string;
164
+ errorClassName?: string;
211
165
  }
212
- declare function AppAutoCompleter({ name, label, placeholder, options, multiple, freeSolo, sx, formControlSx, textFieldSx, chipSx, errorSx, ...rest }: Props$3): React__default.JSX.Element;
166
+ declare function AppAutoCompleter({ name, label, placeholder, options, multiple, freeSolo, required, disabled, helperText, className, containerClassName, labelClassName, inputClassName, tagClassName, errorClassName, }: AppAutoCompleterProps): React__default.JSX.Element;
213
167
 
214
168
  interface CheckboxOption {
215
169
  label: string;
@@ -217,45 +171,43 @@ interface CheckboxOption {
217
171
  value: string | number | boolean;
218
172
  disabled?: boolean;
219
173
  }
220
- interface Props$2 {
174
+ interface AppCheckBoxProps {
221
175
  name: string;
222
176
  option: CheckboxOption[];
223
177
  label?: string;
224
178
  required?: boolean;
225
179
  disabled?: boolean;
226
180
  row?: boolean;
227
- sx?: SxProps<Theme>;
228
- checkboxSx?: SxProps<Theme>;
229
- labelSx?: SxProps<Theme>;
230
- errorSx?: SxProps<Theme>;
231
- containerSx?: SxProps<Theme>;
232
- iconSx?: SxProps<Theme>;
233
- checkedSx?: SxProps<Theme>;
234
- checkboxProps?: React__default.ComponentProps<typeof Checkbox>;
181
+ className?: string;
182
+ labelClassName?: string;
183
+ errorClassName?: string;
184
+ containerClassName?: string;
185
+ checkboxClassName?: string;
186
+ itemClassName?: string;
187
+ checkboxProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "checked" | "onChange">;
235
188
  }
236
- declare const AppCheckBox: ({ name, option, label, required, disabled, row, sx, checkboxSx, labelSx, errorSx, containerSx, iconSx, checkedSx, checkboxProps, }: Props$2) => react_jsx_runtime.JSX.Element;
189
+ declare const AppCheckBox: ({ name, option, label, required, disabled, row, className, labelClassName, errorClassName, containerClassName, checkboxClassName, itemClassName, checkboxProps, }: AppCheckBoxProps) => react_jsx_runtime.JSX.Element;
237
190
 
238
191
  interface CustomInputProps {
239
192
  name: string;
240
193
  label?: ReactNode;
241
194
  required?: boolean;
242
- tagUser?: string;
243
- hasReply?: boolean;
195
+ helperText?: string;
196
+ className?: string;
197
+ labelClassName?: string;
198
+ errorClassName?: string;
199
+ containerClassName?: string;
244
200
  }
245
- type AppInputFieldProps = CustomInputProps & Omit<TextFieldProps, "name" | "label" | "variant"> & {
246
- variant?: "outlined" | "filled" | "standard";
247
- };
248
- declare function AppInputField({ name, label, type, required, variant, InputProps, ...otherProps }: AppInputFieldProps): React__default.JSX.Element;
201
+ type AppInputFieldProps = CustomInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "name">;
202
+ declare function AppInputField({ name, label, type, required, helperText, className, labelClassName, errorClassName, containerClassName, ...otherProps }: AppInputFieldProps): React__default.JSX.Element;
249
203
 
250
204
  interface AppSelectOption$1 {
251
205
  label: string;
252
206
  value: string | number;
253
207
  disabled?: boolean;
254
- sx?: SxProps<Theme>;
255
- textSx?: SxProps<Theme>;
256
208
  icon?: ReactNode;
257
209
  }
258
- interface BaseMultiSelectProps {
210
+ interface AppMultiSelectorProps {
259
211
  name: string;
260
212
  label?: string;
261
213
  options: AppSelectOption$1[];
@@ -264,29 +216,16 @@ interface BaseMultiSelectProps {
264
216
  maxSelections?: number;
265
217
  showSelectedCount?: boolean;
266
218
  helperText?: string;
267
- variant?: "outlined" | "filled" | "standard";
268
219
  placeholder?: string;
269
- sx?: SxProps<Theme>;
270
- formControlSx?: SxProps<Theme>;
271
- labelSx?: SxProps<Theme>;
272
- chipSx?: SxProps<Theme>;
273
- checkboxSx?: SxProps<Theme>;
220
+ className?: string;
221
+ containerClassName?: string;
222
+ labelClassName?: string;
223
+ tagClassName?: string;
224
+ errorClassName?: string;
225
+ dropdownClassName?: string;
274
226
  onChange?: (value: Array<string | number>) => void;
275
227
  onMaxSelectionsReached?: (maxSelections: number) => void;
276
228
  }
277
- interface AutocompleteMultiSelectProps extends BaseMultiSelectProps {
278
- mode?: "autocomplete";
279
- onSearchChange?: (query: string) => void;
280
- searchDebounce?: number;
281
- clearable?: boolean;
282
- }
283
- interface DropdownMultiSelectProps extends BaseMultiSelectProps {
284
- mode: "dropdown";
285
- onSearchChange?: never;
286
- searchDebounce?: never;
287
- clearable?: never;
288
- }
289
- type AppMultiSelectorProps = AutocompleteMultiSelectProps | DropdownMultiSelectProps;
290
229
  declare const AppMultiSelector: React__default.ForwardRefExoticComponent<AppMultiSelectorProps & React__default.RefAttributes<HTMLDivElement>>;
291
230
 
292
231
  interface AppPhoneNoInputProps {
@@ -295,11 +234,11 @@ interface AppPhoneNoInputProps {
295
234
  required?: boolean;
296
235
  defaultCountry?: string;
297
236
  placeholder?: string;
298
- sx?: SxProps<Theme>;
299
- containerSx?: SxProps<Theme>;
300
- labelSx?: SxProps<Theme>;
301
- inputSx?: React__default.CSSProperties;
302
- errorSx?: SxProps<Theme>;
237
+ className?: string;
238
+ containerClassName?: string;
239
+ labelClassName?: string;
240
+ inputClassName?: string;
241
+ errorClassName?: string;
303
242
  international?: boolean;
304
243
  withCountryCallingCode?: boolean;
305
244
  }
@@ -309,28 +248,26 @@ interface RadioOption {
309
248
  label: string;
310
249
  value: string | number;
311
250
  disabled?: boolean;
312
- sx?: SxProps<Theme>;
313
- radioSx?: SxProps<Theme>;
314
- labelSx?: SxProps<Theme>;
315
251
  }
316
- interface AppRadioGroupProps extends Omit<RadioGroupProps, "onChange" | "onBlur" | "value"> {
252
+ interface AppRadioGroupProps {
317
253
  name: string;
318
254
  options: RadioOption[];
319
255
  label?: string;
320
256
  required?: boolean;
321
257
  disabled?: boolean;
322
258
  row?: boolean;
323
- sx?: SxProps<Theme>;
324
- formControlSx?: SxProps<Theme>;
325
- radioGroupSx?: SxProps<Theme>;
326
- formLabelSx?: SxProps<Theme>;
327
- radioSx?: SxProps<Theme>;
328
- labelSx?: SxProps<Theme>;
329
- errorSx?: SxProps<Theme>;
259
+ helperText?: string;
260
+ className?: string;
261
+ labelClassName?: string;
262
+ errorClassName?: string;
263
+ containerClassName?: string;
264
+ radioClassName?: string;
265
+ itemClassName?: string;
330
266
  onChange?: (event: React__default.ChangeEvent<HTMLInputElement>, value: string) => void;
331
267
  onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
268
+ radioProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "checked" | "onChange">;
332
269
  }
333
- declare const AppRadioGroup: React__default.ForwardRefExoticComponent<Omit<AppRadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
270
+ declare const AppRadioGroup: React__default.ForwardRefExoticComponent<AppRadioGroupProps & React__default.RefAttributes<HTMLFieldSetElement>>;
334
271
 
335
272
  interface AppRatingProps {
336
273
  /** Field name for formik */
@@ -345,64 +282,20 @@ interface AppRatingProps {
345
282
  disabled?: boolean;
346
283
  /** Maximum rating value */
347
284
  max?: number;
348
- /** Precision of the rating */
285
+ /** Precision of the rating (e.g., 0.5 for half stars) */
349
286
  precision?: number;
350
287
  /** Size of the rating icons */
351
- size?: "small" | "medium" | "large" | number;
352
- /** Custom icon for empty rating */
353
- emptyIcon?: ReactNode;
354
- /** Custom icon for filled rating */
355
- icon?: ReactNode;
356
- /** Custom icon component */
357
- IconContainerComponent?: ElementType<{
358
- value: number;
359
- }>;
360
- /** Custom label for the rating value */
361
- getLabelText?: (value: number) => string;
362
- /** Callback when the rating changes */
363
- onChange?: (event: React.SyntheticEvent, value: number | null) => void;
364
- /** Callback when the rating is hovered */
365
- onChangeActive?: (event: React.SyntheticEvent, value: number) => void;
366
- /** Custom styles for the root container */
367
- sx?: SxProps<Theme>;
368
- /** Custom styles for the label */
369
- labelSx?: SxProps<Theme>;
370
- /** Custom styles for the rating component */
371
- ratingSx?: SxProps<Theme>;
372
- /** Custom styles for the error message */
373
- errorSx?: SxProps<Theme>;
374
- /** Custom styles for the helper text */
375
- helperTextSx?: SxProps<Theme>;
376
- /** Whether to show the helper text when no error */
377
- showHelperText?: boolean;
378
- /** Custom helper text to display */
288
+ size?: "small" | "medium" | "large";
289
+ /** Helper text */
379
290
  helperText?: string;
380
- /** Custom component for the label */
381
- labelComponent?: ElementType;
382
- /** Custom component for the rating */
383
- ratingComponent?: ElementType;
384
- /** Custom component for the error */
385
- errorComponent?: ElementType;
386
- /** Custom component for the helper text */
387
- helperTextComponent?: ElementType;
388
- /** Custom props for the label component */
389
- labelProps?: Record<string, any>;
390
- /** Custom props for the rating component */
391
- ratingProps?: Record<string, any>;
392
- /** Custom props for the error component */
393
- errorProps?: Record<string, any>;
394
- /** Custom props for the helper text component */
395
- helperTextProps?: Record<string, any>;
396
- /** Custom class name for the root container */
291
+ /** Callback when the rating changes */
292
+ onChange?: (value: number | null) => void;
293
+ /** Custom class names */
397
294
  className?: string;
398
- /** Custom class name for the label */
399
295
  labelClassName?: string;
400
- /** Custom class name for the rating */
401
- ratingClassName?: string;
402
- /** Custom class name for the error */
403
296
  errorClassName?: string;
404
- /** Custom class name for the helper text */
405
- helperTextClassName?: string;
297
+ containerClassName?: string;
298
+ starsClassName?: string;
406
299
  }
407
300
  declare const AppRating: React$1.ForwardRefExoticComponent<AppRatingProps & React$1.RefAttributes<HTMLDivElement>>;
408
301
 
@@ -412,16 +305,11 @@ interface Props$1 {
412
305
  label?: string;
413
306
  placeholder?: string;
414
307
  required?: boolean;
415
- variant?: "outlined" | "filled" | "standard";
416
- sx?: SxProps<Theme>;
417
- editorSx?: SxProps<Theme>;
418
- toolbarSx?: SxProps<Theme>;
419
- contentSx?: SxProps<Theme>;
420
- errorSx?: SxProps<Theme>;
421
- labelSx?: SxProps<Theme>;
422
- buttonSx?: SxProps<Theme>;
423
- activeButtonSx?: SxProps<Theme>;
424
- dialogSx?: SxProps<Theme>;
308
+ className?: string;
309
+ editorClassName?: string;
310
+ toolbarClassName?: string;
311
+ labelClassName?: string;
312
+ errorClassName?: string;
425
313
  showButtons?: EditorButton[];
426
314
  }
427
315
  declare const AppRichTextEditor: React__default.FC<Props$1>;
@@ -430,40 +318,24 @@ interface AppSelectOption {
430
318
  label: string;
431
319
  value: string | number;
432
320
  disabled?: boolean;
433
- sx?: SxProps<Theme>;
434
- textSx?: SxProps<Theme>;
435
321
  icon?: ReactNode;
436
322
  }
437
- interface BaseSelectProps {
323
+ interface AppSelectInputProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "name"> {
438
324
  name: string;
439
325
  label?: string;
440
326
  options: AppSelectOption[];
441
327
  required?: boolean;
442
- disabled?: boolean;
443
328
  showNoneOption?: boolean;
444
329
  noneOptionText?: string;
445
330
  helperText?: string;
446
- variant?: "outlined" | "filled" | "standard";
447
331
  placeholder?: string;
448
- sx?: SxProps<Theme>;
449
- formControlSx?: SxProps<Theme>;
450
- labelSx?: SxProps<Theme>;
451
- onChange?: (value: string | number) => void;
452
- }
453
- interface AutocompleteSelectProps extends BaseSelectProps {
454
- mode?: "autocomplete";
455
- onSearchChange?: (query: string) => void;
456
- searchDebounce?: number;
457
- clearable?: boolean;
458
- }
459
- interface DropdownSelectProps extends BaseSelectProps {
460
- mode: "dropdown";
461
- onSearchChange?: never;
462
- searchDebounce?: never;
463
- clearable?: never;
332
+ className?: string;
333
+ labelClassName?: string;
334
+ errorClassName?: string;
335
+ containerClassName?: string;
336
+ onValueChange?: (value: string | number) => void;
464
337
  }
465
- type AppSelectInputProps = AutocompleteSelectProps | DropdownSelectProps;
466
- declare const AppSelectInput: React__default.ForwardRefExoticComponent<AppSelectInputProps & React__default.RefAttributes<HTMLDivElement>>;
338
+ declare const AppSelectInput: React__default.ForwardRefExoticComponent<AppSelectInputProps & React__default.RefAttributes<HTMLSelectElement>>;
467
339
 
468
340
  interface AppSimpleUploadFileProps {
469
341
  name: string;
@@ -474,79 +346,57 @@ interface AppSimpleUploadFileProps {
474
346
  required?: boolean;
475
347
  maxFiles?: number;
476
348
  maxSizeInBytes?: number;
477
- sx?: SxProps<Theme>;
478
- buttonSx?: SxProps<Theme>;
479
- errorSx?: SxProps<Theme>;
349
+ helperText?: string;
350
+ className?: string;
351
+ containerClassName?: string;
352
+ labelClassName?: string;
353
+ errorClassName?: string;
354
+ buttonClassName?: string;
355
+ fileListClassName?: string;
480
356
  onAdd?: (file: File) => void;
481
357
  onRemove?: (file: File) => void;
482
358
  onError?: (error: string) => void;
483
359
  }
484
360
  declare const AppSimpleUploadFile: React__default.FC<AppSimpleUploadFileProps>;
485
361
 
486
- interface FileItem extends File {
487
- id?: number | string;
488
- preview?: string;
489
- url?: string;
490
- is_private?: boolean;
491
- [key: string]: unknown;
492
- }
493
-
494
- interface CustomFile extends File {
495
- path?: string;
496
- preview?: string;
497
- lastModifiedDate?: Date;
498
- }
499
- interface UploadProps extends DropzoneOptions {
500
- error?: boolean;
501
- sx?: SxProps<Theme$1>;
502
- thumbnail?: boolean;
503
- isClickable?: boolean;
504
- placeholder?: React.ReactNode;
505
- helperText?: React.ReactNode;
506
- disableMultiple?: boolean;
507
- isEditable?: boolean;
508
- onDeleteButtonClick?: (file: FileItem) => void;
509
- onPrivacyUpdateClick?: (file: FileItem) => void;
510
- file?: CustomFile | string | File;
511
- onDelete?: VoidFunction;
512
- files?: (File | string | {
513
- name: string;
514
- url: string;
515
- })[];
516
- onUpload?: VoidFunction;
517
- onRemove?: (file: CustomFile | string) => void;
518
- onRemoveAll?: VoidFunction;
519
- }
520
-
521
- interface AppUploadFilePropTypes extends UploadProps {
362
+ interface AppUploadFileProps {
522
363
  name: string;
523
364
  label?: string;
365
+ multiple?: boolean;
366
+ maxFiles?: number;
367
+ maxSize?: number;
368
+ accept?: Accept;
369
+ disabled?: boolean;
370
+ required?: boolean;
371
+ helperText?: string;
372
+ className?: string;
373
+ containerClassName?: string;
374
+ labelClassName?: string;
375
+ errorClassName?: string;
376
+ dropzoneClassName?: string;
377
+ fileListClassName?: string;
524
378
  }
525
- declare const AppUploadFile: ({ name, ...rest }: AppUploadFilePropTypes) => react_jsx_runtime.JSX.Element;
379
+ declare const AppUploadFile: ({ name, label, multiple, maxFiles, maxSize, accept, disabled, required, helperText, className, containerClassName, labelClassName, errorClassName, dropzoneClassName, fileListClassName, }: AppUploadFileProps) => react_jsx_runtime.JSX.Element;
526
380
 
527
- interface SubmitButtonProps {
381
+ interface SubmitButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
528
382
  children: React__default.ReactNode;
529
383
  loading?: boolean;
530
- disabled?: boolean;
531
384
  fullWidth?: boolean;
532
- variant?: 'text' | 'outlined' | 'contained';
533
- color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
534
- size?: 'small' | 'medium' | 'large';
535
- startIcon?: React__default.ReactNode;
536
- endIcon?: React__default.ReactNode;
537
- sx?: SxProps<Theme>;
538
- buttonSx?: SxProps<Theme>;
539
- loadingSx?: SxProps<Theme>;
540
- disabledSx?: SxProps<Theme>;
541
- [key: string]: any;
385
+ variant?: "primary" | "secondary" | "outlined" | "text";
386
+ size?: "small" | "medium" | "large";
387
+ loadingText?: string;
388
+ className?: string;
542
389
  }
543
- declare const SubmitButton: ({ children, loading, disabled, fullWidth, variant, color, size, startIcon, endIcon, sx, buttonSx, loadingSx, disabledSx, ...rest }: SubmitButtonProps) => React__default.JSX.Element;
390
+ declare const SubmitButton: ({ children, loading, disabled, fullWidth, variant, size, loadingText, className, ...rest }: SubmitButtonProps) => React__default.JSX.Element;
544
391
 
545
392
  type IconifyProps = IconifyIcon | string;
546
393
 
547
- interface Props extends BoxProps {
394
+ interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
548
395
  icon: IconifyProps;
396
+ width?: number | string;
397
+ height?: number | string;
398
+ color?: string;
549
399
  }
550
- declare const Iconify: React$1.ForwardRefExoticComponent<Omit<Props, "ref"> & React$1.RefAttributes<SVGElement>>;
400
+ declare const Iconify: React$1.ForwardRefExoticComponent<Props & React$1.RefAttributes<HTMLSpanElement>>;
551
401
 
552
- 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 };
402
+ 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 };