51: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"] 52: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"] 53:T6dab,"use client" import * as React from "react" import { Questionnaire as QuestionnairePrimitive } from "@shadcn/react/questionnaire" import { IconCheck } from "@tabler/icons-react" import { type VariantProps } from "class-variance-authority" import { cn } from "cn" import { buttonVariants } from "@/components/ui/button" import { inputVariants } from "@/components/ui/input" import { Kbd } from "@/components/ui/kbd" import { NumberFlow } from "@/components/ui/number-flow" import { easeOut, prefersReducedMotion } from "@/lib/motion" type QuestionnaireTransition = "slide" | "lift" const itemSelector = "[data-slot=questionnaire-item]" function ownItems(form: HTMLFormElement) { return Array.from(form.querySelectorAll(itemSelector)).filter( (item) => item.closest("form") === form ) } function activeItem(form: HTMLFormElement) { return ownItems(form).find((item) => item.hasAttribute("data-active")) ?? null } const leavingProperties = [ "display", "position", "top", "left", "width", "pointer-events", ] function releaseLeaving(item: HTMLElement) { for (const property of leavingProperties) { item.style.removeProperty(property) } item.removeAttribute("aria-hidden") item.removeAttribute("data-leaving") } function releaseEntering(item: HTMLElement) { item.style.removeProperty("overflow") item.style.removeProperty("overflow-clip-margin") } function useQuestionTransition( formRef: React.RefObject, transition: QuestionnaireTransition, onActivate: (item: HTMLElement) => void ) { const onActivateRef = React.useRef(onActivate) React.useLayoutEffect(() => { onActivateRef.current = onActivate }) React.useLayoutEffect(() => { const form = formRef.current if (!form || typeof MutationObserver === "undefined") { return } let active = activeItem(form) if (active) { onActivateRef.current(active) } const animations = new Set() const leaving = new Set() const entering = new Set() const settle = () => { for (const animation of animations) { animation.cancel() } animations.clear() leaving.forEach(releaseLeaving) leaving.clear() entering.forEach(releaseEntering) entering.clear() } const track = (animation: Animation, done: () => void) => { animations.add(animation) animation.onfinish = () => { animations.delete(animation) done() } } const update = () => { const next = activeItem(form) if (next === active) { return } const previous = active active = next settle() if (next) { onActivateRef.current(next) } if ( !previous || !next || !previous.isConnected || prefersReducedMotion() || typeof next.animate !== "function" ) { return } previous.style.setProperty("display", "flex", "important") previous.setAttribute("aria-hidden", "true") previous.setAttribute("data-leaving", "") const from = previous.getBoundingClientRect().height previous.style.setProperty("position", "absolute") previous.style.setProperty("pointer-events", "none") const to = next.getBoundingClientRect().height previous.style.setProperty("top", `${next.offsetTop}px`) previous.style.setProperty("left", `${next.offsetLeft}px`) previous.style.setProperty("width", `${next.offsetWidth}px`) leaving.add(previous) const forward = Boolean( previous.compareDocumentPosition(next) & Node.DOCUMENT_POSITION_FOLLOWING ) const rtl = getComputedStyle(form).direction === "rtl" const lift = transition === "lift" const distance = (lift ? 14 : 28) * (forward ? 1 : -1) const offset = (amount: number) => lift ? `translate3d(0, ${amount}px, 0)` : `translate3d(${rtl ? -amount : amount}px, 0, 0)` const exit = previous.animate( [ { opacity: 1, transform: "none", filter: "blur(0px)" }, { opacity: 0, transform: offset(-distance), filter: lift ? "blur(2px)" : "blur(0px)", }, ], { duration: 180, easing: "cubic-bezier(0.4, 0, 1, 1)", fill: "forwards", } ) track(exit, () => { leaving.delete(previous) exit.cancel() releaseLeaving(previous) }) const enter = next.animate( [ { opacity: 0, transform: offset(distance), filter: lift ? "blur(2px)" : "blur(0px)", }, { opacity: 1, transform: "none", filter: "blur(0px)" }, ], { duration: 340, delay: 50, easing: easeOut, fill: "backwards" } ) track(enter, () => undefined) if (Math.abs(from - to) >= 1) { next.style.setProperty("overflow", "clip") next.style.setProperty("overflow-clip-margin", "8px") entering.add(next) const grow = next.animate( [{ height: `${from}px` }, { height: `${to}px` }], { duration: 340, easing: easeOut } ) track(grow, () => { entering.delete(next) releaseEntering(next) }) } } const observer = new MutationObserver(update) observer.observe(form, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-active"], }) return () => { observer.disconnect() settle() } }, [formRef, transition]) } function restartAttribute(element: Element, name: string) { element.removeAttribute(name) void (element as HTMLElement).offsetWidth element.setAttribute(name, "") } type QuestionnaireProps = React.ComponentProps< typeof QuestionnairePrimitive.Root > & { transition?: QuestionnaireTransition autoAdvance?: boolean } function Questionnaire({ className, transition = "slide", autoAdvance = false, onKeyDown, onKeyDownCapture, onKeyUp, onClick, onChange, onMouseDown, ref, ...props }: QuestionnaireProps) { const formRef = React.useRef(null) const answeredOnArrival = React.useRef(new WeakMap()) const advanceTimer = React.useRef | null>(null) const cancelAdvance = () => { if (advanceTimer.current) { clearTimeout(advanceTimer.current) advanceTimer.current = null } } useQuestionTransition(formRef, transition, (item) => { cancelAdvance() answeredOnArrival.current.set( item, item.getAttribute("data-status") !== "unanswered" ) }) React.useEffect(() => cancelAdvance, []) const setRef = React.useCallback( (node: HTMLFormElement | null) => { formRef.current = node if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) const shakeIfInvalid = () => { requestAnimationFrame(() => { const form = formRef.current const item = form ? activeItem(form) : null if (item?.hasAttribute("data-invalid") && !prefersReducedMotion()) { restartAttribute(item, "data-shake") } }) } const shortcutFor = (key: string) => { const form = formRef.current const item = form ? activeItem(form) : null if (!item || key.length !== 1) { return null } return item.querySelector( `kbd[data-shortcut="${CSS.escape(key.toUpperCase())}"]` ) } const handleKeys = (event: React.KeyboardEvent) => { const form = formRef.current const item = form ? activeItem(form) : null if (!form || !item || event.defaultPrevented || event.altKey) { return } const target = event.target as HTMLElement const typing = target.matches( "input:not([type=radio]):not([type=checkbox]), textarea, select, [contenteditable=true]" ) if (event.metaKey || event.ctrlKey) { if (event.key === "Enter") { shakeIfInvalid() } return } const take = () => { event.preventDefault() event.stopPropagation() } const answers = Array.from( item.querySelectorAll( "input[type=radio]:not(:disabled), input[type=checkbox]:not(:disabled), [data-slot=questionnaire-input]:not(:disabled)" ) ) const index = answers.indexOf(target) const visible = (slot: string) => form.querySelector(`[data-slot=${slot}][data-visible]`) const advance = () => { const before = document.activeElement as HTMLElement | null ;( visible("questionnaire-next") ?? visible("questionnaire-submit") )?.click() requestAnimationFrame(() => { if ( before && before !== document.activeElement && item.contains(before) && activeItem(form) === item && item.hasAttribute("data-invalid") ) { before.focus() } }) } switch (event.key) { case "ArrowDown": case "ArrowUp": { if (target.tagName === "TEXTAREA" || answers.length === 0) { return } take() const step = event.key === "ArrowDown" ? 1 : -1 const next = index === -1 ? step === 1 ? 0 : answers.length - 1 : Math.min(answers.length - 1, Math.max(0, index + step)) answers[next]?.focus() return } case "Home": case "End": { if (typing || answers.length === 0) { return } take() answers[event.key === "Home" ? 0 : answers.length - 1]?.focus() return } case "ArrowLeft": case "ArrowRight": { if (typing) { return } take() const rtl = getComputedStyle(form).direction === "rtl" const forward = (event.key === "ArrowRight") !== rtl if (event.repeat) { return } if (forward) { advance() } else { visible("questionnaire-previous")?.click() } return } case "Enter": { if (target.closest("button, a, textarea")) { return } take() if (event.repeat) { return } const input = target as HTMLInputElement if (input.type === "radio" && !input.checked) { input.click() cancelAdvance() setTimeout(advance, 0) return } advance() return } case "Escape": { if (typing) { take() item.focus() } return } } } return ( { onKeyDownCapture?.(event) handleKeys(event) }} onMouseDown={(event) => { onMouseDown?.(event) const form = formRef.current const item = form ? activeItem(form) : null const target = event.target as HTMLElement if ( !event.defaultPrevented && event.button === 0 && item && !item.contains(target) && !target.closest( "input, textarea, select, button, a, label, [contenteditable=true]" ) ) { event.preventDefault() item.focus({ preventScroll: true }) } }} onKeyDown={(event) => { onKeyDown?.(event) const target = event.target as HTMLElement const typing = target.matches( "input:not([type=radio]):not([type=checkbox]), textarea, select" ) if (!typing && !event.metaKey && !event.ctrlKey && !event.altKey) { shortcutFor(event.key)?.setAttribute("data-pressed", "") } }} onKeyUp={(event) => { onKeyUp?.(event) shortcutFor(event.key)?.removeAttribute("data-pressed") }} onClick={(event) => { onClick?.(event) if ( (event.target as Element).closest( "[data-slot=questionnaire-next], [data-slot=questionnaire-submit]" ) ) { cancelAdvance() shakeIfInvalid() } }} onChange={(event) => { onChange?.(event) cancelAdvance() const input = event.target as unknown as HTMLInputElement const form = formRef.current const item = input.closest(itemSelector) if ( !autoAdvance || !form || input.type !== "radio" || !input.checked || !item || item !== activeItem(form) || answeredOnArrival.current.get(item) ) { return } advanceTimer.current = setTimeout(() => { advanceTimer.current = null if (activeItem(form) !== item || !input.checked) { return } form .querySelector( "[data-slot=questionnaire-next][data-visible]" ) ?.click() }, 350) }} {...props} /> ) } type Segment = { status: string; active: boolean; invalid: boolean } function readSegments(form: HTMLFormElement): Segment[] { return ownItems(form) .filter((item) => !item.hasAttribute("disabled")) .map((item) => ({ status: item.getAttribute("data-status") ?? "unanswered", active: item.hasAttribute("data-active"), invalid: item.hasAttribute("data-invalid"), })) } function useSegments(ref: React.RefObject) { const [segments, setSegments] = React.useState(null) React.useEffect(() => { const form = ref.current?.closest("form") if (!form || typeof MutationObserver === "undefined") { return } let last = "" const read = () => { const next = readSegments(form) const key = JSON.stringify(next) if (key !== last) { last = key setSegments(next) } } read() const observer = new MutationObserver(read) observer.observe(form, { subtree: true, childList: true, attributes: true, attributeFilter: [ "data-status", "data-active", "data-invalid", "disabled", ], }) return () => observer.disconnect() }, [ref]) return segments } type QuestionnaireProgressProps = React.ComponentProps< typeof QuestionnairePrimitive.Progress > & { variant?: "segments" | "bar" } function QuestionnaireProgress({ className, variant = "segments", ref, ...props }: QuestionnaireProgressProps) { const ownRef = React.useRef(null) const segments = useSegments(ownRef) const setRef = React.useCallback( (node: HTMLDivElement | null) => { ownRef.current = node if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) return ( { const list = segments && segments.length === state.total ? segments : Array.from({ length: state.total }, (_, index) => ({ status: index < state.current - 1 ? "answered" : "unanswered", active: index === state.current - 1, invalid: false, })) const done = list.filter((item) => item.status !== "unanswered").length return (

{variant === "segments" ? ( {list.map((segment, index) => ( ))} ) : ( 0 ? done / state.total : 0, } as React.CSSProperties } className="absolute inset-0 origin-left scale-x-(--questionnaire-progress) rounded-full bg-primary transition-[scale] duration-500 ease-out-quint motion-reduce:transition-none rtl:origin-right" /> )} {renderProps.children as React.ReactNode}

) }} {...props} /> ) } function QuestionnaireItem({ className, onAnimationEnd, ...props }: React.ComponentProps) { return ( { onAnimationEnd?.(event) if (event.target === event.currentTarget) { event.currentTarget.removeAttribute("data-shake") } }} {...props} /> ) } function QuestionnaireTitle({ className, ...props }: React.ComponentProps) { return ( ) } function QuestionnaireDescription({ className, ...props }: React.ComponentProps) { return ( ) } function QuestionnaireChoices({ className, ...props }: React.ComponentProps) { return ( ) } function QuestionnaireChoice({ className, children, ...props }: React.ComponentProps) { return ( input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-focus-ring has-[>input:focus-visible]:inset-ring-ring data-invalid:inset-ring-destructive/60 motion-safe:active:scale-[0.99] motion-reduce:transition-none dark:bg-input/20 forced-colors:border data-checked:bg-muted/70 data-checked:inset-ring-foreground/20 dark:data-checked:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)]:hover:bg-muted/50", className )} {...props} > ) } function QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<"span">) { return ( ) } function QuestionnaireInput({ className, ...props }: React.ComponentProps) { return ( ) } function QuestionnaireError({ className, ...props }: React.ComponentProps) { return ( ) } function QuestionnaireActions({ className, ...props }: React.ComponentProps<"div">) { return (

) } type NavigationProps = Pick< VariantProps, "size" | "variant" > const navigationClassName = "pointer-coarse:h-11" function QuestionnairePrevious({ children, className, size = "default", variant = "ghost", ...props }: React.ComponentProps & NavigationProps) { return ( {children ?? "Previous"} ) } function QuestionnaireSkip({ children, className, size = "default", variant = "ghost", ...props }: React.ComponentProps & NavigationProps) { return ( {children ?? "Skip"} ) } function QuestionnaireNext({ children, className, size = "default", variant = "default", ...props }: React.ComponentProps & NavigationProps) { return ( {children ?? "Next"} ) } function QuestionnaireSubmit({ children, className, size = "default", variant = "default", ...props }: React.ComponentProps & NavigationProps) { return ( {children ?? "Submit"} ) } export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, } export type { QuestionnaireProgressProps, QuestionnaireProps, QuestionnaireTransition, } 50:["$","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","@shadcn/react@0.3.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40shadcn%2Freact","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":"@shadcn/react@0.3.1"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L51",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/button.json","https://hextaui.com/r/input.json","https://hextaui.com/r/kbd.json","https://hextaui.com/r/motion.json","https://hextaui.com/r/number-flow.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/questionnaire.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]