50: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"] 51: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"] 52:T767d,"use client" import * as React from "react" import { CheckIcon } from "lucide-react" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" import { buttonVariants, type ButtonColor, type ButtonProps, type ButtonVariant } from "@/components/ui/button" /* * Same parts and props as the shadcn/ui Questionnaire, without @shadcn/react: that * package only declares its entry points through `exports`, which TypeScript's * "moduleResolution": "node" (used by many ikas apps) cannot read. */ type QuestionnaireStatus = "unanswered" | "answered" | "skipped" type QuestionnaireShortcuts = "letters" | "numbers" type QuestionnaireItemDefinition = { name: string required?: boolean disabled?: boolean choices?: readonly { value: string; disabled?: boolean }[] } /** Text input answers share one key in the item's selection. */ const INPUT_ANSWER = "\u0000input" const shortcutKeys = (mode: QuestionnaireShortcuts | undefined) => mode === "letters" ? Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)) : mode === "numbers" ? Array.from({ length: 9 }, (_, i) => String(i + 1)) : [] const isTextField = (el: EventTarget | null) => el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement || (el instanceof HTMLInputElement && !["button", "checkbox", "radio", "reset", "submit"].includes(el.type)) || (el instanceof HTMLElement && el.isContentEditable) type ItemHandle = { name: string element: HTMLFieldSetElement disabled: boolean required: boolean /** Marks the item as attempted; false when it still needs an answer. */ validate: () => boolean focus: () => void focusInvalid: () => void skip: () => void reset: () => void answerByShortcut: (key: string) => HTMLInputElement | null } type RootContextValue = { activeName: string | null activeRequired: boolean activeStatus: QuestionnaireStatus | null current: number total: number first: boolean last: boolean shortcuts: QuestionnaireShortcuts | undefined definitions: Map | null registerItem: (handle: ItemHandle) => () => void reportStatus: (name: string, status: QuestionnaireStatus) => void goNext: () => void goPrevious: () => void skipCurrent: () => void } const RootContext = React.createContext(null) function useRoot(part: string) { const context = React.useContext(RootContext) if (!context) throw new Error(`${part} must be used inside .`) return context } type QuestionnaireProps = Omit, "defaultValue"> & { /** Item order and settings. Without it, rendered items are used in DOM order. */ items?: readonly QuestionnaireItemDefinition[] /** Item shown first when uncontrolled. */ defaultItem?: string /** Active item name, for controlled navigation. */ item?: string /** Called with the name of the item that becomes active. */ onItemChange?: (item: string) => void /** Letter or number keys that pick a choice in the active item. */ shortcuts?: QuestionnaireShortcuts } /** * Multi-step form, one question at a time: single or multiple choice, free text, * skippable items, validation and progress. The host owns closing, saving and branching. * Read the answers in onSubmit with `new FormData(event.currentTarget)`. */ function Questionnaire({ className, items, defaultItem, item, onItemChange, shortcuts, onSubmit, onReset, onKeyDown, children, ...props }: QuestionnaireProps) { const [handles, setHandles] = React.useState>(() => new Map()) const [statuses, setStatuses] = React.useState>({}) const [internal, setInternal] = React.useState(defaultItem ?? null) const pendingFocus = React.useRef<{ name: string; invalid: boolean } | null>(null) const definitions = React.useMemo(() => (items ? new Map(items.map((d) => [d.name, d])) : null), [items]) const order = React.useMemo(() => { // With `items` the order is known before any item mounts, so the server render // already shows the first question. if (items) return items.filter((d) => !d.disabled && !handles.get(d.name)?.disabled).map((d) => d.name) return [...handles.values()] .filter((h) => !h.disabled) .sort((a, b) => (a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1)) .map((h) => h.name) }, [items, handles]) const requested = item !== undefined ? item : internal const activeName = requested && order.includes(requested) ? requested : (order[0] ?? null) const index = activeName ? order.indexOf(activeName) : -1 const total = order.length const active = activeName ? handles.get(activeName) : undefined const go = React.useCallback( (name: string, invalid = false) => { pendingFocus.current = { name, invalid } if (item === undefined) setInternal(name) onItemChange?.(name) // Same item (e.g. failed validation) does not re-render; focus right away. if (name === activeName) { const handle = handles.get(name) if (invalid) handle?.focusInvalid() else handle?.focus() pendingFocus.current = null } }, [item, onItemChange, activeName, handles] ) React.useLayoutEffect(() => { const pending = pendingFocus.current if (!pending || pending.name !== activeName) return const handle = handles.get(pending.name) if (pending.invalid) handle?.focusInvalid() else handle?.focus() pendingFocus.current = null }, [activeName, handles]) const formRef = React.useRef(null) const goNext = React.useCallback(() => { if (!active || index < 0) return if (!active.validate()) return go(active.name, true) if (index === total - 1) formRef.current?.requestSubmit() else go(order[index + 1]) }, [active, index, total, order, go]) const goPrevious = React.useCallback(() => { if (index > 0) go(order[index - 1]) }, [index, order, go]) const skipCurrent = React.useCallback(() => { if (!active || active.required) return active.skip() if (index === total - 1) queueMicrotask(() => formRef.current?.requestSubmit()) else go(order[index + 1]) }, [active, index, total, order, go]) const registerItem = React.useCallback((handle: ItemHandle) => { setHandles((map) => new Map(map).set(handle.name, handle)) return () => setHandles((map) => { if (map.get(handle.name) !== handle) return map const next = new Map(map) next.delete(handle.name) return next }) }, []) const reportStatus = React.useCallback((name: string, status: QuestionnaireStatus) => { setStatuses((s) => (s[name] === status ? s : { ...s, [name]: status })) }, []) const handleSubmit: NonNullable["onSubmit"]> = (event) => { const invalid = order.map((name) => handles.get(name)).find((h) => h && !h.validate()) if (invalid) { event.preventDefault() go(invalid.name, true) return } onSubmit?.(event) } function handleReset(event: React.FormEvent) { onReset?.(event) if (event.defaultPrevented) return for (const handle of handles.values()) handle.reset() const start = defaultItem && order.includes(defaultItem) ? defaultItem : order[0] if (start) go(start) } function handleKeyDown(event: React.KeyboardEvent) { onKeyDown?.(event) if (event.defaultPrevented || event.nativeEvent.isComposing || !active) return const target = event.target if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) { event.preventDefault() if (!event.repeat) goNext() return } if (event.metaKey || event.ctrlKey || event.altKey) return const inAnswer = target instanceof HTMLInputElement && active.element.contains(target) if (event.key === "Enter" && inAnswer) { event.preventDefault() if (!event.repeat) goNext() return } if ((event.key === "ArrowUp" || event.key === "ArrowDown") && inAnswer && target.type === "checkbox") { const answers = [...active.element.querySelectorAll("input:not(:disabled)")] const next = answers[(answers.indexOf(target) + (event.key === "ArrowDown" ? 1 : -1) + answers.length) % answers.length] event.preventDefault() next?.focus() return } const radio = target instanceof HTMLInputElement && target.type === "radio" if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && !isTextField(target) && !radio) { event.preventDefault() if (event.repeat) return if (event.key === "ArrowLeft") goPrevious() else if (statuses[active.name] !== "unanswered") goNext() return } if (!shortcuts || isTextField(target)) return const answer = active.answerByShortcut(shortcuts === "letters" ? event.key.toUpperCase() : event.key) if (answer) { event.preventDefault() answer.focus() answer.click() } } const context: RootContextValue = { activeName, activeRequired: active?.required ?? false, activeStatus: activeName ? (statuses[activeName] ?? "unanswered") : null, current: index + 1, total, first: index === 0, last: total > 0 && index === total - 1, shortcuts, definitions, registerItem, reportStatus, goNext, goPrevious, skipCurrent, } return ( ) } type QuestionnaireProgressProps = Omit, "children"> & { /** Text beside the bar. Receives the 1-based current step and the total. */ label?: (current: number, total: number) => React.ReactNode } /** Step counter with a thin bar that fills as the questionnaire advances. */ function QuestionnaireProgress({ className, label = (current, total) => `Soru ${current} / ${total}`, ...props }: QuestionnaireProgressProps) { const { current, total } = useRoot("QuestionnaireProgress") return (

{total ? label(current, total) : null}

) } type ItemContextValue = { name: string multiple: boolean disabled: boolean invalid: boolean skipped: boolean selected: string[] select: (key: string, on: boolean) => void addDefault: (key: string) => void registerChoice: (value: string, element: HTMLElement) => () => void shortcutFor: (value: string) => string | null registerDescription: (id: string) => () => void errorId: string } const ItemContext = React.createContext(null) function useItem(part: string) { const context = React.useContext(ItemContext) if (!context) throw new Error(`${part} must be used inside .`) return context } type QuestionnaireItemProps = Omit, "name"> & { /** Field name of the answers in FormData. Unique per questionnaire. */ name: string /** Blocks Next until answered and hides Skip. */ required?: boolean /** Checkboxes instead of radios. */ multiple?: boolean /** Forces the error state, e.g. from your own schema validation. */ invalid?: boolean /** Called when the item becomes unanswered, answered or skipped. */ onStatusChange?: (status: QuestionnaireStatus) => void } /** One question. Renders a fieldset; only the active one is visible. */ function QuestionnaireItem({ className, name, required = false, multiple = false, disabled = false, invalid: invalidProp = false, onStatusChange, children, "aria-describedby": ariaDescribedBy, ...props }: QuestionnaireItemProps) { const root = useRoot("QuestionnaireItem") const ref = React.useRef(null) const defaults = React.useRef([]) const [selected, setSelected] = React.useState([]) const [skipped, setSkipped] = React.useState(false) const [attempted, setAttempted] = React.useState(false) const [choices, setChoices] = React.useState<{ value: string; element: HTMLElement }[]>([]) const [descriptions, setDescriptions] = React.useState([]) const errorId = React.useId() const answered = selected.length > 0 const status: QuestionnaireStatus = skipped ? "skipped" : answered ? "answered" : "unanswered" const invalid = !disabled && (invalidProp || (attempted && !answered && !skipped)) const active = root.activeName === name && !disabled const select = React.useCallback( (key: string, on: boolean) => { setSkipped(false) setSelected((current) => { if (!on) return current.filter((k) => k !== key) if (!multiple) return [key] return current.includes(key) ? current : [...current, key] }) }, [multiple] ) const addDefault = React.useCallback( (key: string) => { if (defaults.current.includes(key)) return defaults.current = multiple ? [...defaults.current, key] : [key] setSelected((current) => (multiple ? (current.includes(key) ? current : [...current, key]) : current.length ? current : [key])) }, [multiple] ) const registerChoice = React.useCallback((value: string, element: HTMLElement) => { const entry = { value, element } setChoices((list) => [...list.filter((c) => c.value !== value), entry].sort((a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1 ) ) return () => setChoices((list) => list.filter((c) => c !== entry)) }, []) const registerDescription = React.useCallback((id: string) => { setDescriptions((ids) => [...ids, id]) return () => setDescriptions((ids) => ids.filter((i) => i !== id)) }, []) const shortcuts = React.useMemo(() => { const keys = shortcutKeys(root.shortcuts) const definition = root.definitions?.get(name) const values = definition?.choices ? definition.choices.filter((c) => !c.disabled).map((c) => c.value) : choices.filter((c) => !c.element.hasAttribute("data-disabled")).map((c) => c.value) return new Map(values.slice(0, keys.length).map((value, i) => [value, keys[i]])) }, [root.shortcuts, root.definitions, name, choices]) const { registerItem, reportStatus } = root React.useLayoutEffect(() => { const element = ref.current if (!element) return const inputs = () => [...element.querySelectorAll("input:not(:disabled), textarea:not(:disabled)")] return registerItem({ name, element, disabled, required, validate: () => { setAttempted(true) return !invalidProp && (answered || skipped) }, focus: () => element.focus(), focusInvalid: () => (inputs().find((i) => i.checked) ?? inputs()[0] ?? element).focus(), skip: () => { setSelected([]) setSkipped(true) setAttempted(false) }, reset: () => { setSelected(defaults.current) setSkipped(false) setAttempted(false) }, answerByShortcut: (key) => { const value = [...shortcuts.entries()].find(([, k]) => k === key)?.[0] const choice = choices.find((c) => c.value === value) return choice?.element.querySelector("input:not(:disabled)") ?? null }, }) }, [registerItem, name, disabled, required, shortcuts, choices, answered, skipped, invalidProp]) const lastStatus = React.useRef(status) React.useEffect(() => { reportStatus(name, status) if (lastStatus.current === status) return lastStatus.current = status onStatusChange?.(status) }, [reportStatus, name, status, onStatusChange]) const describedBy = [...descriptions, invalid ? errorId : null, ariaDescribedBy].filter(Boolean).join(" ") || undefined const context: ItemContextValue = { name, multiple, disabled, invalid, skipped, selected, select, addDefault, registerChoice, shortcutFor: (value) => shortcuts.get(value) ?? null, registerDescription, errorId, } return ( ) } type QuestionnaireTitleProps = React.ComponentProps<"legend"> & { /** Render the child element instead of a legend, Radix style. */ asChild?: boolean } function QuestionnaireTitle({ className, asChild = false, ...props }: QuestionnaireTitleProps) { useItem("QuestionnaireTitle") const Comp = asChild ? Slot.Root : "legend" return ( ) } function QuestionnaireDescription({ className, id: idProp, ...props }: React.ComponentProps<"p">) { const { registerDescription } = useItem("QuestionnaireDescription") const fallback = React.useId() const id = idProp ?? fallback React.useLayoutEffect(() => registerDescription(id), [registerDescription, id]) return (

) } function QuestionnaireChoices({ className, ...props }: React.ComponentProps<"div">) { const { shortcuts } = useRoot("QuestionnaireChoices") return (

) } type QuestionnaireChoiceProps = Omit, "onChange"> & { /** Submitted value of this answer. */ value: string /** Selected when the questionnaire starts or resets. */ defaultChecked?: boolean disabled?: boolean /** Change event of the native radio or checkbox. */ onChange?: React.ChangeEventHandler } /** One fixed answer: a raised card with a native radio or checkbox inside. */ function QuestionnaireChoice({ children, className, value, defaultChecked = false, disabled: disabledProp = false, onChange, ...props }: QuestionnaireChoiceProps) { const item = useItem("QuestionnaireChoice") const ref = React.useRef(null) const checked = item.selected.includes(value) const disabled = item.disabled || disabledProp const type = item.multiple ? "checkbox" : "radio" const shortcut = item.shortcutFor(value) const { registerChoice, addDefault } = item React.useLayoutEffect(() => (ref.current ? registerChoice(value, ref.current) : undefined), [registerChoice, value]) React.useLayoutEffect(() => { if (defaultChecked) addDefault(value) }, [addDefault, defaultChecked, value]) return ( input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/30", "data-checked:bg-primary-subtle data-checked:shadow-[inset_0_0_0_1.5px_var(--primary)] data-invalid:shadow-[inset_0_0_0_1px_var(--destructive)]", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", className )} {...props} > { onChange?.(event) if (!event.defaultPrevented) item.select(value, event.target.checked) }} className="absolute inset-0 z-10 size-full cursor-pointer opacity-0" /> ) } function QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<"span">) { return ( ) } /** Free text answer, styled like Input. Give it a label or aria-label. */ function QuestionnaireInput({ className, onChange, defaultValue, ...props }: React.ComponentProps<"input">) { const item = useItem("QuestionnaireInput") const filled = item.selected.includes(INPUT_ANSWER) const { addDefault } = item React.useLayoutEffect(() => { if (String(defaultValue ?? "").trim()) addDefault(INPUT_ANSWER) }, [addDefault, defaultValue]) return ( { onChange?.(event) if (!event.defaultPrevented) item.select(INPUT_ANSWER, event.target.value.trim().length > 0) }} className={cn( "h-9 w-full min-w-0 rounded-lg border border-input bg-card px-3 py-1 text-base shadow-inset transition-[border-color,box-shadow] outline-none placeholder:text-muted-foreground hover:border-border-strong focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30", className )} {...props} /> ) } /** Error of the active item, shown after Next is pressed without an answer. */ function QuestionnaireError({ className, children = "Devam etmek için bir yanıt seçin.", ...props }: React.ComponentProps<"p">) { const item = useItem("QuestionnaireError") return ( ) } /** Row for the navigation buttons: Back on the left, Skip and Next or Submit on the right. */ function QuestionnaireActions({ className, ...props }: React.ComponentProps<"div">) { return (

) } type QuestionnaireButtonProps = React.ComponentProps<"button"> & { size?: ButtonProps["size"] /** Button variant. Next and Submit are solid, Skip outline, Back ghost. */ variant?: ButtonVariant color?: ButtonColor /** Render the child element instead of a button, Radix style. */ asChild?: boolean } function NavButton({ slot, visible, column, className, size = "default", variant, color, asChild = false, disabled, type = "button", tabIndex, ...props }: QuestionnaireButtonProps & { slot: string; visible: boolean; column: string }) { const Comp = asChild ? Slot.Root : "button" return ( ) } function QuestionnairePrevious({ children = "Geri", variant = "ghost", onClick, ...props }: QuestionnaireButtonProps) { const root = useRoot("QuestionnairePrevious") return ( 1 && !root.first} column="col-start-1 row-start-1 justify-self-start" variant={variant} onClick={(event) => { onClick?.(event) if (!event.defaultPrevented) root.goPrevious() }} {...props} > {children} ) } function QuestionnaireSkip({ children = "Atla", variant = "outline", onClick, ...props }: QuestionnaireButtonProps) { const root = useRoot("QuestionnaireSkip") return ( { onClick?.(event) if (!event.defaultPrevented) root.skipCurrent() }} {...props} > {children} ) } function QuestionnaireNext({ children = "İleri", variant = "solid", onClick, ...props }: QuestionnaireButtonProps) { const root = useRoot("QuestionnaireNext") return ( 1 && !root.last} column="col-start-3 row-start-1 justify-self-end" variant={variant} aria-keyshortcuts="Enter" onClick={(event) => { onClick?.(event) if (!event.defaultPrevented) root.goNext() }} {...props} > {children} ) } function QuestionnaireSubmit({ children = "Gönder", variant = "solid", ...props }: QuestionnaireButtonProps) { const root = useRoot("QuestionnaireSubmit") return ( {children} ) } export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, type QuestionnaireButtonProps, type QuestionnaireChoiceProps, type QuestionnaireItemDefinition, type QuestionnaireItemProps, type QuestionnaireProgressProps, type QuestionnaireProps, type QuestionnaireStatus, type QuestionnaireTitleProps, } 4f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}]]}],["$","$L50",null,{"namespace":"@ikas","registryDependencies":["@ikas/button","@ikas/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/questionnaire.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]