4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T2608,"use client"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { SelectorGlyph, selectorStyle, type SelectorShape, type SelectorTone, type SelectorSize, type SelectorIndicator, } from "@/lib/cojeev/selector"; export type { SelectorShape, SelectorTone, SelectorSize, SelectorIndicator, } from "@/lib/cojeev/selector"; import * as React from "react"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Label, type LabelProps } from "@/components/ui/label"; import { Progress } from "@/components/ui/progress"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; import { controlRadiusStyle, type ControlRadius, } from "@/lib/cojeev/control-appearance"; export const questionnaireVariants = cva("v-quest grid gap-[28px]"); export type QuestionnaireProps = React.ComponentProps<"div"> & { presentation?: "stacked" | "journey" | "worksheet"; radius?: ControlRadius; }; export function Questionnaire({ className, presentation, radius, style, ...props }: QuestionnaireProps) { return (

); } export type QuestionnaireProgressProps = React.ComponentProps<"div"> & { value: number; total: number; label?: string; }; export function QuestionnaireProgress({ value, total, className, children, label = "Questions answered", ...props }: QuestionnaireProgressProps) { const maximum = Math.max(0, Number.isFinite(total) ? total : 0); const current = Math.max( 0, Math.min(maximum, Number.isFinite(value) ? value : 0), ); return (

{children ?? ( <> {current} of {maximum} 0 ? (current / maximum) * 100 : 0} /> )}

); } export type QuestionnaireQuestionProps = React.ComponentProps<"fieldset">; export function QuestionnaireQuestion({ className, ...props }: QuestionnaireQuestionProps) { return (

); } export type QuestionnaireLabelProps = LabelProps; export function QuestionnaireLabel({ className, ...props }: QuestionnaireLabelProps) { return ( ); } type ChoiceContext = { name: string; selectorShape: SelectorShape; selectorTone: SelectorTone; selectorSize: SelectorSize; selectorIndicator: SelectorIndicator; showSelectorIndicator: boolean; value?: string; change: (value: string) => void; }; const ChoiceContext = React.createContext(null); export type QuestionnaireOptionsProps = Omit< React.ComponentProps<"div">, "defaultValue" > & { name?: string; selectorShape?: SelectorShape; selectorTone?: SelectorTone; selectorSize?: SelectorSize; selectorIndicator?: SelectorIndicator; showSelectorIndicator?: boolean; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; }; export function QuestionnaireOptions({ ref, className, name, selectorShape = "organic", selectorTone = "pink", selectorSize = "default", selectorIndicator = "auto", showSelectorIndicator = true, value, defaultValue, onValueChange, children, ...props }: QuestionnaireOptionsProps) { const id = React.useId(); const [local, setLocal] = React.useState(defaultValue); const group = React.useRef(null); const flowRef = useFlowGroup(ref); const attach = React.useCallback( (node: HTMLDivElement | null) => { group.current = node; const release = flowRef(node); return () => { group.current = null; if (typeof release === "function") release(); }; }, [flowRef], ); React.useEffect(() => { const node = group.current, form = node?.querySelector("input")?.form; if (!node || !form) return; let pending: ReturnType | undefined; const reset = (event: Event) => { clearTimeout(pending); pending = setTimeout(() => { if (event.defaultPrevented) return; const next = value === undefined ? defaultValue : value; if (value === undefined) setLocal(defaultValue); // The browser resets native checked properties even if React's props // did not change. Restore only this group's owned radios after dispatch. for (const input of node.querySelectorAll( '[data-slot="questionnaire-option-input"]', )) input.checked = input.value === next; }, 0); }; form.addEventListener("reset", reset); return () => { form.removeEventListener("reset", reset); clearTimeout(pending); }; }, [value, defaultValue]); return ( { if (value === undefined) setLocal(next); onValueChange?.(next); }, }} >

{children}

); } export type QuestionnaireOptionProps = React.ComponentProps<"label"> & { value: string; disabled?: boolean; selectorShape?: SelectorShape; selectorTone?: SelectorTone; selectorSize?: SelectorSize; selectorIndicator?: SelectorIndicator; showSelectorIndicator?: boolean; inputProps?: Omit, "value" | "type">; }; export function QuestionnaireOption({ ref: externalMorphRef, value, disabled, selectorShape, selectorTone, selectorSize, selectorIndicator, showSelectorIndicator, style, inputProps, className, children, ...props }: QuestionnaireOptionProps) { const context = React.useContext(ChoiceContext); if (!context) throw new Error("QuestionnaireOption must be inside QuestionnaireOptions"); const ownedMorphRef = useMorph("cards", externalMorphRef); const shape = selectorShape ?? context.selectorShape; const tone = selectorTone ?? context.selectorTone; return ( { inputProps?.onChange?.(event); if (!event.defaultPrevented && event.target.checked) context.change(value); }} /> {children} ); } export type QuestionnaireOptionBodyProps = React.ComponentProps<"span">; export function QuestionnaireOptionBody({ className, ...props }: QuestionnaireOptionBodyProps) { return ( ); } export type QuestionnaireWeekdaysProps = React.ComponentProps<"div">; export function QuestionnaireWeekdays({ ref, className, ...props }: QuestionnaireWeekdaysProps) { const flowRef = useFlowGroup(ref); return (

); } export type QuestionnaireWeekdayProps = React.ComponentProps<"label">; export function QuestionnaireWeekday({ className, ...props }: QuestionnaireWeekdayProps) { return ( ); } 52:T1ea2,"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { shapeContour, signatureShapePaths } from "@/lib/cojeev/signature-shapes"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; export type SelectorShape = "organic" | "rounded" | "circle" | "pebble" | "leaf" | "flower"; export type SelectorTone = "pink" | "blue" | "olive" | "yellow"; /** Numeric sizes are clamped to 16–64px; the containing control keeps its hit area. */ export type SelectorSize = "sm" | "default" | "lg" | number; export type SelectorIndicator = "auto" | "dot" | "check" | "diamond" | "flower"; export function selectorSize(size: SelectorSize = "default") { return typeof size === "number" ? Math.min(64, Math.max(16, Number.isFinite(size) ? size : 28)) : ({ sm: 20, default: 28, lg: 36 }[size] ?? 28); } export const selectorShapes: SelectorShape[] = [ "organic", "pebble", "rounded", "circle", "leaf", "flower", ]; export const selectorTones: SelectorTone[] = [ "pink", "blue", "olive", "yellow", ]; const contour = (radius: (angle: number) => number) => shapeContour((angle) => [ 50 + radius(angle) * Math.cos(angle), 50 + radius(angle) * Math.sin(angle), ]); const paths: Record = { organic: contour((t) => 41 + 1.1 * Math.cos(3 * t + 0.6)), rounded: contour( (t) => 40 / Math.pow(Math.abs(Math.cos(t)) ** 5 + Math.abs(Math.sin(t)) ** 5, 1 / 5), ), circle: contour(() => 41), pebble: signatureShapePaths["pebble-soft"], leaf: shapeContour((t) => { const x = 38 * Math.cos(t), y = 30 * Math.sin(t) * (1 + 0.22 * Math.cos(t)); return [50 + (x - y) * 0.707, 50 + (x + y) * 0.707]; }), flower: contour((t) => 37 + 5 * Math.cos(5 * t - Math.PI / 2)), }; export function selectorStyle( tone: SelectorTone, style?: React.CSSProperties, size: SelectorSize = "default", ): React.CSSProperties { return { "--selector-accent": `var(--v-${tone})`, "--selector-size": `${selectorSize(size)}px`, ...style, } as React.CSSProperties; } /** A single silhouette/mark renderer for native and Radix selection semantics. */ export function SelectorGlyph({ shape = "organic", tone = "pink", state, kind = "radio", disabled = false, indicator = "auto", showIndicator = true, }: { shape?: SelectorShape; tone?: SelectorTone; state: boolean | "indeterminate"; kind?: "checkbox" | "radio"; disabled?: boolean; indicator?: SelectorIndicator; showIndicator?: boolean; }) { const { quiet, transition } = useChoreography(); const surface = React.useRef(null); const morphRef = useMorph("controls", surface); React.useEffect(() => { const node = surface.current; const owner = node?.closest('[role="checkbox"], [role="radio"], label'); if (!node || !owner) return; const controller = new AbortController(); for (const type of ["keydown", "keyup"] as const) owner.addEventListener( type, (event) => { const key = (event as KeyboardEvent).key; if (key === " " || key === "Enter") node.dispatchEvent(new KeyboardEvent(type, { key })); }, { signal: controller.signal }, ); for (const type of ["focusin", "focusout"] as const) owner.addEventListener( type, () => node.dispatchEvent(new FocusEvent(type)), { signal: controller.signal }, ); return () => controller.abort(); }, []); const active = state === true || state === "indeterminate"; const mark = indicator === "auto" ? (kind === "checkbox" ? "check" : "dot") : indicator; const strokeWidth = active && !showIndicator ? 2.5 : active ? 1.25 : 1.5; const fill = disabled ? "var(--v-disabled-face)" : active ? `var(--v-${tone})` : "var(--v-canvas)"; const ink = disabled ? "var(--v-disabled-ink)" : "var(--v-on-accent)"; const stroke = disabled ? "var(--v-disabled-edge)" : active ? ink : "var(--v-text-2)"; const mappedShape = { rounded: "squircle", circle: "circle", pebble: "pebble", leaf: "leaf", flower: "flower-5", }; return ( {active && showIndicator && ( {state === "indeterminate" ? ( ) : mark === "check" ? ( ) : mark === "diamond" ? ( ) : mark === "flower" ? ( ) : ( )} )} ); } 53:T2daf,@layer cojeev-states { [data-slot="questionnaire-progress"] b { color: var(--v-text); } [data-slot="questionnaire-progress"] .v-track { flex: 1; min-width: 80px; } [data-slot="questionnaire-option"] { transition: background var(--t-element), box-shadow var(--t-element); } [data-slot="questionnaire-option"]:not(:has(input:checked)) { box-shadow: inset 0 0 0 1px var(--v-border); } [data-slot="questionnaire-option"]:not(:has(input:checked)):hover { background: var(--v-beige-2); box-shadow: inset 0 0 0 1px var(--v-border); } [data-slot="questionnaire-option"]:active { transform: none; } [data-slot="questionnaire-option"] input { order: 3; appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 1.5px solid var(--v-edge); background: var(--v-canvas); display: grid; place-items: center; transition: background var(--t-micro), border-color var(--t-micro); } [data-slot="questionnaire-option"] .v-disk[data-slot] { order: 1; width: 36px; height: 36px; } [data-slot="questionnaire-option"] input:checked { background: radial-gradient(circle, var(--ink-fixed) 0 4px, transparent 4.6px), var(--v-pink); border-color: var(--v-pink); border-radius: 46% 54% 50% 50%/50% 46% 54% 50%; animation: v-questionnaire-tick var(--t-max) var(--enter) both; } [data-slot="questionnaire-options"]:not(.v-glide) [data-slot="questionnaire-option"]:has(input:checked) { background: var(--v-pink-soft); color: var(--v-text); box-shadow: none; } [data-slot="questionnaire-option"]:has(input:checked) .v-quest__opt-body small { color: var(--v-text); } [data-slot="questionnaire-option"]:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="questionnaire-option-body"] b { font-weight: 600; font-size: 15px; line-height: 1.3; } [data-slot="questionnaire-option-body"] small { font-size: 13px; color: var(--v-text-2); line-height: 1.4; } [data-slot="questionnaire-option"]:has(input:disabled) { color: var(--v-disabled-ink); cursor: not-allowed; } :root[data-mode="dark"] [data-slot="questionnaire-option"] { background: var(--v-beige); } :root[data-mode="dark"] [data-slot="questionnaire-option"] input { border-color: var(--v-text-2); background: var(--v-beige-2); } :root[data-mode="dark"] [data-slot="questionnaire-option"] input:checked { background: radial-gradient(circle, var(--ink-fixed) 0 4px, transparent 4.6px), var(--v-pink); border-color: var(--v-pink); } @keyframes v-questionnaire-tick { 0% { transform: scale(0.8); border-radius: 54% 46% 50% 50%/46% 50% 50% 54%; } 55% { transform: scale(1.14, 0.94); border-radius: 50% 50% 46% 54%/54% 50% 46% 50%; } 80% { transform: scale(0.98, 1.04); } 100% { transform: scale(1); border-radius: 46% 54% 50% 50%/50% 46% 54% 50%; } } [data-slot="questionnaire-weekday"] { transition: background var(--t-micro), color var(--t-micro); } [data-slot="questionnaire-weekday"] input { position: absolute; opacity: 0; inset: 0; margin: 0; } [data-slot="questionnaire-weekday"]:hover { background: color-mix(in oklab, var(--card) 90%, var(--v-ink)); color: var(--v-text); } [data-slot="questionnaire-weekday"]:has(input:checked) { background: var(--v-pink); color: var(--v-on-accent); } [data-slot="questionnaire-weekday"]:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } @media (max-width: 640px) { [data-slot="questionnaire-weekday"] { flex: 1 1 0; min-width: 0; aspect-ratio: 1; } } :root[data-mode="dark"] [data-slot="questionnaire-weekday"] { background: var(--v-beige); } /* The native input remains the focus/form owner; the same organic selector used by RadioGroup paints its checked state without replacing native behaviour. */ [data-slot="questionnaire-option"] { position: relative; border-radius: 16px; grid-template-columns: 36px minmax(0, 1fr) var(--selector-size, 28px); } [data-slot="questionnaire-option"] [data-slot="questionnaire-option-input"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; } [data-slot="questionnaire-selector"] { order: 3; display: inline-grid; width: var(--selector-size, 28px); height: var(--selector-size, 28px); } [data-slot="questionnaire-option-body"] { overflow-wrap: anywhere; } [data-slot="questionnaire-option"]:not(:has(.v-disk)) { grid-template-columns: minmax(0, 1fr) var(--selector-size, 28px); } [data-slot="questionnaire-option"]:has(input:disabled) { background: var(--v-disabled-face); } /* The shared Button body engine owns the moving selector contour. The original SVG is the immediate SSR/Off/reduced fallback; the mark stays above either. */ [data-slot="selector-glyph"]:has( [data-slot="selector-surface-host"] > svg.v-morph ) [data-slot="selector-surface"] { opacity: 0; } [data-slot="selector-drawing"] { position: relative; pointer-events: none; } [data-slot="questionnaire-question"] > legend { margin-bottom: 12px; } /* New questionnaire compositions are opt-in; AgentChat keeps the legacy layout. */ .v-questionnaire-example { width: 100%; min-width: 0; max-width: 720px; margin-inline: auto; padding-inline: 8px; box-sizing: border-box; } .v-quest[data-presentation] { gap: 24px; color: var(--v-text); } .v-questionnaire-example__intro { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; } .v-questionnaire-example__intro p { margin: 0 0 5px; color: var(--v-text-2); font-size: 12px; } .v-questionnaire-example__intro h3 { font: 500 clamp(22px, 3vw, 28px) / 1.2 var(--font-display); margin: 0; } .v-questionnaire-example__tab { display: grid; place-items: center; width: 48px; height: 56px; background: var(--v-yellow); color: var(--v-on-accent); border-radius: 8px 8px 22px 8px; } .v-quest[data-presentation] .v-quest__progress { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; font-size: 12px; } .v-quest[data-presentation] .v-quest__progress > b { font-weight: 500; font-variant-numeric: tabular-nums; } .v-questionnaire-example__questions { display: grid; gap: 24px; min-width: 0; } .v-quest[data-presentation] [data-slot="questionnaire-question"] { --questionnaire-flow-face: color-mix( in oklab, var(--v-pink) 18%, var(--v-canvas) ); --questionnaire-flow-base: transparent; position: relative; min-width: 0; margin: 0; padding: 8px 20px 20px; border: 1px solid var(--v-border); border-radius: min(var(--v-control-radius, 24px), 24px); background: var(--v-canvas); } .v-quest[data-presentation] [data-slot="questionnaire-question"][hidden] { display: none; } .v-quest[data-presentation] [data-slot="questionnaire-question"] > legend { max-width: 100%; padding: 0 8px; margin: 0 0 4px -8px; font: 500 20px/1.4 var(--font-display); color: var(--v-text); } .v-quest[data-presentation] [data-slot="questionnaire-question"] > legend:focus { outline: none; } .v-quest[data-presentation] [data-slot="questionnaire-question"] > legend:focus-visible { outline: 2px solid var(--v-brand); outline-offset: 4px; border-radius: 4px; } .v-questionnaire-example__number { display: inline-grid; place-items: center; vertical-align: middle; width: 36px; height: 42px; border-radius: 8px 8px 14px 8px; background: var(--v-pink); color: var(--v-on-accent); font-size: 16px; font-variant-numeric: tabular-nums; } .v-questionnaire-example__heading { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px; } .v-quest[data-presentation] [data-slot="questionnaire-question"]:nth-child(2) .v-questionnaire-example__number { background: var(--v-blue); } .v-quest[data-presentation] [data-slot="questionnaire-question"]:nth-child(2) { --questionnaire-flow-face: color-mix( in oklab, var(--v-blue) 18%, var(--v-canvas) ); } .v-questionnaire-example__hint { margin: 0 0 4px; color: var(--v-text-2); font-size: 13px; line-height: 1.5; } .v-quest[data-presentation] .v-quest__opts { gap: 8px; } .v-quest[data-presentation] [data-slot="questionnaire-option"] { min-height: 76px; padding: 14px 16px; gap: 12px; grid-template-columns: minmax(0, 1fr) var(--selector-size, 28px); border-radius: min(var(--v-control-radius, 16px), 16px); box-shadow: inset 0 0 0 1px var(--v-border); background: transparent; transition: background var(--t-element); } .v-quest[data-presentation] [data-slot="questionnaire-option"]:has(input:checked) { background: color-mix(in oklab, var(--v-pink) 18%, var(--v-canvas)); color: var(--v-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--v-pink) 60%, var(--v-edge)); } .v-quest[data-presentation] [data-slot="questionnaire-question"]:nth-child(2) [data-slot="questionnaire-option"]:has(input:checked) { background: color-mix(in oklab, var(--v-blue) 18%, var(--v-canvas)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--v-blue) 60%, var(--v-edge)); } .v-quest[data-presentation] [data-slot="questionnaire-option"]:has(input:disabled) { background: var(--v-disabled-face); color: var(--v-disabled-ink); } .v-quest[data-presentation] [data-slot="questionnaire-option"]:has(input:disabled) small { color: inherit; } .v-questionnaire-example__footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .v-questionnaire-example__footer .v-btn { min-height: 44px; } .v-questionnaire-example__footer > .v-btn:last-child { margin-inline-start: auto; } .v-questionnaire-example__result { margin: 0; padding-top: 16px; border-top: 1px dashed var(--v-border); font-size: 13px; line-height: 1.6; color: var(--v-text-2); } .v-quest[data-presentation="journey"] .v-questionnaire-example__questions { border-inline-start: 1px solid var(--v-border); padding-inline-start: 20px; } .v-quest[data-presentation="journey"] [data-slot="questionnaire-question"] { padding-top: 16px; } .v-quest[data-presentation="journey"] .v-questionnaire-example__number { width: 44px; height: 48px; border-radius: 50% 40% 48% 35%; } .v-quest[data-presentation="worksheet"] .v-questionnaire-example__questions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; } .v-quest[data-presentation="worksheet"] [data-slot="questionnaire-question"] { padding-inline: 16px; } .v-quest[data-presentation="worksheet"] [data-slot="questionnaire-question"] > legend { font-size: 18px; } .v-quest[data-presentation="worksheet"] [data-slot="questionnaire-option"] { min-height: 120px; padding: 16px 12px; } @media (max-width: 640px) { .v-quest[data-presentation="worksheet"] .v-questionnaire-example__questions { grid-template-columns: 1fr; } .v-quest[data-presentation="worksheet"] [data-slot="questionnaire-option"] { min-height: 88px; } .v-quest[data-presentation] [data-slot="questionnaire-question"] { padding-inline: 12px; } .v-questionnaire-example__number { width: 28px; height: 36px; } .v-quest[data-presentation] [data-slot="questionnaire-question"] > legend { font-size: 18px; } .v-quest[data-presentation="journey"] .v-questionnaire-example__questions { padding-inline-start: 10px; } } @media (prefers-reduced-motion: reduce) { .v-quest[data-presentation] [data-slot="questionnaire-option"] { transition: none; } } } 54:T1d96,@layer cojeev-states { /* One inherited corner contract, with a readable cap for multiline/native fields. */ :is(.v-input,.v-igroup,.v-select,.v-native,.v-number-input,.v-btn) { border-radius: var(--v-control-radius, var(--r-pill)); } :is(.v-textarea,.v-composer,.v-native,.v-multi-select__trigger) { border-radius: min(var(--v-control-radius, 20px), 20px); } .v-btn[data-control-shape="card"] { border-radius: 12px; } .v-btn[data-control-shape="pill"] { border-radius: var(--r-pill); } /* A Field can own the treatment for its immediate shell; explicit child paint wins. */ :root .v-native[data-appearance] { padding-inline-end:40px; } :root .v-native[data-appearance][size]:not([size="1"]) { padding-inline:8px; } [data-slot="field"][data-appearance="contour"] { --v-field-face: var(--v-canvas); } :root [data-appearance="contour"]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger), :root [data-slot="field"][data-appearance="contour"] :is(.v-input,.v-igroup,.v-textarea):not([data-appearance]) { background-color: var(--v-canvas); color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-edge); } :root [data-appearance="editorial"]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger), :root [data-slot="field"][data-appearance="editorial"] :is(.v-input,.v-igroup,.v-textarea):not([data-appearance]) { border-radius: 0; background-color: transparent; color: var(--v-text); box-shadow: inset 0 -1px 0 var(--v-edge); padding-inline: 2px; } :root [data-slot="field"][data-appearance="inset"] { padding: 14px 16px; border-radius: min(var(--v-control-radius, 20px), 20px); background: var(--v-beige); color: var(--v-text); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--v-text) 9%, transparent); gap: 6px; } :root [data-appearance="inset"]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger) { background-color: var(--v-beige); color: var(--v-text); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--v-text) 12%, transparent); } :root [data-slot="field"][data-appearance="inset"] :is(.v-input,.v-igroup,.v-textarea):not([data-appearance]) { background: transparent; box-shadow: none; padding-inline: 0; } :root [data-slot="field"][data-appearance="inset"] [data-slot="field-label"] { color: var(--v-text-2); } :root [data-slot="field"][data-appearance="inset"]:focus-within { outline: 2px solid var(--v-brand); outline-offset: 2px; } :root [data-appearance]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger):focus-within, :root [data-slot="field"][data-appearance] :is(.v-input,.v-igroup,.v-textarea):focus-within { outline: 2px solid var(--v-brand); outline-offset: 3px; } :root [data-slot="field"][data-appearance="inset"] :is(.v-input,.v-igroup,.v-textarea):focus-within { outline: none; } :root [data-appearance]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger):is(:disabled,[data-disabled="true"],:has(input:disabled)), :root [data-slot="field"][data-appearance] :is(.v-input,.v-igroup,.v-textarea):is(:disabled,:has(input:disabled)) { background: var(--v-disabled-face); color: var(--v-disabled-ink); box-shadow: inset 0 0 0 1px var(--v-disabled-edge); cursor: not-allowed; } :root [data-slot="field"][data-appearance][data-state="error"], :root [data-appearance]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger):is([aria-invalid="true"],[data-invalid="true"],:has([aria-invalid="true"])) { outline: 2px solid var(--v-danger-fill); outline-offset: 3px; } :root [data-slot="field"][data-appearance][data-state="error"] [role="alert"] { color: var(--v-danger-ink); } .v-form-example { display: grid; gap: 20px; width: 100%; min-width: 0; max-width: 480px; margin-inline: auto; } .v-form-example__intro { display: grid; gap: 5px; } .v-form-example__intro strong { font-family: var(--font-display, inherit); font-size: 22px; font-weight: 500; } .v-form-example__intro p { margin: 0; color: var(--v-text-2); font-size: 13px; line-height: 1.5; } .v-form-example__status { min-height: 1.5em; margin: 0; font-size: 12px; color: var(--v-text-2); overflow-wrap: anywhere; } .v-form-example__footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; } /* Composer owns one surface, while the actual textarea keeps native editing. */ :root .v-composer[data-appearance] { border-radius:min(var(--v-control-radius,20px),20px); background:var(--v-canvas); color:var(--v-text); box-shadow:inset 0 0 0 1px var(--v-edge); } :root .v-composer[data-appearance="inset"] { background:var(--v-beige); box-shadow:inset 0 1px 2px color-mix(in oklab,var(--v-text) 12%,transparent); } :root .v-composer[data-appearance="editorial"] { border-radius:0; background:transparent; box-shadow:inset 0 -1px 0 var(--v-edge); } :root .v-composer[data-appearance] .v-textarea:is(:focus,:hover,:not(:focus)) { background:transparent; box-shadow:none; outline:0; border-radius:0; resize:vertical; } :root .v-composer[data-appearance] .v-textarea-scroll > textarea { padding-inline-end:30px; } :root [data-slot="field"][data-appearance] [data-slot="input-group"] .v-textarea { background:transparent; box-shadow:none; outline:0; border:0; border-radius:0; } :root .v-composer[data-appearance]:focus-within { outline:2px solid var(--v-brand); outline-offset:3px; } :root [data-slot="field"][data-appearance="inset"] .v-composer[data-appearance] { background:transparent; box-shadow:none; outline:0; } .v-form-example[data-form-example="field"] { max-width:600px; } .v-form-example [data-slot="field-label"] { font-size:14px; line-height:1.5; } .v-form-example [data-slot="field-description"] { font-size:13px; margin:0; } .v-form-example__footer > .v-btn, .v-form-example [data-slot="textarea-composer-bar"] > .v-btn { min-height:44px; } .v-form-example [data-slot="textarea-composer-bar"] { justify-content:space-between; flex-wrap:wrap; gap:12px; padding:10px 12px; border-top:1px solid var(--v-border); } .v-form-example__allowance { height:4px; border-radius:4px; overflow:hidden; background:var(--v-beige); margin-top:-8px; } .v-form-example__allowance > span { display:block; height:100%; max-width:100%; border-radius:inherit; background:var(--v-blue-deep); } .v-form-example__label-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; justify-content:space-between; } .v-form-example__label-row > span { font-size:12px; color:var(--v-text-2); } .v-form-example__hint { margin:0; color:var(--v-text-2); font-size:13px; line-height:1.5; } /* Editorial draws only the focus edge: no moving caret, label or hit area. */ :root [data-appearance="editorial"]:is(.v-input,.v-igroup,.v-textarea,.v-composer), :root [data-slot="field"][data-appearance="editorial"] :is(.v-input,.v-igroup,.v-textarea):not([data-appearance]) { background-image:linear-gradient(var(--v-brand),var(--v-brand)); background-repeat:no-repeat; background-position:left bottom; background-size:0% 2px; transition:background-size var(--t-micro) var(--enter); } :root [data-appearance="editorial"]:is(.v-input,.v-igroup,.v-textarea,.v-composer):focus-within, :root [data-slot="field"][data-appearance="editorial"] :is(.v-input,.v-igroup,.v-textarea):focus-within { background-size:100% 2px; outline:0; } @media(prefers-reduced-motion:reduce) { :root [data-slot="field"] :is(.v-input,.v-igroup,.v-textarea,.v-composer) { transition:none; } } } 4c:["$","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","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","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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/label.json","https://000h.cojeev.com/r/progress.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/questionnaire.css\" {\n\n}\n\n@import \"@/styles/cojeev/control-appearance.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/questionnaire.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/lib/selector.tsx","content":"$52","type":"registry:lib","target":"lib/cojeev/selector.tsx"},{"path":"registry/cojeev/styles/questionnaire.css","content":"$53","type":"registry:file","target":"styles/cojeev/questionnaire.css"},{"path":"registry/cojeev/styles/control-appearance.css","content":"$54","type":"registry:file","target":"styles/cojeev/control-appearance.css"}],"className":"h-[70svh] min-h-80"}]]}]