@welshare/questionnaire 0.2.6 → 0.3.0

package/README.md

@@ -104,6 +104,7 @@ const {
 - `className?: string` - Container CSS classes
 - `inputClassName?: string` - Input CSS classes
 - `choiceClassName?: string` - Choice option CSS classes
+- `choiceLayout?: ChoiceLayout` - `"stacked"` (default) or `"inline-wrap"` (horizontal chip layout)
 - `renderRadioInput?: (props: RadioInputProps) => ReactNode` - Custom radio renderer
 - `renderCheckboxInput?: (props: CheckboxInputProps) => ReactNode` - Custom checkbox renderer
 
@@ -393,6 +394,112 @@ Override CSS custom properties:
 }
 ```
 
+### Choice Layout
+
+Choice-based questions (`coding`, `choice`, `boolean`) support two layout modes via the `choiceLayout` prop:
+
+| Mode | Class applied | Behavior |
+|------|---------------|----------|
+| `"stacked"` (default) | `.wq-choice-layout-stacked` | Vertical column, one option per row |
+| `"inline-wrap"` | `.wq-choice-layout-inline-wrap` | Horizontal chip layout that wraps |
+
+```tsx
+<QuestionRenderer
+  item={item}
+  choiceLayout="inline-wrap"
+/>
+```
+
+Both modes apply to single-select, multi-select (`repeats: true`), and boolean questions. Existing consumers that don't set `choiceLayout` see no change (defaults to `"stacked"`).
+
+#### Chip Design Tokens
+
+When using `inline-wrap`, these tokens control chip appearance:
+
+| Token | Default | Purpose |
+|-------|---------|---------|
+| `--wq-choice-chip-radius` | `9999px` (pill) | Border radius |
+| `--wq-choice-chip-padding-x` | `1rem` | Horizontal padding |
+| `--wq-choice-chip-padding-y` | `0.5rem` | Vertical padding |
+| `--wq-choice-chip-gap` | `0.5rem` | Gap between chips |
+
+#### CSS Class Contract
+
+The choice container always emits:
+
+- `.wq-question-choice` — base container
+- `.wq-choice-layout-stacked` or `.wq-choice-layout-inline-wrap` — layout variant
+- Your `choiceClassName` value (if provided)
+
+State classes on individual options remain unchanged: `.wq-selected`, `.wq-disabled`.
+
+#### Quick Setup: Dark Chip Theme
+
+To get a dark-themed chip-style UI (horizontal wrapping options with strong selected state), combine the layout prop with token overrides and a small scoped CSS file.
+
+**1) Render with layout and a shared choice class:**
+
+```tsx
+<QuestionRenderer
+  item={item}
+  choiceLayout="inline-wrap"
+  choiceClassName="questionnaire-choice"
+/>
+```
+
+**2) Set theme tokens (global CSS):**
+
+```css
+:root {
+  --wq-color-surface: hsl(246 65% 10%);
+  --wq-color-border: hsl(234 50% 20%);
+  --wq-color-border-hover: hsl(214 98% 52%);
+  --wq-color-border-focus: hsl(214 98% 52%);
+  --wq-color-text-primary: hsl(220 20% 95%);
+  --wq-color-text-secondary: hsl(220 15% 60%);
+  --wq-color-selected: hsl(214 98% 52%);
+  --wq-color-selected-border: hsl(214 98% 52%);
+
+  --wq-choice-chip-radius: 14px;
+  --wq-choice-chip-padding-x: 1rem;
+  --wq-choice-chip-padding-y: 0.625rem;
+  --wq-choice-chip-gap: 0.5rem;
+}
+```
+
+**3) Add scoped brand overrides (e.g. `CustomInputs.css`):**
+
+```css
+.wq-question-choice.questionnaire-choice .wq-choice-option.wq-selected {
+  background: var(--wq-color-selected);
+  border-color: var(--wq-color-selected-border);
+}
+
+.wq-question-choice.questionnaire-choice .wq-choice-label {
+  overflow-wrap: anywhere;
+}
+```
+
+**4) (Optional) Hide native radio/checkbox visuals:**
+
+Keep inputs in the DOM for accessibility; hide only the visual markers for pure chips:
+
+```css
+.wq-question-choice.questionnaire-choice input[type="radio"],
+.wq-question-choice.questionnaire-choice input[type="checkbox"] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+```
+
+**Notes:**
+- Keep overrides scoped to your `choiceClassName` to avoid unintended global changes.
+- Use package state classes (`.wq-selected`, `.wq-disabled`) instead of custom state class names.
+- This setup works consistently for single-choice, multi-select, and boolean question types.
+
 ### Custom Input Renderers
 
 ```tsx

package/dist/esm/components/question-renderer.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { QuestionnaireItem } from "../types/fhir.js";
-import { RadioInputProps, CheckboxInputProps, HelperTriggerProps } from "../types/index.js";
+import { ChoiceLayout, RadioInputProps, CheckboxInputProps, HelperTriggerProps } from "../types/index.js";
 export interface QuestionRendererProps {
     item: QuestionnaireItem;
     /**
@@ -18,6 +18,13 @@ export interface QuestionRendererProps {
      * Will be appended to the default wq-choice-option class
      */
     choiceClassName?: string;
+    /**
+     * Layout mode for choice-based questions (coding, choice,
+     * boolean).
+     * - `"stacked"` (default): vertical column, one option per row.
+     * - `"inline-wrap"`: horizontal chip layout that wraps.
+     */
+    choiceLayout?: ChoiceLayout;
     /**
      * Custom renderer for radio button inputs.
      * When provided, this function will be called to render each radio option,

package/dist/esm/components/question-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/question-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAmB1D,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,iBAAiB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IACzD;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;CAChE;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,eAAe,qBAAqB,4CAyBpE,CAAC"}
+{"version":3,"file":"question-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/question-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAmB1D,OAAO,EACL,YAAY,EACZ,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,iBAAiB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IACzD;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;CAChE;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,eAAe,qBAAqB,4CAyBpE,CAAC"}

package/dist/esm/components/question-renderer.js

@@ -39,7 +39,7 @@ export const QuestionRenderer = (rendererProps) => {
  * - Auto-populated (hidden) fields
  * - Validation error display
  */
-const QuestionRendererInternal = ({ item, className = "", inputClassName = "", choiceClassName = "", renderRadioInput, renderCheckboxInput, renderHelperTrigger, }) => {
+const QuestionRendererInternal = ({ item, className = "", inputClassName = "", choiceClassName = "", choiceLayout = "stacked", renderRadioInput, renderCheckboxInput, renderHelperTrigger, }) => {
     const { updateAnswer, updateMultipleAnswers, getAnswer, getAnswers, hasValidationError, } = useQuestionnaire();
     const currentAnswer = getAnswer(item.linkId);
     const currentAnswers = getAnswers(item.linkId);
@@ -233,10 +233,10 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
                     : item;
                 // Multi-select with checkboxes when repeats is true
                 if (item.repeats) {
-                    return (_jsx(MultipleChoiceQuestion, { item: normalizedItem, currentAnswers: currentAnswers, onMultipleChoiceToggle: handleMultipleChoiceToggle, onOtherTextChange: handleOtherTextChange, choiceClassName: choiceClassName, inputClassName: inputClassName, renderCheckboxInput: renderCheckboxInput }));
+                    return (_jsx(MultipleChoiceQuestion, { item: normalizedItem, currentAnswers: currentAnswers, onMultipleChoiceToggle: handleMultipleChoiceToggle, onOtherTextChange: handleOtherTextChange, choiceClassName: choiceClassName, choiceLayout: choiceLayout, inputClassName: inputClassName, renderCheckboxInput: renderCheckboxInput }));
                 }
                 // Single-select with radio buttons (default)
-                return (_jsx(ChoiceQuestion, { item: normalizedItem, currentAnswer: currentAnswer, onChoiceChange: handleChoiceChange, onOtherTextChange: handleOtherTextChange, choiceClassName: choiceClassName, inputClassName: inputClassName, renderRadioInput: renderRadioInput }));
+                return (_jsx(ChoiceQuestion, { item: normalizedItem, currentAnswer: currentAnswer, onChoiceChange: handleChoiceChange, onOtherTextChange: handleOtherTextChange, choiceClassName: choiceClassName, choiceLayout: choiceLayout, inputClassName: inputClassName, renderRadioInput: renderRadioInput }));
             }
             case "integer":
                 return (_jsx(IntegerQuestion, { item: item, currentAnswer: currentAnswer, onIntegerChange: handleIntegerChange, inputClassName: inputClassName, sliderConfig: sliderConfig }));
@@ -248,7 +248,7 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
             case "text":
                 return (_jsx(StringQuestion, { item: item, currentAnswer: currentAnswer, onStringChange: handleStringChange, inputClassName: inputClassName }));
             case "boolean":
-                return (_jsx(BooleanQuestion, { item: item, currentAnswer: currentAnswer, onBooleanChange: handleBooleanChange, choiceClassName: choiceClassName, renderRadioInput: renderRadioInput }));
+                return (_jsx(BooleanQuestion, { item: item, currentAnswer: currentAnswer, onBooleanChange: handleBooleanChange, choiceClassName: choiceClassName, choiceLayout: choiceLayout, renderRadioInput: renderRadioInput }));
             default:
                 return (_jsxs("div", { className: "wq-unsupported-type", children: ["Unsupported question type: ", item.type] }));
         }

package/dist/esm/components/questions/boolean-question.d.ts

@@ -1,15 +1,16 @@
 import { type ReactNode } from "react";
 import type { QuestionnaireItem, QuestionnaireResponseAnswer } from "../../types/fhir.js";
-import { RadioInputProps } from "@/types/index.js";
+import { ChoiceLayout, RadioInputProps } from "@/types/index.js";
 export interface BooleanQuestionProps {
     item: QuestionnaireItem;
     currentAnswer?: QuestionnaireResponseAnswer;
     onBooleanChange: (value: boolean) => void;
     choiceClassName?: string;
+    choiceLayout?: ChoiceLayout;
     renderRadioInput?: (props: RadioInputProps) => ReactNode;
 }
 /**
  * Renders a boolean question with Yes/No radio buttons
  */
-export declare const BooleanQuestion: ({ item, currentAnswer, onBooleanChange, choiceClassName, renderRadioInput, }: BooleanQuestionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BooleanQuestion: ({ item, currentAnswer, onBooleanChange, choiceClassName, choiceLayout, renderRadioInput, }: BooleanQuestionProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=boolean-question.d.ts.map

package/dist/esm/components/questions/boolean-question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"boolean-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/boolean-question.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,iBAAiB,CAAC;IACxB,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,8EAM7B,oBAAoB,4CAoDtB,CAAC"}
+{"version":3,"file":"boolean-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/boolean-question.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEjE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,iBAAiB,CAAC;IACxB,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,4FAO7B,oBAAoB,4CAoDtB,CAAC"}

package/dist/esm/components/questions/boolean-question.js

@@ -2,8 +2,8 @@ import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-run
 /**
  * Renders a boolean question with Yes/No radio buttons
  */
-export const BooleanQuestion = ({ item, currentAnswer, onBooleanChange, choiceClassName = "", renderRadioInput, }) => {
-    return (_jsx("div", { className: `wq-question-choice ${choiceClassName}`, children: renderRadioInput ? (_jsxs(_Fragment, { children: [renderRadioInput({
+export const BooleanQuestion = ({ item, currentAnswer, onBooleanChange, choiceClassName = "", choiceLayout = "stacked", renderRadioInput, }) => {
+    return (_jsx("div", { className: `wq-question-choice wq-choice-layout-${choiceLayout} ${choiceClassName}`, children: renderRadioInput ? (_jsxs(_Fragment, { children: [renderRadioInput({
                     linkId: item.linkId,
                     checked: currentAnswer?.valueBoolean === true,
                     onChange: () => onBooleanChange(true),

package/dist/esm/components/questions/choice-question.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { QuestionnaireItem, QuestionnaireResponseAnswer } from "../../types/fhir.js";
-import { RadioInputProps } from "@/types/index.js";
+import { ChoiceLayout, RadioInputProps } from "@/types/index.js";
 export interface ChoiceQuestionProps {
     item: QuestionnaireItem;
     currentAnswer?: QuestionnaireResponseAnswer;
@@ -10,6 +10,7 @@ export interface ChoiceQuestionProps {
         display?: string;
     }, valueInteger?: number) => void;
     choiceClassName?: string;
+    choiceLayout?: ChoiceLayout;
     inputClassName?: string;
     renderRadioInput?: (props: RadioInputProps) => ReactNode;
     onOtherTextChange?: (value: string) => void;
@@ -21,5 +22,5 @@ export interface ChoiceQuestionProps {
  * "Other" text field alongside coded options. Single-select means selecting
  * a coded option or entering text is mutually exclusive (per FHIR spec).
  */
-export declare const ChoiceQuestion: ({ item, currentAnswer, onChoiceChange, choiceClassName, inputClassName, renderRadioInput, onOtherTextChange, }: ChoiceQuestionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChoiceQuestion: ({ item, currentAnswer, onChoiceChange, choiceClassName, choiceLayout, inputClassName, renderRadioInput, onOtherTextChange, }: ChoiceQuestionProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=choice-question.d.ts.map

package/dist/esm/components/questions/choice-question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choice-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/choice-question.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,iBAAiB,CAAC;IACxB,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,cAAc,EAAE,CACd,WAAW,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EACjE,YAAY,CAAC,EAAE,MAAM,KAClB,IAAI,CAAC;IACV,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IACzD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,gHAQ5B,mBAAmB,4CAyFrB,CAAC"}
+{"version":3,"file":"choice-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/choice-question.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGjE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,iBAAiB,CAAC;IACxB,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,cAAc,EAAE,CACd,WAAW,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EACjE,YAAY,CAAC,EAAE,MAAM,KAClB,IAAI,CAAC;IACV,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IACzD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,8HAS5B,mBAAmB,4CAyFrB,CAAC"}

package/dist/esm/components/questions/choice-question.js

@@ -9,11 +9,11 @@ import { OtherTextInput } from "./other-text-input.js";
  * "Other" text field alongside coded options. Single-select means selecting
  * a coded option or entering text is mutually exclusive (per FHIR spec).
  */
-export const ChoiceQuestion = ({ item, currentAnswer, onChoiceChange, choiceClassName = "", inputClassName = "", renderRadioInput, onOtherTextChange, }) => {
+export const ChoiceQuestion = ({ item, currentAnswer, onChoiceChange, choiceClassName = "", choiceLayout = "stacked", inputClassName = "", renderRadioInput, onOtherTextChange, }) => {
     // Check if this item allows free-text "other" answers (FHIR R5)
     // https://hl7.org/fhir/valueset-questionnaire-answer-constraint.html#expansion
     const allowsOtherText = item.answerConstraint === "optionsOrString";
-    return (_jsxs("div", { className: `wq-question-choice ${choiceClassName}`, children: [item.answerOption?.map((option, index) => {
+    return (_jsxs("div", { className: `wq-question-choice wq-choice-layout-${choiceLayout} ${choiceClassName}`, children: [item.answerOption?.map((option, index) => {
                 const isSelected = currentAnswer?.valueCoding?.code === option.valueCoding?.code;
                 // Get media attachment for this answer option
                 const mediaAttachment = getAnswerOptionMedia(option);

package/dist/esm/components/questions/multiple-choice-question.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { QuestionnaireItem, QuestionnaireResponseAnswer } from "../../types/fhir.js";
-import { CheckboxInputProps } from "../../types/index.js";
+import { CheckboxInputProps, ChoiceLayout } from "../../types/index.js";
 export interface MultipleChoiceQuestionProps {
     item: QuestionnaireItem;
     currentAnswers: QuestionnaireResponseAnswer[];
@@ -10,6 +10,7 @@ export interface MultipleChoiceQuestionProps {
         display?: string;
     }, valueInteger?: number) => void;
     choiceClassName?: string;
+    choiceLayout?: ChoiceLayout;
     inputClassName?: string;
     renderCheckboxInput?: (props: CheckboxInputProps) => ReactNode;
     onOtherTextChange?: (value: string) => void;
@@ -22,5 +23,5 @@ export interface MultipleChoiceQuestionProps {
  * "Other" text field alongside coded options. Multi-select means both
  * coded options and free-text can coexist in the answers array.
  */
-export declare const MultipleChoiceQuestion: ({ item, currentAnswers, onMultipleChoiceToggle, choiceClassName, inputClassName, renderCheckboxInput, onOtherTextChange, }: MultipleChoiceQuestionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleChoiceQuestion: ({ item, currentAnswers, onMultipleChoiceToggle, choiceClassName, choiceLayout, inputClassName, renderCheckboxInput, onOtherTextChange, }: MultipleChoiceQuestionProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=multiple-choice-question.d.ts.map

package/dist/esm/components/questions/multiple-choice-question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiple-choice-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/multiple-choice-question.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAI7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,iBAAiB,CAAC;IACxB,cAAc,EAAE,2BAA2B,EAAE,CAAC;IAC9C,sBAAsB,EAAE,CACtB,WAAW,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EACjE,YAAY,CAAC,EAAE,MAAM,KAClB,IAAI,CAAC;IACV,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAC/D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,GAAI,4HAQpC,2BAA2B,4CA0I7B,CAAC"}
+{"version":3,"file":"multiple-choice-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/multiple-choice-question.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAI7B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,iBAAiB,CAAC;IACxB,cAAc,EAAE,2BAA2B,EAAE,CAAC;IAC9C,sBAAsB,EAAE,CACtB,WAAW,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EACjE,YAAY,CAAC,EAAE,MAAM,KAClB,IAAI,CAAC;IACV,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAC/D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,GAAI,0IASpC,2BAA2B,4CA0I7B,CAAC"}

package/dist/esm/components/questions/multiple-choice-question.js

@@ -11,7 +11,7 @@ import { OtherTextInput } from "./other-text-input.js";
  * "Other" text field alongside coded options. Multi-select means both
  * coded options and free-text can coexist in the answers array.
  */
-export const MultipleChoiceQuestion = ({ item, currentAnswers, onMultipleChoiceToggle, choiceClassName = "", inputClassName = "", renderCheckboxInput, onOtherTextChange, }) => {
+export const MultipleChoiceQuestion = ({ item, currentAnswers, onMultipleChoiceToggle, choiceClassName = "", choiceLayout = "stacked", inputClassName = "", renderCheckboxInput, onOtherTextChange, }) => {
     // Check if this item allows free-text "other" answers (FHIR R5)
     // https://hl7.org/fhir/valueset-questionnaire-answer-constraint.html#expansion
     const allowsOtherText = item.answerConstraint === "optionsOrString";
@@ -33,7 +33,7 @@ export const MultipleChoiceQuestion = ({ item, currentAnswers, onMultipleChoiceT
     const optionsToShow = exclusiveSelected
         ? item.answerOption?.filter((opt) => opt.valueCoding?.code === exclusiveOptionCode)
         : item.answerOption;
-    return (_jsxs("div", { className: `wq-question-choice ${choiceClassName}`, children: [optionsToShow?.map((option, index) => {
+    return (_jsxs("div", { className: `wq-question-choice wq-choice-layout-${choiceLayout} ${choiceClassName}`, children: [optionsToShow?.map((option, index) => {
                 const isSelected = currentAnswers.some((answer) => answer.valueCoding?.code === option.valueCoding?.code);
                 const isDisabled = !isSelected && atMaxAnswers;
                 // Get media attachment for this answer option

package/dist/esm/index.d.ts

@@ -8,7 +8,7 @@ export { LegalConsentForm } from "./components/legal-consent-form.js";
 export type { LegalConsentFormProps, LegalConsentResult, LegalCheckboxProps, LegalDocumentLinks, } from "./components/legal-consent-form.js";
 export { QuestionnaireProvider, useQuestionnaire, type QuestionnaireContextType, type QuestionnaireProviderProps, } from "./contexts/questionnaire-context.js";
 export type { Attachment, Coding, Extension, Questionnaire, QuestionnaireItem, QuestionnaireItemAnswerOption, QuestionnaireResponse, QuestionnaireResponseAnswer, QuestionnaireResponseItem, } from "./types/fhir.js";
-export type { RadioInputProps, CheckboxInputProps, InputHelperConfig, HelperTriggerProps, } from "./types/index.js";
+export type { ChoiceLayout, RadioInputProps, CheckboxInputProps, InputHelperConfig, HelperTriggerProps, } from "./types/index.js";
 export { calculateProgress, findQuestionnaireItem, getAllQuestionsFromPage, getAnswerOptionMedia, getExclusiveOptionCode, getInputHelper, getItemMedia, getVisiblePages, hasAnswerValue, isQuestionHidden, } from "./lib/questionnaire-utils.js";
 export { calculateBmi } from "./lib/bmi-helpers.js";
 export { FHIR_EXTENSIONS, WELSHARE_EXTENSIONS, WELSHARE_CODE_SYSTEMS, FHIR_CODE_SYSTEMS, } from "./lib/constants.js";

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,YAAY,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,YAAY,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAEzF,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,GAChC,MAAM,qCAAqC,CAAC;AAG7C,YAAY,EACV,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,6BAA6B,EAC7B,qBAAqB,EACrB,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,eAAe,EACf,cAAc,EACd,gBAAgB,GACjB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,YAAY,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,YAAY,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAEzF,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,GAChC,MAAM,qCAAqC,CAAC;AAG7C,YAAY,EACV,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,6BAA6B,EAC7B,qBAAqB,EACrB,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACV,YAAY,EACZ,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,eAAe,EACf,cAAc,EACd,gBAAgB,GACjB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC"}

package/dist/esm/types/index.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Layout mode for choice-based questions.
+ * - `"stacked"`: Default column layout (one option per row).
+ * - `"inline-wrap"`: Horizontal chip layout that wraps to next line.
+ */
+export type ChoiceLayout = "stacked" | "inline-wrap";
 /**
  * Props for rendering a radio button option
  */

package/dist/esm/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM;IACrD,kDAAkD;IAClD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,0DAA0D;IAC1D,eAAe,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACrC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM;IACrD,kDAAkD;IAClD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,0DAA0D;IAC1D,eAAe,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACrC"}

package/dist/styles.css

@@ -99,6 +99,30 @@
   font-weight: var(--wq-font-weight-medium);
 }
 
+/* === Inline-Wrap (Chip) Layout === */
+.wq-question-choice.wq-choice-layout-inline-wrap {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--wq-choice-chip-gap);
+}
+
+.wq-question-choice.wq-choice-layout-inline-wrap
+  .wq-choice-option-wrapper {
+  max-width: 100%;
+}
+
+.wq-question-choice.wq-choice-layout-inline-wrap .wq-choice-option {
+  border-radius: var(--wq-choice-chip-radius);
+  padding: var(--wq-choice-chip-padding-y)
+    var(--wq-choice-chip-padding-x);
+  width: auto;
+}
+
+.wq-question-choice.wq-choice-layout-inline-wrap .wq-choice-label {
+  white-space: normal;
+  word-break: break-word;
+}
+
 .wq-max-answers-hint {
   font-size: var(--wq-font-size-sm);
   color: var(--wq-color-text-tertiary);
@@ -402,6 +426,12 @@
   .wq-slider-value-display {
     font-size: var(--wq-font-size-lg);
   }
+
+  .wq-question-choice.wq-choice-layout-inline-wrap
+    .wq-choice-option {
+    padding: var(--wq-choice-chip-padding-y)
+      var(--wq-space-md);
+  }
 }
 
 /* === Print Styles === */

package/dist/tokens.css

@@ -107,6 +107,12 @@
   --wq-choice-padding-x: var(--wq-space-lg);
   --wq-choice-padding-y: var(--wq-space-md);
 
+  /* Chip tokens (used by inline-wrap layout) */
+  --wq-choice-chip-radius: var(--wq-radius-full);
+  --wq-choice-chip-padding-x: var(--wq-space-lg);
+  --wq-choice-chip-padding-y: var(--wq-space-sm);
+  --wq-choice-chip-gap: var(--wq-space-sm);
+
   --wq-question-gap: var(--wq-space-xl);
 
   --wq-slider-height: 0.5rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welshare/questionnaire",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "FHIR Questionnaire components for React with state management and validation",
   "keywords": [
     "react",
@@ -38,9 +38,9 @@
     "storybook": "^10.1.11",
     "@storybook/react": "^10.1.11",
     "@storybook/react-vite": "^10.1.11",
-    "@welshare/sdk": "0.3.5",
-    "@workspace/eslint-config": "0.0.0",
-    "@workspace/typescript-config": "0.0.0"
+    "@welshare/sdk": "0.4.0",
+    "@workspace/typescript-config": "0.0.0",
+    "@workspace/eslint-config": "0.0.0"
   },
   "tshy": {
     "dialects": [