@marktiderman/genesis-forms-web 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,1024 @@
+"use client";
+import { createContext, useRef, useContext, useState, useEffect, useLayoutEffect, useId } from 'react';
+import { Button } from '@marktiderman/genesis-ui/button';
+import { Progress } from '@marktiderman/genesis-ui/progress';
+import { cn } from '@marktiderman/genesis-ui/utils';
+import { createRendererRegistry, useForm, FormRuntime, useFormContext, useFormSelector, FieldRenderer } from '@marktiderman/genesis-forms-react';
+import { Checkbox } from '@marktiderman/genesis-ui/checkbox';
+import { FormDescription, FormError, FormLabel } from '@marktiderman/genesis-ui/form-field';
+import { Input } from '@marktiderman/genesis-ui/input';
+import { Label } from '@marktiderman/genesis-ui/label';
+import { RadioGroup, RadioGroupItem } from '@marktiderman/genesis-ui/radio-group';
+import { Textarea } from '@marktiderman/genesis-ui/textarea';
+import { choiceOptions, getFieldType } from '@marktiderman/genesis-forms';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/Form.tsx
+var FormPresentationContext = createContext({ presentation: "embedded", layout: "classic" });
+var FormPresentationProvider = FormPresentationContext.Provider;
+function useFormPresentation() {
+  return useContext(FormPresentationContext);
+}
+var questionFocus = "rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
+function FieldChrome({ props, children, className }) {
+  const { binding, inputId } = props;
+  const { field, error, label } = binding;
+  const { presentation, layout } = useFormPresentation();
+  const pageFocus = presentation === "page" && layout === "focus";
+  const pageClassic = presentation === "page" && layout === "classic";
+  const group = getFieldType(field.type)?.a11y.semantics === "group";
+  const description = field.description ? props.engine.text(field.description) : void 0;
+  const questionSize = pageFocus ? "text-2xl font-semibold leading-tight tracking-tight text-balance sm:text-3xl" : pageClassic ? "text-lg font-medium leading-snug" : "text-base";
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    description ? /* @__PURE__ */ jsx(FormDescription, { id: `${inputId}-desc`, className: cn(pageFocus && "text-base sm:text-lg text-pretty"), children: description }) : null,
+    pageFocus ? /* @__PURE__ */ jsx("div", { className: "pt-6 sm:pt-8", children }) : children,
+    pageFocus ? (
+      // A calm note under the answer, Typeform style; the question keeps its colour.
+      error ? /* @__PURE__ */ jsxs(
+        FormError,
+        {
+          id: `${inputId}-error`,
+          className: "mt-4 inline-flex items-center gap-2 rounded-md bg-destructive px-3 py-2 text-sm text-destructive-foreground",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                "aria-hidden": "true",
+                className: "size-4 shrink-0",
+                children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round" })
+                ]
+              }
+            ),
+            error
+          ]
+        }
+      ) : null
+    ) : /* @__PURE__ */ jsx(FormError, { id: `${inputId}-error`, children: error })
+  ] });
+  if (group) {
+    return /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        id: inputId,
+        "data-slot": "form-field",
+        "aria-describedby": describedBy(props),
+        className: cn("space-y-3 border-0 p-0 m-0 min-w-0", className),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "legend",
+            {
+              id: `${inputId}-label`,
+              tabIndex: -1,
+              "data-gf-question": "",
+              className: cn(
+                "mb-3 font-medium",
+                questionSize,
+                pageFocus && "mb-0",
+                questionFocus,
+                error && !pageFocus && "text-destructive"
+              ),
+              children: [
+                label,
+                field.required ? /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", "aria-hidden": "true", children: "*" }) : null
+              ]
+            }
+          ),
+          body
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "form-field", className: cn("space-y-2", pageFocus && "space-y-3", className), children: [
+    /* @__PURE__ */ jsx(
+      FormLabel,
+      {
+        id: `${inputId}-label`,
+        htmlFor: inputId,
+        tabIndex: -1,
+        "data-gf-question": "",
+        error: Boolean(error) && !pageFocus,
+        required: field.required,
+        className: cn(presentation === "page" && "block", questionSize, questionFocus),
+        children: label
+      }
+    ),
+    body
+  ] });
+}
+function describedBy(props) {
+  const ids = [
+    props.binding.field.description ? `${props.inputId}-desc` : null,
+    props.binding.error ? `${props.inputId}-error` : null
+  ].filter(Boolean);
+  return ids.length ? ids.join(" ") : void 0;
+}
+function groupAria(props) {
+  return {
+    "aria-labelledby": `${props.inputId}-label`,
+    "aria-required": props.binding.field.required || void 0,
+    "aria-invalid": props.binding.error ? true : void 0
+  };
+}
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"]);
+var NAVIGATION_WINDOW_MS = 500;
+function useDeliberatePick(onAdvance) {
+  const lastKey = useRef(null);
+  return {
+    rootProps: {
+      onKeyDownCapture: (e) => {
+        lastKey.current = { key: e.key, at: Date.now() };
+      },
+      onPointerDownCapture: () => {
+        lastKey.current = null;
+      }
+    },
+    onItemClick: () => {
+      const last = lastKey.current;
+      const navigating = last && NAVIGATION_KEYS.has(last.key) && Date.now() - last.at < NAVIGATION_WINDOW_MS;
+      if (!navigating) onAdvance?.();
+    }
+  };
+}
+function TextField(props) {
+  const { binding, inputId, type = "text", multiline, inputMode, autoComplete } = props;
+  const manifest = getFieldType(binding.field.type);
+  const { presentation, layout } = useFormPresentation();
+  const pageFocus = presentation === "page" && layout === "focus";
+  const common = {
+    id: inputId,
+    value: typeof binding.value === "string" ? binding.value : "",
+    placeholder: binding.field.placeholder ?? (pageFocus ? "Type your answer here\u2026" : void 0),
+    // Page focus: a large underlined answer line, Typeform style. The underline turns primary on focus.
+    className: pageFocus ? "h-auto rounded-none border-0 border-b-2 border-input bg-transparent px-0 py-2 text-xl shadow-none md:text-2xl sm:text-2xl placeholder:text-muted-foreground/70 focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-offset-0 aria-invalid:border-destructive" : presentation === "page" ? "h-11 md:text-base" : void 0,
+    // The focus layout focuses the input itself, so a respondent can type straight away.
+    "data-gf-focus": "",
+    "aria-invalid": binding.error ? true : void 0,
+    "aria-required": binding.field.required || void 0,
+    "aria-describedby": describedBy(props)
+  };
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: multiline ? /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ...common,
+      rows: pageFocus ? 1 : 4,
+      className: cn(common.className, pageFocus && "min-h-12 resize-none"),
+      onChange: (e) => binding.setValue(e.target.value)
+    }
+  ) : /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...common,
+      type,
+      inputMode: manifest?.a11y.inputMode ?? inputMode,
+      autoComplete: manifest?.a11y.autocomplete ?? autoComplete,
+      onChange: (e) => binding.setValue(e.target.value)
+    }
+  ) });
+}
+function ButtonRadioGroup({
+  props,
+  options,
+  value,
+  onValueChange,
+  itemClassName
+}) {
+  const pick = useDeliberatePick(props.onAdvance);
+  const { presentation, layout } = useFormPresentation();
+  const page = presentation === "page";
+  const size = layout === "classic" ? "h-12" : options.length <= 6 ? "h-14 sm:h-16" : "h-14";
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      ...groupAria(props),
+      ...pick.rootProps,
+      value,
+      onValueChange,
+      className: page ? cn("grid gap-2", options.length <= 6 && "sm:gap-3", gridColumns(options.length)) : "flex flex-wrap justify-start gap-2",
+      children: options.map((o) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          RadioGroupItem,
+          {
+            value: o.value,
+            "aria-label": o.label,
+            "aria-describedby": o.describedBy,
+            onClick: pick.onItemClick,
+            className: cn(
+              "peer h-11 w-11 aspect-auto rounded-md border-input bg-background shadow-sm transition-colors hover:bg-accent motion-reduce:transition-none",
+              page && cn(size, "w-full rounded-lg border-primary/30 bg-primary/5 shadow-none hover:bg-primary/10"),
+              "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:hover:bg-primary",
+              "[&_svg]:hidden",
+              page ? void 0 : itemClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-0 flex items-center justify-center text-base font-medium peer-disabled:opacity-50 peer-data-[state=checked]:text-primary-foreground",
+              page && "text-lg font-semibold"
+            ),
+            children: o.label
+          }
+        )
+      ] }, o.value))
+    }
+  );
+}
+var PHONE_COLUMNS = {
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-4",
+  8: "grid-cols-4",
+  9: "grid-cols-5",
+  10: "grid-cols-5",
+  11: "grid-cols-6"
+};
+var WIDE_COLUMNS = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6",
+  7: "sm:grid-cols-7",
+  8: "sm:grid-cols-8",
+  9: "sm:grid-cols-9",
+  10: "sm:grid-cols-10",
+  11: "sm:grid-cols-11"
+};
+function gridColumns(count) {
+  return cn(PHONE_COLUMNS[count] ?? "grid-cols-6", WIDE_COLUMNS[count] ?? "sm:grid-cols-11");
+}
+function scaleValues(type, max) {
+  if (type === "nps") return Array.from({ length: 11 }, (_, i) => i);
+  return Array.from({ length: max }, (_, i) => i + 1);
+}
+function ScaleField(props) {
+  const { binding, inputId } = props;
+  const max = typeof binding.field.props?.max === "number" ? binding.field.props.max : 5;
+  const values = scaleValues(binding.field.type, max);
+  const nps = binding.field.type === "nps";
+  const options = values.map((n, i) => ({
+    value: String(n),
+    label: String(n),
+    describedBy: nps && i === 0 ? `${inputId}-low` : nps && i === values.length - 1 ? `${inputId}-high` : void 0
+  }));
+  return /* @__PURE__ */ jsxs(FieldChrome, { props, children: [
+    /* @__PURE__ */ jsx(
+      ButtonRadioGroup,
+      {
+        props,
+        options,
+        value: typeof binding.value === "number" ? String(binding.value) : "",
+        onValueChange: (v) => binding.setValue(Number(v))
+      }
+    ),
+    nps ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { id: `${inputId}-low`, children: "Not likely" }),
+      /* @__PURE__ */ jsx("span", { id: `${inputId}-high`, children: "Very likely" })
+    ] }) : null
+  ] });
+}
+function YesNoField(props) {
+  const { binding } = props;
+  const current = binding.value === true ? "yes" : binding.value === false ? "no" : "";
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsx(
+    ButtonRadioGroup,
+    {
+      props,
+      options: [
+        { value: "yes", label: "Yes" },
+        { value: "no", label: "No" }
+      ],
+      value: current,
+      onValueChange: (v) => binding.setValue(v === "yes"),
+      itemClassName: "w-20"
+    }
+  ) });
+}
+var choiceRow = "flex min-h-11 w-full cursor-pointer items-center gap-3 rounded-md border border-input px-3 py-2 text-base font-normal leading-snug transition-colors hover:bg-accent motion-reduce:transition-none has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:disabled]:hover:bg-transparent";
+var pageChoiceRow = "group/choice min-h-13 gap-3 rounded-lg border-primary/30 bg-primary/5 px-3 py-2.5 text-lg hover:bg-primary/10 has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/15 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 ring-offset-background";
+var pageChoiceKey = "peer size-7 shrink-0 rounded-md border border-primary/50 bg-background shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=checked]:border-primary data-[state=checked]:bg-primary [&_svg]:hidden";
+var KEYS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+function useChoiceLook(inputId, count) {
+  const { presentation, layout } = useFormPresentation();
+  const pageFocus = presentation === "page" && layout === "focus";
+  const page = presentation === "page";
+  return {
+    pageFocus,
+    row: cn(
+      choiceRow,
+      "has-[[data-state=checked]]:border-primary",
+      page && "min-h-12 text-base",
+      pageFocus && pageChoiceRow
+    ),
+    control: pageFocus ? pageChoiceKey : void 0,
+    onKeyDown: pageFocus ? (e) => {
+      if (e.altKey || e.ctrlKey || e.metaKey || e.key.length !== 1) return;
+      const index = KEYS.indexOf(e.key.toUpperCase());
+      if (index < 0 || index >= count) return;
+      const option = document.getElementById(`${inputId}-${index}`);
+      if (!option || option.disabled) return;
+      e.preventDefault();
+      option.focus();
+      option.click();
+    } : void 0
+  };
+}
+function ChoiceContent({ look, index, label }) {
+  if (!look.pageFocus) return /* @__PURE__ */ jsx("span", { children: label });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute flex size-7 items-center justify-center text-xs font-bold text-primary group-has-[[data-state=checked]]/choice:text-primary-foreground",
+        children: KEYS[index] ?? ""
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "flex-1", children: label }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        className: "size-5 shrink-0 text-primary opacity-0 transition-opacity group-has-[[data-state=checked]]/choice:opacity-100 motion-reduce:transition-none",
+        children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+      }
+    )
+  ] });
+}
+function SingleChoiceField(props) {
+  const { binding, inputId, onAdvance } = props;
+  const pick = useDeliberatePick(onAdvance);
+  const options = choiceOptions(binding.field);
+  const look = useChoiceLook(inputId, options.length);
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      ...groupAria(props),
+      ...pick.rootProps,
+      onKeyDown: look.onKeyDown,
+      className: look.pageFocus ? "gap-2.5" : void 0,
+      value: typeof binding.value === "string" ? binding.value : "",
+      onValueChange: (v) => binding.setValue(v),
+      children: options.map((o, i) => /* @__PURE__ */ jsxs(Label, { htmlFor: `${inputId}-${i}`, className: look.row, children: [
+        /* @__PURE__ */ jsx(
+          RadioGroupItem,
+          {
+            id: `${inputId}-${i}`,
+            value: o.value,
+            onClick: pick.onItemClick,
+            className: look.control
+          }
+        ),
+        /* @__PURE__ */ jsx(ChoiceContent, { look, index: i, label: o.label ?? o.value })
+      ] }, o.value))
+    }
+  ) });
+}
+function MultiChoiceField(props) {
+  const { binding, inputId } = props;
+  const selected = Array.isArray(binding.value) ? binding.value : [];
+  const options = choiceOptions(binding.field);
+  const look = useChoiceLook(inputId, options.length);
+  const toggle = (value, on) => {
+    const next = on ? [...selected, value] : selected.filter((v) => v !== value);
+    binding.setValue(next.length ? next : void 0);
+  };
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-2", look.pageFocus && "gap-2.5"), onKeyDown: look.onKeyDown, children: [
+    look.pageFocus ? /* @__PURE__ */ jsx("p", { className: "-mt-2 mb-1 text-sm text-muted-foreground", children: "Choose as many as you like" }) : null,
+    options.map((o, i) => /* @__PURE__ */ jsxs(Label, { htmlFor: `${inputId}-${i}`, className: look.row, children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: `${inputId}-${i}`,
+          checked: selected.includes(o.value),
+          "aria-invalid": binding.error ? true : void 0,
+          onCheckedChange: (c) => toggle(o.value, c === true),
+          className: look.control
+        }
+      ),
+      /* @__PURE__ */ jsx(ChoiceContent, { look, index: i, label: o.label ?? o.value })
+    ] }, o.value))
+  ] }) });
+}
+var builtInRenderers = [
+  { type: "short-text", Component: (p) => /* @__PURE__ */ jsx(TextField, { ...p }) },
+  { type: "long-text", Component: (p) => /* @__PURE__ */ jsx(TextField, { ...p, multiline: true }) },
+  { type: "email", Component: (p) => /* @__PURE__ */ jsx(TextField, { ...p, type: "email" }) },
+  // The engine's `phone` type (string value). Registered by name so it works
+  // with any engine that defines it; the tel hints don't depend on its manifest.
+  { type: "phone", Component: (p) => /* @__PURE__ */ jsx(TextField, { ...p, type: "tel", inputMode: "tel", autoComplete: "tel" }) },
+  { type: "rating", Component: ScaleField },
+  { type: "nps", Component: ScaleField },
+  { type: "single-choice", Component: SingleChoiceField },
+  { type: "multi-choice", Component: MultiChoiceField },
+  { type: "yes-no", Component: YesNoField }
+];
+var defaultRegistry = createRendererRegistry(builtInRenderers);
+function renderSlot(Default, override, props, extra) {
+  if (override === null) return null;
+  const Component = override ?? Default;
+  return /* @__PURE__ */ jsx(Component, { ...props, ...extra });
+}
+var focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
+function DefaultHeader({ title, description, className }) {
+  const { presentation, layout } = useFormPresentation();
+  if (presentation === "page" && layout === "focus") {
+    return /* @__PURE__ */ jsxs("header", { className: cn("space-y-1", className), children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-sm font-medium text-muted-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+    ] });
+  }
+  if (presentation === "page") {
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        className: cn(
+          "rounded-xl border border-t-8 border-t-primary bg-card px-5 py-6 text-card-foreground sm:px-8 sm:py-8",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground text-pretty", children: description }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("header", { className: cn("space-y-1", className), children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }) : null
+  ] });
+}
+function initials(name) {
+  return name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
+}
+function DefaultBrand({ name, logo, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-2.5", className), "data-gf-brand": "", children: [
+    typeof logo === "string" ? /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "size-8 shrink-0 rounded-md object-contain" }) : logo ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: logo }) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold tracking-wide text-primary-foreground",
+        children: initials(name)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: name })
+  ] });
+}
+function DefaultProgress({ step, total, className }) {
+  const { presentation } = useFormPresentation();
+  const page = presentation === "page";
+  const percent = total ? Math.round((page ? step - 1 : step) / total * 100) : 0;
+  const bar = /* @__PURE__ */ jsx(
+    Progress,
+    {
+      value: percent,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percent,
+      "aria-valuetext": `Question ${step} of ${total}`,
+      "aria-label": "Progress",
+      className: cn("motion-reduce:[&>div]:transition-none", page && "h-1 rounded-none bg-primary/15")
+    }
+  );
+  if (page) {
+    return /* @__PURE__ */ jsx("div", { className: cn("fixed inset-x-0 top-0 z-10", className), "data-gf-progress": "", children: bar });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), "data-gf-progress": "", children: [
+    bar,
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      "Question ",
+      step,
+      " of ",
+      total
+    ] })
+  ] });
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
+function DefaultNavigation({
+  canGoBack,
+  isLast,
+  busy,
+  failed,
+  onBack,
+  submitLabel,
+  nextLabel,
+  retryLabel,
+  keyHint,
+  className
+}) {
+  const { presentation, layout } = useFormPresentation();
+  const label = busy ? "Sending\u2026" : failed ? retryLabel : isLast ? submitLabel : nextLabel;
+  if (presentation === "page") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-x-4 gap-y-2", layout === "classic" && "pt-2", className), children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "submit",
+          size: "lg",
+          loading: busy,
+          className: "h-12 min-w-28 px-6 text-base font-semibold motion-reduce:[&_.animate-spin]:animate-none [&_svg]:size-5",
+          children: [
+            label,
+            !busy && !failed && !isLast ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+          ]
+        }
+      ),
+      keyHint && !busy ? /* @__PURE__ */ jsxs("span", { className: "hidden text-sm text-muted-foreground pointer-fine:inline", "data-gf-key-hint": "", children: [
+        "press ",
+        /* @__PURE__ */ jsx("kbd", { className: "font-sans font-semibold text-foreground", children: keyHint })
+      ] }) : null,
+      canGoBack ? (
+        // After OK in the tab order, drawn quietly at the page's top-left.
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            "aria-label": "Back",
+            onClick: onBack,
+            disabled: busy,
+            className: "absolute left-2 top-2.5 size-11 text-muted-foreground sm:left-4 sm:top-4.5 [&_svg]:size-6",
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+          }
+        )
+      ) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
+    canGoBack ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "lg", onClick: onBack, disabled: busy, children: "Back" }) : null,
+    /* @__PURE__ */ jsx(Button, { type: "submit", size: "lg", loading: busy, className: "motion-reduce:[&_.animate-spin]:animate-none", children: label })
+  ] });
+}
+function DefaultEnding({ title, description, className }) {
+  const { presentation } = useFormPresentation();
+  if (presentation === "page") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 text-center", className), children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "mb-2 flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary",
+          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-8" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          tabIndex: -1,
+          "data-gf-focus": "",
+          className: cn(
+            "rounded-sm text-3xl font-semibold leading-tight tracking-tight text-balance sm:text-4xl",
+            focusRing
+          ),
+          children: title
+        }
+      ),
+      description ? /* @__PURE__ */ jsx("p", { className: "max-w-md text-lg text-muted-foreground text-pretty", children: description }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 py-8 text-center", className), children: [
+    /* @__PURE__ */ jsx("h2", { tabIndex: -1, "data-gf-focus": "", className: cn("rounded-sm text-2xl font-semibold", focusRing), children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }) : null
+  ] });
+}
+function focusErrorTarget(event) {
+  const id = event.currentTarget.hash.slice(1);
+  const target = id ? document.getElementById(id) : null;
+  if (!target) return;
+  event.preventDefault();
+  const control = target.matches("input, textarea, select, button") ? target : target.querySelector('[aria-checked="true"]:not(:disabled)') ?? target.querySelector("input:not(:disabled), textarea:not(:disabled), button:not(:disabled)");
+  (control ?? target).focus();
+}
+function DefaultErrorSummary({ count, errors, className }) {
+  const titleId = useId();
+  return (
+    // `<Form>` focuses the element marked data-gf-error-summary after a failed submit.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": titleId,
+        tabIndex: -1,
+        "data-gf-error-summary": "",
+        className: cn("space-y-2 rounded-md border border-destructive p-4", focusRing, className),
+        children: [
+          /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-base font-semibold text-destructive", children: count === 1 ? "One answer needs attention." : `${count} answers need attention.` }),
+          /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm", children: errors.map((e) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", { href: e.href, onClick: focusErrorTarget, className: "font-medium text-destructive underline underline-offset-4", children: [
+            e.label,
+            ": ",
+            e.message
+          ] }) }, e.id)) })
+        ]
+      }
+    )
+  );
+}
+var ADVANCE_DELAY_MS = 250;
+var engineKeys = /* @__PURE__ */ new WeakMap();
+var nextEngineKey = 0;
+function keyOf(engine) {
+  let key = engineKeys.get(engine);
+  if (key === void 0) {
+    key = nextEngineKey++;
+    engineKeys.set(engine, key);
+  }
+  return key;
+}
+function Form(props) {
+  return props.engine ? /* @__PURE__ */ jsx(FormWithEngine, { ...props, engine: props.engine }) : /* @__PURE__ */ jsx(OwnedForm, { ...props });
+}
+function OwnedForm(props) {
+  const engine = useForm(props.form, props.options);
+  return /* @__PURE__ */ jsx(FormWithEngine, { ...props, engine });
+}
+function FormWithEngine(props) {
+  return /* @__PURE__ */ jsx(FormRuntime, { engine: props.engine, registry: props.registry ?? defaultRegistry, children: /* @__PURE__ */ jsx(FormBody, { ...props }, keyOf(props.engine)) });
+}
+function focusWithin(root) {
+  if (!root) return;
+  const target = root.querySelector("[data-gf-focus]") ?? root.querySelector("[data-gf-question]") ?? root.querySelector("h1, h2, h3");
+  if (target && target.tabIndex < 0 && !target.hasAttribute("tabindex")) target.tabIndex = -1;
+  (target ?? root).focus();
+}
+function FormBody({
+  engine,
+  layout: layoutProp,
+  presentation = "embedded",
+  brand,
+  onSubmit,
+  onChange,
+  autoAdvance = true,
+  submitLabel = "Submit",
+  nextLabel = "OK",
+  retryLabel = "Try again",
+  slots,
+  slotProps,
+  className,
+  testID
+}) {
+  const { idPrefix } = useFormContext();
+  const def = engine.definition;
+  const layout = layoutProp ?? def.layout?.mode ?? "classic";
+  const status = useFormSelector(engine, (s) => s.status);
+  const current = useFormSelector(engine, (s) => s.current);
+  const pathKey = useFormSelector(engine, (s) => JSON.stringify(s.path));
+  const errorsKey = useFormSelector(engine, (s) => JSON.stringify(s.errors));
+  const ending = useFormSelector(engine, (s) => s.ending);
+  const historyLength = useFormSelector(engine, (s) => s.history.length);
+  const description = useFormSelector(engine, () => def.description ? engine.text(def.description) : void 0);
+  const path = JSON.parse(pathKey);
+  const errors = JSON.parse(errorsKey);
+  const formRef = useRef(null);
+  const stepRef = useRef(null);
+  const endingRef = useRef(null);
+  const advanceTimer = useRef(void 0);
+  const previousCurrent = useRef(current);
+  const [phase, setPhase] = useState("idle");
+  const [announcement, setAnnouncement] = useState("");
+  const [summaryRequest, setSummaryRequest] = useState(0);
+  const sending = useRef(false);
+  const direction = useRef("forward");
+  const [modKey, setModKey] = useState("Ctrl");
+  const page = presentation === "page";
+  useEffect(() => {
+    if (/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent)) setModKey("\u2318");
+  }, []);
+  const showEnding = status === "completed" && (phase === "sent" || !onSubmit);
+  const locked = status === "completed";
+  useEffect(() => {
+    if (!onChange) return;
+    return engine.subscribe(() => onChange(engine.getState(), engine));
+  }, [engine, onChange]);
+  useLayoutEffect(() => {
+    if (previousCurrent.current === current) return;
+    previousCurrent.current = current;
+    clearTimeout(advanceTimer.current);
+    if (layout === "focus") focusWithin(stepRef.current);
+  }, [current, layout]);
+  useLayoutEffect(() => {
+    if (showEnding) focusWithin(endingRef.current);
+  }, [showEnding]);
+  useLayoutEffect(() => {
+    if (!summaryRequest) return;
+    const form = formRef.current;
+    const summary = form?.querySelector("[data-gf-error-summary]");
+    if (summary) summary.focus();
+    else form?.querySelector('[aria-invalid="true"]')?.focus();
+  }, [summaryRequest]);
+  useLayoutEffect(() => {
+    if (phase !== "failed") return;
+    const form = formRef.current;
+    if (form && !form.contains(document.activeElement)) form.querySelector('[type="submit"]')?.focus();
+  }, [phase]);
+  useEffect(() => () => clearTimeout(advanceTimer.current), []);
+  const announce = (message) => setAnnouncement((previous) => previous === message ? `${message}\xA0` : message);
+  const announceStepError = () => {
+    const state = engine.getState();
+    const message = state.current ? state.errors[state.current] : void 0;
+    if (message) announce(message);
+  };
+  const finish = async () => {
+    if (sending.current) return;
+    if (engine.getState().status !== "completed" && !engine.submit()) {
+      if (layout === "classic") setSummaryRequest((n) => n + 1);
+      else announceStepError();
+      return;
+    }
+    if (!onSubmit) {
+      setPhase("sent");
+      return;
+    }
+    sending.current = true;
+    setPhase("sending");
+    try {
+      await onSubmit(engine);
+      setPhase("sent");
+    } catch {
+      setPhase("failed");
+    } finally {
+      sending.current = false;
+    }
+  };
+  const isLastStep = (state) => state.current === state.path[state.path.length - 1];
+  const advance = () => {
+    direction.current = "forward";
+    if (isLastStep(engine.getState())) void finish();
+    else if (!engine.next()) announceStepError();
+  };
+  const submit = () => {
+    clearTimeout(advanceTimer.current);
+    if (layout === "focus") advance();
+    else void finish();
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    submit();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+    const target = e.target;
+    if (target instanceof HTMLTextAreaElement) {
+      if (e.metaKey || e.ctrlKey) {
+        e.preventDefault();
+        submit();
+      }
+      return;
+    }
+    if (layout === "focus" && target.matches('[role="radio"], [role="checkbox"]')) {
+      e.preventDefault();
+      submit();
+    }
+  };
+  const scheduleAdvance = layout === "focus" && autoAdvance ? () => {
+    clearTimeout(advanceTimer.current);
+    advanceTimer.current = setTimeout(() => {
+      const state = engine.getState();
+      if (state.status === "completed" || isLastStep(state)) return;
+      direction.current = "forward";
+      if (!engine.next()) announceStepError();
+    }, ADVANCE_DELAY_MS);
+  } : void 0;
+  const goBack = () => {
+    clearTimeout(advanceTimer.current);
+    direction.current = "back";
+    engine.back();
+  };
+  const liveRegion = /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", "data-gf-live": "", children: announcement });
+  const presentationValue = { presentation, layout };
+  const brandNode = brand ? renderSlot(DefaultBrand, slots?.brand, { name: brand.name, logo: brand.logo }, slotProps?.brand) : null;
+  if (showEnding) {
+    const end = def.endings?.find((x) => x.id === ending) ?? def.endings?.[0];
+    const endingNode = renderSlot(
+      DefaultEnding,
+      slots?.ending,
+      {
+        title: engine.text(end?.title ?? "Thank you."),
+        description: end?.description ? engine.text(end.description) : void 0
+      },
+      slotProps?.ending
+    );
+    return /* @__PURE__ */ jsxs(FormPresentationProvider, { value: presentationValue, children: [
+      liveRegion,
+      page ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: endingRef,
+          "data-presentation": "page",
+          "data-testid": testID,
+          className: cn("flex min-h-dvh w-full flex-col bg-background text-foreground", className),
+          children: [
+            brandNode ? /* @__PURE__ */ jsx("div", { className: "flex h-16 shrink-0 items-center justify-center px-16 sm:h-20", children: brandNode }) : null,
+            /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center px-4 pb-24 pt-8 sm:px-6", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: endingNode }) })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs("div", { ref: endingRef, className: cn("mx-auto w-full max-w-xl space-y-6", className), "data-testid": testID, children: [
+        brandNode,
+        endingNode
+      ] })
+    ] });
+  }
+  const pageFocus = page && layout === "focus";
+  const pageClassic = page && layout === "classic";
+  const renderBlock = (id, focus) => {
+    const block = engine.block(id);
+    if (!block || block.kind === "page-break") return null;
+    if (block.kind === "content") {
+      const focusable = focus ? { tabIndex: -1, "data-gf-question": "" } : {};
+      const content = block.type === "heading" ? /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: cn(
+            "rounded-sm text-xl font-semibold",
+            pageFocus && "text-2xl leading-tight tracking-tight text-balance sm:text-3xl",
+            focusRing
+          ),
+          ...focusable,
+          children: engine.text(block.text)
+        },
+        id
+      ) : /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn("rounded-sm text-muted-foreground", pageFocus && "text-lg sm:text-xl text-pretty", focusRing),
+          ...focusable,
+          children: engine.text(block.text)
+        },
+        id
+      );
+      return pageClassic ? /* @__PURE__ */ jsx("section", { className: classicSection, children: content }, id) : content;
+    }
+    const field = /* @__PURE__ */ jsx(FieldRenderer, { id, onAdvance: focus ? scheduleAdvance : void 0 });
+    return /* @__PURE__ */ jsx("div", { "data-block": id, className: pageClassic ? classicSection : void 0, children: field }, id);
+  };
+  const step = current ? Math.max(1, path.indexOf(current) + 1) : 1;
+  const isLast = layout === "classic" || current === path[path.length - 1];
+  const errorItems = path.filter((id) => errors[id]).map((id) => ({
+    id,
+    label: engine.text(engine.field(id)?.label ?? id),
+    message: errors[id],
+    href: `#${idPrefix}-${id}`
+  }));
+  const currentField = pageFocus && current ? engine.field(current) : void 0;
+  const keyHint = currentField ? currentField.type === "long-text" ? `${modKey} + Enter` : "Enter \u21B5" : void 0;
+  const header = renderSlot(
+    DefaultHeader,
+    slots?.header,
+    { title: def.title, description },
+    slotProps?.header
+  );
+  const errorSummary = errorItems.length > 0 && layout === "classic" ? renderSlot(
+    DefaultErrorSummary,
+    slots?.errorSummary,
+    {
+      count: errorItems.length,
+      errors: errorItems,
+      className: page ? "bg-card" : void 0
+    },
+    slotProps?.errorSummary
+  ) : null;
+  const progress = layout === "focus" ? renderSlot(DefaultProgress, slots?.progress, { step, total: path.length }, slotProps?.progress) : null;
+  const fields = (
+    // Disabled once the response is completed (sending, or after a failed send): read-only, not dead.
+    /* @__PURE__ */ jsx("fieldset", { disabled: locked, className: "min-w-0 border-0 p-0", children: layout === "focus" ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: stepRef,
+        tabIndex: -1,
+        className: cn(
+          "outline-none",
+          pageFocus && "transition-[opacity,translate] duration-300 ease-out starting:opacity-0 motion-reduce:transition-none",
+          pageFocus && (direction.current === "back" ? "starting:-translate-y-6" : "starting:translate-y-6")
+        ),
+        children: current ? renderBlock(current, true) : null
+      },
+      pageFocus ? current ?? "" : void 0
+    ) : /* @__PURE__ */ jsx("div", { className: pageClassic ? "space-y-4" : "space-y-8", children: path.map((id) => renderBlock(id, false)) }) })
+  );
+  const failure = phase === "failed" ? /* @__PURE__ */ jsxs("p", { role: "alert", className: cn("text-sm font-medium text-destructive", page && "text-base"), children: [
+    "We couldn't send your answers. They're kept here: press ",
+    retryLabel,
+    " to send them again."
+  ] }) : null;
+  const navigation = renderSlot(
+    DefaultNavigation,
+    slots?.navigation,
+    {
+      canGoBack: layout === "focus" && historyLength > 0 && !locked,
+      isLast: isLast || status === "completed",
+      busy: phase === "sending",
+      failed: phase === "failed",
+      onBack: goBack,
+      submitLabel,
+      nextLabel,
+      retryLabel,
+      keyHint
+    },
+    slotProps?.navigation
+  );
+  const formProps = {
+    ref: formRef,
+    noValidate: true,
+    onSubmit: handleSubmit,
+    onKeyDown: handleKeyDown,
+    "data-layout": layout,
+    "data-presentation": presentation,
+    "data-testid": testID
+  };
+  return /* @__PURE__ */ jsxs(FormPresentationProvider, { value: presentationValue, children: [
+    liveRegion,
+    pageFocus ? /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ...formProps,
+        className: cn("relative flex min-h-dvh w-full flex-col bg-background text-foreground", className),
+        children: [
+          progress,
+          /* @__PURE__ */ jsx("div", { className: "flex h-16 shrink-0 items-center justify-center px-16 sm:h-20", children: brandNode }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col justify-center px-4 pb-20 pt-4 sm:px-6 sm:pb-28", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-xl", children: [
+            /* @__PURE__ */ jsx("div", { className: historyLength === 0 ? "mb-5" : "sr-only", children: header }),
+            fields,
+            failure ? /* @__PURE__ */ jsx("div", { className: "mt-6", children: failure }) : null,
+            /* @__PURE__ */ jsx("div", { className: "mt-10", children: navigation })
+          ] }) })
+        ]
+      }
+    ) : pageClassic ? /* @__PURE__ */ jsx(
+      "form",
+      {
+        ...formProps,
+        className: cn("min-h-dvh w-full bg-muted/40 px-4 py-8 text-foreground sm:py-12", className),
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-4", children: [
+          brandNode ? /* @__PURE__ */ jsx("div", { className: "flex justify-center pb-2", children: brandNode }) : null,
+          header,
+          errorSummary,
+          fields,
+          failure,
+          navigation
+        ] })
+      }
+    ) : /* @__PURE__ */ jsxs("form", { ...formProps, className: cn("mx-auto w-full max-w-xl space-y-8", className), children: [
+      brandNode,
+      header,
+      errorSummary,
+      progress,
+      fields,
+      failure,
+      navigation
+    ] })
+  ] });
+}
+var classicSection = "rounded-xl border bg-card px-5 py-6 text-card-foreground sm:px-8 has-[[aria-invalid=true]]:border-destructive";
+
+export { FieldChrome, Form, builtInRenderers, defaultRegistry, describedBy, useFormPresentation };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map