@welshare/questionnaire 0.1.2 → 0.2.0

package/README.md

@@ -97,12 +97,74 @@ const {
 
 **Supported Types:** `choice`, `boolean`, `integer`, `decimal`, `string`, `text`
 
+### BmiForm
+
+A controlled component for collecting height, weight, and calculating BMI. The component acts as an input helper that manages BMI calculation internally and reports changes to the parent via callbacks. Unit system (metric/imperial) is managed internally and automatically clears all fields when switched.
+
+**Props:**
+- `height: number` - Current height value (0 when empty)
+- `weight: number` - Current weight value (0 when empty)
+- `bmi: number` - Current BMI value (calculated and set by the component, 0 when not calculated)
+- `onHeightChange: (value: number, unit: "cm" | "in") => void` - Called when height changes, includes current unit
+- `onWeightChange: (value: number, unit: "kg" | "lb") => void` - Called when weight changes, includes current unit
+- `onBmiChange: (value: number) => void` - Called when BMI is calculated or cleared
+- `className?: string` - Optional CSS classes
+
+**Features:**
+- Controlled numeric values (height, weight, bmi) managed by parent
+- BMI calculation handled internally by the component
+- Unit system managed internally (defaults to metric)
+- Automatically clears all fields (sets to 0) when switching unit systems
+- No unit conversion - values are cleared on unit system change
+- Uses consistent styling with questionnaire components
+
+**Example:**
+
+```tsx
+import { useState } from 'react';
+import { BmiForm, getBmiCategory } from '@welshare/questionnaire';
+import '@welshare/questionnaire/tokens.css';
+import '@welshare/questionnaire/styles.css';
+
+function MyComponent() {
+  const [height, setHeight] = useState(0);
+  const [weight, setWeight] = useState(0);
+  const [bmi, setBmi] = useState(0);
+
+  const handleBmiChange = (value: number) => {
+    setBmi(value);
+    
+    // Optional: Get BMI category
+    if (value) {
+      const category = getBmiCategory(value);
+      console.log(`BMI Category: ${category}`);
+    }
+  };
+
+  return (
+    <BmiForm
+      height={height}
+      weight={weight}
+      bmi={bmi}
+      onHeightChange={(value, unit) => setHeight(value)}
+      onWeightChange={(value, unit) => setWeight(value)}
+      onBmiChange={handleBmiChange}
+    />
+  );
+}
+```
+
 ### Utilities
 
+**Questionnaire Utilities:**
 - `getVisiblePages(questionnaire)` - Get visible page groups
 - `calculateProgress(currentIndex, total)` - Calculate progress percentage
 - `getAllQuestionsFromPage(pageItem)` - Get all questions from a page
 
+**BMI Helper Functions:**
+- `calculateBmi(height, weight, unitSystem)` - Calculate BMI from height and weight
+- `getBmiCategory(bmi)` - Get WHO BMI category (Underweight, Normal weight, Overweight, Obese)
+
 ## Theming
 
 Override CSS custom properties:
@@ -168,6 +230,95 @@ Override CSS custom properties:
 }
 ```
 
+### Input Helpers
+
+Input helpers allow you to provide auxiliary UI (like calculators or lookup dialogs) to assist users in filling out form fields. The library detects the extension and calls your `renderHelperTrigger` function, but you control the dialog/modal implementation.
+
+**FHIR Extension:**
+```json
+{
+  "linkId": "bmi",
+  "text": "Body Mass Index",
+  "type": "decimal",
+  "extension": [{
+    "url": "http://codes.welshare.app/StructureDefinition/questionnaire-inputHelper",
+    "valueCodeableConcept": {
+      "coding": [{
+        "system": "http://codes.welshare.app/input-helper-type",
+        "code": "bmi-calculator",
+        "display": "BMI Calculator"
+      }],
+      "text": "Calculate BMI from height and weight"
+    }
+  }]
+}
+```
+
+**Implementation:**
+
+```tsx
+import { useState } from 'react';
+import { QuestionRenderer, BmiForm, type HelperTriggerProps } from '@welshare/questionnaire';
+
+function MyQuestionnaireRenderer({ item }) {
+  const [showBmiDialog, setShowBmiDialog] = useState(false);
+  const [helperCallback, setHelperCallback] = useState<((v: string | number) => void) | null>(null);
+
+  const handleHelperTrigger = ({ helper, onValueSelected }: HelperTriggerProps) => {
+    if (helper.type === 'bmi-calculator') {
+      return (
+        <button
+          type="button"
+          onClick={() => {
+            setHelperCallback(() => onValueSelected);
+            setShowBmiDialog(true);
+          }}
+        >
+          {helper.display || 'Calculate'}
+        </button>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <>
+      <QuestionRenderer
+        item={item}
+        renderHelperTrigger={handleHelperTrigger}
+      />
+      
+      {showBmiDialog && (
+        <Dialog onClose={() => setShowBmiDialog(false)}>
+          <BmiForm
+            onSubmit={({ bmi }) => {
+              helperCallback?.(bmi);
+              setShowBmiDialog(false);
+            }}
+          />
+        </Dialog>
+      )}
+    </>
+  );
+}
+```
+
+**Helper Trigger Props:**
+- `helper: InputHelperConfig` - Configuration from the extension
+  - `type: string` - Helper identifier (e.g., "bmi-calculator")
+  - `display?: string` - Display name from the extension
+  - `description?: string` - Description/tooltip text
+- `linkId: string` - The question's linkId
+- `currentValue?: T` - Current field value (if any), where T defaults to `string | number`
+- `onValueSelected: (value: T) => void` - Callback to update the field
+
+**Note:** `HelperTriggerProps<T>` is a generic interface. For decimal questions, it's specialized as `HelperTriggerProps<number>`, but you can use different types for other question types (e.g., `HelperTriggerProps<string>` for text inputs).
+
+**Note:** The library only renders the trigger element you provide. You are responsible for implementing the dialog/modal UI, as this allows you to use your preferred dialog system (e.g., shadcn/ui, Radix UI, MUI, etc.).
+
+
+
+
 ## License
 
 MIT © Welshare UG (haftungsbeschränkt)

package/dist/esm/components/bmi-form.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Result object returned on submission - all values in metric units
+ */
+export interface BmiSubmissionResult {
+    /** Height in centimeters */
+    heightCm: number;
+    /** Weight in kilograms */
+    weightKg: number;
+    /** Calculated BMI (kg/m²) */
+    bmi: number;
+}
+/**
+ * Initial values for the BMI form - always in metric units
+ */
+export interface BmiInitialValues {
+    /** Height in centimeters */
+    heightCm?: number;
+    /** Weight in kilograms */
+    weightKg?: number;
+}
+export interface BmiFormProps {
+    /**
+     * Initial values in metric units (cm, kg).
+     * These are used to populate the form on mount.
+     * If unitPreference is "imperial", they will be converted for display.
+     */
+    initialValues?: BmiInitialValues;
+    /**
+     * Preferred unit system for initial display.
+     * When "imperial", initial metric values are converted for display.
+     * Defaults to "metric".
+     */
+    unitPreference?: "metric" | "imperial";
+    /**
+     * Callback fired when user submits/confirms the BMI values.
+     * Returns all values in metric units (cm, kg).
+     */
+    onSubmit?: (result: BmiSubmissionResult) => void;
+    /**
+     * Callback fired whenever any value changes.
+     * Returns all values in metric units (cm, kg).
+     * Use this for real-time updates without requiring explicit submission.
+     */
+    onChange?: (result: BmiSubmissionResult) => void;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * BMI Form Component
+ *
+ * A self-contained form component for entering height and weight measurements.
+ * Manages all state internally and supports both metric (cm/kg) and imperial (ft+in/lb) input.
+ *
+ * **Clinical Standard Compliance:**
+ * - All external communication uses metric units (cm, kg)
+ * - Imperial inputs are UI conveniences that convert to metric internally
+ * - Initial values must always be provided in metric
+ * - BMI is always calculated using the metric formula: kg / m²
+ *
+ * **Unit System Behavior:**
+ * - Switching unit systems clears all input fields (no automatic conversion)
+ * - Initial values provided in metric are converted to imperial for display
+ *   only when unitPreference is "imperial"
+ */
+export declare const BmiForm: ({ initialValues, unitPreference, onSubmit, onChange, className, }: BmiFormProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=bmi-form.d.ts.map

package/dist/esm/components/bmi-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bmi-form.d.ts","sourceRoot":"","sources":["../../../src/components/bmi-form.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IAEjC;;;;OAIG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEjD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO,GAAI,mEAMrB,YAAY,4CAmSd,CAAC"}

package/dist/esm/components/bmi-form.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { calculateBmi, cmToFeetAndInches, feetAndInchesToCm, kgToLbs, lbsToKg, } from "../lib/bmi-helpers.js";
+/**
+ * BMI Form Component
+ *
+ * A self-contained form component for entering height and weight measurements.
+ * Manages all state internally and supports both metric (cm/kg) and imperial (ft+in/lb) input.
+ *
+ * **Clinical Standard Compliance:**
+ * - All external communication uses metric units (cm, kg)
+ * - Imperial inputs are UI conveniences that convert to metric internally
+ * - Initial values must always be provided in metric
+ * - BMI is always calculated using the metric formula: kg / m²
+ *
+ * **Unit System Behavior:**
+ * - Switching unit systems clears all input fields (no automatic conversion)
+ * - Initial values provided in metric are converted to imperial for display
+ *   only when unitPreference is "imperial"
+ */
+export const BmiForm = ({ initialValues, unitPreference = "metric", onSubmit, onChange, className = "", }) => {
+    // Track if this is the initial render to handle initial value conversion
+    const isInitialRender = useRef(true);
+    // Unit system state - starts with preference
+    const [unitSystem, setUnitSystem] = useState(unitPreference);
+    // Internal state for metric display (cm)
+    const [heightCmInput, setHeightCmInput] = useState("");
+    // Internal state for imperial height display (ft + in)
+    const [feetInput, setFeetInput] = useState("");
+    const [inchesInput, setInchesInput] = useState("");
+    // Internal state for metric weight display (kg)
+    const [weightKgInput, setWeightKgInput] = useState("");
+    // Internal state for imperial weight display (lb)
+    const [weightLbInput, setWeightLbInput] = useState("");
+    // The canonical metric values (source of truth for calculations)
+    const [heightCm, setHeightCm] = useState(0);
+    const [weightKg, setWeightKg] = useState(0);
+    // Calculated BMI (always from metric values)
+    const [bmi, setBmi] = useState(0);
+    // Initialize form with provided values (converted to display units if needed)
+    useEffect(() => {
+        if (!isInitialRender.current)
+            return;
+        isInitialRender.current = false;
+        const initialHeightCm = initialValues?.heightCm ?? 0;
+        const initialWeightKg = initialValues?.weightKg ?? 0;
+        // Set canonical metric values
+        setHeightCm(initialHeightCm);
+        setWeightKg(initialWeightKg);
+        if (unitPreference === "metric") {
+            // Display as metric
+            if (initialHeightCm > 0) {
+                setHeightCmInput(String(initialHeightCm));
+            }
+            if (initialWeightKg > 0) {
+                setWeightKgInput(String(initialWeightKg));
+            }
+        }
+        else {
+            // Convert metric to imperial for display
+            if (initialHeightCm > 0) {
+                const { feet, inches } = cmToFeetAndInches(initialHeightCm);
+                setFeetInput(String(feet));
+                setInchesInput(String(inches));
+            }
+            if (initialWeightKg > 0) {
+                const lbs = Math.round(kgToLbs(initialWeightKg) * 10) / 10;
+                setWeightLbInput(String(lbs));
+            }
+        }
+    }, [initialValues, unitPreference]);
+    // Calculate BMI whenever canonical metric values change
+    useEffect(() => {
+        const calculatedBmi = calculateBmi(heightCm, weightKg);
+        setBmi(calculatedBmi);
+    }, [heightCm, weightKg]);
+    // Notify parent of changes
+    useEffect(() => {
+        if (onChange && !isInitialRender.current) {
+            onChange({ heightCm, weightKg, bmi });
+        }
+    }, [heightCm, weightKg, bmi, onChange]);
+    // Handle unit system change - clear all fields
+    const handleUnitSystemChange = useCallback((newSystem) => {
+        if (newSystem === unitSystem)
+            return;
+        // Clear all inputs
+        setHeightCmInput("");
+        setFeetInput("");
+        setInchesInput("");
+        setWeightKgInput("");
+        setWeightLbInput("");
+        // Clear canonical values
+        setHeightCm(0);
+        setWeightKg(0);
+        setBmi(0);
+        setUnitSystem(newSystem);
+    }, [unitSystem]);
+    // Metric height change (cm)
+    const handleHeightCmChange = useCallback((value) => {
+        setHeightCmInput(value);
+        const numValue = parseFloat(value);
+        setHeightCm(isNaN(numValue) ? 0 : numValue);
+    }, []);
+    // Imperial height change (feet)
+    const handleFeetChange = useCallback((value) => {
+        setFeetInput(value);
+        const feet = parseFloat(value) || 0;
+        const inches = parseFloat(inchesInput) || 0;
+        setHeightCm(feetAndInchesToCm(feet, inches));
+    }, [inchesInput]);
+    // Imperial height change (inches)
+    const handleInchesChange = useCallback((value) => {
+        setInchesInput(value);
+        const feet = parseFloat(feetInput) || 0;
+        const inches = parseFloat(value) || 0;
+        setHeightCm(feetAndInchesToCm(feet, inches));
+    }, [feetInput]);
+    // Metric weight change (kg)
+    const handleWeightKgChange = useCallback((value) => {
+        setWeightKgInput(value);
+        const numValue = parseFloat(value);
+        setWeightKg(isNaN(numValue) ? 0 : numValue);
+    }, []);
+    // Imperial weight change (lb)
+    const handleWeightLbChange = useCallback((value) => {
+        setWeightLbInput(value);
+        const numValue = parseFloat(value);
+        setWeightKg(isNaN(numValue) ? 0 : lbsToKg(numValue));
+    }, []);
+    // Handle form submission
+    const handleSubmit = useCallback(() => {
+        if (onSubmit) {
+            onSubmit({ heightCm, weightKg, bmi });
+        }
+    }, [onSubmit, heightCm, weightKg, bmi]);
+    return (_jsxs("div", { className: `wq-bmi-form ${className}`, children: [_jsxs("div", { className: "wq-bmi-unit-toggle", children: [_jsx("button", { type: "button", className: `wq-bmi-unit-option ${unitSystem === "metric" ? "wq-selected" : ""}`, onClick: () => handleUnitSystemChange("metric"), "aria-pressed": unitSystem === "metric", children: "Metric" }), _jsx("button", { type: "button", className: `wq-bmi-unit-option ${unitSystem === "imperial" ? "wq-selected" : ""}`, onClick: () => handleUnitSystemChange("imperial"), "aria-pressed": unitSystem === "imperial", children: "Imperial" })] }), _jsxs("div", { className: "wq-bmi-field", children: [_jsx("label", { htmlFor: "bmi-height", className: "wq-bmi-label", children: unitSystem === "metric" ? "Height (cm)" : "Height (ft + in)" }), unitSystem === "metric" ? (_jsxs("div", { className: "wq-bmi-input-group", children: [_jsx("input", { id: "bmi-height", type: "number", className: "wq-question-input", value: heightCmInput, onChange: (e) => handleHeightCmChange(e.target.value), placeholder: "Enter height in cm", step: "0.1", min: "0" }), _jsx("span", { className: "wq-bmi-unit", children: "cm" })] })) : (_jsxs("div", { className: "wq-bmi-imperial-height", children: [_jsxs("div", { className: "wq-bmi-input-group", children: [_jsx("input", { id: "bmi-height-feet", type: "number", className: "wq-question-input", value: feetInput, onChange: (e) => handleFeetChange(e.target.value), placeholder: "Feet", step: "1", min: "0" }), _jsx("span", { className: "wq-bmi-unit", children: "ft" })] }), _jsxs("div", { className: "wq-bmi-input-group", children: [_jsx("input", { id: "bmi-height-inches", type: "number", className: "wq-question-input", value: inchesInput, onChange: (e) => handleInchesChange(e.target.value), placeholder: "Inches", step: "0.1", min: "0", max: "11.9" }), _jsx("span", { className: "wq-bmi-unit", children: "in" })] })] }))] }), _jsxs("div", { className: "wq-bmi-field", children: [_jsx("label", { htmlFor: "bmi-weight", className: "wq-bmi-label", children: unitSystem === "metric" ? "Weight (kg)" : "Weight (lbs)" }), _jsx("div", { className: "wq-bmi-input-group", children: unitSystem === "metric" ? (_jsxs(_Fragment, { children: [_jsx("input", { id: "bmi-weight", type: "number", className: "wq-question-input", value: weightKgInput, onChange: (e) => handleWeightKgChange(e.target.value), placeholder: "Enter weight in kg", step: "0.1", min: "0" }), _jsx("span", { className: "wq-bmi-unit", children: "kg" })] })) : (_jsxs(_Fragment, { children: [_jsx("input", { id: "bmi-weight", type: "number", className: "wq-question-input", value: weightLbInput, onChange: (e) => handleWeightLbChange(e.target.value), placeholder: "Enter weight in lbs", step: "0.1", min: "0" }), _jsx("span", { className: "wq-bmi-unit", children: "lbs" })] })) })] }), _jsxs("div", { className: "wq-bmi-field", children: [_jsx("label", { htmlFor: "bmi-result", className: "wq-bmi-label", children: "BMI" }), _jsxs("div", { className: "wq-bmi-input-group", children: [_jsx("input", { id: "bmi-result", type: "text", className: "wq-question-input wq-bmi-result", value: bmi ? bmi.toFixed(1) : "", placeholder: "Calculated automatically", readOnly: true, disabled: true }), _jsx("span", { className: "wq-bmi-unit", children: "kg/m\u00B2" })] })] }), bmi > 0 && (_jsx("div", { className: "wq-bmi-info", children: _jsx("p", { className: "wq-text-secondary", children: "BMI is calculated automatically from height and weight measurements." }) })), onSubmit && (_jsx("div", { className: "wq-bmi-actions", children: _jsx("button", { type: "button", className: "wq-button wq-button-primary", onClick: handleSubmit, disabled: !bmi, children: "Confirm Measurements" }) }))] }));
+};

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 } from "../types/index.js";
+import { RadioInputProps, CheckboxInputProps, HelperTriggerProps } from "../types/index.js";
 export interface QuestionRendererProps {
     item: QuestionnaireItem;
     /**
@@ -66,6 +66,11 @@ export interface QuestionRendererProps {
      * ```
      */
     renderCheckboxInput?: (props: CheckboxInputProps) => ReactNode;
+    /**
+     * Custom renderer for helper triggers on decimal inputs.
+     * Called when a decimal question has an inputHelper extension.
+     */
+    renderHelperTrigger?: (props: HelperTriggerProps) => ReactNode;
 }
 /**
  * Wrapper component that combines the library's QuestionRenderer with debug functionality.

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;AAQ1D,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAExE,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;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;AAU1D,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5F,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"}

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuestionnaire } from "../contexts/questionnaire-context.js";
+import { isQuestionEnabled } from "../lib/questionnaire-utils.js";
+import { FHIR_EXTENSIONS, WELSHARE_EXTENSIONS, FHIR_CODE_SYSTEMS } from "../lib/constants.js";
 import { DebugSection } from "./debug-section.js";
 import { ChoiceQuestion } from "./questions/choice-question.js";
 import { MultipleChoiceQuestion } from "./questions/multiple-choice-question.js";
 import { IntegerQuestion } from "./questions/integer-question.js";
-import { DecimalQuestion } from "./questions/decimal-question.js";
+import { DecimalQuestion, getDecimalHelperTriggerProps } from "./questions/decimal-question.js";
 import { StringQuestion } from "./questions/string-question.js";
 import { BooleanQuestion } from "./questions/boolean-question.js";
 /**
@@ -22,7 +24,7 @@ export const QuestionRenderer = (rendererProps) => {
     const currentAnswer = getAnswer(item.linkId);
     const currentAnswers = getAnswers(item.linkId);
     // Find LOINC code if present
-    const loincCode = item.code?.find((coding) => coding.system === "http://loinc.org");
+    const loincCode = item.code?.find((coding) => coding.system === FHIR_CODE_SYSTEMS.LOINC);
     return (_jsxs("div", { children: [_jsx(QuestionRendererInternal, { ...rendererProps }), debugMode && (_jsx(DebugSection, { item: item, currentAnswer: currentAnswer, currentAnswers: currentAnswers, loincCode: loincCode }))] }));
 };
 /**
@@ -35,22 +37,26 @@ export const QuestionRenderer = (rendererProps) => {
  * - Auto-populated (hidden) fields
  * - Validation error display
  */
-const QuestionRendererInternal = ({ item, className = "", inputClassName = "", choiceClassName = "", renderRadioInput, renderCheckboxInput, }) => {
+const QuestionRendererInternal = ({ item, className = "", inputClassName = "", choiceClassName = "", renderRadioInput, renderCheckboxInput, renderHelperTrigger, }) => {
     const { updateAnswer, updateMultipleAnswers, getAnswer, getAnswers, hasValidationError, } = useQuestionnaire();
     const currentAnswer = getAnswer(item.linkId);
     const currentAnswers = getAnswers(item.linkId);
     const hasError = hasValidationError(item.linkId);
     // Check if this field should be hidden (auto-populated)
-    const isAutoPopulated = item.extension?.some((ext) => ext.url ===
-        "http://hl7.org/fhir/StructureDefinition/questionnaire-hidden" &&
+    const isAutoPopulated = item.extension?.some((ext) => ext.url === FHIR_EXTENSIONS.QUESTIONNAIRE_HIDDEN &&
         ext.valueBoolean === true);
     // Don't render auto-populated fields
     if (isAutoPopulated) {
         return null;
     }
+    // Don't render questions that don't meet their enableWhen conditions
+    if (!isQuestionEnabled(item, getAnswer)) {
+        return null;
+    }
     const handleChoiceChange = (valueCoding, valueInteger) => {
         // For choice questions, only set one field: valueCoding takes precedence
-        if (valueCoding && (valueCoding.code || valueCoding.display || valueCoding.system)) {
+        if (valueCoding &&
+            (valueCoding.code || valueCoding.display || valueCoding.system)) {
             updateAnswer(item.linkId, { valueCoding });
         }
         else if (valueInteger !== undefined) {
@@ -60,8 +66,7 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
     const handleMultipleChoiceToggle = (valueCoding, valueInteger) => {
         const isSelected = currentAnswers.some((answer) => answer.valueCoding?.code === valueCoding.code);
         // Check if there's an exclusive option extension
-        const exclusiveOptionExt = item.extension?.find((ext) => ext.url ===
-            "http://codes.welshare.app/StructureDefinition/questionnaire-exclusive-option");
+        const exclusiveOptionExt = item.extension?.find((ext) => ext.url === WELSHARE_EXTENSIONS.EXCLUSIVE_OPTION);
         const exclusiveOptionCode = exclusiveOptionExt?.valueString;
         let newAnswers;
         if (isSelected) {
@@ -73,7 +78,8 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
             if (exclusiveOptionCode && valueCoding.code === exclusiveOptionCode) {
                 // Clear all other answers and only keep this one
                 // For choice questions, only set one field: valueCoding takes precedence
-                const answer = valueCoding && (valueCoding.code || valueCoding.display || valueCoding.system)
+                const answer = valueCoding &&
+                    (valueCoding.code || valueCoding.display || valueCoding.system)
                     ? { valueCoding }
                     : valueInteger !== undefined
                         ? { valueInteger }
@@ -87,7 +93,8 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
                     // Remove exclusive option and add new selection
                     newAnswers = currentAnswers.filter((answer) => answer.valueCoding?.code !== exclusiveOptionCode);
                     // For choice questions, only set one field: valueCoding takes precedence
-                    const answer = valueCoding && (valueCoding.code || valueCoding.display || valueCoding.system)
+                    const answer = valueCoding &&
+                        (valueCoding.code || valueCoding.display || valueCoding.system)
                         ? { valueCoding }
                         : valueInteger !== undefined
                             ? { valueInteger }
@@ -99,7 +106,8 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
                     const maxAnswers = item.maxAnswers || Number.MAX_SAFE_INTEGER;
                     if (currentAnswers.length < maxAnswers) {
                         // For choice questions, only set one field: valueCoding takes precedence
-                        const answer = valueCoding && (valueCoding.code || valueCoding.display || valueCoding.system)
+                        const answer = valueCoding &&
+                            (valueCoding.code || valueCoding.display || valueCoding.system)
                             ? { valueCoding }
                             : valueInteger !== undefined
                                 ? { valueInteger }
@@ -145,8 +153,7 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
     };
     // Check if this field should use a slider control
     const getSliderConfig = () => {
-        const sliderExt = item.extension?.find((ext) => ext.url ===
-            "http://codes.welshare.app/StructureDefinition/questionnaire-slider-control");
+        const sliderExt = item.extension?.find((ext) => ext.url === WELSHARE_EXTENSIONS.SLIDER_CONTROL);
         if (!sliderExt?.extension)
             return null;
         const minValue = sliderExt.extension.find((e) => e.url === "minValue")?.valueInteger ?? 0;
@@ -179,5 +186,9 @@ const QuestionRendererInternal = ({ item, className = "", inputClassName = "", c
                 return (_jsxs("div", { className: "wq-unsupported-type", children: ["Unsupported question type: ", item.type] }));
         }
     };
-    return (_jsxs("div", { className: `wq-question-container ${hasError ? "wq-has-error" : ""} ${className}`, children: [_jsxs("div", { className: "wq-question-text", children: [item.text, item.required && _jsx("span", { className: "wq-required-indicator", children: "*" })] }), renderQuestion()] }));
+    // Get helper trigger for decimal questions
+    const helperTriggerProps = item.type === "decimal"
+        ? getDecimalHelperTriggerProps(item, currentAnswer, handleDecimalChange)
+        : null;
+    return (_jsxs("div", { className: `wq-question-container ${hasError ? "wq-has-error" : ""} ${className}`, children: [_jsxs("div", { className: "wq-question-label-row", children: [_jsxs("div", { className: "wq-question-text", children: [item.text, item.required && _jsx("span", { className: "wq-required-indicator", children: "*" })] }), helperTriggerProps && renderHelperTrigger && (_jsx("div", { className: "wq-question-helper-trigger", children: renderHelperTrigger(helperTriggerProps) }))] }), renderQuestion()] }));
 };

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

@@ -1,4 +1,5 @@
 import type { QuestionnaireItem, QuestionnaireResponseAnswer } from "../../types/fhir.js";
+import type { HelperTriggerProps } from "../../types/index.js";
 export interface DecimalQuestionProps {
     item: QuestionnaireItem;
     currentAnswer?: QuestionnaireResponseAnswer;
@@ -7,6 +8,12 @@ export interface DecimalQuestionProps {
 }
 /**
  * Renders a decimal question with number input
+ * Helper trigger is now rendered in the question label row by the parent component
  */
-export declare const DecimalQuestion: ({ item, currentAnswer, onDecimalChange, inputClassName, }: DecimalQuestionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DecimalQuestion: ({ currentAnswer, onDecimalChange, inputClassName, }: DecimalQuestionProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Get helper trigger props for a decimal question if available
+ * Returns null if no helper is configured
+ */
+export declare const getDecimalHelperTriggerProps: (item: QuestionnaireItem, currentAnswer: QuestionnaireResponseAnswer | undefined, onDecimalChange: (value: string) => void) => HelperTriggerProps | null;
 //# sourceMappingURL=decimal-question.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"decimal-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/decimal-question.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,iBAAiB,CAAC;IACxB,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,2DAK7B,oBAAoB,4CAWtB,CAAC"}
+{"version":3,"file":"decimal-question.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/decimal-question.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,iBAAiB,CAAC;IACxB,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,qDAI7B,oBAAoB,4CAWtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,4BAA4B,GACvC,MAAM,iBAAiB,EACvB,eAAe,2BAA2B,GAAG,SAAS,EACtD,iBAAiB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KACvC,kBAAkB,GAAG,IAavB,CAAC"}

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

@@ -1,7 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getInputHelper } from "../../lib/questionnaire-utils.js";
 /**
  * Renders a decimal question with number input
+ * Helper trigger is now rendered in the question label row by the parent component
  */
-export const DecimalQuestion = ({ item, currentAnswer, onDecimalChange, inputClassName = "", }) => {
+export const DecimalQuestion = ({ currentAnswer, onDecimalChange, inputClassName = "", }) => {
     return (_jsx("input", { type: "number", className: `wq-question-input ${inputClassName}`, value: currentAnswer?.valueDecimal ?? "", onChange: (e) => onDecimalChange(e.target.value), placeholder: "Enter a number", step: "0.1" }));
 };
+/**
+ * Get helper trigger props for a decimal question if available
+ * Returns null if no helper is configured
+ */
+export const getDecimalHelperTriggerProps = (item, currentAnswer, onDecimalChange) => {
+    const helper = getInputHelper(item);
+    if (!helper) {
+        return null;
+    }
+    return {
+        helper,
+        linkId: item.linkId,
+        currentValue: currentAnswer?.valueDecimal,
+        onValueSelected: (value) => onDecimalChange(String(value)),
+    };
+};

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;AAC7B,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,4CA0F7B,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;AAE7B,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,4CAwF7B,CAAC"}

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WELSHARE_EXTENSIONS } from "../../lib/constants.js";
 /**
  * Renders a multi-select choice question with checkboxes
  * Supports exclusive options and maxAnswers limits
@@ -7,8 +8,7 @@ export const MultipleChoiceQuestion = ({ item, currentAnswers, onMultipleChoiceT
     const maxAnswers = item.maxAnswers || Number.MAX_SAFE_INTEGER;
     const atMaxAnswers = currentAnswers.length >= maxAnswers;
     // Check if there's an exclusive option extension
-    const exclusiveOptionExt = item.extension?.find((ext) => ext.url ===
-        "http://codes.welshare.app/StructureDefinition/questionnaire-exclusive-option");
+    const exclusiveOptionExt = item.extension?.find((ext) => ext.url === WELSHARE_EXTENSIONS.EXCLUSIVE_OPTION);
     const exclusiveOptionCode = exclusiveOptionExt?.valueString;
     // Check if the exclusive option is currently selected
     const exclusiveSelected = exclusiveOptionCode &&

package/dist/esm/contexts/questionnaire-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"questionnaire-context.d.ts","sourceRoot":"","sources":["../../../src/contexts/questionnaire-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,2BAA2B,EAE5B,MAAM,kBAAkB,CAAC;AAG1B,MAAM,WAAW,wBAAwB;IACvC,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,qBAAqB,CAAC;IAChC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,2BAA2B,KAAK,IAAI,CAAC;IAC5E,qBAAqB,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,2BAA2B,EAAE,KACnC,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,2BAA2B,GAAG,SAAS,CAAC;IACvE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,2BAA2B,EAAE,CAAC;IAC9D,WAAW,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,OAAO,CAAC;IACzD,oBAAoB,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,CAAC;IAC9E,8BAA8B,EAAE,CAC9B,SAAS,EAAE,iBAAiB,EAAE,KAC3B,iBAAiB,EAAE,CAAC;IACzB,oBAAoB,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAC/D,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAMD,eAAO,MAAM,gBAAgB,gCAQ5B,CAAC;AAEF,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC;IAC7B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB,GAAI,mEAKnC,0BAA0B,4CAoa5B,CAAC"}
+{"version":3,"file":"questionnaire-context.d.ts","sourceRoot":"","sources":["../../../src/contexts/questionnaire-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,2BAA2B,EAE5B,MAAM,kBAAkB,CAAC;AAM1B,MAAM,WAAW,wBAAwB;IACvC,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,qBAAqB,CAAC;IAChC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,2BAA2B,KAAK,IAAI,CAAC;IAC5E,qBAAqB,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,2BAA2B,EAAE,KACnC,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,2BAA2B,GAAG,SAAS,CAAC;IACvE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,2BAA2B,EAAE,CAAC;IAC9D,WAAW,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,OAAO,CAAC;IACzD,oBAAoB,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,CAAC;IAC9E,8BAA8B,EAAE,CAC9B,SAAS,EAAE,iBAAiB,EAAE,KAC3B,iBAAiB,EAAE,CAAC;IACzB,oBAAoB,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAC/D,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAMD,eAAO,MAAM,gBAAgB,gCAQ5B,CAAC;AAEF,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC;IAC7B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB,GAAI,mEAKnC,0BAA0B,4CAya5B,CAAC"}

package/dist/esm/contexts/questionnaire-context.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState, } from "react";
-import { getAllQuestionsFromPage } from "../lib/questionnaire-utils.js";
+import { getAllQuestionsFromPage, isQuestionEnabled, } from "../lib/questionnaire-utils.js";
 const QuestionnaireContext = createContext(undefined);
 export const useQuestionnaire = () => {
     const context = useContext(QuestionnaireContext);
@@ -258,7 +258,8 @@ export const QuestionnaireProvider = ({ children, questionnaire, questionnaireId
             type: "group",
             item: pageItems,
         });
-        return allQuestionsOnPage.filter((item) => item.required === true);
+        // Filter for required questions that are also enabled (meet their enableWhen conditions)
+        return allQuestionsOnPage.filter((item) => item.required === true && isQuestionEnabled(item, getAnswer));
     };
     const isNonEmptyString = (value) => typeof value === "string" && value.trim().length > 0;
     const hasMeaningfulAnswer = (answer) => {