formanitor 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { SelectWidget, TextWidget } from './chunk-AZVJU7NZ.mjs';
+import { SelectWidget, TextWidget } from './chunk-3KRDT7TX.mjs';
 import { parseFunctionalImpairmentScore, functionalImpairmentTotal } from './chunk-LQYWMYEC.mjs';
 import { normalizeObgPathway } from './chunk-IKAKE7TR.mjs';
 import { Checkbox } from './chunk-GNZWSVTB.mjs';
@@ -13,24 +13,85 @@ import './chunk-4BAKQIPJ.mjs';
 import { getThemeConfig } from './chunk-Y7TIWH4I.mjs';
 import { richTextHtmlClassName } from './chunk-I4AV6BQF.mjs';
 export { richTextHtmlClassName } from './chunk-I4AV6BQF.mjs';
-import './chunk-ZSOIQVB3.mjs';
+import './chunk-5I2RC47Y.mjs';
 import { isLabelVisible, FieldRequiredIndicator, fieldLabelClass, fieldWrapperClass, fieldControlClass, fieldDescriptionClass, fieldErrorClass } from './chunk-WYVXXEZI.mjs';
 export { FieldRequiredIndicator, fieldControlClass, fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldWrapperClass, isLabelVisible } from './chunk-WYVXXEZI.mjs';
-import { useForm } from './chunk-XR2ZM654.mjs';
-export { useForm } from './chunk-XR2ZM654.mjs';
+import { useForm } from './chunk-7L2JOWGA.mjs';
+export { useForm } from './chunk-7L2JOWGA.mjs';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-UULLSS4O.mjs';
 import { Input } from './chunk-VNFBUAZD.mjs';
 import './chunk-AZHTIUOL.mjs';
 import { Button } from './chunk-GXXWMHAA.mjs';
-import { useField, useFormStore, normalizeGeneralSurgerySmartHistory, normalizeUrologySmartHistory, normalizePainScaleFlags } from './chunk-ZGPHTPAN.mjs';
-export { EMAIL_REGEX, FormProvider, FormStore, evaluateRules, useField, useFieldHandlers, useFormStore, useFrequentItems, usePackages, validateField, validateForm } from './chunk-ZGPHTPAN.mjs';
+import { useField, useFormStore, parseCampDateValue, normalizeGeneralSurgerySmartHistory, normalizeUrologySmartHistory, normalizePainScaleFlags, campDateSelectionFromOption, MOCK_CAMP_TIME_SLOTS, MOCK_CAMP_DATES } from './chunk-ZTT5XJR7.mjs';
+export { EMAIL_REGEX, FormProvider, FormStore, evaluateRules, useField, useFieldHandlers, useFormStore, useFrequentItems, usePackages, validateField, validateForm } from './chunk-ZTT5XJR7.mjs';
 import { Label } from './chunk-HEFZA2AH.mjs';
 import { cn } from './chunk-VPU66PI6.mjs';
 import * as React6 from 'react';
 import React6__default, { useState, useRef, useEffect, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Circle, X, Image, Upload, Trash2, Check, PenTool, ChevronDown, ChevronRight } from 'lucide-react';
+import { Circle, X, Image, Upload, Trash2, Check, PenTool, Calendar, ChevronLeft, ChevronRight, ChevronDown, MapPin } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { format, parseISO, startOfMonth, isSameMonth, addDays, parse } from 'date-fns';
+
+// src/core/persistence/campBooking.ts
+var CampBookingPersistenceProvider = class {
+  config;
+  constructor(config) {
+    this.config = config;
+  }
+  async save(_formId, state) {
+    const {
+      baseUrl,
+      authToken,
+      patientId,
+      campDateFieldId = "camp_date",
+      slotFieldId = "camp_time_slot",
+      bookingFormDataFields
+    } = this.config;
+    const campDateValue = state.values[campDateFieldId];
+    const instanceId = campDateValue && typeof campDateValue === "object" && !Array.isArray(campDateValue) ? campDateValue.id : null;
+    if (!instanceId || typeof instanceId !== "string") {
+      throw new Error("Camp booking: no instance selected (camp_date field is empty or invalid).");
+    }
+    const primarySlotId = state.values[slotFieldId];
+    if (!primarySlotId || typeof primarySlotId !== "string") {
+      throw new Error("Camp booking: no time slot selected.");
+    }
+    const excludeKeys = /* @__PURE__ */ new Set([campDateFieldId, slotFieldId]);
+    const bookingFormData = {};
+    const fieldKeys = bookingFormDataFields ?? Object.keys(state.values);
+    for (const key of fieldKeys) {
+      if (!excludeKeys.has(key)) {
+        bookingFormData[key] = state.values[key];
+      }
+    }
+    const idempotencyKey = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const payload = {
+      primary_slot_id: primarySlotId,
+      patient_id: patientId,
+      booking_form_data: bookingFormData,
+      idempotency_key: idempotencyKey
+    };
+    const headers = { "Content-Type": "application/json" };
+    if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
+    const response = await fetch(`${baseUrl}/api/camps/instances/${instanceId}/book/`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(payload)
+    });
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => "");
+      throw new Error(
+        `Camp booking failed: ${response.status} ${response.statusText}${errorText ? ` \u2013 ${errorText}` : ""}`
+      );
+    }
+  }
+  async load(_formId) {
+    return null;
+  }
+  async clear(_formId) {
+  }
+};
 
 // src/core/marMedicationOrdersMeta.ts
 var MAR_MEDICATION_ORDERS_META_KEY = "mar_medication_orders";
@@ -1717,6 +1778,387 @@ var OtpInputWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
+function formatCampDatePill(date) {
+  const parsed = parseISO(date);
+  return {
+    day: format(parsed, "d"),
+    weekday: format(parsed, "EEE"),
+    label: format(parsed, "EEE, MMM d, yyyy")
+  };
+}
+async function fetchBookableInstances(base, campId, token) {
+  const today = format(/* @__PURE__ */ new Date(), "yyyy-MM-dd");
+  const end = format(addDays(/* @__PURE__ */ new Date(), 30), "yyyy-MM-dd");
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+  const res = await fetch(
+    `${base}/api/camps/${campId}/instances/?start_date=${today}&end_date=${end}`,
+    { headers }
+  );
+  if (!res.ok) throw new Error(`Instances fetch failed: ${res.status}`);
+  const data = await res.json();
+  const results = data.results ?? [];
+  const withAvailability = await Promise.all(
+    results.map(async (inst) => {
+      const avRes = await fetch(`${base}/api/camps/instances/${inst.id}/availability/`, {
+        headers
+      });
+      const avData = avRes.ok ? await avRes.json() : { windows: [] };
+      const windows = avData.windows ?? [];
+      return { inst, windows };
+    })
+  );
+  return withAvailability.filter(
+    ({ windows }) => windows.some((w) => w.is_bookable && w.primary_available_capacity > 0)
+  ).map(({ inst, windows }) => ({
+    id: inst.id,
+    date: inst.date,
+    location: inst.notes || "",
+    spotsLeft: windows.reduce(
+      (sum, w) => sum + (w.is_bookable ? w.primary_available_capacity ?? 0 : 0),
+      0
+    )
+  }));
+}
+var datesScrollClass = "flex gap-2.5 overflow-x-auto overflow-y-visible pb-4 pt-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+var CAMP_DATE_PRIMARY_GRADIENT = "linear-gradient(328deg, #1F30A0 19.08%, #914BFA 80.92%)";
+var campDatePillShadow = {
+  unselected: "rgba(0, 0, 0, 0.12) 0px 6px 14px",
+  selected: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
+};
+var CampDatesWidget = ({ fieldId }) => {
+  const { fieldDef, value, setValue, setTouched, error, disabled, touched } = useField(fieldId);
+  const { state } = useForm();
+  const store = useFormStore();
+  const showError = !!error && (touched || state.submitAttempted);
+  const [fetchedOptions, setFetchedOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [fetchError, setFetchError] = useState(null);
+  const [monthIndex, setMonthIndex] = useState(0);
+  const def = fieldDef;
+  const campId = def?.meta?.campId;
+  const hasStaticOptions = (def?.options?.length ?? 0) > 0;
+  useEffect(() => {
+    if (!campId || hasStaticOptions) return;
+    const cfg = store.getConfig();
+    const base = cfg.auth?.baseUrl ?? (typeof process !== "undefined" ? process.env?.NEXT_PUBLIC_API_URL ?? "" : "");
+    const token = cfg.camps?.authToken ?? "";
+    setIsLoading(true);
+    setFetchError(null);
+    fetchBookableInstances(base, campId, token).then(setFetchedOptions).catch(() => setFetchError("Failed to load available dates. Please try again.")).finally(() => setIsLoading(false));
+  }, [campId, hasStaticOptions]);
+  const camps = hasStaticOptions ? def?.options ?? [] : fetchedOptions;
+  const selected = parseCampDateValue(value, camps);
+  const sortedCamps = useMemo(
+    () => [...camps].sort((a, b) => a.date.localeCompare(b.date)),
+    [camps]
+  );
+  const months = useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    const result = [];
+    for (const camp of sortedCamps) {
+      const monthStart = startOfMonth(parseISO(camp.date));
+      const key = format(monthStart, "yyyy-MM");
+      if (!seen.has(key)) {
+        seen.add(key);
+        result.push(monthStart);
+      }
+    }
+    return result;
+  }, [sortedCamps]);
+  useEffect(() => {
+    if (months.length === 0) return;
+    if (selected?.date) {
+      const idx = months.findIndex((m) => isSameMonth(m, parseISO(selected.date)));
+      if (idx >= 0) {
+        setMonthIndex(idx);
+        return;
+      }
+    }
+    setMonthIndex(0);
+  }, [months, selected?.date]);
+  if (!fieldDef || !def) return null;
+  const showLabel = isLabelVisible(fieldDef);
+  const currentMonth = months[monthIndex] ?? null;
+  const visibleCamps = currentMonth ? sortedCamps.filter((camp) => isSameMonth(parseISO(camp.date), currentMonth)) : sortedCamps;
+  const canGoPrev = monthIndex > 0;
+  const canGoNext = monthIndex < months.length - 1;
+  const handleSelect = (campOptId) => {
+    if (disabled) return;
+    const camp = camps.find((c) => c.id === campOptId);
+    if (!camp) return;
+    const nextSelection = campDateSelectionFromOption(camp);
+    const prevId = selected?.id ?? null;
+    setValue(nextSelection);
+    setTouched();
+    store.setExternalError(fieldId, null);
+    const timeSlotFieldId = def.meta?.timeSlotFieldId;
+    if (timeSlotFieldId && prevId !== campOptId) {
+      store.setValue(timeSlotFieldId, null);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-3"), children: [
+    showLabel || months.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      showLabel ? /* @__PURE__ */ jsxs("h3", { className: "text-sm font-normal text-[#727272]", children: [
+        fieldDef.label,
+        /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+      ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0" }),
+      months.length > 0 && currentMonth ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 text-[#191919]", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous month",
+            disabled: !canGoPrev || disabled,
+            onClick: () => setMonthIndex((i) => Math.max(0, i - 1)),
+            className: cn(
+              "rounded p-0.5 transition-opacity",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              (!canGoPrev || disabled) && "cursor-not-allowed opacity-30"
+            ),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-[3.5rem] text-center text-sm font-medium", children: format(currentMonth, "MMMM") }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next month",
+            disabled: !canGoNext || disabled,
+            onClick: () => setMonthIndex((i) => Math.min(months.length - 1, i + 1)),
+            className: cn(
+              "rounded p-0.5 transition-opacity",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              (!canGoNext || disabled) && "cursor-not-allowed opacity-30"
+            ),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": true })
+          }
+        )
+      ] }) : null
+    ] }) : null,
+    fieldDef.description ? /* @__PURE__ */ jsx("p", { className: fieldDescriptionClass(fieldDef, "text-sm text-muted-foreground"), children: fieldDef.description }) : null,
+    isLoading ? /* @__PURE__ */ jsx("div", { className: datesScrollClass, children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-[76px] w-12 shrink-0 animate-pulse rounded-full bg-[#D9D9D9]"
+      },
+      i
+    )) }) : fetchError ? /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500", children: fetchError }) : camps.length === 0 && campId ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No available dates in the next 30 days." }) : /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": fieldDef.label, className: datesScrollClass, children: visibleCamps.map((camp) => {
+      const { day, weekday, label } = formatCampDatePill(camp.date);
+      const isSelected = selected?.id === camp.id;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": isSelected,
+          "aria-label": label,
+          disabled,
+          onClick: () => handleSelect(camp.id),
+          className: cn(
+            "relative flex h-[76px] w-12 shrink-0 flex-col items-center justify-between gap-2.5 rounded-full p-1.5",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            !isSelected && "bg-white",
+            disabled && "cursor-not-allowed opacity-60"
+          ),
+          style: {
+            boxShadow: isSelected ? "none" : campDatePillShadow.unselected
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "absolute inset-0 rounded-full bg-[#2F2F2F] transition-opacity duration-400",
+                  isSelected ? "opacity-100" : "opacity-0"
+                ),
+                style: { boxShadow: campDatePillShadow.selected }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "relative z-10 flex h-9 w-9 items-center justify-center rounded-full text-[12px] font-medium transition-colors duration-200",
+                  isSelected ? "text-white" : "bg-[#D9D9D9] text-[#1E1E1E]"
+                ),
+                style: isSelected ? { backgroundImage: CAMP_DATE_PRIMARY_GRADIENT } : void 0,
+                children: day
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "relative z-10 mb-1.5 text-center text-[10px] font-normal transition-colors duration-400",
+                  isSelected ? "text-white" : "text-[#1E1E1E]"
+                ),
+                children: weekday
+              }
+            )
+          ]
+        },
+        camp.id
+      );
+    }) }),
+    showError ? /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error }) : null
+  ] });
+};
+function formatSlotTime(time) {
+  try {
+    return format(parse(time, "HH:mm:ss", /* @__PURE__ */ new Date()), "hh:mm a");
+  } catch {
+    return time;
+  }
+}
+function mapWindowsToSlots(windows) {
+  return windows.map((w) => ({
+    id: w.primary_slot_id,
+    time: formatSlotTime(w.start_time),
+    spotsLeft: w.is_bookable ? w.primary_available_capacity ?? 0 : 0,
+    capacity: w.primary_available_capacity ?? 0
+  }));
+}
+var slotsScrollClass = "w-full overflow-x-auto pb-1 [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/70";
+var slotPillShadow = "0 2.596px 5.193px 0 rgba(0, 0, 0, 0.10)";
+var CampTimeSlotsWidget = ({ fieldId }) => {
+  const { fieldDef, value, setValue, setTouched, error, disabled, touched } = useField(fieldId);
+  const { state } = useForm();
+  const store = useFormStore();
+  const campDateFieldId = fieldDef?.meta?.campDateFieldId ?? "camp_date";
+  const { value: campDateValue, fieldDef: campDateFieldDef } = useField(campDateFieldId);
+  const showError = !!error && (touched || state.submitAttempted);
+  const def = fieldDef;
+  const campDateOptions = campDateFieldDef?.options;
+  const selectedCamp = parseCampDateValue(campDateValue, campDateOptions);
+  const prevCampIdRef = useRef(selectedCamp?.id ?? null);
+  const [fetchedSlots, setFetchedSlots] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [fetchError, setFetchError] = useState(null);
+  const hasStaticOptions = (def?.options?.length ?? 0) > 0;
+  const slots = hasStaticOptions ? def?.options ?? [] : fetchedSlots;
+  const selectedSlotId = value != null ? String(value) : null;
+  useEffect(() => {
+    if (hasStaticOptions || !selectedCamp?.id) {
+      if (!selectedCamp?.id) {
+        setFetchedSlots([]);
+        setFetchError(null);
+      }
+      return;
+    }
+    const instanceId = selectedCamp.id;
+    const cfg = store.getConfig();
+    const base = cfg.auth?.baseUrl ?? (typeof process !== "undefined" ? process.env?.NEXT_PUBLIC_API_URL ?? "" : "");
+    const token = cfg.camps?.authToken ?? "";
+    const headers = token ? { Authorization: `Bearer ${token}` } : {};
+    setIsLoading(true);
+    setFetchError(null);
+    fetch(`${base}/api/camps/instances/${instanceId}/availability/`, { headers }).then((r) => {
+      if (!r.ok) throw new Error(`Availability fetch failed: ${r.status}`);
+      return r.json();
+    }).then((data) => {
+      setFetchedSlots(mapWindowsToSlots(data.windows ?? []));
+    }).catch(() => setFetchError("Failed to load time slots. Please try again.")).finally(() => setIsLoading(false));
+  }, [selectedCamp?.id, hasStaticOptions]);
+  useEffect(() => {
+    const campId = selectedCamp?.id ?? null;
+    if (prevCampIdRef.current !== null && prevCampIdRef.current !== campId && selectedSlotId) {
+      setValue(null);
+    }
+    prevCampIdRef.current = campId;
+  }, [selectedCamp?.id, selectedSlotId, setValue]);
+  useEffect(() => {
+    if (!selectedSlotId) return;
+    const slotStillValid = slots.some((slot) => slot.id === selectedSlotId && slot.spotsLeft > 0);
+    if (!slotStillValid) {
+      setValue(null);
+    }
+  }, [selectedSlotId, setValue, slots]);
+  if (!fieldDef || !def) return null;
+  const showLabel = isLabelVisible(fieldDef);
+  const handleSelect = (slotId, button) => {
+    if (disabled) return;
+    setValue(slotId);
+    setTouched();
+    button?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+  };
+  const dateLabel = selectedCamp?.date ? format(parseISO(selectedCamp.date), "EEE, MMM d, yyyy") : null;
+  return /* @__PURE__ */ jsxs("div", { className: fieldWrapperClass(fieldDef, "space-y-3"), children: [
+    showLabel ? /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsxs(
+        "h3",
+        {
+          className: fieldLabelClass(
+            fieldDef,
+            "text-lg font-semibold leading-tight text-foreground"
+          ),
+          children: [
+            fieldDef.label,
+            /* @__PURE__ */ jsx(FieldRequiredIndicator, { fieldDef })
+          ]
+        }
+      ),
+      dateLabel ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }),
+        dateLabel
+      ] }) : null
+    ] }) : null,
+    isLoading ? /* @__PURE__ */ jsx("div", { className: slotsScrollClass, children: /* @__PURE__ */ jsxs("div", { className: "relative", style: { minWidth: "max-content" }, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-0 h-0.5 w-full bg-[#DCDCDC]" }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-4 pt-3", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "mb-2 h-[34px] w-[86px] shrink-0 animate-pulse rounded-full bg-[#DCDCDC]"
+        },
+        i
+      )) })
+    ] }) }) : fetchError ? /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500", children: fetchError }) : !selectedCamp?.id ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a date to see available time slots." }) : slots.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No time slots available for this date." }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": fieldDef.label,
+        className: slotsScrollClass,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative", style: { minWidth: "max-content" }, children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-0 h-0.5 w-full bg-[#DCDCDC]" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-4 pt-3", children: slots.map((slot) => {
+            const isFull = slot.spotsLeft <= 0;
+            const selected = selectedSlotId === slot.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": selected,
+                disabled: disabled || isFull,
+                onClick: (e) => handleSelect(slot.id, e.currentTarget),
+                className: cn(
+                  "relative mb-2 w-[86px] shrink-0 rounded-full px-3 py-2 text-xs font-medium transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  isFull ? "cursor-not-allowed bg-[#DCDCDC]/60 text-black/40" : selected ? "bg-[#2F2F2F] text-white" : "bg-[#DCDCDC] text-black",
+                  disabled && !isFull && "cursor-not-allowed opacity-60"
+                ),
+                style: isFull ? void 0 : { boxShadow: slotPillShadow },
+                children: [
+                  selected && !isFull ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "absolute -top-3 left-0 right-0 h-0.5 bg-[#6641D8]",
+                      "aria-hidden": true
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: slot.time })
+                ]
+              },
+              slot.id
+            );
+          }) })
+        ] })
+      }
+    ),
+    showError ? /* @__PURE__ */ jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error }) : null
+  ] });
+};
 var Switch = React6.forwardRef(
   ({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -1754,40 +2196,40 @@ Switch.displayName = "Switch";
 function lazyNamed(loader, name) {
   return React6__default.lazy(async () => ({ default: (await loader())[name] }));
 }
-var RichTextWidget = lazyNamed(() => import('./RichTextWidget-5OOJ2LJN.mjs'), "RichTextWidget");
-var DateWidget = lazyNamed(() => import('./DateWidget-K2TVTZ7Z.mjs'), "DateWidget");
-var DateTimeWidget = lazyNamed(() => import('./DateTimeWidget-WKQIEQSA.mjs'), "DateTimeWidget");
-var EditableTableWidget = lazyNamed(() => import('./EditableTable-LPAYCK36.mjs'), "EditableTableWidget");
-var AddMedicationWidget = lazyNamed(() => import('./AddMedicationWidget-I5UIT3WG.mjs'), "AddMedicationWidget");
-var DischargeMedicationOrdersWidget = lazyNamed(() => import('./DischargeMedicationOrdersWidget-26ALTGJM.mjs'), "DischargeMedicationOrdersWidget");
-var AddInvestigationWidget = lazyNamed(() => import('./AddInvestigationWidget-TQUKTGAW.mjs'), "AddInvestigationWidget");
-var AddProcedureWidget = lazyNamed(() => import('./AddProcedureWidget-NB46COB6.mjs'), "AddProcedureWidget");
-var DifferentialDiagnosisWidget = lazyNamed(() => import('./DifferentialDiagnosisWidget-FENJP245.mjs'), "DifferentialDiagnosisWidget");
-var VitalsWidget = lazyNamed(() => import('./VitalsWidget-MBYDGC7U.mjs'), "VitalsWidget");
-var HiddenVitalsWidget = lazyNamed(() => import('./HiddenVitalsWidget-W23IFSEF.mjs'), "HiddenVitalsWidget");
-var ReferralWidget = lazyNamed(() => import('./ReferralWidget-IYTS32TS.mjs'), "ReferralWidget");
-var FollowupWidget = lazyNamed(() => import('./FollowupWidget-NJ4QDBOG.mjs'), "FollowupWidget");
-var SmartTextareaWidget = lazyNamed(() => import('./SmartTextarea-ZCXGMZLG.mjs'), "SmartTextareaWidget");
-var DiagnosisTextareaWidget = lazyNamed(() => import('./DiagnosisTextareaWidget-RD65PGDY.mjs'), "DiagnosisTextareaWidget");
-var ObstetricHistoryWidget = lazyNamed(() => import('./ObstetricHistoryWidget-WD572Q7H.mjs'), "ObstetricHistoryWidget");
-var OphthalmologyWidget = lazyNamed(() => import('./OphthalmologyWidget-CRQMN5QU.mjs'), "OphthalmologyWidget");
-var OphthalDiagnosisWidget = lazyNamed(() => import('./OphthalDiagnosisWidget-Y3AHD6AG.mjs'), "OphthalDiagnosisWidget");
-var OrthopedicExamWidget = lazyNamed(() => import('./OrthopedicExamWidget-PAOIVU6Z.mjs'), "OrthopedicExamWidget");
-var MarMedicationOrdersWidget = lazyNamed(() => import('./MarMedicationOrdersWidget-IKMAFPRG.mjs'), "MarMedicationOrdersWidget");
-var SuggestionTextareaWidget = lazyNamed(() => import('./SuggestionTextareaWidget-RN5LZYFC.mjs'), "SuggestionTextareaWidget");
-var LensAssessmentWidget = lazyNamed(() => import('./LensAssessmentWidget-SJ6YUTSN.mjs'), "LensAssessmentWidget");
-var FunctionalImpairmentScoreWidget = lazyNamed(() => import('./FunctionalImpairmentScoreWidget-ZNLKKBYN.mjs'), "FunctionalImpairmentScoreWidget");
-var BiometryIolWorkupWidget = lazyNamed(() => import('./BiometryIolWorkupWidget-F7HRYMOJ.mjs'), "BiometryIolWorkupWidget");
-var SurgicalRiskFlagsWidget = lazyNamed(() => import('./SurgicalRiskFlagsWidget-DBICX4MB.mjs'), "SurgicalRiskFlagsWidget");
-var GsSmartHistoryWidget = lazyNamed(() => import('./GsSmartHistoryWidget-LGN7W2AV.mjs'), "GsSmartHistoryWidget");
-var GsExaminationWidget = lazyNamed(() => import('./GsExaminationWidget-MEIUHRQQ.mjs'), "GsExaminationWidget");
-var GsGradingWidget = lazyNamed(() => import('./GsGradingWidget-4UPOEYNL.mjs'), "GsGradingWidget");
-var PainScaleFlagsWidget = lazyNamed(() => import('./PainScaleFlagsWidget-MRMQ7HPJ.mjs'), "PainScaleFlagsWidget");
-var UrologySmartHistoryWidget = lazyNamed(() => import('./UrologySmartHistoryWidget-NFTHHK6A.mjs'), "UrologySmartHistoryWidget");
-var UrologyExaminationWidget = lazyNamed(() => import('./UrologyExaminationWidget-IQEBP6CI.mjs'), "UrologyExaminationWidget");
-var UrologyPathwayWidget = lazyNamed(() => import('./UrologyPathwayWidget-S4QY6RD6.mjs'), "UrologyPathwayWidget");
-var OBGExaminationWidget = lazyNamed(() => import('./OBGExaminationWidget-BK4ERETW.mjs'), "OBGExaminationWidget");
-var OBGPathwayWidget = lazyNamed(() => import('./OBGPathwayWidget-U5BCAESB.mjs'), "OBGPathwayWidget");
+var RichTextWidget = lazyNamed(() => import('./RichTextWidget-BBCNJPMH.mjs'), "RichTextWidget");
+var DateWidget = lazyNamed(() => import('./DateWidget-4ND5TKP2.mjs'), "DateWidget");
+var DateTimeWidget = lazyNamed(() => import('./DateTimeWidget-LFBB6HOP.mjs'), "DateTimeWidget");
+var EditableTableWidget = lazyNamed(() => import('./EditableTable-TGCVUBLO.mjs'), "EditableTableWidget");
+var AddMedicationWidget = lazyNamed(() => import('./AddMedicationWidget-UG26VMUX.mjs'), "AddMedicationWidget");
+var DischargeMedicationOrdersWidget = lazyNamed(() => import('./DischargeMedicationOrdersWidget-GYT35W7J.mjs'), "DischargeMedicationOrdersWidget");
+var AddInvestigationWidget = lazyNamed(() => import('./AddInvestigationWidget-7UGZQYI5.mjs'), "AddInvestigationWidget");
+var AddProcedureWidget = lazyNamed(() => import('./AddProcedureWidget-SQJUKKMK.mjs'), "AddProcedureWidget");
+var DifferentialDiagnosisWidget = lazyNamed(() => import('./DifferentialDiagnosisWidget-LCY2SA2I.mjs'), "DifferentialDiagnosisWidget");
+var VitalsWidget = lazyNamed(() => import('./VitalsWidget-BRFUKGNO.mjs'), "VitalsWidget");
+var HiddenVitalsWidget = lazyNamed(() => import('./HiddenVitalsWidget-JH3NRZLM.mjs'), "HiddenVitalsWidget");
+var ReferralWidget = lazyNamed(() => import('./ReferralWidget-UPYWEO5R.mjs'), "ReferralWidget");
+var FollowupWidget = lazyNamed(() => import('./FollowupWidget-F6FRZO4T.mjs'), "FollowupWidget");
+var SmartTextareaWidget = lazyNamed(() => import('./SmartTextarea-ZTQIW6O2.mjs'), "SmartTextareaWidget");
+var DiagnosisTextareaWidget = lazyNamed(() => import('./DiagnosisTextareaWidget-MAOXCXEZ.mjs'), "DiagnosisTextareaWidget");
+var ObstetricHistoryWidget = lazyNamed(() => import('./ObstetricHistoryWidget-EGVLL4X2.mjs'), "ObstetricHistoryWidget");
+var OphthalmologyWidget = lazyNamed(() => import('./OphthalmologyWidget-RG2AI6WA.mjs'), "OphthalmologyWidget");
+var OphthalDiagnosisWidget = lazyNamed(() => import('./OphthalDiagnosisWidget-G5RCC2QZ.mjs'), "OphthalDiagnosisWidget");
+var OrthopedicExamWidget = lazyNamed(() => import('./OrthopedicExamWidget-BBZP6NVT.mjs'), "OrthopedicExamWidget");
+var MarMedicationOrdersWidget = lazyNamed(() => import('./MarMedicationOrdersWidget-QZUVSEB5.mjs'), "MarMedicationOrdersWidget");
+var SuggestionTextareaWidget = lazyNamed(() => import('./SuggestionTextareaWidget-22NR3JWM.mjs'), "SuggestionTextareaWidget");
+var LensAssessmentWidget = lazyNamed(() => import('./LensAssessmentWidget-7WMULFS2.mjs'), "LensAssessmentWidget");
+var FunctionalImpairmentScoreWidget = lazyNamed(() => import('./FunctionalImpairmentScoreWidget-QKIZE7KT.mjs'), "FunctionalImpairmentScoreWidget");
+var BiometryIolWorkupWidget = lazyNamed(() => import('./BiometryIolWorkupWidget-NL2M7ZAA.mjs'), "BiometryIolWorkupWidget");
+var SurgicalRiskFlagsWidget = lazyNamed(() => import('./SurgicalRiskFlagsWidget-WCAHZKKG.mjs'), "SurgicalRiskFlagsWidget");
+var GsSmartHistoryWidget = lazyNamed(() => import('./GsSmartHistoryWidget-IOGZ6GNS.mjs'), "GsSmartHistoryWidget");
+var GsExaminationWidget = lazyNamed(() => import('./GsExaminationWidget-J4VABGY6.mjs'), "GsExaminationWidget");
+var GsGradingWidget = lazyNamed(() => import('./GsGradingWidget-3WTLIP33.mjs'), "GsGradingWidget");
+var PainScaleFlagsWidget = lazyNamed(() => import('./PainScaleFlagsWidget-E576R6QB.mjs'), "PainScaleFlagsWidget");
+var UrologySmartHistoryWidget = lazyNamed(() => import('./UrologySmartHistoryWidget-PBU4QXQJ.mjs'), "UrologySmartHistoryWidget");
+var UrologyExaminationWidget = lazyNamed(() => import('./UrologyExaminationWidget-QDTD3FJX.mjs'), "UrologyExaminationWidget");
+var UrologyPathwayWidget = lazyNamed(() => import('./UrologyPathwayWidget-QTFKUIM7.mjs'), "UrologyPathwayWidget");
+var OBGExaminationWidget = lazyNamed(() => import('./OBGExaminationWidget-POVLALMA.mjs'), "OBGExaminationWidget");
+var OBGPathwayWidget = lazyNamed(() => import('./OBGPathwayWidget-CGT7Q4T2.mjs'), "OBGPathwayWidget");
 function lazyWidget(node) {
   return /* @__PURE__ */ jsx(React6__default.Suspense, { fallback: null, children: node });
 }
@@ -1888,6 +2330,10 @@ function renderWidget(fieldId, fieldDef) {
       return /* @__PURE__ */ jsx(PhoneInputWidget, { fieldId });
     case "otp_input":
       return /* @__PURE__ */ jsx(OtpInputWidget, { fieldId });
+    case "camp_dates":
+      return /* @__PURE__ */ jsx(CampDatesWidget, { fieldId });
+    case "camp_time_slots":
+      return /* @__PURE__ */ jsx(CampTimeSlotsWidget, { fieldId });
     case "toggle": {
       const { value, setValue, setTouched, disabled } = useField(fieldId);
       const store = useFormStore();
@@ -2119,6 +2565,14 @@ function isFieldComplete(id, state, fieldMap) {
     const v = state.values[id];
     if (v === null || v === void 0 || v === "") return false;
     if (Array.isArray(v) && v.length === 0) return false;
+    if (def.type === "camp_dates") {
+      if (!parseCampDateValue(v, def.options)?.id) return false;
+    }
+    if (def.type === "otp_input") {
+      if (!v || typeof v !== "object" || v.verified !== true) {
+        return false;
+      }
+    }
   }
   return true;
 }
@@ -2198,17 +2652,27 @@ var Stepper = ({ steps, statuses, variant }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0 mb-6", children: steps.map((step, i) => {
     const status = statuses[i];
     return /* @__PURE__ */ jsxs(React6__default.Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold border-2 transition-colors",
-              status === "complete" && "border-primary bg-primary text-primary-foreground",
-              status === "active" && "border-primary bg-background text-primary",
-              status === "locked" && "border-border bg-background text-muted-foreground"
+              "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold leading-none transition-colors",
+              status === "complete" && "border-primary bg-primary",
+              status === "active" && "border-primary bg-background",
+              status === "locked" && "border-border bg-background"
             ),
-            children: status === "complete" ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : i + 1
+            children: status === "complete" ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-primary-foreground" }) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "tabular-nums",
+                  status === "active" && "text-primary",
+                  status === "locked" && "text-muted-foreground"
+                ),
+                children: i + 1
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx(
@@ -2248,11 +2712,6 @@ var Wizard = ({ node }) => {
   }));
   useEffect(() => {
     return store.subscribe((state) => {
-      console.log("[MultiStepForm] store update \u2192", {
-        values: state.values,
-        errors: state.errors,
-        visibility: state.visibility
-      });
       setFormState({ ...state });
     });
   }, [store]);
@@ -2265,17 +2724,10 @@ var Wizard = ({ node }) => {
   const showStepper = meta?.showStepper !== false;
   const variant = meta?.stepperVariant ?? "numbered";
   const collapseCompleted = meta?.collapseCompleted !== false;
-  const stepComplete = steps.map((s) => {
-    const fieldIds = flattenStepFieldIds(s);
-    const complete = isStepComplete(s, formState, fieldMap);
-    console.log(`[MultiStepForm] step "${s.id}" fieldIds=${JSON.stringify(fieldIds)} complete=${complete}`, {
-      errors: fieldIds.map((id) => ({ id, error: formState.errors[id] })),
-      values: fieldIds.map((id) => ({ id, value: formState.values[id] }))
-    });
-    return complete;
-  });
+  const stepComplete = steps.map(
+    (s) => isStepComplete(s, formState, fieldMap)
+  );
   const activeIndex = stepComplete.findIndex((c) => !c) === -1 ? steps.length : stepComplete.findIndex((c) => !c);
-  console.log(`[MultiStepForm] activeIndex=${activeIndex} stepComplete=${JSON.stringify(stepComplete)}`);
   const statuses = steps.map((_, i) => {
     if (i < activeIndex) return "complete";
     if (i === activeIndex) return "active";
@@ -2292,17 +2744,7 @@ var Wizard = ({ node }) => {
         if (collapseCompleted) {
           return /* @__PURE__ */ jsx(Section, { title: step.title, children }, step.id);
         }
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "mb-4 opacity-60 pointer-events-none select-none space-y-4",
-            children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-base font-medium text-foreground", children: step.title }),
-              children
-            ]
-          },
-          step.id
-        );
+        return /* @__PURE__ */ jsx(ActiveStep, { title: step.title, children }, step.id);
       }
       return /* @__PURE__ */ jsx(ActiveStep, { title: step.title, children }, step.id);
     }) })
@@ -2880,6 +3322,30 @@ var ReadOnlyDischargeMedicationOrders = ({ fieldDef, value }) => {
     }) })
   ] });
 };
+var ReadOnlyCampDates = ({ fieldDef, value }) => {
+  const camps = fieldDef.options?.length ? fieldDef.options : MOCK_CAMP_DATES;
+  const selected = parseCampDateValue(value, camps);
+  const isEmpty = !selected;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 p-3 min-h-[2.5rem]", children: isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No value" }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900", children: format(parseISO(selected.date), "EEE, MMM d, yyyy") }),
+      selected.location ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-sm text-gray-600", children: [
+        /* @__PURE__ */ jsx(MapPin, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }),
+        selected.location
+      ] }) : null
+    ] }) })
+  ] });
+};
+var ReadOnlyCampTimeSlots = ({ fieldDef, value }) => {
+  const slots = fieldDef.options?.length ? fieldDef.options : MOCK_CAMP_TIME_SLOTS;
+  const selected = slots.find((slot) => String(slot.id) === String(value));
+  const isEmpty = value == null || value === "";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-[2.5rem] rounded-md border border-gray-200 bg-gray-50 p-3", children: isEmpty || !selected ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No value" }) : /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: selected.time }) })
+  ] });
+};
 var ReadOnlyTable = React6__default.lazy(
   () => import('./ReadOnlyTable-4Y2XW4MX.mjs').then((m) => ({ default: m.ReadOnlyTable }))
 );
@@ -2925,6 +3391,10 @@ var ReadOnlyFieldRenderer = ({
       return /* @__PURE__ */ jsx(ReadOnlyReferral, { fieldDef, value });
     case "discharge_medication_orders":
       return /* @__PURE__ */ jsx(ReadOnlyDischargeMedicationOrders, { fieldDef, value });
+    case "camp_dates":
+      return /* @__PURE__ */ jsx(ReadOnlyCampDates, { fieldDef, value });
+    case "camp_time_slots":
+      return /* @__PURE__ */ jsx(ReadOnlyCampTimeSlots, { fieldDef, value });
     case "toggle": {
       const isOn = value === true;
       return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -3422,6 +3892,6 @@ function createUploadHandler(options) {
   );
 }
 
-export { DynamicForm, DynamicFormV2, FieldRenderer, FormControls, FormFileUploadWidget, ImageUploadWidget, MAR_MEDICATION_ORDERS_META_KEY, MediaUploadWidget, MultiStepForm, ReadOnlyForm, ReadOnlyImageUpload, ReadOnlyMediaUpload, ReadOnlySignature, SignatureUploadWidget, SmartForm, Upload3 as Upload, createUploadHandler, fieldMetaRequestsMarMedicationOrdersButton };
+export { CampBookingPersistenceProvider, DynamicForm, DynamicFormV2, FieldRenderer, FormControls, FormFileUploadWidget, ImageUploadWidget, MAR_MEDICATION_ORDERS_META_KEY, MediaUploadWidget, MultiStepForm, ReadOnlyForm, ReadOnlyImageUpload, ReadOnlyMediaUpload, ReadOnlySignature, SignatureUploadWidget, SmartForm, Upload3 as Upload, createUploadHandler, fieldMetaRequestsMarMedicationOrdersButton };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map