@sustaina/shared-ui 1.51.1 → 1.52.0

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import useEmblaCarousel from 'embla-carousel-react';
-import { ChevronLeft, ChevronRight, CircleX, CircleHelp, Clock, ChevronDown, X, Undo, Redo, Check, Pencil, BaselineIcon, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List, ListOrdered, QuoteIcon, CodeSquare, LinkIcon, Link2Off, ImageIcon, AlignLeft, AlignCenter, AlignRight, SearchIcon as SearchIcon$1, ExternalLink, XIcon, CheckIcon, Triangle, CalendarIcon, Search, ChevronUp, PanelLeftIcon, Minimize2, Maximize2, Plus, MoreVertical, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
+import { ChevronLeft, ChevronRight, CircleX, CircleHelp, Clock, X, ChevronDown, Undo, Redo, Check, Pencil, BaselineIcon, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List, ListOrdered, QuoteIcon, CodeSquare, LinkIcon, Link2Off, ImageIcon, AlignLeft, AlignCenter, AlignRight, SearchIcon as SearchIcon$1, ExternalLink, XIcon, CheckIcon, Triangle, CalendarIcon, Search, ChevronUp, PanelLeftIcon, Minimize2, Maximize2, Plus, MoreVertical, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
 import Autoplay from 'embla-carousel-autoplay';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -15,7 +15,7 @@ import { createPortal } from 'react-dom';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useForm, FormProvider, Controller, useFormContext, useFormState, useFieldArray, useWatch } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { format, isValid, parseISO, isAfter, compareAsc, parse } from 'date-fns';
+import { format, isValid, parse, parseISO, isAfter, compareAsc } from 'date-fns';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
@@ -40,7 +40,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { z } from 'zod';
-import { createCommand, TextNode, $applyNodeReplacement, $getRoot, DecoratorNode, $getSelection, $isRangeSelection, CAN_UNDO_COMMAND, COMMAND_PRIORITY_NORMAL, CAN_REDO_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, UNDO_COMMAND, REDO_COMMAND, $insertNodes, COMMAND_PRIORITY_EDITOR, $isTextNode, CLICK_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, $createParagraphNode, $getNodeByKey, $createTextNode, FORMAT_ELEMENT_COMMAND } from 'lexical';
+import { createCommand, TextNode, $applyNodeReplacement, $getRoot, DecoratorNode, $getSelection, $isRangeSelection, CAN_UNDO_COMMAND, COMMAND_PRIORITY_NORMAL, CAN_REDO_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, UNDO_COMMAND, REDO_COMMAND, $insertNodes, COMMAND_PRIORITY_EDITOR, $isTextNode, PASTE_COMMAND, $createTextNode, COMMAND_PRIORITY_LOW, RootNode, CLICK_COMMAND, FORMAT_TEXT_COMMAND, $createParagraphNode, $getNodeByKey, FORMAT_ELEMENT_COMMAND } from 'lexical';
 import { HeadingNode, QuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode } from '@lexical/rich-text';
 import { ListNode, ListItemNode, $isListNode, REMOVE_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
 import { LinkNode, $isLinkNode, $createLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
@@ -59,7 +59,7 @@ import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from '@lexical/selection';
+import { $getSelectionStyleValueForProperty, trimTextContentFromAnchor, $patchStyleText, $setBlocksType } from '@lexical/selection';
 import { LexicalTypeaheadMenuPlugin, MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import Cropper from 'react-easy-crop';
 import { NumericFormat } from 'react-number-format';
@@ -194,7 +194,7 @@ function stripNullishObject(value) {
 
 // src/utils/date.ts
 var pad = (num) => String(num).padStart(2, "0");
-function formatISODate(isoDate, format5 = "d/m/Y H:i") {
+function formatISODate(isoDate, format6 = "d/m/Y H:i") {
   const date = new Date(isoDate);
   if (isNaN(date.getTime())) {
     return "Invalid Date";
@@ -225,7 +225,7 @@ function formatISODate(isoDate, format5 = "d/m/Y H:i") {
     // Second
     s: "s"
   };
-  return format5.replace(/YYYY|Y|MM|m|DD|d|H|i|s/g, (match) => {
+  return format6.replace(/YYYY|Y|MM|m|DD|d|H|i|s/g, (match) => {
     const partKey = tokenMap[match];
     return partKey ? parts[partKey] : match;
   });
@@ -11625,8 +11625,8 @@ var GridSettingsModal = ({
     }
   }, [isOpen, currentColumns, form]);
   const addColumn = async () => {
-    const isValid6 = await trigger("columns");
-    if (isValid6) {
+    const isValid7 = await trigger("columns");
+    if (isValid7) {
       append({ id: "" });
       requestAnimationFrame(() => {
         const container = scrollRef.current;
@@ -13505,12 +13505,12 @@ function LinkPreviewPopover({
 function FormatPlugin({ disabled, state }) {
   const [editor] = useLexicalComposerContext();
   const toggleFormat = useCallback(
-    (format5) => {
+    (format6) => {
       if (disabled) {
         return;
       }
       editor.focus();
-      editor.dispatchCommand(FORMAT_TEXT_COMMAND, format5);
+      editor.dispatchCommand(FORMAT_TEXT_COMMAND, format6);
     },
     [disabled, editor]
   );
@@ -13855,12 +13855,12 @@ function BlockPlugin({ disabled, state }) {
 function AlignPlugin({ disabled, state }) {
   const [editor] = useLexicalComposerContext();
   const applyElementFormat = useCallback(
-    (format5) => {
+    (format6) => {
       if (disabled) {
         return;
       }
       editor.focus();
-      editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, format5);
+      editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, format6);
     },
     [disabled, editor]
   );
@@ -14240,6 +14240,65 @@ function MentionsPlugin({
       });
     });
   }, [editor, mentions, mentionKeyMap, mentionConfig]);
+  useEffect(() => {
+    if (mentions.length === 0) return;
+    return editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        const clipboardData = event.clipboardData;
+        if (!clipboardData) return false;
+        const pastedText = clipboardData.getData("text/plain");
+        if (!pastedText) return false;
+        const variableMatches = [...pastedText.matchAll(COMPLETE_VARIABLE_REGEX)];
+        const hasKnownVariable = variableMatches.some((match) => {
+          const variableName = match[1];
+          const fullMatch = match[0];
+          return mentionKeyMap.has(variableName.toUpperCase()) || mentionKeyMap.has(fullMatch.toUpperCase());
+        });
+        if (!hasKnownVariable) return false;
+        event.preventDefault();
+        editor.update(
+          () => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) return;
+            let lastIndex = 0;
+            const nodesToInsert = [];
+            for (const match of variableMatches) {
+              const fullMatch = match[0];
+              const variableName = match[1];
+              const matchIndex = match.index;
+              if (matchIndex > lastIndex) {
+                const textBefore = pastedText.slice(lastIndex, matchIndex);
+                nodesToInsert.push($createTextNode(textBefore));
+              }
+              const mentionItem = mentionKeyMap.get(variableName.toUpperCase()) || mentionKeyMap.get(fullMatch.toUpperCase());
+              if (mentionItem) {
+                nodesToInsert.push(
+                  $createMentionNode(
+                    mentionConfig.getName(mentionItem),
+                    mentionConfig.getLabel(mentionItem)
+                  )
+                );
+                nodesToInsert.push($createTextNode(" "));
+              } else {
+                nodesToInsert.push($createTextNode(fullMatch));
+              }
+              lastIndex = matchIndex + fullMatch.length;
+            }
+            if (lastIndex < pastedText.length) {
+              nodesToInsert.push($createTextNode(pastedText.slice(lastIndex)));
+            }
+            for (const node of nodesToInsert) {
+              selection.insertNodes([node]);
+            }
+          },
+          { tag: "paste-mention-conversion" }
+        );
+        return true;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  }, [editor, mentions, mentionKeyMap, mentionConfig]);
   const options = useMemo(() => {
     if (!queryString) {
       return mentions.map(
@@ -14380,6 +14439,41 @@ function OnChangePluginFiltered({
   }, [editor, onChange, ignoreSelectionChange]);
   return null;
 }
+function MaxLengthPlugin({ maxLength }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!maxLength) return;
+    let lastRestoredTextLength = 0;
+    return editor.registerNodeTransform(RootNode, (rootNode) => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        return;
+      }
+      const prevTextLength = lastRestoredTextLength;
+      const textLength = rootNode.getTextContentSize();
+      if (prevTextLength !== textLength) {
+        const delCount = textLength - maxLength;
+        const anchor = selection.anchor;
+        if (delCount > 0) {
+          if (prevTextLength === maxLength && lastRestoredTextLength !== maxLength) {
+            lastRestoredTextLength = maxLength;
+            $restoreTextContent(anchor);
+          } else {
+            trimTextContentFromAnchor(editor, anchor, delCount);
+          }
+        }
+      }
+    });
+  }, [editor, maxLength]);
+  return null;
+}
+function $restoreTextContent(anchor) {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection)) {
+    selection.anchor.set(anchor.key, anchor.offset, "text");
+    selection.focus.set(anchor.key, anchor.offset, "text");
+  }
+}
 var theme = {
   paragraph: "mb-2 leading-normal text-sm text-foreground",
   placeholder: "pointer-events-none absolute left-0 top-0 px-3 py-2 text-sm text-muted-foreground select-none",
@@ -14435,6 +14529,7 @@ function RichTextInner({
   onImageDialogUploadError,
   acceptImageMimeTypes = "image/*",
   allowImageUrlInsert = true,
+  maxLength,
   mentions,
   mentionConfig,
   mentionTrigger,
@@ -14554,7 +14649,8 @@ function RichTextInner({
           autoFocus ? /* @__PURE__ */ jsx(AutoFocusPlugin, {}) : null,
           /* @__PURE__ */ jsx(EditableStatePlugin, { editable }),
           /* @__PURE__ */ jsx(ControlledValuePlugin, { value, trackAppliedValue: appliedValueRef }),
-          /* @__PURE__ */ jsx(OnChangePluginFiltered, { onChange: handleChange, ignoreSelectionChange: true })
+          /* @__PURE__ */ jsx(OnChangePluginFiltered, { onChange: handleChange, ignoreSelectionChange: true }),
+          maxLength && /* @__PURE__ */ jsx(MaxLengthPlugin, { maxLength })
         ] })
       ]
     }
@@ -14650,58 +14746,81 @@ var RightPanelContainer = ({
   );
 };
 var RightPanelContainer_default = RightPanelContainer;
+var defaultDisplayFormatter3 = (date, use24Hour) => use24Hour ? format(date, "HH:mm") : format(date, "hh:mm a");
+var defaultValueFormatter3 = (date) => format(date, "HH:mm");
+var defaultValueParser3 = (value) => {
+  let parsed = parse(value, "HH:mm", /* @__PURE__ */ new Date());
+  if (isValid(parsed)) return parsed;
+  parsed = parse(value, "HH:mm:ss", /* @__PURE__ */ new Date());
+  if (isValid(parsed)) return parsed;
+  parsed = parse(value, "hh:mm a", /* @__PURE__ */ new Date());
+  if (isValid(parsed)) return parsed;
+  return void 0;
+};
 var TimePicker = React.forwardRef(
   ({
-    value = "",
+    value,
     onChange,
+    onValueChange,
     disabled = false,
     className,
+    buttonClassName,
+    wrapperClassName,
     placeholder: placeholder2,
     use24Hour = false,
     iconPosition = "start",
-    icon
+    icon,
+    allowClear = true,
+    clearAriaLabel = "Clear time",
+    displayFormatter,
+    valueFormatter,
+    valueParser,
+    invalid = false
   }, ref) => {
     const [open, setOpen] = React.useState(false);
     const [hours, setHours] = React.useState("12");
     const [minutes, setMinutes] = React.useState("00");
     const [period, setPeriod] = React.useState("AM");
+    const parser = React.useMemo(() => valueParser ?? defaultValueParser3, [valueParser]);
+    const outputFormatter = React.useMemo(
+      () => valueFormatter ?? defaultValueFormatter3,
+      [valueFormatter]
+    );
+    const labelFormatter = React.useMemo(
+      () => displayFormatter ?? defaultDisplayFormatter3,
+      [displayFormatter]
+    );
+    const parseInput = React.useCallback(
+      (input) => {
+        if (input === null || input === void 0) return void 0;
+        if (input instanceof Date) return isValid(input) ? input : void 0;
+        const parsed = parser(input);
+        return parsed && isValid(parsed) ? parsed : void 0;
+      },
+      [parser]
+    );
+    const parsedValue = React.useMemo(() => parseInput(value), [parseInput, value]);
+    const hasValue = parsedValue !== void 0;
     React.useEffect(() => {
-      if (value) {
-        let h, m;
-        if (value.includes("Z") || value.match(/^\d{2}:\d{2}:\d{2}/)) {
-          const [hour, min] = value.split(":");
-          const hour24 = parseInt(hour);
-          const minute = parseInt(min);
-          if (use24Hour) {
-            h = String(hour24);
-            m = String(minute);
-          } else {
-            const newPeriod = hour24 >= 12 ? "PM" : "AM";
-            const hour12 = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
-            h = String(hour12);
-            m = String(minute);
-            setPeriod(newPeriod);
-          }
+      if (parsedValue) {
+        const hour24 = parsedValue.getHours();
+        const minute = parsedValue.getMinutes();
+        if (use24Hour) {
+          setHours(String(hour24).padStart(2, "0"));
         } else {
-          const [time, meridiem] = value.split(" ");
-          const [hour, min] = time.split(":");
-          h = hour;
-          m = min;
-          if (meridiem) {
-            setPeriod(meridiem);
-          }
+          const newPeriod = hour24 >= 12 ? "PM" : "AM";
+          const hour12 = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
+          setHours(String(hour12).padStart(2, "0"));
+          setPeriod(newPeriod);
         }
-        setHours(h.padStart(2, "0"));
-        setMinutes(m.padStart(2, "0"));
-      }
-    }, [value, use24Hour]);
-    const formatTime = (h, m, p) => {
-      if (use24Hour) {
-        return `${h.padStart(2, "0")}:${m.padStart(2, "0")}`;
+        setMinutes(String(minute).padStart(2, "0"));
+      } else {
+        setHours(use24Hour ? "00" : "12");
+        setMinutes("00");
+        setPeriod("AM");
       }
-      return `${h.padStart(2, "0")}:${m.padStart(2, "0")} ${p}`;
-    };
-    const toISOTime = (h, m, p) => {
+    }, [parsedValue, use24Hour]);
+    const createTimeDate = (h, m, p) => {
       let hour = parseInt(h) || 0;
       const minute = parseInt(m) || 0;
       if (!use24Hour) {
@@ -14711,28 +14830,37 @@ var TimePicker = React.forwardRef(
           hour = 0;
         }
       }
-      return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:00.000Z`;
+      const today = /* @__PURE__ */ new Date();
+      return new Date(today.getFullYear(), today.getMonth(), today.getDate(), hour, minute, 0, 0);
+    };
+    const emitChange = (date) => {
+      onChange?.(date);
+      onValueChange?.(outputFormatter(date));
+    };
+    const handleClear = () => {
+      onChange?.(void 0);
+      onValueChange?.(void 0);
     };
     const handleHourChange = (newHour) => {
       const hour = parseInt(newHour) || 0;
       const maxHour = use24Hour ? 23 : 12;
       const minHour = use24Hour ? 0 : 1;
       if (hour <= maxHour && hour >= minHour) {
-        setHours(newHour);
-        onChange?.(toISOTime(newHour, minutes, period));
+        setHours(newHour.padStart(2, "0"));
+        emitChange(createTimeDate(newHour, minutes, period));
       }
     };
     const handleMinuteChange = (newMinute) => {
       const minute = parseInt(newMinute) || 0;
       if (minute <= 59 && minute >= 0) {
-        setMinutes(newMinute);
-        onChange?.(toISOTime(hours, newMinute, period));
+        setMinutes(newMinute.padStart(2, "0"));
+        emitChange(createTimeDate(hours, newMinute, period));
       }
     };
     const handlePeriodToggle = () => {
       const newPeriod = period === "AM" ? "PM" : "AM";
       setPeriod(newPeriod);
-      onChange?.(toISOTime(hours, minutes, newPeriod));
+      emitChange(createTimeDate(hours, minutes, newPeriod));
     };
     const incrementHour = () => {
       const hour = parseInt(hours) || 0;
@@ -14758,193 +14886,207 @@ var TimePicker = React.forwardRef(
       const newMinute = minute <= 0 ? 59 : minute - 1;
       handleMinuteChange(String(newMinute));
     };
-    const displayValue = formatTime(hours, minutes, period);
+    const displayValue = parsedValue ? labelFormatter(parsedValue, use24Hour) : placeholder2;
     const displayIcon = icon || /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" });
-    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          disabled,
-          className: cn(
-            "w-full justify-between text-left font-normal",
-            !value && "text-muted-foreground",
-            className
-          ),
-          children: [
-            iconPosition === "start" && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: displayIcon }),
+    const showClear = allowClear && hasValue && !disabled;
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex w-full", wrapperClassName), children: [
+      /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            disabled,
+            className: cn(
+              "w-full justify-between text-left font-normal",
+              !hasValue && "text-muted-foreground",
+              invalid && "border-destructive focus-visible:ring-destructive",
+              showClear && "pr-8",
+              buttonClassName,
+              className
+            ),
+            children: [
+              iconPosition === "start" && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: displayIcon }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex-1 truncate",
+                    iconPosition === "start" && "ml-2",
+                    iconPosition === "end" && "mr-2"
+                  ),
+                  children: displayValue || placeholder2 || "Select time"
+                }
+              ),
+              iconPosition === "end" && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: displayIcon })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-4", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
             /* @__PURE__ */ jsx(
-              "span",
+              Button,
               {
-                className: cn(
-                  "flex-1",
-                  iconPosition === "start" && "ml-2",
-                  iconPosition === "end" && "mr-2"
-                ),
-                children: value ? displayValue : placeholder2 || displayValue
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: incrementHour,
+                type: "button",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+                  }
+                )
               }
             ),
-            iconPosition === "end" && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: displayIcon })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-4", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: incrementHour,
-              type: "button",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              ref,
-              type: "text",
-              inputMode: "numeric",
-              value: hours,
-              onChange: (e) => handleHourChange(e.target.value),
-              className: "w-16 text-center",
-              maxLength: 2
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: decrementHour,
-              type: "button",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
-                }
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold", children: ":" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: incrementMinute,
-              type: "button",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "text",
-              inputMode: "numeric",
-              value: minutes,
-              onChange: (e) => handleMinuteChange(e.target.value),
-              className: "w-16 text-center",
-              maxLength: 2
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: decrementMinute,
-              type: "button",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
-                }
-              )
-            }
-          )
-        ] }),
-        !use24Hour && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "w-px h-16 bg-border mx-1" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref,
+                type: "text",
+                inputMode: "numeric",
+                value: hours,
+                onChange: (e) => handleHourChange(e.target.value),
+                className: "w-16 text-center",
+                maxLength: 2
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: decrementHour,
+                type: "button",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold", children: ":" }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
             /* @__PURE__ */ jsx(
               Button,
               {
-                variant: period === "AM" ? "default" : "outline",
-                size: "sm",
-                className: "w-14 h-12",
-                onClick: handlePeriodToggle,
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: incrementMinute,
                 type: "button",
-                children: "AM"
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                value: minutes,
+                onChange: (e) => handleMinuteChange(e.target.value),
+                className: "w-16 text-center",
+                maxLength: 2
               }
             ),
             /* @__PURE__ */ jsx(
               Button,
               {
-                variant: period === "PM" ? "default" : "outline",
-                size: "sm",
-                className: "w-14 h-12",
-                onClick: handlePeriodToggle,
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: decrementMinute,
                 type: "button",
-                children: "PM"
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                )
               }
             )
+          ] }),
+          !use24Hour && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "w-px h-16 bg-border mx-1" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: period === "AM" ? "default" : "outline",
+                  size: "sm",
+                  className: "w-14 h-12",
+                  onClick: handlePeriodToggle,
+                  type: "button",
+                  children: "AM"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: period === "PM" ? "default" : "outline",
+                  size: "sm",
+                  className: "w-14 h-12",
+                  onClick: handlePeriodToggle,
+                  type: "button",
+                  children: "PM"
+                }
+              )
+            ] })
           ] })
-        ] })
-      ] }) })
+        ] }) })
+      ] }),
+      showClear && /* @__PURE__ */ jsx(
+        ClearButton,
+        {
+          onClick: handleClear,
+          ariaLabel: clearAriaLabel,
+          className: "absolute right-2 top-1/2 -translate-y-1/2"
+        }
+      )
     ] });
   }
 );
@@ -16131,7 +16273,7 @@ var useFieldNames = ({
 };
 var useFieldNames_default = useFieldNames;
 var ROW_HEIGHT = 32;
-var MIN_HEIGHT_EMPTY = 76;
+var MIN_HEIGHT_EMPTY = 68;
 var VirtualizedCommand = ({
   name,
   height = 292,
@@ -16263,7 +16405,7 @@ var VirtualizedCommand = ({
         onMouseMove: () => setIsKeyboardNavActive(false),
         children: [
           /* @__PURE__ */ jsx(CommandEmpty, { "data-testid": `command-item-empty-${name}`, children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
-          /* @__PURE__ */ jsx(
+          filteredOptions.length > 0 && /* @__PURE__ */ jsx(
             CommandGroup,
             {
               style: {
@@ -16367,7 +16509,7 @@ var NonVirtualizedCommand = ({
         },
         children: [
           /* @__PURE__ */ jsx(CommandEmpty, { "data-testid": `command-item-empty-${name}`, children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
-          /* @__PURE__ */ jsx(CommandGroup, { children: filteredOptions.map((option, index) => {
+          filteredOptions.length > 0 && /* @__PURE__ */ jsx(CommandGroup, { children: filteredOptions.map((option, index) => {
             const optionLabel = getLabelField(option);
             const optionValue = getValueField(option);
             const labelRendered = labelRender ? labelRender(option) : optionLabel;
@@ -16430,6 +16572,8 @@ var ComboboxInner = ({
   virtual = true,
   isLoading,
   loadingContent,
+  popoverProps,
+  popoverContentProps,
   ...props
 }, ref) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
@@ -16501,7 +16645,7 @@ var ComboboxInner = ({
     },
     [currentSelectedOption, onClear, selectedValue, setSelectedValue]
   );
-  return /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: handleOpenPopover, children: [
+  return /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: handleOpenPopover, ...popoverProps, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -16556,9 +16700,17 @@ var ComboboxInner = ({
     /* @__PURE__ */ jsx(
       PopoverContent,
       {
-        className: "p-0 w-(--radix-popper-anchor-width) min-w-(--radix-popper-anchor-width) max-w-(--radix-popper-available-width) rounded-md",
         align: "start",
         sideOffset: 4,
+        ...popoverContentProps,
+        onWheel: (e) => {
+          e.stopPropagation();
+          popoverContentProps?.onWheel?.(e);
+        },
+        className: cn(
+          "p-0 w-(--radix-popper-anchor-width) min-w-(--radix-popper-anchor-width) max-w-(--radix-popper-available-width) rounded-md",
+          popoverContentProps?.className
+        ),
         children: virtual ? /* @__PURE__ */ jsx(
           VirtualizedCommand_default,
           {
@@ -17124,6 +17276,65 @@ function MentionsPlugin2({
       });
     });
   }, [editor, mentions, mentionKeyMap, mentionConfig]);
+  useEffect(() => {
+    if (mentions.length === 0) return;
+    return editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        const clipboardData = event.clipboardData;
+        if (!clipboardData) return false;
+        const pastedText = clipboardData.getData("text/plain");
+        if (!pastedText) return false;
+        const variableMatches = [...pastedText.matchAll(COMPLETE_VARIABLE_REGEX2)];
+        const hasKnownVariable = variableMatches.some((match) => {
+          const variableName = match[1];
+          const fullMatch = match[0];
+          return mentionKeyMap.has(variableName.toUpperCase()) || mentionKeyMap.has(fullMatch.toUpperCase());
+        });
+        if (!hasKnownVariable) return false;
+        event.preventDefault();
+        editor.update(
+          () => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) return;
+            let lastIndex = 0;
+            const nodesToInsert = [];
+            for (const match of variableMatches) {
+              const fullMatch = match[0];
+              const variableName = match[1];
+              const matchIndex = match.index;
+              if (matchIndex > lastIndex) {
+                const textBefore = pastedText.slice(lastIndex, matchIndex);
+                nodesToInsert.push($createTextNode(textBefore));
+              }
+              const mentionItem = mentionKeyMap.get(variableName.toUpperCase()) || mentionKeyMap.get(fullMatch.toUpperCase());
+              if (mentionItem) {
+                nodesToInsert.push(
+                  $createMentionNode2(
+                    mentionConfig.getName(mentionItem),
+                    mentionConfig.getLabel(mentionItem)
+                  )
+                );
+                nodesToInsert.push($createTextNode(" "));
+              } else {
+                nodesToInsert.push($createTextNode(fullMatch));
+              }
+              lastIndex = matchIndex + fullMatch.length;
+            }
+            if (lastIndex < pastedText.length) {
+              nodesToInsert.push($createTextNode(pastedText.slice(lastIndex)));
+            }
+            for (const node of nodesToInsert) {
+              selection.insertNodes([node]);
+            }
+          },
+          { tag: "paste-mention-conversion" }
+        );
+        return true;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  }, [editor, mentions, mentionKeyMap, mentionConfig]);
   const options = useMemo(() => {
     if (!queryString) {
       return mentions.map(
@@ -17267,6 +17478,41 @@ function OnChangePluginFiltered2({
   }, [editor, onChange, ignoreSelectionChange]);
   return null;
 }
+function MaxLengthPlugin2({ maxLength }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!maxLength) return;
+    let lastRestoredTextLength = 0;
+    return editor.registerNodeTransform(RootNode, (rootNode) => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        return;
+      }
+      const prevTextLength = lastRestoredTextLength;
+      const textLength = rootNode.getTextContentSize();
+      if (prevTextLength !== textLength) {
+        const delCount = textLength - maxLength;
+        const anchor = selection.anchor;
+        if (delCount > 0) {
+          if (prevTextLength === maxLength && lastRestoredTextLength !== maxLength) {
+            lastRestoredTextLength = maxLength;
+            $restoreTextContent2(anchor);
+          } else {
+            trimTextContentFromAnchor(editor, anchor, delCount);
+          }
+        }
+      }
+    });
+  }, [editor, maxLength]);
+  return null;
+}
+function $restoreTextContent2(anchor) {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection)) {
+    selection.anchor.set(anchor.key, anchor.offset, "text");
+    selection.focus.set(anchor.key, anchor.offset, "text");
+  }
+}
 var theme2 = {
   paragraph: "leading-6 text-sm text-foreground",
   placeholder: "pointer-events-none absolute left-0 top-0 px-3 py-2 text-sm text-muted-foreground select-none"
@@ -17280,6 +17526,7 @@ function InputMentionInner({
   disabled,
   editorClassName,
   autoFocus,
+  maxLength,
   mentions,
   mentionConfig,
   mentionTrigger,
@@ -17376,7 +17623,8 @@ function InputMentionInner({
             mentionConfig: finalMentionConfig
           }
         ),
-        /* @__PURE__ */ jsx(OnChangePluginFiltered2, { onChange: handleChange, ignoreSelectionChange: true })
+        /* @__PURE__ */ jsx(OnChangePluginFiltered2, { onChange: handleChange, ignoreSelectionChange: true }),
+        maxLength && /* @__PURE__ */ jsx(MaxLengthPlugin2, { maxLength })
       ]
     }
   ) });