formanitor 0.0.28 → 0.0.30

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import * as React13 from 'react';
-import React13__default, { createContext, useContext, useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
+import * as React15 from 'react';
+import React15__default, { createContext, useContext, useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronDown, ChevronUp, Check, Circle, X, Image, Upload, Trash2, Plus, Loader2, PenTool, Mic, Undo, Redo, ChevronRight, Calendar as Calendar$1, ChevronLeft, RefreshCw, Clock, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -9,7 +10,6 @@ import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
 import Underline from '@tiptap/extension-underline';
-import { ChevronDown, ChevronUp, Check, Circle, X, Image, Upload, Trash2, Plus, Loader2, PenTool, Undo, Redo, ChevronRight, Calendar as Calendar$1, ChevronLeft, RefreshCw, Clock, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -251,6 +251,9 @@ var FormStore = class {
   getFieldDef(fieldId) {
     return this.fieldMap[fieldId];
   }
+  getVoice() {
+    return this.config.voice;
+  }
   hasPersistence() {
     return this.persistence !== NO_OP_PROVIDER;
   }
@@ -603,6 +606,7 @@ var FormStore = class {
     if (next.onUpload !== void 0) this.config.onUpload = next.onUpload;
     if (next.onEvent !== void 0) this.config.onEvent = next.onEvent;
     if (next.onDraftChange !== void 0) this.config.onDraftChange = next.onDraftChange;
+    if (next.voice !== void 0) this.config.voice = next.voice;
     if (next.role !== void 0 && next.role !== this.config.role) {
       this.config.role = next.role;
       needsReeval = true;
@@ -664,6 +668,21 @@ var FormStore = class {
     this.listeners.forEach((l) => l(this.state));
   }
 };
+var VoiceContext = createContext({
+  activeFieldId: null,
+  setActiveFieldId: () => {
+  }
+});
+function useVoiceContext() {
+  return useContext(VoiceContext);
+}
+function VoiceContextProvider({ children }) {
+  const [activeFieldId, setActiveFieldIdState] = useState(null);
+  const setActiveFieldId = useCallback((id) => {
+    setActiveFieldIdState(id);
+  }, []);
+  return /* @__PURE__ */ jsx(VoiceContext.Provider, { value: { activeFieldId, setActiveFieldId }, children });
+}
 var FormContext = createContext(null);
 var emptyFrequentItems = {
   medications: [],
@@ -699,7 +718,7 @@ var FormProvider = ({
     storeRef.current?.load();
   }, []);
   const frequentItemsValue = frequentItems ?? emptyFrequentItems;
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: storeRef.current, children: /* @__PURE__ */ jsx(FieldHandlersContext.Provider, { value: fieldHandlers ?? {}, children: /* @__PURE__ */ jsx(FrequentItemsContext.Provider, { value: frequentItemsValue, children }) }) });
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: storeRef.current, children: /* @__PURE__ */ jsx(FieldHandlersContext.Provider, { value: fieldHandlers ?? {}, children: /* @__PURE__ */ jsx(FrequentItemsContext.Provider, { value: frequentItemsValue, children: /* @__PURE__ */ jsx(VoiceContextProvider, { children }) }) }) });
 };
 function useFormStore() {
   const context = useContext(FormContext);
@@ -756,10 +775,76 @@ function useField(fieldId) {
     setTouched
   };
 }
+function RecordingWave() {
+  const bars = [
+    { dur: "0.6s", values: "3;10;3", yValues: "4.5;0;4.5", delay: "0s" },
+    { dur: "0.6s", values: "8;3;8", yValues: "2;4.5;2", delay: "0.1s" },
+    { dur: "0.6s", values: "5;11;5", yValues: "3.5;0.5;3.5", delay: "0.05s" },
+    { dur: "0.6s", values: "10;4;10", yValues: "1;4;1", delay: "0.15s" }
+  ];
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "12", viewBox: "0 0 18 12", "aria-hidden": true, children: bars.map((b, i) => /* @__PURE__ */ jsxs("rect", { x: i * 4 + 1, width: "2.5", rx: "1.25", fill: "currentColor", y: "0", height: "12", children: [
+    /* @__PURE__ */ jsx("animate", { attributeName: "height", values: b.values, dur: b.dur, begin: b.delay, repeatCount: "indefinite" }),
+    /* @__PURE__ */ jsx("animate", { attributeName: "y", values: b.yValues, dur: b.dur, begin: b.delay, repeatCount: "indefinite" })
+  ] }, i)) });
+}
+function VoiceMicButton({ fieldId, onTranscriptReady }) {
+  const store = useFormStore();
+  const { activeFieldId, setActiveFieldId } = useVoiceContext();
+  const [status, setStatus] = useState("idle");
+  const voice = store.getVoice();
+  const isActive = activeFieldId === fieldId;
+  const isRecording = status === "recording" && isActive;
+  const isTranscribing = status === "transcribing" && isActive;
+  const isBlocked = activeFieldId !== null && !isActive;
+  const handleClick = useCallback(async () => {
+    if (!voice || isBlocked || isTranscribing) return;
+    if (isRecording) {
+      setStatus("transcribing");
+      try {
+        const transcript = await voice.stopRecording();
+        if (transcript) onTranscriptReady(transcript);
+      } catch {
+      } finally {
+        setStatus("idle");
+        setActiveFieldId(null);
+      }
+    } else {
+      setActiveFieldId(fieldId);
+      setStatus("recording");
+      try {
+        await voice.startRecording();
+      } catch {
+        setStatus("idle");
+        setActiveFieldId(null);
+      }
+    }
+  }, [voice, isBlocked, isTranscribing, isRecording, fieldId, onTranscriptReady, setActiveFieldId]);
+  const title = isTranscribing ? "Processing\u2026" : isRecording ? "Stop recording" : "Dictate this field";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: isBlocked || isTranscribing,
+      title,
+      className: [
+        "flex items-center gap-1 rounded px-1 py-0.5",
+        "text-[11px] font-medium transition-opacity",
+        isBlocked ? "pointer-events-none opacity-30" : "",
+        isTranscribing ? "cursor-wait opacity-50" : "",
+        !isBlocked && !isTranscribing ? "hover:opacity-70" : ""
+      ].filter(Boolean).join(" "),
+      children: isTranscribing ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-slate-400" }) : isRecording ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-rose-400", children: /* @__PURE__ */ jsx(RecordingWave, {}) }),
+        /* @__PURE__ */ jsx("span", { className: "text-rose-400", children: "Stop" })
+      ] }) : /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4 text-slate-400" })
+    }
+  );
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var Input = React13.forwardRef(
+var Input = React15.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -779,7 +864,7 @@ Input.displayName = "Input";
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -788,7 +873,7 @@ var Label = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var Textarea = React13.forwardRef(
+var Textarea = React15.forwardRef(
   ({ className, height, style, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -832,6 +917,8 @@ function getThemeConfig(fieldType, themeName) {
 var TextWidget = ({ fieldId }) => {
   const { fieldDef, value, setValue, setTouched, error, disabled, touched } = useField(fieldId);
   const { state } = useForm();
+  const store = useFormStore();
+  const hasVoice = !!(fieldDef?.voice && store.getVoice());
   const showError = !!error && (touched || state.submitAttempted);
   if (!fieldDef) return null;
   const Component = fieldDef.type === "textarea" ? Textarea : Input;
@@ -849,8 +936,12 @@ var TextWidget = ({ fieldId }) => {
     " ",
     fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
   ] });
+  const labelEl = theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent });
   return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
-    theme ? /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: labelClass, children: labelContent }) : /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent }),
+    hasVoice ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      labelEl,
+      /* @__PURE__ */ jsx(VoiceMicButton, { fieldId, onTranscriptReady: setValue })
+    ] }) : labelEl,
     /* @__PURE__ */ jsx(
       Component,
       {
@@ -892,7 +983,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React13.forwardRef(
+var Button = React15.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -906,7 +997,7 @@ var Button = React13.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Separator = React13.forwardRef(
+var Separator = React15.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -1038,6 +1129,8 @@ function RichTextToolbar({
 var RichTextWidget = ({ fieldId }) => {
   const { fieldDef, value, setValue, setTouched, error, disabled, touched } = useField(fieldId);
   const { state } = useForm();
+  const store = useFormStore();
+  const hasVoice = !!(fieldDef?.voice && store.getVoice());
   const showError = !!error && (touched || state.submitAttempted);
   const def = fieldDef;
   const placeholder = def?.placeholder ?? "Start typing\u2026";
@@ -1119,8 +1212,12 @@ var RichTextWidget = ({ fieldId }) => {
     " ",
     fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
   ] });
+  const labelEl = /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent }),
+    hasVoice ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      labelEl,
+      /* @__PURE__ */ jsx(VoiceMicButton, { fieldId, onTranscriptReady: setValue })
+    ] }) : labelEl,
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1158,7 +1255,7 @@ var RichTextWidget = ({ fieldId }) => {
 };
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -1174,7 +1271,7 @@ var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -1187,7 +1284,7 @@ var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -1200,7 +1297,7 @@ var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React15.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -1228,7 +1325,7 @@ var SelectContent = React13.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -1237,7 +1334,7 @@ var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -1253,7 +1350,7 @@ var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -1342,7 +1439,7 @@ var SelectWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
-var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -1416,7 +1513,7 @@ var MultiSelectWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
-var Table = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+var Table = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -1425,9 +1522,9 @@ var Table = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -1436,7 +1533,7 @@ var TableBody = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -1448,7 +1545,7 @@ var TableFooter = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -1460,7 +1557,7 @@ var TableRow = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -1472,7 +1569,7 @@ var TableHead = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -1481,7 +1578,7 @@ var TableCell = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -1497,7 +1594,7 @@ var RepeatableWidget = ({
   if (!fieldDef || fieldDef.type !== "repeatable") return null;
   const def = fieldDef;
   const rows = Array.isArray(value) ? value : [];
-  const [hasInteracted, setHasInteracted] = React13__default.useState(false);
+  const [hasInteracted, setHasInteracted] = React15__default.useState(false);
   const showError = !!error && (touched || hasInteracted);
   const addRow = () => {
     setValue([...rows, {}]);
@@ -1583,29 +1680,66 @@ var RepeatableWidget = ({
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
+function CalendarDropdown(props) {
+  const { options, value, onChange } = props;
+  const handleValueChange = (newValue) => {
+    if (!onChange) return;
+    const syntheticEvent = {
+      target: { value: newValue }
+    };
+    onChange(syntheticEvent);
+  };
+  return /* @__PURE__ */ jsxs(Select, { value: value?.toString(), onValueChange: handleValueChange, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 px-2 text-sm", "aria-label": props["aria-label"], children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: options?.map((option) => /* @__PURE__ */ jsx(
+      SelectItem,
+      {
+        value: option.value.toString(),
+        disabled: option.disabled,
+        children: option.label
+      },
+      option.value.toString()
+    )) })
+  ] });
+}
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   ...props
 }) {
+  const captionLayout = props.captionLayout ?? "dropdown";
+  const isDropdownCaption = captionLayout === "dropdown" || captionLayout === "dropdown-months" || captionLayout === "dropdown-years";
+  const startMonth = props.startMonth ?? (isDropdownCaption ? new Date(1900, 0) : void 0);
+  const endMonth = props.endMonth ?? (isDropdownCaption ? new Date(2100, 11) : void 0);
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
       showOutsideDays,
+      captionLayout,
+      hideNavigation: props.hideNavigation ?? isDropdownCaption,
+      navLayout: props.navLayout ?? (isDropdownCaption ? "around" : void 0),
+      startMonth,
+      endMonth,
       className: cn("p-3 relative", className),
       classNames: {
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
         caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
+        caption_label: cn(
+          "text-sm font-medium",
+          isDropdownCaption && "sr-only"
+        ),
+        dropdowns: "flex items-center gap-2",
+        months_dropdown: "h-7 rounded-md border border-input bg-background px-2 text-sm",
+        years_dropdown: "h-7 rounded-md border border-input bg-background px-2 text-sm",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
+        nav_button_previous: isDropdownCaption ? "" : "absolute left-1",
+        nav_button_next: isDropdownCaption ? "" : "absolute right-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
@@ -1626,12 +1760,12 @@ function Calendar({
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "absolute left-1 top-3"
+          isDropdownCaption ? "" : "absolute left-1 top-3"
         ),
         button_next: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "absolute right-1 top-3"
+          isDropdownCaption ? "" : "absolute right-1 top-3"
         ),
         month_grid: "w-full border-collapse space-y-1",
         weekdays: "flex",
@@ -1651,9 +1785,11 @@ function Calendar({
         ...classNames
       },
       components: {
-        IconLeft: ({ ...props2 }) => /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
-        IconRight: ({ ...props2 }) => /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
-        // @ts-ignore
+        IconLeft: () => /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+        IconRight: () => /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+        // @ts-expect-error react-day-picker v9 component typing differences
+        Dropdown: CalendarDropdown,
+        // @ts-expect-error react-day-picker v9 component typing differences
         Chevron: ({ orientation }) => {
           const Icon2 = orientation === "left" ? ChevronLeft : ChevronRight;
           return /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" });
@@ -1666,7 +1802,7 @@ function Calendar({
 Calendar.displayName = "Calendar";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React13.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React15.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1745,14 +1881,14 @@ function DateTimePicker({
   className,
   placeholder = "Pick date & time"
 }) {
-  const [internalDate, setInternalDate] = React13.useState(dateTime);
-  const [timeString, setTimeString] = React13.useState(() => {
+  const [internalDate, setInternalDate] = React15.useState(dateTime);
+  const [timeString, setTimeString] = React15.useState(() => {
     if (!dateTime) return "";
     const hours = dateTime.getHours().toString().padStart(2, "0");
     const minutes = dateTime.getMinutes().toString().padStart(2, "0");
     return `${hours}:${minutes}`;
   });
-  React13.useEffect(() => {
+  React15.useEffect(() => {
     setInternalDate(dateTime);
     if (!dateTime) {
       setTimeString("");
@@ -1896,7 +2032,7 @@ var ImageUploadWidget = ({ fieldId }) => {
       /* @__PURE__ */ jsx("div", { className: "border-2 border-red-300 rounded-lg p-4 bg-red-50", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: "Upload handler not configured. Please provide an onUpload function in FormProvider config." }) })
     ] });
   }
-  React13__default.useEffect(() => {
+  React15__default.useEffect(() => {
     if (value && typeof value === "string") {
       setPreview(value);
     } else {
@@ -2535,7 +2671,7 @@ var EditableTableWidget = ({
     ] })
   ] });
 };
-var RadioGroup = React13.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup = React15.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -2546,7 +2682,7 @@ var RadioGroup = React13.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React13.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React15.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -2693,7 +2829,7 @@ function useAISuggestions() {
 var AISuggestionsProvider = AISuggestionsContext.Provider;
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2705,7 +2841,7 @@ var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -2741,7 +2877,7 @@ var DialogHeader = ({
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -2753,7 +2889,7 @@ var DialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -3901,7 +4037,7 @@ var DifferentialDiagnosisWidget = ({ fieldId }) => {
   const items = Array.isArray(value) ? value : [];
   return /* @__PURE__ */ jsx(DifferentialDiagnosis, { differentialDiagnosis: items });
 };
-var Spinner2 = React13.forwardRef(
+var Spinner2 = React15.forwardRef(
   ({ className, size = "md", ...props }, ref) => {
     const sizeClasses = {
       sm: "h-4 w-4 border-2",
@@ -4257,7 +4393,7 @@ var ReferralWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
-var Card = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4269,7 +4405,7 @@ var Card = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4278,7 +4414,7 @@ var CardHeader = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -4290,7 +4426,7 @@ var CardTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -4299,9 +4435,9 @@ var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4723,7 +4859,7 @@ var SmartTextareaWidget = ({ fieldId }) => {
     },
     [setValue]
   );
-  React13__default.useEffect(() => {
+  React15__default.useEffect(() => {
     if (nextKeywords !== currentKeywords) {
       writeValue(textValue, nextKeywords);
     }
@@ -4799,9 +4935,9 @@ var DiagnosisTextareaWidget = ({ fieldId }) => {
   const { state } = useForm();
   const handler = useFieldHandlers(fieldId);
   const def = fieldDef;
-  const [gradeGroups, setGradeGroups] = React13__default.useState([]);
-  const [isLoadingGrades, setIsLoadingGrades] = React13__default.useState(false);
-  const normalized = React13__default.useMemo(() => {
+  const [gradeGroups, setGradeGroups] = React15__default.useState([]);
+  const [isLoadingGrades, setIsLoadingGrades] = React15__default.useState(false);
+  const normalized = React15__default.useMemo(() => {
     const raw = value;
     if (typeof raw === "string") {
       return { text: raw, selectedGradesByCondition: {} };
@@ -4833,7 +4969,7 @@ var DiagnosisTextareaWidget = ({ fieldId }) => {
   }, [value]);
   const textValue = normalized.text;
   const showError = !!error && (touched || state.submitAttempted);
-  React13__default.useEffect(() => {
+  React15__default.useEffect(() => {
     const query = textValue.trim();
     const fetchGrades = handler.onFetchDiagnosisGrades;
     const debounceMs = def?.debounceDelay ?? 1e3;
@@ -6851,7 +6987,7 @@ var OphthalDiagnosisWidget = ({ fieldId }) => {
     ] })
   ] });
 };
-var Slider = React13.forwardRef(({ className, trackClassName, thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxs(
+var Slider = React15.forwardRef(({ className, trackClassName, thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxs(
   SliderPrimitive.Root,
   {
     ref,
@@ -7239,6 +7375,9 @@ var FieldRenderer = ({ fieldId }) => {
   if (!visible || !fieldDef) {
     return null;
   }
+  return renderWidget(fieldId, fieldDef);
+};
+function renderWidget(fieldId, fieldDef) {
   switch (fieldDef.type) {
     case "text":
     case "number":
@@ -7311,7 +7450,7 @@ var FieldRenderer = ({ fieldId }) => {
         fieldDef.type
       ] });
   }
-};
+}
 var Section = ({ title, children }) => {
   const [expanded, setExpanded] = useState(true);
   const handleToggle = () => setExpanded((prev) => !prev);
@@ -7366,7 +7505,7 @@ var DynamicForm = () => {
               children: child.children.map((fieldId) => /* @__PURE__ */ jsx(FieldRenderer, { fieldId }, fieldId))
             },
             child.id
-          ) : /* @__PURE__ */ jsx(React13__default.Fragment, {}, child.id ?? index)
+          ) : /* @__PURE__ */ jsx(React15__default.Fragment, {}, child.id ?? index)
         ) }, node.id);
       }
       if (node.type === "column_layout") {
@@ -7950,7 +8089,7 @@ var ReadOnlyForm = ({ schema, submission }) => {
               child.id
             );
           }
-          return /* @__PURE__ */ jsx(React13__default.Fragment, {}, child.id ?? index);
+          return /* @__PURE__ */ jsx(React15__default.Fragment, {}, child.id ?? index);
         };
         const hasContent = node.children.some(
           (child) => typeof child === "string" ? fieldMap.has(child) : child.type === "column_layout" && child.children?.some((id) => fieldMap.has(id))