lecom-ui 5.3.79 → 5.3.81

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/TagInput/TagInput.js

@@ -13,10 +13,10 @@ function TagItem({ item, onRemove, readOnly }) {
     },
     [item.value, onRemove]
   );
-  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "max-w-[15.625rem] h-6 !px-2 !py-0.5" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600 truncate p-0" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
     X,
     {
-      className: "w-4 h-4 cursor-pointer",
+      className: "w-4 h-4 cursor-pointer flex-shrink-0",
       onClick: handleRemove,
       "aria-label": `Remover ${item.label}`,
       tabIndex: 0
@@ -26,95 +26,130 @@ function TagItem({ item, onRemove, readOnly }) {
 function HiddenCountTag({ count }) {
   return /* @__PURE__ */ React.createElement(Tag, { color: "blue", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, "+", count));
 }
-function useTagVisibility(ref, value) {
-  const getInitialEstimate = React.useCallback((totalTags) => {
-    if (totalTags <= 3) return totalTags;
-    if (totalTags <= 4) return totalTags;
-    return Math.min(5, totalTags);
-  }, []);
-  const [maxVisibleCount, setMaxVisibleCount] = React.useState(
-    () => getInitialEstimate(value.length)
+function calculateEstimatedWidths(value) {
+  const AVG_CHAR_WIDTH = 8;
+  const TAG_PADDING = 24;
+  return value.map((item) => {
+    const textLength = item.label.length;
+    const calculatedWidth = textLength * AVG_CHAR_WIDTH + TAG_PADDING;
+    return Math.min(calculatedWidth, 250);
+  });
+}
+function simulateTagLayout(estimatedWidths, availableWidth, maxLines) {
+  const COUNTER_TAG_WIDTH = 60;
+  const TAG_GAP = 4;
+  let currentLine = 0;
+  let currentLineWidth = 0;
+  let count = 0;
+  for (let i = 0; i < estimatedWidths.length; i++) {
+    const tagWidth = estimatedWidths[i] + (i > 0 && currentLineWidth > 0 ? TAG_GAP : 0);
+    if (currentLineWidth + tagWidth > availableWidth) {
+      currentLine++;
+      currentLineWidth = 0;
+      if (currentLine >= maxLines) {
+        break;
+      }
+    }
+    const isLastLine = currentLine === maxLines - 1;
+    const needsCounter = isLastLine && i < estimatedWidths.length - 1;
+    const widthNeeded = tagWidth + (needsCounter ? COUNTER_TAG_WIDTH + TAG_GAP : 0);
+    if (currentLineWidth + widthNeeded <= availableWidth) {
+      currentLineWidth += tagWidth;
+      count++;
+    } else {
+      break;
+    }
+  }
+  return Math.max(1, count);
+}
+function useDynamicMaxCount(ref, value, maxDisplayCount) {
+  const [dynamicMaxCount, setDynamicMaxCount] = React.useState(
+    value.length || 1
   );
-  const [hiddenCount, setHiddenCount] = React.useState(0);
-  const calculateVisibleTags = React.useCallback(
-    (children, totalTags) => {
-      if (children.length === 0 || totalTags === 0) {
-        const initialCount = getInitialEstimate(totalTags);
-        return {
-          visibleCount: initialCount,
-          hiddenCount: Math.max(totalTags - initialCount, 0)
-        };
+  const [maxLines, setMaxLines] = React.useState(null);
+  const hasCalculatedMaxLines = React.useRef(false);
+  React.useEffect(() => {
+    if (hasCalculatedMaxLines.current || !ref.current || value.length === 0) return;
+    const calculateMaxLines = () => {
+      if (!ref.current) {
+        setTimeout(calculateMaxLines, 10);
+        return;
+      }
+      const containerHeight = ref.current.offsetHeight;
+      if (containerHeight === 0) {
+        setTimeout(calculateMaxLines, 10);
+        return;
+      }
+      const TAG_HEIGHT = 24;
+      const CONTAINER_PADDING_VERTICAL = 4;
+      const availableHeight = containerHeight - CONTAINER_PADDING_VERTICAL * 2;
+      const calculatedMaxLines = Math.max(1, Math.floor(availableHeight / TAG_HEIGHT));
+      setMaxLines(calculatedMaxLines);
+      hasCalculatedMaxLines.current = true;
+    };
+    requestAnimationFrame(calculateMaxLines);
+  }, [ref, value.length]);
+  React.useEffect(() => {
+    if (maxDisplayCount !== void 0) {
+      setDynamicMaxCount(maxDisplayCount);
+      return;
+    }
+    if (value.length === 0 || maxLines === null) return;
+    const calculateMaxCount = () => {
+      if (!ref.current) {
+        setTimeout(() => calculateMaxCount(), 10);
+        return;
+      }
+      const containerWidth = ref.current.offsetWidth;
+      if (containerWidth === 0) {
+        setTimeout(() => calculateMaxCount(), 10);
+        return;
       }
-      if (totalTags <= 3) return { visibleCount: totalTags, hiddenCount: 0 };
-      const offsetTops = [...new Set(children.map((c) => c.offsetTop))].sort(
-        (a, b) => a - b
+      const CONTAINER_PADDING = 12;
+      const TAG_GAP = 4;
+      const availableWidth = containerWidth - CONTAINER_PADDING * 2;
+      if (availableWidth <= 0) {
+        setDynamicMaxCount(1);
+        return;
+      }
+      const estimatedWidths = calculateEstimatedWidths(value);
+      const totalWidth = estimatedWidths.reduce(
+        (sum, width, i) => sum + width + (i > 0 ? TAG_GAP : 0),
+        0
       );
-      if (offsetTops.length <= 1) {
-        return totalTags > 6 ? { visibleCount: 5, hiddenCount: totalTags - 5 } : { visibleCount: totalTags, hiddenCount: 0 };
+      if (totalWidth <= availableWidth) {
+        setDynamicMaxCount(value.length);
+        return;
       }
-      const firstLineTop = offsetTops[0];
-      const secondLineTop = offsetTops[1];
-      let firstLineCount = 0;
-      let secondLineCount = 0;
-      for (const child of children) {
-        if (child.offsetTop === firstLineTop) firstLineCount++;
-        else if (child.offsetTop === secondLineTop) secondLineCount++;
+      const totalAvailableWidth = availableWidth * maxLines;
+      if (totalWidth <= totalAvailableWidth) {
+        setDynamicMaxCount(value.length);
+        return;
       }
-      const visibleCount = firstLineCount + secondLineCount;
-      return {
-        visibleCount,
-        hiddenCount: Math.max(totalTags - visibleCount, 0)
-      };
-    },
-    [getInitialEstimate]
-  );
-  const calculateMaxVisible = React.useCallback(() => {
-    const container = ref.current;
-    if (!container) return;
-    const children = Array.from(container.children).filter(
-      (el) => el.dataset.tag === "true" && !el.textContent?.startsWith("+")
-    );
-    const { visibleCount, hiddenCount: newHiddenCount } = calculateVisibleTags(
-      children,
-      value.length
-    );
-    setMaxVisibleCount(visibleCount);
-    setHiddenCount(newHiddenCount);
-  }, [ref, calculateVisibleTags, value.length]);
-  React.useLayoutEffect(() => {
-    const calculateWhenVisible = () => {
-      requestAnimationFrame(() => requestAnimationFrame(calculateMaxVisible));
+      const count = simulateTagLayout(estimatedWidths, availableWidth, maxLines);
+      setDynamicMaxCount(count);
     };
-    const observer = new IntersectionObserver((entries) => {
-      if (entries.some((entry) => entry.isIntersecting)) calculateWhenVisible();
+    const rafId = requestAnimationFrame(() => {
+      calculateMaxCount();
+    });
+    const resizeObserver = new ResizeObserver(() => {
+      calculateMaxCount();
     });
-    const resizeObserver = new ResizeObserver(calculateMaxVisible);
     if (ref.current) {
-      observer.observe(ref.current);
       resizeObserver.observe(ref.current);
-      if (ref.current.offsetParent !== null) {
-        calculateWhenVisible();
-      }
     }
     return () => {
-      observer.disconnect();
+      cancelAnimationFrame(rafId);
       resizeObserver.disconnect();
     };
-  }, [value, calculateMaxVisible, ref]);
-  React.useEffect(() => {
-    const timeout = setTimeout(calculateMaxVisible, 150);
-    return () => clearTimeout(timeout);
-  }, [value.length, calculateMaxVisible]);
-  React.useLayoutEffect(() => {
-    calculateMaxVisible();
-  }, [value.length, calculateMaxVisible]);
-  return { maxVisibleCount, hiddenCount };
+  }, [maxDisplayCount, value, ref, maxLines]);
+  return dynamicMaxCount;
 }
 function TagInput(props) {
   const {
     value,
     onRemove,
-    maxDisplayCount = 7,
+    maxDisplayCount,
     placeholder = "Nenhum item selecionado",
     disabled = false,
     readOnly = false,
@@ -124,14 +159,14 @@ function TagInput(props) {
     ...restProps
   } = props;
   const ref = React.useRef(null);
-  useTagVisibility(ref, value);
-  const visibleCount = Math.min(maxDisplayCount, value.length);
+  const dynamicMaxCount = useDynamicMaxCount(ref, value, maxDisplayCount);
+  const visibleCount = Math.min(dynamicMaxCount, value.length);
   const displayTags = value.slice(0, visibleCount);
   const actualHiddenCount = Math.max(value.length - visibleCount, 0);
   const textareaRadius = radius === "full" ? "large" : radius;
   const containerClassNames = cn(
     textareaVariants({ variant, radius: textareaRadius }),
-    "flex flex-wrap items-start min-h-10 gap-1 py-2 px-3",
+    "flex flex-wrap items-start min-h-10 gap-1 py-1 px-3",
     disabled && "opacity-50 pointer-events-none",
     className
   );