@forms.expert/sdk 0.4.2 → 0.4.4

package/dist/react/index.d.cts

@@ -94,7 +94,11 @@ interface FormStyling {
     formWidth?: 'narrow' | 'medium' | 'wide' | 'full';
     fieldLayout?: 'stacked' | 'inline';
     fieldBorderStyle?: 'full' | 'bottom';
+    fieldBorderColor?: string;
     fieldBorderRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    fieldPaddingX?: number;
+    fieldPaddingY?: number;
+    separatorColor?: string;
     buttonColor?: string;
     buttonText?: string;
     buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';

package/dist/react/index.d.ts

@@ -94,7 +94,11 @@ interface FormStyling {
     formWidth?: 'narrow' | 'medium' | 'wide' | 'full';
     fieldLayout?: 'stacked' | 'inline';
     fieldBorderStyle?: 'full' | 'bottom';
+    fieldBorderColor?: string;
     fieldBorderRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    fieldPaddingX?: number;
+    fieldPaddingY?: number;
+    separatorColor?: string;
     buttonColor?: string;
     buttonText?: string;
     buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';

package/dist/react/index.js

@@ -1058,7 +1058,7 @@ function FormsExpertForm({
         form[data-fe-scope="${formScopeId}"] button[type="submit"]:active:not(:disabled) { filter: brightness(0.85); transform: scale(0.98); }
         form[data-fe-scope="${formScopeId}"] a[href]:hover { filter: brightness(0.9); }
         form[data-fe-scope="${formScopeId}"] a[href]:active { filter: brightness(0.85); }
-        form[data-fe-scope="${formScopeId}"] input:focus,
+        form[data-fe-scope="${formScopeId}"] input:not([type="checkbox"]):not([type="radio"]):focus,
         form[data-fe-scope="${formScopeId}"] textarea:focus,
         form[data-fe-scope="${formScopeId}"] select:focus {
           outline: none !important;
@@ -1282,11 +1282,13 @@ function FormFieldInput({
   const fontSize = getFontSize(styling.fontSize);
   const isInline = styling.labelPosition === "left" || styling.fieldLayout === "inline";
   const isBottomBorder = styling.fieldBorderStyle === "bottom";
+  const fieldPadding = styling.fieldPaddingX != null || styling.fieldPaddingY != null ? `${styling.fieldPaddingY ?? 8}px ${styling.fieldPaddingX ?? 12}px` : "0.5rem 0.75rem";
+  const defaultBorderColor = error ? "#ef4444" : styling.fieldBorderColor || (styling.theme === "dark" ? "#4b5563" : "#d1d5db");
   const inputStyle = {
     width: "100%",
-    padding: "0.5rem 0.75rem",
-    border: isBottomBorder ? "none" : `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}`,
-    ...isBottomBorder ? { borderBottom: `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}` } : {},
+    padding: fieldPadding,
+    border: isBottomBorder ? "none" : `1px solid ${defaultBorderColor}`,
+    ...isBottomBorder ? { borderBottom: `1px solid ${defaultBorderColor}` } : {},
     borderRadius: isBottomBorder ? 0 : fieldRadius,
     fontSize,
     fontFamily: "inherit",
@@ -1304,7 +1306,7 @@ function FormFieldInput({
     ] });
   }
   if (field.type === "divider") {
-    return /* @__PURE__ */ jsx2("hr", { style: { marginBottom: fieldSpacing, border: "none", borderTop: `1px solid ${styling.theme === "dark" ? "#4b5563" : "#d1d5db"}` } });
+    return /* @__PURE__ */ jsx2("hr", { style: { marginBottom: fieldSpacing, border: "none", borderTop: `1px solid ${styling.separatorColor || (styling.theme === "dark" ? "#4b5563" : "#d1d5db")}` } });
   }
   if (field.type === "paragraph") {
     const pSize = field.paragraphFontSize ? `${field.paragraphFontSize}px` : getParagraphSize(styling.paragraphSize);
@@ -1334,7 +1336,7 @@ function FormFieldInput({
           checked: Boolean(value),
           onChange,
           required: field.required,
-          style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor, marginTop: "0.125rem", flexShrink: 0 }
+          style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor, marginTop: "0.125rem", flexShrink: 0, backgroundColor: "transparent" }
         }
       ),
       /* @__PURE__ */ jsxs("div", { children: [
@@ -1514,18 +1516,91 @@ function FormFieldInput({
       opt.value
     )) });
   } else if (field.type === "file") {
-    fieldEl = /* @__PURE__ */ jsx2(
-      "input",
+    const fileValue = value;
+    const formatSize = (size) => size < 1024 ? `${size} B` : size < 1048576 ? `${(size / 1024).toFixed(1)} KB` : `${(size / 1048576).toFixed(1)} MB`;
+    const borderColor = error ? styling.errorColor || "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db";
+    const mutedColor = styling.theme === "dark" ? "#9ca3af" : "#6b7280";
+    fieldEl = /* @__PURE__ */ jsxs(
+      "label",
       {
-        type: "file",
-        id: field.name,
-        name: field.name,
-        onChange,
-        required: field.required,
-        accept: field.allowedMimeTypes?.join(","),
-        multiple: field.multiple,
-        style: inputStyle,
-        className: styling.fieldClassName
+        htmlFor: field.name,
+        style: {
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.5rem",
+          borderRadius: fieldRadius,
+          border: `2px dashed ${borderColor}`,
+          padding: "1.5rem",
+          cursor: "pointer",
+          transition: "border-color 0.15s, background-color 0.15s",
+          backgroundColor: fileValue ? styling.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)" : "transparent"
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.currentTarget.style.borderColor = styling.primaryColor || "#3b82f6";
+          e.currentTarget.style.backgroundColor = styling.theme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.04)";
+        },
+        onDragLeave: (e) => {
+          e.currentTarget.style.borderColor = borderColor;
+          e.currentTarget.style.backgroundColor = fileValue ? styling.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)" : "transparent";
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          e.currentTarget.style.borderColor = borderColor;
+          e.currentTarget.style.backgroundColor = "transparent";
+          const file = e.dataTransfer.files?.[0];
+          if (file) onValueChange(field.name, file);
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              id: field.name,
+              name: field.name,
+              type: "file",
+              style: { position: "absolute", width: "1px", height: "1px", overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: 0 },
+              onChange,
+              required: field.required,
+              accept: field.allowedMimeTypes?.join(","),
+              multiple: field.multiple
+            }
+          ),
+          fileValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: styling.primaryColor || "#3b82f6", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx2("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+              /* @__PURE__ */ jsx2("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+            ] }),
+            /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.875rem", fontWeight: 500, maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: fileValue.name }),
+            /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.75rem", color: mutedColor }, children: formatSize(fileValue.size) }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                style: { fontSize: "0.75rem", color: styling.errorColor || "#ef4444", background: "none", border: "none", cursor: "pointer", marginTop: "0.25rem", textDecoration: "underline" },
+                onClick: (e) => {
+                  e.preventDefault();
+                  onValueChange(field.name, void 0);
+                },
+                children: "Remove"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: mutedColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx2("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+              /* @__PURE__ */ jsx2("polyline", { points: "17 8 12 3 7 8" }),
+              /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+            ] }),
+            /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.875rem", fontWeight: 500 }, children: "Drag & drop a file here, or click to browse" }),
+            field.allowedMimeTypes && field.allowedMimeTypes.length > 0 && /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.75rem", color: mutedColor }, children: field.allowedMimeTypes.join(", ") }),
+            field.maxFileSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.75rem", color: mutedColor }, children: [
+              "Max size: ",
+              formatSize(field.maxFileSize)
+            ] })
+          ] })
+        ]
       }
     );
   } else if (field.type === "name") {