52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3f36,"use client"; import { ArrowLeftIcon, ArrowRightIcon } from "blode-icons-react"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; const springs = { fast: { bounce: 0, duration: 0.08, type: "spring" as const }, moderate: { bounce: 0.15, duration: 0.16, type: "spring" as const }, slow: { bounce: 0.15, duration: 0.24, type: "spring" as const }, }; interface AskUserOption { id: string; /** Bold option label. */ title: string; /** Secondary descriptive text. */ description?: string; } interface AskUserQuestion { id: string; /** Question text. */ title: string; options: AskUserOption[]; /** Allow multiple selections (shows an explicit Next/Finish button). */ multiSelect?: boolean; /** Reveal a textarea for a free-form answer. */ allowOther?: boolean; otherPlaceholder?: string; /** Label for the Next button in multi-select mode. Defaults to "Next" / "Finish". */ nextLabel?: string; /** Show the Skip control. Defaults to true. */ skippable?: boolean; /** Description placement: inline with the title or stacked beneath it. */ layout?: "inline" | "stacked"; } interface AskUserAnswer { questionId: string; selectedIds: string[]; otherText?: string; skipped?: boolean; } type AnswersMap = Record; interface AskUserQuestionsProps extends Omit, "onChange"> { questions: AskUserQuestion[]; currentIndex?: number; defaultCurrentIndex?: number; onCurrentIndexChange?: (index: number) => void; answers?: AnswersMap; defaultAnswers?: AnswersMap; onAnswersChange?: (answers: AnswersMap) => void; onComplete?: (answers: AnswersMap) => void; onSkip?: (questionId: string, index: number) => void; skipLabel?: string; } const useControllable = ( controlled: T | undefined, defaultValue: T, onChange?: (value: T) => void, ): [T, (value: T) => void] => { const [uncontrolled, setUncontrolled] = React.useState(defaultValue); const isControlled = controlled !== undefined; const value = isControlled ? (controlled as T) : uncontrolled; const setValue = React.useCallback( (next: T) => { if (!isControlled) { setUncontrolled(next); } onChange?.(next); }, [isControlled, onChange], ); return [value, setValue]; }; const getChipClassName = (isMulti: boolean, selected: boolean) => { if (isMulti) { return cn( "rounded-full", selected ? "bg-foreground font-semibold text-background" : "border border-border text-muted-foreground", ); } return selected ? "font-semibold text-foreground" : "text-muted-foreground"; }; interface AskUserOptionButtonProps { option: AskUserOption; index: number; selected: boolean; hovered: boolean; isMulti: boolean; layout: "inline" | "stacked"; onSelect: () => void; onHover: () => void; } const AskUserOptionButton = ({ option, index, selected, hovered, isMulti, layout, onSelect, onHover, }: AskUserOptionButtonProps) => { const showArrow = !isMulti && hovered; return ( ); }; interface AskUserOtherInputProps { placeholder?: string; optionCount: number; otherText: string; isMulti: boolean; onChangeText: (text: string) => void; onSubmit: () => void; } const AskUserOtherInput = ({ placeholder, optionCount, otherText, isMulti, onChangeText, onSubmit, }: AskUserOtherInputProps) => (

0 && "bg-accent", )} >

onChangeText(e.target.value)}
      onKeyDown={(e) => {
        if (e.key === "Enter" && !e.shiftKey && !isMulti && otherText.trim()) {
          e.preventDefault();
          onSubmit();
        }
      }}
      placeholder={placeholder ?? "Describe in your own words…"}
      rows={1}
      value={otherText}
    />
    <span
      className={cn(
        "inline-flex size-5 shrink-0 items-center justify-center self-center text-[11px]",
        otherText.length > 0 ? "font-semibold text-foreground" : "text-muted-foreground",
      )}
    >
      {optionCount + 1}
    </span>
  </div>
);

interface AskUserFooterProps {
  showBack: boolean;
  showSkip: boolean;
  showConfirm: boolean;
  skipLabel: string;
  nextLabel?: string;
  isLast: boolean;
  isMulti: boolean;
  canProceed: boolean;
  onBack: () => void;
  onSkip: () => void;
  onNext: () => void;
}

const AskUserFooter = ({
  showBack,
  showSkip,
  showConfirm,
  skipLabel,
  nextLabel,
  isLast,
  isMulti,
  canProceed,
  onBack,
  onSkip,
  onNext,
}: AskUserFooterProps) => (
  <div className="flex items-center justify-between gap-2 px-4 pt-1 pb-3 sm:px-5">
    <div>
      {showBack && (
        <Button data-icon="inline-start" onClick={onBack} size="sm" variant="ghost">
          <ArrowLeftIcon className="hidden sm:block" />
          Back
        </Button>
      )}
    </div>
    <div className="flex items-center gap-2">
      {showSkip && (
        <Button data-icon="inline-end" onClick={onSkip} size="sm" variant="ghost">
          {skipLabel}
          <ArrowRightIcon className="hidden sm:block" />
        </Button>
      )}
      {showConfirm && (
        <Button disabled={!canProceed} onClick={onNext} size="sm">
          {nextLabel ?? (isLast ? "Finish" : "Next")}
          {isMulti && (
            <kbd className="-mr-0.5 ml-0.5 inline-flex items-center gap-0.5 rounded-full bg-primary-foreground/15 px-1.5 py-px font-medium text-[10px] text-primary-foreground/90">
              ⌘↵
            </kbd>
          )}
        </Button>
      )}
    </div>
  </div>
);

// ─── AskUserQuestions ───────────────────────────────────────────────────────
// A stepped questionnaire rendered as a single card: single- or multi-select
// options with an optional free-form answer and skip control. A morphing
// background slides between options on hover and selection. Single-select
// questions advance on click (an arrow overlays the number chip); multi-select
// (or "other"-enabled) questions advance via the footer Next / Finish button.
const AskUserQuestions = ({
  questions,
  currentIndex,
  defaultCurrentIndex = 0,
  onCurrentIndexChange,
  answers,
  defaultAnswers,
  onAnswersChange,
  onComplete,
  onSkip,
  skipLabel = "Skip",
  className,
  ref,
  ...props
}: AskUserQuestionsProps) => {
  const [index, setIndex] = useControllable(
    currentIndex,
    defaultCurrentIndex,
    onCurrentIndexChange,
  );
  const [answersMap, setAnswersMap] = useControllable(
    answers,
    defaultAnswers ?? {},
    onAnswersChange,
  );
  const [hoverIndex, setHoverIndex] = React.useState<number | null>(null);

const current = questions[index];

const currentAnswer: AskUserAnswer = React.useMemo(
    () =>
      current
        ? (answersMap[current.id] ?? { questionId: current.id, selectedIds: [] })
        : { questionId: "", selectedIds: [] },
    [current, answersMap],
  );

const commit = React.useCallback(
    (answer: AskUserAnswer): AnswersMap => {
      const next = { ...answersMap, [answer.questionId]: answer };
      setAnswersMap(next);
      return next;
    },
    [answersMap, setAnswersMap],
  );

const goNext = React.useCallback(
    (nextAnswers: AnswersMap) => {
      setHoverIndex(null);
      if (index >= questions.length - 1) {
        onComplete?.(nextAnswers);
        return;
      }
      setIndex(index + 1);
    },
    [index, questions.length, onComplete, setIndex],
  );

const containerRef = React.useRef<HTMLDivElement>(null);
  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);

// The Cmd/Ctrl+Enter submit shortcut is attached as a native listener rather
  // than a JSX handler so the container stays a non-interactive grouping element.
  const handleShortcut = React.useCallback(
    (e: KeyboardEvent) => {
      if (!current) {
        return;
      }
      const showConfirm = Boolean(current.multiSelect || current.allowOther);
      const otherText = currentAnswer.otherText ?? "";
      const canProceed = currentAnswer.selectedIds.length > 0 || otherText.trim().length > 0;
      if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && showConfirm && canProceed) {
        e.preventDefault();
        goNext(commit({ ...currentAnswer, skipped: false }));
      }
    },
    [current, currentAnswer, commit, goNext],
  );

React.useEffect(() => {
    const node = containerRef.current;
    if (!node) {
      return;
    }
    const listener = (e: KeyboardEvent) => handleShortcut(e);
    node.addEventListener("keydown", listener);
    return () => node.removeEventListener("keydown", listener);
  }, [handleShortcut]);

if (!current) {
    return null;
  }

const layout = current.layout ?? "inline";
  const skippable = current.skippable !== false;
  const isMulti = Boolean(current.multiSelect);
  const showConfirm = Boolean(current.multiSelect || current.allowOther);
  const isLast = index === questions.length - 1;
  const otherText = currentAnswer.otherText ?? "";
  const canProceed = currentAnswer.selectedIds.length > 0 || otherText.trim().length > 0;
  const showBack = index > 0;
  const showSkip = skippable && questions.length > 1;
  const showFooter = showBack || showSkip || showConfirm;

const selectOption = (optionId: string) => {
    if (isMulti) {
      const selected = currentAnswer.selectedIds.includes(optionId);
      const selectedIds = selected
        ? currentAnswer.selectedIds.filter((id) => id !== optionId)
        : [...currentAnswer.selectedIds, optionId];
      commit({ ...currentAnswer, selectedIds, skipped: false });
      return;
    }

const answer: AskUserAnswer = {
      ...currentAnswer,
      selectedIds: [optionId],
      skipped: false,
    };
    const next = commit(answer);
    if (!current.allowOther) {
      goNext(next);
    }
  };

const setOtherText = (text: string) => {
    commit({ ...currentAnswer, otherText: text, skipped: false });
  };

const handleNext = () => {
    goNext(commit({ ...currentAnswer, skipped: false }));
  };

const handleBack = () => {
    if (index > 0) {
      setHoverIndex(null);
      setIndex(index - 1);
    }
  };

const handleSkip = () => {
    const next = commit({
      otherText: "",
      questionId: current.id,
      selectedIds: [],
      skipped: true,
    });
    onSkip?.(current.id, index);
    goNext(next);
  };

return (
    <div
      className={cn(
        "relative w-full max-w-[520px] overflow-hidden rounded-2xl border border-border bg-card",
        className,
      )}
      data-slot="ask-user-questions"
      ref={containerRef}
      {...props}
    >
      {/* Header — progress sits at the top, fixed across questions. */}
      <div className="flex items-center px-4 pt-4 pb-2 text-muted-foreground text-xs tabular-figures sm:px-5 sm:pt-5">
        Question {index + 1} of {questions.length}
      </div>

<AnimatePresence initial={false} mode="wait">
        <motion.div
          animate={{ opacity: 1, y: 0 }}
          className="px-4 pb-1 sm:px-5"
          exit={{ opacity: 0, transition: { duration: 0.1 }, y: -6 }}
          initial={{ opacity: 0, y: 8 }}
          key={current.id}
          layout
          transition={springs.moderate}
        >
          <h3 className="font-semibold text-base text-foreground leading-snug">{current.title}</h3>

<div
            className="relative mt-2 flex flex-col gap-0.5"
            onMouseLeave={() => setHoverIndex(null)}
            role={isMulti ? "group" : "radiogroup"}
          >
            {current.options.map((option, i) => (
              <AskUserOptionButton
                hovered={hoverIndex === i}
                index={i}
                isMulti={isMulti}
                key={option.id}
                layout={layout}
                onHover={() => setHoverIndex(i)}
                onSelect={() => selectOption(option.id)}
                option={option}
                selected={currentAnswer.selectedIds.includes(option.id)}
              />
            ))}

{current.allowOther && (
              <AskUserOtherInput
                isMulti={isMulti}
                onChangeText={setOtherText}
                onSubmit={handleNext}
                optionCount={current.options.length}
                otherText={otherText}
                placeholder={current.otherPlaceholder}
              />
            )}
          </div>
        </motion.div>
      </AnimatePresence>

{showFooter && (
        <AskUserFooter
          canProceed={canProceed}
          isLast={isLast}
          isMulti={isMulti}
          nextLabel={current.nextLabel}
          onBack={handleBack}
          onNext={handleNext}
          onSkip={handleSkip}
          showBack={showBack}
          showConfirm={showConfirm}
          showSkip={showSkip}
          skipLabel={skipLabel}
        />
      )}
    </div>
  );
};

export { AskUserQuestions };
export type { AskUserQuestionsProps, AskUserQuestion, AskUserOption, AskUserAnswer };
51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@blode","registryDependencies":["button","badge","textarea"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/ask-user-questions.tsx","content":"$54","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>