react-smart-fields 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-smart-fields",
-    "version": "1.0.0",
+    "version": "1.0.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",

package/src/components/DynamicField.tsx

@@ -22,7 +22,7 @@ export interface FieldConfig {
   required?: boolean;
   defaultValue?: any;
   customValidation?: (value: any) => string | null;
-  options?: FieldOption[]; // for select & radio
+  options?: FieldOption[];
   style?: React.CSSProperties;
   className?: string;
 }
@@ -75,12 +75,20 @@ export const DynamicFields: React.FC<DynamicFieldsProps> = ({
     if (onChange) onChange(newFormData, newErrors);
   };
 
+  const defaultInputClass =
+    "padding: 0.6rem 1rem; border: 1px solid #ccc; border-radius: 8px; width: 100%; font-size: 1rem; transition: border-color 0.2s ease-in-out; outline: none;";
+  const defaultInputFocus =
+    "focus: border-color: #007BFF;";
+
   return (
     <>
       {fields.map((field) => (
-        <div key={field.name} style={{ marginBottom: "1rem" }}>
+        <div key={field.name} style={{ marginBottom: "1.25rem" }}>
           {field.label && (
-            <label htmlFor={field.name} style={{ display: "block" }}>
+            <label
+              htmlFor={field.name}
+              style={{ display: "block", marginBottom: "0.5rem", fontWeight: 600 }}
+            >
               {field.label}
             </label>
           )}
@@ -90,7 +98,16 @@ export const DynamicFields: React.FC<DynamicFieldsProps> = ({
             <select
               name={field.name}
               className={field.className}
-              style={field.style}
+              style={{
+                ...field.style,
+                ...{
+                  padding: "0.6rem 1rem",
+                  border: "1px solid #ccc",
+                  borderRadius: "8px",
+                  width: "100%",
+                  fontSize: "1rem",
+                },
+              }}
               value={formData[field.name]}
               onChange={(e) =>
                 handleChange(field.name, e.target.value, field)
@@ -106,44 +123,57 @@ export const DynamicFields: React.FC<DynamicFieldsProps> = ({
           )}
 
           {/* Radio Buttons */}
-          {field.type === "radio" &&
-            field.options?.map((opt) => (
-              <label key={String(opt.value)} style={{ marginRight: "1rem" }}>
-                <input
-                  type="radio"
-                  name={field.name}
-                  value={String(opt.value)}
-                  checked={formData[field.name] === opt.value}
-                  onChange={() =>
-                    handleChange(field.name, opt.value, field)
-                  }
-                />{" "}
-                {opt.label}
-              </label>
-            ))}
+          {field.type === "radio" && (
+            <div style={{ display: "flex", gap: "1rem" }}>
+              {field.options?.map((opt) => (
+                <label key={String(opt.value)} style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
+                  <input
+                    type="radio"
+                    name={field.name}
+                    value={String(opt.value)}
+                    checked={formData[field.name] === opt.value}
+                    onChange={() => handleChange(field.name, opt.value, field)}
+                  />
+                  {opt.label}
+                </label>
+              ))}
+            </div>
+          )}
 
           {/* Checkbox */}
           {field.type === "checkbox" && (
-            <input
-              type="checkbox"
-              name={field.name}
-              checked={formData[field.name]}
-              className={field.className}
-              style={field.style}
-              onChange={(e) =>
-                handleChange(field.name, e.target.checked, field)
-              }
-            />
+            <label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+              <input
+                type="checkbox"
+                name={field.name}
+                checked={formData[field.name]}
+                className={field.className}
+                style={field.style}
+                onChange={(e) =>
+                  handleChange(field.name, e.target.checked, field)
+                }
+              />
+              {field.label}
+            </label>
           )}
 
-          {/* Other Inputs (text, email, number, etc.) */}
+          {/* Text, Email, Number, etc. */}
           {!["select", "radio", "checkbox"].includes(field.type) && (
             <input
               type={field.type}
               name={field.name}
               value={formData[field.name]}
               className={field.className}
-              style={field.style}
+              style={{
+                ...{
+                  padding: "0.6rem 1rem",
+                  border: "1px solid #ccc",
+                  borderRadius: "8px",
+                  width: "100%",
+                  fontSize: "1rem",
+                },
+                ...field.style,
+              }}
               onChange={(e) =>
                 handleChange(field.name, e.target.value, field)
               }
@@ -152,7 +182,7 @@ export const DynamicFields: React.FC<DynamicFieldsProps> = ({
 
           {/* Error Display */}
           {errors[field.name] && (
-            <p style={{ color: "red", marginTop: "0.25rem" }}>
+            <p style={{ color: "red", marginTop: "0.4rem", fontSize: "0.9rem" }}>
               {errors[field.name]}
             </p>
           )}