lecom-ui 5.3.78 → 5.3.80

package/README.md

@@ -1 +1 @@
-lecom-ui
+lecom-ui

package/dist/components/Combobox/Combobox.js

@@ -69,7 +69,7 @@ const comboboxItemVariants = cva(
         false: ""
       },
       selected: {
-        true: "bg-grey-100 font-medium text-grey-900",
+        true: "bg-grey-100 text-grey-900",
         false: ""
       }
     },
@@ -241,7 +241,7 @@ const ComboboxTriggerButton = React.forwardRef(
         disabled: disabled ?? false,
         ...props
       },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate max-w-[calc(100%-2.5rem)]" }, selectedPrefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center shrink-0" }, selectedPrefix), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center gap-2 truncate min-w-[calc(100%-2.25rem)]", selectedPrefix && "min-w-[calc(100%-4.75rem)]") }, selectedPrefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center shrink-0" }, selectedPrefix), /* @__PURE__ */ React.createElement(
         Typography,
         {
           className: cn("truncate", colorClass),
@@ -249,13 +249,13 @@ const ComboboxTriggerButton = React.forwardRef(
         },
         selectedLabel
       )),
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "w-5" }, /* @__PURE__ */ React.createElement(
         ChevronIcon,
         {
-          className: cn("ml-2 shrink-0", colorClass),
+          className: cn("shrink-0", colorClass),
           size: ICON_SIZE
         }
-      )
+      ))
     );
   }
 );

package/dist/components/MultiSelect/MultiSelect.js

@@ -10,13 +10,36 @@ import { X, ChevronUp, ChevronDown, Check, Minus } from 'lucide-react';
 import { initializeI18n } from '../../i18n/index.js';
 
 initializeI18n();
+const TRIGGER_HEIGHT_CLASSES = {
+  small: "!h-8",
+  medium: "!h-10",
+  large: "!h-12"
+};
+const SEARCH_INPUT_HEIGHT_CLASSES = {
+  small: "h-7",
+  medium: "h-8",
+  large: "h-9"
+};
+const SEARCH_INPUT_CLASSES = {
+  small: "[&_[cmdk-input]]:h-7 [&_[cmdk-input]]:body-small-400 [&_svg]:text-grey-800 [&_svg]:opacity-100 [&_svg]:h-4 [&_svg]:w-4",
+  medium: "[&_[cmdk-input]]:h-8 [&_[cmdk-input]]:body-medium-400 [&_svg]:text-grey-800 [&_svg]:opacity-100 [&_svg]:h-4 [&_svg]:w-4",
+  large: "[&_[cmdk-input]]:h-9 [&_[cmdk-input]]:body-large-400 [&_svg]:text-grey-800 [&_svg]:opacity-100 [&_svg]:h-4 [&_svg]:w-4"
+};
+const getFontVariant = (size) => {
+  const sizeMap = {
+    small: "body-small-400",
+    medium: "body-medium-400",
+    large: "body-large-400"
+  };
+  return sizeMap[size ?? "medium"];
+};
 const MultiSelect = React.forwardRef(
   ({
     options = [],
     onValueChange,
     value = [],
     placeholder = "Select options",
-    maxCount = 3,
+    maxCount,
     modalPopover = false,
     className,
     side = "bottom",
@@ -32,12 +55,15 @@ const MultiSelect = React.forwardRef(
     highlightMatches = true,
     allowTypoDistance = 0,
     groupedOptions,
-    classNameContent
+    classNameContent,
+    size = "medium"
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
+    const [dynamicMaxCount, setDynamicMaxCount] = React.useState(selectedValues.length || 1);
+    const buttonRef = React.useRef(null);
     React.useEffect(() => {
       const shallowEqual = (a, b) => {
         if (a === b) return true;
@@ -47,6 +73,88 @@ const MultiSelect = React.forwardRef(
       };
       setSelectedValues((prev) => shallowEqual(prev, value) ? prev : value);
     }, [value]);
+    React.useEffect(() => {
+      if (maxCount !== void 0) {
+        setDynamicMaxCount(maxCount);
+        return;
+      }
+      if (selectedValues.length === 0) return;
+      const calculateMaxCount = () => {
+        if (!buttonRef.current) {
+          setTimeout(() => calculateMaxCount(), 10);
+          return;
+        }
+        const buttonWidth = buttonRef.current.offsetWidth;
+        if (buttonWidth === 0) {
+          setTimeout(() => calculateMaxCount(), 10);
+          return;
+        }
+        const CONTROLS_WIDTH = 80;
+        const COUNTER_TAG_WIDTH = 41;
+        const TAG_GAP = 4;
+        const CONTAINER_PADDING = 8;
+        const AVG_CHAR_WIDTH = 8;
+        const TAG_PADDING = 24;
+        const availableWidth = buttonWidth - CONTAINER_PADDING * 2 - CONTROLS_WIDTH;
+        if (availableWidth <= 0) {
+          setDynamicMaxCount(1);
+          return;
+        }
+        const getTreeLabel = (val) => {
+          if (!treeOptions) return void 0;
+          const stack = [...treeOptions];
+          while (stack.length) {
+            const n = stack.pop();
+            if (n.value === val) return n.label;
+            if (n.children) stack.push(...n.children);
+          }
+          return void 0;
+        };
+        const estimatedWidths = [];
+        for (let i = 0; i < selectedValues.length; i++) {
+          const label = getTreeLabel(selectedValues[i]) || options.find((o) => o.value === selectedValues[i])?.label || selectedValues[i];
+          const estimatedWidth = Math.min(
+            label.length * AVG_CHAR_WIDTH + TAG_PADDING,
+            250
+          );
+          estimatedWidths.push(estimatedWidth);
+        }
+        let totalWidth = 0;
+        for (let i = 0; i < estimatedWidths.length; i++) {
+          totalWidth += estimatedWidths[i] + (i > 0 ? TAG_GAP : 0);
+        }
+        if (totalWidth <= availableWidth) {
+          setDynamicMaxCount(selectedValues.length);
+          return;
+        }
+        const availableWithCounter = availableWidth - COUNTER_TAG_WIDTH - TAG_GAP;
+        let count = 0;
+        totalWidth = 0;
+        for (let i = 0; i < estimatedWidths.length; i++) {
+          const tagWidth = estimatedWidths[i] + (i > 0 ? TAG_GAP : 0);
+          if (totalWidth + tagWidth <= availableWithCounter) {
+            totalWidth += tagWidth;
+            count++;
+          } else {
+            break;
+          }
+        }
+        setDynamicMaxCount(Math.max(1, count));
+      };
+      const rafId = requestAnimationFrame(() => {
+        calculateMaxCount();
+      });
+      const resizeObserver = new ResizeObserver(() => {
+        calculateMaxCount();
+      });
+      if (buttonRef.current) {
+        resizeObserver.observe(buttonRef.current);
+      }
+      return () => {
+        cancelAnimationFrame(rafId);
+        resizeObserver.disconnect();
+      };
+    }, [maxCount, selectedValues, treeOptions, options]);
     const handleInputKeyDown = (event) => {
       if (event.key === "Enter") {
         setIsPopoverOpen(true);
@@ -69,11 +177,6 @@ const MultiSelect = React.forwardRef(
     const handleTogglePopover = () => {
       setIsPopoverOpen((prev) => !prev);
     };
-    const clearExtraOptions = () => {
-      const newSelectedValues = selectedValues.slice(0, maxCount);
-      setSelectedValues(newSelectedValues);
-      onValueChange(newSelectedValues);
-    };
     const toggleAll = () => {
       if (treeOptions && treeOptions.length) {
         const gather = (acc, nodes) => {
@@ -320,7 +423,8 @@ const MultiSelect = React.forwardRef(
         "div",
         {
           className: cn(
-            "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm text-grey-800 hover:bg-grey-100 text-sm",
+            "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm text-grey-800 hover:bg-grey-100",
+            getFontVariant(size),
             (fully || isSelectedLeaf) && "bg-blue-50"
           ),
           style: { paddingLeft: depth * 14 + 8 }
@@ -337,13 +441,13 @@ const MultiSelect = React.forwardRef(
               toggleTreeNode(n);
             }
           },
-          fully && /* @__PURE__ */ React.createElement(Check, { className: "h-3 w-3" }),
+          fully && /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }),
           partial && !fully && /* @__PURE__ */ React.createElement(Minus, { className: "h-3 w-3 text-blue-600" })
         ),
         /* @__PURE__ */ React.createElement(
           "span",
           {
-            className: "text-sm flex-1 truncate cursor-pointer overflow-hidden",
+            className: "flex-1 truncate cursor-pointer overflow-hidden",
             onClick: (e) => {
               e.stopPropagation();
               toggleTreeNode(n);
@@ -364,25 +468,34 @@ const MultiSelect = React.forwardRef(
       /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         "button",
         {
-          ref,
+          ref: (node) => {
+            buttonRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
           onClick: handleTogglePopover,
           className: cn(
-            `flex w-full p-1 rounded-[4px] min-h-8 h-auto items-center justify-between bg-background
+            `flex w-full p-1 rounded-sm h-auto items-center justify-between bg-background
               border border-grey-400
               hover:border-grey-500 focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
               transition-all duration-300 outline-none
               [&_svg]:pointer-events-auto`,
+            TRIGGER_HEIGHT_CLASSES[size],
             className
           ),
           "aria-expanded": isPopoverOpen
         },
-        selectedValues.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1" }, selectedValues.slice(0, maxCount).map((value2) => {
+        selectedValues.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1" }, selectedValues.slice(0, dynamicMaxCount).map((value2) => {
           const label = findTreeLabel(value2) || options.find((o) => o.value === value2)?.label || value2;
-          return /* @__PURE__ */ React.createElement(Tag, { key: value2, color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(
+          return /* @__PURE__ */ React.createElement(Tag, { key: value2, color: "blue", className: "focus:ring-0 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement(
             Typography,
             {
-              variant: "body-small-400",
-              textColor: "text-blue-600"
+              variant: getFontVariant(size),
+              textColor: "text-blue-600",
+              className: "truncate"
             },
             label
           ), /* @__PURE__ */ React.createElement(
@@ -395,19 +508,10 @@ const MultiSelect = React.forwardRef(
               }
             }
           ));
-        }), selectedValues.length > maxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, `+ ${selectedValues.length - maxCount}`), /* @__PURE__ */ React.createElement(
+        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), className: "text-blue-600" }, `+ ${selectedValues.length - dynamicMaxCount}`))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(
           X,
           {
-            className: "h-4 w-4 cursor-pointer flex-shrink-0",
-            onClick: (event) => {
-              event.stopPropagation();
-              clearExtraOptions();
-            }
-          }
-        ))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(
-          X,
-          {
-            className: "h-4 mx-2 cursor-pointer text-grey-800",
+            className: "h-4 w-4 cursor-pointer text-grey-800",
             onClick: (event) => {
               event.stopPropagation();
               handleClear();
@@ -417,9 +521,16 @@ const MultiSelect = React.forwardRef(
           Separator,
           {
             orientation: "vertical",
-            className: "flex min-h-4 h-full"
+            className: "flex min-h-4 mx-1 h-full"
           }
-        ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 mx-2 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 mx-2 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement("span", { className: "text-sm text-grey-800 mx-3" }, placeholder), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 cursor-pointer text-grey-800 mx-2" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 cursor-pointer text-grey-800 mx-2" }))
+        ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            variant: getFontVariant(size),
+            className: "text-grey-800 mx-3"
+          },
+          placeholder
+        ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 cursor-pointer text-grey-800 mx-2" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 cursor-pointer text-grey-800 mx-2" }))
       )),
       /* @__PURE__ */ React.createElement(
         PopoverContent,
@@ -433,7 +544,7 @@ const MultiSelect = React.forwardRef(
           align: "start",
           onEscapeKeyDown: () => setIsPopoverOpen(false)
         },
-        !isTree && /* @__PURE__ */ React.createElement(Command, { shouldFilter: false }, /* @__PURE__ */ React.createElement(
+        !isTree && /* @__PURE__ */ React.createElement(Command, { shouldFilter: false, className: SEARCH_INPUT_CLASSES[size] }, /* @__PURE__ */ React.createElement(
           CommandInput,
           {
             placeholder: treeSearchPlaceholder || t("multiSelect.search"),
@@ -441,7 +552,7 @@ const MultiSelect = React.forwardRef(
             value: query,
             onValueChange: (v) => setQuery(v)
           }
-        ), /* @__PURE__ */ React.createElement(CommandList, null, (!filteredOptions || filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(CommandEmpty, { className: "p-4 body-medium-400 text-center text-grey-800" }, t("multiSelect.empty")), /* @__PURE__ */ React.createElement(CommandGroup, null, !query && /* @__PURE__ */ React.createElement(
+        ), /* @__PURE__ */ React.createElement(CommandList, null, (!filteredOptions || filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(CommandEmpty, { className: cn("p-4 text-center text-grey-800", getFontVariant(size)) }, t("multiSelect.empty")), /* @__PURE__ */ React.createElement(CommandGroup, null, !query && /* @__PURE__ */ React.createElement(
           CommandItem,
           {
             key: "all",
@@ -452,13 +563,20 @@ const MultiSelect = React.forwardRef(
             "div",
             {
               className: cn(
-                "flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400",
+                "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800",
                 selectedValues.length > 0 ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
               )
             },
-            selectedValues.length === effectiveOptions.length ? /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ React.createElement(Minus, { className: "h-4 w-4" })
+            selectedValues.length === effectiveOptions.length ? /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }) : /* @__PURE__ */ React.createElement(Minus, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
           ),
-          /* @__PURE__ */ React.createElement("span", { className: "text-grey-800" }, selectAllLabel ?? t("multiSelect.selectAll"))
+          /* @__PURE__ */ React.createElement(
+            Typography,
+            {
+              variant: getFontVariant(size),
+              className: "text-grey-800"
+            },
+            selectAllLabel ?? t("multiSelect.selectAll")
+          )
         ), isGrouped ? Object.entries(groupedOptions).map(
           ([categoryName, categoryOptions]) => {
             const filtered = categoryOptions.filter(
@@ -488,11 +606,12 @@ const MultiSelect = React.forwardRef(
                       isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                     )
                   },
-                  /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" })
+                  /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
                 ),
                 /* @__PURE__ */ React.createElement(
-                  "span",
+                  Typography,
                   {
+                    variant: getFontVariant(size),
                     className: "text-grey-800 truncate overflow-hidden",
                     title: option.label
                   },
@@ -516,15 +635,16 @@ const MultiSelect = React.forwardRef(
               "div",
               {
                 className: cn(
-                  "flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400 flex-shrink-0",
+                  "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800 flex-shrink-0",
                   isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                 )
               },
-              /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" })
+              /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
             ),
             /* @__PURE__ */ React.createElement(
-              "span",
+              Typography,
               {
+                variant: getFontVariant(size),
                 className: "text-grey-800 truncate overflow-hidden",
                 title: option.label
               },
@@ -545,7 +665,7 @@ const MultiSelect = React.forwardRef(
             {
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              strokeWidth: 2,
+              strokeWidth: 3,
               d: "M21 21l-4.35-4.35m0 0A7.5 7.5 0 1 0 5.25 5.25a7.5 7.5 0 0 0 11.4 11.4z"
             }
           )
@@ -556,19 +676,23 @@ const MultiSelect = React.forwardRef(
             value: treeQuery,
             onChange: (e) => setTreeQuery(e.target.value),
             placeholder: treeSearchPlaceholder || t("multiSelect.search"),
-            className: "w-full h-9 pl-9 pr-3 text-sm border-0 focus:outline-none focus:ring-0 bg-transparent placeholder:text-muted-foreground"
+            className: cn(
+              "w-full pl-9 pr-3 border-0 focus:outline-none focus:ring-0 bg-transparent placeholder:text-muted-foreground",
+              getFontVariant(size),
+              SEARCH_INPUT_HEIGHT_CLASSES[size]
+            )
           }
         ))), /* @__PURE__ */ React.createElement("div", { className: "px-2 pb-1 overflow-y-auto overflow-x-hidden" }, !treeQuery && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent text-sm",
+            className: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
             onClick: toggleAll
           },
           /* @__PURE__ */ React.createElement(
             "div",
             {
               className: cn(
-                "flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400",
+                "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800",
                 selectedValues.length > 0 ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
               )
             },
@@ -582,9 +706,16 @@ const MultiSelect = React.forwardRef(
                   acc += treeSelectionStrategy === "all" ? 1 + countAll(n.children) : countAll(n.children);
               }
               return acc;
-            }(treeOptions) ? /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ React.createElement(Minus, { className: "h-4 w-4" })
+            }(treeOptions) ? /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }) : /* @__PURE__ */ React.createElement(Minus, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
           ),
-          /* @__PURE__ */ React.createElement("span", { className: "text-grey-800" }, selectAllLabel ?? t("multiSelect.selectAll"))
+          /* @__PURE__ */ React.createElement(
+            Typography,
+            {
+              variant: getFontVariant(size),
+              className: "text-grey-800"
+            },
+            selectAllLabel ?? t("multiSelect.selectAll")
+          )
         ), treeOptions && renderTree(displayedTree)))
       )
     );

package/dist/components/NumberControl/NumberControl.js

@@ -11,7 +11,7 @@ const NumberControl = ({
   onChange,
   placeholder,
   required = false,
-  min,
+  min = 0,
   max,
   maxDigits,
   className = "",
@@ -21,34 +21,39 @@ const NumberControl = ({
 }) => {
   const defaultPlaceholder = maxDigits ? "0".repeat(maxDigits) : "0";
   const finalPlaceholder = placeholder ?? defaultPlaceholder;
+  value.toString();
   const handleIncrement = () => {
-    const current = typeof value === "number" ? value : parseInt(value, 10) || 0;
-    if (max === void 0 || current < max) {
-      const newValue = (current + 1).toString();
-      onChange(newValue);
+    const current = typeof value === "number" ? value : parseInt(value, 10) || min;
+    if (max !== void 0 && current >= max) {
+      return;
     }
+    const newValue = (current + 1).toString();
+    onChange(newValue);
   };
   const handleDecrement = () => {
-    const current = typeof value === "number" ? value : parseInt(value, 10) || 0;
-    if (min === void 0 || current > min) {
-      const newValue = (current - 1).toString();
-      onChange(newValue);
+    const current = typeof value === "number" ? value : parseInt(value, 10) || min;
+    if (current <= min) {
+      return;
     }
+    const newValue = (current - 1).toString();
+    onChange(newValue);
   };
   const handleInputChange = (inputValue) => {
     const numbersOnly = inputValue.replace(/[^0-9]/g, "");
-    if (numbersOnly === "") {
-      onChange("");
+    if (numbersOnly === "" || numbersOnly === "0".repeat(numbersOnly.length)) {
+      onChange(min.toString());
       return;
     }
     if (maxDigits && numbersOnly.length > maxDigits) {
       return;
     }
     const numValue = parseInt(numbersOnly, 10);
-    const isAboveMin = min === void 0 || numValue >= min;
+    const isAboveMin = numValue >= min;
     const isBelowMax = max === void 0 || numValue <= max;
     if (isAboveMin && isBelowMax) {
-      onChange(numbersOnly);
+      onChange(numValue.toString());
+    } else if (!isBelowMax && max !== void 0) {
+      onChange(max.toString());
     }
   };
   const labelElement = /* @__PURE__ */ React__default.createElement(