@forms.expert/sdk 0.1.2 → 0.1.4

package/dist/react/index.js

@@ -31,7 +31,7 @@ var FormsApiClient = class {
   constructor(config) {
     this.apiKey = config.apiKey;
     this.resourceId = config.resourceId;
-    this.baseUrl = (config.baseUrl || "https://api.formsapp.io/api/v1").replace(/\/$/, "");
+    this.baseUrl = (config.baseUrl || "https://api.forms.expert/api/v1").replace(/\/$/, "");
   }
   /**
    * Build URL with token query parameter
@@ -554,6 +554,22 @@ function getBorderRadius(radius) {
       return "0.375rem";
   }
 }
+function getButtonRadius(radius) {
+  switch (radius) {
+    case "none":
+      return "0";
+    case "small":
+      return "4px";
+    case "medium":
+      return "8px";
+    case "large":
+      return "12px";
+    case "full":
+      return "9999px";
+    default:
+      return "8px";
+  }
+}
 function getFontSize(size) {
   switch (size) {
     case "sm":
@@ -566,6 +582,94 @@ function getFontSize(size) {
       return "1rem";
   }
 }
+function getPlaceholderFontSize(size) {
+  switch (size) {
+    case "small":
+      return "0.75rem";
+    case "large":
+      return "1rem";
+    default:
+      return "0.875rem";
+  }
+}
+function getFieldSpacing(spacing) {
+  switch (spacing) {
+    case "compact":
+      return "0.5rem";
+    case "relaxed":
+      return "1.5rem";
+    case "spacious":
+      return "2rem";
+    default:
+      return "1rem";
+  }
+}
+function getFormPadding(padding) {
+  switch (padding) {
+    case "compact":
+      return "1rem";
+    case "relaxed":
+      return "2.5rem";
+    case "spacious":
+      return "3.5rem";
+    default:
+      return "1.5rem";
+  }
+}
+function getLabelSpacing(spacing) {
+  switch (spacing) {
+    case "compact":
+      return "0.125rem";
+    case "relaxed":
+      return "0.75rem";
+    default:
+      return "0.25rem";
+  }
+}
+function getFormMaxWidth(width) {
+  switch (width) {
+    case "narrow":
+      return "28rem";
+    case "wide":
+      return "48rem";
+    case "full":
+      return "100%";
+    default:
+      return "36rem";
+  }
+}
+function getButtonAlign(align) {
+  switch (align) {
+    case "left":
+      return "flex-start";
+    case "right":
+      return "flex-end";
+    default:
+      return "center";
+  }
+}
+function getHeadingSize(size) {
+  switch (size) {
+    case "small":
+      return "1.125rem";
+    case "large":
+      return "1.875rem";
+    case "extra-large":
+      return "2.25rem";
+    default:
+      return "1.5rem";
+  }
+}
+function getParagraphSize(size) {
+  switch (size) {
+    case "small":
+      return "0.875rem";
+    case "large":
+      return "1.125rem";
+    default:
+      return "1rem";
+  }
+}
 function FormsExpertForm({
   config,
   slug,
@@ -671,7 +775,17 @@ function FormsExpertForm({
   };
   const styling = form.config?.schema?.styling || defaultStyling;
   const radius = getBorderRadius(styling.borderRadius);
+  const btnRadius = getButtonRadius(styling.buttonRadius);
   const fontSize = getFontSize(styling.fontSize);
+  const phFontSize = getPlaceholderFontSize(styling.placeholderFontSize);
+  const fieldSpacing = getFieldSpacing(styling.fieldSpacing);
+  const formPadding = getFormPadding(styling.formPadding);
+  const labelSpacing = getLabelSpacing(styling.labelSpacing);
+  const formMaxWidth = getFormMaxWidth(styling.formWidth);
+  const btnColor = styling.buttonColor || styling.primaryColor;
+  const fontFamily = styling.fontFamily || "system-ui, -apple-system, sans-serif";
+  const btnAlign = getButtonAlign(styling.buttonAlign);
+  const resolvedButtonText = styling.buttonText || submitText;
   const handleSubmit = async (e) => {
     e.preventDefault();
     const result = await form.submit(captchaToken || void 0);
@@ -720,19 +834,26 @@ function FormsExpertForm({
     );
   }
   if (form.isSubmitted) {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx2(
       "div",
       {
         className,
         style: {
-          padding: "2rem",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100%",
+          padding: formPadding,
           textAlign: "center",
-          backgroundColor: styling.backgroundColor,
+          backgroundColor: styling.transparentBackground ? "transparent" : styling.backgroundColor,
           color: styling.textColor,
           borderRadius: radius,
+          maxWidth: formMaxWidth,
+          margin: "0 auto",
+          fontFamily,
           ...style
         },
-        children: [
+        children: /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx2(
             "svg",
             {
@@ -740,7 +861,7 @@ function FormsExpertForm({
                 width: "3rem",
                 height: "3rem",
                 margin: "0 auto 1rem",
-                color: "#22c55e"
+                color: styling.successColor || "#22c55e"
               },
               fill: "none",
               stroke: "currentColor",
@@ -764,39 +885,69 @@ function FormsExpertForm({
               onClick: form.reset,
               style: {
                 marginTop: "1rem",
-                padding: "0.5rem 1rem",
-                backgroundColor: "transparent",
+                background: "none",
+                border: "none",
                 color: styling.primaryColor,
-                border: `1px solid ${styling.primaryColor}`,
-                borderRadius: radius,
-                cursor: "pointer"
+                textDecoration: "underline",
+                cursor: "pointer",
+                fontSize: "0.875rem"
               },
-              children: "Submit another response"
+              children: "Submit again"
             }
           )
-        ]
+        ] })
       }
     );
   }
   const fields = form.config.schema?.fields || [];
   const showBranding = form.config.branding?.enabled !== false;
-  const brandingText = form.config.branding?.text || "Powered by Mira";
-  const brandingUrl = form.config.branding?.url || "https://mira.io";
-  return /* @__PURE__ */ jsxs(
+  const brandingText = form.config.branding?.text || "Powered by forms.expert";
+  const brandingUrl = form.config.branding?.url || "https://forms.expert";
+  const wrapperStyle = {
+    ...styling.backgroundImageUrl ? {
+      backgroundImage: `url(${styling.backgroundImageUrl})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    } : {},
+    position: "relative"
+  };
+  const formEl = /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: handleSubmit,
       className,
       style: {
-        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontFamily,
         fontSize,
-        backgroundColor: styling.backgroundColor,
+        backgroundColor: styling.transparentBackground ? "transparent" : styling.backgroundColor,
         color: styling.textColor,
-        padding: "1.5rem",
+        padding: formPadding,
         borderRadius: radius,
+        maxWidth: formMaxWidth,
+        width: "100%",
+        margin: "0 auto",
+        position: "relative",
         ...style
       },
       children: [
+        styling.logoUrl && /* @__PURE__ */ jsx2("div", { style: {
+          textAlign: styling.logoPosition === "top-left" ? "left" : styling.logoPosition === "top-right" ? "right" : "center",
+          marginBottom: "1rem"
+        }, children: /* @__PURE__ */ jsx2("img", { src: styling.logoUrl, alt: "", style: { maxHeight: "48px" } }) }),
+        styling.coverImageUrl && /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src: styling.coverImageUrl,
+            alt: "",
+            style: {
+              width: "100%",
+              maxHeight: "200px",
+              objectFit: "cover",
+              borderRadius: `${radius} ${radius} 0 0`,
+              marginBottom: "1rem"
+            }
+          }
+        ),
         fields.map((field) => /* @__PURE__ */ jsx2(
           FormFieldInput,
           {
@@ -804,34 +955,37 @@ function FormsExpertForm({
             value: form.values[field.name],
             error: form.errors[field.name],
             onChange: handleChange,
-            styling
+            onValueChange: (name, val) => form.setValue(name, val),
+            styling,
+            fieldSpacing,
+            labelSpacing,
+            phFontSize
           },
           field.name
         )),
         form.honeypotEnabled && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", left: "-9999px", opacity: 0, height: 0, overflow: "hidden" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx2("input", { type: "text", name: "_hp", tabIndex: -1, autoComplete: "off" }) }),
         form.requiresCaptcha && form.captchaProvider !== "recaptcha" && /* @__PURE__ */ jsx2("div", { ref: captchaContainerRef, style: { marginTop: "1rem" } }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx2("div", { style: { display: "flex", justifyContent: btnAlign, marginTop: "1rem" }, children: /* @__PURE__ */ jsx2(
           "button",
           {
             type: "submit",
             disabled: form.isLoading,
             style: {
-              width: "100%",
+              ...styling.buttonAlign ? {} : { width: "100%" },
               padding: "0.625rem 1.25rem",
-              marginTop: "1rem",
               fontWeight: 500,
               fontSize,
               fontFamily: "inherit",
-              borderRadius: radius,
+              borderRadius: btnRadius,
               cursor: form.isLoading ? "not-allowed" : "pointer",
               opacity: form.isLoading ? 0.5 : 1,
-              backgroundColor: styling.buttonStyle === "filled" ? styling.primaryColor : "transparent",
-              color: styling.buttonStyle === "filled" ? "white" : styling.primaryColor,
-              border: styling.buttonStyle === "filled" ? "none" : `2px solid ${styling.primaryColor}`
+              backgroundColor: styling.buttonStyle === "filled" ? btnColor : "transparent",
+              color: styling.buttonStyle === "filled" ? "white" : btnColor,
+              border: styling.buttonStyle === "filled" ? "none" : `2px solid ${btnColor}`
             },
-            children: form.isLoading ? "Submitting..." : submitText
+            children: form.isLoading ? "Submitting..." : resolvedButtonText
           }
-        ),
+        ) }),
         showBranding && /* @__PURE__ */ jsx2(
           "div",
           {
@@ -860,16 +1014,33 @@ function FormsExpertForm({
       ]
     }
   );
+  if (styling.backgroundImageUrl) {
+    return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, children: [
+      styling.backgroundOverlay ? /* @__PURE__ */ jsx2("div", { style: {
+        position: "absolute",
+        inset: 0,
+        backgroundColor: `rgba(0,0,0,${styling.backgroundOverlay})`,
+        pointerEvents: "none"
+      } }) : null,
+      formEl
+    ] });
+  }
+  return formEl;
 }
 function FormFieldInput({
   field,
   value,
   error,
   onChange,
-  styling
+  onValueChange,
+  styling,
+  fieldSpacing,
+  labelSpacing,
+  phFontSize
 }) {
   const radius = getBorderRadius(styling.borderRadius);
   const fontSize = getFontSize(styling.fontSize);
+  const isInline = styling.labelPosition === "left" || styling.fieldLayout === "inline";
   const inputStyle = {
     width: "100%",
     padding: "0.5rem 0.75rem",
@@ -880,8 +1051,25 @@ function FormFieldInput({
     backgroundColor: styling.theme === "dark" ? "#374151" : "#ffffff",
     color: styling.textColor
   };
-  if (field.type === "checkbox") {
-    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "1rem" }, children: [
+  const getOpts = () => {
+    if (!field.options) return [];
+    return field.options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+  };
+  if (field.type === "heading") {
+    return /* @__PURE__ */ jsx2("h2", { style: { marginBottom: fieldSpacing, fontSize: getHeadingSize(styling.headingSize), fontWeight: 600 }, children: field.content || field.label });
+  }
+  if (field.type === "divider") {
+    return /* @__PURE__ */ jsx2("hr", { style: { marginBottom: fieldSpacing, border: "none", borderTop: `1px solid ${styling.theme === "dark" ? "#4b5563" : "#d1d5db"}` } });
+  }
+  if (field.type === "paragraph") {
+    const pSize = field.paragraphFontSize ? `${field.paragraphFontSize}px` : getParagraphSize(styling.paragraphSize);
+    return /* @__PURE__ */ jsx2("p", { style: { marginBottom: fieldSpacing, fontSize: pSize, color: styling.theme === "dark" ? "#9ca3af" : "#6b7280" }, children: field.content || field.label });
+  }
+  if (field.type === "hidden") {
+    return /* @__PURE__ */ jsx2("input", { type: "hidden", name: field.name, value: String(value || field.defaultValue || "") });
+  }
+  if (field.type === "checkbox" || field.type === "toggle" || field.type === "consent") {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: fieldSpacing }, children: [
       /* @__PURE__ */ jsx2(
         "input",
         {
@@ -895,91 +1083,312 @@ function FormFieldInput({
         }
       ),
       /* @__PURE__ */ jsxs("label", { htmlFor: field.name, children: [
-        field.label || field.name,
-        field.required && /* @__PURE__ */ jsx2("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
+        field.type === "consent" && field.consentText ? field.consentUrl ? /* @__PURE__ */ jsxs("span", { children: [
+          field.consentText,
+          " ",
+          /* @__PURE__ */ jsx2("a", { href: field.consentUrl, target: "_blank", rel: "noopener noreferrer", style: { color: styling.primaryColor }, children: "(link)" })
+        ] }) : field.consentText : field.label || field.name,
+        field.required && !styling.hideRequiredAsterisk && /* @__PURE__ */ jsx2("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
       ] }),
-      error && /* @__PURE__ */ jsx2("span", { style: { color: "#ef4444", fontSize: "0.875rem", marginLeft: "0.5rem" }, children: error })
+      error && /* @__PURE__ */ jsx2("span", { style: { color: styling.errorColor || "#ef4444", fontSize: "0.875rem", marginLeft: "0.5rem" }, children: error })
+    ] });
+  }
+  const labelEl = /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: field.name,
+      style: {
+        display: "block",
+        fontWeight: 500,
+        ...isInline ? { width: "33%", flexShrink: 0, paddingTop: "0.5rem", marginBottom: 0 } : { marginBottom: labelSpacing }
+      },
+      children: [
+        field.label || field.name,
+        field.required && !styling.hideRequiredAsterisk && /* @__PURE__ */ jsx2("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
+      ]
+    }
+  );
+  const errorEl = error ? /* @__PURE__ */ jsx2("div", { style: { color: styling.errorColor || "#ef4444", fontSize: "0.875rem", marginTop: "0.25rem" }, children: error }) : null;
+  let fieldEl;
+  if (field.type === "textarea" || field.type === "richText") {
+    fieldEl = /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        id: field.name,
+        name: field.name,
+        value: String(value || ""),
+        onChange,
+        placeholder: field.placeholder,
+        required: field.required,
+        style: { ...inputStyle, minHeight: "100px", resize: "vertical" }
+      }
+    );
+  } else if (field.type === "select" || field.type === "dropdown") {
+    fieldEl = /* @__PURE__ */ jsxs("select", { id: field.name, name: field.name, value: String(value || ""), onChange, required: field.required, style: inputStyle, children: [
+      /* @__PURE__ */ jsx2("option", { value: "", children: "Select an option..." }),
+      getOpts().map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, children: opt.label }, opt.value))
+    ] });
+  } else if (field.type === "radio") {
+    fieldEl = /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: getOpts().map((opt) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "radio",
+          name: field.name,
+          value: opt.value,
+          checked: value === opt.value,
+          onChange: () => onValueChange(field.name, opt.value),
+          style: { accentColor: styling.primaryColor }
+        }
+      ),
+      opt.label
+    ] }, opt.value)) });
+  } else if (field.type === "multiselect") {
+    const selected = Array.isArray(value) ? value : [];
+    fieldEl = /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: getOpts().map((opt) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "checkbox",
+          checked: selected.includes(opt.value),
+          onChange: () => {
+            const next = selected.includes(opt.value) ? selected.filter((v) => v !== opt.value) : [...selected, opt.value];
+            onValueChange(field.name, next);
+          },
+          style: { accentColor: styling.primaryColor }
+        }
+      ),
+      opt.label
+    ] }, opt.value)) });
+  } else if (field.type === "rating") {
+    const max = field.ratingMax || 5;
+    const current = Number(value) || 0;
+    fieldEl = /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: "0.25rem" }, children: Array.from({ length: max }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => onValueChange(field.name, n),
+        style: {
+          width: "2rem",
+          height: "2rem",
+          cursor: "pointer",
+          border: "none",
+          background: "none",
+          padding: 0,
+          fontSize: "1.5rem",
+          color: n <= current ? "#f59e0b" : styling.theme === "dark" ? "#4b5563" : "#d1d5db",
+          transition: "color 0.15s"
+        },
+        children: "\u2605"
+      },
+      n
+    )) });
+  } else if (field.type === "scale" || field.type === "opinionScale") {
+    const min = field.min ?? 1;
+    const max = field.max ?? 10;
+    const current = value;
+    fieldEl = /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: "0.25rem", flexWrap: "wrap" }, children: Array.from({ length: max - min + 1 }, (_, i) => min + i).map((n) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onValueChange(field.name, n),
+          style: {
+            minWidth: "2.25rem",
+            height: "2.25rem",
+            borderRadius: radius,
+            cursor: "pointer",
+            border: `1px solid ${styling.theme === "dark" ? "#4b5563" : "#d1d5db"}`,
+            background: current === n ? styling.primaryColor : styling.theme === "dark" ? "#374151" : "#ffffff",
+            color: current === n ? "white" : styling.textColor,
+            fontSize: "0.875rem",
+            transition: "all 0.15s"
+          },
+          children: n
+        },
+        n
+      )) }),
+      (field.lowLabel || field.highLabel) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "0.75rem", color: styling.theme === "dark" ? "#9ca3af" : "#6b7280", marginTop: "0.25rem" }, children: [
+        /* @__PURE__ */ jsx2("span", { children: field.lowLabel }),
+        /* @__PURE__ */ jsx2("span", { children: field.highLabel })
+      ] })
+    ] });
+  } else if (field.type === "slider") {
+    const min = field.min ?? 0;
+    const max = field.max ?? 100;
+    const step = field.step ?? 1;
+    fieldEl = /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "range",
+          id: field.name,
+          name: field.name,
+          min,
+          max,
+          step,
+          value: Number(value) || min,
+          onChange: (e) => onValueChange(field.name, Number(e.target.value)),
+          style: { width: "100%", accentColor: styling.primaryColor }
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { style: { textAlign: "center", fontSize: "0.875rem", marginTop: "0.25rem" }, children: String(value ?? min) })
+    ] });
+  } else if (field.type === "imageChoice") {
+    const selected = value;
+    fieldEl = /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: getOpts().map((opt) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onValueChange(field.name, opt.value),
+        style: {
+          border: `2px solid ${selected === opt.value ? styling.primaryColor : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}`,
+          borderRadius: radius,
+          padding: "0.5rem",
+          cursor: "pointer",
+          textAlign: "center",
+          background: "none",
+          transition: "border-color 0.15s"
+        },
+        children: [
+          opt.imageUrl && /* @__PURE__ */ jsx2("img", { src: opt.imageUrl, alt: opt.label, style: { maxWidth: "80px", maxHeight: "80px", objectFit: "cover", borderRadius: radius } }),
+          /* @__PURE__ */ jsx2("div", { style: { fontSize: "0.875rem", marginTop: "0.25rem" }, children: opt.label })
+        ]
+      },
+      opt.value
+    )) });
+  } else if (field.type === "file") {
+    fieldEl = /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "file",
+        id: field.name,
+        name: field.name,
+        onChange,
+        required: field.required,
+        accept: field.allowedMimeTypes?.join(","),
+        multiple: field.multiple,
+        style: inputStyle
+      }
+    );
+  } else if (field.type === "name") {
+    const nameVal = value || {};
+    const nameFields = field.nameFields || ["first", "last"];
+    const labels = { prefix: "Prefix", first: "First Name", middle: "Middle", last: "Last Name", suffix: "Suffix" };
+    fieldEl = /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: nameFields.map((nf) => /* @__PURE__ */ jsx2(
+      "input",
+      {
+        placeholder: labels[nf] || nf,
+        value: nameVal[nf] || "",
+        onChange: (e) => onValueChange(field.name, { ...nameVal, [nf]: e.target.value }),
+        style: { ...inputStyle, flex: 1, minWidth: "120px" }
+      },
+      nf
+    )) });
+  } else if (field.type === "address") {
+    const addr = value || {};
+    const addrFields = field.addressFields || ["street", "city", "state", "zip", "country"];
+    const labels = { street: "Street", street2: "Street 2", city: "City", state: "State", zip: "ZIP", country: "Country" };
+    fieldEl = /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: addrFields.map((af) => /* @__PURE__ */ jsx2(
+      "input",
+      {
+        placeholder: labels[af] || af,
+        value: addr[af] || "",
+        onChange: (e) => onValueChange(field.name, { ...addr, [af]: e.target.value }),
+        style: inputStyle
+      },
+      af
+    )) });
+  } else if (field.type === "currency") {
+    fieldEl = /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
+      field.currencySymbol && /* @__PURE__ */ jsx2("span", { children: field.currencySymbol }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "number",
+          id: field.name,
+          name: field.name,
+          value: String(value || ""),
+          onChange,
+          step: 0.01,
+          min: field.min,
+          max: field.max,
+          required: field.required,
+          style: inputStyle
+        }
+      )
+    ] });
+  } else if (field.type === "colorPicker") {
+    fieldEl = /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "color",
+          id: field.name,
+          value: String(value || "#000000"),
+          onChange: (e) => onValueChange(field.name, e.target.value),
+          style: { width: "3rem", height: "2.25rem", border: "none", cursor: "pointer", padding: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "text",
+          value: String(value || ""),
+          onChange: (e) => onValueChange(field.name, e.target.value),
+          placeholder: "#000000",
+          style: { ...inputStyle, flex: 1 }
+        }
+      )
     ] });
+  } else if (field.type === "dateRange") {
+    const range = value || {};
+    fieldEl = /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx2("input", { type: "date", value: range.start || "", onChange: (e) => onValueChange(field.name, { ...range, start: e.target.value }), style: { ...inputStyle, flex: 1 } }),
+      /* @__PURE__ */ jsx2("span", { children: "to" }),
+      /* @__PURE__ */ jsx2("input", { type: "date", value: range.end || "", onChange: (e) => onValueChange(field.name, { ...range, end: e.target.value }), style: { ...inputStyle, flex: 1 } })
+    ] });
+  } else {
+    const typeMap = {
+      phone: "tel",
+      url: "url",
+      datetime: "datetime-local",
+      time: "time",
+      date: "date",
+      number: "number",
+      email: "email",
+      password: "password"
+    };
+    fieldEl = /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: typeMap[field.type] || "text",
+        id: field.name,
+        name: field.name,
+        value: String(value || ""),
+        onChange,
+        placeholder: field.placeholder,
+        required: field.required,
+        min: field.min,
+        max: field.max,
+        step: field.step,
+        maxLength: field.maxLength,
+        style: inputStyle
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
-        marginBottom: "1rem",
-        ...styling.labelPosition === "left" ? { display: "flex", alignItems: "flex-start", gap: "1rem" } : {}
+        marginBottom: fieldSpacing,
+        ...isInline ? { display: "flex", alignItems: "flex-start", gap: "1rem" } : {}
       },
       children: [
-        /* @__PURE__ */ jsxs(
-          "label",
-          {
-            htmlFor: field.name,
-            style: {
-              display: "block",
-              fontWeight: 500,
-              ...styling.labelPosition === "left" ? { width: "33%", flexShrink: 0, paddingTop: "0.5rem" } : { marginBottom: "0.25rem" }
-            },
-            children: [
-              field.label || field.name,
-              field.required && /* @__PURE__ */ jsx2("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { style: styling.labelPosition === "left" ? { flex: 1 } : {}, children: [
-          field.type === "textarea" ? /* @__PURE__ */ jsx2(
-            "textarea",
-            {
-              id: field.name,
-              name: field.name,
-              value: String(value || ""),
-              onChange,
-              placeholder: field.placeholder,
-              required: field.required,
-              style: { ...inputStyle, minHeight: "100px", resize: "vertical" }
-            }
-          ) : field.type === "select" ? /* @__PURE__ */ jsxs(
-            "select",
-            {
-              id: field.name,
-              name: field.name,
-              value: String(value || ""),
-              onChange,
-              required: field.required,
-              style: inputStyle,
-              children: [
-                /* @__PURE__ */ jsx2("option", { value: "", children: "Select an option..." }),
-                field.options?.map((opt) => {
-                  const val = typeof opt === "string" ? opt : opt.value;
-                  const label = typeof opt === "string" ? opt : opt.label;
-                  return /* @__PURE__ */ jsx2("option", { value: val, children: label }, val);
-                })
-              ]
-            }
-          ) : field.type === "file" ? /* @__PURE__ */ jsx2(
-            "input",
-            {
-              type: "file",
-              id: field.name,
-              name: field.name,
-              onChange,
-              required: field.required,
-              accept: field.allowedMimeTypes?.join(","),
-              multiple: field.multiple,
-              style: inputStyle
-            }
-          ) : /* @__PURE__ */ jsx2(
-            "input",
-            {
-              type: field.type,
-              id: field.name,
-              name: field.name,
-              value: String(value || ""),
-              onChange,
-              placeholder: field.placeholder,
-              required: field.required,
-              style: inputStyle
-            }
-          ),
-          error && /* @__PURE__ */ jsx2("div", { style: { color: "#ef4444", fontSize: "0.875rem", marginTop: "0.25rem" }, children: error })
+        labelEl,
+        /* @__PURE__ */ jsxs("div", { style: isInline ? { flex: 1 } : {}, children: [
+          fieldEl,
+          errorEl
         ] })
       ]
     }