@welshare/questionnaire 0.2.4 → 0.2.7

package/README.md

@@ -1,6 +1,6 @@
 # @welshare/questionnaire
 
-FHIR R4 Questionnaire components for React with state management, validation, and theming.
+FHIR R5 Questionnaire components for React with state management, validation, and theming.
 
 ## Installation
 
@@ -104,10 +104,30 @@ 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
 
-**Supported Types:** `choice`, `boolean`, `integer`, `decimal`, `string`, `text`
+**Supported Types:** `coding`, `boolean`, `integer`, `decimal`, `string`, `text`, `quantity`
+
+### Choice Questions with Custom Text Answers
+
+Choice fields **can** optionally support custom user text input alongside coded options when you set `answerConstraint: "optionsOrString"` in the FHIR questionnaire definition:
+
+```json
+{
+  "linkId": "referral-source",
+  "text": "How did you hear about us?",
+  "type": "coding",
+  "answerConstraint": "optionsOrString",
+  "answerOption": [
+    { "valueCoding": { "code": "search", "display": "Search engine" } },
+    { "valueCoding": { "code": "social", "display": "Social media" } }
+  ]
+}
+```
+
+This renders coded options with an "Other" text field. For single-select (`repeats: false`), selecting a coded option or entering text is mutually exclusive. For multi-select (`repeats: true`), coded selections and free text coexist in the answer array.
 
 ### BmiForm
 
@@ -168,6 +188,69 @@ function MyComponent() {
 }
 ```
 
+### Quantity Questions with Unit Selection
+
+Quantity questions allow users to enter numeric values with unit selection. Use the standard FHIR `questionnaire-unitOption` extension to define available units:
+
+```tsx
+const waistCircumferenceItem = {
+  linkId: "waist",
+  type: "quantity",
+  text: "What is your waist circumference?",
+  required: false,
+  code: [
+    {
+      system: "http://loinc.org",
+      code: "8280-0",
+      display: "Waist circumference at umbilicus by tape measure",
+    },
+  ],
+  extension: [
+    {
+      url: "http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption",
+      valueCoding: {
+        system: "http://unitsofmeasure.org",
+        code: "cm",
+        display: "cm",
+      },
+    },
+    {
+      url: "http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption",
+      valueCoding: {
+        system: "http://unitsofmeasure.org",
+        code: "[in_i]",
+        display: "in",
+      },
+    },
+  ],
+};
+```
+
+**Features:**
+
+- Automatic unit toggle when multiple units are defined
+- Single unit display when only one unit is provided
+- Fallback to simple decimal input when no units are configured
+- Value automatically clears when switching units
+
+**Response Format:**
+
+```json
+{
+  "linkId": "waist",
+  "answer": [
+    {
+      "valueQuantity": {
+        "value": 85,
+        "unit": "cm",
+        "system": "http://unitsofmeasure.org",
+        "code": "cm"
+      }
+    }
+  ]
+}
+```
+
 ### LegalConsentForm
 
 A self-contained form component for collecting user consent before data submission. This component handles:
@@ -311,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;AAkB1D,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

@@ -10,6 +10,7 @@ import { IntegerQuestion } from "./questions/integer-question.js";
 import { DecimalQuestion, getDecimalHelperTriggerProps, } from "./questions/decimal-question.js";
 import { StringQuestion } from "./questions/string-question.js";
 import { BooleanQuestion } from "./questions/boolean-question.js";
+import { QuantityQuestion } from "./questions/quantity-question.js";
 /**
  * Wrapper component that combines the library's QuestionRenderer with debug functionality.
  *
@@ -38,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);
@@ -146,6 +147,24 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
             updateAnswer(item.linkId, { valueDecimal: numValue });
         }
     };
+    const handleQuantityChange = (value, unit, system, code) => {
+        // Allow clearing the controlled input
+        if (value === "") {
+            updateAnswer(item.linkId, {});
+            return;
+        }
+        const numValue = parseFloat(value);
+        if (!isNaN(numValue)) {
+            updateAnswer(item.linkId, {
+                valueQuantity: {
+                    value: numValue,
+                    unit,
+                    system,
+                    code,
+                },
+            });
+        }
+    };
     const handleStringChange = (value) => {
         updateAnswer(item.linkId, { valueString: value });
     };
@@ -165,26 +184,71 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
         return { minValue, maxValue, step, unit };
     };
     const sliderConfig = getSliderConfig();
+    /**
+     * Handle free-text "Other" input for coding questions with answerConstraint.
+     *
+     * Single-select (repeats=false): writing text clears any coded selection
+     * (valueString and valueCoding are mutually exclusive per FHIR spec).
+     *
+     * Multi-select (repeats=true): the free-text answer coexists with coded answers.
+     */
+    const handleOtherTextChange = (value) => {
+        if (item.repeats) {
+            // Multi-select: keep all coded answers, replace free-text
+            const codedAnswers = currentAnswers.filter((a) => a.valueCoding !== undefined);
+            if (value) {
+                updateMultipleAnswers(item.linkId, [
+                    ...codedAnswers,
+                    { valueString: value },
+                ]);
+            }
+            else {
+                updateMultipleAnswers(item.linkId, codedAnswers);
+            }
+        }
+        else {
+            // Single-select: free-text replaces any coded answer
+            if (value) {
+                updateAnswer(item.linkId, { valueString: value });
+            }
+            else {
+                updateAnswer(item.linkId, {});
+            }
+        }
+    };
     const renderQuestion = () => {
         switch (item.type) {
-            // FHIR R4 uses 'choice', R5 uses 'coding' - both render the same way
-            case "choice":
+            // FHIR R5 'coding' type for coded answers
+            // When answerConstraint="optionsOrString", allows free-text "other" input
             case "coding":
+            // @deprecated Legacy FHIR R4 types — use "coding" instead
+            // "open-choice" is equivalent to "coding" with answerConstraint="optionsOrString"
+            // eslint-disable-next-line no-fallthrough
+            case "choice":
+            case "open-choice": {
+                // Normalize R4 "open-choice" → answerConstraint="optionsOrString"
+                const normalizedItem = item.type === "open-choice" &&
+                    item.answerConstraint !== "optionsOrString"
+                    ? { ...item, answerConstraint: "optionsOrString" }
+                    : item;
                 // Multi-select with checkboxes when repeats is true
                 if (item.repeats) {
-                    return (_jsx(MultipleChoiceQuestion, { item: item, currentAnswers: currentAnswers, onMultipleChoiceToggle: handleMultipleChoiceToggle, choiceClassName: choiceClassName, 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: item, currentAnswer: currentAnswer, onChoiceChange: handleChoiceChange, choiceClassName: choiceClassName, 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 }));
             case "decimal":
                 return (_jsx(DecimalQuestion, { item: item, currentAnswer: currentAnswer, onDecimalChange: handleDecimalChange, inputClassName: inputClassName }));
+            case "quantity":
+                return (_jsx(QuantityQuestion, { item: item, currentAnswer: currentAnswer, onQuantityChange: handleQuantityChange, inputClassName: inputClassName }));
             case "string":
             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,10 +10,17 @@ export interface ChoiceQuestionProps {
         display?: string;
     }, valueInteger?: number) => void;
     choiceClassName?: string;
+    choiceLayout?: ChoiceLayout;
+    inputClassName?: string;
     renderRadioInput?: (props: RadioInputProps) => ReactNode;
+    onOtherTextChange?: (value: string) => void;
 }
 /**
- * Renders a single-select choice question with radio buttons
+ * Renders a single-select choice question with radio buttons.
+ *
+ * FHIR R5: When answerConstraint="optionsOrString", displays an optional
+ * "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, renderRadioInput, }: 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;AAEnD,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,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,6EAM5B,mBAAmB,4CA4ErB,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

@@ -1,31 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getAnswerOptionMedia } from "../../lib/questionnaire-utils.js";
 import { MediaAttachment } from "../media-attachment.js";
+import { OtherTextInput } from "./other-text-input.js";
 /**
- * Renders a single-select choice question with radio buttons
+ * Renders a single-select choice question with radio buttons.
+ *
+ * FHIR R5: When answerConstraint="optionsOrString", displays an optional
+ * "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 = "", renderRadioInput, }) => {
-    return (_jsx("div", { className: `wq-question-choice ${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);
-            // Use custom renderer if provided
-            if (renderRadioInput) {
+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 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);
+                // Use custom renderer if provided
+                if (renderRadioInput) {
+                    return (_jsxs("div", { className: "wq-choice-option-wrapper", children: [mediaAttachment && (_jsx(MediaAttachment, { attachment: mediaAttachment, alt: mediaAttachment.title ||
+                                    option.valueCoding?.display ||
+                                    `Option ${index + 1}`, className: "wq-choice-option-image" })), renderRadioInput({
+                                linkId: item.linkId,
+                                valueCoding: option.valueCoding,
+                                valueInteger: option.valueInteger,
+                                checked: isSelected,
+                                onChange: () => onChoiceChange(option.valueCoding || {}, option.valueInteger),
+                                label: option.valueCoding?.display || "",
+                                index,
+                            })] }, index));
+                }
+                // Default rendering
                 return (_jsxs("div", { className: "wq-choice-option-wrapper", children: [mediaAttachment && (_jsx(MediaAttachment, { attachment: mediaAttachment, alt: mediaAttachment.title ||
                                 option.valueCoding?.display ||
-                                `Option ${index + 1}`, className: "wq-choice-option-image" })), renderRadioInput({
-                            linkId: item.linkId,
-                            valueCoding: option.valueCoding,
-                            valueInteger: option.valueInteger,
-                            checked: isSelected,
-                            onChange: () => onChoiceChange(option.valueCoding || {}, option.valueInteger),
-                            label: option.valueCoding?.display || "",
-                            index,
-                        })] }, index));
-            }
-            // Default rendering
-            return (_jsxs("div", { className: "wq-choice-option-wrapper", children: [mediaAttachment && (_jsx(MediaAttachment, { attachment: mediaAttachment, alt: mediaAttachment.title ||
-                            option.valueCoding?.display ||
-                            `Option ${index + 1}`, className: "wq-choice-option-image" })), _jsxs("label", { className: `wq-choice-option ${isSelected ? "wq-selected" : ""}`, children: [_jsx("input", { type: "radio", name: item.linkId, value: option.valueCoding?.code, checked: isSelected, onChange: () => onChoiceChange(option.valueCoding || {}, option.valueInteger), "data-wq-input": "radio", "data-wq-selected": isSelected }), _jsx("span", { className: "wq-choice-label", children: option.valueCoding?.display })] })] }, index));
-        }) }));
+                                `Option ${index + 1}`, className: "wq-choice-option-image" })), _jsxs("label", { className: `wq-choice-option ${isSelected ? "wq-selected" : ""}`, children: [_jsx("input", { type: "radio", name: item.linkId, value: option.valueCoding?.code, checked: isSelected, onChange: () => onChoiceChange(option.valueCoding || {}, option.valueInteger), "data-wq-input": "radio", "data-wq-selected": isSelected }), _jsx("span", { className: "wq-choice-label", children: option.valueCoding?.display })] })] }, index));
+            }), allowsOtherText && onOtherTextChange && (_jsx(OtherTextInput, { currentAnswer: currentAnswer, onTextChange: onOtherTextChange, inputClassName: inputClassName, isMultiSelect: false }))] }));
 };

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,11 +10,18 @@ export interface MultipleChoiceQuestionProps {
         display?: string;
     }, valueInteger?: number) => void;
     choiceClassName?: string;
+    choiceLayout?: ChoiceLayout;
+    inputClassName?: string;
     renderCheckboxInput?: (props: CheckboxInputProps) => ReactNode;
+    onOtherTextChange?: (value: string) => void;
 }
 /**
- * Renders a multi-select choice question with checkboxes
- * Supports exclusive options and maxAnswers limits
+ * Renders a multi-select choice question with checkboxes.
+ * Supports exclusive options and maxAnswers limits.
+ *
+ * FHIR R5: When answerConstraint="optionsOrString", displays an optional
+ * "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, renderCheckboxInput, }: 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;AAE1D,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,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;CAChE;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GAAI,yFAMpC,2BAA2B,4CAkH7B,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

@@ -2,13 +2,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { WELSHARE_EXTENSIONS } from "../../lib/constants.js";
 import { getAnswerOptionMedia } from "../../lib/questionnaire-utils.js";
 import { MediaAttachment } from "../media-attachment.js";
+import { OtherTextInput } from "./other-text-input.js";
 /**
- * Renders a multi-select choice question with checkboxes
- * Supports exclusive options and maxAnswers limits
+ * Renders a multi-select choice question with checkboxes.
+ * Supports exclusive options and maxAnswers limits.
+ *
+ * FHIR R5: When answerConstraint="optionsOrString", displays an optional
+ * "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 = "", renderCheckboxInput, }) => {
+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";
+    // Find the free-text answer for maxAnswers logic
+    const freeTextAnswer = currentAnswers.find((a) => a.valueString !== undefined && !a.valueCoding);
+    // Count only coded answers for maxAnswers logic
+    const codedAnswersCount = currentAnswers.filter((a) => a.valueCoding !== undefined).length;
     const maxAnswers = item.maxAnswers || Number.MAX_SAFE_INTEGER;
-    const atMaxAnswers = currentAnswers.length >= maxAnswers;
+    // Account for free-text answer in max count
+    const totalCount = codedAnswersCount + (freeTextAnswer ? 1 : 0);
+    const atMaxAnswers = totalCount >= maxAnswers;
     // Check if there's an exclusive option extension
     const exclusiveOptionExt = item.extension?.find((ext) => ext.url === WELSHARE_EXTENSIONS.EXCLUSIVE_OPTION);
     const exclusiveOptionCode = exclusiveOptionExt?.valueString;
@@ -19,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
@@ -43,5 +57,5 @@ export const MultipleChoiceQuestion = ({ item, currentAnswers, onMultipleChoiceT
                 return (_jsxs("div", { className: "wq-choice-option-wrapper", children: [mediaAttachment && (_jsx(MediaAttachment, { attachment: mediaAttachment, alt: mediaAttachment.title ||
                                 option.valueCoding?.display ||
                                 `Option ${index + 1}`, className: "wq-choice-option-image" })), _jsxs("label", { className: `wq-choice-option ${isSelected ? "wq-selected" : ""} ${isDisabled ? "wq-disabled" : ""}`, children: [_jsx("input", { type: "checkbox", name: item.linkId, value: option.valueCoding?.code, checked: isSelected, disabled: isDisabled, onChange: () => onMultipleChoiceToggle(option.valueCoding || {}, option.valueInteger), "data-wq-input": "checkbox", "data-wq-selected": isSelected }), _jsx("span", { className: "wq-choice-label", children: option.valueCoding?.display })] })] }, index));
-            }), item.maxAnswers && (_jsxs("div", { className: "wq-max-answers-hint", children: ["Selected: ", currentAnswers.length, " / ", item.maxAnswers] }))] }));
+            }), item.maxAnswers && (_jsxs("div", { className: "wq-max-answers-hint", children: ["Selected: ", totalCount, " / ", item.maxAnswers] })), allowsOtherText && onOtherTextChange && (_jsx(OtherTextInput, { currentAnswers: currentAnswers, onTextChange: onOtherTextChange, inputClassName: inputClassName, isMultiSelect: true }))] }));
 };

package/dist/esm/components/questions/other-text-input.d.ts

@@ -0,0 +1,39 @@
+import type { QuestionnaireResponseAnswer } from "../../types/fhir.js";
+export interface OtherTextInputProps {
+    /**
+     * Current answer (for single-select) or answers array (for multi-select).
+     * Used to determine if free-text is active and what value to display.
+     */
+    currentAnswer?: QuestionnaireResponseAnswer;
+    currentAnswers?: QuestionnaireResponseAnswer[];
+    /**
+     * Callback fired when the user types in the "Other" field.
+     */
+    onTextChange: (value: string) => void;
+    /**
+     * Additional CSS class name for the input element.
+     */
+    inputClassName?: string;
+    /**
+     * Whether this is used in a multi-select context (repeats=true).
+     * Affects how we extract the free-text value.
+     */
+    isMultiSelect?: boolean;
+}
+/**
+ * Shared "Other" text input component for FHIR R5 coding questions
+ * with answerConstraint="optionsOrString".
+ *
+ * This component renders a labeled text field that allows users to enter
+ * free-text responses alongside coded options. It follows FHIR R5 semantics:
+ * - Single-select: free-text and coded options are mutually exclusive
+ * - Multi-select: free-text coexists with coded options
+ *
+ * Uses unified CSS classes from questionnaire-styles.css:
+ * - .wq-open-choice-other (container)
+ * - .wq-open-choice-other-label (label)
+ * - .wq-open-choice-other-input (input field)
+ * - .wq-open-choice-other-active (active state modifier)
+ */
+export declare const OtherTextInput: ({ currentAnswer, currentAnswers, onTextChange, inputClassName, isMultiSelect, }: OtherTextInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=other-text-input.d.ts.map

package/dist/esm/components/questions/other-text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"other-text-input.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/other-text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,cAAc,CAAC,EAAE,2BAA2B,EAAE,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,GAAI,iFAM5B,mBAAmB,4CAoCrB,CAAC"}

package/dist/esm/components/questions/other-text-input.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared "Other" text input component for FHIR R5 coding questions
+ * with answerConstraint="optionsOrString".
+ *
+ * This component renders a labeled text field that allows users to enter
+ * free-text responses alongside coded options. It follows FHIR R5 semantics:
+ * - Single-select: free-text and coded options are mutually exclusive
+ * - Multi-select: free-text coexists with coded options
+ *
+ * Uses unified CSS classes from questionnaire-styles.css:
+ * - .wq-open-choice-other (container)
+ * - .wq-open-choice-other-label (label)
+ * - .wq-open-choice-other-input (input field)
+ * - .wq-open-choice-other-active (active state modifier)
+ */
+export const OtherTextInput = ({ currentAnswer, currentAnswers = [], onTextChange, inputClassName = "", isMultiSelect = false, }) => {
+    // Extract free-text value based on context
+    let otherTextValue = "";
+    let hasCodedSelection = false;
+    if (isMultiSelect) {
+        // Multi-select: find free-text answer in array
+        const freeTextAnswer = currentAnswers.find((a) => a.valueString !== undefined && !a.valueCoding);
+        otherTextValue = freeTextAnswer?.valueString ?? "";
+        hasCodedSelection = currentAnswers.some((a) => a.valueCoding !== undefined);
+    }
+    else {
+        // Single-select: check current answer
+        otherTextValue = currentAnswer?.valueString ?? "";
+        hasCodedSelection = !!currentAnswer?.valueCoding;
+    }
+    // In single-select, the input is "active" when free-text is entered and no coded option is selected
+    const isActive = !isMultiSelect && !hasCodedSelection && !!otherTextValue;
+    return (_jsxs("div", { className: `wq-open-choice-other ${isActive ? "wq-open-choice-other-active" : ""}`, children: [_jsx("label", { className: "wq-open-choice-other-label", children: "Other" }), _jsx("input", { type: "text", className: `wq-question-input wq-open-choice-other-input ${inputClassName}`, value: otherTextValue, onChange: (e) => onTextChange(e.target.value), placeholder: "Enter other answer", "data-wq-input": "open-choice-text" })] }));
+};

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

@@ -0,0 +1,13 @@
+import type { QuestionnaireItem, QuestionnaireResponseAnswer } from "../../types/fhir.js";
+export interface QuantityQuestionProps {
+    item: QuestionnaireItem;
+    currentAnswer?: QuestionnaireResponseAnswer;
+    onQuantityChange: (value: string, unit: string, system: string, code: string) => void;
+    inputClassName?: string;
+}
+/**
+ * Renders a quantity question with unit selection
+ * Supports the FHIR questionnaire-unitOption extension for defining available units
+ */
+export declare const QuantityQuestion: ({ item, currentAnswer, onQuantityChange, inputClassName, }: QuantityQuestionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=quantity-question.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/quantity-question.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,iBAAiB,CAAC;IACxB,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,gBAAgB,EAAE,CAChB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KACT,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAgCD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,4DAK9B,qBAAqB,4CA8GvB,CAAC"}

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { FHIR_EXTENSIONS } from "../../lib/constants.js";
+/**
+ * Extract unit options from FHIR questionnaire-unitOption extensions
+ */
+const getUnitOptions = (item) => {
+    if (!item.extension)
+        return [];
+    const unitOptions = [];
+    for (const ext of item.extension) {
+        if (ext.url === FHIR_EXTENSIONS.QUESTIONNAIRE_UNIT_OPTION &&
+            ext.valueCoding) {
+            unitOptions.push({
+                display: ext.valueCoding.display || ext.valueCoding.code || "",
+                code: ext.valueCoding.code || "",
+                system: ext.valueCoding.system || "",
+            });
+        }
+    }
+    return unitOptions;
+};
+/**
+ * Renders a quantity question with unit selection
+ * Supports the FHIR questionnaire-unitOption extension for defining available units
+ */
+export const QuantityQuestion = ({ item, currentAnswer, onQuantityChange, inputClassName = "", }) => {
+    const unitOptions = getUnitOptions(item);
+    const [selectedUnitIndex, setSelectedUnitIndex] = useState(0);
+    // Sync selected unit from existing answer
+    useEffect(() => {
+        if (currentAnswer?.valueQuantity?.code && unitOptions.length > 0) {
+            const matchingIndex = unitOptions.findIndex((opt) => opt.code === currentAnswer.valueQuantity?.code);
+            if (matchingIndex !== -1) {
+                setSelectedUnitIndex(matchingIndex);
+            }
+        }
+    }, [currentAnswer?.valueQuantity?.code, unitOptions]);
+    // Default unit with proper bounds checking
+    const defaultUnit = { display: "", code: "", system: "" };
+    const currentUnit = unitOptions.length > 0 && selectedUnitIndex < unitOptions.length
+        ? (unitOptions[selectedUnitIndex] ?? defaultUnit)
+        : defaultUnit;
+    // Get input value from current answer
+    const [inputValue, setInputValue] = useState(() => {
+        const qty = currentAnswer?.valueQuantity;
+        if (qty?.value !== undefined)
+            return String(qty.value);
+        return "";
+    });
+    const handleChange = (raw) => {
+        setInputValue(raw);
+        if (raw === "") {
+            onQuantityChange("", currentUnit?.display ?? "", currentUnit?.system ?? "", currentUnit?.code ?? "");
+            return;
+        }
+        const num = parseFloat(raw);
+        if (!isNaN(num)) {
+            onQuantityChange(String(num), currentUnit?.display ?? "", currentUnit?.system ?? "", currentUnit?.code ?? "");
+        }
+    };
+    const handleUnitChange = (index) => {
+        // Validate index bounds
+        if (index < 0 || index >= unitOptions.length)
+            return;
+        setSelectedUnitIndex(index);
+        // Clear the input when unit changes since the value is in different units
+        setInputValue("");
+        const newUnit = unitOptions[index];
+        if (newUnit) {
+            onQuantityChange("", newUnit.display, newUnit.system, newUnit.code);
+        }
+    };
+    // If no unit options are defined, render as a simple decimal input
+    if (unitOptions.length === 0) {
+        return (_jsx("input", { type: "number", className: `wq-question-input ${inputClassName}`, value: currentAnswer?.valueQuantity?.value ?? "", onChange: (e) => onQuantityChange(e.target.value, "", "", ""), placeholder: "Enter a value", step: "0.1" }));
+    }
+    return (_jsxs("div", { className: "wq-quantity-question", children: [_jsxs("div", { className: "wq-quantity-input-row", children: [_jsx("input", { type: "number", className: `wq-question-input wq-quantity-input-field ${inputClassName}`, value: inputValue, onChange: (e) => handleChange(e.target.value), placeholder: `Enter value${currentUnit?.display ? ` in ${currentUnit.display}` : ""}`, step: "0.1" }), _jsx("span", { className: "wq-quantity-unit-label", children: currentUnit?.display ?? "" })] }), unitOptions.length > 1 && (_jsx("div", { className: "wq-quantity-unit-toggle", children: unitOptions.map((unit, i) => (_jsx("button", { type: "button", className: `wq-quantity-unit-option ${i === selectedUnitIndex ? "wq-selected" : ""}`, onClick: () => handleUnitChange(i), children: unit.display }, unit.code))) }))] }));
+};

package/dist/esm/index.d.ts

@@ -1,12 +1,14 @@
 export { QuestionRenderer } from "./components/question-renderer.js";
 export type { QuestionRendererProps } from "./components/question-renderer.js";
+export { QuantityQuestion } from "./components/questions/quantity-question.js";
+export type { QuantityQuestionProps } from "./components/questions/quantity-question.js";
 export { BmiForm } from "./components/bmi-form.js";
 export type { BmiFormProps } from "./components/bmi-form.js";
 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,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/index.js

@@ -1,5 +1,6 @@
 // Components
 export { QuestionRenderer } from "./components/question-renderer.js";
+export { QuantityQuestion } from "./components/questions/quantity-question.js";
 export { BmiForm } from "./components/bmi-form.js";
 export { LegalConsentForm } from "./components/legal-consent-form.js";
 // Contexts

package/dist/esm/lib/constants.d.ts

@@ -21,6 +21,13 @@ export declare const FHIR_EXTENSIONS: {
      * @see http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemAnswerMedia
      */
     readonly ITEM_ANSWER_MEDIA: "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemAnswerMedia";
+    /**
+     * Standard FHIR extension for defining unit options for quantity questions
+     * Allows users to select from predefined units of measurement
+     * Type: valueCoding with system, code, and display for the unit
+     * @see http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption
+     */
+    readonly QUESTIONNAIRE_UNIT_OPTION: "http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption";
 };
 /**
  * Welshare Custom Extension URLs

package/dist/esm/lib/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/lib/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,eAAe;IAC1B;;;;OAIG;;IAIH;;;;OAIG;;IAIH;;;;OAIG;;CAGK,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;IAC9B;;;;;;;;;;;OAWG;;IAIH;;;;;;;;;;;;;;;;;OAiBG;;IAIH;;;;;;;;;;;;;;;;OAgBG;;CAGK,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,qBAAqB;IAChC;;;;OAIG;;CAEK,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,iBAAiB;IAC5B;;;;OAIG;;CAEK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/lib/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,eAAe;IAC1B;;;;OAIG;;IAIH;;;;OAIG;;IAIH;;;;OAIG;;IAIH;;;;;OAKG;;CAGK,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;IAC9B;;;;;;;;;;;OAWG;;IAIH;;;;;;;;;;;;;;;;;OAiBG;;IAIH;;;;;;;;;;;;;;;;OAgBG;;CAGK,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,qBAAqB;IAChC;;;;OAIG;;CAEK,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,iBAAiB;IAC5B;;;;OAIG;;CAEK,CAAC"}

package/dist/esm/lib/constants.js

@@ -21,6 +21,13 @@ export const FHIR_EXTENSIONS = {
      * @see http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemAnswerMedia
      */
     ITEM_ANSWER_MEDIA: "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemAnswerMedia",
+    /**
+     * Standard FHIR extension for defining unit options for quantity questions
+     * Allows users to select from predefined units of measurement
+     * Type: valueCoding with system, code, and display for the unit
+     * @see http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption
+     */
+    QUESTIONNAIRE_UNIT_OPTION: "http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption",
 };
 /**
  * Welshare Custom Extension URLs

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);
@@ -106,6 +130,65 @@
   font-weight: var(--wq-font-weight-normal);
 }
 
+/* === Quantity Inputs === */
+.wq-quantity-question {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wq-space-md);
+}
+
+.wq-quantity-input-row {
+  display: flex;
+  align-items: center;
+  gap: var(--wq-space-sm);
+}
+
+.wq-quantity-input-field {
+  flex: 1;
+}
+
+.wq-quantity-unit-label {
+  font-size: var(--wq-font-size-base);
+  font-weight: var(--wq-font-weight-medium);
+  color: var(--wq-color-text-primary);
+  opacity: 0.7;
+  min-width: 2rem;
+}
+
+.wq-quantity-unit-toggle {
+  display: flex;
+  gap: 0;
+  border: var(--wq-border-width) solid var(--wq-color-border);
+  border-radius: var(--wq-radius-md);
+  overflow: hidden;
+  width: fit-content;
+}
+
+.wq-quantity-unit-option {
+  padding: var(--wq-space-sm) var(--wq-space-lg);
+  font-size: var(--wq-font-size-sm);
+  font-family: inherit;
+  background: var(--wq-color-surface);
+  color: var(--wq-color-text-primary);
+  border: none;
+  cursor: pointer;
+  transition: all var(--wq-transition-fast);
+}
+
+.wq-quantity-unit-option:not(:last-child) {
+  border-right: var(--wq-border-width) solid var(--wq-color-border);
+}
+
+.wq-quantity-unit-option.wq-selected {
+  background: var(--wq-color-primary);
+  color: white;
+  font-weight: var(--wq-font-weight-semibold);
+}
+
+.wq-quantity-unit-option:hover:not(.wq-selected) {
+  background-color: var(--wq-color-background);
+}
+
 /* === Text Inputs === */
 .wq-question-input {
   width: 100%;
@@ -248,6 +331,34 @@
   font-weight: var(--wq-font-weight-medium);
 }
 
+/* === Open-Choice (coded options + free-text "Other") === */
+.wq-open-choice {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wq-space-md);
+}
+
+.wq-open-choice-other {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wq-space-sm);
+  margin-top: var(--wq-space-sm);
+}
+
+.wq-open-choice-other-label {
+  font-size: var(--wq-font-size-sm);
+  font-weight: var(--wq-font-weight-medium);
+  color: var(--wq-color-text-secondary);
+}
+
+.wq-open-choice-other-active .wq-open-choice-other-label {
+  color: var(--wq-color-text-primary);
+}
+
+.wq-open-choice-other-input {
+  max-width: 24rem;
+}
+
 /* === Unsupported Type === */
 .wq-unsupported-type {
   padding: var(--wq-space-lg);
@@ -315,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.4",
+  "version": "0.2.7",
   "description": "FHIR Questionnaire components for React with state management and validation",
   "keywords": [
     "react",
@@ -38,7 +38,7 @@
     "storybook": "^10.1.11",
     "@storybook/react": "^10.1.11",
     "@storybook/react-vite": "^10.1.11",
-    "@welshare/sdk": "0.3.4",
+    "@welshare/sdk": "0.3.5",
     "@workspace/eslint-config": "0.0.0",
     "@workspace/typescript-config": "0.0.0"
   },