@kanzo-tech/ui 0.0.1-alpha

package/dist/composites/Questionnaire.d.ts

@@ -0,0 +1,215 @@
+import { ark } from '@ark-ui/react/factory';
+import { UseStepsReturn } from '@ark-ui/react/steps';
+import { ButtonProps } from '../simples/button.js';
+import { FieldLegend, FieldSet, FieldSetError, FieldSetHelper } from '../simples/field.js';
+import { Input } from '../simples/input.js';
+import { Textarea } from '../simples/textarea.js';
+import * as React from "react";
+/**
+ * Questionnaire — one question at a time, with progress, validation and navigation.
+ *
+ *   <Questionnaire onSubmit={…}>
+ *     <QuestionnaireProgress />
+ *     <QuestionnaireItem name="…" required>
+ *       <QuestionnaireTitle /> <QuestionnaireDescription />
+ *       <QuestionnaireChoices>
+ *         <QuestionnaireChoice description="…" value="…">…</QuestionnaireChoice>…
+ *       </QuestionnaireChoices>
+ *       <QuestionnaireError />
+ *     </QuestionnaireItem>
+ *     <QuestionnaireActions>
+ *       <QuestionnairePrevious /> <QuestionnaireSkip /> <QuestionnaireNext /> <QuestionnaireSubmit />
+ *     </QuestionnaireActions>
+ *   </Questionnaire>
+ *
+ * **The root owns the order, the active question, the answers and the navigation; the parent owns
+ * dismissal, persistence and branching.** Which is why there is no `open`, no storage and no
+ * `onDismiss` here: a questionnaire that decided when it appears could not be put in a dialog, a
+ * sidebar and a page, and every product wants it in a different one.
+ *
+ * **No navigation state machine is written here.** Ark's `useSteps` already owns the step index,
+ * `hasNextStep` / `hasPrevStep`, `percent`, and — the part that is easy to miss — the *guards*:
+ * `isStepValid` blocks `STEP.NEXT` and fires `onStepInvalid`, and `isStepSkippable` overrides it.
+ * A required question blocking Next and a skippable one not blocking are therefore two callbacks,
+ * not two branches. None of Ark's Steps *parts* are used: `getContentProps` declares
+ * `role="tabpanel"` and points `aria-labelledby` at a trigger, and this renders no tablist for
+ * either to belong to.
+ *
+ * **A question is a `FieldSet`.** That is what carries the ARIA rather than anything hand-rolled:
+ * Ark's fieldset names the group from its own legend, describes it from the helper and error text,
+ * and marks the error `aria-live="polite"` — so `QuestionnaireError` announces itself on the group
+ * that failed with no `role="alert"` of ours anywhere.
+ */
+export type QuestionnaireAnswer = string | string[];
+export type QuestionnaireAnswers = Record<string, QuestionnaireAnswer>;
+/** What the root reads off an item's own props to steer the machine. */
+export interface QuestionnaireQuestion {
+    multiple: boolean;
+    name: string;
+    required: boolean;
+    skippable: boolean;
+}
+interface QuestionnaireContextValue {
+    answers: QuestionnaireAnswers;
+    /** The index whose Next was refused, or `null`. One at a time: only one question is on screen. */
+    blocked: number | null;
+    indexOf: (name: string) => number;
+    questions: QuestionnaireQuestion[];
+    setAnswer: (name: string, answer: QuestionnaireAnswer) => void;
+    shortcuts: boolean;
+    steps: UseStepsReturn;
+}
+interface QuestionnaireItemContextValue {
+    current: boolean;
+    index: number;
+    /** This item's own declaration — what a part of the caller's can read without the scan. */
+    question: QuestionnaireQuestion;
+    /** The key printed on a choice's `Kbd`, or `undefined` when shortcuts are off. */
+    shortcutOf: (value: string) => string | undefined;
+}
+export declare function useQuestionnaire(): QuestionnaireContextValue;
+export declare function useQuestionnaireItem(): QuestionnaireItemContextValue;
+export interface QuestionnaireProps extends Omit<React.ComponentProps<typeof ark.form>, "onSubmit"> {
+    /** Answers to start from — a resumed session, or a question already decided elsewhere. */
+    defaultAnswers?: QuestionnaireAnswers;
+    /** Which question to open on. Persistence is the parent's, so resuming is this plus the answers. */
+    defaultStep?: number;
+    onAnswersChange?: (answers: QuestionnaireAnswers) => void;
+    onStepChange?: (details: {
+        step: number;
+    }) => void;
+    /** Called with the whole payload when the last question is submitted and passes validation. */
+    onSubmit?: (answers: QuestionnaireAnswers) => void;
+    /**
+     * Answer the visible question from the keyboard: `1`–`9`, by the choice's position, printed on a
+     * `Kbd` beside it so the key is visible rather than folklore.
+     *
+     * **Opt-in — there is no default.** This registers a `window` keydown listener on bare, unmodified
+     * keys, and a design system must not claim those in its host's keymap without being asked. Typing
+     * in a text control is ignored; a focused radio or checkbox is not, which is the case that makes
+     * the difference (both are `<input>` elements, and treating them as typing kills the shortcuts the
+     * moment somebody clicks an option).
+     */
+    shortcuts?: boolean;
+}
+export declare function Questionnaire(props: QuestionnaireProps): React.JSX.Element;
+/**
+ * How far along we are, as a sentence rather than a bar: *Question 2 of 4*.
+ *
+ * **ARIA contract.** `role="progressbar"` with `aria-valuemin` / `aria-valuenow` / `aria-valuemax`
+ * counting questions, not percent, and `aria-valuetext` carrying the same sentence the eye reads;
+ * `aria-live="polite"` announces the move. `progressbar` is a leaf role with no keyboard contract,
+ * so nothing is promised here that is not delivered.
+ *
+ * Ark's `Progress` is not used, and that is not an oversight: zag puts `role="progressbar"` on the
+ * *track*, so a progress with no painted track has no role at all. The machine can only be kept by
+ * painting the bar the reference does not have.
+ *
+ * Children override the sentence, which is how it is translated — `useQuestionnaire()` carries the
+ * numbers.
+ */
+export declare const QuestionnaireProgress: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export interface QuestionnaireItemProps extends React.ComponentProps<typeof FieldSet> {
+    /** Accumulate several answers instead of one — a `CheckboxGroup` rather than a `RadioGroup`. */
+    multiple?: boolean;
+    /** The key this question's answer is filed under. Unique within the questionnaire. */
+    name: string;
+    /** Refuse Next until it is answered. */
+    required?: boolean;
+    /** Offer a Skip, and let Next through unanswered. Overrides `required`, the way Ark's guard does. */
+    skippable?: boolean;
+}
+export declare function QuestionnaireItem(props: QuestionnaireItemProps): React.JSX.Element;
+/**
+ * The question itself. A `<legend>`, which is what names the group Ark builds around it.
+ *
+ * The margin is not the fieldset's `gap`: a `<legend>` is rendered into the fieldset's border and
+ * is not a flex item, so `gap` never reaches it. It sits flush against its own description and
+ * opens up to `mb-4` when there is none — delete either half and the two spellings of this
+ * question's heading stop agreeing.
+ */
+export declare const QuestionnaireTitle: (props: React.ComponentProps<typeof FieldLegend>) => React.JSX.Element;
+export declare const QuestionnaireDescription: (props: React.ComponentProps<typeof FieldSetHelper>) => React.JSX.Element;
+/**
+ * Why Next was refused. Renders only while the fieldset is invalid, which is Ark's rule and not
+ * ours — and Ark gives it `aria-live="polite"` and hangs it off the group's `aria-describedby`.
+ */
+export declare const QuestionnaireError: (props: React.ComponentProps<typeof FieldSetError>) => React.JSX.Element;
+/**
+ * The item's options — a radio group, or a checkbox group where the item is `multiple`.
+ *
+ * One component and not two, because the choice between them is the item's own `multiple` and a
+ * caller who had to pick would be stating it twice.
+ */
+export type QuestionnaireChoicesProps = Omit<React.ComponentProps<typeof ark.div>, "defaultValue" | "value">;
+export declare const QuestionnaireChoices: (props: QuestionnaireChoicesProps) => React.JSX.Element;
+export interface QuestionnaireChoiceProps extends Omit<React.ComponentProps<typeof ark.label>, "value"> {
+    /**
+     * The muted second line — what the option means, rather than what it is called.
+     *
+     * A `string` and not a node, following `CardHeader`'s `title` / `description`: the label is
+     * already this part's children, and the control has to *name* itself off an element this
+     * component renders, so a second children slot would have to be found by splitting them.
+     */
+    description?: string;
+    /** What this choice contributes to the answer. */
+    value: string;
+}
+/**
+ * One option, drawn as a card: the label and its description, then the shortcut key as a chip,
+ * then the control at the margin.
+ *
+ * The card is the control's own `<label>` in both arms, so the whole of it is the target. What
+ * differs is where the accessible name is read from: Ark points a radio's hidden input at its
+ * `ItemText`, and a checkbox's at the label part we do not render — so the multiple arm names
+ * itself explicitly off the title instead.
+ *
+ * `Item` is not the card here, deliberately. It declares `role="listitem"`, which inside a
+ * `radiogroup` is a list item with no list, and `asChild`-ing it onto the control would put that
+ * role on the control itself — the failure `Item`'s own docblock describes.
+ */
+export declare const QuestionnaireChoice: (props: QuestionnaireChoiceProps) => React.JSX.Element;
+/**
+ * The freeform arm — a single-line answer filed under the item's name.
+ *
+ * A fieldset's legend names the GROUP, not a control inside it, so the input is pointed at the
+ * legend explicitly. Without this the question is announced when focus enters the group and the
+ * control itself is unnamed.
+ */
+export declare const QuestionnaireInput: (props: React.ComponentProps<typeof Input>) => React.JSX.Element;
+/** The same binding over a `Textarea`, for the answer that runs to a paragraph. */
+export declare const QuestionnaireTextarea: (props: React.ComponentProps<typeof Textarea>) => React.JSX.Element;
+export interface QuestionnaireActionsProps extends Omit<React.ComponentProps<typeof ark.div>, "aria-label" | "aria-labelledby"> {
+    /** Names the group, the way a run of independent controls needs naming. */
+    "aria-label"?: string;
+}
+/**
+ * The navigation row: Back at the start, Skip and Next/Submit at the end.
+ *
+ * Three fixed columns rather than a `ButtonGroup`, and that is the point of it — `ButtonGroup`
+ * collapses the inner radii and overlaps its children by a pixel, which is right for a cluster
+ * acting on one thing and wrong for two ends of a journey. The columns hold their places while
+ * Back and Skip come and go, so nothing slides sideways between questions.
+ */
+export declare const QuestionnaireActions: (props: QuestionnaireActionsProps) => React.JSX.Element;
+/**
+ * Drawn only where there is somewhere to go back to.
+ *
+ * Absent rather than disabled: the first question's row is one solid Next and nothing else, and a
+ * greyed control that has never been available says nothing a reader can use.
+ */
+export declare const QuestionnairePrevious: (props: ButtonProps) => React.JSX.Element | null;
+/** Drawn only where the visible question declared itself skippable — elsewhere it would lie. */
+export declare const QuestionnaireSkip: (props: ButtonProps) => React.JSX.Element | null;
+/**
+ * Advance, or reveal why not.
+ *
+ * Never disabled on an unanswered question: a disabled control says nothing about what is missing,
+ * and the machine's `onStepInvalid` is what puts the message on screen. It stands down on the last
+ * question so that `QuestionnaireSubmit` can take the same place in the cluster.
+ */
+export declare const QuestionnaireNext: (props: ButtonProps) => React.JSX.Element | null;
+/** The other half of that pair: drawn only on the last question, and it submits the form. */
+export declare const QuestionnaireSubmit: (props: ButtonProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=Questionnaire.d.ts.map

package/dist/composites/Questionnaire.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Questionnaire.d.ts","sourceRoot":"","sources":["../../src/composites/Questionnaire.tsx"],"names":[],"mappings":"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"}

package/dist/composites/Questionnaire.js

@@ -0,0 +1,422 @@
+"use client";
+import { jsx as l, jsxs as T, Fragment as D } from "react/jsx-runtime";
+import { ark as V } from "@ark-ui/react/factory";
+import { useFieldsetContext as O } from "@ark-ui/react/fieldset";
+import { useSteps as B } from "@ark-ui/react/steps";
+import * as b from "react";
+import { tv as H } from "tailwind-variants";
+import { cn as d } from "../lib/cn.js";
+import { Button as C } from "../simples/button.js";
+import { Checkbox as M, CheckboxGroup as _ } from "../simples/checkbox.js";
+import { FieldTitle as $, FieldSetHelper as z, FieldSetError as X, FieldSet as J, FieldLegend as U } from "../simples/field.js";
+import { Input as W } from "../simples/input.js";
+import { ItemContent as Y, ItemDescription as Z } from "../simples/item.js";
+import { Kbd as ee } from "../simples/kbd.js";
+import { RadioGroupText as te, RadioGroupCard as ne, RadioGroupIndicator as se, RadioGroup as re } from "../simples/radio-group.js";
+import { Textarea as oe } from "../simples/textarea.js";
+const P = b.createContext(null), R = b.createContext(null);
+function w() {
+  const e = b.useContext(P);
+  if (!e) throw new Error("useQuestionnaire must be used inside <Questionnaire>");
+  return e;
+}
+function A() {
+  const e = b.useContext(R);
+  if (!e) throw new Error("This part must be used inside <QuestionnaireItem>");
+  return e;
+}
+function G(e, n) {
+  const t = [], r = (o) => {
+    b.Children.forEach(o, (s) => {
+      if (b.isValidElement(s)) {
+        if (s.type === n) {
+          t.push(s);
+          return;
+        }
+        r(s.props.children);
+      }
+    });
+  };
+  return r(e), t;
+}
+function ie(e) {
+  return G(e, le).map((n) => {
+    const t = n.props;
+    return {
+      multiple: t.multiple === !0,
+      name: t.name,
+      required: t.required === !0,
+      skippable: t.skippable === !0
+    };
+  });
+}
+function ae(e, n) {
+  if (!(e != null && e.required)) return !0;
+  const t = n[e.name];
+  return Array.isArray(t) ? t.length > 0 : (t ?? "").trim().length > 0;
+}
+function Se(e) {
+  const {
+    children: n,
+    className: t,
+    defaultAnswers: r,
+    defaultStep: o = 0,
+    onAnswersChange: s,
+    onStepChange: a,
+    onSubmit: i,
+    shortcuts: p = !1,
+    slot: m,
+    ...h
+  } = e, [f, k] = b.useState(r ?? {}), [Q, y] = b.useState(null), g = ie(n), v = B({
+    // `|| 1`: zag divides by `count` for `percent`, so an empty questionnaire would paint `NaN%`.
+    count: g.length || 1,
+    defaultStep: o,
+    isStepSkippable: (c) => {
+      var u;
+      return ((u = g[c]) == null ? void 0 : u.skippable) === !0;
+    },
+    isStepValid: (c) => ae(g[c], f),
+    onStepChange: (c) => {
+      y(null), a == null || a(c);
+    },
+    onStepInvalid: (c) => y(c.step)
+  }), S = (c, u) => {
+    const x = { ...f, [c]: u };
+    y(null), k(x), s == null || s(x);
+  }, N = () => {
+    const c = v.value;
+    if (!v.isStepSkippable(c) && !v.isStepValid(c)) {
+      y(c);
+      return;
+    }
+    i == null || i(f);
+  }, E = {
+    answers: f,
+    blocked: Q,
+    indexOf: (c) => g.findIndex((u) => u.name === c),
+    questions: g,
+    setAnswer: S,
+    shortcuts: p,
+    steps: v
+  };
+  return /* @__PURE__ */ l(P.Provider, { value: E, children: /* @__PURE__ */ l(
+    V.form,
+    {
+      className: d("flex w-full min-w-0 flex-col gap-4", t),
+      noValidate: !0,
+      onSubmit: (c) => {
+        c.preventDefault(), N();
+      },
+      ...h,
+      "data-slot": m ?? "questionnaire",
+      children: n
+    }
+  ) });
+}
+const Ce = (e) => {
+  const { children: n, className: t, slot: r, ...o } = e, { steps: s } = w(), a = s.value + 1, i = `Question ${a} of ${s.count}`;
+  return /* @__PURE__ */ l(
+    V.div,
+    {
+      "aria-live": "polite",
+      "aria-valuemax": s.count,
+      "aria-valuemin": 1,
+      "aria-valuenow": a,
+      "aria-valuetext": i,
+      className: d(
+        "min-h-[1lh] w-fit min-w-[14ch]",
+        "font-medium text-muted-foreground text-xs tabular-nums",
+        t
+      ),
+      role: "progressbar",
+      ...o,
+      "data-slot": r ?? "questionnaire-progress",
+      children: n ?? i
+    }
+  );
+};
+function le(e) {
+  const { children: n, className: t, multiple: r, name: o, required: s, skippable: a, slot: i, ...p } = e, { answers: m, blocked: h, indexOf: f, setAnswer: k, shortcuts: Q, steps: y } = w(), g = f(o), v = g === y.value, S = {
+    multiple: r === !0,
+    name: o,
+    required: s === !0,
+    skippable: a === !0
+  }, N = ce(n);
+  b.useEffect(() => {
+    if (!v || !Q || N.length === 0) return;
+    const c = (u) => {
+      if (u.metaKey || u.ctrlKey || u.altKey) return;
+      const x = document.activeElement;
+      if (x instanceof HTMLElement && (x.isContentEditable || x.tagName === "TEXTAREA" || x instanceof HTMLInputElement && x.type !== "checkbox" && x.type !== "radio")) return;
+      const q = N[Number(u.key) - 1];
+      if (q === void 0) return;
+      if (u.preventDefault(), !S.multiple) {
+        k(o, q);
+        return;
+      }
+      const F = m[o], I = Array.isArray(F) ? F : [];
+      k(
+        o,
+        I.includes(q) ? I.filter((L) => L !== q) : [...I, q]
+      );
+    };
+    return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
+  });
+  const E = {
+    current: v,
+    index: g,
+    question: S,
+    shortcutOf: (c) => {
+      const u = N.indexOf(c);
+      return Q && u >= 0 && u < 9 ? String(u + 1) : void 0;
+    }
+  };
+  return /* @__PURE__ */ l(R.Provider, { value: E, children: /* @__PURE__ */ l(
+    J,
+    {
+      "aria-current": v ? "step" : void 0,
+      className: d("min-w-0 gap-4", t),
+      hidden: !v,
+      invalid: h === g,
+      ...p,
+      slot: i ?? "questionnaire-item",
+      children: n
+    }
+  ) });
+}
+function ce(e) {
+  return G(e, ue).map(
+    (n) => n.props.value
+  );
+}
+const Ae = (e) => {
+  const { className: n, slot: t, ...r } = e;
+  return /* @__PURE__ */ l(
+    U,
+    {
+      className: d(
+        "mb-0 font-heading text-pretty leading-snug",
+        "[&:not(:has(~[data-slot=questionnaire-description]))]:mb-4",
+        n
+      ),
+      ...r,
+      slot: t ?? "questionnaire-title"
+    }
+  );
+}, Ee = (e) => {
+  const { className: n, slot: t, ...r } = e;
+  return /* @__PURE__ */ l(
+    z,
+    {
+      className: d("text-pretty", n),
+      ...r,
+      slot: t ?? "questionnaire-description"
+    }
+  );
+}, Ie = (e) => {
+  const { children: n, slot: t, ...r } = e;
+  return /* @__PURE__ */ l(X, { ...r, slot: t ?? "questionnaire-error", children: n ?? "Answer this to continue." });
+}, Te = (e) => {
+  const { children: n, className: t, slot: r, ...o } = e, { answers: s, setAnswer: a } = w(), { question: i } = A(), { multiple: p, name: m } = i, h = s[m];
+  return p ? /* @__PURE__ */ l(
+    _,
+    {
+      className: d("gap-2", t),
+      onValueChange: (f) => a(m, f),
+      value: Array.isArray(h) ? h : [],
+      ...o,
+      slot: r ?? "questionnaire-choices",
+      children: n
+    }
+  ) : /* @__PURE__ */ l(
+    re,
+    {
+      className: d("gap-2", t),
+      onValueChange: (f) => a(m, f.value ?? ""),
+      value: typeof h == "string" ? h : null,
+      ...o,
+      slot: r ?? "questionnaire-choices",
+      children: n
+    }
+  );
+}, j = H({
+  base: [
+    "group/questionnaire-choice",
+    "relative flex w-full min-h-[44px] items-start gap-3",
+    "cursor-pointer select-none rounded-lg px-3.5 py-3",
+    "text-start text-sm",
+    "transition-colors",
+    // The control is 16px against a 20px title line, so it drops 2px to sit on that line rather
+    // than on the top of a two-line stack.
+    "*:data-[slot=checkbox-control]:mt-0.5 *:data-[slot=radio-group-indicator]:mt-0.5"
+  ],
+  variants: {
+    shell: {
+      true: [
+        "border border-input bg-transparent",
+        "hover:bg-foreground/14",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary/17",
+        "data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring",
+        "data-invalid:border-destructive",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        // See the docblock: the control is the last thing in the row, and `Checkbox` renders it
+        // first.
+        "*:data-[slot=checkbox-control]:order-last"
+      ]
+    }
+  },
+  defaultVariants: {
+    shell: !1
+  }
+}), ue = (e) => {
+  const { children: n, className: t, description: r, slot: o, value: s, ...a } = e, { question: i, shortcutOf: p } = A(), m = p(s), h = b.useId(), f = /* @__PURE__ */ T(D, { children: [
+    /* @__PURE__ */ T(Y, { slot: "questionnaire-choice-label", children: [
+      i.multiple ? /* @__PURE__ */ l($, { id: h, slot: "questionnaire-choice-title", children: n }) : /* @__PURE__ */ l(te, { slot: "questionnaire-choice-title", children: n }),
+      r ? /* @__PURE__ */ l(Z, { slot: "questionnaire-choice-description", children: r }) : null
+    ] }),
+    m ? /* @__PURE__ */ l(
+      ee,
+      {
+        "aria-hidden": !0,
+        className: "mt-0.5 size-5 shrink-0 rounded-md bg-transparent text-muted-foreground",
+        variant: "outline",
+        children: m
+      }
+    ) : null
+  ] });
+  return i.multiple ? /* @__PURE__ */ l(
+    M,
+    {
+      "aria-labelledby": h,
+      className: d(j({ shell: !0 }), t),
+      value: s,
+      ...a,
+      slot: o ?? "questionnaire-choice",
+      children: f
+    }
+  ) : /* @__PURE__ */ T(
+    ne,
+    {
+      className: d(j(), t),
+      value: s,
+      ...a,
+      slot: o ?? "questionnaire-choice",
+      children: [
+        f,
+        /* @__PURE__ */ l(se, {})
+      ]
+    }
+  );
+}, K = "[[data-slot=questionnaire-choices]+&]:-mt-2", Ve = (e) => {
+  const { className: n, slot: t, ...r } = e, { answers: o, setAnswer: s } = w(), { question: a } = A(), i = O(), p = o[a.name];
+  return /* @__PURE__ */ l(
+    W,
+    {
+      "aria-labelledby": i == null ? void 0 : i.ids.legend,
+      className: d(K, n),
+      onChange: (m) => s(a.name, m.target.value),
+      value: typeof p == "string" ? p : "",
+      ...r,
+      slot: t ?? "questionnaire-input"
+    }
+  );
+}, Fe = (e) => {
+  const { className: n, slot: t, ...r } = e, { answers: o, setAnswer: s } = w(), { question: a } = A(), i = O(), p = o[a.name];
+  return /* @__PURE__ */ l(
+    oe,
+    {
+      "aria-labelledby": i == null ? void 0 : i.ids.legend,
+      className: d(K, n),
+      onChange: (m) => s(a.name, m.target.value),
+      value: typeof p == "string" ? p : "",
+      ...r,
+      slot: t ?? "questionnaire-textarea"
+    }
+  );
+}, je = (e) => {
+  const { "aria-label": n = "Questionnaire navigation", className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ l(
+    V.div,
+    {
+      "aria-label": n,
+      className: d(
+        "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2",
+        t
+      ),
+      role: "group",
+      ...o,
+      "data-slot": r ?? "questionnaire-actions"
+    }
+  );
+}, Oe = (e) => {
+  const { children: n, className: t, slot: r, ...o } = e, { steps: s } = w();
+  return s.hasPrevStep ? /* @__PURE__ */ l(
+    C,
+    {
+      className: d("col-start-1 row-start-1 justify-self-start", t),
+      onClick: () => s.goToPrevStep(),
+      variant: "outline",
+      ...o,
+      slot: r ?? "questionnaire-previous",
+      children: n ?? "Back"
+    }
+  ) : null;
+}, Pe = (e) => {
+  var i;
+  const { children: n, className: t, slot: r, ...o } = e, { questions: s, steps: a } = w();
+  return ((i = s[a.value]) == null ? void 0 : i.skippable) !== !0 ? null : /* @__PURE__ */ l(
+    C,
+    {
+      className: d("col-start-2 row-start-1 justify-self-end", t),
+      onClick: () => a.goToNextStep(),
+      variant: "ghost",
+      ...o,
+      slot: r ?? "questionnaire-skip",
+      children: n ?? "Skip"
+    }
+  );
+}, Re = (e) => {
+  const { children: n, className: t, slot: r, ...o } = e, { steps: s } = w();
+  return s.value >= s.count - 1 ? null : /* @__PURE__ */ l(
+    C,
+    {
+      className: d("col-start-3 row-start-1 justify-self-end", t),
+      onClick: () => s.goToNextStep(),
+      ...o,
+      slot: r ?? "questionnaire-next",
+      children: n ?? "Next"
+    }
+  );
+}, Ge = (e) => {
+  const { children: n, className: t, slot: r, ...o } = e, { steps: s } = w();
+  return s.value < s.count - 1 ? null : /* @__PURE__ */ l(
+    C,
+    {
+      className: d("col-start-3 row-start-1 justify-self-end", t),
+      type: "submit",
+      ...o,
+      slot: r ?? "questionnaire-submit",
+      children: n ?? "Submit"
+    }
+  );
+};
+export {
+  Se as Questionnaire,
+  je as QuestionnaireActions,
+  ue as QuestionnaireChoice,
+  Te as QuestionnaireChoices,
+  Ee as QuestionnaireDescription,
+  Ie as QuestionnaireError,
+  Ve as QuestionnaireInput,
+  le as QuestionnaireItem,
+  Re as QuestionnaireNext,
+  Oe as QuestionnairePrevious,
+  Ce as QuestionnaireProgress,
+  Pe as QuestionnaireSkip,
+  Ge as QuestionnaireSubmit,
+  Fe as QuestionnaireTextarea,
+  Ae as QuestionnaireTitle,
+  w as useQuestionnaire,
+  A as useQuestionnaireItem
+};
+//# sourceMappingURL=Questionnaire.js.map