@sustaina/shared-ui 1.51.0 → 1.52.0

package/dist/index.js

@@ -236,7 +236,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";
@@ -267,7 +267,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;
   });
@@ -11667,8 +11667,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;
@@ -13547,12 +13547,12 @@ function LinkPreviewPopover({
 function FormatPlugin({ disabled, state }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const toggleFormat = React.useCallback(
-    (format5) => {
+    (format6) => {
       if (disabled) {
         return;
       }
       editor.focus();
-      editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, format5);
+      editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, format6);
     },
     [disabled, editor]
   );
@@ -13897,12 +13897,12 @@ function BlockPlugin({ disabled, state }) {
 function AlignPlugin({ disabled, state }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const applyElementFormat = React.useCallback(
-    (format5) => {
+    (format6) => {
       if (disabled) {
         return;
       }
       editor.focus();
-      editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, format5);
+      editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, format6);
     },
     [disabled, editor]
   );
@@ -14282,6 +14282,65 @@ function MentionsPlugin({
       });
     });
   }, [editor, mentions, mentionKeyMap, mentionConfig]);
+  React.useEffect(() => {
+    if (mentions.length === 0) return;
+    return editor.registerCommand(
+      lexical.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 = lexical.$getSelection();
+            if (!lexical.$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(lexical.$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(lexical.$createTextNode(" "));
+              } else {
+                nodesToInsert.push(lexical.$createTextNode(fullMatch));
+              }
+              lastIndex = matchIndex + fullMatch.length;
+            }
+            if (lastIndex < pastedText.length) {
+              nodesToInsert.push(lexical.$createTextNode(pastedText.slice(lastIndex)));
+            }
+            for (const node of nodesToInsert) {
+              selection.insertNodes([node]);
+            }
+          },
+          { tag: "paste-mention-conversion" }
+        );
+        return true;
+      },
+      lexical.COMMAND_PRIORITY_LOW
+    );
+  }, [editor, mentions, mentionKeyMap, mentionConfig]);
   const options = React.useMemo(() => {
     if (!queryString) {
       return mentions.map(
@@ -14422,6 +14481,41 @@ function OnChangePluginFiltered({
   }, [editor, onChange, ignoreSelectionChange]);
   return null;
 }
+function MaxLengthPlugin({ maxLength }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    if (!maxLength) return;
+    let lastRestoredTextLength = 0;
+    return editor.registerNodeTransform(lexical.RootNode, (rootNode) => {
+      const selection$1 = lexical.$getSelection();
+      if (!lexical.$isRangeSelection(selection$1) || !selection$1.isCollapsed()) {
+        return;
+      }
+      const prevTextLength = lastRestoredTextLength;
+      const textLength = rootNode.getTextContentSize();
+      if (prevTextLength !== textLength) {
+        const delCount = textLength - maxLength;
+        const anchor = selection$1.anchor;
+        if (delCount > 0) {
+          if (prevTextLength === maxLength && lastRestoredTextLength !== maxLength) {
+            lastRestoredTextLength = maxLength;
+            $restoreTextContent(anchor);
+          } else {
+            selection.trimTextContentFromAnchor(editor, anchor, delCount);
+          }
+        }
+      }
+    });
+  }, [editor, maxLength]);
+  return null;
+}
+function $restoreTextContent(anchor) {
+  const selection = lexical.$getSelection();
+  if (lexical.$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",
@@ -14477,6 +14571,7 @@ function RichTextInner({
   onImageDialogUploadError,
   acceptImageMimeTypes = "image/*",
   allowImageUrlInsert = true,
+  maxLength,
   mentions,
   mentionConfig,
   mentionTrigger,
@@ -14596,7 +14691,8 @@ function RichTextInner({
           autoFocus ? /* @__PURE__ */ jsxRuntime.jsx(LexicalAutoFocusPlugin.AutoFocusPlugin, {}) : null,
           /* @__PURE__ */ jsxRuntime.jsx(EditableStatePlugin, { editable }),
           /* @__PURE__ */ jsxRuntime.jsx(ControlledValuePlugin, { value, trackAppliedValue: appliedValueRef }),
-          /* @__PURE__ */ jsxRuntime.jsx(OnChangePluginFiltered, { onChange: handleChange, ignoreSelectionChange: true })
+          /* @__PURE__ */ jsxRuntime.jsx(OnChangePluginFiltered, { onChange: handleChange, ignoreSelectionChange: true }),
+          maxLength && /* @__PURE__ */ jsxRuntime.jsx(MaxLengthPlugin, { maxLength })
         ] })
       ]
     }
@@ -14692,58 +14788,81 @@ var RightPanelContainer = ({
   );
 };
 var RightPanelContainer_default = RightPanelContainer;
+var defaultDisplayFormatter3 = (date, use24Hour) => use24Hour ? dateFns.format(date, "HH:mm") : dateFns.format(date, "hh:mm a");
+var defaultValueFormatter3 = (date) => dateFns.format(date, "HH:mm");
+var defaultValueParser3 = (value) => {
+  let parsed = dateFns.parse(value, "HH:mm", /* @__PURE__ */ new Date());
+  if (dateFns.isValid(parsed)) return parsed;
+  parsed = dateFns.parse(value, "HH:mm:ss", /* @__PURE__ */ new Date());
+  if (dateFns.isValid(parsed)) return parsed;
+  parsed = dateFns.parse(value, "hh:mm a", /* @__PURE__ */ new Date());
+  if (dateFns.isValid(parsed)) return parsed;
+  return void 0;
+};
 var TimePicker = React__namespace.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__namespace.useState(false);
     const [hours, setHours] = React__namespace.useState("12");
     const [minutes, setMinutes] = React__namespace.useState("00");
     const [period, setPeriod] = React__namespace.useState("AM");
+    const parser = React__namespace.useMemo(() => valueParser ?? defaultValueParser3, [valueParser]);
+    const outputFormatter = React__namespace.useMemo(
+      () => valueFormatter ?? defaultValueFormatter3,
+      [valueFormatter]
+    );
+    const labelFormatter = React__namespace.useMemo(
+      () => displayFormatter ?? defaultDisplayFormatter3,
+      [displayFormatter]
+    );
+    const parseInput = React__namespace.useCallback(
+      (input) => {
+        if (input === null || input === void 0) return void 0;
+        if (input instanceof Date) return dateFns.isValid(input) ? input : void 0;
+        const parsed = parser(input);
+        return parsed && dateFns.isValid(parsed) ? parsed : void 0;
+      },
+      [parser]
+    );
+    const parsedValue = React__namespace.useMemo(() => parseInput(value), [parseInput, value]);
+    const hasValue = parsedValue !== void 0;
     React__namespace.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) {
@@ -14753,28 +14872,37 @@ var TimePicker = React__namespace.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;
@@ -14800,193 +14928,207 @@ var TimePicker = React__namespace.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__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4" });
-    return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          variant: "outline",
-          disabled,
-          className: cn(
-            "w-full justify-between text-left font-normal",
-            !value && "text-muted-foreground",
-            className
-          ),
-          children: [
-            iconPosition === "start" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: displayIcon }),
+    const showClear = allowClear && hasValue && !disabled;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex w-full", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: displayIcon }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex-1 truncate",
+                    iconPosition === "start" && "ml-2",
+                    iconPosition === "end" && "mr-2"
+                  ),
+                  children: displayValue || placeholder2 || "Select time"
+                }
+              ),
+              iconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: displayIcon })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-4", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
+                  }
+                )
               }
             ),
-            iconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: displayIcon })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-4", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: incrementHour,
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              ref,
-              type: "text",
-              inputMode: "numeric",
-              value: hours,
-              onChange: (e) => handleHourChange(e.target.value),
-              className: "w-16 text-center",
-              maxLength: 2
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: decrementHour,
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
-                }
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-semibold", children: ":" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: incrementMinute,
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "text",
-              inputMode: "numeric",
-              value: minutes,
-              onChange: (e) => handleMinuteChange(e.target.value),
-              className: "w-16 text-center",
-              maxLength: 2
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: decrementMinute,
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
-                }
-              )
-            }
-          )
-        ] }),
-        !use24Hour && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-16 bg-border mx-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                ref,
+                type: "text",
+                inputMode: "numeric",
+                value: hours,
+                onChange: (e) => handleHourChange(e.target.value),
+                className: "w-16 text-center",
+                maxLength: 2
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: decrementHour,
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-semibold", children: ":" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                value: minutes,
+                onChange: (e) => handleMinuteChange(e.target.value),
+                className: "w-16 text-center",
+                maxLength: 2
               }
             ),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                )
               }
             )
+          ] }),
+          !use24Hour && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-16 bg-border mx-1" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: period === "AM" ? "default" : "outline",
+                  size: "sm",
+                  className: "w-14 h-12",
+                  onClick: handlePeriodToggle,
+                  type: "button",
+                  children: "AM"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: period === "PM" ? "default" : "outline",
+                  size: "sm",
+                  className: "w-14 h-12",
+                  onClick: handlePeriodToggle,
+                  type: "button",
+                  children: "PM"
+                }
+              )
+            ] })
           ] })
-        ] })
-      ] }) })
+        ] }) })
+      ] }),
+      showClear && /* @__PURE__ */ jsxRuntime.jsx(
+        ClearButton,
+        {
+          onClick: handleClear,
+          ariaLabel: clearAriaLabel,
+          className: "absolute right-2 top-1/2 -translate-y-1/2"
+        }
+      )
     ] });
   }
 );
@@ -16173,7 +16315,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,
@@ -16305,7 +16447,7 @@ var VirtualizedCommand = ({
         onMouseMove: () => setIsKeyboardNavActive(false),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { "data-testid": `command-item-empty-${name}`, children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             CommandGroup,
             {
               style: {
@@ -16409,7 +16551,7 @@ var NonVirtualizedCommand = ({
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { "data-testid": `command-item-empty-${name}`, children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
-          /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: filteredOptions.map((option, index) => {
+          filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: filteredOptions.map((option, index) => {
             const optionLabel = getLabelField(option);
             const optionValue = getValueField(option);
             const labelRendered = labelRender ? labelRender(option) : optionLabel;
@@ -16470,6 +16612,10 @@ var ComboboxInner = ({
   onOpenChange,
   onClear,
   virtual = true,
+  isLoading,
+  loadingContent,
+  popoverProps,
+  popoverContentProps,
   ...props
 }, ref) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
@@ -16488,6 +16634,9 @@ var ComboboxInner = ({
     });
   }, [getValueField, options, selectedValue]);
   const renderValue = React__namespace.useMemo(() => {
+    if (isLoading) {
+      return loadingContent ?? "Loading...";
+    }
     if (!selectedValue) return placeholder2;
     if (currentSelectedOption) {
       return getLabelField(currentSelectedOption);
@@ -16496,7 +16645,15 @@ var ComboboxInner = ({
       return selectedValue;
     }
     return null;
-  }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
+  }, [
+    currentSelectedOption,
+    getLabelField,
+    placeholder2,
+    selectedValue,
+    showValueWhenNoMatch,
+    isLoading,
+    loadingContent
+  ]);
   const handleSelect = React__namespace.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
@@ -16512,13 +16669,13 @@ var ComboboxInner = ({
   );
   const handleOpenPopover = React__namespace.useCallback(
     (isOpen) => {
-      if (disabled) return;
+      if (disabled || isLoading) return;
       setOpenPopover(isOpen);
       if (typeof onOpenChange === "function") {
         onOpenChange(isOpen);
       }
     },
-    [disabled, onOpenChange, setOpenPopover]
+    [disabled, isLoading, onOpenChange, setOpenPopover]
   );
   const handleClear = React__namespace.useCallback(
     (event) => {
@@ -16530,7 +16687,7 @@ var ComboboxInner = ({
     },
     [currentSelectedOption, onClear, selectedValue, setSelectedValue]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: openPopover, onOpenChange: handleOpenPopover, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: openPopover, onOpenChange: handleOpenPopover, ...popoverProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -16549,7 +16706,8 @@ var ComboboxInner = ({
           className
         ),
         "data-state": openPopover ? "open" : "closed",
-        disabled,
+        "data-loading": isLoading,
+        disabled: disabled || isLoading,
         onFocus,
         onBlur,
         "data-testid": `combobox-trigger-${name}`,
@@ -16558,14 +16716,14 @@ var ComboboxInner = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             truncated_default,
             {
-              className: cn(!selectedValue && "text-sus-gray-1"),
+              className: cn(!selectedValue && !isLoading && "text-sus-gray-1"),
               tooltipProps: { disabled: true },
               children: renderValue
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 opacity-50" }),
-            showClear && selectedValue && /* @__PURE__ */ jsxRuntime.jsx(
+            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 opacity-50" }),
+            showClear && selectedValue && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 role: "button",
@@ -16584,9 +16742,17 @@ var ComboboxInner = ({
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           VirtualizedCommand_default,
           {
@@ -17152,6 +17318,65 @@ function MentionsPlugin2({
       });
     });
   }, [editor, mentions, mentionKeyMap, mentionConfig]);
+  React.useEffect(() => {
+    if (mentions.length === 0) return;
+    return editor.registerCommand(
+      lexical.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 = lexical.$getSelection();
+            if (!lexical.$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(lexical.$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(lexical.$createTextNode(" "));
+              } else {
+                nodesToInsert.push(lexical.$createTextNode(fullMatch));
+              }
+              lastIndex = matchIndex + fullMatch.length;
+            }
+            if (lastIndex < pastedText.length) {
+              nodesToInsert.push(lexical.$createTextNode(pastedText.slice(lastIndex)));
+            }
+            for (const node of nodesToInsert) {
+              selection.insertNodes([node]);
+            }
+          },
+          { tag: "paste-mention-conversion" }
+        );
+        return true;
+      },
+      lexical.COMMAND_PRIORITY_LOW
+    );
+  }, [editor, mentions, mentionKeyMap, mentionConfig]);
   const options = React.useMemo(() => {
     if (!queryString) {
       return mentions.map(
@@ -17295,6 +17520,41 @@ function OnChangePluginFiltered2({
   }, [editor, onChange, ignoreSelectionChange]);
   return null;
 }
+function MaxLengthPlugin2({ maxLength }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    if (!maxLength) return;
+    let lastRestoredTextLength = 0;
+    return editor.registerNodeTransform(lexical.RootNode, (rootNode) => {
+      const selection$1 = lexical.$getSelection();
+      if (!lexical.$isRangeSelection(selection$1) || !selection$1.isCollapsed()) {
+        return;
+      }
+      const prevTextLength = lastRestoredTextLength;
+      const textLength = rootNode.getTextContentSize();
+      if (prevTextLength !== textLength) {
+        const delCount = textLength - maxLength;
+        const anchor = selection$1.anchor;
+        if (delCount > 0) {
+          if (prevTextLength === maxLength && lastRestoredTextLength !== maxLength) {
+            lastRestoredTextLength = maxLength;
+            $restoreTextContent2(anchor);
+          } else {
+            selection.trimTextContentFromAnchor(editor, anchor, delCount);
+          }
+        }
+      }
+    });
+  }, [editor, maxLength]);
+  return null;
+}
+function $restoreTextContent2(anchor) {
+  const selection = lexical.$getSelection();
+  if (lexical.$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"
@@ -17308,6 +17568,7 @@ function InputMentionInner({
   disabled,
   editorClassName,
   autoFocus,
+  maxLength,
   mentions,
   mentionConfig,
   mentionTrigger,
@@ -17404,7 +17665,8 @@ function InputMentionInner({
             mentionConfig: finalMentionConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(OnChangePluginFiltered2, { onChange: handleChange, ignoreSelectionChange: true })
+        /* @__PURE__ */ jsxRuntime.jsx(OnChangePluginFiltered2, { onChange: handleChange, ignoreSelectionChange: true }),
+        maxLength && /* @__PURE__ */ jsxRuntime.jsx(MaxLengthPlugin2, { maxLength })
       ]
     }
   ) });