@nucleux/questionnaire 0.0.0-stage → 0.6.0

package/dist/index.cjs

@@ -0,0 +1,863 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var utils = require('@nucleux/utils');
+var button = require('@nucleux/button');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var useIsoLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+function renderPart(tag, props, state, render) {
+  if (typeof render === "function") return render(props, state);
+  if (React__namespace.isValidElement(render)) {
+    const element = render;
+    const theirs = element.props;
+    const merged = { ...props, ...theirs };
+    for (const key of Object.keys(props)) {
+      const ours = props[key];
+      const other = theirs[key];
+      if (/^on[A-Z]/.test(key) && typeof ours === "function" && typeof other === "function") {
+        merged[key] = (...args) => {
+          other(...args);
+          ours(...args);
+        };
+      } else if (key === "className") {
+        merged.className = utils.cn(ours, other);
+      } else if (key === "children" && other === void 0) {
+        merged.children = ours;
+      }
+    }
+    return React__namespace.cloneElement(element, merged);
+  }
+  return React__namespace.createElement(tag, props);
+}
+var flag = (on) => on ? "" : void 0;
+var CONTROL = "input[data-questionnaire-control]";
+function readAnswer(fieldset) {
+  const checked = [];
+  let text = "";
+  fieldset.querySelectorAll(CONTROL).forEach((input) => {
+    if (input.matches(":disabled")) return;
+    if (input.type === "radio" || input.type === "checkbox") {
+      if (input.checked) checked.push(input.value);
+    } else if (!text && input.value.trim() !== "") {
+      text = input.value;
+    }
+  });
+  return { checked, text };
+}
+var sameAnswer = (a, b) => !!a && a.text === b.text && a.checked.length === b.checked.length && a.checked.every((v, i) => v === b.checked[i]);
+var hasAnswer = (a) => !!a && (a.checked.length > 0 || a.text.trim() !== "");
+function shortcutLabel(scheme, index) {
+  if (!scheme || index < 0) return void 0;
+  if (scheme === "letters") return index < 26 ? String.fromCharCode(65 + index) : void 0;
+  return index < 9 ? String(index + 1) : void 0;
+}
+var RootContext = React__namespace.createContext(null);
+function useRoot(part) {
+  const ctx = React__namespace.useContext(RootContext);
+  if (!ctx) throw new Error(`<${part}> must be used inside <Questionnaire>.`);
+  return ctx;
+}
+var ItemContext = React__namespace.createContext(null);
+function useItem(part) {
+  const ctx = React__namespace.useContext(ItemContext);
+  if (!ctx) throw new Error(`<${part}> must be used inside <QuestionnaireItem>.`);
+  return ctx;
+}
+var Questionnaire = React__namespace.forwardRef(
+  ({
+    item: itemProp,
+    defaultItem,
+    items,
+    onItemChange,
+    shortcuts,
+    noValidate = true,
+    onSubmit,
+    onReset,
+    onKeyDown,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const formRef = React__namespace.useRef(null);
+    const elements = React__namespace.useRef(/* @__PURE__ */ new Map());
+    const initialItem = React__namespace.useRef(defaultItem);
+    const pendingFocus = React__namespace.useRef(null);
+    const [metas, setMetas] = React__namespace.useState({});
+    const [internalItem, setInternalItem] = React__namespace.useState(defaultItem);
+    const [answers, setAnswers] = React__namespace.useState({});
+    const [skipped, setSkipped] = React__namespace.useState({});
+    const [invalid, setInvalid] = React__namespace.useState({});
+    const [, setTick] = React__namespace.useState(0);
+    const definitions = React__namespace.useMemo(
+      () => new Map((items ?? []).map((d) => [d.name, d])),
+      [items]
+    );
+    const metaOf = (name) => {
+      const def = definitions.get(name);
+      return metas[name] ?? {
+        required: def?.required ?? false,
+        multiple: def?.multiple ?? false,
+        disabled: def?.disabled ?? false
+      };
+    };
+    const domOrder = Object.keys(metas).sort((a, b) => {
+      const ea = elements.current.get(a);
+      const eb = elements.current.get(b);
+      if (!ea || !eb) return 0;
+      return ea.compareDocumentPosition(eb) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+    });
+    const order = items ? [...items.map((d) => d.name), ...domOrder.filter((n) => !definitions.has(n))] : domOrder;
+    const enabled = order.filter((n) => !metaOf(n).disabled);
+    const requested = itemProp !== void 0 ? itemProp : internalItem;
+    const active = requested !== void 0 && enabled.includes(requested) ? requested : enabled[0];
+    const index = active !== void 0 ? enabled.indexOf(active) : -1;
+    const isLast = index === enabled.length - 1;
+    const answered = (name) => hasAnswer(answers[name]);
+    const statusOf = (name) => answered(name) ? "answered" : skipped[name] ? "skipped" : "unanswered";
+    const isValid = (name) => answered(name) || !metaOf(name).required && !!skipped[name];
+    const goTo = (name, target) => {
+      pendingFocus.current = { name, target };
+      if (name !== active) {
+        if (itemProp === void 0) setInternalItem(name);
+        onItemChange?.(name);
+      }
+      setTick((t) => t + 1);
+    };
+    const markInvalid = (names) => setInvalid((prev) => {
+      const nextState = { ...prev };
+      for (const n of names) nextState[n] = true;
+      return nextState;
+    });
+    const clearFlag = (setter, name) => setter((prev) => {
+      if (!prev[name]) return prev;
+      const nextState = { ...prev };
+      delete nextState[name];
+      return nextState;
+    });
+    const next = () => {
+      if (active === void 0) return;
+      if (!isValid(active)) {
+        markInvalid([active]);
+        goTo(active, "control");
+        return;
+      }
+      clearFlag(setInvalid, active);
+      const target = enabled[index + 1];
+      if (target !== void 0) goTo(target, "item");
+    };
+    const previous = () => {
+      const target = enabled[index - 1];
+      if (index > 0 && target !== void 0) goTo(target, "item");
+    };
+    const skip = () => {
+      if (active === void 0 || metaOf(active).required) return;
+      const el = elements.current.get(active);
+      el?.querySelectorAll(CONTROL).forEach((input) => {
+        if (input.type === "radio" || input.type === "checkbox") input.checked = false;
+        else input.value = "";
+      });
+      setAnswers((prev) => ({ ...prev, [active]: { checked: [], text: "" } }));
+      setSkipped((prev) => ({ ...prev, [active]: true }));
+      clearFlag(setInvalid, active);
+      const target = enabled[index + 1];
+      if (target !== void 0) goTo(target, "item");
+    };
+    const continueFlow = () => {
+      if (active === void 0) return;
+      if (!isLast) {
+        next();
+        return;
+      }
+      const form = formRef.current;
+      if (!form) return;
+      if (typeof form.requestSubmit === "function") form.requestSubmit();
+      else form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    };
+    React__namespace.useEffect(() => {
+      const pending = pendingFocus.current;
+      if (!pending || pending.name !== active) return;
+      const el = elements.current.get(pending.name);
+      if (!el || el.hidden) return;
+      pendingFocus.current = null;
+      if (pending.target === "control") {
+        const control = Array.from(el.querySelectorAll(CONTROL)).find(
+          (c) => !c.matches(":disabled")
+        );
+        (control ?? el).focus();
+      } else {
+        el.focus();
+      }
+    });
+    const handleSubmit = (event) => {
+      const failing = enabled.filter((n) => !isValid(n));
+      if (failing.length > 0) {
+        event.preventDefault();
+        markInvalid(failing);
+        goTo(failing[0], "control");
+        return;
+      }
+      onSubmit?.(event);
+    };
+    const handleReset = (event) => {
+      onReset?.(event);
+      if (event.defaultPrevented) return;
+      setSkipped({});
+      setInvalid({});
+      if (itemProp === void 0) setInternalItem(initialItem.current);
+      else if (initialItem.current !== void 0) onItemChange?.(initialItem.current);
+      setTimeout(() => setTick((t) => t + 1), 0);
+    };
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const target = event.target;
+      const fieldset = active !== void 0 ? elements.current.get(active) : void 0;
+      const input = target instanceof HTMLInputElement ? target : null;
+      const isChoiceInput = !!input && (input.type === "radio" || input.type === "checkbox");
+      const isTextEntry = !!input && !isChoiceInput && !["button", "submit", "reset"].includes(input.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target.isContentEditable;
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        continueFlow();
+        return;
+      }
+      if (event.key === "Enter") {
+        if (input && (isChoiceInput || isTextEntry)) {
+          event.preventDefault();
+          if (active !== void 0 && answered(active)) continueFlow();
+        }
+        return;
+      }
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        if (!fieldset || !fieldset.contains(target)) return;
+        if (isTextEntry && !(input && input.value === "")) return;
+        const controls = Array.from(fieldset.querySelectorAll(CONTROL)).filter(
+          (c) => !c.matches(":disabled")
+        );
+        if (controls.length === 0) return;
+        event.preventDefault();
+        const i = input ? controls.indexOf(input) : -1;
+        const n = controls.length;
+        const nextIndex = event.key === "ArrowDown" ? i < 0 ? 0 : (i + 1) % n : i < 0 ? n - 1 : (i - 1 + n) % n;
+        const control = controls[nextIndex];
+        control.focus();
+        if (control.type === "radio" && !control.checked) control.click();
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        if (isTextEntry || input && input.type === "radio") return;
+        if (event.key === "ArrowLeft") {
+          if (index > 0) {
+            event.preventDefault();
+            previous();
+          }
+        } else if (active !== void 0 && !isLast && statusOf(active) !== "unanswered") {
+          event.preventDefault();
+          next();
+        }
+        return;
+      }
+      if (shortcuts && fieldset && !isTextEntry && event.key.length === 1) {
+        const key = shortcuts === "letters" ? event.key.toUpperCase() : event.key;
+        if (!(shortcuts === "letters" ? /^[A-Z]$/ : /^[1-9]$/).test(key)) return;
+        const choice = fieldset.querySelector(`[data-shortcut="${key}"]`);
+        const control = choice?.querySelector(CONTROL);
+        if (control && !control.matches(":disabled")) {
+          event.preventDefault();
+          control.focus();
+          control.click();
+        }
+      }
+    };
+    const register = React__namespace.useCallback((name, meta) => {
+      setMetas((prev) => {
+        const old = prev[name];
+        if (old && old.required === meta.required && old.multiple === meta.multiple && old.disabled === meta.disabled)
+          return prev;
+        return { ...prev, [name]: meta };
+      });
+    }, []);
+    const unregister = React__namespace.useCallback((name) => {
+      setMetas((prev) => {
+        if (!(name in prev)) return prev;
+        const nextState = { ...prev };
+        delete nextState[name];
+        return nextState;
+      });
+    }, []);
+    const setElement = React__namespace.useCallback((name, el) => {
+      if (el) elements.current.set(name, el);
+      else elements.current.delete(name);
+    }, []);
+    const setAnswer = React__namespace.useCallback((name, answer) => {
+      setAnswers((prev) => sameAnswer(prev[name], answer) ? prev : { ...prev, [name]: answer });
+      if (hasAnswer(answer)) {
+        const drop = (prev) => {
+          if (!prev[name]) return prev;
+          const nextState = { ...prev };
+          delete nextState[name];
+          return nextState;
+        };
+        setSkipped(drop);
+        setInvalid(drop);
+      }
+    }, []);
+    const context = {
+      shortcuts,
+      definitions,
+      active,
+      index,
+      total: enabled.length,
+      answers,
+      invalid,
+      register,
+      unregister,
+      setElement,
+      setAnswer,
+      statusOf,
+      isRequired: (name) => metaOf(name).required,
+      next,
+      previous,
+      skip
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(RootContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "form",
+      {
+        ref: mergeRefs(ref, formRef),
+        noValidate,
+        "data-slot": "questionnaire",
+        "data-current": index + 1,
+        "data-total": enabled.length,
+        "data-first": flag(index === 0),
+        "data-last": flag(enabled.length > 0 && isLast),
+        "data-shortcuts": shortcuts,
+        className: utils.cn("flex w-full min-w-0 flex-col gap-4", className),
+        onSubmit: handleSubmit,
+        onReset: handleReset,
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Questionnaire.displayName = "Questionnaire";
+var QuestionnaireProgress = React__namespace.forwardRef(
+  ({ className, render, children, ...props }, ref) => {
+    const root = useRoot("QuestionnaireProgress");
+    const current = root.index + 1;
+    const total = root.total;
+    const state = {
+      current,
+      total,
+      first: root.index === 0,
+      last: total > 0 && current === total
+    };
+    const text = `Question ${current} of ${total}`;
+    return renderPart(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-label": "Questionnaire progress",
+        "aria-valuemin": 0,
+        "aria-valuemax": total,
+        "aria-valuenow": current,
+        "aria-valuetext": text,
+        "data-slot": "questionnaire-progress",
+        "data-current": current,
+        "data-total": total,
+        "data-first": flag(state.first),
+        "data-last": flag(state.last),
+        className: utils.cn(
+          "min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium tabular-nums text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: children ?? text
+      },
+      state,
+      render
+    );
+  }
+);
+QuestionnaireProgress.displayName = "QuestionnaireProgress";
+var QuestionnaireItem = React__namespace.forwardRef(
+  ({
+    name,
+    required = false,
+    multiple = false,
+    disabled = false,
+    invalid: invalidProp = false,
+    onStatusChange,
+    onChange,
+    className,
+    children,
+    "aria-describedby": describedByProp,
+    ...props
+  }, ref) => {
+    const root = useRoot("QuestionnaireItem");
+    const elRef = React__namespace.useRef(null);
+    const baseId = React__namespace.useId();
+    const [hasDescription, setHasDescription] = React__namespace.useState(false);
+    const [hasError, setHasError] = React__namespace.useState(false);
+    const [domChoices, setDomChoices] = React__namespace.useState([]);
+    const { register, unregister, setElement, setAnswer } = root;
+    useIsoLayoutEffect(() => {
+      register(name, { required, multiple, disabled });
+    }, [register, name, required, multiple, disabled]);
+    useIsoLayoutEffect(() => () => unregister(name), [unregister, name]);
+    useIsoLayoutEffect(() => {
+      const el = elRef.current;
+      if (!el) return;
+      setAnswer(name, readAnswer(el));
+      const values = Array.from(el.querySelectorAll("[data-questionnaire-choice-value]")).filter((c) => !c.hasAttribute("data-disabled")).map((c) => c.getAttribute("data-questionnaire-choice-value") ?? "");
+      setDomChoices(
+        (prev) => prev.length === values.length && prev.every((v, i) => v === values[i]) ? prev : values
+      );
+    });
+    const active = root.active === name && !disabled;
+    const status = root.statusOf(name);
+    const invalid = invalidProp || !!root.invalid[name];
+    const lastStatus = React__namespace.useRef(status);
+    React__namespace.useEffect(() => {
+      if (lastStatus.current !== status) {
+        lastStatus.current = status;
+        onStatusChange?.(status);
+      }
+    }, [status, onStatusChange]);
+    const definedChoices = root.definitions.get(name)?.choices;
+    const choiceOrder = definedChoices ? definedChoices.filter((c) => !c.disabled).map((c) => c.value) : domChoices;
+    const answer = root.answers[name];
+    const descriptionId = `${baseId}-description`;
+    const errorId = `${baseId}-error`;
+    const describedBy = [describedByProp, hasDescription && descriptionId, invalid && hasError && errorId].filter(Boolean).join(" ") || void 0;
+    const handleChange = (event) => {
+      onChange?.(event);
+      const el = elRef.current;
+      const target = event.target;
+      if (!el || !target.matches?.(CONTROL)) return;
+      if (!multiple) {
+        if (target.type === "radio" && target.checked) {
+          el.querySelectorAll(`${CONTROL}[data-questionnaire-control="input"]`).forEach((i) => {
+            i.value = "";
+          });
+        } else if (target.getAttribute("data-questionnaire-control") === "input" && target.value.trim() !== "") {
+          el.querySelectorAll(`${CONTROL}[type="radio"]`).forEach((i) => {
+            i.checked = false;
+          });
+        }
+      }
+      setAnswer(name, readAnswer(el));
+    };
+    const itemContext = {
+      name,
+      multiple,
+      required,
+      disabled,
+      invalid,
+      measured: answer !== void 0,
+      checked: answer?.checked ?? [],
+      text: answer?.text ?? "",
+      descriptionId,
+      errorId,
+      setHasDescription,
+      setHasError,
+      shortcutFor: (value) => shortcutLabel(root.shortcuts, choiceOrder.indexOf(value))
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "fieldset",
+      {
+        ref: mergeRefs(ref, elRef, (el) => setElement(name, el)),
+        tabIndex: -1,
+        disabled,
+        hidden: !active,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        "data-slot": "questionnaire-item",
+        "data-active": flag(active),
+        "data-status": status,
+        "data-required": flag(required),
+        "data-multiple": flag(multiple),
+        "data-disabled": flag(disabled),
+        "data-invalid": flag(invalid),
+        className: utils.cn(
+          "m-0 flex min-w-0 flex-col gap-4 border-0 p-0 outline-none [&[hidden]]:hidden",
+          className
+        ),
+        onChange: handleChange,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+QuestionnaireItem.displayName = "QuestionnaireItem";
+var QuestionnaireTitle = React__namespace.forwardRef(
+  ({ className, render, ...props }, ref) => renderPart(
+    "legend",
+    {
+      ref,
+      "data-slot": "questionnaire-title",
+      className: utils.cn(
+        "text-pretty text-base font-medium leading-snug [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4",
+        className
+      ),
+      ...props
+    },
+    {},
+    render
+  )
+);
+QuestionnaireTitle.displayName = "QuestionnaireTitle";
+var QuestionnaireDescription = React__namespace.forwardRef(
+  ({ className, render, id, ...props }, ref) => {
+    const item = useItem("QuestionnaireDescription");
+    const { setHasDescription } = item;
+    React__namespace.useEffect(() => {
+      setHasDescription(true);
+      return () => setHasDescription(false);
+    }, [setHasDescription]);
+    return renderPart(
+      "p",
+      {
+        ref,
+        id: id ?? item.descriptionId,
+        "data-slot": "questionnaire-description",
+        className: utils.cn("text-pretty text-sm text-muted-foreground", className),
+        ...props
+      },
+      {},
+      render
+    );
+  }
+);
+QuestionnaireDescription.displayName = "QuestionnaireDescription";
+var QuestionnaireChoices = React__namespace.forwardRef(
+  ({ className, render, ...props }, ref) => {
+    const root = useRoot("QuestionnaireChoices");
+    return renderPart(
+      "div",
+      {
+        ref,
+        "data-slot": "questionnaire-choices",
+        "data-shortcuts": root.shortcuts,
+        className: utils.cn("group/questionnaire-choices grid min-w-0 gap-2", className),
+        ...props
+      },
+      { shortcuts: root.shortcuts },
+      render
+    );
+  }
+);
+QuestionnaireChoices.displayName = "QuestionnaireChoices";
+var QuestionnaireChoice = React__namespace.forwardRef(
+  ({ value, checked, defaultChecked, disabled = false, onChange, className, children, ...props }, ref) => {
+    const item = useItem("QuestionnaireChoice");
+    const type = item.multiple ? "checkbox" : "radio";
+    const isChecked = checked ?? (item.measured ? item.checked.includes(value) : !!defaultChecked);
+    const isDisabled = disabled || item.disabled;
+    const shortcut = disabled ? void 0 : item.shortcutFor(value);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref,
+        "data-slot": "questionnaire-choice",
+        "data-questionnaire-choice-value": value,
+        "data-type": type,
+        "data-checked": flag(isChecked),
+        "data-unchecked": flag(!isChecked),
+        "data-disabled": flag(isDisabled),
+        "data-invalid": flag(item.invalid),
+        "data-shortcut": shortcut,
+        className: utils.cn(
+          "group/questionnaire-choice relative flex min-h-11 cursor-pointer select-none items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm outline-none transition-colors hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-2 has-[>input:focus-visible]:ring-ring/50 data-[invalid]:border-destructive data-[checked]:border-primary/40 data-[checked]:bg-muted",
+          "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type,
+              name: item.name,
+              value,
+              checked,
+              defaultChecked: checked === void 0 ? defaultChecked : void 0,
+              disabled,
+              onChange,
+              "aria-invalid": item.invalid || void 0,
+              "aria-keyshortcuts": shortcut,
+              "data-questionnaire-control": "choice",
+              "data-slot": "questionnaire-choice-input",
+              className: "absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "questionnaire-choice-indicator",
+              className: utils.cn(
+                "pointer-events-none relative flex size-4 shrink-0 translate-y-[0.1125rem] items-center justify-center rounded-[4px] border border-input group-has-[[data-slot=questionnaire-choice-description]]/questionnaire-choice:translate-y-0.5 group-data-[checked]/questionnaire-choice:border-primary group-data-[checked]/questionnaire-choice:bg-primary group-data-[checked]/questionnaire-choice:text-primary-foreground",
+                type === "radio" && "rounded-full"
+              ),
+              children: type === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-slot": "questionnaire-choice-indicator-dot",
+                  className: "hidden size-2 rounded-full bg-primary-foreground group-data-[checked]/questionnaire-choice:block"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Check,
+                {
+                  "data-slot": "questionnaire-choice-indicator-check",
+                  className: "hidden size-3.5 group-data-[checked]/questionnaire-choice:block"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "questionnaire-choice-label", className: "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug", children }),
+          shortcut ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "questionnaire-choice-shortcut",
+              className: "pointer-events-none ms-auto inline-flex size-5 shrink-0 translate-y-[0.1125rem] items-center justify-center rounded-md border border-input bg-background font-mono text-[0.625rem] font-medium leading-none text-muted-foreground group-has-[[data-slot=questionnaire-choice-description]]/questionnaire-choice:translate-y-0.5",
+              children: shortcut
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+QuestionnaireChoice.displayName = "QuestionnaireChoice";
+var QuestionnaireChoiceDescription = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "questionnaire-choice-description",
+      className: utils.cn("text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+QuestionnaireChoiceDescription.displayName = "QuestionnaireChoiceDescription";
+var QuestionnaireInput = React__namespace.forwardRef(
+  ({ className, type = "text", disabled = false, render, ...props }, ref) => {
+    const item = useItem("QuestionnaireInput");
+    const initial = String(props.value ?? props.defaultValue ?? "");
+    const filled = item.measured ? item.text.trim() !== "" : initial.trim() !== "";
+    const isDisabled = disabled || item.disabled;
+    const state = { disabled: isDisabled, filled, invalid: item.invalid };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "questionnaire-input-wrapper", className: "group/questionnaire-input relative w-full min-w-0", children: renderPart(
+      "input",
+      {
+        ref,
+        type,
+        name: filled ? item.name : void 0,
+        disabled,
+        "aria-invalid": item.invalid || void 0,
+        "data-questionnaire-control": "input",
+        "data-slot": "questionnaire-input",
+        "data-filled": flag(filled),
+        "data-empty": flag(!filled),
+        "data-disabled": flag(isDisabled),
+        "data-invalid": flag(item.invalid),
+        className: utils.cn(
+          "h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base outline-none transition-[color,box-shadow,background-color] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive/20 sm:min-h-0 md:text-sm",
+          "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+          className
+        ),
+        ...props
+      },
+      state,
+      render
+    ) });
+  }
+);
+QuestionnaireInput.displayName = "QuestionnaireInput";
+var QuestionnaireError = React__namespace.forwardRef(
+  ({ className, render, children, id, ...props }, ref) => {
+    const item = useItem("QuestionnaireError");
+    const { setHasError } = item;
+    React__namespace.useEffect(() => {
+      setHasError(true);
+      return () => setHasError(false);
+    }, [setHasError]);
+    const message = children ?? (item.required ? "Choose an answer to continue." : "Choose an answer or skip this question.");
+    return renderPart(
+      "p",
+      {
+        ref,
+        id: id ?? item.errorId,
+        role: item.invalid ? "alert" : void 0,
+        hidden: !item.invalid || void 0,
+        "data-slot": "questionnaire-error",
+        "data-invalid": flag(item.invalid),
+        className: utils.cn("mt-2 text-sm text-destructive [&[hidden]]:hidden", className),
+        ...props,
+        children: item.invalid ? message : null
+      },
+      { invalid: item.invalid },
+      render
+    );
+  }
+);
+QuestionnaireError.displayName = "QuestionnaireError";
+var QuestionnaireActions = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "questionnaire-actions",
+      className: utils.cn(
+        "grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8",
+        className
+      ),
+      ...props
+    }
+  )
+);
+QuestionnaireActions.displayName = "QuestionnaireActions";
+var variantMap = {
+  default: "primary",
+  outline: "secondary",
+  primary: "primary",
+  cta: "cta",
+  secondary: "secondary",
+  ghost: "ghost",
+  destructive: "destructive",
+  link: "link"
+};
+var sizeMap = {
+  default: "md",
+  xs: "sm",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  icon: "icon",
+  "icon-sm": "icon-sm",
+  "icon-lg": "icon-lg"
+};
+var actionLayout = {
+  previous: "col-start-1 row-start-1 justify-self-start",
+  skip: "col-start-2 row-start-1 justify-self-end",
+  next: "col-start-3 row-start-1 justify-self-end",
+  submit: "col-start-3 row-start-1 justify-self-end"
+};
+var actionLabel = {
+  previous: "Previous",
+  skip: "Skip",
+  next: "Next",
+  submit: "Submit"
+};
+function useAction(kind, { variant, size, render, disabled, onClick, className, children, ...props }, ref) {
+  const root = useRoot(`Questionnaire${actionLabel[kind]}`);
+  const last = root.total > 0 && root.index === root.total - 1;
+  const visible = root.active !== void 0 && (kind === "previous" ? root.index > 0 : kind === "skip" ? !root.isRequired(root.active) : kind === "next" ? !last : last);
+  const status = root.active !== void 0 ? root.statusOf(root.active) : "unanswered";
+  const shortcut = (kind === "next" || kind === "submit") && visible && !disabled ? "Enter" : void 0;
+  const state = { visible, disabled: !!disabled, shortcut, status };
+  const nucleuxVariant = variantMap[variant ?? (kind === "next" || kind === "submit" ? "default" : "outline")];
+  const nucleuxSize = sizeMap[size ?? "default"];
+  return renderPart(
+    "button",
+    {
+      ref,
+      type: kind === "submit" ? "submit" : "button",
+      disabled,
+      hidden: !visible || void 0,
+      "aria-keyshortcuts": shortcut ? "Control+Enter Meta+Enter" : void 0,
+      "data-slot": `questionnaire-${kind}`,
+      "data-size": size ?? "default",
+      "data-variant": variant ?? (kind === "next" || kind === "submit" ? "default" : "outline"),
+      "data-visible": flag(visible),
+      "data-hidden": flag(!visible),
+      "data-disabled": flag(disabled),
+      "data-shortcut": shortcut,
+      "data-status": status,
+      className: utils.cn(actionLayout[kind], "min-h-11 sm:min-h-0 data-[hidden]:hidden", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (kind === "previous") root.previous();
+        else if (kind === "skip") root.skip();
+        else if (kind === "next") root.next();
+      },
+      ...props,
+      children: children ?? actionLabel[kind]
+    },
+    state,
+    render ?? /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: nucleuxVariant, size: nucleuxSize })
+  );
+}
+var QuestionnairePrevious = React__namespace.forwardRef(
+  (props, ref) => useAction("previous", props, ref)
+);
+QuestionnairePrevious.displayName = "QuestionnairePrevious";
+var QuestionnaireSkip = React__namespace.forwardRef(
+  (props, ref) => useAction("skip", props, ref)
+);
+QuestionnaireSkip.displayName = "QuestionnaireSkip";
+var QuestionnaireNext = React__namespace.forwardRef(
+  (props, ref) => useAction("next", props, ref)
+);
+QuestionnaireNext.displayName = "QuestionnaireNext";
+var QuestionnaireSubmit = React__namespace.forwardRef(
+  (props, ref) => useAction("submit", props, ref)
+);
+QuestionnaireSubmit.displayName = "QuestionnaireSubmit";
+
+exports.Questionnaire = Questionnaire;
+exports.QuestionnaireActions = QuestionnaireActions;
+exports.QuestionnaireChoice = QuestionnaireChoice;
+exports.QuestionnaireChoiceDescription = QuestionnaireChoiceDescription;
+exports.QuestionnaireChoices = QuestionnaireChoices;
+exports.QuestionnaireDescription = QuestionnaireDescription;
+exports.QuestionnaireError = QuestionnaireError;
+exports.QuestionnaireInput = QuestionnaireInput;
+exports.QuestionnaireItem = QuestionnaireItem;
+exports.QuestionnaireNext = QuestionnaireNext;
+exports.QuestionnairePrevious = QuestionnairePrevious;
+exports.QuestionnaireProgress = QuestionnaireProgress;
+exports.QuestionnaireSkip = QuestionnaireSkip;
+exports.QuestionnaireSubmit = QuestionnaireSubmit;
+exports.QuestionnaireTitle = QuestionnaireTitle;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map