@ovok/native 0.3.4

package/lib/module/modules/picker-sheet/components/wheel-picker.js

@@ -0,0 +1,195 @@
+"use strict";
+
+/* eslint-disable max-lines */
+import * as React from "react";
+import { View, StyleSheet, FlatList } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import Animated, { useSharedValue, useAnimatedScrollHandler, runOnJS, useAnimatedRef, scrollTo } from "react-native-reanimated";
+import { useAppTheme } from "../../theme/index.js";
+import { WheelPickerItem } from "./wheel-picker-item.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+export const WheelPicker = /*#__PURE__*/React.memo(({
+  selectedIndex,
+  options,
+  onChange,
+  selectedIndicatorStyle,
+  containerStyle,
+  itemStyle,
+  itemTextStyle,
+  itemHeight = 40,
+  visibleItems = 5,
+  decelerationRate = "fast",
+  containerProps
+}) => {
+  const theme = useAppTheme();
+
+  // Refs
+  const flatListRef = useAnimatedRef();
+  const isInitialized = React.useRef(false);
+  const mountedRef = React.useRef(false);
+
+  // Shared values
+  const scrollPosition = useSharedValue(0);
+  const itemCount = options.length;
+  const isScrolling = useSharedValue(false);
+
+  // Padding to ensure items at the beginning and end can be centered
+  const paddingItems = Math.floor(visibleItems / 2);
+  const paddedOptions = React.useMemo(() => {
+    const padding = Array(paddingItems).fill(null);
+    return [...padding, ...options, ...padding];
+  }, [options, paddingItems]);
+
+  // Calculate container height
+  const containerHeight = itemHeight * Math.min(visibleItems, paddedOptions.length);
+
+  // Calculate the offset to center the selected item
+  const centerOffset = Math.floor(visibleItems / 2) * itemHeight;
+
+  // Handle scroll events
+  const handleScroll = useAnimatedScrollHandler({
+    onScroll: event => {
+      scrollPosition.value = event.contentOffset.y;
+    },
+    onBeginDrag: () => {
+      isScrolling.value = true;
+    },
+    onMomentumEnd: event => {
+      isScrolling.value = false;
+      const offsetY = event.contentOffset.y;
+      const rawIndex = Math.round(offsetY / itemHeight);
+
+      // Since we're using initialScrollIndex which already accounts for padding,
+      // we need to keep the same logic here
+      const clampedIndex = Math.max(0, Math.min(rawIndex, itemCount - 1));
+
+      // Ensure perfect snap position first
+      const targetY = rawIndex * itemHeight;
+      if (targetY !== offsetY) {
+        scrollTo(flatListRef, 0, targetY, true);
+      }
+
+      // Call onChange after ensuring the position is correct
+      if (clampedIndex !== selectedIndex) {
+        runOnJS(onChange)(clampedIndex);
+      }
+    }
+  });
+
+  // Get item layout for better performance
+  const getItemLayout = React.useCallback((_, index) => ({
+    length: itemHeight,
+    offset: itemHeight * index,
+    index
+  }), [itemHeight]);
+
+  // Initialize scroll position
+  React.useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      const initialY = (selectedIndex + paddingItems) * itemHeight;
+      requestAnimationFrame(() => {
+        if (flatListRef.current) {
+          scrollTo(flatListRef, 0, initialY, false);
+          isInitialized.current = true;
+        }
+      });
+    }
+  }, [flatListRef, selectedIndex, paddingItems, itemHeight, scrollPosition]);
+
+  // Scroll to selected index when it changes
+  React.useEffect(() => {
+    if (!isInitialized.current) {
+      return;
+    }
+    if (selectedIndex < 0 || selectedIndex >= options.length) {
+      // Log warning instead of throwing error for better UX
+      // eslint-disable-next-line no-console
+      console.warn(`Selected index ${selectedIndex} is out of bounds [0, ${options.length - 1}]`);
+      return;
+    }
+    if (!isScrolling.value) {
+      const targetY = (selectedIndex + paddingItems) * itemHeight;
+      scrollTo(flatListRef, 0, targetY, true);
+    }
+  }, [flatListRef, selectedIndex, paddingItems, itemHeight, options.length, isScrolling]);
+
+  // Render item
+  const renderItem = React.useCallback(({
+    item: option,
+    index
+  }) => /*#__PURE__*/_jsx(WheelPickerItem, {
+    option: option,
+    index: index,
+    height: itemHeight,
+    position: scrollPosition,
+    visibleItems: visibleItems,
+    style: itemStyle,
+    textStyle: itemTextStyle
+  }, `${index}-${option}`), [itemHeight, itemStyle, itemTextStyle, scrollPosition, visibleItems]);
+  const keyExtractor = React.useCallback((item, index) => `item-${item}-${index}`, []);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      height: containerHeight
+    }, containerStyle],
+    ...containerProps,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.selectedIndicator, {
+        backgroundColor: theme.colors.surfaceVariant,
+        borderRadius: theme.borderRadius(2),
+        height: itemHeight,
+        top: centerOffset,
+        transform: []
+      }, selectedIndicatorStyle]
+    }), /*#__PURE__*/_jsx(AnimatedFlatList, {
+      ref: flatListRef,
+      style: styles.scrollView,
+      contentContainerStyle: styles.contentContainer,
+      showsVerticalScrollIndicator: false,
+      onScroll: handleScroll,
+      scrollEventThrottle: 32,
+      decelerationRate: decelerationRate,
+      snapToInterval: itemHeight,
+      snapToAlignment: "start",
+      overScrollMode: "never",
+      removeClippedSubviews: false,
+      data: paddedOptions,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      getItemLayout: getItemLayout,
+      initialScrollIndex: selectedIndex,
+      initialNumToRender: visibleItems * 2,
+      maxToRenderPerBatch: visibleItems * 2,
+      windowSize: 7,
+      updateCellsBatchingPeriod: 50,
+      maintainVisibleContentPosition: {
+        minIndexForVisible: 0,
+        autoscrollToTopThreshold: 10
+      },
+      renderScrollComponent: props => /*#__PURE__*/_jsx(AnimatedScrollView, {
+        ...props,
+        scrollEventThrottle: 16
+      })
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    position: "relative",
+    overflow: "hidden"
+  },
+  contentContainer: {
+    paddingVertical: 0
+  },
+  selectedIndicator: {
+    position: "absolute",
+    width: "100%",
+    zIndex: -1
+  },
+  scrollView: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=wheel-picker.js.map

package/lib/module/modules/picker-sheet/components/wheel-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","FlatList","ScrollView","Animated","useSharedValue","useAnimatedScrollHandler","runOnJS","useAnimatedRef","scrollTo","useAppTheme","WheelPickerItem","jsx","_jsx","jsxs","_jsxs","AnimatedFlatList","createAnimatedComponent","AnimatedScrollView","WheelPicker","memo","selectedIndex","options","onChange","selectedIndicatorStyle","containerStyle","itemStyle","itemTextStyle","itemHeight","visibleItems","decelerationRate","containerProps","theme","flatListRef","isInitialized","useRef","mountedRef","scrollPosition","itemCount","length","isScrolling","paddingItems","Math","floor","paddedOptions","useMemo","padding","Array","fill","containerHeight","min","centerOffset","handleScroll","onScroll","event","value","contentOffset","y","onBeginDrag","onMomentumEnd","offsetY","rawIndex","round","clampedIndex","max","targetY","getItemLayout","useCallback","_","index","offset","useEffect","current","initialY","requestAnimationFrame","console","warn","renderItem","item","option","height","position","style","textStyle","keyExtractor","styles","container","children","selectedIndicator","backgroundColor","colors","surfaceVariant","borderRadius","top","transform","ref","scrollView","contentContainerStyle","contentContainer","showsVerticalScrollIndicator","scrollEventThrottle","snapToInterval","snapToAlignment","overScrollMode","removeClippedSubviews","data","initialScrollIndex","initialNumToRender","maxToRenderPerBatch","windowSize","updateCellsBatchingPeriod","maintainVisibleContentPosition","minIndexForVisible","autoscrollToTopThreshold","renderScrollComponent","props","create","overflow","paddingVertical","width","zIndex","flex"],"sourceRoot":"../../../../../src","sources":["modules/picker-sheet/components/wheel-picker.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/picker-sheet/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./components/wheel-picker.js";
+export * from "./components/picker-sheet.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/picker-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["modules/picker-sheet/index.ts"],"mappings":";;AAAA,cAAc,8BAA2B;AAEzC,cAAc,8BAA2B","ignoreList":[]}

package/lib/module/modules/progress-bar/components/progress-bar.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, { useAnimatedStyle, withSpring } from "react-native-reanimated";
+import { useAppTheme } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ProgressBar = ({
+  progress,
+  style,
+  color,
+  innerStyle,
+  innerTestID,
+  ...props
+}) => {
+  const theme = useAppTheme();
+  const animatedStyle = useAnimatedStyle(() => {
+    const progressValue = typeof progress === "number" ? progress : progress.value;
+    return {
+      width: withSpring(`${progressValue * 100}%`, {
+        damping: 15,
+        stiffness: 100
+      })
+    };
+  }, [progress]);
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    style: [styles.container, {
+      backgroundColor: theme.colors.gray[300]
+    }, style],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.inner, {
+        backgroundColor: color ?? theme.colors.primary
+      }, animatedStyle, innerStyle],
+      testID: innerTestID
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    height: 10,
+    borderRadius: 999,
+    overflow: "hidden"
+  },
+  inner: {
+    height: "100%",
+    borderRadius: 999
+  }
+});
+//# sourceMappingURL=progress-bar.js.map

package/lib/module/modules/progress-bar/components/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","Animated","useAnimatedStyle","withSpring","useAppTheme","jsx","_jsx","ProgressBar","progress","style","color","innerStyle","innerTestID","props","theme","animatedStyle","progressValue","value","width","damping","stiffness","styles","container","backgroundColor","colors","gray","children","inner","primary","testID","create","height","borderRadius","overflow"],"sourceRoot":"../../../../../src","sources":["modules/progress-bar/components/progress-bar.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,UAAU,QACL,yBAAyB;AAEhC,SAASC,WAAW,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG1C,OAAO,MAAMC,WAAsD,GAAGA,CAAC;EACrEC,QAAQ;EACRC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,WAAW;EACX,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAE3B,MAAMW,aAAa,GAAGb,gBAAgB,CAAC,MAAM;IAC3C,MAAMc,aAAa,GACjB,OAAOR,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,GAAGA,QAAQ,CAACS,KAAK;IAE1D,OAAO;MACLC,KAAK,EAAEf,UAAU,CAAC,GAAGa,aAAa,GAAG,GAAG,GAAG,EAAE;QAC3CG,OAAO,EAAE,EAAE;QACXC,SAAS,EAAE;MACb,CAAC;IACH,CAAC;EACH,CAAC,EAAE,CAACZ,QAAQ,CAAC,CAAC;EAEd,oBACEF,IAAA,CAACN,IAAI;IAAA,GACCa,KAAK;IACTJ,KAAK,EAAE,CACLY,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAET,KAAK,CAACU,MAAM,CAACC,IAAI,CAAC,GAAG;IAAE,CAAC,EAC3ChB,KAAK,CACL;IAAAiB,QAAA,eAEFpB,IAAA,CAACL,QAAQ,CAACD,IAAI;MACZS,KAAK,EAAE,CACLY,MAAM,CAACM,KAAK,EACZ;QAAEJ,eAAe,EAAEb,KAAK,IAAII,KAAK,CAACU,MAAM,CAACI;MAAQ,CAAC,EAClDb,aAAa,EACbJ,UAAU,CACV;MACFkB,MAAM,EAAEjB;IAAY,CACrB;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMS,MAAM,GAAGtB,UAAU,CAAC+B,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,GAAG;IACjBC,QAAQ,EAAE;EACZ,CAAC;EACDN,KAAK,EAAE;IACLI,MAAM,EAAE,MAAM;IACdC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/modules/progress-bar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./components/progress-bar.js";
+export * from "./types/progress-bar-props.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["modules/progress-bar/index.ts"],"mappings":";;AAAA,cAAc,8BAA2B;AACzC,cAAc,+BAA4B","ignoreList":[]}

package/lib/module/modules/progress-bar/types/progress-bar-props.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=progress-bar-props.js.map

package/lib/module/modules/progress-bar/types/progress-bar-props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["modules/progress-bar/types/progress-bar-props.ts"],"mappings":"","ignoreList":[]}

package/lib/module/modules/questionnaire-response-form/README.md

@@ -0,0 +1,375 @@
+# Questionnaire Form Component
+
+A component for rendering FHIR-based questionnaires with multi-page navigation and various input types.
+
+## Features
+
+- Renders FHIR-compatible questionnaires
+- Supports multiple page navigation
+- Handles various question types:
+  - Text/string input
+  - Boolean (checkbox)
+  - Choice (radio buttons)
+  - Date
+  - Number
+- Provides form validation
+- Supports conditional questions with default values
+- Returns FHIR-compatible QuestionnaireResponse
+
+## Usage
+
+```tsx
+import { QuestionnaireForm, QuestionnaireResponse } from "@ovok/native";
+
+const MyComponent = () => {
+  const questionnaire = {
+    resourceType: "Questionnaire",
+    id: "example-questionnaire",
+    title: "My Questionnaire",
+    status: "active",
+    item: [
+      {
+        linkId: "page-1",
+        text: "First Page",
+        type: "group",
+        item: [
+          {
+            linkId: "question-1",
+            text: "What is your name?",
+            type: "string",
+            required: true,
+            helperText: "Please enter your full name",
+            placeholder: "John Doe",
+          },
+        ],
+      },
+    ],
+  };
+
+  const handleSubmit = (response: QuestionnaireResponse) => {
+    console.log("Form submitted:", response);
+  };
+
+  return (
+    <QuestionnaireForm questionnaire={questionnaire} onSubmit={handleSubmit} />
+  );
+};
+```
+
+## Props
+
+| Prop          | Type                                                                                                       | Description                                           |
+| ------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| questionnaire | Questionnaire                                                                                              | The FHIR Questionnaire resource to render             |
+| onSubmit      | (values: QuestionnaireFormValues, formikHelpers?: FormikHelpers<QuestionnaireFormValues>) => Promise<void> | Optional callback for form submission                 |
+| onSuccess     | (response: QuestionnaireResponse) => void                                                                  | Optional callback when form is submitted successfully |
+| onError       | (error: Error) => void                                                                                     | Optional callback when form submission fails          |
+| initialValues | Partial<QuestionnaireFormValues>                                                                           | Optional initial values for the form                  |
+| children      | ReactNode                                                                                                  | Child components for custom layout                    |
+| style         | ViewStyle                                                                                                  | Optional styles for the container                     |
+| testID        | string                                                                                                     | Test ID for testing                                   |
+
+Note: You must provide either `onSubmit` OR both `onSuccess` and `onError` callbacks, but not both.
+
+## Extended Properties
+
+In addition to standard FHIR QuestionnaireItem properties, the component supports these additional UI properties:
+
+| Property        | Type    | Description                                   |
+| --------------- | ------- | --------------------------------------------- |
+| helperText      | string  | Help text displayed below the input           |
+| placeholder     | string  | Placeholder text for text inputs              |
+| initialSelected | boolean | For choice items, sets default selected state |
+
+## Conditional Questions
+
+The component supports conditional questions using FHIR's `enableWhen` property. When conditional questions become visible, any choice options with `initialSelected` set to true will be automatically selected:
+
+```tsx
+const questionnaire = {
+  // ...
+  item: [
+    {
+      linkId: "has-pets",
+      text: "Do you have any pets?",
+      type: "boolean",
+      required: true,
+    },
+    {
+      linkId: "pet-type",
+      text: "What kind of pet do you have?",
+      type: "choice",
+      enableWhen: [
+        {
+          question: "has-pets",
+          operator: "=",
+          answerBoolean: true,
+        },
+      ],
+      answerOption: [
+        {
+          valueCoding: {
+            code: "dog",
+            display: "Dog",
+          },
+        },
+        {
+          valueCoding: {
+            code: "cat",
+            display: "Cat",
+          },
+          initialSelected: true, // This option will be selected by default
+        },
+        {
+          valueCoding: {
+            code: "other",
+            display: "Other",
+          },
+        },
+      ],
+    },
+  ],
+};
+```
+
+## Structure
+
+The QuestionnaireForm uses a compound component pattern with the following structure:
+
+- **QuestionnaireForm**: Main container component
+  - **QuestionnaireForm.Header**: Form header section
+    - **QuestionnaireForm.Header.Title**: Form title
+    - **QuestionnaireForm.Header.Subtitle**: Form subtitle/progress
+  - **QuestionnaireForm.Content**: Form content section
+    - **QuestionnaireForm.Content.Item**: Question item renderer
+    - **QuestionnaireForm.Content.Error**: Error message display
+  - **QuestionnaireForm.Navigation**: Navigation controls
+    - **QuestionnaireForm.Navigation.PreviousButton**: Previous page button
+    - **QuestionnaireForm.Navigation.NextButton**: Next page button
+    - **QuestionnaireForm.Navigation.SubmitButton**: Form submission button
+
+## Field Types
+
+The form supports various field types through specialized components:
+
+- **QuestionnaireTextField**: Text input with keyboard type support
+- **QuestionnaireChoiceField**: Radio button selection
+- **QuestionnaireBooleanField**: Yes/No checkbox
+- **QuestionnaireDateField**: Date picker
+- **QuestionnaireItemRenderer**: Dynamic field type renderer
+
+## Context and Hooks
+
+The form provides a context and hooks for advanced customization:
+
+- **useQuestionnaireForm**: Hook to access form context and state
+- **QuestionnaireFormContext**: Context provider for form state
+- **QuestionnaireFormProvider**: Provider component managing form logic
+
+## Utilities
+
+The form includes utility classes for various operations:
+
+- **FormUtils**: Form initialization and data transformation
+- **ConditionUtils**: Conditional question handling
+- **FormValidation**: Form validation logic
+- **QuestionnaireSubmitUtils**: Response creation and submission
+
+## Upgraded QuestionnaireForm API
+
+The QuestionnaireForm component has been refactored to use a compound component pattern, making it more customizable and flexible.
+
+### Basic Usage
+
+```tsx
+import { QuestionnaireForm } from "@ovok/native";
+
+const MyComponent = () => {
+  const handleSubmit = (response) => {
+    // Handle the questionnaire response
+  };
+
+  return (
+    <QuestionnaireForm questionnaire={questionnaire} onSubmit={handleSubmit}>
+      <QuestionnaireForm.Header />
+      <QuestionnaireForm.Content />
+      <QuestionnaireForm.Navigation />
+    </QuestionnaireForm>
+  );
+};
+```
+
+### Advanced Customization
+
+```tsx
+import { QuestionnaireForm } from "@ovok/native";
+import { View } from "react-native";
+
+const MyComponent = () => {
+  return (
+    <QuestionnaireForm questionnaire={questionnaire} onSubmit={handleSubmit}>
+      <QuestionnaireForm.Header style={{ marginBottom: 24 }}>
+        <QuestionnaireForm.Header.Title style={{ fontSize: 24 }} />
+        <QuestionnaireForm.Header.Subtitle
+          prefix="Step"
+          style={{ color: "gray" }}
+        />
+      </QuestionnaireForm.Header>
+
+      <View style={{ padding: 16 }}>
+        <QuestionnaireForm.Content style={{ paddingHorizontal: 20 }}>
+          <QuestionnaireForm.Content.Item />
+          <QuestionnaireForm.Content.Error style={{ color: "darkred" }} />
+        </QuestionnaireForm.Content>
+      </View>
+
+      <QuestionnaireForm.Navigation style={{ padding: 16 }}>
+        <QuestionnaireForm.Navigation.PreviousButton children="Go Back" />
+        <QuestionnaireForm.Navigation.NextButton
+          mode="contained"
+          children="Continue"
+        />
+        <QuestionnaireForm.Navigation.SubmitButton
+          mode="contained"
+          children="Complete Survey"
+        />
+      </QuestionnaireForm.Navigation>
+    </QuestionnaireForm>
+  );
+};
+```
+
+### API Reference
+
+#### QuestionnaireForm Props
+
+| Prop          | Type                                      | Description                         |
+| ------------- | ----------------------------------------- | ----------------------------------- |
+| questionnaire | Questionnaire                             | The questionnaire object to render  |
+| onSubmit      | (response: QuestionnaireResponse) => void | Callback when the form is submitted |
+| initialValues | QuestionnaireFormValues                   | Initial values for the form         |
+| style         | StyleProp<ViewStyle>                      | Style for the container             |
+| testID        | string                                    | Test ID for the component           |
+
+#### QuestionnaireForm.Header Props
+
+| Prop     | Type                 | Description                        |
+| -------- | -------------------- | ---------------------------------- |
+| style    | StyleProp<ViewStyle> | Style for the header container     |
+| children | ReactNode            | Header children components         |
+| ...rest  | ViewProps            | All other View props are supported |
+
+#### QuestionnaireForm.Header.Title Props
+
+| Prop     | Type                 | Description                        |
+| -------- | -------------------- | ---------------------------------- |
+| style    | StyleProp<TextStyle> | Style for the title text           |
+| children | ReactNode            | Custom title content               |
+| ...rest  | TextProps            | All other Text props are supported |
+
+#### QuestionnaireForm.Header.Subtitle Props
+
+| Prop     | Type                 | Description                        |
+| -------- | -------------------- | ---------------------------------- |
+| style    | StyleProp<TextStyle> | Style for the subtitle text        |
+| prefix   | string               | Prefix for subtitle (Question)     |
+| children | ReactNode            | Custom subtitle content            |
+| ...rest  | TextProps            | All other Text props are supported |
+
+#### QuestionnaireForm.Content Props
+
+| Prop     | Type                 | Description                        |
+| -------- | -------------------- | ---------------------------------- |
+| style    | StyleProp<ViewStyle> | Style for the content container    |
+| children | ReactNode            | Content children components        |
+| ...rest  | ViewProps            | All other View props are supported |
+
+#### QuestionnaireForm.Content.Item Props
+
+| Prop    | Type                 | Description                        |
+| ------- | -------------------- | ---------------------------------- |
+| style   | StyleProp<ViewStyle> | Style for the item                 |
+| testID  | string               | Test ID for the item               |
+| ...rest | ViewProps            | All other View props are supported |
+
+#### QuestionnaireForm.Content.Error Props
+
+| Prop     | Type                 | Description                        |
+| -------- | -------------------- | ---------------------------------- |
+| style    | StyleProp<TextStyle> | Style for the error message        |
+| children | ReactNode            | Custom error content               |
+| ...rest  | TextProps            | All other Text props are supported |
+
+#### QuestionnaireForm.Navigation Props
+
+| Prop                | Type                 | Description                         |
+| ------------------- | -------------------- | ----------------------------------- |
+| style               | StyleProp<ViewStyle> | Style for the navigation container  |
+| children            | ReactNode            | Navigation children components      |
+| previousButtonProps | Partial<ButtonProps> | Props passed to the Previous button |
+| nextButtonProps     | Partial<ButtonProps> | Props passed to the Next button     |
+| submitButtonProps   | Partial<ButtonProps> | Props passed to the Submit button   |
+| ...rest             | ViewProps            | All other View props are supported  |
+
+#### QuestionnaireForm.Navigation.PreviousButton Props
+
+| Prop     | Type        | Description                          |
+| -------- | ----------- | ------------------------------------ |
+| children | ReactNode   | Custom button text                   |
+| ...rest  | ButtonProps | All other Button props are supported |
+
+#### QuestionnaireForm.Navigation.NextButton Props
+
+| Prop     | Type        | Description                          |
+| -------- | ----------- | ------------------------------------ |
+| children | ReactNode   | Custom button text                   |
+| ...rest  | ButtonProps | All other Button props are supported |
+
+#### QuestionnaireForm.Navigation.SubmitButton Props
+
+| Prop     | Type        | Description                          |
+| -------- | ----------- | ------------------------------------ |
+| children | ReactNode   | Custom button text                   |
+| ...rest  | ButtonProps | All other Button props are supported |
+
+## Architecture Improvements
+
+The QuestionnaireForm has been optimized for performance and maintainability:
+
+1. **Type Safety**: Stronger typing with custom types like `ResponseValues` and `QuestionnaireFormValues`
+2. **Component Separation**: Logic separated into focused utility functions and hooks
+3. **Performance**: Efficient re-rendering with proper React dependency management
+4. **Conditional Logic**: Improved handling of conditional questions with automatic initialization
+
+## New Features and Improvements
+
+### 1. Enhanced Form Submission
+
+- Added support for both callback and promise-based submission handling
+- New `onSuccess` and `onError` callbacks for better error handling
+- Improved type safety with `QuestionnaireResponse` type
+
+### 2. Navigation Improvements
+
+- Added navigation state management with `useQuestionnaireNavigationState` hook
+- Improved handling of conditional questions during navigation
+- Better error handling and validation during navigation
+- Added support for tracking total items and current item number
+
+### 3. Field Improvements
+
+- Enhanced keyboard type support for text fields
+- Improved field wrapper component with better styling options
+- Better handling of boolean fields with empty string values
+
+### 4. Type Safety Enhancements
+
+- Added `ExtendedQuestionnaireItem` type for better type safety
+- Improved `QuestionnaireFormValues` type with better null handling
+- Added proper typing for navigation context and handlers
+
+### 5. Performance Optimizations
+
+- Memoized navigation state calculations
+- Optimized re-renders with React.memo
+- Improved form validation performance