@quizparts/react 0.0.1

package/dist/components/Choice.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface ChoiceProps {
+    /** Id of the choice (must match question.choices[].id). */
+    choiceId: string;
+    /** When true, renders ChoiceIndicator before the label (default false). */
+    showIndicator?: boolean;
+    children?: ReactNode;
+}
+/** Renders one multiple_choice or multi_select option. Use inside Choices; toggles/selects on click. */
+export declare const Choice: ({ choiceId, showIndicator, children }: ChoiceProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Choice.d.ts.map

package/dist/components/Choice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choice.d.ts","sourceRoot":"","sources":["../../src/components/Choice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wGAAwG;AACxG,eAAO,MAAM,MAAM,GAAI,uCAA+C,WAAW,mDAwDhF,CAAC"}

package/dist/components/Choice.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+import { ChoiceIndicator } from './ChoiceIndicator.js';
+/** Renders one multiple_choice or multi_select option. Use inside Choices; toggles/selects on click. */
+export const Choice = ({ choiceId, showIndicator = false, children }) => {
+    const { question, selectedChoiceId, selectedChoiceIds, selectChoice, toggleChoice, isSubmitted } = useQuestion();
+    if (!question || (question.type !== 'multiple_choice' && question.type !== 'multi_select'))
+        return null;
+    const choice = 'choices' in question ? question.choices.find((c) => c.id === choiceId) : null;
+    if (!choice)
+        return null;
+    const isMultiSelect = question.type === 'multi_select';
+    const selected = isMultiSelect
+        ? selectedChoiceIds.includes(choiceId)
+        : selectedChoiceId === choiceId;
+    const disabled = isSubmitted;
+    const answerIds = isMultiSelect && 'answer' in question ? question.answer : [];
+    const showCorrect = isSubmitted && (isMultiSelect ? answerIds.includes(choiceId) : question.answer === choiceId);
+    const showIncorrect = isSubmitted && selected && !showCorrect;
+    const handleClick = () => {
+        if (disabled)
+            return;
+        if (isMultiSelect)
+            toggleChoice(choiceId);
+        else
+            selectChoice(choiceId);
+    };
+    const label = children ?? choice.text;
+    const content = showIndicator ? (_jsxs(_Fragment, { children: [_jsx(ChoiceIndicator, { choiceId: choiceId, variant: isMultiSelect ? 'checkbox' : 'radio' }), ' ', label] })) : label;
+    return (_jsx("button", { type: "button", role: "option", "aria-selected": selected, "data-choice": true, "data-choice-id": choiceId, ...(selected && { 'data-selected': true }), ...(isSubmitted && { 'data-submitted': true }), ...(showCorrect && { 'data-correct': true }), ...(showIncorrect && { 'data-incorrect': true }), ...(disabled && { 'data-disabled': true }), disabled: disabled, onClick: handleClick, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleClick();
+            }
+        }, children: content }));
+};

package/dist/components/ChoiceIndicator.d.ts

@@ -0,0 +1,10 @@
+export interface ChoiceIndicatorProps {
+    /** Id of the choice this indicator belongs to (must match Choice choiceId). */
+    choiceId: string;
+    /** 'radio' for single select, 'checkbox' for multi select. */
+    variant?: 'radio' | 'checkbox';
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Visual or semantic marker for choice state (selected, correct, incorrect). Use inside Choice. */
+export declare const ChoiceIndicator: ({ choiceId, variant, as: Component, }: ChoiceIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ChoiceIndicator.d.ts.map

package/dist/components/ChoiceIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ChoiceIndicator.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,oGAAoG;AACpG,eAAO,MAAM,eAAe,GAAI,uCAI7B,oBAAoB,mDAyBtB,CAAC"}

package/dist/components/ChoiceIndicator.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+/** Visual or semantic marker for choice state (selected, correct, incorrect). Use inside Choice. */
+export const ChoiceIndicator = ({ choiceId, variant = 'radio', as: Component = 'span', }) => {
+    const { question, selectedChoiceId, selectedChoiceIds, isSubmitted } = useQuestion();
+    if (!question || (question.type !== 'multiple_choice' && question.type !== 'multi_select'))
+        return null;
+    const choice = 'choices' in question ? question.choices.find((c) => c.id === choiceId) : null;
+    if (!choice)
+        return null;
+    const isMultiSelect = question.type === 'multi_select';
+    const selected = isMultiSelect
+        ? selectedChoiceIds.includes(choiceId)
+        : selectedChoiceId === choiceId;
+    const answerIds = isMultiSelect && 'answer' in question ? question.answer : [];
+    const showCorrect = isSubmitted && (isMultiSelect ? answerIds.includes(choiceId) : question.answer === choiceId);
+    const showIncorrect = isSubmitted && selected && !showCorrect;
+    return (_jsx(Component, { "data-quiz-choice-indicator": true, "data-variant": variant, "aria-hidden": true, ...(selected && { 'data-selected': true }), ...(showCorrect && { 'data-correct': true }), ...(showIncorrect && { 'data-incorrect': true }) }));
+};

package/dist/components/Choices.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface ChoicesProps {
+    children: ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+}
+export declare const Choices: ({ children, as: Component }: ChoicesProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Choices.d.ts.map

package/dist/components/Choices.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choices.d.ts","sourceRoot":"","sources":["../../src/components/Choices.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,eAAO,MAAM,OAAO,GAAI,6BAAqC,YAAY,mDASxE,CAAC"}

package/dist/components/Choices.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+export const Choices = ({ children, as: Component = 'div' }) => {
+    const { question } = useQuestion();
+    if (!question || (question.type !== 'multiple_choice' && question.type !== 'multi_select'))
+        return null;
+    return (_jsx(Component, { "data-quiz-choices": true, role: "listbox", "aria-label": "Choices", children: children }));
+};

package/dist/components/ContinueButton.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface ContinueButtonProps {
+    children?: ReactNode;
+}
+/** Advances to the next question after submit. Same behavior as NextButton; default label "Skip". */
+export declare const ContinueButton: ({ children }: ContinueButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContinueButton.d.ts.map

package/dist/components/ContinueButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContinueButton.d.ts","sourceRoot":"","sources":["../../src/components/ContinueButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qGAAqG;AACrG,eAAO,MAAM,cAAc,GAAI,cAAuB,mBAAmB,4CAaxE,CAAC"}

package/dist/components/ContinueButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuiz } from '../hooks/useQuiz.js';
+/** Advances to the next question after submit. Same behavior as NextButton; default label "Skip". */
+export const ContinueButton = ({ children = 'Skip' }) => {
+    const { canGoNext, goToNextQuestion } = useQuiz();
+    return (_jsx("button", { type: "button", "data-quiz-continue": true, ...(!canGoNext && { 'data-disabled': true }), disabled: !canGoNext, onClick: () => canGoNext && goToNextQuestion(), children: children }));
+};

package/dist/components/DefaultQuestionLayout.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface DefaultQuestionLayoutProps {
+    /** Optional hint below the input (string or node). */
+    hint?: ReactNode;
+    /** Submit button label (default "Answer"). */
+    submitLabel?: ReactNode;
+    /** Skip button label before submit (default "Skip"). */
+    continueLabel?: ReactNode;
+    /** Next button label after submit (default "Next"). Shown in place of Answer + Skip. */
+    nextLabel?: ReactNode;
+    /** Whether choices show the indicator (default true). */
+    showChoiceIndicator?: boolean;
+}
+/** Default question layout: before submit shows Answer + Skip; after submit shows only Next so users get used to that button. */
+export declare const DefaultQuestionLayout: ({ hint, submitLabel, continueLabel, nextLabel, showChoiceIndicator, }: DefaultQuestionLayoutProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DefaultQuestionLayout.d.ts.map

package/dist/components/DefaultQuestionLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultQuestionLayout.d.ts","sourceRoot":"","sources":["../../src/components/DefaultQuestionLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBvC,MAAM,WAAW,0BAA0B;IACzC,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wDAAwD;IACxD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,wFAAwF;IACxF,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,iIAAiI;AACjI,eAAO,MAAM,qBAAqB,GAAI,uEAMnC,0BAA0B,4CA0B5B,CAAC"}

package/dist/components/DefaultQuestionLayout.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+import { QuestionCard } from './QuestionCard.js';
+import { QuestionHeader } from './QuestionHeader.js';
+import { QuestionBody } from './QuestionBody.js';
+import { QuestionFooter } from './QuestionFooter.js';
+import { ProgressBar } from './ProgressBar.js';
+import { QuestionCounter } from './QuestionCounter.js';
+import { Prompt } from './Prompt.js';
+import { QuestionInput } from './QuestionInput.js';
+import { Hint } from './Hint.js';
+import { SubmitButton } from './SubmitButton.js';
+import { ContinueButton } from './ContinueButton.js';
+import { NextButton } from './NextButton.js';
+import { Feedback } from './Feedback.js';
+/** Default question layout: before submit shows Answer + Skip; after submit shows only Next so users get used to that button. */
+export const DefaultQuestionLayout = ({ hint, submitLabel = 'Answer', continueLabel = 'Skip', nextLabel = 'Next', showChoiceIndicator = true, }) => {
+    const { isSubmitted } = useQuestion();
+    return (_jsxs(QuestionCard, { children: [_jsxs(QuestionHeader, { children: [_jsx(ProgressBar, {}), _jsx(QuestionCounter, {})] }), _jsxs(QuestionBody, { children: [_jsx(Prompt, {}), _jsx(QuestionInput, { showChoiceIndicator: showChoiceIndicator }), hint != null && (typeof hint === 'string' ? _jsx(Hint, { hint: hint }) : _jsx(Hint, { children: hint }))] }), _jsxs(QuestionFooter, { children: [!isSubmitted ? (_jsxs(_Fragment, { children: [_jsx(SubmitButton, { children: submitLabel }), _jsx(ContinueButton, { children: continueLabel })] })) : (_jsx(NextButton, { children: nextLabel })), _jsx(Feedback, {})] })] }));
+};

package/dist/components/Feedback.d.ts

@@ -0,0 +1,5 @@
+export interface FeedbackProps {
+    as?: keyof JSX.IntrinsicElements;
+}
+export declare const Feedback: ({ as: Component }: FeedbackProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Feedback.d.ts.map

package/dist/components/Feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feedback.d.ts","sourceRoot":"","sources":["../../src/components/Feedback.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,GAAI,mBAA2B,aAAa,mDAgBhE,CAAC"}

package/dist/components/Feedback.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+export const Feedback = ({ as: Component = 'div' }) => {
+    const { feedback, isSubmitted } = useQuestion();
+    if (!isSubmitted || !feedback)
+        return null;
+    return (_jsxs(Component, { "data-quiz-feedback": true, "data-correct": feedback.isCorrect || undefined, "data-incorrect": !feedback.isCorrect || undefined, role: "status", children: [feedback.isCorrect ? 'Correct!' : 'Incorrect.', feedback.isCorrect && feedback.explanation != null && feedback.explanation !== '' && (_jsx("p", { "data-quiz-explanation": true, children: feedback.explanation }))] }));
+};

package/dist/components/Hint.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface HintProps {
+    /** Hint text. When absent, children can be used. */
+    hint?: string;
+    children?: ReactNode;
+    /** When false, render nothing (for future "show hint" toggles). */
+    visible?: boolean;
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Renders a hint. Use for study practice or scaffolded exercises. */
+export declare const Hint: ({ hint, children, visible, as: Component, }: HintProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Hint.d.ts.map

package/dist/components/Hint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../src/components/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,sEAAsE;AACtE,eAAO,MAAM,IAAI,GAAI,6CAKlB,SAAS,mDAUX,CAAC"}

package/dist/components/Hint.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Renders a hint. Use for study practice or scaffolded exercises. */
+export const Hint = ({ hint, children, visible = true, as: Component = 'div', }) => {
+    if (!visible)
+        return null;
+    const hasHint = hint != null && hint !== '';
+    const hasChildren = children != null;
+    if (!hasHint && !hasChildren)
+        return null;
+    return (_jsx(Component, { "data-quiz-hint": true, children: hasHint ? hint : children }));
+};

package/dist/components/Instruction.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface InstructionProps {
+    /** Instructional copy. When omitted, uses default for current question type (e.g. "Choose one.", "Select all that apply."). */
+    instruction?: string;
+    children?: ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Short instruction separate from the main prompt. Uses default by question type when instruction is not provided. */
+export declare const Instruction: ({ instruction: instructionProp, children, as: Component, }: InstructionProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Instruction.d.ts.map

package/dist/components/Instruction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Instruction.d.ts","sourceRoot":"","sources":["../../src/components/Instruction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,gBAAgB;IAC/B,+HAA+H;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,uHAAuH;AACvH,eAAO,MAAM,WAAW,GAAI,4DAIzB,gBAAgB,mDAelB,CAAC"}

package/dist/components/Instruction.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+import { DEFAULT_INSTRUCTIONS } from '../constants/defaultInstructions.js';
+/** Short instruction separate from the main prompt. Uses default by question type when instruction is not provided. */
+export const Instruction = ({ instruction: instructionProp, children, as: Component = 'p', }) => {
+    const { question } = useQuestion();
+    const instruction = instructionProp != null && instructionProp !== ''
+        ? instructionProp
+        : question && question.type in DEFAULT_INSTRUCTIONS
+            ? DEFAULT_INSTRUCTIONS[question.type]
+            : null;
+    const hasChildren = children != null;
+    if (!instruction && !hasChildren)
+        return null;
+    return (_jsx(Component, { "data-quiz-instruction": true, children: instruction ?? children }));
+};

package/dist/components/MatchPairs.d.ts

@@ -0,0 +1,2 @@
+export declare const MatchPairs: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MatchPairs.d.ts.map

package/dist/components/MatchPairs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatchPairs.d.ts","sourceRoot":"","sources":["../../src/components/MatchPairs.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,sDAiGtB,CAAC"}

package/dist/components/MatchPairs.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useQuestion } from '../hooks/useQuestion.js';
+export const MatchPairs = () => {
+    const { question, matchPairs, setMatchPairs, isSubmitted } = useQuestion();
+    const [selectedLeft, setSelectedLeft] = useState(null);
+    if (!question || question.type !== 'match_pairs')
+        return null;
+    const { pairs } = question;
+    const lefts = pairs.map((p) => p.left);
+    const rights = pairs.map((p) => p.right);
+    const usedLeft = new Set(matchPairs.map(([l]) => l));
+    const usedRight = new Set(matchPairs.map(([, r]) => r));
+    const availableLeft = lefts.filter((l) => !usedLeft.has(l));
+    const availableRight = rights.filter((r) => !usedRight.has(r));
+    const disabled = isSubmitted;
+    const handleLeftClick = (left) => {
+        if (disabled)
+            return;
+        setSelectedLeft((prev) => (prev === left ? null : left));
+    };
+    const handleRightClick = (right) => {
+        if (disabled || !selectedLeft)
+            return;
+        setMatchPairs([...matchPairs, [selectedLeft, right]]);
+        setSelectedLeft(null);
+    };
+    const handleRemovePair = (index) => {
+        if (disabled)
+            return;
+        setMatchPairs(matchPairs.filter((_, i) => i !== index));
+    };
+    return (_jsxs("div", { "data-quiz-match-pairs": true, style: { display: 'flex', flexDirection: 'column', gap: '0.75rem' }, role: "group", "aria-label": "Match pairs", children: [matchPairs.length > 0 && (_jsxs("div", { children: [_jsx("span", { id: "match-pairs-formed", style: { fontSize: '0.875rem', fontWeight: 600 }, children: "Matched:" }), _jsx("ul", { style: { listStyle: 'none', padding: 0, margin: '0.25rem 0 0', display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }, children: matchPairs.map(([l, r], i) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => handleRemovePair(i), disabled: disabled, style: { padding: '0.25rem 0.5rem', fontSize: '0.875rem' }, "data-match-pair": true, children: [l, " \u2192 ", r, " ", !disabled && '✕'] }) }, `${l}-${r}-${i}`))) })] })), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsxs("div", { role: "group", "aria-labelledby": "match-left-label", children: [_jsx("span", { id: "match-left-label", style: { fontSize: '0.875rem', fontWeight: 600 }, children: "Left" }), _jsx("ul", { style: { listStyle: 'none', padding: 0, margin: '0.25rem 0 0', display: 'flex', flexDirection: 'column', gap: '0.25rem' }, role: "list", children: availableLeft.map((left) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => handleLeftClick(left), disabled: disabled, "data-match-left": true, ...(selectedLeft === left && { 'data-selected': '' }), "aria-pressed": selectedLeft === left, style: {
+                                            padding: '0.5rem 0.75rem',
+                                            fontWeight: selectedLeft === left ? 600 : 400,
+                                        }, children: left }) }, left))) })] }), _jsxs("div", { role: "group", "aria-labelledby": "match-right-label", children: [_jsx("span", { id: "match-right-label", style: { fontSize: '0.875rem', fontWeight: 600 }, children: "Right" }), _jsx("ul", { style: { listStyle: 'none', padding: 0, margin: '0.25rem 0 0', display: 'flex', flexDirection: 'column', gap: '0.25rem' }, role: "list", children: availableRight.map((right) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => handleRightClick(right), disabled: disabled, "data-match-right": true, style: { padding: '0.5rem 0.75rem' }, children: right }) }, right))) })] })] })] }));
+};

package/dist/components/NextButton.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface NextButtonProps {
+    children?: ReactNode;
+}
+export declare const NextButton: ({ children }: NextButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NextButton.d.ts.map

package/dist/components/NextButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextButton.d.ts","sourceRoot":"","sources":["../../src/components/NextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,GAAI,cAAuB,eAAe,4CAahE,CAAC"}

package/dist/components/NextButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuiz } from '../hooks/useQuiz.js';
+export const NextButton = ({ children = 'Next' }) => {
+    const { canGoNext, goToNextQuestion } = useQuiz();
+    return (_jsx("button", { type: "button", "data-quiz-next": true, ...(!canGoNext && { 'data-disabled': true }), disabled: !canGoNext, onClick: () => canGoNext && goToNextQuestion(), children: children }));
+};

package/dist/components/OrderList.d.ts

@@ -0,0 +1,2 @@
+export declare const OrderList: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=OrderList.d.ts.map

package/dist/components/OrderList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderList.d.ts","sourceRoot":"","sources":["../../src/components/OrderList.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS,sDAqErB,CAAC"}

package/dist/components/OrderList.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useQuestion } from '../hooks/useQuestion.js';
+const move = (ids, index, direction) => {
+    const next = [...ids];
+    const target = direction === 'up' ? index - 1 : index + 1;
+    if (target < 0 || target >= next.length)
+        return next;
+    [next[index], next[target]] = [next[target], next[index]];
+    return next;
+};
+export const OrderList = () => {
+    const { question, orderedIds, setOrderedIds, isSubmitted } = useQuestion();
+    if (!question || question.type !== 'order_items')
+        return null;
+    const { items } = question;
+    const itemMap = new Map(items.map((i) => [i.id, i]));
+    const ids = orderedIds.length > 0 ? orderedIds : items.map((i) => i.id);
+    const disabled = isSubmitted;
+    useEffect(() => {
+        if (orderedIds.length === 0 && items.length > 0) {
+            setOrderedIds(items.map((i) => i.id));
+        }
+    }, [items, orderedIds.length, setOrderedIds]);
+    const handleMoveUp = (index) => {
+        if (disabled || index <= 0)
+            return;
+        setOrderedIds(move(ids, index, 'up'));
+    };
+    const handleMoveDown = (index) => {
+        if (disabled || index >= ids.length - 1)
+            return;
+        setOrderedIds(move(ids, index, 'down'));
+    };
+    return (_jsx("div", { "data-quiz-order-list": true, style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, role: "group", "aria-label": "Order items", children: _jsx("ul", { style: { listStyle: 'none', padding: 0, margin: 0 }, role: "list", children: ids.map((id, index) => {
+                const item = itemMap.get(id);
+                if (!item)
+                    return null;
+                return (_jsxs("li", { "data-order-item": true, "data-item-id": id, style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '0.5rem',
+                        padding: '0.5rem 0',
+                        borderBottom: '1px solid #eee',
+                    }, children: [_jsx("span", { style: { flex: 1 }, children: item.text }), _jsx("button", { type: "button", onClick: () => handleMoveUp(index), disabled: disabled || index === 0, "aria-label": `Move ${item.text} up`, style: { padding: '0.25rem 0.5rem' }, children: "\u2191" }), _jsx("button", { type: "button", onClick: () => handleMoveDown(index), disabled: disabled || index === ids.length - 1, "aria-label": `Move ${item.text} down`, style: { padding: '0.25rem 0.5rem' }, children: "\u2193" })] }, id));
+            }) }) }));
+};

package/dist/components/Progress.d.ts

@@ -0,0 +1,5 @@
+export interface ProgressProps {
+    as?: keyof JSX.IntrinsicElements;
+}
+export declare const Progress: ({ as: Component }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Progress.d.ts.map

package/dist/components/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,GAAI,mBAA2B,aAAa,4CAkBhE,CAAC"}

package/dist/components/Progress.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useProgress } from '../hooks/useProgress.js';
+export const Progress = ({ as: Component = 'div' }) => {
+    const { current, total, percent, score } = useProgress();
+    return (_jsxs(Component, { "data-quiz-progress": true, role: "progressbar", "aria-valuenow": current, "aria-valuemin": 1, "aria-valuemax": total, "aria-label": `Question ${current} of ${total}`, children: [_jsxs("span", { "data-quiz-progress-text": true, children: [current, " / ", total] }), _jsxs("span", { "data-quiz-progress-percent": true, children: [percent, "%"] }), _jsxs("span", { "data-quiz-progress-score": true, children: ["Score: ", score] })] }));
+};

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+export interface ProgressBarProps {
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Visual progress track and fill. Use progress from useProgress; theme targets data-quiz-progress-bar. */
+export declare const ProgressBar: ({ as: Component }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,2GAA2G;AAC3G,eAAO,MAAM,WAAW,GAAI,mBAA2B,gBAAgB,4CAiBtE,CAAC"}

package/dist/components/ProgressBar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProgress } from '../hooks/useProgress.js';
+/** Visual progress track and fill. Use progress from useProgress; theme targets data-quiz-progress-bar. */
+export const ProgressBar = ({ as: Component = 'div' }) => {
+    const { percent } = useProgress();
+    return (_jsxs(Component, { "data-quiz-progress-bar": true, role: "progressbar", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, children: [_jsx("span", { "data-quiz-progress-bar-track": true }), _jsx("span", { "data-quiz-progress-bar-fill": true, style: { width: `${percent}%` } })] }));
+};

package/dist/components/Prompt.d.ts

@@ -0,0 +1,5 @@
+export interface PromptProps {
+    as?: keyof JSX.IntrinsicElements;
+}
+export declare const Prompt: ({ as: Component }: PromptProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Prompt.d.ts.map

package/dist/components/Prompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../src/components/Prompt.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,eAAO,MAAM,MAAM,GAAI,mBAAyB,WAAW,mDAI1D,CAAC"}

package/dist/components/Prompt.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+export const Prompt = ({ as: Component = 'p' }) => {
+    const { question } = useQuestion();
+    if (!question)
+        return null;
+    return _jsx(Component, { "data-quiz-prompt": true, children: question.prompt });
+};

package/dist/components/Question.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface QuestionProps {
+    children?: ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+}
+export declare const Question: ({ children, as: Component }: QuestionProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Question.d.ts.map

package/dist/components/Question.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Question.d.ts","sourceRoot":"","sources":["../../src/components/Question.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,GAAI,6BAAqC,aAAa,mDAa1E,CAAC"}

package/dist/components/Question.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+export const Question = ({ children, as: Component = 'div' }) => {
+    const { question, status } = useQuestion();
+    if (!question)
+        return null;
+    return (_jsx(Component, { "data-quiz-question": true, "data-question-id": question.id, "data-question-type": question.type, "data-status": status, children: children }));
+};

package/dist/components/QuestionBody.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface QuestionBodyProps {
+    children: ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Middle content area (prompt, instruction, choices, inputs). */
+export declare const QuestionBody: ({ children, as: Component, }: QuestionBodyProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuestionBody.d.ts.map

package/dist/components/QuestionBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionBody.d.ts","sourceRoot":"","sources":["../../src/components/QuestionBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,kEAAkE;AAClE,eAAO,MAAM,YAAY,GAAI,8BAG1B,iBAAiB,4CAEnB,CAAC"}

package/dist/components/QuestionBody.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Middle content area (prompt, instruction, choices, inputs). */
+export const QuestionBody = ({ children, as: Component = 'div', }) => (_jsx(Component, { "data-quiz-question-body": true, children: children }));

package/dist/components/QuestionCard.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface QuestionCardProps {
+    children: ReactNode;
+    /** Root element (default 'div'). Use for semantics or React Native. */
+    as?: keyof JSX.IntrinsicElements;
+    className?: string;
+}
+/** Layout wrapper for the main question surface. Theme targets data-quiz-question-card. */
+export declare const QuestionCard: ({ children, as: Component, className, }: QuestionCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuestionCard.d.ts.map

package/dist/components/QuestionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionCard.d.ts","sourceRoot":"","sources":["../../src/components/QuestionCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,2FAA2F;AAC3F,eAAO,MAAM,YAAY,GAAI,yCAI1B,iBAAiB,4CAInB,CAAC"}

package/dist/components/QuestionCard.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Layout wrapper for the main question surface. Theme targets data-quiz-question-card. */
+export const QuestionCard = ({ children, as: Component = 'div', className, }) => (_jsx(Component, { "data-quiz-question-card": true, className: className, children: children }));

package/dist/components/QuestionCounter.d.ts

@@ -0,0 +1,9 @@
+export interface QuestionCounterProps {
+    /** Custom format: "{current}" and "{total}" are replaced. Default "Question {current} of {total}". */
+    format?: string;
+    children?: React.ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Displays current question index and total (e.g. "Question 3 of 10"). */
+export declare const QuestionCounter: ({ format, children, as: Component, }: QuestionCounterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuestionCounter.d.ts.map

package/dist/components/QuestionCounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionCounter.d.ts","sourceRoot":"","sources":["../../src/components/QuestionCounter.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,oBAAoB;IACnC,sGAAsG;IACtG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAID,2EAA2E;AAC3E,eAAO,MAAM,eAAe,GAAI,sCAI7B,oBAAoB,4CAQtB,CAAC"}

package/dist/components/QuestionCounter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useProgress } from '../hooks/useProgress.js';
+const DEFAULT_FORMAT = 'Question {current} of {total}';
+/** Displays current question index and total (e.g. "Question 3 of 10"). */
+export const QuestionCounter = ({ format = DEFAULT_FORMAT, children, as: Component = 'span', }) => {
+    const { current, total } = useProgress();
+    const text = format.replace('{current}', String(current)).replace('{total}', String(total));
+    return (_jsx(Component, { "data-quiz-question-counter": true, "aria-live": "polite", children: children ?? text }));
+};

package/dist/components/QuestionFooter.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface QuestionFooterProps {
+    children: ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Bottom area for actions and feedback (submit, continue, retry, feedback). */
+export declare const QuestionFooter: ({ children, as: Component, }: QuestionFooterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuestionFooter.d.ts.map

package/dist/components/QuestionFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionFooter.d.ts","sourceRoot":"","sources":["../../src/components/QuestionFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,gFAAgF;AAChF,eAAO,MAAM,cAAc,GAAI,8BAG5B,mBAAmB,4CAErB,CAAC"}

package/dist/components/QuestionFooter.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Bottom area for actions and feedback (submit, continue, retry, feedback). */
+export const QuestionFooter = ({ children, as: Component = 'footer', }) => (_jsx(Component, { "data-quiz-question-footer": true, children: children }));

package/dist/components/QuestionHeader.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface QuestionHeaderProps {
+    children: ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Top area of a question card (counter, progress, prompt, media). */
+export declare const QuestionHeader: ({ children, as: Component, }: QuestionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuestionHeader.d.ts.map

package/dist/components/QuestionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionHeader.d.ts","sourceRoot":"","sources":["../../src/components/QuestionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,sEAAsE;AACtE,eAAO,MAAM,cAAc,GAAI,8BAG5B,mBAAmB,4CAErB,CAAC"}

package/dist/components/QuestionHeader.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Top area of a question card (counter, progress, prompt, media). */
+export const QuestionHeader = ({ children, as: Component = 'header', }) => (_jsx(Component, { "data-quiz-question-header": true, children: children }));

package/dist/components/QuestionInput.d.ts

@@ -0,0 +1,9 @@
+export interface QuestionInputProps {
+    /** When true, Choice renders with ChoiceIndicator (default true). */
+    showChoiceIndicator?: boolean;
+    /** Custom instruction; when omitted, Instruction uses default for question type. */
+    instruction?: string;
+}
+/** Renders the appropriate input for the current question type (choices, text, match pairs, order, sentence builder) with optional Instruction. */
+export declare const QuestionInput: ({ showChoiceIndicator, instruction, }: QuestionInputProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=QuestionInput.d.ts.map

package/dist/components/QuestionInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionInput.d.ts","sourceRoot":"","sources":["../../src/components/QuestionInput.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,kBAAkB;IACjC,qEAAqE;IACrE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,mJAAmJ;AACnJ,eAAO,MAAM,aAAa,GAAI,uCAG3B,kBAAkB,mDAuDpB,CAAC"}