@welshare/questionnaire 0.1.2 → 0.2.1

package/README.md

@@ -11,16 +11,16 @@ npm install @welshare/questionnaire
 ## Quick Start
 
 ```tsx
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import {
   QuestionnaireProvider,
   useQuestionnaire,
   QuestionRenderer,
   getVisiblePages,
   type Questionnaire,
-} from '@welshare/questionnaire';
-import '@welshare/questionnaire/tokens.css';
-import '@welshare/questionnaire/styles.css';
+} from "@welshare/questionnaire";
+import "@welshare/questionnaire/tokens.css";
+import "@welshare/questionnaire/styles.css";
 
 function QuestionnairePage() {
   const { questionnaire, isPageValid } = useQuestionnaire();
@@ -45,11 +45,13 @@ function QuestionnairePage() {
 }
 
 function App() {
-  const [questionnaire, setQuestionnaire] = useState<Questionnaire | null>(null);
+  const [questionnaire, setQuestionnaire] = useState<Questionnaire | null>(
+    null
+  );
 
   useEffect(() => {
-    fetch('/api/questionnaire/your-id')
-      .then(res => res.json())
+    fetch("/api/questionnaire/your-id")
+      .then((res) => res.json())
       .then(setQuestionnaire);
   }, []);
 
@@ -68,6 +70,7 @@ function App() {
 ### QuestionnaireProvider
 
 **Props:**
+
 - `questionnaire: Questionnaire` - FHIR Questionnaire object
 - `questionnaireId?: string` - Optional ID override (defaults to `questionnaire.id`)
 - `useNestedStructure?: boolean` - Nested or flat response structure (default: `true`)
@@ -76,18 +79,27 @@ function App() {
 
 ```tsx
 const {
-  questionnaire, response,
-  updateAnswer, updateMultipleAnswers,
-  getAnswer, getAnswers,
-  isPageValid, getRequiredQuestions, getUnansweredRequiredQuestions,
-  markValidationErrors, clearValidationErrors, hasValidationError,
-  debugMode, toggleDebugMode,
+  questionnaire,
+  response,
+  updateAnswer,
+  updateMultipleAnswers,
+  getAnswer,
+  getAnswers,
+  isPageValid,
+  getRequiredQuestions,
+  getUnansweredRequiredQuestions,
+  markValidationErrors,
+  clearValidationErrors,
+  hasValidationError,
+  debugMode,
+  toggleDebugMode,
 } = useQuestionnaire();
 ```
 
 ### QuestionRenderer
 
 **Props:**
+
 - `item: QuestionnaireItem` - Questionnaire item to render
 - `className?: string` - Container CSS classes
 - `inputClassName?: string` - Input CSS classes
@@ -97,12 +109,78 @@ 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:
@@ -134,40 +212,240 @@ Override CSS custom properties:
 ## FHIR Extensions
 
 ### Hidden Questions
+
 ```json
 {
-  "extension": [{
-    "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-hidden",
-    "valueBoolean": true
-  }]
+  "extension": [
+    {
+      "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-hidden",
+      "valueBoolean": true
+    }
+  ]
+}
+```
+
+### Media Attachments (Images)
+
+Display images or other media content with question items using the FHIR SDC (Structured Data Capture) extensions.
+
+**Item Media (images on questions):**
+
+```json
+{
+  "linkId": "body-diagram",
+  "text": "Where is the pain located?",
+  "type": "choice",
+  "extension": [
+    {
+      "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemMedia",
+      "valueAttachment": {
+        "contentType": "image/png",
+        "url": "https://example.com/images/body-diagram.png",
+        "title": "Body diagram"
+      }
+    }
+  ]
+}
+```
+
+**Answer Option Media (images on answer options):**
+
+```json
+{
+  "linkId": "skin-condition",
+  "text": "Which image best matches your condition?",
+  "type": "choice",
+  "answerOption": [
+    {
+      "valueCoding": {
+        "code": "mild",
+        "display": "Mild"
+      },
+      "extension": [
+        {
+          "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemAnswerMedia",
+          "valueAttachment": {
+            "contentType": "image/jpeg",
+            "url": "https://example.com/images/mild.jpg",
+            "title": "Mild condition"
+          }
+        }
+      ]
+    },
+    {
+      "valueCoding": {
+        "code": "severe",
+        "display": "Severe"
+      },
+      "extension": [
+        {
+          "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemAnswerMedia",
+          "valueAttachment": {
+            "contentType": "image/jpeg",
+            "url": "https://example.com/images/severe.jpg",
+            "title": "Severe condition"
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+**CSS Classes for Styling:**
+
+- `.wq-question-media` - Container for question-level images
+- `.wq-question-image` - Individual question image
+- `.wq-choice-option-wrapper` - Wrapper around answer option with image
+- `.wq-choice-option-image` - Individual answer option image
+
+**Example Styling:**
+
+```css
+.wq-question-image {
+  max-width: 100%;
+  height: auto;
+  margin-bottom: 1rem;
+  border-radius: 0.5rem;
+}
+
+.wq-choice-option-image {
+  max-width: 200px;
+  height: auto;
+  margin-bottom: 0.5rem;
+  border-radius: 0.25rem;
 }
 ```
 
 ### Slider Controls
+
 ```json
 {
-  "extension": [{
-    "url": "http://codes.welshare.app/StructureDefinition/questionnaire-slider-control",
-    "extension": [
-      { "url": "minValue", "valueInteger": 0 },
-      { "url": "maxValue", "valueInteger": 100 },
-      { "url": "step", "valueInteger": 1 },
-      { "url": "unit", "valueString": "minutes" }
-    ]
-  }]
+  "extension": [
+    {
+      "url": "http://codes.welshare.app/StructureDefinition/questionnaire-slider-control",
+      "extension": [
+        { "url": "minValue", "valueInteger": 0 },
+        { "url": "maxValue", "valueInteger": 100 },
+        { "url": "step", "valueInteger": 1 },
+        { "url": "unit", "valueString": "minutes" }
+      ]
+    }
+  ]
 }
 ```
 
 ### Exclusive Options
+
+```json
+{
+  "extension": [
+    {
+      "url": "http://codes.welshare.app/StructureDefinition/questionnaire-exclusive-option",
+      "valueString": "none-of-the-above-code"
+    }
+  ]
+}
+```
+
+### 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
 {
-  "extension": [{
-    "url": "http://codes.welshare.app/StructureDefinition/questionnaire-exclusive-option",
-    "valueString": "none-of-the-above-code"
-  }]
+  "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,4CA8Sd,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/media-attachment.d.ts

@@ -0,0 +1,21 @@
+import type { Attachment } from "../types/fhir.js";
+export interface MediaAttachmentProps {
+    attachment: Attachment;
+    alt: string;
+    className?: string;
+}
+/**
+ * Renders a single media attachment (image) if it has a URL and is an image type
+ */
+export declare const MediaAttachment: ({ attachment, alt, className, }: MediaAttachmentProps) => import("react/jsx-runtime").JSX.Element | null;
+export interface MediaAttachmentsProps {
+    attachments: Attachment[];
+    baseAlt?: string;
+    className?: string;
+    containerClassName?: string;
+}
+/**
+ * Renders multiple media attachments in a container
+ */
+export declare const MediaAttachments: ({ attachments, baseAlt, className, containerClassName, }: MediaAttachmentsProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=media-attachment.d.ts.map

package/dist/esm/components/media-attachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-attachment.d.ts","sourceRoot":"","sources":["../../../src/components/media-attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,iCAI7B,oBAAoB,mDAkBtB,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,0DAK9B,qBAAqB,mDAevB,CAAC"}

package/dist/esm/components/media-attachment.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Renders a single media attachment (image) if it has a URL and is an image type
+ */
+export const MediaAttachment = ({ attachment, alt, className = "", }) => {
+    // Only render if URL exists
+    if (!attachment.url)
+        return null;
+    // Check if it's an image (or assume image if no contentType)
+    const isImage = !attachment.contentType || attachment.contentType.startsWith("image/");
+    if (!isImage)
+        return null;
+    return (_jsx("img", { src: attachment.url, alt: alt, className: className, title: attachment.title }));
+};
+/**
+ * Renders multiple media attachments in a container
+ */
+export const MediaAttachments = ({ attachments, baseAlt = "Image", className = "", containerClassName = "", }) => {
+    if (attachments.length === 0)
+        return null;
+    return (_jsx("div", { className: containerClassName, children: attachments.map((attachment, index) => (_jsx(MediaAttachment, { attachment: attachment, alt: attachment.title || `${baseAlt} ${index + 1}`, className: className }, index))) }));
+};