formanitor 0.0.22 → 0.0.23

package/dist/index.mjs

@@ -1,14 +1,19 @@
-import * as React11 from 'react';
-import React11__default, { createContext, useContext, useRef, useEffect, useState, useMemo, useCallback } from 'react';
+import * as React13 from 'react';
+import React13__default, { createContext, useContext, useRef, useEffect, useState, useMemo, useCallback, useReducer } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
+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';
-import { ChevronDown, ChevronUp, Check, Circle, X, Image, Upload, Trash2, Plus, Loader2, PenTool, ChevronRight, Calendar as Calendar$1, ChevronLeft, RefreshCw, Clock } from 'lucide-react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Slot } from '@radix-ui/react-slot';
 import { format, addDays, addWeeks, addMonths, differenceInCalendarDays, parseISO } from 'date-fns';
 import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -749,7 +754,7 @@ function useField(fieldId) {
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var Input = React11.forwardRef(
+var Input = React13.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -769,7 +774,7 @@ Input.displayName = "Input";
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -778,7 +783,7 @@ var Label = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var Textarea = React11.forwardRef(
+var Textarea = React13.forwardRef(
   ({ className, height, style, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -824,8 +829,8 @@ var TextWidget = ({ fieldId }) => {
   const { state } = useForm();
   const showError = !!error && (touched || state.submitAttempted);
   if (!fieldDef) return null;
-  const Component = fieldDef.type === "textarea" || fieldDef.type === "richtext" ? Textarea : Input;
-  const isTextarea = fieldDef.type === "textarea" || fieldDef.type === "richtext";
+  const Component = fieldDef.type === "textarea" ? Textarea : Input;
+  const isTextarea = fieldDef.type === "textarea";
   const height = isTextarea && "height" in fieldDef ? fieldDef.height : void 0;
   const theme = getThemeConfig(
     isTextarea ? "textarea" : "text",
@@ -857,9 +862,298 @@ var TextWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React13.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Separator = React13.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+function isEmptyHtml(html) {
+  const t = html.trim();
+  return t === "" || t === "<p></p>" || t === "<p><br></p>" || t === '<p><br class="ProseMirror-trailingBreak"></p>';
+}
+function RichTextToolbar({
+  editor,
+  disabled
+}) {
+  const [, rerender] = useReducer((n) => n + 1, 0);
+  useEffect(() => {
+    if (!editor) return;
+    const handler = () => rerender();
+    editor.on("selectionUpdate", handler);
+    editor.on("transaction", handler);
+    return () => {
+      editor.off("selectionUpdate", handler);
+      editor.off("transaction", handler);
+    };
+  }, [editor]);
+  if (!editor) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 border-b border-input bg-muted/30 px-2 py-1.5 min-h-[42px]" });
+  }
+  const fmtBtn = (active, onClick, icon, title) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: active ? "secondary" : "outline",
+      size: "icon",
+      className: "h-8 w-8 shrink-0",
+      disabled,
+      title,
+      onClick: () => {
+        if (!disabled) onClick();
+      },
+      children: icon
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-wrap items-center gap-1 border-b border-input bg-muted/30 px-2 py-1.5",
+      role: "toolbar",
+      "aria-label": "Rich text formatting",
+      children: [
+        fmtBtn(
+          editor.isActive("bold"),
+          () => editor.chain().focus().toggleBold().run(),
+          /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" }),
+          "Bold"
+        ),
+        fmtBtn(
+          editor.isActive("italic"),
+          () => editor.chain().focus().toggleItalic().run(),
+          /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" }),
+          "Italic"
+        ),
+        fmtBtn(
+          editor.isActive("underline"),
+          () => editor.chain().focus().toggleUnderline().run(),
+          /* @__PURE__ */ jsx(Underline$1, { className: "h-4 w-4" }),
+          "Underline"
+        ),
+        fmtBtn(
+          editor.isActive("strike"),
+          () => editor.chain().focus().toggleStrike().run(),
+          /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" }),
+          "Strikethrough"
+        ),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-0.5 h-6" }),
+        fmtBtn(
+          editor.isActive("bulletList"),
+          () => editor.chain().focus().toggleBulletList().run(),
+          /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }),
+          "Bullet list"
+        ),
+        fmtBtn(
+          editor.isActive("orderedList"),
+          () => editor.chain().focus().toggleOrderedList().run(),
+          /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" }),
+          "Numbered list"
+        ),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-0.5 h-6" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "icon",
+            className: "h-8 w-8 shrink-0",
+            disabled: disabled || !editor.can().undo(),
+            title: "Undo",
+            onClick: () => editor.chain().focus().undo().run(),
+            children: /* @__PURE__ */ jsx(Undo, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "icon",
+            className: "h-8 w-8 shrink-0",
+            disabled: disabled || !editor.can().redo(),
+            title: "Redo",
+            onClick: () => editor.chain().focus().redo().run(),
+            children: /* @__PURE__ */ jsx(Redo, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+var RichTextWidget = ({ fieldId }) => {
+  const { fieldDef, value, setValue, setTouched, error, disabled, touched } = useField(fieldId);
+  const { state } = useForm();
+  const showError = !!error && (touched || state.submitAttempted);
+  const def = fieldDef;
+  const placeholder = def?.placeholder ?? "Start typing\u2026";
+  const minHeight = def?.minHeight ?? 160;
+  const extensions = useMemo(
+    () => [
+      StarterKit.configure({
+        // Disable headings entirely so the UI/content can't introduce H2/H3.
+        heading: false,
+        bulletList: {
+          HTMLAttributes: {
+            class: "list-disc pl-6 my-2"
+          }
+        },
+        orderedList: {
+          HTMLAttributes: {
+            class: "list-decimal pl-6 my-2"
+          }
+        },
+        listItem: {
+          HTMLAttributes: {
+            class: "my-1"
+          }
+        }
+      }),
+      Underline,
+      Placeholder.configure({
+        placeholder
+      })
+    ],
+    [placeholder]
+  );
+  const stringValue = typeof value === "string" ? value : "";
+  const editor = useEditor(
+    {
+      extensions,
+      content: stringValue || "",
+      editable: !disabled,
+      immediatelyRender: false,
+      onUpdate: ({ editor: ed }) => {
+        const html = ed.getHTML();
+        setValue(isEmptyHtml(html) ? "" : html);
+      },
+      onBlur: () => setTouched(),
+      editorProps: {
+        attributes: {
+          id: fieldId,
+          class: "focus:outline-none",
+          style: `min-height: ${minHeight}px`
+        }
+      }
+    },
+    [extensions, fieldId]
+  );
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    editor.setEditable(!disabled);
+  }, [editor, disabled]);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    const el = editor.view.dom;
+    el.style.minHeight = `${minHeight}px`;
+  }, [editor, minHeight]);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    const fromForm = stringValue;
+    const fromEditor = editor.getHTML();
+    if (isEmptyHtml(fromForm) && isEmptyHtml(fromEditor)) return;
+    if (fromForm && fromForm !== fromEditor) {
+      editor.commands.setContent(fromForm, { emitUpdate: false });
+    }
+    if (!fromForm && !isEmptyHtml(fromEditor)) {
+      editor.commands.setContent("", { emitUpdate: false });
+    }
+  }, [stringValue, editor]);
+  if (!fieldDef) return null;
+  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    fieldDef.label,
+    " ",
+    fieldDef.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: labelContent }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-md border border-input bg-background text-sm ring-offset-background overflow-hidden",
+          showError && "border-red-500",
+          disabled && "opacity-60"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(RichTextToolbar, { editor, disabled }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "px-3 py-2",
+                "[&_.ProseMirror]:outline-none",
+                "[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-6 [&_.ProseMirror_ul]:my-2",
+                "[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-6 [&_.ProseMirror_ol]:my-2",
+                "[&_.ProseMirror_li]:list-item",
+                "[&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-muted-foreground/40 [&_.ProseMirror_blockquote]:pl-3 [&_.ProseMirror_blockquote]:italic [&_.ProseMirror_blockquote]:my-2",
+                "[&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground",
+                "[&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
+                "[&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left",
+                "[&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none",
+                "[&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0"
+              ),
+              children: /* @__PURE__ */ jsx(EditorContent, { editor })
+            }
+          )
+        ]
+      }
+    ),
+    showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+  ] });
+};
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -875,7 +1169,7 @@ var SelectTrigger = React11.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -888,7 +1182,7 @@ var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -901,7 +1195,7 @@ var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React11.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -929,7 +1223,7 @@ var SelectContent = React11.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -938,7 +1232,7 @@ var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -954,7 +1248,7 @@ var SelectItem = React11.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -1043,7 +1337,7 @@ var SelectWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
-var Checkbox = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -1117,46 +1411,7 @@ var MultiSelectWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
-var buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React11.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var Table = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+var Table = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -1165,9 +1420,9 @@ var Table = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -1176,7 +1431,7 @@ var TableBody = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -1188,7 +1443,7 @@ var TableFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -1200,7 +1455,7 @@ var TableRow = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -1212,7 +1467,7 @@ var TableHead = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -1221,7 +1476,7 @@ var TableCell = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -1237,7 +1492,7 @@ var RepeatableWidget = ({
   if (!fieldDef || fieldDef.type !== "repeatable") return null;
   const def = fieldDef;
   const rows = Array.isArray(value) ? value : [];
-  const [hasInteracted, setHasInteracted] = React11__default.useState(false);
+  const [hasInteracted, setHasInteracted] = React13__default.useState(false);
   const showError = !!error && (touched || hasInteracted);
   const addRow = () => {
     setValue([...rows, {}]);
@@ -1406,7 +1661,7 @@ function Calendar({
 Calendar.displayName = "Calendar";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React11.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React13.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1485,14 +1740,14 @@ function DateTimePicker({
   className,
   placeholder = "Pick date & time"
 }) {
-  const [internalDate, setInternalDate] = React11.useState(dateTime);
-  const [timeString, setTimeString] = React11.useState(() => {
+  const [internalDate, setInternalDate] = React13.useState(dateTime);
+  const [timeString, setTimeString] = React13.useState(() => {
     if (!dateTime) return "";
     const hours = dateTime.getHours().toString().padStart(2, "0");
     const minutes = dateTime.getMinutes().toString().padStart(2, "0");
     return `${hours}:${minutes}`;
   });
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     setInternalDate(dateTime);
     if (!dateTime) {
       setTimeString("");
@@ -1636,7 +1891,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." }) })
     ] });
   }
-  React11__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (value && typeof value === "string") {
       setPreview(value);
     } else {
@@ -2275,7 +2530,7 @@ var EditableTableWidget = ({
     ] })
   ] });
 };
-var RadioGroup = React11.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup = React13.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -2286,7 +2541,7 @@ var RadioGroup = React11.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React11.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React13.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -2433,7 +2688,7 @@ function useAISuggestions() {
 var AISuggestionsProvider = AISuggestionsContext.Provider;
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2445,7 +2700,7 @@ var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -2481,7 +2736,7 @@ var DialogHeader = ({
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -2493,7 +2748,7 @@ var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -3588,7 +3843,7 @@ var DifferentialDiagnosisWidget = ({ fieldId }) => {
   const items = Array.isArray(value) ? value : [];
   return /* @__PURE__ */ jsx(DifferentialDiagnosis, { differentialDiagnosis: items });
 };
-var Spinner2 = React11.forwardRef(
+var Spinner2 = React13.forwardRef(
   ({ className, size = "md", ...props }, ref) => {
     const sizeClasses = {
       sm: "h-4 w-4 border-2",
@@ -3944,7 +4199,7 @@ var ReferralWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
-var Card = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3956,7 +4211,7 @@ var Card = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3965,7 +4220,7 @@ var CardHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -3977,7 +4232,7 @@ var CardTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -3986,9 +4241,9 @@ var CardDescription = React11.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4410,7 +4665,7 @@ var SmartTextareaWidget = ({ fieldId }) => {
     },
     [setValue]
   );
-  React11__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (nextKeywords !== currentKeywords) {
       writeValue(textValue, nextKeywords);
     }
@@ -6370,7 +6625,7 @@ var OphthalDiagnosisWidget = ({ fieldId }) => {
     ] })
   ] });
 };
-var Slider = React11.forwardRef(({ className, trackClassName, thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxs(
+var Slider = React13.forwardRef(({ className, trackClassName, thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxs(
   SliderPrimitive.Root,
   {
     ref,
@@ -6763,8 +7018,9 @@ var FieldRenderer = ({ fieldId }) => {
     case "number":
       return /* @__PURE__ */ jsx(TextWidget, { fieldId });
     case "textarea":
-    case "richtext":
       return /* @__PURE__ */ jsx(TextWidget, { fieldId });
+    case "richtext":
+      return /* @__PURE__ */ jsx(RichTextWidget, { fieldId });
     case "date":
       return /* @__PURE__ */ jsx(DateWidget, { fieldId });
     case "datetime":
@@ -6882,7 +7138,7 @@ var DynamicForm = () => {
               children: child.children.map((fieldId) => /* @__PURE__ */ jsx(FieldRenderer, { fieldId }, fieldId))
             },
             child.id
-          ) : /* @__PURE__ */ jsx(React11__default.Fragment, {}, child.id ?? index)
+          ) : /* @__PURE__ */ jsx(React13__default.Fragment, {}, child.id ?? index)
         ) }, node.id);
       }
       if (node.type === "column_layout") {
@@ -7466,7 +7722,7 @@ var ReadOnlyForm = ({ schema, submission }) => {
               child.id
             );
           }
-          return /* @__PURE__ */ jsx(React11__default.Fragment, {}, child.id ?? index);
+          return /* @__PURE__ */ jsx(React13__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))
@@ -7594,6 +7850,6 @@ function createUploadHandler(options) {
   };
 }
 
-export { AddInvestigationField, AddMedicationField, DifferentialDiagnosis, DynamicForm, EMAIL_REGEX, FieldRenderer, FormControls, FormProvider, FormStore, ImageUploadWidget, ReadOnlyForm, ReadOnlyImageUpload, ReadOnlySignature, ReadOnlyTable, SignatureUploadWidget, SmartForm, SmartTextareaWidget, createUploadHandler, evaluateRules, useField, useFieldHandlers, useForm, useFormStore, useFrequentItems, useSmartKeywords, validateField, validateForm };
+export { AddInvestigationField, AddMedicationField, DifferentialDiagnosis, DynamicForm, EMAIL_REGEX, FieldRenderer, FormControls, FormProvider, FormStore, ImageUploadWidget, ReadOnlyForm, ReadOnlyImageUpload, ReadOnlySignature, ReadOnlyTable, RichTextWidget, SignatureUploadWidget, SmartForm, SmartTextareaWidget, createUploadHandler, evaluateRules, useField, useFieldHandlers, useForm, useFormStore, useFrequentItems, useSmartKeywords, validateField, validateForm };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map