bianic-ui 1.0.0-beta.21 → 1.0.0-beta.22

package/dist/esm/index.js

@@ -2524,9 +2524,28 @@ var TagLabel = function (_a) {
     var validatedColor = validUnion(color, colorUnion);
     var validatedSize = validUnion(size, sizeUnion);
     var validatedVariant = validUnion(variant, variantUnion);
+    var containerRef = useRef(null);
+    var _c = useState(null), sizeCount = _c[0], setSizeCount = _c[1];
+    useEffect(function () {
+        if (variant === 'icon') {
+            // Get the size of the icon
+            // and set the size of the container
+            // to the one with the biggest size (width or height icon)
+            // in order to make the container square
+            var rect = containerRef.current.getBoundingClientRect();
+            var width = rect.width;
+            var height = rect.height;
+            if (width > height)
+                setSizeCount(width);
+            else
+                setSizeCount(height);
+        }
+    }, []);
     var defaultIconSize = validatedSize === 'md' ? 'text-xl' : 'text-sm';
     var roundedClass = validatedVariant === 'icon' ? 'rounded-full' : 'rounded-[50px]';
-    var sizeClass = validatedVariant === 'icon' ? iconOnlySizeConfig[validatedSize] : sizeConfig[validatedSize];
+    var sizeClass = validatedVariant === 'icon'
+        ? iconOnlySizeConfig[validatedSize]
+        : sizeConfig[validatedSize];
     var isCloseableClass = validatedVariant === 'closeable' && rightPaddingConfig[validatedSize];
     var colorClass = validatedColor === 'custom'
         ? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor)
@@ -2536,15 +2555,20 @@ var TagLabel = function (_a) {
     var textClass = isBlock ? 'text-center' : 'text-left';
     var containerClass = "".concat(sizeClass, " ").concat(colorClass, " ").concat(roundedClass, " ").concat(isCloseableClass, " ").concat(blockclass);
     var closeClass = validatedColor === 'custom'
-        ? isDark ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor) : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
+        ? isDark
+            ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
+            : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
         : closeConfig[validatedColor];
-    return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base h-fit ".concat(containerClass), style: { maxWidth: maxWidthStyle } }, props),
-        leftIcon ||
-            (validatedVariant === 'icon' && React.createElement(TbCheck, { className: defaultIconSize })),
-        validatedVariant !== 'icon' && (React.createElement("span", { className: "pb-[2px] truncate w-full ".concat(textClass) },
-            " ",
-            text,
-            " ")),
+    return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base ".concat(containerClass), style: {
+            maxWidth: maxWidthStyle,
+        } }, props),
+        React.createElement("div", { style: {
+                width: sizeCount + 'px',
+                height: sizeCount + 'px',
+            }, className: "flex items-center justify-center" },
+            React.createElement("div", { ref: containerRef }, leftIcon ||
+                (validatedVariant === 'icon' && (React.createElement(TbCheck, { className: defaultIconSize }))))),
+        validatedVariant !== 'icon' && (React.createElement("span", { className: "pb-[2px] truncate w-full ".concat(textClass) }, text)),
         validatedVariant !== 'icon' && rightIcon,
         validatedVariant === 'closeable' && (React.createElement("button", { type: "button", onClick: closeHandler, className: "aspect-square w-[18px] flex justify-center items-center rounded-full mt-[1px] ".concat(closeClass) },
             React.createElement(TbX, { className: "text-[18px]" }))))));