form-input-fields 1.0.4 → 1.0.6

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.
package/README.md CHANGED
@@ -2,10 +2,125 @@
2
2
 
3
3
  A collection of Material-UI form field components with Formik integration.
4
4
 
5
- More controls are coming soon.
5
+ More control in the progress of development.
6
+
7
+ ## Installation
8
+
9
+ ### Prerequisites
10
+
11
+ Before installing the form-fields package, make sure you have the following peer dependencies installed in your project:
12
+
13
+ - React 16.8.0 or later
14
+ - React DOM 16.8.0 or later
15
+ - Material-UI (MUI) 5.0.0 or later
16
+ - Formik 2.0.0 or later
17
+ - @mui/x-date-pickers 6.0.0 or later
18
+ - dayjs 1.11.0 or later
19
+
20
+ ### Using npm
21
+
22
+ ```bash
23
+ npm install form-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
24
+ ```
25
+
26
+ ### Using yarn
27
+
28
+ ```bash
29
+ yarn add @your-org/form-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
30
+ ```
31
+
32
+ ### Using pnpm
33
+
34
+ ```bash
35
+ pnpm add form-input-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
36
+ ```
37
+
38
+ ### Peer Dependencies
39
+
40
+ Make sure your project includes these peer dependencies:
41
+
42
+ ```json
43
+ {
44
+ "devDependencies": {
45
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
46
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
47
+ "@mui/material": "^5.0.0",
48
+ "@emotion/react": "^11.0.0",
49
+ "@emotion/styled": "^11.0.0",
50
+ "formik": "^2.0.0",
51
+ "@mui/x-date-pickers": "^6.0.0",
52
+ "dayjs": "^1.11.0"
53
+ }
54
+ }
55
+ ```
56
+
57
+ ### TypeScript
58
+
59
+ This package includes TypeScript type definitions. No additional type packages are needed.
60
+
61
+ ### Browser Support
62
+
63
+ The form fields support all modern browsers including:
64
+ - Chrome (latest 2 versions)
65
+ - Firefox (latest 2 versions)
66
+ - Safari (latest 2 versions)
67
+ - Edge (latest 2 versions)
68
+
69
+ For Internet Explorer 11 support, you'll need to include polyfills. See [Browser Support](#browser-support) for more details.
70
+
71
+ ### Next Steps
72
+
73
+ After installation, you can import and use the components in your application:
74
+
75
+ ```tsx
76
+ import { FormTextField, FormDateField, FormMaskField } from 'form-input-fields';
77
+ ```
78
+
79
+ ### Troubleshooting
80
+
81
+ If you encounter any issues during installation, try the following:
82
+
83
+ 1. Clear your package manager's cache:
84
+ ```bash
85
+ npm cache clean --force
86
+ # or
87
+ yarn cache clean
88
+ # or
89
+ pnpm store prune
90
+ ```
91
+
92
+ 2. Delete `node_modules` and `package-lock.json` (or `yarn.lock`/`pnpm-lock.yaml`)
93
+
94
+ 3. Reinstall dependencies:
95
+ ```bash
96
+ npm install
97
+ # or
98
+ yarn install
99
+ # or
100
+ pnpm install
101
+ ```
102
+
103
+ If you're still experiencing issues, please reach me at vladimir.vorobiev@gmail.com with details about your environment and the error message you're seeing.
104
+
6
105
 
7
106
  ## Table of Contents
8
107
 
108
+ - [FormTextField](#formtextfield)
109
+ - [Features](#features)
110
+ - [Basic Usage](#basic-usage)
111
+ - [Props](#props)
112
+ - [Examples](#examples)
113
+ - [Basic Text Input](#basic-text-input)
114
+ - [Text Field with Formik](#text-field-with-formik)
115
+ - [Custom Validation](#custom-validation)
116
+ - [FormDropDownField](#formdropdownfield)
117
+ - [Features](#features-4)
118
+ - [Basic Usage](#basic-usage-4)
119
+ - [Props](#props-4)
120
+ - [Examples](#examples-4)
121
+ - [Basic Dropdown](#basic-dropdown)
122
+ - [Dropdown with Default Selection](#dropdown-with-default-selection)
123
+ - [Required Dropdown with Validation](#required-dropdown-with-validation)
9
124
  - [FormDateField](#formdatefield)
10
125
  - [Features](#features)
11
126
  - [Available Date Formats](#available-date-formats)
@@ -41,6 +156,260 @@ More controls are coming soon.
41
156
  - [Basic Checkbox](#basic-checkbox)
42
157
  - [Checkbox with Formik](#checkbox-with-formik)
43
158
  - [Custom Styled Checkbox](#custom-styled-checkbox)
159
+ - [FormDateTextField](#formdatetextfield)
160
+ - [Features](#features-3)
161
+ - [Available Date Formats](#available-date-formats-1)
162
+ - [Basic Usage](#basic-usage-3)
163
+ - [Props](#props-3)
164
+ - [Examples](#examples-3)
165
+ - [Basic Date Text Input](#basic-date-text-input)
166
+ - [Date Text Field with Formik](#date-text-field-with-formik)
167
+ - [Custom Date Format](#custom-date-format)
168
+
169
+ ---
170
+
171
+ ## FormTextField
172
+
173
+ A versatile text input field component that integrates Material-UI's TextField with Formik form handling.
174
+
175
+ ### Features
176
+
177
+ - **Seamless Formik Integration**: Automatically handles form state, validation, and error messages
178
+ - **Material-UI Styling**: Consistent look and feel with Material Design
179
+ - **TypeScript Support**: Fully typed component with proper type definitions
180
+ - **Flexible Props**: Supports all standard TextField props from Material-UI
181
+ - **Error Handling**: Built-in error state management with Formik
182
+ - **Responsive Design**: Works well across different screen sizes
183
+
184
+ ### Basic Usage
185
+
186
+ ```tsx
187
+ import { Formik, Field } from 'formik';
188
+ import { FormTextField } from 'form-fields';
189
+
190
+ <Formik
191
+ initialValues={{ username: '' }}
192
+ onSubmit={(values) => console.log(values)}
193
+ >
194
+ <Field
195
+ component={FormTextField}
196
+ name="username"
197
+ label="Username"
198
+ placeholder="Enter your username"
199
+ />
200
+ </Formik>
201
+ ```
202
+
203
+ ### Props
204
+
205
+ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps`.
206
+
207
+ #### FormTextFieldProps Interface
208
+
209
+ | Prop | Type | Default | Description |
210
+ |------------|------------|---------|-----------------------------------------------|
211
+ | `onChange` | `function` | - | Custom change handler that overrides Formik's |
212
+ | `onBlur` | `function` | - | Custom blur handler that overrides Formik's |
213
+
214
+ #### Common Props (from FieldProps & TextFieldProps)
215
+
216
+ | Prop | Type | Required | Description |
217
+ |--------------|------------------|----------|-----------------------------------------------|
218
+ | `name` | `string` | Yes | Field name in Formik values |
219
+ | `label` | `string` | No | Field label |
220
+ | `helperText` | `string` | No | Custom helper text |
221
+ | `error` | `boolean` | No | Error state (auto-managed by Formik) |
222
+ | `disabled` | `boolean` | No | Disabled state |
223
+ | `required` | `boolean` | No | Required field indicator |
224
+ | `type` | `string` | 'text' | Input type (text, email, password, etc.) |
225
+ | Other | `TextFieldProps` | No | All Material-UI TextField props are supported |
226
+
227
+ ### Examples
228
+
229
+ #### Basic Text Input
230
+
231
+ ```tsx
232
+ <Field
233
+ component={FormTextField}
234
+ name="username"
235
+ label="Username"
236
+ placeholder="Enter your username"
237
+ fullWidth
238
+ margin="normal"
239
+ />
240
+ ```
241
+
242
+ #### Text Field with Formik
243
+
244
+ ```tsx
245
+ <Formik
246
+ initialValues={{ email: '' }}
247
+ validate={values => {
248
+ const errors = {};
249
+ if (!values.email) {
250
+ errors.email = 'Required';
251
+ } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
252
+ errors.email = 'Invalid email address';
253
+ }
254
+ return errors;
255
+ }}
256
+ onSubmit={(values) => console.log(values)}
257
+ >
258
+ {({ errors, touched }) => (
259
+ <Field
260
+ component={FormTextField}
261
+ name="email"
262
+ label="Email"
263
+ type="email"
264
+ error={touched.email && Boolean(errors.email)}
265
+ helperText={touched.email && errors.email}
266
+ required
267
+ />
268
+ )}
269
+ </Formik>
270
+ ```
271
+
272
+ #### Custom Validation
273
+
274
+ ```tsx
275
+ <Field
276
+ component={FormTextField}
277
+ name="password"
278
+ label="Password"
279
+ type="password"
280
+ inputProps={{
281
+ minLength: 8,
282
+ pattern: "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
283
+ }}
284
+ helperText="Must contain at least 8 characters, including uppercase, lowercase, and numbers"
285
+ required
286
+ />
287
+ ```
288
+
289
+ ---
290
+
291
+ ## FormDropDownField
292
+
293
+ A customizable dropdown/select component that integrates Material-UI's Select with Formik form handling.
294
+
295
+ ### Features
296
+
297
+ - **Seamless Formik Integration**: Automatically handles form state, validation, and error messages
298
+ - **Material-UI Styling**: Consistent look and feel with Material Design
299
+ - **TypeScript Support**: Fully typed component with proper type definitions
300
+ - **Flexible Data Binding**: Works with array of objects with `id` and `description` properties
301
+ - **Optional Default Selection**: Add a default "Select" option with customizable text
302
+ - **Form Validation**: Built-in error state management with Formik
303
+ - **Responsive Design**: Works well across different screen sizes
304
+
305
+ ### Basic Usage
306
+
307
+ ```tsx
308
+ import { Formik, Field } from 'formik';
309
+ import { FormDropDownField } from 'form-input-fields';
310
+
311
+ const items = [
312
+ { id: '1', description: 'Option 1' },
313
+ { id: '2', description: 'Option 2' },
314
+ { id: '3', description: 'Option 3' },
315
+ ];
316
+
317
+ <Formik
318
+ initialValues={{ category: '' }}
319
+ onSubmit={(values) => console.log(values)}
320
+ >
321
+ <Field
322
+ component={FormDropDownField}
323
+ name="category"
324
+ label="Category"
325
+ items={items}
326
+ addInputSelect={true}
327
+ />
328
+ </Formik>
329
+ ```
330
+
331
+ ### Props
332
+
333
+ The FormDropDownField component accepts all props from `FormDropDownFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps` (with some exceptions).
334
+
335
+ #### FormDropDownFieldProps Interface
336
+
337
+ | Prop | Type | Default | Description |
338
+ |------|------|---------|-------------|
339
+ | `items` | `Array<{ id: string | number; description: string }>` | `[]` | Array of items to display in the dropdown |
340
+ | `addInputSelect` | `boolean` | `false` | Whether to show a default "Select" option as the first item |
341
+ | `selectText` | `string` | `'Select'` | Text to display for the default "Select" option |
342
+ | `required` | `boolean` | `false` | Whether the field is required |
343
+ | `disabled` | `boolean` | `false` | Whether the field is disabled |
344
+ | `className` | `string` | - | Custom class name for the root element |
345
+ | `helperText` | `string` | - | Helper text to display below the field |
346
+ | `error` | `boolean` | - | Error state of the field (overrides Formik error state) |
347
+ | `onChange` | `(value: any) => void` | - | Custom change handler |
348
+ | `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
349
+
350
+ ### Examples
351
+
352
+ #### Basic Dropdown
353
+
354
+ ```tsx
355
+ const items = [
356
+ { id: 'us', description: 'United States' },
357
+ { id: 'ca', description: 'Canada' },
358
+ { id: 'uk', description: 'United Kingdom' },
359
+ ];
360
+
361
+ <Field
362
+ component={FormDropDownField}
363
+ name="country"
364
+ label="Country"
365
+ items={items}
366
+ fullWidth
367
+ />
368
+ ```
369
+
370
+ #### Dropdown with Default Selection
371
+
372
+ ```tsx
373
+ <Field
374
+ component={FormDropDownField}
375
+ name="category"
376
+ label="Category"
377
+ items={categories}
378
+ addInputSelect={true}
379
+ selectText="Select a category"
380
+ helperText="Please select a category from the list"
381
+ />
382
+ ```
383
+
384
+ #### Required Dropdown with Validation
385
+
386
+ ```tsx
387
+ <Formik
388
+ initialValues={{ department: '' }}
389
+ validationSchema={Yup.object({
390
+ department: Yup.string().required('Department is required'),
391
+ })}
392
+ onSubmit={(values) => console.log(values)}
393
+ >
394
+ {({ errors, touched }) => (
395
+ <Form>
396
+ <Field
397
+ component={FormDropDownField}
398
+ name="department"
399
+ label="Department"
400
+ items={departments}
401
+ addInputSelect={true}
402
+ required
403
+ error={touched.department && Boolean(errors.department)}
404
+ helperText={touched.department && errors.department}
405
+ />
406
+ <Button type="submit" variant="contained" color="primary">
407
+ Submit
408
+ </Button>
409
+ </Form>
410
+ )}
411
+ </Formik>
412
+ ```
44
413
 
45
414
  ---
46
415
 
@@ -440,6 +809,199 @@ function CustomCheckbox() {
440
809
  }
441
810
  ```
442
811
 
812
+ ## FormDateTextField
813
+
814
+ A versatile date input field component that provides a text-based date picker with Formik integration and Material-UI styling.
815
+
816
+ ### Features
817
+
818
+ - **Formik Integration**: Seamlessly works with Formik for form state management
819
+ - **Material-UI Styling**: Consistent look and feel with Material Design
820
+ - **Flexible Date Formatting**: Supports custom date formats using day.js
821
+ - **TypeScript Support**: Fully typed component with proper type definitions
822
+ - **Responsive Design**: Works well across different screen sizes
823
+ - **Accessibility**: Built with accessibility in mind
824
+
825
+ ### Available Date Formats
826
+
827
+ The component uses predefined date format constants from `date.ts`:
828
+
829
+ #### FORM_DATE_FORMAT
830
+
831
+ ```typescript
832
+ export const FORM_DATE_FORMAT = {
833
+ short: "YYYY-MM-DD",
834
+ long: "MM/DD/YYYY hh:mm A",
835
+ custom: "DD MMMM YYYY hh:mm A"
836
+ };
837
+ ```
838
+
839
+ #### DATE_PICKER_DATE_FORMAT
840
+
841
+ ```typescript
842
+ export const DATE_PICKER_DATE_FORMAT = {
843
+ short: "DD/MM/YYYY"
844
+ };
845
+ ```
846
+
847
+ #### DATE_PICKER_MONTH_YEAR_FORMAT
848
+
849
+ ```typescript
850
+ export const DATE_PICKER_MONTH_YEAR_FORMAT = {
851
+ short: "MM/YYYY",
852
+ long: "MMMM YYYY"
853
+ };
854
+ ```
855
+
856
+ ### Basic Usage
857
+
858
+ ```tsx
859
+ import { Formik, Field } from 'formik';
860
+ import { FormDateTextField } from 'form-fields';
861
+
862
+ <Formik
863
+ initialValues={{ eventDate: '' }}
864
+ onSubmit={(values) => console.log(values)}
865
+ >
866
+ <Field
867
+ component={FormDateTextField}
868
+ name="eventDate"
869
+ label="Event Date"
870
+ format="MM/DD/YYYY"
871
+ />
872
+ </Formik>
873
+ ```
874
+
875
+ ### Props
876
+
877
+ The FormDateTextField component accepts all props from `FormDateTextFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps` (with some exclusions).
878
+
879
+ #### FormDateTextFieldProps Interface
880
+
881
+ | Prop | Type | Default | Description |
882
+ |------|------|---------|-------------|
883
+ | `format` | `string` | `FORM_DATE_FORMAT.long` | Date format string using day.js tokens |
884
+ | `required` | `boolean` | `false` | Whether the field is required |
885
+ | `disabled` | `boolean` | `false` | Whether the field is disabled |
886
+ | `className` | `string` | - | Custom class name for the root element |
887
+ | `helperText` | `string` | - | Helper text to display below the field |
888
+ | `error` | `boolean` | - | Error state of the field |
889
+ | `onChange` | `(value: Dayjs \| null) => void` | - | Custom change handler |
890
+ | `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
891
+
892
+ #### Common Props (from FieldProps & TextFieldProps)
893
+
894
+ | Prop | Type | Required | Description |
895
+ |------|------|----------|-------------|
896
+ | `name` | `string` | Yes | Field name in Formik values |
897
+ | `label` | `string` | No | Label for the input field |
898
+ | `placeholder` | `string` | No | Placeholder text |
899
+ | `fullWidth` | `boolean` | No | If true, the input will take up the full width of its container |
900
+ | `margin` | `'none' \| 'dense' \| 'normal'` | No | If 'dense' or 'normal', will adjust vertical spacing |
901
+ | `size` | `'small' \| 'medium'` | No | The size of the text field |
902
+
903
+ ### Examples
904
+
905
+ #### Basic Date Text Input
906
+
907
+ ```tsx
908
+ <FormDateTextField
909
+ name="birthDate"
910
+ label="Birth Date"
911
+ format="YYYY-MM-DD"
912
+ helperText="Enter your date of birth"
913
+ required
914
+ />
915
+ ```
916
+
917
+ #### Date Text Field with Formik
918
+
919
+ ```tsx
920
+ import { Formik, Form, Field } from 'formik';
921
+ import { FormDateTextField, FormTextField } from 'form-fields';
922
+ import { Button } from '@mui/material';
923
+
924
+ const EventForm = () => (
925
+ <Formik
926
+ initialValues={{
927
+ eventName: '',
928
+ eventDate: '',
929
+ }}
930
+ onSubmit={(values) => {
931
+ console.log('Form submitted:', values);
932
+ }}
933
+ >
934
+ {({ isSubmitting }) => (
935
+ <Form>
936
+ <Field
937
+ name="eventName"
938
+ label="Event Name"
939
+ component={FormTextField}
940
+ fullWidth
941
+ margin="normal"
942
+ />
943
+
944
+ <Field
945
+ component={FormDateTextField}
946
+ name="eventDate"
947
+ label="Event Date"
948
+ format="MM/DD/YYYY"
949
+ required
950
+ helperText="Select the event date"
951
+ margin="normal"
952
+ />
953
+
954
+ <Button
955
+ type="submit"
956
+ variant="contained"
957
+ color="primary"
958
+ disabled={isSubmitting}
959
+ >
960
+ Submit
961
+ </Button>
962
+ </Form>
963
+ )}
964
+ </Formik>
965
+ );
966
+ ```
967
+
968
+ #### Custom Date Format
969
+
970
+ ```tsx
971
+ <FormDateTextField
972
+ name="appointmentTime"
973
+ label="Appointment Time"
974
+ format="dddd, MMMM D, YYYY h:mm A"
975
+ helperText="Example: Monday, January 1, 2023 2:30 PM"
976
+ required
977
+ />
978
+ ```
979
+
980
+ #### Disabled State
981
+
982
+ ```tsx
983
+ <FormDateTextField
984
+ name="purchaseDate"
985
+ label="Purchase Date"
986
+ value="2023-05-15"
987
+ disabled
988
+ helperText="This field cannot be modified"
989
+ />
990
+ ```
991
+
992
+ #### With Error State
993
+
994
+ ```tsx
995
+ <FormDateTextField
996
+ name="expiryDate"
997
+ label="Expiry Date"
998
+ error={!!errors.expiryDate && touched.expiryDate}
999
+ helperText={touched.expiryDate && errors.expiryDate}
1000
+ format="MM/DD/YYYY"
1001
+ required
1002
+ />
1003
+ ```
1004
+
443
1005
  ## FormMaskField
444
1006
 
445
1007
  A flexible form field component with advanced text masking capabilities.
@@ -1 +1 @@
1
- {"version":3,"file":"FormDateField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateField/FormDateField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;QAC/B,cAAc,EAAE,MAAM,CAAC;KACxB,KACE,IAAI,CAAC;IAEV,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAClD,cAAc,GACd,kBAAkB,CAAC;AAErB,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CAsG/D,CAAC"}
1
+ {"version":3,"file":"FormDateField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateField/FormDateField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;QAC/B,cAAc,EAAE,MAAM,CAAC;KACxB,KACE,IAAI,CAAC;IAEV,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAAG,cAAc,GAAG,kBAAkB,CAAC;AAE3F,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CAsG/D,CAAC"}
@@ -0,0 +1,45 @@
1
+ import { TextFieldProps } from '@mui/material';
2
+ import { FieldProps } from 'formik';
3
+ import { Dayjs } from 'dayjs';
4
+ export interface FormDateTextFieldProps {
5
+ /**
6
+ * Date format string for display
7
+ * Uses dayjs format tokens (e.g., 'YYYY-MM-DD', 'DD/MM/YYYY')
8
+ * Default: FORM_DATE_FORMAT.long
9
+ */
10
+ format?: string;
11
+ /**
12
+ * Whether the field is required
13
+ * @default false
14
+ */
15
+ required?: boolean;
16
+ /**
17
+ * Whether the field is disabled
18
+ * @default false
19
+ */
20
+ disabled?: boolean;
21
+ /**
22
+ * Custom class name for the root element
23
+ */
24
+ className?: string;
25
+ /**
26
+ * Helper text to display below the field
27
+ */
28
+ helperText?: string;
29
+ /**
30
+ * Error state of the field
31
+ */
32
+ error?: boolean;
33
+ /**
34
+ * Custom onChange handler
35
+ */
36
+ onChange?: (value: Dayjs | null) => void;
37
+ /**
38
+ * Custom onBlur handler
39
+ */
40
+ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
41
+ }
42
+ type FormDateTextFieldComponentProps = FormDateTextFieldProps & FieldProps & Omit<TextFieldProps, 'value' | 'onChange' | 'onBlur' | 'name' | 'defaultValue' | 'onError' | 'onFocus' | 'InputProps' | 'slots' | 'slotProps'>;
43
+ export declare const FormDateTextField: ({ field, form, format, disabled, required, className, helperText, error, onChange, onBlur, ...props }: FormDateTextFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
44
+ export {};
45
+ //# sourceMappingURL=FormDateTextField.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FormDateTextField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateTextField/FormDateTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,KAAK,+BAA+B,GAAG,sBAAsB,GAC3D,UAAU,GACV,IAAI,CACF,cAAc,EACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,YAAY,GACZ,OAAO,GACP,WAAW,CACd,CAAC;AAEJ,eAAO,MAAM,iBAAiB,GAAI,uGAY/B,+BAA+B,4CA0CjC,CAAC"}
@@ -0,0 +1,13 @@
1
+ export declare const DATE_PICKER_DATE_FORMAT: {
2
+ short: string;
3
+ };
4
+ export declare const FORM_DATE_FORMAT: {
5
+ short: string;
6
+ long: string;
7
+ custom: string;
8
+ };
9
+ export declare const DATE_PICKER_MONTH_YEAR_FORMAT: {
10
+ short: string;
11
+ long: string;
12
+ };
13
+ //# sourceMappingURL=date.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateTextField/date.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;CAEjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;CAGzC,CAAC"}