Question Flow

1"use client";
2 
3import {
4  useMemo,
5  useState,
6  useCallback,
7  useRef,
8  useEffect,
9  Fragment,
10} from "react";
11import type { KeyboardEvent } from "react";
12import type {
13  QuestionFlowProps,
14  QuestionFlowProgressiveProps,
15  QuestionFlowUpfrontProps,
16  QuestionFlowReceiptProps,
17  QuestionFlowOption,
18} from "./schema";
19import { cn, Button, Separator } from "./_adapter";
20import { Check, ChevronLeft } from "lucide-react";
21 
22interface SelectionIndicatorProps {
23  mode: "single" | "multi";
24  isSelected: boolean;
25  disabled?: boolean;
26}
27 
28interface ProgressBarProps {
29  current: number;
30  total: number;
31}
32 
33function ProgressBar({ current, total }: ProgressBarProps) {
34  return (
35    <div
36      className="flex h-1.5 gap-1"
37      role="progressbar"
38      aria-valuenow={current}
39      aria-valuemin={1}
40      aria-valuemax={total}
41    >
42      {Array.from({ length: total }).map((_, i) => (
43        <div
44          key={i}
45          className="relative flex-1 overflow-hidden rounded-full bg-muted"
46        >
47          <div
48            className={cn(
49              "absolute inset-0 origin-left rounded-full bg-primary",
50              "motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-[var(--cubic-ease-in-out)]",
51              i < current ? "scale-x-100" : "scale-x-0",
52            )}
53          />
54        </div>
55      ))}
56    </div>
57  );
58}
59 
60function SelectionIndicator({
61  mode,
62  isSelected,
63  disabled,
64}: SelectionIndicatorProps) {
65  const shape = mode === "single" ? "rounded-full" : "rounded";
66 
67  return (
68    <div
69      className={cn(
70        "flex size-4 shrink-0 items-center justify-center border-2",
71        "motion-safe:transition-colors motion-safe:duration-200",
72        shape,
73        isSelected && [
74          "border-primary bg-primary text-primary-foreground",
75          "motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out",
76        ],
77        !isSelected && "border-muted-foreground/50",
78        disabled && "opacity-50",
79      )}
80    >
81      {mode === "multi" && isSelected && (
82        <Check
83          className="size-3 motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:delay-75 motion-safe:duration-200 motion-safe:fill-mode-both"
84          strokeWidth={3}
85        />
86      )}
87      {mode === "single" && isSelected && (
88// … truncated