@forms.expert/sdk 0.1.0

package/dist/react/index.js

@@ -0,0 +1,991 @@
+// react/use-form.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useEffect
+} from "react";
+
+// core/types.ts
+var FormsError = class extends Error {
+  constructor(message, code, statusCode, retryAfter) {
+    super(message);
+    this.code = code;
+    this.statusCode = statusCode;
+    this.retryAfter = retryAfter;
+    this.name = "FormsError";
+  }
+};
+var FormValidationError = class extends Error {
+  constructor(errors) {
+    super("Validation failed");
+    this.errors = errors;
+    this.name = "FormValidationError";
+  }
+};
+
+// core/api-client.ts
+var FormsApiClient = class {
+  constructor(config) {
+    this.apiKey = config.apiKey;
+    this.resourceId = config.resourceId;
+    this.baseUrl = (config.baseUrl || "https://api.formsapp.io/api/v1").replace(/\/$/, "");
+  }
+  /**
+   * Build URL with token query parameter
+   */
+  buildUrl(path) {
+    const separator = path.includes("?") ? "&" : "?";
+    return `${this.baseUrl}${path}${separator}token=${encodeURIComponent(this.apiKey)}`;
+  }
+  /**
+   * Make an API request
+   */
+  async request(method, path, body) {
+    const url = this.buildUrl(path);
+    const response = await fetch(url, {
+      method,
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: body ? JSON.stringify(body) : void 0
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      throw new FormsError(
+        data.message || "Request failed",
+        data.code || "UNKNOWN_ERROR",
+        response.status,
+        data.retryAfter
+      );
+    }
+    return data;
+  }
+  /**
+   * Check if form is active and get configuration
+   */
+  async isActive(slug) {
+    return this.request("GET", `/f/${this.resourceId}/${slug}/is-active`);
+  }
+  /**
+   * Validate form data without submitting
+   */
+  async validate(slug, data) {
+    return this.request("POST", `/f/${this.resourceId}/${slug}/validate`, {
+      data
+    });
+  }
+  /**
+   * Submit form data (supports files)
+   */
+  async submit(slug, data, options) {
+    const url = this.buildUrl(`/f/${this.resourceId}/${slug}`);
+    const hasFiles = Object.values(data).some(
+      (v) => v instanceof File || v instanceof FileList && v.length > 0
+    );
+    if (hasFiles || options?.onProgress) {
+      return this.submitWithFormData(url, data, options);
+    }
+    return this.request("POST", `/f/${this.resourceId}/${slug}`, {
+      data,
+      pageUrl: options?.pageUrl || (typeof window !== "undefined" ? window.location.href : void 0),
+      captchaToken: options?.captchaToken
+    });
+  }
+  /**
+   * Submit with FormData (for file uploads with progress tracking)
+   */
+  submitWithFormData(url, data, options) {
+    return new Promise((resolve, reject) => {
+      const formData = new FormData();
+      for (const [key, value] of Object.entries(data)) {
+        if (value instanceof File) {
+          formData.append(key, value);
+        } else if (value instanceof FileList) {
+          Array.from(value).forEach((file) => formData.append(key, file));
+        } else if (value !== void 0 && value !== null) {
+          formData.append(`data[${key}]`, String(value));
+        }
+      }
+      const pageUrl = options?.pageUrl || (typeof window !== "undefined" ? window.location.href : "");
+      if (pageUrl) {
+        formData.append("pageUrl", pageUrl);
+      }
+      if (options?.captchaToken) {
+        formData.append("captchaToken", options.captchaToken);
+      }
+      const xhr = new XMLHttpRequest();
+      if (options?.onProgress) {
+        xhr.upload.addEventListener("progress", (event) => {
+          if (event.lengthComputable) {
+            options.onProgress({
+              loaded: event.loaded,
+              total: event.total,
+              percentage: Math.round(event.loaded / event.total * 100)
+            });
+          }
+        });
+      }
+      xhr.addEventListener("load", () => {
+        try {
+          const response = JSON.parse(xhr.responseText);
+          if (xhr.status >= 200 && xhr.status < 300) {
+            resolve(response);
+          } else {
+            reject(new FormsError(
+              response.message || "Submission failed",
+              response.code || "UNKNOWN_ERROR",
+              xhr.status,
+              response.retryAfter
+            ));
+          }
+        } catch {
+          reject(new FormsError("Invalid response", "PARSE_ERROR", xhr.status));
+        }
+      });
+      xhr.addEventListener("error", () => {
+        reject(new FormsError("Network error", "NETWORK_ERROR", 0));
+      });
+      xhr.addEventListener("abort", () => {
+        reject(new FormsError("Request aborted", "ABORTED", 0));
+      });
+      xhr.open("POST", url);
+      xhr.send(formData);
+    });
+  }
+  /**
+   * Track a form view (for analytics completion rate)
+   */
+  async trackView(slug) {
+    const url = this.buildUrl(`/f/${this.resourceId}/${slug}/view`);
+    await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" } }).catch(() => {
+    });
+  }
+  /**
+   * Get resource ID
+   */
+  getResourceId() {
+    return this.resourceId;
+  }
+  /**
+   * Get base URL
+   */
+  getBaseUrl() {
+    return this.baseUrl;
+  }
+};
+
+// core/forms-sdk.ts
+var FormHandler = class {
+  constructor(apiClient, slug, options = {}) {
+    this.config = null;
+    this.apiClient = apiClient;
+    this.slug = slug;
+    this.options = options;
+  }
+  /**
+   * Initialize form handler and fetch configuration
+   */
+  async initialize() {
+    this.config = await this.apiClient.isActive(this.slug);
+    if (this.options.trackViews) {
+      this.apiClient.trackView(this.slug);
+    }
+    return this.config;
+  }
+  /**
+   * Get cached form configuration
+   */
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Check if form is active
+   */
+  isActive() {
+    return this.config?.active ?? false;
+  }
+  /**
+   * Check if captcha is required
+   */
+  requiresCaptcha() {
+    return this.config?.settings?.captcha?.enabled ?? false;
+  }
+  /**
+   * Get captcha provider
+   */
+  getCaptchaProvider() {
+    return this.config?.settings?.captcha?.provider;
+  }
+  /**
+   * Get form schema
+   */
+  getSchema() {
+    return this.config?.schema;
+  }
+  /**
+   * Validate form data
+   */
+  async validate(data) {
+    return this.apiClient.validate(this.slug, data);
+  }
+  /**
+   * Submit form data
+   */
+  async submit(data, options) {
+    this.options.onSubmitStart?.();
+    try {
+      if (this.config?.mode === "schema") {
+        const validation = await this.validate(data);
+        if (!validation.valid) {
+          this.options.onValidationError?.(validation.errors);
+          throw new FormValidationError(validation.errors);
+        }
+      }
+      const response = await this.apiClient.submit(this.slug, data, options);
+      this.options.onSubmitSuccess?.(response);
+      return response;
+    } catch (error) {
+      if (error instanceof FormsError) {
+        this.options.onSubmitError?.(error);
+      }
+      throw error;
+    }
+  }
+  /**
+   * Get success message from config
+   */
+  getSuccessMessage() {
+    return this.config?.settings?.successMessage || "Form submitted successfully!";
+  }
+  /**
+   * Get redirect URL from config
+   */
+  getRedirectUrl() {
+    return this.config?.settings?.redirectUrl;
+  }
+};
+var FormsSDK = class {
+  constructor(config) {
+    this.apiClient = new FormsApiClient(config);
+  }
+  /**
+   * Check if form is active and get configuration
+   */
+  async isActive(slug) {
+    return this.apiClient.isActive(slug);
+  }
+  /**
+   * Validate form data without submitting
+   */
+  async validate(slug, data) {
+    return this.apiClient.validate(slug, data);
+  }
+  /**
+   * Submit form data
+   */
+  async submit(slug, data, options) {
+    return this.apiClient.submit(slug, data, options);
+  }
+  /**
+   * Create a form handler for a specific form
+   */
+  form(slug, options) {
+    return new FormHandler(this.apiClient, slug, options);
+  }
+  /**
+   * Track a form view (for analytics completion rate)
+   */
+  async trackView(slug) {
+    return this.apiClient.trackView(slug);
+  }
+  /**
+   * Submit with retry logic for rate limits
+   */
+  async submitWithRetry(slug, data, options) {
+    const maxRetries = options?.maxRetries ?? 3;
+    let lastError = null;
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+      try {
+        return await this.submit(slug, data, options);
+      } catch (error) {
+        lastError = error;
+        if (error instanceof FormsError) {
+          if ([
+            "VALIDATION_ERROR",
+            "CAPTCHA_REQUIRED",
+            "ORIGIN_NOT_ALLOWED"
+          ].includes(error.code)) {
+            throw error;
+          }
+          if (error.code.includes("RATE_LIMIT")) {
+            const retryAfter = error.retryAfter || Math.pow(2, attempt) * 1e3;
+            await new Promise((resolve) => setTimeout(resolve, retryAfter));
+            continue;
+          }
+        }
+        await new Promise(
+          (resolve) => setTimeout(resolve, Math.pow(2, attempt) * 1e3)
+        );
+      }
+    }
+    throw lastError;
+  }
+};
+
+// react/use-form.tsx
+import { jsx } from "react/jsx-runtime";
+var FormsContext = createContext(null);
+function FormsProvider({ config, children }) {
+  const sdk = useMemo(() => new FormsSDK(config), [config]);
+  const value = useMemo(() => ({ sdk, isReady: true }), [sdk]);
+  return /* @__PURE__ */ jsx(FormsContext.Provider, { value, children });
+}
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+function useFormsSDK() {
+  const context = useContext(FormsContext);
+  if (!context) {
+    throw new Error("useFormsSDK must be used within a FormsProvider");
+  }
+  return context.sdk;
+}
+function useForm(options) {
+  const context = useContext(FormsContext);
+  const sdk = useMemo(() => {
+    if (options.config) {
+      return new FormsSDK(options.config);
+    }
+    if (!context) {
+      throw new Error("Either provide config to useForm or use FormsProvider");
+    }
+    return context.sdk;
+  }, [options.config, context]);
+  const [config, setConfig] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInitializing, setIsInitializing] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [errors, setErrors] = useState({});
+  const [fileErrors, setFileErrors] = useState([]);
+  const [values, setValues] = useState({});
+  const [error, setError] = useState(null);
+  const [uploadProgress, setUploadProgress] = useState(null);
+  const initialize = useCallback(async () => {
+    setIsInitializing(true);
+    try {
+      const formConfig = await sdk.isActive(options.slug);
+      setConfig(formConfig);
+      if (options.trackViews) {
+        sdk.trackView(options.slug);
+      }
+      return formConfig;
+    } finally {
+      setIsInitializing(false);
+    }
+  }, [sdk, options.slug, options.trackViews]);
+  useEffect(() => {
+    if (options.autoInit !== false) {
+      initialize();
+    }
+  }, [initialize, options.autoInit]);
+  const setValue = useCallback((name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => {
+      if (prev[name]) {
+        const { [name]: _, ...rest } = prev;
+        return rest;
+      }
+      return prev;
+    });
+  }, []);
+  const setValuesHandler = useCallback((newValues) => {
+    setValues((prev) => ({ ...prev, ...newValues }));
+  }, []);
+  const validate = useCallback(async () => {
+    const result = await sdk.validate(options.slug, values);
+    if (!result.valid) {
+      const errorMap = result.errors.reduce(
+        (acc, err) => ({ ...acc, [err.field]: err.message }),
+        {}
+      );
+      setErrors(errorMap);
+    }
+    return result.valid;
+  }, [sdk, options.slug, values]);
+  const submit = useCallback(
+    async (captchaToken) => {
+      setIsLoading(true);
+      setErrors({});
+      setFileErrors([]);
+      setError(null);
+      setUploadProgress(null);
+      try {
+        const submitData = config?.settings?.honeypot ? { ...values, _hp: "" } : values;
+        const response = await sdk.submit(options.slug, submitData, {
+          captchaToken,
+          onProgress: setUploadProgress
+        });
+        setIsSubmitted(true);
+        options.onSuccess?.(response);
+        return response;
+      } catch (err) {
+        if (err instanceof FormValidationError) {
+          const errorMap = err.errors.reduce(
+            (acc, e) => ({ ...acc, [e.field]: e.message }),
+            {}
+          );
+          setErrors(errorMap);
+          options.onValidationError?.(err.errors);
+        } else {
+          setError(err);
+          options.onError?.(err);
+        }
+        return null;
+      } finally {
+        setIsLoading(false);
+        setUploadProgress(null);
+      }
+    },
+    [sdk, options, values]
+  );
+  const reset = useCallback(() => {
+    setValues({});
+    setErrors({});
+    setFileErrors([]);
+    setError(null);
+    setIsSubmitted(false);
+    setIsLoading(false);
+    setUploadProgress(null);
+  }, []);
+  const clearErrors = useCallback(() => {
+    setErrors({});
+    setFileErrors([]);
+  }, []);
+  const validateFiles = useCallback((files) => {
+    const errors2 = [];
+    const maxSize = config?.settings?.maxAttachmentSize ?? 10 * 1024 * 1024;
+    const maxCount = config?.settings?.maxAttachments ?? 5;
+    if (files.length > maxCount) {
+      errors2.push({
+        field: "attachments",
+        file: "",
+        error: "count",
+        message: `Maximum ${maxCount} files allowed`
+      });
+    }
+    files.forEach((file) => {
+      if (file.size > maxSize) {
+        errors2.push({
+          field: "attachments",
+          file: file.name,
+          error: "size",
+          message: `File "${file.name}" exceeds maximum size of ${formatBytes(maxSize)}`
+        });
+      }
+    });
+    setFileErrors(errors2);
+    return errors2;
+  }, [config?.settings?.maxAttachmentSize, config?.settings?.maxAttachments]);
+  const allowsAttachments = config?.settings?.allowAttachments ?? false;
+  const maxAttachments = config?.settings?.maxAttachments ?? 5;
+  const maxAttachmentSize = config?.settings?.maxAttachmentSize ?? 10 * 1024 * 1024;
+  return {
+    config,
+    schema: config?.schema ?? null,
+    isLoading,
+    isInitializing,
+    isSubmitted,
+    isSuccess: isSubmitted,
+    errors,
+    fileErrors,
+    error,
+    values,
+    uploadProgress,
+    initialize,
+    setValue,
+    setValues: setValuesHandler,
+    validate,
+    validateFiles,
+    submit,
+    reset,
+    clearErrors,
+    requiresCaptcha: config?.settings?.captcha?.enabled ?? false,
+    captchaProvider: config?.settings?.captcha?.provider,
+    captchaSiteKey: config?.settings?.captcha?.siteKey,
+    honeypotEnabled: config?.settings?.honeypot ?? false,
+    allowsAttachments,
+    maxAttachments,
+    maxAttachmentSize
+  };
+}
+
+// react/forms-expert-form.tsx
+import { useState as useState2, useEffect as useEffect2, useRef } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var defaultStyling = {
+  theme: "light",
+  primaryColor: "#3b82f6",
+  backgroundColor: "#ffffff",
+  textColor: "#1f2937",
+  borderRadius: "md",
+  fontSize: "md",
+  buttonStyle: "filled",
+  labelPosition: "top"
+};
+function getBorderRadius(radius) {
+  switch (radius) {
+    case "none":
+      return "0";
+    case "sm":
+      return "0.125rem";
+    case "md":
+      return "0.375rem";
+    case "lg":
+      return "0.5rem";
+    default:
+      return "0.375rem";
+  }
+}
+function getFontSize(size) {
+  switch (size) {
+    case "sm":
+      return "0.875rem";
+    case "md":
+      return "1rem";
+    case "lg":
+      return "1.125rem";
+    default:
+      return "1rem";
+  }
+}
+function FormsExpertForm({
+  config,
+  slug,
+  trackViews,
+  submitText = "Submit",
+  onSuccess,
+  onError,
+  onValidationError,
+  className,
+  style
+}) {
+  const form = useForm({
+    slug,
+    config,
+    trackViews,
+    onSuccess,
+    onError,
+    onValidationError,
+    autoInit: true
+  });
+  const [captchaToken, setCaptchaToken] = useState2(null);
+  const captchaContainerRef = useRef(null);
+  const captchaWidgetId = useRef(null);
+  const captchaScriptLoaded = useRef(false);
+  useEffect2(() => {
+    if (!form.requiresCaptcha || !form.captchaSiteKey || !form.captchaProvider) return;
+    if (captchaScriptLoaded.current) return;
+    const provider = form.captchaProvider;
+    const siteKey = form.captchaSiteKey;
+    const renderWidget = () => {
+      if (!captchaContainerRef.current) return;
+      const w2 = window;
+      if (provider === "turnstile" && w2.turnstile) {
+        captchaWidgetId.current = w2.turnstile.render(captchaContainerRef.current, {
+          sitekey: siteKey,
+          callback: (token) => setCaptchaToken(token),
+          "expired-callback": () => setCaptchaToken(null),
+          "error-callback": () => setCaptchaToken(null)
+        });
+      } else if (provider === "hcaptcha" && w2.hcaptcha) {
+        captchaWidgetId.current = w2.hcaptcha.render(captchaContainerRef.current, {
+          sitekey: siteKey,
+          callback: (token) => setCaptchaToken(token),
+          "expired-callback": () => setCaptchaToken(null),
+          "error-callback": () => setCaptchaToken(null)
+        });
+      } else if (provider === "recaptcha" && w2.grecaptcha) {
+        w2.grecaptcha.ready(() => {
+          w2.grecaptcha.execute(siteKey, { action: "submit" }).then((token) => {
+            setCaptchaToken(token);
+          });
+        });
+      }
+    };
+    const w = window;
+    if (provider === "turnstile" && w.turnstile || provider === "hcaptcha" && w.hcaptcha || provider === "recaptcha" && w.grecaptcha) {
+      captchaScriptLoaded.current = true;
+      renderWidget();
+      return;
+    }
+    const script = document.createElement("script");
+    if (provider === "turnstile") {
+      script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+    } else if (provider === "hcaptcha") {
+      script.src = "https://js.hcaptcha.com/1/api.js?render=explicit";
+    } else if (provider === "recaptcha") {
+      script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+    }
+    script.async = true;
+    script.defer = true;
+    script.onload = () => {
+      captchaScriptLoaded.current = true;
+      setTimeout(renderWidget, 100);
+    };
+    document.head.appendChild(script);
+    return () => {
+      if (captchaWidgetId.current !== null) {
+        const w2 = window;
+        if (provider === "turnstile" && w2.turnstile) {
+          w2.turnstile.remove(captchaWidgetId.current);
+        } else if (provider === "hcaptcha" && w2.hcaptcha) {
+          w2.hcaptcha.reset(captchaWidgetId.current);
+        }
+      }
+    };
+  }, [form.requiresCaptcha, form.captchaProvider, form.captchaSiteKey]);
+  const resetCaptcha = () => {
+    setCaptchaToken(null);
+    if (captchaWidgetId.current !== null) {
+      const w = window;
+      if (form.captchaProvider === "turnstile" && w.turnstile) {
+        w.turnstile.reset(captchaWidgetId.current);
+      } else if (form.captchaProvider === "hcaptcha" && w.hcaptcha) {
+        w.hcaptcha.reset(captchaWidgetId.current);
+      } else if (form.captchaProvider === "recaptcha" && w.grecaptcha) {
+        w.grecaptcha.execute(form.captchaSiteKey, { action: "submit" }).then((token) => {
+          setCaptchaToken(token);
+        });
+      }
+    }
+  };
+  const styling = form.config?.schema?.styling || defaultStyling;
+  const radius = getBorderRadius(styling.borderRadius);
+  const fontSize = getFontSize(styling.fontSize);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const result = await form.submit(captchaToken || void 0);
+    if (!result) {
+      resetCaptcha();
+    }
+  };
+  const handleChange = (e) => {
+    const { name, value, type } = e.target;
+    if (type === "checkbox") {
+      form.setValue(name, e.target.checked);
+    } else if (type === "file") {
+      form.setValue(name, e.target.files?.[0]);
+    } else {
+      form.setValue(name, value);
+    }
+  };
+  if (form.isInitializing) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className,
+        style: {
+          padding: "2rem",
+          textAlign: "center",
+          color: styling.textColor,
+          ...style
+        },
+        children: "Loading form..."
+      }
+    );
+  }
+  if (!form.config?.active) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className,
+        style: {
+          padding: "2rem",
+          textAlign: "center",
+          color: "#ef4444",
+          ...style
+        },
+        children: "This form is not available"
+      }
+    );
+  }
+  if (form.isSubmitted) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className,
+        style: {
+          padding: "2rem",
+          textAlign: "center",
+          backgroundColor: styling.backgroundColor,
+          color: styling.textColor,
+          borderRadius: radius,
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "svg",
+            {
+              style: {
+                width: "3rem",
+                height: "3rem",
+                margin: "0 auto 1rem",
+                color: "#22c55e"
+              },
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx2(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M5 13l4 4L19 7"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx2("p", { style: { fontSize: "1.125rem", fontWeight: 500 }, children: form.config.settings?.successMessage || "Form submitted successfully!" }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: form.reset,
+              style: {
+                marginTop: "1rem",
+                padding: "0.5rem 1rem",
+                backgroundColor: "transparent",
+                color: styling.primaryColor,
+                border: `1px solid ${styling.primaryColor}`,
+                borderRadius: radius,
+                cursor: "pointer"
+              },
+              children: "Submit another response"
+            }
+          )
+        ]
+      }
+    );
+  }
+  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(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className,
+      style: {
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize,
+        backgroundColor: styling.backgroundColor,
+        color: styling.textColor,
+        padding: "1.5rem",
+        borderRadius: radius,
+        ...style
+      },
+      children: [
+        fields.map((field) => /* @__PURE__ */ jsx2(
+          FormFieldInput,
+          {
+            field,
+            value: form.values[field.name],
+            error: form.errors[field.name],
+            onChange: handleChange,
+            styling
+          },
+          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(
+          "button",
+          {
+            type: "submit",
+            disabled: form.isLoading,
+            style: {
+              width: "100%",
+              padding: "0.625rem 1.25rem",
+              marginTop: "1rem",
+              fontWeight: 500,
+              fontSize,
+              fontFamily: "inherit",
+              borderRadius: radius,
+              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}`
+            },
+            children: form.isLoading ? "Submitting..." : submitText
+          }
+        ),
+        showBranding && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: "1rem",
+              paddingTop: "0.75rem",
+              borderTop: `1px solid ${styling.theme === "dark" ? "#374151" : "#e5e7eb"}`
+            },
+            children: /* @__PURE__ */ jsx2(
+              "a",
+              {
+                href: brandingUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: {
+                  color: styling.theme === "dark" ? "#9ca3af" : "#6b7280",
+                  textDecoration: "none",
+                  fontSize: "0.75rem"
+                },
+                children: brandingText
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function FormFieldInput({
+  field,
+  value,
+  error,
+  onChange,
+  styling
+}) {
+  const radius = getBorderRadius(styling.borderRadius);
+  const fontSize = getFontSize(styling.fontSize);
+  const inputStyle = {
+    width: "100%",
+    padding: "0.5rem 0.75rem",
+    border: `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}`,
+    borderRadius: radius,
+    fontSize,
+    fontFamily: "inherit",
+    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: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "checkbox",
+          id: field.name,
+          name: field.name,
+          checked: Boolean(value),
+          onChange,
+          required: field.required,
+          style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor }
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { htmlFor: field.name, children: [
+        field.label || field.name,
+        field.required && /* @__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 })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        marginBottom: "1rem",
+        ...styling.labelPosition === "left" ? { 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 })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  FormsExpertForm,
+  FormsProvider,
+  useForm,
+  useFormsSDK
+};
+//# sourceMappingURL=index.js.map