@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-TLCIR6RG.js → chunk-D34LNBO5.js}

@@ -1,17 +1,17 @@
+import { Slider } from './chunk-A7SWYDE5.js';
 import { storageKey, readStored, writeStored } from './chunk-NNCOFLNE.js';
-import { Slider } from './chunk-TDMG26JI.js';
-import { Textarea } from './chunk-74FLKD24.js';
-import { Picker } from './chunk-PID3NJB7.js';
-import { Progress } from './chunk-5UTRIXQ6.js';
-import { Sheet } from './chunk-QYPE5JX3.js';
-import { Chip } from './chunk-2SY63FCH.js';
-import { Input } from './chunk-7BUIKDD6.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { Textarea } from './chunk-RIK6UX2K.js';
+import { Progress } from './chunk-L2WMOA2V.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Picker } from './chunk-MCOZJWPU.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Input } from './chunk-KXLDK6HB.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React2 from 'react';
-import { View, Text, Pressable, Animated } from 'react-native';
+import { View, Text, Pressable, Image, Animated, Platform, findNodeHandle, AccessibilityInfo, BackHandler } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { PMF_OPTIONS, scaleShape, resolveQuestion, resolveText, resolveHiddenFields, surveyPages, nextPageIndex, visibleQuestions, visiblePages, pickSurveyEnding, surveyCompletion, isQuestionRequired, isAnswerEmpty, prevPageIndex, validatePage, branchedEndingId } from '@btndprojects/loam-engage';
 export { PMF_OPTIONS, SURVEY_OPERATORS, cesScore, csatScore, isAnswerEmpty, isPageVisible, matchSurveyCondition, nextPageIndex, npsBand, npsScore, prevPageIndex, scaleShape, surveyPages, surveyProgress, validatePage, visiblePages, visibleQuestions } from '@btndprojects/loam-engage';
@@ -32,6 +32,9 @@ var SURVEY_FIELD_LABELS = {
   moveDown: "Move down",
   choosePlaceholder: "Choose one",
   emailPlaceholder: "you@company.com",
+  datePlaceholder: "YYYY-MM-DD",
+  chooseFile: "Choose a file",
+  noFile: "No file chosen",
   score: (value, top, ends) => `Score ${value} of ${top}${ends.map((end) => ` \u2014 ${end}`).join("")}`,
   matrixScore: (row, value, points) => `${row}: ${value} of ${points}`,
   selectedOfCap: (picked, cap) => `${picked} of up to ${cap} selected`,
@@ -55,24 +58,33 @@ function SurveyField({
   error,
   foot,
   labels: labelOverrides,
+  disabled = false,
   children
 }) {
   const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("survey");
   const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   return (
     // No accessible name on the wrapper: the question text is a visible label
     // and every control below carries its own, so naming the group as well
     // makes the same sentence arrive twice.
-    /* @__PURE__ */ jsxs(View, { style: styles.field, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.labelRow, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.label, children: question.text }),
-        question.required ? /* @__PURE__ */ jsx(Text, { style: styles.requiredTag, children: labels.required }) : null
-      ] }),
-      question.help ? /* @__PURE__ */ jsx(Text, { style: styles.help, children: question.help }) : null,
-      children,
-      foot ? /* @__PURE__ */ jsx(View, { style: styles.foot, children: foot }) : null,
-      error ? /* @__PURE__ */ jsx(SurveyFieldError, { children: error }) : null
-    ] })
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [styles.field, disabled ? { opacity: theme.state.disabledOpacity } : null],
+        "aria-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.labelRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.label, children: question.text }),
+            question.required ? /* @__PURE__ */ jsx(Text, { style: styles.requiredTag, children: labels.required }) : null
+          ] }),
+          question.help ? /* @__PURE__ */ jsx(Text, { style: styles.help, children: question.help }) : null,
+          children,
+          foot ? /* @__PURE__ */ jsx(View, { style: styles.foot, children: foot }) : null,
+          error ? /* @__PURE__ */ jsx(SurveyFieldError, { children: error }) : null
+        ]
+      }
+    )
   );
 }
 function SurveyFieldError({ children }) {
@@ -87,7 +99,8 @@ function SurveyScale({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  labels: labelOverrides,
+  disabled = false
 }) {
   const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
@@ -106,14 +119,16 @@ function SurveyScale({
         Pressable,
         {
           accessibilityRole: "radio",
-          accessibilityState: { checked: on },
+          accessibilityState: { checked: on, disabled },
+          disabled,
           "aria-checked": on,
           accessibilityLabel: labels.score(v, top, ends),
           onPress: () => onChange(v, true),
           style: ({ pressed }) => [
             styles.scaleCell,
             on ? styles.scaleCellOn : null,
-            pressed && !on ? { backgroundColor: theme.state.pressed } : null
+            pressed && !on ? { backgroundColor: theme.state.pressed } : null,
+            disabled ? { opacity: theme.state.disabledOpacity } : null
           ],
           children: /* @__PURE__ */ jsx(Text, { style: [styles.scaleNumber, on ? styles.scaleNumberOn : null], children: v })
         },
@@ -161,7 +176,7 @@ function SurveyOptionRow({
             children: checked ? role === "checkbox" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accentInk }) : /* @__PURE__ */ jsx(View, { style: styles.markDot }) : null
           }
         ),
-        /* @__PURE__ */ jsx(Text, { style: [styles.optionLabel, checked ? styles.optionLabelOn : null], children: label })
+        /* @__PURE__ */ jsx(Text, { style: styles.optionLabel, children: label })
       ]
     }
   );
@@ -170,7 +185,9 @@ function SurveyOptions({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  labels: labelOverrides,
+  fieldSurface,
+  disabled = false
 }) {
   const { styles } = useStyles(sheet);
   const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
@@ -183,6 +200,7 @@ function SurveyOptions({
       {
         label: o.label,
         checked: raw === o.value,
+        disabled,
         onPress: () => onChange(o.value, true)
       },
       o.value
@@ -192,6 +210,7 @@ function SurveyOptions({
       {
         label: labels.other,
         checked: isOther,
+        disabled,
         onPress: () => onChange(SURVEY_OTHER_PREFIX)
       }
     ) : null,
@@ -199,7 +218,9 @@ function SurveyOptions({
       Input,
       {
         size: "lg",
+        surface: fieldSurface,
         autoFocus: true,
+        editable: !disabled,
         placeholder: labels.otherPlaceholder,
         accessibilityLabel: `${question.text} \u2014 ${labels.other}`,
         value: (raw ?? SURVEY_OTHER_PREFIX).slice(SURVEY_OTHER_PREFIX.length),
@@ -208,10 +229,86 @@ function SurveyOptions({
     ) : null
   ] });
 }
+function SurveyImageChoice({
+  question,
+  value,
+  onChange,
+  disabled = false
+}) {
+  const { styles } = useStyles(sheet);
+  const raw = typeof value === "string" ? value : void 0;
+  return /* @__PURE__ */ jsx(View, { style: styles.imageGrid, accessibilityRole: "radiogroup", children: (question.options ?? []).map((o) => {
+    const on = raw === o.value;
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "radio",
+        accessibilityState: { checked: on, disabled },
+        "aria-checked": on,
+        accessibilityLabel: o.label,
+        disabled,
+        onPress: () => onChange(o.value, true),
+        style: [styles.imageCard, on ? styles.optionRowOn : null],
+        children: [
+          o.image ? /* @__PURE__ */ jsx(Image, { source: { uri: o.image }, accessibilityIgnoresInvertColors: true, style: styles.imageThumb }) : /* @__PURE__ */ jsx(View, { style: [styles.imageThumb, styles.imageThumbEmpty], children: /* @__PURE__ */ jsx(Text, { style: styles.imageThumbText, children: "Image" }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.optionLabel, children: o.label })
+        ]
+      },
+      o.value
+    );
+  }) });
+}
+function SurveyDate({
+  question,
+  value,
+  onChange,
+  error,
+  fieldSurface,
+  labels: labelOverrides,
+  disabled = false
+}) {
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      size: "lg",
+      surface: fieldSurface,
+      accessibilityLabel: question.text,
+      keyboardType: "numbers-and-punctuation",
+      placeholder: question.placeholder ?? labels.datePlaceholder,
+      error: Boolean(error),
+      editable: !disabled,
+      value: value == null ? "" : String(value),
+      onChangeText: (next) => onChange(next.replace(/[^\d-]/g, "").slice(0, 10))
+    }
+  );
+}
+function SurveyFile({
+  value,
+  onPickFile,
+  labels: labelOverrides,
+  disabled = false
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
+  const name = typeof value === "string" && value ? value : void 0;
+  return /* @__PURE__ */ jsxs(View, { style: styles.fileRow, children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "upload", disabled, onPress: onPickFile, children: labels.chooseFile }),
+    /* @__PURE__ */ jsx(Text, { style: styles.metaText, numberOfLines: 1, children: name ?? labels.noFile })
+  ] });
+}
+function SurveyStatement({ question }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { style: styles.statement, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.statementTitle, children: question.text }),
+    question.help ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: question.help }) : null
+  ] });
+}
 function SurveyCheckboxList({
   question,
   value,
-  onChange
+  onChange,
+  disabled = false
 }) {
   const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
@@ -219,7 +316,7 @@ function SurveyCheckboxList({
   const atCap = question.maxSelections != null && picked.length >= question.maxSelections;
   return /* @__PURE__ */ jsx(View, { style: styles.stackSm, children: (question.options ?? []).map((o) => {
     const on = picked.includes(o.value);
-    const blocked = atCap && !on;
+    const blocked = disabled || atCap && !on;
     return /* @__PURE__ */ jsx(
       View,
       {
@@ -240,7 +337,12 @@ function SurveyCheckboxList({
     );
   }) });
 }
-function SurveyChips({ question, value, onChange }) {
+function SurveyChips({
+  question,
+  value,
+  onChange,
+  disabled = false
+}) {
   const { styles } = useStyles(sheet);
   const picked = Array.isArray(value) ? [...value] : [];
   const atCap = question.maxSelections != null && picked.length >= question.maxSelections;
@@ -253,7 +355,7 @@ function SurveyChips({ question, value, onChange }) {
         size: "md",
         selectable: true,
         selected: on,
-        disabled: !on && atCap,
+        disabled: disabled || !on && atCap,
         onSelectedChange: () => onChange(on ? picked.filter((p) => p !== o.value) : [...picked, o.value]),
         children: o.label
       },
@@ -265,7 +367,8 @@ function SurveyRank({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  labels: labelOverrides,
+  disabled = false
 }) {
   const { styles } = useStyles(sheet);
   const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
@@ -292,7 +395,7 @@ function SurveyRank({
         variant: "outline",
         leadingIcon: "chevron-up",
         accessibilityLabel: `${labels.moveUp}: ${labelOf(item)}`,
-        disabled: i === 0,
+        disabled: disabled || i === 0,
         onPress: () => move(i, -1)
       }
     ),
@@ -303,7 +406,7 @@ function SurveyRank({
         variant: "outline",
         leadingIcon: "chevron-down",
         accessibilityLabel: `${labels.moveDown}: ${labelOf(item)}`,
-        disabled: i === items.length - 1,
+        disabled: disabled || i === items.length - 1,
         onPress: () => move(i, 1)
       }
     )
@@ -313,7 +416,8 @@ function SurveyMatrix({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  labels: labelOverrides,
+  disabled = false
 }) {
   const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
@@ -335,14 +439,16 @@ function SurveyMatrix({
             Pressable,
             {
               accessibilityRole: "radio",
-              accessibilityState: { checked: on },
+              accessibilityState: { checked: on, disabled },
               "aria-checked": on,
+              disabled,
               accessibilityLabel: labels.matrixScore(row.label, v, points),
               onPress: () => onChange({ ...current, [row.value]: v }),
               style: ({ pressed }) => [
                 styles.matrixScore,
                 on ? styles.matrixScoreOn : null,
-                pressed && !on ? { backgroundColor: theme.state.pressed } : null
+                pressed && !on ? { backgroundColor: theme.state.pressed } : null,
+                disabled ? { opacity: theme.state.disabledOpacity } : null
               ],
               children: /* @__PURE__ */ jsx(Text, { style: [styles.matrixNumber, on ? styles.scaleNumberOn : null], children: v })
             },
@@ -361,7 +467,8 @@ function SurveyConsent({
   question,
   value,
   onChange,
-  error
+  error,
+  disabled = false
 }) {
   const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
@@ -371,21 +478,31 @@ function SurveyConsent({
       Pressable,
       {
         accessibilityRole: "checkbox",
-        accessibilityState: { checked: on },
+        accessibilityState: { checked: on, disabled },
         "aria-checked": on,
         accessibilityLabel: question.text,
+        disabled,
         onPress: () => onChange(!on),
-        style: [styles.consentCard, on ? styles.consentCardOn : null],
+        style: [
+          styles.consentCard,
+          on ? styles.consentCardOn : null,
+          disabled ? { opacity: theme.state.disabledOpacity } : null
+        ],
         children: [
           /* @__PURE__ */ jsx(View, { style: [styles.mark, styles.markSquare, on ? styles.markOn : null], children: on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accentInk }) : null }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.consentText, on ? styles.optionLabelOn : null], children: question.text })
+          /* @__PURE__ */ jsx(Text, { style: styles.consentText, children: question.text })
         ]
       }
     ),
     error ? /* @__PURE__ */ jsx(SurveyFieldError, { children: error }) : null
   ] });
 }
-function SurveySlider({ question, value, onChange }) {
+function SurveySlider({
+  question,
+  value,
+  onChange,
+  disabled = false
+}) {
   const { styles } = useStyles(sheet);
   const min = question.min ?? 0;
   const max = question.max ?? 100;
@@ -403,7 +520,8 @@ function SurveySlider({ question, value, onChange }) {
         step: question.step ?? 1,
         value: v,
         onValueChange: (next) => onChange(next),
-        accessibilityLabel: question.text
+        accessibilityLabel: question.text,
+        disabled
       }
     ),
     /* @__PURE__ */ jsxs(View, { style: styles.endsRow, children: [
@@ -416,7 +534,8 @@ function SurveyBoolean({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  labels: labelOverrides,
+  disabled = false
 }) {
   const { styles } = useStyles(sheet);
   const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
@@ -436,6 +555,7 @@ function SurveyBoolean({
           fullWidth: true,
           variant: value === val ? "primary" : "outline",
           accessibilityLabel: label,
+          disabled,
           onPress: () => onChange(val, true),
           children: label
         }
@@ -447,17 +567,21 @@ function SurveyOpenText({
   question,
   value,
   onChange,
-  error
+  error,
+  fieldSurface,
+  disabled = false
 }) {
   const text = typeof value === "string" ? value : "";
   return /* @__PURE__ */ jsx(
     Textarea,
     {
       accessibilityLabel: question.text,
+      surface: fieldSurface,
       placeholder: question.placeholder,
       maxLength: question.maxLength ?? 400,
       minRows: 3,
       error: Boolean(error),
+      disabled,
       value: text,
       onChangeText: (t) => onChange(t)
     }
@@ -468,7 +592,9 @@ function SurveyTextInput({
   value,
   onChange,
   error,
-  labels: labelOverrides
+  fieldSurface,
+  labels: labelOverrides,
+  disabled = false
 }) {
   const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   const t = question.type;
@@ -477,12 +603,14 @@ function SurveyTextInput({
     Input,
     {
       size: "lg",
+      surface: fieldSurface,
       accessibilityLabel: question.text,
       keyboardType: t === "number" ? "number-pad" : t === "email" ? "email-address" : "default",
       autoCapitalize: t === "email" ? "none" : "sentences",
       autoComplete: t === "email" ? "email" : void 0,
       placeholder: question.placeholder ?? (t === "email" ? labels.emailPlaceholder : void 0),
       error: Boolean(error),
+      editable: !disabled,
       value: text,
       onChangeText: (next) => onChange(t === "number" ? next.replace(/[^\d.-]/g, "") : next)
     }
@@ -492,7 +620,9 @@ function SurveyDropdown({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  fieldSurface,
+  labels: labelOverrides,
+  disabled = false
 }) {
   const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   return /* @__PURE__ */ jsx(
@@ -504,6 +634,8 @@ function SurveyDropdown({
       placeholder: question.placeholder ?? labels.choosePlaceholder,
       title: question.text,
       size: "lg",
+      surface: fieldSurface,
+      disabled,
       accessibilityLabel: question.text
     }
   );
@@ -524,12 +656,22 @@ function SurveyQuestionField({
   const t = question.type;
   const merged = useLabels("survey", SURVEY_LABELS, labels);
   if (t === "consent") return /* @__PURE__ */ jsx(SurveyConsent, { ...props });
+  if (t === "statement") return /* @__PURE__ */ jsx(SurveyStatement, { ...props });
+  if (t === "image-choice") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyImageChoice, { ...props }) });
+  }
+  if (t === "date") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyDate, { ...props }) });
+  }
+  if (t === "file") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyFile, { ...props }) });
+  }
   const foot = (node) => node;
   if (t === "nps" || t === "csat" || t === "ces" || t === "scale") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyScale, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyScale, { ...props }) });
   }
   if (t === "choice" || t === "pmf") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyOptions, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyOptions, { ...props }) });
   }
   if (t === "multi" || t === "chips") {
     const picked = Array.isArray(value) ? value : [];
@@ -540,6 +682,7 @@ function SurveyQuestionField({
         question,
         error,
         labels,
+        disabled: props.disabled,
         foot: foot(
           cap ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: t === "multi" ? merged.selectedOfCap(picked.length, cap) : `${picked.length} / ${cap}` }) : null
         ),
@@ -548,13 +691,13 @@ function SurveyQuestionField({
     );
   }
   if (t === "dropdown") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyDropdown, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyDropdown, { ...props }) });
   }
   if (t === "boolean") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyBoolean, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyBoolean, { ...props }) });
   }
   if (t === "slider") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveySlider, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveySlider, { ...props }) });
   }
   if (t === "rank") {
     return /* @__PURE__ */ jsx(
@@ -563,6 +706,7 @@ function SurveyQuestionField({
         question,
         error,
         labels,
+        disabled: props.disabled,
         foot: /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: merged.rankHint }),
         children: /* @__PURE__ */ jsx(SurveyRank, { ...props })
       }
@@ -576,6 +720,7 @@ function SurveyQuestionField({
         question,
         error,
         labels,
+        disabled: props.disabled,
         foot: /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: merged.answeredOf(Object.keys(current).length, (question.rows ?? []).length) }),
         children: /* @__PURE__ */ jsx(SurveyMatrix, { ...props })
       }
@@ -590,6 +735,7 @@ function SurveyQuestionField({
         question,
         error,
         labels,
+        disabled: props.disabled,
         foot: /* @__PURE__ */ jsxs(Text, { style: styles.metaText, children: [
           text.length,
           " / ",
@@ -605,33 +751,33 @@ function SurveyQuestionField({
       question,
       error,
       labels,
+      disabled: props.disabled,
       foot: question.suffix ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: question.suffix }) : null,
       children: /* @__PURE__ */ jsx(SurveyTextInput, { ...props })
     }
   );
 }
 var sheet = createStyleSheet((theme) => ({
-  field: { gap: theme.space[9] },
+  // Final 09 rhythm: help 4 below the question, the control 8 below.
+  field: { gap: theme.space[8] },
   labelRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space[8] },
   label: {
     flexShrink: 1,
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.callout.fontSize,
-    lineHeight: theme.type.callout.lineHeight,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[16],
+    lineHeight: theme.fontSize[16] * 1.3,
     color: theme.color.text
   },
   requiredTag: {
+    ...theme.type.overline,
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
     color: theme.color.text3
   },
   help: {
     fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * 1.4,
     color: theme.color.text3,
     marginTop: -theme.space[4]
   },
@@ -644,12 +790,41 @@ var sheet = createStyleSheet((theme) => ({
   errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space[7] },
   errorText: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.footnote.fontSize,
-    color: theme.color.danger
+    fontSize: theme.fontSize[13],
+    color: theme.color.dangerOnSoft
   },
   stackXs: { gap: theme.space[6] },
   stackSm: { gap: theme.space[7] },
+  imageGrid: { flexDirection: "row", flexWrap: "wrap", gap: theme.space[8] },
+  imageCard: {
+    flexGrow: 1,
+    flexBasis: "45%",
+    gap: theme.space[8],
+    padding: theme.space[8],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2
+  },
+  imageThumb: {
+    height: theme.space[80],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.surface3
+  },
+  imageThumbEmpty: { alignItems: "center", justifyContent: "center" },
+  imageThumbText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  fileRow: { flexDirection: "row", alignItems: "center", gap: theme.space[12] },
+  statement: { gap: theme.space[4] },
+  statementTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    lineHeight: theme.fontSize[16] * 1.4,
+    color: theme.color.text
+  },
   stackMd: { gap: theme.space[12] },
   grow: { flex: 1 },
   scaleRow: { flexDirection: "row", gap: theme.space[4] },
@@ -682,17 +857,18 @@ var sheet = createStyleSheet((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space[11],
-    minHeight: theme.tapMin + theme.space[4],
+    minHeight: theme.space[48],
     paddingHorizontal: theme.space[13],
     paddingVertical: theme.space[8],
     borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.thin,
+    borderWidth: theme.borderWidth.thick,
     borderColor: theme.color.borderStrong,
     backgroundColor: theme.color.surface2
   },
+  // Chosen: state-selected under a 1.5 accent edge; ink and weight kept (R7).
   optionRowOn: {
-    borderColor: theme.edge.accent,
-    backgroundColor: theme.color.accentSoft
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.state.selected
   },
   optionLabel: {
     flex: 1,
@@ -700,7 +876,6 @@ var sheet = createStyleSheet((theme) => ({
     fontSize: theme.type.subheadline.fontSize,
     color: theme.color.text
   },
-  optionLabelOn: { fontWeight: theme.fontWeight.bold, color: theme.color.accentOnSoft },
   mark: {
     width: theme.space[18],
     height: theme.space[18],
@@ -724,8 +899,8 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space[10],
     minHeight: theme.tapMin + theme.space[4],
-    paddingLeft: theme.space[12],
-    paddingRight: theme.space[8],
+    paddingStart: theme.space[12],
+    paddingEnd: theme.space[8],
     paddingVertical: theme.space[6],
     borderRadius: theme.radius.md,
     borderWidth: theme.borderWidth.thin,
@@ -763,7 +938,8 @@ var sheet = createStyleSheet((theme) => ({
   matrixRow: { flexDirection: "row", gap: theme.space[5] },
   matrixScore: {
     flex: 1,
-    height: theme.space[40],
+    // Touch matrix cells are 44 (Final 09).
+    height: theme.space[44],
     alignItems: "center",
     justifyContent: "center",
     borderRadius: theme.radius.sm,
@@ -785,11 +961,11 @@ var sheet = createStyleSheet((theme) => ({
     gap: theme.space[11],
     padding: theme.space[12],
     borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.thin,
+    borderWidth: theme.borderWidth.thick,
     borderColor: theme.color.borderStrong,
     backgroundColor: theme.color.surface2
   },
-  consentCardOn: { borderColor: theme.edge.accent, backgroundColor: theme.color.accentSoft },
+  consentCardOn: { borderColor: theme.focus.ringColor, backgroundColor: theme.state.selected },
   consentText: {
     flex: 1,
     fontFamily: theme.font.sans,
@@ -863,6 +1039,8 @@ function Survey({
   pageIndex: pageProp,
   onPageIndexChange,
   layout = "sheet",
+  disabled = false,
+  loading = false,
   onSubmit,
   onDismiss,
   onAction,
@@ -879,7 +1057,10 @@ function Survey({
   metadata,
   urlParams,
   labels: labelOverrides,
-  motion = "full"
+  motion = "full",
+  fieldSurface,
+  density = "standard",
+  size = "lg"
 }) {
   const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheetStyles);
@@ -944,6 +1125,8 @@ function Survey({
   }, [pageIdx, level, pageFade, pageShift, theme]);
   const page = pages[pageIdx];
   const [errors, setErrors] = React2.useState({});
+  const fieldRefs = React2.useRef(/* @__PURE__ */ new Map());
+  const focusFirst = React2.useRef(null);
   const [submitted, setSubmitted] = React2.useState(firstPage < 0);
   const finished = submitted || pageIdx < 0;
   React2.useEffect(() => {
@@ -1045,8 +1228,10 @@ function Survey({
     [onSubmit, survey, ctx]
   );
   const advance = () => {
+    if (disabled || loading) return;
     const found = validatePage(page, answers, ctx, locale, fallbackLocale, labels.validation);
     if (Object.keys(found).length) {
+      focusFirst.current = visibleQuestions(page, answers, ctx).find((q) => found[q.id])?.id ?? null;
       setErrors(found);
       emitRef.current("survey_validation_failed", {
         page: page?.id,
@@ -1062,12 +1247,24 @@ function Survey({
   };
   advanceRef.current = advance;
   const back = () => {
+    if (disabled || loading) return;
     const previous = trail.length ? trail[trail.length - 1] : prevPageIndex(survey, answers, pageIdx, ctx);
     if (previous < 0) return;
     setTrail((t2) => t2.slice(0, -1));
     setErrors({});
     setPage(previous);
   };
+  React2.useEffect(() => {
+    const id = focusFirst.current;
+    focusFirst.current = null;
+    const node = id ? fieldRefs.current.get(id) : null;
+    if (!node) return;
+    if (Platform.OS === "web") node.focus?.();
+    else {
+      const tag = findNodeHandle(node);
+      if (tag != null) AccessibilityInfo.setAccessibilityFocus(tag);
+    }
+  }, [errors]);
   const dismiss = React2.useCallback(
     (reason) => {
       if (reason !== "done") {
@@ -1098,6 +1295,15 @@ function Survey({
   const allOptional = questions.length > 0 && questions.every((q) => !isQuestionRequired(q, answers, ctx) && isAnswerEmpty(q, answers[q.id]));
   const isLast = nextPageIndex(survey, answers, pageIdx, ctx) < 0;
   const canBack = trail.length > 0 || prevPageIndex(survey, answers, pageIdx, ctx) >= 0;
+  const backRef = React2.useRef(null);
+  backRef.current = !finished && open && canBack ? () => (back(), true) : null;
+  React2.useEffect(() => {
+    const sub = BackHandler.addEventListener(
+      "hardwareBackPress",
+      () => backRef.current?.() ?? false
+    );
+    return () => sub.remove();
+  }, []);
   const content = finished ? /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
     /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: title }),
     /* @__PURE__ */ jsx(
@@ -1119,80 +1325,127 @@ function Survey({
         closeLabel: labels.close
       }
     )
-  ] }) : /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: title }),
-        page?.title ? /* @__PURE__ */ jsx(Text, { style: styles.pageTitle, children: t(page.title) }) : null
-      ] }),
-      showProgress && answered.length > 1 ? /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
-        position,
-        " / ",
-        answered.length
-      ] }) : null,
-      dismissible ? /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.dismiss,
-          onPress: () => dismiss("user"),
-          hitSlop: theme.space[10],
-          style: styles.iconButton,
-          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text3 })
-        }
-      ) : null
-    ] }),
-    showProgress ? /* @__PURE__ */ jsx(
-      Progress,
-      {
-        size: "sm",
-        value: Math.max(0, position - 1),
-        max: Math.max(1, answered.length),
-        accessibilityLabel: labels.progress(title, position, answered.length),
-        motion
-      }
-    ) : null,
-    survey.intro && position === 1 ? /* @__PURE__ */ jsx(Text, { style: styles.intro, children: t(survey.intro) }) : null,
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        style: [styles.questions, { opacity: pageFade, transform: [{ translateX: pageShift }] }],
-        children: questions.map((q) => /* @__PURE__ */ jsx(
-          SurveyQuestionField,
+  ] }) : /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [styles.body, density === "compact" ? styles.bodyCompact : null],
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: title }),
+            page?.title ? /* @__PURE__ */ jsx(Text, { style: styles.pageTitle, children: t(page.title) }) : null
+          ] }),
+          showProgress && answered.length > 1 ? /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
+            position,
+            " / ",
+            answered.length
+          ] }) : null,
+          dismissible ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.dismiss,
+              onPress: () => dismiss("user"),
+              hitSlop: (theme.hit.sm - theme.ctl.sm) / 2,
+              style: ({ pressed }) => [
+                styles.iconButton,
+                pressed && { backgroundColor: theme.state.pressed }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text3 })
+            }
+          ) : null
+        ] }),
+        showProgress ? /* @__PURE__ */ jsx(
+          Progress,
           {
-            question: q,
-            locale,
-            defaultLocale: fallbackLocale,
-            value: answers[q.id],
-            error: errors[q.id],
-            labels,
-            onChange: (value, commit) => setAnswer(q, value, commit)
-          },
-          q.id
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
-      canBack ? /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", leadingIcon: "arrow-left", onPress: back, children: labels.back }) : null,
-      /* @__PURE__ */ jsx(View, { style: styles.grow }),
-      skippable && allOptional && answered.length > 1 ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "lg",
-          variant: "ghost",
-          onPress: () => {
-            emitRef.current("survey_page_skipped", { page: page?.id });
-            setTrail((t2) => [...t2, pageIdx]);
-            const next = nextPageIndex(survey, answers, pageIdx);
-            if (next < 0) finish(answers);
-            else setPage(next);
-          },
-          children: labels.skip
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", onPress: advance, children: isLast ? labels.submit : labels.next })
-    ] })
-  ] });
+            size: "sm",
+            value: Math.max(0, position - 1),
+            max: Math.max(1, answered.length),
+            accessibilityLabel: labels.progress(title, position, answered.length),
+            motion
+          }
+        ) : null,
+        survey.intro && position === 1 ? /* @__PURE__ */ jsx(Text, { style: styles.intro, children: t(survey.intro) }) : null,
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.questions,
+              density === "compact" ? styles.questionsCompact : null,
+              { opacity: pageFade, transform: [{ translateX: pageShift }] }
+            ],
+            children: questions.map((q) => /* @__PURE__ */ jsx(
+              View,
+              {
+                ref: (node) => {
+                  fieldRefs.current.set(q.id, node);
+                },
+                ...{ tabIndex: -1 },
+                children: /* @__PURE__ */ jsx(
+                  SurveyQuestionField,
+                  {
+                    question: q,
+                    locale,
+                    defaultLocale: fallbackLocale,
+                    value: answers[q.id],
+                    error: errors[q.id],
+                    labels,
+                    fieldSurface,
+                    disabled,
+                    onChange: (value, commit) => setAnswer(q, value, commit)
+                  }
+                )
+              },
+              q.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+          canBack ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size,
+              variant: "outline",
+              leadingIcon: "arrow-left",
+              disabled,
+              onPress: back,
+              children: labels.back
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(View, { style: styles.grow }),
+          skippable && allOptional && answered.length > 1 ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size,
+              variant: "ghost",
+              disabled,
+              onPress: () => {
+                if (loading) return;
+                emitRef.current("survey_page_skipped", { page: page?.id });
+                setTrail((t2) => [...t2, pageIdx]);
+                const next = nextPageIndex(survey, answers, pageIdx);
+                if (next < 0) finish(answers);
+                else setPage(next);
+              },
+              children: labels.skip
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size,
+              variant: "primary",
+              disabled,
+              loading,
+              onPress: advance,
+              children: isLast ? labels.submit : labels.next
+            }
+          )
+        ] })
+      ]
+    }
+  );
   if (layout === "inline") return content;
   return /* @__PURE__ */ jsx(
     Sheet,
@@ -1208,33 +1461,35 @@ function Survey({
 }
 var sheetStyles = createStyleSheet((theme) => ({
   body: { gap: theme.space[16] },
+  bodyCompact: { gap: theme.space[12] },
   header: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
   headerText: { flex: 1, gap: theme.space[2] },
   kicker: {
+    ...theme.type.overline,
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
     color: theme.color.accentStrong
   },
   pageTitle: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     fontSize: theme.type.subheadline.fontSize,
     color: theme.color.text
   },
+  // Count style: mono 12 / 500, text-2.
   counter: {
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3,
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2,
     fontVariant: ["tabular-nums"]
   },
+  // Ghost close: a ghost icon Button sm (30) with the 44 hit.
   iconButton: {
     width: theme.ctl.sm,
     height: theme.ctl.sm,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.full
+    borderRadius: theme.ctl.r.sm
   },
   intro: {
     fontFamily: theme.font.sans,
@@ -1243,9 +1498,10 @@ var sheetStyles = createStyleSheet((theme) => ({
     color: theme.color.text3
   },
   questions: { gap: theme.space[20] },
+  questionsCompact: { gap: theme.space[12] },
   footer: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
   grow: { flex: 1 },
-  pushEnd: { marginLeft: "auto" },
+  pushEnd: { marginStart: "auto" },
   pager: { flex: 1, flexDirection: "row", alignItems: "center", gap: theme.space[5] },
   pagerDot: { width: theme.space[5], height: theme.space[5], borderRadius: theme.radius.full },
   doneBody: { gap: theme.space[11] },
@@ -1264,4 +1520,4 @@ var sheetStyles = createStyleSheet((theme) => ({
   }
 }));
 
-export { SURVEY_FIELD_LABELS, SURVEY_OTHER_PREFIX, Survey, SurveyBoolean, SurveyCheckboxList, SurveyChips, SurveyConsent, SurveyDoneCard, SurveyDropdown, SurveyField, SurveyFieldError, SurveyMatrix, SurveyOpenText, SurveyOptionRow, SurveyOptions, SurveyPager, SurveyQuestionField, SurveyRank, SurveyScale, SurveySlider, SurveyTextInput };
+export { SURVEY_FIELD_LABELS, SURVEY_OTHER_PREFIX, Survey, SurveyBoolean, SurveyCheckboxList, SurveyChips, SurveyConsent, SurveyDate, SurveyDoneCard, SurveyDropdown, SurveyField, SurveyFieldError, SurveyFile, SurveyImageChoice, SurveyMatrix, SurveyOpenText, SurveyOptionRow, SurveyOptions, SurveyPager, SurveyQuestionField, SurveyRank, SurveyScale, SurveySlider, SurveyStatement, SurveyTextInput };