@react-solutions/inputs 1.0.2 → 1.2.0

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 (8) hide show
  1. package/README.md +162 -98
  2. package/dist/index.d.mts +3116 -60
  3. package/dist/index.d.ts +3116 -60
  4. package/dist/index.js +1 -1
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1 -1
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,98 +1,162 @@
1
- # @react-solutions/inputs
2
-
3
- <div align="center">
4
-
5
- [![npm version](https://img.shields.io/npm/v/@react-solutions/inputs.svg?color=blue&style=for-the-badge)](https://www.npmjs.com/package/@react-solutions/inputs)
6
- [![npm downloads](https://img.shields.io/npm/dm/@react-solutions/inputs.svg?color=green&style=for-the-badge)](https://www.npmjs.com/package/@react-solutions/inputs)
7
- [![bundle size](https://img.shields.io/bundlephobia/minzip/@react-solutions/inputs?color=orange&style=for-the-badge)](https://bundlephobia.com/package/@react-solutions/inputs)
8
-
9
- </div>
10
- Lightweight React form input components and react-hook-form wrappers.
11
-
12
- Quick highlights:
13
-
14
- - Exports two families: direct controlled components and react-hook-form wrappers.
15
- - Built with TypeScript. Declarations are emitted on build.
16
-
17
- ## Install
18
-
19
- Install the package and peer dependencies in the consuming app:
20
-
21
- ```bash
22
- npm install @react-solutions/inputs
23
- # ensure peer deps exist in the host app:
24
- npm install react react-dom @mui/material @emotion/react @emotion/styled react-hook-form date-fns
25
- ```
26
-
27
- ## Usage
28
-
29
- 1. controlled components (use with useState)
30
-
31
- Example: `@react-solutions/inputs` demonstrates using components like `TextInputField` and `SelectInputField` with `value` / `onChange` props.
32
-
33
- ```tsx
34
- import { TextInputField, SelectInputField } from "@react-solutions/inputs";
35
- // in component:
36
- <TextInputField
37
- name="name"
38
- value={name}
39
- onChange={(e) => setName(e.target.value)}
40
- />;
41
- ```
42
-
43
- 2. react-hook-form wrappers (preferred when using react-hook-form)
44
-
45
- Example: `@react-solutions/inputs` shows usage of `FormInputTextField`, `FormInputSelect`, etc.
46
-
47
- ```tsx
48
- import { FormInputTextField, FormInputSelect } from "@react-solutions/inputs";
49
- // inside a form using react-hook-form's control:
50
- <FormInputTextField
51
- name="email"
52
- label="Email"
53
- control={control}
54
- errors={errors}
55
- />;
56
- ```
57
-
58
- ## Peer dependencies
59
-
60
- This package declares several peerDependencies. Consumers must provide compatible versions of:
61
-
62
- - react, react-dom
63
- - @mui/material, @emotion/react, @emotion/styled
64
- - @mui/x-date-pickers (for date/time inputs)
65
- - react-hook-form (for HookForm wrappers)
66
- - date-fns
67
-
68
- See `package.json` for exact version ranges.
69
-
70
- ## 🌍 **Browser Support**
71
-
72
- <div align="left">
73
-
74
- | Browser | Version | Status |
75
- | ----------------------------------------------------------------------------- | ------- | ------------ |
76
- | ![Chrome](https://img.shields.io/badge/Chrome-60%2B-green?logo=google-chrome) | 60+ | ✅ Supported |
77
- | ![Firefox](https://img.shields.io/badge/Firefox-60%2B-green?logo=firefox) | 60+ | ✅ Supported |
78
- | ![Safari](https://img.shields.io/badge/Safari-12%2B-green?logo=safari) | 12+ | ✅ Supported |
79
- | ![Edge](https://img.shields.io/badge/Edge-79%2B-green?logo=microsoft-edge) | 79+ | ✅ Supported |
80
-
81
- </div>
82
-
83
- ## License
84
-
85
- MIT
86
-
87
- <div align="center">
88
-
89
- ![license](https://img.shields.io/badge/MIT-red?style=for-the-badge)
90
- ![license](https://img.shields.io/badge/License-Proprietary-red?style=for-the-badge)
91
-
92
- </div>
93
-
94
- ## 📝 TypeScript Support
95
-
96
- This package is written in TypeScript and includes full type definitions. All exported functions and hooks are fully typed.
97
-
98
- Made with ❤️ for React developers
1
+ # @react-solutions/inputs
2
+
3
+ <div align="center">
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@react-solutions/inputs.svg?color=blue&style=for-the-badge)](https://www.npmjs.com/package/@react-solutions/inputs)
6
+ [![npm downloads](https://img.shields.io/npm/dm/@react-solutions/inputs.svg?color=green&style=for-the-badge)](https://www.npmjs.com/package/@react-solutions/inputs)
7
+ [![bundle size](https://img.shields.io/bundlephobia/minzip/@react-solutions/inputs?color=orange&style=for-the-badge)](https://bundlephobia.com/package/@react-solutions/inputs)
8
+
9
+ </div>
10
+
11
+ A professional, comprehensive library of React form components built on top of **Material UI**. It offers two powerful ways to build forms: **Standard Controlled Components** for manual state management and **HookForm Components** for seamless integration with `react-hook-form`.
12
+
13
+ ## 🚀 Key Features
14
+
15
+ - 🏗️ **Dual Architecture** - Choose between pure controlled components or battle-tested `react-hook-form` wrappers.
16
+ - 🎨 **Material UI Based** - Premium look and feel out of the box with full customization support.
17
+ - 🛡️ **Type-Safe** - Written in TypeScript with exhaustive prop definitions and intellisense.
18
+ - 📋 **Dynamic Form Builders** - Includes `DemoForm` and `DemoHookForm` to build entire forms from a simple JSON schema.
19
+ - ⚡ **Optimized Performance** - Lightweight wrappers that minimize re-renders.
20
+ - 🌍 **Next.js & React Ready** - Full compatibility with Next.js App Router (Client Components) and standard React SPAs.
21
+
22
+ ## 📦 Compatibility
23
+
24
+ ### Next.js (App Router)
25
+
26
+ All components in this library are client components, making them fully compatible with the Next.js App Router. They can be imported and used directly within your client-side components.
27
+
28
+ ### React (CRA / Vite)
29
+
30
+ Works out of the box with any React environment. No additional configuration required.
31
+
32
+ ## 📦 Installation
33
+
34
+ ```bash
35
+ npm install @react-solutions/inputs
36
+ ```
37
+
38
+ ### Peer Dependencies
39
+
40
+ Ensure the following packages are installed in your project:
41
+
42
+ ```bash
43
+ npm install @mui/material @emotion/react @emotion/styled react-hook-form date-fns @mui/x-date-pickers
44
+ ```
45
+
46
+ ---
47
+
48
+ ## 🛠 Available Fields Group-wise
49
+
50
+ ### 1. Text & Numeric Inputs
51
+
52
+ Standard text-based inputs with built-in validation support and consistent styling.
53
+
54
+ | Standard Component | HookForm Wrapper | Description |
55
+ | :----------------- | :----------------------- | :-------------------------------------------- |
56
+ | `TextInputField` | `FormInputTextField` | Standard text input for names, emails, etc. |
57
+ | `PasswordField` | `FormInputPasswordField` | Secure password field with visibility toggle. |
58
+ | `NumberField` | `FormInputNumberField` | Optimized for numeric values. |
59
+ | `TelInputField` | `FormInputTelField` | Formatted for telephone numbers. |
60
+ | `SearchInputField` | `FormInputSearchField` | Specialized search input with clear icon. |
61
+ | `OTPField` | `FormInputOTPField` | Multi-digit OTP input for authentication. |
62
+ | `TextArea` | `FormInputTextArea` | Multi-line text input for long descriptions. |
63
+
64
+ ---
65
+
66
+ ### 2. Selection & Dropdowns
67
+
68
+ Powerful selection components ranging from simple selects to complex multi-autocomplete fields.
69
+
70
+ | Standard Component | HookForm Wrapper | Description |
71
+ | :------------------ | :--------------------------- | :------------------------------------- |
72
+ | `SelectInputField` | `FormInputSelect` | Standard dropdown selection. |
73
+ | - | `FormInputMultiSelect` | Multi-select dropdown with chips. |
74
+ | `AutoCompleteField` | `FormInputAutoComplete` | Searchable dropdown with autocomplete. |
75
+ | - | `FormInputMultiAutoComplete` | Searchable multi-selection. |
76
+
77
+ ---
78
+
79
+ ### 3. Choices & Toggles
80
+
81
+ Boolean and multiple-choice inputs for settings and preferences.
82
+
83
+ | Standard Component | HookForm Wrapper | Description |
84
+ | :---------------------- | :-------------------------- | :------------------------------------------- |
85
+ | `CheckBoxField` | `FormInputCheckBox` | Single checkbox for boolean values. |
86
+ | `CheckBoxFieldGroup` | `FormInputCheckBoxGroup` | Group of checkboxes for multiple selections. |
87
+ | `RadioButtonField` | `FormInputSingleRadio` | Single radio button. |
88
+ | `RadioButtonFieldGroup` | `FormInputRadioButtonGroup` | Standard radio group for single choice. |
89
+ | `SwitchField` | `FormInputSwitch` | On/Off toggle switch. |
90
+ | `SliderField` | `FormInputSlider` | Range slider for numeric ranges. |
91
+ | `ToggleButtonField` | `FormInputToggleButton` | Button-style toggle selection. |
92
+
93
+ ---
94
+
95
+ ### 4. Date & Time Pickers
96
+
97
+ Rich date and time selection components using `@mui/x-date-pickers`.
98
+
99
+ | Standard Component | HookForm Wrapper | Description |
100
+ | :------------------ | :-------------------- | :--------------------------------------- |
101
+ | `DatePickerField` | `FormInputDatePicker` | Full date picker with calendar. |
102
+ | `TimePickerField` | `FormInputTimePicker` | Time selection with clock interface. |
103
+ | `TimeClockField` | `FormInputTimeClock` | Dedicated analog-style clock selection. |
104
+ | `DateCalendarField` | `FormInputCalendar` | Inline calendar view for date selection. |
105
+
106
+ ---
107
+
108
+ ### 5. Specialty Inputs
109
+
110
+ | Standard Component | HookForm Wrapper | Description |
111
+ | :----------------- | :--------------------- | :------------------------------------------- |
112
+ | `ColorPickerField` | `FormInputColorPicker` | Visual color selection tool. |
113
+ | `FileUploadField` | `FormInputFileUpload` | Styled file upload and dropzone integration. |
114
+
115
+ ---
116
+
117
+ ## 🏗 Dynamic Form Builders (Demo Forms)
118
+
119
+ For rapid development, we provide two high-level components that can render entire forms from a configuration object. This is ideal for checking field behavior or building dynamic admin panels.
120
+
121
+ ### Standard Demo Form
122
+
123
+ Used for building forms that manage their own internal state or use external controlled state.
124
+
125
+ ```tsx
126
+ import { DemoForm } from "@react-solutions/inputs";
127
+
128
+ <DemoForm />;
129
+ ```
130
+
131
+ ### HookForm Demo Form
132
+
133
+ The ultimate way to build complex, validated forms with `react-hook-form`.
134
+
135
+ ```tsx
136
+ import { DemoHookForm } from "@react-solutions/inputs";
137
+
138
+ <DemoHookForm />;
139
+ ```
140
+
141
+ ---
142
+
143
+ ## 🌍 Browser Support
144
+
145
+ | Browser | Version | Status |
146
+ | :------ | :------ | :----------- |
147
+ | Chrome | 60+ | ✅ Supported |
148
+ | Firefox | 60+ | ✅ Supported |
149
+ | Safari | 12+ | ✅ Supported |
150
+ | Edge | 79+ | ✅ Supported |
151
+
152
+ ## 🤝 Contributing
153
+
154
+ Contributions are welcome! Please feel free to submit a Pull Request.
155
+
156
+ ## 📄 License
157
+
158
+ MIT
159
+
160
+ ---
161
+
162
+ Made with ❤️ for React developers