form-input-fields 1.0.3 → 1.0.5

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,8 +2,117 @@
2
2
 
3
3
  A collection of Material-UI form field components with Formik integration.
4
4
 
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 @your-org/form-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
+ "peerDependencies": {
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 '@your-org/form-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 [open an issue](https://github.com/your-org/form-fields/issues) with details about your environment and the error message you're seeing.
104
+
105
+
5
106
  ## Table of Contents
6
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)
7
116
  - [FormDateField](#formdatefield)
8
117
  - [Features](#features)
9
118
  - [Available Date Formats](#available-date-formats)
@@ -39,6 +148,135 @@ A collection of Material-UI form field components with Formik integration.
39
148
  - [Basic Checkbox](#basic-checkbox)
40
149
  - [Checkbox with Formik](#checkbox-with-formik)
41
150
  - [Custom Styled Checkbox](#custom-styled-checkbox)
151
+ - [FormDateTextField](#formdatetextfield)
152
+ - [Features](#features-3)
153
+ - [Available Date Formats](#available-date-formats-1)
154
+ - [Basic Usage](#basic-usage-3)
155
+ - [Props](#props-3)
156
+ - [Examples](#examples-3)
157
+ - [Basic Date Text Input](#basic-date-text-input)
158
+ - [Date Text Field with Formik](#date-text-field-with-formik)
159
+ - [Custom Date Format](#custom-date-format)
160
+
161
+ ---
162
+
163
+ ## FormTextField
164
+
165
+ A versatile text input field component that integrates Material-UI's TextField with Formik form handling.
166
+
167
+ ### Features
168
+
169
+ - **Seamless Formik Integration**: Automatically handles form state, validation, and error messages
170
+ - **Material-UI Styling**: Consistent look and feel with Material Design
171
+ - **TypeScript Support**: Fully typed component with proper type definitions
172
+ - **Flexible Props**: Supports all standard TextField props from Material-UI
173
+ - **Error Handling**: Built-in error state management with Formik
174
+ - **Responsive Design**: Works well across different screen sizes
175
+
176
+ ### Basic Usage
177
+
178
+ ```tsx
179
+ import { Formik, Field } from 'formik';
180
+ import { FormTextField } from 'form-fields';
181
+
182
+ <Formik
183
+ initialValues={{ username: '' }}
184
+ onSubmit={(values) => console.log(values)}
185
+ >
186
+ <Field
187
+ component={FormTextField}
188
+ name="username"
189
+ label="Username"
190
+ placeholder="Enter your username"
191
+ />
192
+ </Formik>
193
+ ```
194
+
195
+ ### Props
196
+
197
+ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps`.
198
+
199
+ #### FormTextFieldProps Interface
200
+
201
+ | Prop | Type | Default | Description |
202
+ |------------|------------|---------|-----------------------------------------------|
203
+ | `onChange` | `function` | - | Custom change handler that overrides Formik's |
204
+ | `onBlur` | `function` | - | Custom blur handler that overrides Formik's |
205
+
206
+ #### Common Props (from FieldProps & TextFieldProps)
207
+
208
+ | Prop | Type | Required | Description |
209
+ |--------------|------------------|----------|-----------------------------------------------|
210
+ | `name` | `string` | Yes | Field name in Formik values |
211
+ | `label` | `string` | No | Field label |
212
+ | `helperText` | `string` | No | Custom helper text |
213
+ | `error` | `boolean` | No | Error state (auto-managed by Formik) |
214
+ | `disabled` | `boolean` | No | Disabled state |
215
+ | `required` | `boolean` | No | Required field indicator |
216
+ | `type` | `string` | 'text' | Input type (text, email, password, etc.) |
217
+ | Other | `TextFieldProps` | No | All Material-UI TextField props are supported |
218
+
219
+ ### Examples
220
+
221
+ #### Basic Text Input
222
+
223
+ ```tsx
224
+ <Field
225
+ component={FormTextField}
226
+ name="username"
227
+ label="Username"
228
+ placeholder="Enter your username"
229
+ fullWidth
230
+ margin="normal"
231
+ />
232
+ ```
233
+
234
+ #### Text Field with Formik
235
+
236
+ ```tsx
237
+ <Formik
238
+ initialValues={{ email: '' }}
239
+ validate={values => {
240
+ const errors = {};
241
+ if (!values.email) {
242
+ errors.email = 'Required';
243
+ } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
244
+ errors.email = 'Invalid email address';
245
+ }
246
+ return errors;
247
+ }}
248
+ onSubmit={(values) => console.log(values)}
249
+ >
250
+ {({ errors, touched }) => (
251
+ <Field
252
+ component={FormTextField}
253
+ name="email"
254
+ label="Email"
255
+ type="email"
256
+ error={touched.email && Boolean(errors.email)}
257
+ helperText={touched.email && errors.email}
258
+ required
259
+ />
260
+ )}
261
+ </Formik>
262
+ ```
263
+
264
+ #### Custom Validation
265
+
266
+ ```tsx
267
+ <Field
268
+ component={FormTextField}
269
+ name="password"
270
+ label="Password"
271
+ type="password"
272
+ inputProps={{
273
+ minLength: 8,
274
+ pattern: "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
275
+ }}
276
+ helperText="Must contain at least 8 characters, including uppercase, lowercase, and numbers"
277
+ required
278
+ />
279
+ ```
42
280
 
43
281
  ---
44
282
 
@@ -438,6 +676,199 @@ function CustomCheckbox() {
438
676
  }
439
677
  ```
440
678
 
679
+ ## FormDateTextField
680
+
681
+ A versatile date input field component that provides a text-based date picker with Formik integration and Material-UI styling.
682
+
683
+ ### Features
684
+
685
+ - **Formik Integration**: Seamlessly works with Formik for form state management
686
+ - **Material-UI Styling**: Consistent look and feel with Material Design
687
+ - **Flexible Date Formatting**: Supports custom date formats using day.js
688
+ - **TypeScript Support**: Fully typed component with proper type definitions
689
+ - **Responsive Design**: Works well across different screen sizes
690
+ - **Accessibility**: Built with accessibility in mind
691
+
692
+ ### Available Date Formats
693
+
694
+ The component uses predefined date format constants from `date.ts`:
695
+
696
+ #### FORM_DATE_FORMAT
697
+
698
+ ```typescript
699
+ export const FORM_DATE_FORMAT = {
700
+ short: "YYYY-MM-DD",
701
+ long: "MM/DD/YYYY hh:mm A",
702
+ custom: "DD MMMM YYYY hh:mm A"
703
+ };
704
+ ```
705
+
706
+ #### DATE_PICKER_DATE_FORMAT
707
+
708
+ ```typescript
709
+ export const DATE_PICKER_DATE_FORMAT = {
710
+ short: "DD/MM/YYYY"
711
+ };
712
+ ```
713
+
714
+ #### DATE_PICKER_MONTH_YEAR_FORMAT
715
+
716
+ ```typescript
717
+ export const DATE_PICKER_MONTH_YEAR_FORMAT = {
718
+ short: "MM/YYYY",
719
+ long: "MMMM YYYY"
720
+ };
721
+ ```
722
+
723
+ ### Basic Usage
724
+
725
+ ```tsx
726
+ import { Formik, Field } from 'formik';
727
+ import { FormDateTextField } from 'form-fields';
728
+
729
+ <Formik
730
+ initialValues={{ eventDate: '' }}
731
+ onSubmit={(values) => console.log(values)}
732
+ >
733
+ <Field
734
+ component={FormDateTextField}
735
+ name="eventDate"
736
+ label="Event Date"
737
+ format="MM/DD/YYYY"
738
+ />
739
+ </Formik>
740
+ ```
741
+
742
+ ### Props
743
+
744
+ The FormDateTextField component accepts all props from `FormDateTextFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps` (with some exclusions).
745
+
746
+ #### FormDateTextFieldProps Interface
747
+
748
+ | Prop | Type | Default | Description |
749
+ |------|------|---------|-------------|
750
+ | `format` | `string` | `FORM_DATE_FORMAT.long` | Date format string using day.js tokens |
751
+ | `required` | `boolean` | `false` | Whether the field is required |
752
+ | `disabled` | `boolean` | `false` | Whether the field is disabled |
753
+ | `className` | `string` | - | Custom class name for the root element |
754
+ | `helperText` | `string` | - | Helper text to display below the field |
755
+ | `error` | `boolean` | - | Error state of the field |
756
+ | `onChange` | `(value: Dayjs \| null) => void` | - | Custom change handler |
757
+ | `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
758
+
759
+ #### Common Props (from FieldProps & TextFieldProps)
760
+
761
+ | Prop | Type | Required | Description |
762
+ |------|------|----------|-------------|
763
+ | `name` | `string` | Yes | Field name in Formik values |
764
+ | `label` | `string` | No | Label for the input field |
765
+ | `placeholder` | `string` | No | Placeholder text |
766
+ | `fullWidth` | `boolean` | No | If true, the input will take up the full width of its container |
767
+ | `margin` | `'none' \| 'dense' \| 'normal'` | No | If 'dense' or 'normal', will adjust vertical spacing |
768
+ | `size` | `'small' \| 'medium'` | No | The size of the text field |
769
+
770
+ ### Examples
771
+
772
+ #### Basic Date Text Input
773
+
774
+ ```tsx
775
+ <FormDateTextField
776
+ name="birthDate"
777
+ label="Birth Date"
778
+ format="YYYY-MM-DD"
779
+ helperText="Enter your date of birth"
780
+ required
781
+ />
782
+ ```
783
+
784
+ #### Date Text Field with Formik
785
+
786
+ ```tsx
787
+ import { Formik, Form, Field } from 'formik';
788
+ import { FormDateTextField, FormTextField } from 'form-fields';
789
+ import { Button } from '@mui/material';
790
+
791
+ const EventForm = () => (
792
+ <Formik
793
+ initialValues={{
794
+ eventName: '',
795
+ eventDate: '',
796
+ }}
797
+ onSubmit={(values) => {
798
+ console.log('Form submitted:', values);
799
+ }}
800
+ >
801
+ {({ isSubmitting }) => (
802
+ <Form>
803
+ <Field
804
+ name="eventName"
805
+ label="Event Name"
806
+ component={FormTextField}
807
+ fullWidth
808
+ margin="normal"
809
+ />
810
+
811
+ <Field
812
+ component={FormDateTextField}
813
+ name="eventDate"
814
+ label="Event Date"
815
+ format="MM/DD/YYYY"
816
+ required
817
+ helperText="Select the event date"
818
+ margin="normal"
819
+ />
820
+
821
+ <Button
822
+ type="submit"
823
+ variant="contained"
824
+ color="primary"
825
+ disabled={isSubmitting}
826
+ >
827
+ Submit
828
+ </Button>
829
+ </Form>
830
+ )}
831
+ </Formik>
832
+ );
833
+ ```
834
+
835
+ #### Custom Date Format
836
+
837
+ ```tsx
838
+ <FormDateTextField
839
+ name="appointmentTime"
840
+ label="Appointment Time"
841
+ format="dddd, MMMM D, YYYY h:mm A"
842
+ helperText="Example: Monday, January 1, 2023 2:30 PM"
843
+ required
844
+ />
845
+ ```
846
+
847
+ #### Disabled State
848
+
849
+ ```tsx
850
+ <FormDateTextField
851
+ name="purchaseDate"
852
+ label="Purchase Date"
853
+ value="2023-05-15"
854
+ disabled
855
+ helperText="This field cannot be modified"
856
+ />
857
+ ```
858
+
859
+ #### With Error State
860
+
861
+ ```tsx
862
+ <FormDateTextField
863
+ name="expiryDate"
864
+ label="Expiry Date"
865
+ error={!!errors.expiryDate && touched.expiryDate}
866
+ helperText={touched.expiryDate && errors.expiryDate}
867
+ format="MM/DD/YYYY"
868
+ required
869
+ />
870
+ ```
871
+
441
872
  ## FormMaskField
442
873
 
443
874
  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"}
@@ -1 +1 @@
1
- {"version":3,"file":"FormMaskField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormMaskField/FormMaskField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAS9D,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE;QACL,MAAM,EAAE;YACN,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAC;KACH,GAAG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACpC,IAAI,CAAC;IAEV,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAClD,cAAc,GACd,kBAAkB,CAAC;AAErB,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CAmI/D,CAAC"}
1
+ {"version":3,"file":"FormMaskField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormMaskField/FormMaskField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE;QACL,MAAM,EAAE;YACN,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAC;KACH,GAAG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACpC,IAAI,CAAC;IAEV,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAAG,cAAc,GAAG,kBAAkB,CAAC;AAE3F,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CA8H/D,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { FieldProps } from 'formik';
2
+ import { TextFieldProps } from '@mui/material';
3
+ export interface FormTextFieldProps extends FieldProps, Omit<TextFieldProps, 'name' | 'value' | 'onChange' | 'onBlur'> {
4
+ /** Custom onChange handler that will override Formik's default */
5
+ onChange?: (value: any) => void;
6
+ /** Custom onBlur handler that will override Formik's default */
7
+ onBlur?: (e: React.FocusEvent<any, Element>) => void;
8
+ }
9
+ export declare const FormTextField: (props: FormTextFieldProps) => import("react/jsx-runtime").JSX.Element;
10
+ //# sourceMappingURL=FormTextField.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FormTextField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormTextField/FormTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAA0B,MAAM,eAAe,CAAC;AAEvE,MAAM,WAAW,kBAAmB,SAAQ,UAAU,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IACpH,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAEhC,gEAAgE;IAChE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAyBtD,CAAC"}
package/dist/index.d.ts CHANGED
@@ -2,4 +2,6 @@ export { FormMaskField, type FormMaskFieldProps, } from './controls/FormMaskFiel
2
2
  export { createMask, applyMask, removeMask, generatePlaceholder, type MaskConfig, } from './controls/FormMaskField/FormMaskFiledUtils';
3
3
  export { FormDateField, type FormDateFieldProps, } from './controls/FormDateField/FormDateField';
4
4
  export { FormCheckboxField, type FormCheckboxFieldProps, } from './controls/FormCheckboxField/FormCheckboxField';
5
+ export { FormDateTextField, type FormDateTextFieldProps, } from './controls/FormDateTextField/FormDateTextField';
6
+ export { FormTextField, type FormTextFieldProps, } from './controls/FormTextField/FormTextField';
5
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AAExD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC"}