@usefillo/react 0.2.0

package/dist/index.js

@@ -0,0 +1,1094 @@
+"use client";
+
+// src/FilloForm.tsx
+import { useEffect as useEffect6, useMemo, useRef as useRef4, useState as useState5 } from "react";
+import { FilloError as FilloError2 } from "@usefillo/core";
+
+// src/context.ts
+import { allFields } from "@usefillo/core";
+import { createContext, useContext } from "react";
+var FilloContext = createContext(null);
+function useFillo() {
+  const api = useContext(FilloContext);
+  if (!api) throw new Error("useFillo must be used inside <FilloForm> or <FilloProvider>");
+  return api;
+}
+function useField(fieldId) {
+  const api = useFillo();
+  const field = allFields(api.form).find((f) => f.id === fieldId);
+  return {
+    field,
+    value: api.data[fieldId],
+    error: api.errors[fieldId],
+    setValue: (value) => api.setValue(fieldId, value)
+  };
+}
+
+// src/controller.ts
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import {
+  createFormController
+} from "@usefillo/core";
+function useFilloController(options) {
+  const optsRef = useRef(options);
+  optsRef.current = options;
+  const storeRef = useRef(null);
+  if (storeRef.current === null) {
+    storeRef.current = createFormController({
+      form: options.form,
+      formId: options.formId,
+      client: options.client,
+      initialData: options.initialData,
+      onChange: (d) => optsRef.current.onChange?.(d),
+      onSubmitted: (id, d) => optsRef.current.onSubmitted?.(id, d),
+      // Only take over submission when a handler was supplied at mount; otherwise
+      // the engine submits through the client.
+      onSubmit: options.onSubmit ? (d) => optsRef.current.onSubmit?.(d) : void 0,
+      getHoneypot: () => optsRef.current.getHoneypot?.() ?? ""
+    });
+  }
+  const store = storeRef.current;
+  useEffect(() => {
+    store.setContext({ form: options.form, formId: options.formId, client: options.client });
+  }, [store, options.form, options.formId, options.client]);
+  useEffect(() => () => store.destroy(), [store]);
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+  return {
+    form: options.form,
+    formId: options.formId,
+    client: options.client,
+    ...state,
+    setValue: store.setValue,
+    setUploading: store.setUploading,
+    next: store.next,
+    back: store.back,
+    submit: store.submit
+  };
+}
+
+// src/define.ts
+import {
+  FilloError,
+  isCodeForm,
+  syncCodeForm
+} from "@usefillo/core";
+import { useEffect as useEffect2, useState } from "react";
+import { defineForm, isCodeForm as isCodeForm2, syncCodeForm as syncCodeForm2 } from "@usefillo/core";
+function contentHash(input) {
+  let h = 5381;
+  for (let i = 0; i < input.length; i++) h = (h << 5) + h + input.charCodeAt(i) | 0;
+  return (h >>> 0).toString(36);
+}
+function useCodeFormSync(form, client, onError) {
+  const codeForm = isCodeForm(form) ? form : null;
+  const [syncedFormId, setSyncedFormId] = useState(null);
+  const hasKey = Boolean(client?.key);
+  const handle = codeForm?.id;
+  const contentKey = codeForm ? contentHash(JSON.stringify(codeForm.schema) + JSON.stringify(codeForm.theme ?? null)) : null;
+  useEffect2(() => {
+    if (!codeForm || !client?.key) return;
+    let cancelled = false;
+    syncCodeForm(client, codeForm).then((r) => !cancelled && setSyncedFormId(r.formId)).catch((err) => {
+      const error = err instanceof FilloError ? err : new FilloError(String(err), 0);
+      console.warn("[fillo] form sync failed:", error.message);
+      if (!cancelled) onError?.(error);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [hasKey, handle, contentKey, client, onError]);
+  return syncedFormId;
+}
+
+// src/fields.tsx
+import { isField, pipeBlock } from "@usefillo/core";
+import { useEffect as useEffect5, useState as useState4 } from "react";
+
+// src/signature.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SignatureField({ field, value, error, setValue }) {
+  const canvasRef = useRef2(null);
+  const drawing = useRef2(false);
+  const [hasInk, setHasInk] = useState2(Boolean(value));
+  useEffect3(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const scale = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * scale;
+    canvas.height = rect.height * scale;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.scale(scale, scale);
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.strokeStyle = getComputedStyle(canvas).color;
+    if (typeof value === "string" && value.startsWith("data:image/")) {
+      const img = new Image();
+      img.onload = () => ctx.drawImage(img, 0, 0, rect.width, rect.height);
+      img.src = value;
+    }
+  }, []);
+  function point(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+  function start(e) {
+    drawing.current = true;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const ctx = e.currentTarget.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = point(e);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+  }
+  function move(e) {
+    if (!drawing.current) return;
+    const ctx = e.currentTarget.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = point(e);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  }
+  function end(e) {
+    if (!drawing.current) return;
+    drawing.current = false;
+    setHasInk(true);
+    setValue(e.currentTarget.toDataURL("image/png"));
+  }
+  function clear() {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    setHasInk(false);
+    setValue(null);
+  }
+  const describedBy = [field.description ? `fillo-${field.id}-desc` : null, error ? `fillo-${field.id}-error` : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: `fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`, children: [
+    /* @__PURE__ */ jsxs("label", { className: "fillo-label", htmlFor: `fillo-${field.id}`, children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx("span", { className: "fillo-required", "aria-hidden": "true", children: " *" })
+    ] }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "fillo-description", id: `fillo-${field.id}-desc`, children: field.description }),
+    /* @__PURE__ */ jsxs("div", { className: "fillo-signature", children: [
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          id: `fillo-${field.id}`,
+          className: "fillo-signature-canvas",
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": describedBy,
+          onPointerDown: start,
+          onPointerMove: move,
+          onPointerUp: end,
+          onPointerLeave: end
+        }
+      ),
+      hasInk && /* @__PURE__ */ jsx("button", { type: "button", className: "fillo-signature-clear", onClick: clear, children: "Clear" }),
+      !hasInk && /* @__PURE__ */ jsx("span", { className: "fillo-signature-hint", children: "Sign here" })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "fillo-error", id: `fillo-${field.id}-error`, role: "alert", children: error })
+  ] });
+}
+
+// src/upload.tsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(0)} KB`;
+  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+  return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+}
+function FileUploadField({ field, value, error, setValue, api }) {
+  const schema = field;
+  const inputRef = useRef3(null);
+  const [inFlight, setInFlight] = useState3([]);
+  const [dragOver, setDragOver] = useState3(false);
+  const mountedRef = useRef3(true);
+  const controllers = useRef3(/* @__PURE__ */ new Map());
+  useEffect4(
+    () => () => {
+      mountedRef.current = false;
+      controllers.current.forEach((c) => c.abort());
+    },
+    []
+  );
+  const files = Array.isArray(value) ? value : [];
+  const maxFiles = schema.maxFiles ?? 1;
+  const maxBytes = (schema.maxFileSizeMb ?? 500) * 1024 * 1024;
+  const canUpload = Boolean(api.client && api.formId);
+  const remaining = maxFiles - files.length - inFlight.length;
+  async function startUpload(file) {
+    const key = `${file.name}-${file.size}-${Math.floor(performance.now())}`;
+    if (file.size > maxBytes) {
+      setInFlight((prev) => [
+        ...prev,
+        { key, name: file.name, size: file.size, fraction: 0, error: `Larger than ${schema.maxFileSizeMb ?? 500} MB limit` }
+      ]);
+      return;
+    }
+    setInFlight((prev) => [...prev, { key, name: file.name, size: file.size, fraction: 0 }]);
+    api.setUploading(field.id, true);
+    const controller = new AbortController();
+    controllers.current.set(key, controller);
+    try {
+      const uploaded = await api.client.uploadFile(api.formId, file, {
+        fieldId: field.id,
+        signal: controller.signal,
+        onProgress: ({ fraction }) => {
+          if (mountedRef.current) {
+            setInFlight((prev) => prev.map((f) => f.key === key ? { ...f, fraction } : f));
+          }
+        }
+      });
+      if (!mountedRef.current) return;
+      setInFlight((prev) => prev.filter((f) => f.key !== key));
+      const current = Array.isArray(api.data[field.id]) ? api.data[field.id] : [];
+      setValue([...current, uploaded]);
+    } catch {
+      if (mountedRef.current) {
+        setInFlight(
+          (prev) => prev.map((f) => f.key === key ? { ...f, error: "Upload failed \u2014 try again" } : f)
+        );
+      }
+    } finally {
+      controllers.current.delete(key);
+      if (mountedRef.current) api.setUploading(field.id, false);
+    }
+  }
+  function cancelUpload(key) {
+    controllers.current.get(key)?.abort();
+    setInFlight((prev) => prev.filter((f) => f.key !== key));
+  }
+  function handleFiles(list) {
+    if (!list) return;
+    Array.from(list).slice(0, Math.max(0, remaining)).forEach((file) => void startUpload(file));
+    if (inputRef.current) inputRef.current.value = "";
+  }
+  function removeFile(fileId) {
+    setValue(files.filter((f) => f.fileId !== fileId));
+  }
+  const describedBy = [field.description ? `fillo-${field.id}-desc` : null, error ? `fillo-${field.id}-error` : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs2("div", { className: `fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`, children: [
+    /* @__PURE__ */ jsxs2("label", { className: "fillo-label", htmlFor: `fillo-${field.id}`, children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-required", "aria-hidden": "true", children: " *" })
+    ] }),
+    field.description && /* @__PURE__ */ jsx2("p", { className: "fillo-description", id: `fillo-${field.id}-desc`, children: field.description }),
+    remaining > 0 && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: `fillo-dropzone${dragOver ? " fillo-dropzone--over" : ""}${canUpload ? "" : " fillo-dropzone--disabled"}`,
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragOver(true);
+        },
+        onDragLeave: () => setDragOver(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDragOver(false);
+          if (canUpload) handleFiles(e.dataTransfer.files);
+        },
+        onClick: () => canUpload && inputRef.current?.click(),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if ((e.key === "Enter" || e.key === " ") && canUpload) inputRef.current?.click();
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              ref: inputRef,
+              id: `fillo-${field.id}`,
+              type: "file",
+              hidden: true,
+              "aria-invalid": error ? true : void 0,
+              "aria-required": field.required ? true : void 0,
+              "aria-describedby": describedBy,
+              multiple: maxFiles > 1,
+              accept: schema.accept?.join(","),
+              onChange: (e) => handleFiles(e.target.files)
+            }
+          ),
+          canUpload ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsxs2("span", { className: "fillo-dropzone-title", children: [
+              "Drop ",
+              maxFiles > 1 ? "files" : "a file",
+              " here or click to browse"
+            ] }),
+            /* @__PURE__ */ jsxs2("span", { className: "fillo-dropzone-hint", children: [
+              "Up to ",
+              schema.maxFileSizeMb ?? 500,
+              " MB per file \xB7 resumable"
+            ] })
+          ] }) : /* @__PURE__ */ jsx2("span", { className: "fillo-dropzone-hint", children: "Uploads are disabled in preview" })
+        ]
+      }
+    ),
+    (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs2("ul", { className: "fillo-files", children: [
+      files.map((f) => /* @__PURE__ */ jsxs2("li", { className: "fillo-file fillo-file--done", children: [
+        /* @__PURE__ */ jsx2("span", { className: "fillo-file-name", children: f.name }),
+        /* @__PURE__ */ jsx2("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "fillo-file-remove",
+            "aria-label": `Remove ${f.name}`,
+            onClick: () => removeFile(f.fileId),
+            children: "\xD7"
+          }
+        )
+      ] }, f.fileId)),
+      inFlight.map((f) => /* @__PURE__ */ jsxs2("li", { className: `fillo-file${f.error ? " fillo-file--failed" : ""}`, children: [
+        /* @__PURE__ */ jsx2("span", { className: "fillo-file-name", children: f.name }),
+        f.error ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2("span", { className: "fillo-file-meta", children: f.error }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "fillo-file-remove",
+              "aria-label": "Dismiss",
+              onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
+              children: "\xD7"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsxs2("span", { className: "fillo-file-meta", children: [
+            Math.round(f.fraction * 100),
+            "% of ",
+            formatBytes(f.size)
+          ] }),
+          /* @__PURE__ */ jsx2("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("span", { className: "fillo-progress-bar", style: { width: `${f.fraction * 100}%` } }) }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "fillo-file-remove",
+              "aria-label": `Cancel ${f.name}`,
+              onClick: () => cancelUpload(f.key),
+              children: "\xD7"
+            }
+          )
+        ] })
+      ] }, f.key))
+    ] }),
+    error && /* @__PURE__ */ jsx2("p", { className: "fillo-error", id: `fillo-${field.id}-error`, role: "alert", children: error })
+  ] });
+}
+
+// src/fields.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function fieldAria(field, error) {
+  const describedBy = [
+    field.description ? `fillo-${field.id}-desc` : null,
+    error ? `fillo-${field.id}-error` : null
+  ].filter(Boolean);
+  return {
+    "aria-invalid": error ? true : void 0,
+    "aria-required": field.required ? true : void 0,
+    "aria-describedby": describedBy.length ? describedBy.join(" ") : void 0
+  };
+}
+function FieldShell({
+  field,
+  error,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `fillo-field fillo-field--${field.kind}${error ? " fillo-field--error" : ""}`,
+      "data-field": field.id,
+      children: [
+        /* @__PURE__ */ jsxs3("label", { className: "fillo-label", id: `fillo-${field.id}-label`, htmlFor: `fillo-${field.id}`, children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-required", "aria-hidden": "true", children: " *" })
+        ] }),
+        field.description && /* @__PURE__ */ jsx3("p", { className: "fillo-description", id: `fillo-${field.id}-desc`, children: field.description }),
+        children,
+        error && /* @__PURE__ */ jsx3("p", { className: "fillo-error", id: `fillo-${field.id}-error`, role: "alert", children: error })
+      ]
+    }
+  );
+}
+function TextInput({ field, value, error, setValue }) {
+  const type = field.kind === "email" ? "email" : field.kind === "url" ? "url" : field.kind === "phone" ? "tel" : field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text";
+  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3(
+    "input",
+    {
+      id: `fillo-${field.id}`,
+      className: "fillo-input",
+      type,
+      value: typeof value === "string" || typeof value === "number" ? String(value) : "",
+      placeholder: field.placeholder,
+      onChange: (e) => setValue(e.target.value),
+      ...fieldAria(field, error)
+    }
+  ) });
+}
+function LongText({ field, value, error, setValue }) {
+  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3(
+    "textarea",
+    {
+      id: `fillo-${field.id}`,
+      className: "fillo-input fillo-textarea",
+      rows: 4,
+      value: typeof value === "string" ? value : "",
+      placeholder: field.placeholder,
+      onChange: (e) => setValue(e.target.value),
+      ...fieldAria(field, error)
+    }
+  ) });
+}
+function useDisplayOptions(choice) {
+  const idsKey = choice.options.map((o) => o.id).join("\0");
+  const [order, setOrder] = useState4(null);
+  useEffect5(() => {
+    if (!choice.shuffleOptions) return;
+    const ids = idsKey === "" ? [] : idsKey.split("\0");
+    for (let i = ids.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [ids[i], ids[j]] = [ids[j], ids[i]];
+    }
+    setOrder(ids);
+  }, [choice.shuffleOptions, idsKey]);
+  if (!choice.shuffleOptions || !order) return choice.options;
+  const byId = new Map(choice.options.map((o) => [o.id, o]));
+  const shuffled = order.flatMap((id) => byId.get(id) ?? []);
+  return shuffled.length === choice.options.length ? shuffled : choice.options;
+}
+function SingleChoice({ field, value, error, setValue }) {
+  const choice = field;
+  const options = useDisplayOptions(choice);
+  const isOtherValue = typeof value === "string" && value !== "" && !choice.options.some((o) => o.id === value);
+  const [otherOn, setOtherOn] = useState4(isOtherValue);
+  const otherActive = otherOn || isOtherValue;
+  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "fillo-options",
+      role: "radiogroup",
+      "aria-labelledby": `fillo-${field.id}-label`,
+      ...fieldAria(field, error),
+      children: [
+        options.map((opt) => /* @__PURE__ */ jsxs3(
+          "label",
+          {
+            "data-option": opt.id,
+            className: `fillo-option${value === opt.id ? " fillo-option--selected" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "radio",
+                  className: "fillo-option-input",
+                  name: `fillo-${field.id}`,
+                  checked: value === opt.id,
+                  onChange: () => {
+                    setOtherOn(false);
+                    setValue(opt.id);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "fillo-option-label", children: opt.label })
+            ]
+          },
+          opt.id
+        )),
+        choice.allowOther && /* @__PURE__ */ jsxs3("label", { className: `fillo-option${otherActive ? " fillo-option--selected" : ""}`, children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "radio",
+              className: "fillo-option-input",
+              name: `fillo-${field.id}`,
+              checked: otherActive,
+              onChange: () => {
+                setOtherOn(true);
+                setValue("");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx3("span", { className: "fillo-option-label", children: "Other" }),
+          otherActive && /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "text",
+              className: "fillo-input fillo-other-input",
+              placeholder: "Your answer",
+              autoFocus: !isOtherValue,
+              value: isOtherValue ? String(value) : "",
+              onChange: (e) => setValue(e.target.value)
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function MultiChoice({ field, value, error, setValue }) {
+  const choice = field;
+  const options = useDisplayOptions(choice);
+  const ids = new Set(choice.options.map((o) => o.id));
+  const selected = Array.isArray(value) ? value : [];
+  const otherText = selected.find((v) => !ids.has(v));
+  const [otherOn, setOtherOn] = useState4(otherText !== void 0);
+  const otherActive = otherOn || otherText !== void 0;
+  const toggle = (id) => setValue(selected.includes(id) ? selected.filter((v) => v !== id) : [...selected, id]);
+  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "fillo-options",
+      role: "group",
+      "aria-labelledby": `fillo-${field.id}-label`,
+      ...fieldAria(field, error),
+      children: [
+        options.map((opt) => /* @__PURE__ */ jsxs3(
+          "label",
+          {
+            "data-option": opt.id,
+            className: `fillo-option${selected.includes(opt.id) ? " fillo-option--selected" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "fillo-option-input",
+                  checked: selected.includes(opt.id),
+                  onChange: () => toggle(opt.id)
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "fillo-option-label", children: opt.label })
+            ]
+          },
+          opt.id
+        )),
+        choice.allowOther && /* @__PURE__ */ jsxs3("label", { className: `fillo-option${otherActive ? " fillo-option--selected" : ""}`, children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "checkbox",
+              className: "fillo-option-input",
+              checked: otherActive,
+              onChange: () => {
+                if (otherActive) {
+                  setOtherOn(false);
+                  setValue(selected.filter((v) => ids.has(v)));
+                } else {
+                  setOtherOn(true);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx3("span", { className: "fillo-option-label", children: "Other" }),
+          otherActive && /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "text",
+              className: "fillo-input fillo-other-input",
+              placeholder: "Your answer",
+              autoFocus: otherText === void 0,
+              value: otherText ?? "",
+              onChange: (e) => {
+                const rest = selected.filter((v) => ids.has(v));
+                setValue(e.target.value ? [...rest, e.target.value] : rest);
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+var OTHER_SENTINEL = "__fw_other__";
+function Dropdown({ field, value, error, setValue }) {
+  const choice = field;
+  const options = useDisplayOptions(choice);
+  const isOtherValue = typeof value === "string" && value !== "" && !choice.options.some((o) => o.id === value);
+  const [otherOn, setOtherOn] = useState4(isOtherValue);
+  const otherActive = otherOn || isOtherValue;
+  return /* @__PURE__ */ jsxs3(FieldShell, { field, error, children: [
+    /* @__PURE__ */ jsxs3(
+      "select",
+      {
+        id: `fillo-${field.id}`,
+        className: "fillo-input fillo-select",
+        ...fieldAria(field, error),
+        value: otherActive ? OTHER_SENTINEL : typeof value === "string" ? value : "",
+        onChange: (e) => {
+          if (e.target.value === OTHER_SENTINEL) {
+            setOtherOn(true);
+            setValue("");
+          } else {
+            setOtherOn(false);
+            setValue(e.target.value || null);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx3("option", { value: "", children: field.placeholder ?? "Choose\u2026" }),
+          options.map((opt) => /* @__PURE__ */ jsx3("option", { value: opt.id, children: opt.label }, opt.id)),
+          choice.allowOther && /* @__PURE__ */ jsx3("option", { value: OTHER_SENTINEL, children: "Other\u2026" })
+        ]
+      }
+    ),
+    otherActive && /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "text",
+        className: "fillo-input fillo-other-input fillo-other-input--block",
+        placeholder: "Your answer",
+        autoFocus: !isOtherValue,
+        value: isOtherValue ? String(value) : "",
+        onChange: (e) => setValue(e.target.value)
+      }
+    )
+  ] });
+}
+function Checkbox({ field, value, error, setValue }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `fillo-field fillo-field--checkbox${error ? " fillo-field--error" : ""}`,
+      "data-field": field.id,
+      children: [
+        /* @__PURE__ */ jsxs3("label", { className: "fillo-option", children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              id: `fillo-${field.id}`,
+              type: "checkbox",
+              className: "fillo-option-input",
+              checked: value === true,
+              onChange: (e) => setValue(e.target.checked),
+              ...fieldAria(field, error)
+            }
+          ),
+          /* @__PURE__ */ jsxs3("span", { className: "fillo-option-label", children: [
+            field.label,
+            field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-required", "aria-hidden": "true", children: " *" })
+          ] })
+        ] }),
+        field.description && /* @__PURE__ */ jsx3("p", { className: "fillo-description", id: `fillo-${field.id}-desc`, children: field.description }),
+        error && /* @__PURE__ */ jsx3("p", { className: "fillo-error", id: `fillo-${field.id}-error`, role: "alert", children: error })
+      ]
+    }
+  );
+}
+function Rating({ field, value, error, setValue }) {
+  const max = field.max ?? 5;
+  const current = typeof value === "number" ? value : 0;
+  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3("div", { className: "fillo-rating", role: "radiogroup", "aria-label": field.label, ...fieldAria(field, error), children: Array.from({ length: max }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
+      "aria-label": `${n} of ${max}`,
+      "aria-pressed": n === current,
+      onClick: () => setValue(n === current ? null : n),
+      children: "\u2605"
+    },
+    n
+  )) }) });
+}
+function LinearScale({ field, value, error, setValue }) {
+  const scale = field;
+  const min = scale.min ?? 1;
+  const max = scale.max ?? 10;
+  const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+  return /* @__PURE__ */ jsxs3(FieldShell, { field, error, children: [
+    /* @__PURE__ */ jsx3("div", { className: "fillo-scale", role: "radiogroup", "aria-label": field.label, ...fieldAria(field, error), children: steps.map((n) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: `fillo-scale-step${value === n ? " fillo-scale-step--active" : ""}`,
+        "aria-pressed": value === n,
+        onClick: () => setValue(value === n ? null : n),
+        children: n
+      },
+      n
+    )) }),
+    (scale.minLabel || scale.maxLabel) && /* @__PURE__ */ jsxs3("div", { className: "fillo-scale-labels", children: [
+      /* @__PURE__ */ jsx3("span", { children: scale.minLabel }),
+      /* @__PURE__ */ jsx3("span", { children: scale.maxLabel })
+    ] })
+  ] });
+}
+function Ranking({ field, value, error, setValue }) {
+  const ranking = field;
+  const answered = Array.isArray(value) ? value : [];
+  const order = [
+    ...answered.filter((id) => ranking.options.some((o) => o.id === id)),
+    ...ranking.options.map((o) => o.id).filter((id) => !answered.includes(id))
+  ];
+  function move(id, delta) {
+    const index = order.indexOf(id);
+    const target = index + delta;
+    if (target < 0 || target >= order.length) return;
+    const next = [...order];
+    [next[index], next[target]] = [next[target], next[index]];
+    setValue(next);
+  }
+  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3("ol", { className: "fillo-ranking", children: order.map((id, index) => {
+    const option = ranking.options.find((o) => o.id === id);
+    if (!option) return null;
+    return /* @__PURE__ */ jsxs3("li", { className: "fillo-ranking-item", children: [
+      /* @__PURE__ */ jsx3("span", { className: "fillo-ranking-index", children: index + 1 }),
+      /* @__PURE__ */ jsx3("span", { className: "fillo-ranking-label", children: option.label }),
+      /* @__PURE__ */ jsxs3("span", { className: "fillo-ranking-controls", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "fillo-ranking-move",
+            "aria-label": `Move ${option.label} up`,
+            disabled: index === 0,
+            onClick: () => move(id, -1),
+            children: "\u2191"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "fillo-ranking-move",
+            "aria-label": `Move ${option.label} down`,
+            disabled: index === order.length - 1,
+            onClick: () => move(id, 1),
+            children: "\u2193"
+          }
+        )
+      ] })
+    ] }, id);
+  }) }) });
+}
+function Matrix({ field, value, error, setValue }) {
+  const matrix = field;
+  const answers = value && typeof value === "object" && !Array.isArray(value) ? value : {};
+  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3("div", { className: "fillo-matrix-wrap", children: /* @__PURE__ */ jsxs3("table", { className: "fillo-matrix", children: [
+    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
+      /* @__PURE__ */ jsx3("th", {}),
+      matrix.columns.map((col) => /* @__PURE__ */ jsx3("th", { scope: "col", children: col.label }, col.id))
+    ] }) }),
+    /* @__PURE__ */ jsx3("tbody", { children: matrix.rows.map((row) => /* @__PURE__ */ jsxs3("tr", { children: [
+      /* @__PURE__ */ jsx3("th", { scope: "row", children: row.label }),
+      matrix.columns.map((col) => /* @__PURE__ */ jsx3("td", { children: /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "radio",
+          className: "fillo-option-input",
+          name: `fillo-${field.id}-${row.id}`,
+          "aria-label": `${row.label}: ${col.label}`,
+          checked: answers[row.id] === col.id,
+          onChange: () => setValue({ ...answers, [row.id]: col.id })
+        }
+      ) }, col.id))
+    ] }, row.id)) })
+  ] }) }) });
+}
+function Hidden() {
+  return null;
+}
+var DEFAULT_COMPONENTS = {
+  short_text: TextInput,
+  email: TextInput,
+  url: TextInput,
+  phone: TextInput,
+  number: TextInput,
+  date: TextInput,
+  long_text: LongText,
+  select: SingleChoice,
+  multi_select: MultiChoice,
+  dropdown: Dropdown,
+  checkbox: Checkbox,
+  rating: Rating,
+  linear_scale: LinearScale,
+  ranking: Ranking,
+  matrix: Matrix,
+  signature: SignatureField,
+  file_upload: FileUploadField,
+  hidden: Hidden
+};
+function ContentRenderer({ block }) {
+  switch (block.kind) {
+    case "heading":
+      return /* @__PURE__ */ jsx3("h3", { className: "fillo-heading", children: block.text });
+    case "paragraph":
+      return /* @__PURE__ */ jsx3("p", { className: "fillo-paragraph", children: block.text });
+    case "divider":
+      return /* @__PURE__ */ jsx3("hr", { className: "fillo-divider" });
+  }
+}
+function BlockRenderer({
+  block,
+  api,
+  components,
+  customComponents
+}) {
+  block = pipeBlock(block, api.data, api.form);
+  if (!isField(block)) return /* @__PURE__ */ jsx3(ContentRenderer, { block });
+  let Component;
+  if (block.kind === "custom") {
+    Component = customComponents?.[block.component] ?? components?.custom;
+    if (!Component) {
+      const proc = globalThis.process;
+      if (proc?.env?.NODE_ENV !== "production") {
+        console.warn(
+          `[fillo] No renderer for custom field "${block.id}" (component "${block.component}"). Pass it via the customComponents prop.`
+        );
+      }
+      return null;
+    }
+  } else {
+    Component = components?.[block.kind] ?? DEFAULT_COMPONENTS[block.kind];
+  }
+  return /* @__PURE__ */ jsx3(
+    Component,
+    {
+      field: block,
+      value: api.data[block.id],
+      error: api.errors[block.id],
+      setValue: (v) => api.setValue(block.id, v),
+      api
+    }
+  );
+}
+function FormField({
+  id,
+  components,
+  customComponents
+}) {
+  const api = useFillo();
+  const block = api.form.pages.flatMap((p) => p.blocks).find((b) => b.id === id);
+  if (!block) return null;
+  return /* @__PURE__ */ jsx3(
+    BlockRenderer,
+    {
+      block,
+      api,
+      components,
+      customComponents
+    }
+  );
+}
+
+// src/FilloForm.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function themeStyle(theme) {
+  if (!theme) return void 0;
+  const style = {};
+  if (theme.primary) style["--fillo-primary"] = theme.primary;
+  if (theme.background) style["--fillo-bg"] = theme.background;
+  if (theme.text) style["--fillo-text"] = theme.text;
+  if (theme.radius) style["--fillo-radius"] = theme.radius;
+  if (theme.fontFamily) style["--fillo-font"] = theme.fontFamily;
+  return style;
+}
+function FilloForm(props) {
+  const { form, client, formId } = props;
+  const [fetched, setFetched] = useState5(null);
+  const [fetchedTheme, setFetchedTheme] = useState5(null);
+  const [loadError, setLoadError] = useState5(null);
+  const [closed, setClosed] = useState5(false);
+  const codeForm = isCodeForm2(form) ? form : null;
+  const inlineSchema = codeForm ? codeForm.schema : form;
+  const onError = props.onError;
+  const syncedFormId = useCodeFormSync(form, client, onError);
+  const needsFetch = !inlineSchema && Boolean(client && formId);
+  useEffect6(() => {
+    if (!needsFetch || !client || !formId) return;
+    let cancelled = false;
+    setFetched(null);
+    setLoadError(null);
+    client.getForm(formId).then((published) => {
+      if (cancelled) return;
+      setFetched(published.schema);
+      setFetchedTheme(published.theme);
+      setClosed(Boolean(published.closed));
+    }).catch((err) => {
+      if (cancelled) return;
+      const error = err instanceof FilloError2 ? err : new FilloError2("This form could not be loaded.", 0);
+      setLoadError(error);
+      onError?.(error);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [needsFetch, client, formId, onError]);
+  const schema = inlineSchema ?? fetched;
+  const theme = props.theme ?? codeForm?.theme ?? fetchedTheme ?? void 0;
+  if (loadError) {
+    if (props.renderError) {
+      return /* @__PURE__ */ jsx4(Fragment2, { children: props.renderError(loadError) });
+    }
+    const message = loadError.status === 404 ? "Form not found \u2014 check the form id and that it's published." : loadError.status === 0 ? "Couldn't reach the server \u2014 check your connection or CORS." : "This form could not be loaded.";
+    return /* @__PURE__ */ jsx4("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
+  }
+  if (closed) {
+    return /* @__PURE__ */ jsx4("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, style: themeStyle(theme), children: /* @__PURE__ */ jsx4("p", { className: "fillo-closed", children: "This form is no longer accepting responses." }) });
+  }
+  if (!schema) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: `fillo-form fillo-form--loading ${props.className ?? ""}`,
+        "aria-busy": "true",
+        style: themeStyle(theme),
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx4("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx4("div", { className: "fillo-skeleton fillo-skeleton--short" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(ResolvedForm, { ...props, schema, theme, formId: syncedFormId ?? formId });
+}
+function ResolvedForm(props) {
+  const { schema, theme } = props;
+  const hpRef = useRef4("");
+  const api = useFilloController({
+    form: schema,
+    formId: props.formId,
+    client: props.client,
+    initialData: props.initialData,
+    onChange: props.onChange,
+    onSubmitted: props.onSubmitted,
+    onSubmit: props.onSubmit,
+    getHoneypot: () => hpRef.current
+  });
+  const style = useMemo(() => themeStyle(theme), [theme]);
+  const settings = schema.settings;
+  const submitted = api.status === "submitted";
+  useEffect6(() => {
+    if (!submitted || !settings.redirectUrl || typeof window === "undefined") return;
+    if (/^https?:\/\//i.test(settings.redirectUrl)) {
+      window.location.assign(settings.redirectUrl);
+    }
+  }, [submitted, settings.redirectUrl]);
+  if (api.status === "submitted") {
+    return /* @__PURE__ */ jsx4("div", { className: `fillo-form fillo-form--success ${props.className ?? ""}`, style, children: props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs4("div", { className: "fillo-success", children: [
+      /* @__PURE__ */ jsx4("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
+      /* @__PURE__ */ jsx4("h2", { className: "fillo-success-title", children: settings.successTitle ?? "Thanks!" }),
+      /* @__PURE__ */ jsx4("p", { className: "fillo-success-message", children: settings.successMessage ?? "Your response has been recorded." })
+    ] }) });
+  }
+  const multiPage = api.pageCount > 1;
+  return /* @__PURE__ */ jsx4(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsxs4(
+    "form",
+    {
+      className: `fillo-form ${props.className ?? ""}`,
+      style,
+      noValidate: true,
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (api.isLastPage) void api.submit();
+        else api.next();
+      },
+      children: [
+        multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "fillo-progress-track",
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": api.pageCount,
+            "aria-valuenow": api.pageIndex + 1,
+            children: /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "fillo-progress-fill",
+                style: { width: `${(api.pageIndex + 1) / api.pageCount * 100}%` }
+              }
+            )
+          }
+        ),
+        api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs4("header", { className: "fillo-header", children: [
+          /* @__PURE__ */ jsx4("h1", { className: "fillo-title", children: schema.title }),
+          schema.description && /* @__PURE__ */ jsx4("p", { className: "fillo-form-description", children: schema.description })
+        ] }),
+        multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx4("h2", { className: "fillo-page-title", children: api.page.title }),
+        /* @__PURE__ */ jsx4("div", { className: "fillo-blocks", children: api.blocks.map((block) => /* @__PURE__ */ jsx4(
+          BlockRenderer,
+          {
+            block,
+            api,
+            components: props.components,
+            customComponents: props.customComponents
+          },
+          block.id
+        )) }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "text",
+            name: "fw_hp_field",
+            className: "fillo-hp",
+            tabIndex: -1,
+            autoComplete: "off",
+            "aria-hidden": "true",
+            defaultValue: "",
+            onChange: (e) => {
+              hpRef.current = e.target.value;
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs4("footer", { className: "fillo-footer", children: [
+          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx4("button", { type: "button", className: "fillo-button fillo-button--ghost", onClick: api.back, children: "Back" }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "submit",
+              className: "fillo-button fillo-button--primary",
+              disabled: api.status === "submitting" || api.uploading,
+              children: api.uploading ? "Uploading\u2026" : api.status === "submitting" ? "Submitting\u2026" : api.isLastPage ? settings.submitLabel ?? "Submit" : "Next"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/provider.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function FilloProvider({ children, form, formId, client, ...options }) {
+  const codeForm = isCodeForm2(form) ? form : null;
+  const schema = codeForm ? codeForm.schema : form;
+  const syncedFormId = useCodeFormSync(form, client);
+  const api = useFilloController({
+    ...options,
+    client,
+    form: schema,
+    formId: syncedFormId ?? formId
+  });
+  return /* @__PURE__ */ jsx5(FilloContext.Provider, { value: api, children });
+}
+
+// src/index.ts
+import {
+  createClient,
+  FilloClient,
+  FilloError as FilloError3
+} from "@usefillo/core";
+export {
+  BlockRenderer,
+  FilloClient,
+  FilloError3 as FilloError,
+  FileUploadField as FilloFileUpload,
+  FilloForm,
+  FilloProvider,
+  FormField,
+  createClient,
+  defineForm,
+  useField,
+  useFillo,
+  useFilloController
+};