react-smart-fields 1.1.0 → 1.1.1

package/README.md

@@ -1,4 +1,4 @@
-# 🧩 DynamicFields React Component
+# 🧹 DynamicFields React Component
 
 A flexible, fully-styled dynamic form generator built with **React** and **Tailwind CSS**, supporting custom input types, validation, and class overrides. Ideal for building forms quickly with full control over design and behavior.
 
@@ -6,12 +6,12 @@ A flexible, fully-styled dynamic form generator built with **React** and **Tailw
 
 ## ✨ Features
 
-- 📦 Supports `text`, `number`, `checkbox`, `radio`, and `select` fields
-- 💅 Fully customizable via Tailwind-compatible className props
-- 🧠 Built-in required field validation
-- 🧱 Extensible for advanced usage
-- 🌓 Full **dark mode** support
-- 🔄 Real-time `onChange` callback with live `formData` and `errors`
+* 📦 Supports `text`, `number`, `checkbox`, `radio`, and `select` fields
+* 💅 Fully customizable via Tailwind-compatible className props
+* 🧠 Built-in required field validation
+* 🧱 Extensible for advanced usage
+* 🌃 Full **dark mode** support
+* 🔄 Real-time `onChange` callback with live `formData` and `errors`
 
 ---
 
@@ -84,3 +84,102 @@ function App() {
     />
   );
 }
+```
+
+---
+
+## ⚙️ Props
+
+| Prop                 | Type                                  | Required | Description                       |
+| -------------------- | ------------------------------------- | -------- | --------------------------------- |
+| `fields`             | `FieldConfig[]`                       | ✅ Yes    | List of field definitions         |
+| `onChange`           | `(data: Record<string, any>) => void` | ✅ Yes    | Callback on value change          |
+| `title`              | `string`                              | ❌ No     | Optional form title               |
+| `description`        | `string`                              | ❌ No     | Optional description              |
+| `className`          | `string`                              | ❌ No     | Wrapper div styling               |
+| `mainFieldClassName` | `string`                              | ❌ No     | Class for the fields wrapper      |
+| `inputClassName`     | `string`                              | ❌ No     | Applies to `text`/`number` inputs |
+| `labelClassName`     | `string`                              | ❌ No     | Applies to all labels             |
+| `fieldClassName`     | `string`                              | ❌ No     | Applied to each field wrapper div |
+| `errorClassName`     | `string`                              | ❌ No     | Error message styling             |
+| `selectClassName`    | `string`                              | ❌ No     | `select` field styling            |
+| `checkboxClassName`  | `string`                              | ❌ No     | Checkbox input styling            |
+| `radioClassName`     | `string`                              | ❌ No     | Radio input styling               |
+| `optionClassName`    | `string`                              | ❌ No     | Dropdown option styling           |
+
+---
+
+## 🔧 `FieldConfig` (field definition)
+
+Each field object can contain:
+
+| Property      | Type                                                      | Required                          | Notes                                  |
+| ------------- | --------------------------------------------------------- | --------------------------------- | -------------------------------------- |
+| `name`        | `string`                                                  | ✅ Yes                             | Unique key                             |
+| `label`       | `string`                                                  | ❌ No                              | Display label                          |
+| `type`        | `"text"`, `"number"`, `"select"`, `"radio"`, `"checkbox"` | ✅ Yes                             | Field type                             |
+| `required`    | `boolean`                                                 | ❌ No                              | Show red asterisk and basic validation |
+| `placeholder` | `string`                                                  | ❌ No                              | Placeholder (for inputs/selects)       |
+| `description` | `string`                                                  | ❌ No                              | Optional helper text                   |
+| `options`     | `{ label: string; value: any; }[]`                        | Required for `select` and `radio` | Dropdown/Radio values                  |
+
+---
+
+## 🎨 Class Mapping
+
+Here's how classes are applied to each section:
+
+| Section             | Class Prop          | Default Tailwind Example           |
+| ------------------- | ------------------- | ---------------------------------- |
+| Wrapper div         | `className`         | `bg-white dark:bg-gray-900`        |
+| Label text          | `labelClassName`    | `text-gray-800 dark:text-gray-200` |
+| Input fields        | `inputClassName`    | `bg-white dark:bg-gray-800`        |
+| Select dropdown     | `selectClassName`   | `rounded-lg`                       |
+| Radio buttons       | `radioClassName`    | `rounded-full`                     |
+| Checkbox            | `checkboxClassName` | `rounded`                          |
+| Field container div | `fieldClassName`    | `w-full`                           |
+| Dropdown options    | `optionClassName`   | `hover:bg-gray-100`                |
+| Error messages      | `errorClassName`    | `text-red-500`                     |
+
+You can override all styles with your own Tailwind classes!
+
+---
+
+## 🧪 Advanced Usage: Custom Styling Per Field
+
+You can add `inputClassName`, `labelClassName`, or `className` inside each field:
+
+```ts
+{
+  name: "email",
+  label: "Email",
+  type: "text",
+  inputClassName: "border-purple-500",
+  labelClassName: "text-purple-700 font-semibold",
+  className: "mb-6",
+}
+```
+
+---
+
+## 🧑‍💻 Author
+
+**Name:** Shubham Nakum
+**GitHub:** [@ShubhamNakum](https://github.com/ShubhamNakum)
+**Website:** [https://shubhamnakum.in](https://shubhamnakum.in) *(Optional link)*
+
+---
+
+## 📄 License
+
+MIT — Free to use, modify and distribute.
+
+---
+
+## 🛠 Contributing
+
+Pull requests are welcome! If you find bugs, feel free to [open an issue](https://github.com/ShubhamNakum/DynamicFields/issues).
+
+---
+
+> This component is built to be your plug-and-play form builder. Customize it. Theme it. Extend it. It’s yours.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-smart-fields",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "> A flexible, customizable, and developer-friendly component to generate dynamic form fields in React. Supports all HTML inputs, validation, and styling out of the box.",
     "license": "MIT",
     "author": "Pratik Panchal",