bianic-ui 1.7.2 → 1.7.3-alpha.1

package/dist/esm/index.js

@@ -413,7 +413,7 @@ var sizeConfig$c = {
     lg: 'py-[10.5px] h-[48px] flex items-center justify-center gap-[10px] text-size-md ',
     md: 'py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base ',
     sm: 'py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm ',
-    tn: 'py-[2px] h-[22px] flex items-center justify-center gap-[3px] text-size-tiny ',
+    tn: 'py-[2px] h-[22px] flex items-center justify-center gap-[3px] text-size-sm ',
 };
 var sidePaddingConfig = {
     lg: 'px-[13px]',
@@ -486,7 +486,7 @@ function Button(_a) {
         minWidthRules = '';
     }
     var sizingRules;
-    if (variant.includes('subtle')) {
+    if (variant.includes('link')) {
         sizingRules = "".concat(sizeConfig$c[validatedSize]);
     }
     else {
@@ -1486,7 +1486,7 @@ var colorConfig$1 = {
 var ButtonApp = function (_a) {
     _a.icon; _a.isNotified; var _c = _a.isActive, isActive = _c === void 0 ? false : _c, disabled = _a.disabled, _d = _a.color, color = _d === void 0 ? 'green' : _d, label = _a.label, extended = _a.extended, rest = __rest(_a, ["icon", "isNotified", "isActive", "disabled", "color", "label", "extended"]);
     var buttonState = isActive ? 'active' : 'default';
-    return (React.createElement("button", __assign({ className: "button-app px-[10px] pb-[8.8px] pt-[8px] text-size-tiny  ".concat(colorConfig$1[color][buttonState], " ").concat(extended, " "), type: "button", disabled: disabled }, rest), label));
+    return (React.createElement("button", __assign({ className: "button-app px-[10px] pb-[8.8px] pt-[8px] font-arial text-size-tiny ".concat(colorConfig$1[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
 };
 
 var textColorConfig = {
@@ -1705,13 +1705,13 @@ function MenuItem(_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children"]);
     var _g = useState(false), isHovered = _g[0], setIsHovered = _g[1];
     return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px] ".concat(!isHovered && 'z-10'), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("div", __assign({ className: "relative z-10 flex items-center p-[5px] font-arial hover:bg-bia-blue-pastel ".concat(className, "}"), role: "button", tabIndex: 0, onClick: function (e) {
+        React.createElement("div", __assign({ className: "relative z-10 flex items-center p-[5px] hover:bg-bia-blue-pastel ".concat(className, "}"), role: "button", tabIndex: 0, onClick: function (e) {
                 onClick(e);
             }, onKeyDown: function () { } }, props),
-            React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked !== undefined && isChecked && (React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
-            React.createElement("span", { className: "whitespace-nowrap text-[11px]" }, label),
+            isChecked !== undefined && (React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked && React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
+            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px]" }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
-                children && React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" }),
+                children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
                 children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
         children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute right-0 top-0 translate-x-full bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px]" }, children))));
 }
@@ -1776,7 +1776,7 @@ function PasswordIcon(_a) {
 }
 
 function TextInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? false : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete"]);
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? null : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete"]);
     var isTransparent = variant.includes('transparent');
     var _r = useState(false), isShow = _r[0], setIsShow = _r[1];
     var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
@@ -2904,7 +2904,7 @@ var TabMenu = function (_a) {
         usedButtonConfig = defaultButtonConfigs[isActive];
         usedActionButtonConfig = '';
     }
-    return (React.createElement("div", __assign({ className: "tab-menu flex flex-row font-arial text-size-tiny font-normal ".concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(usedBaseConfig, " ") }, rest),
+    return (React.createElement("div", __assign({ className: "tab-menu flex flex-row font-arial text-size-tiny font-normal ".concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(usedBaseConfig, " ").concat(rest.className) }, rest),
         text,
         React.createElement("div", { className: "grid ".concat(usedButtonConfig, " ") },
             validatedVariant === 'alternative' && React.createElement("div", { className: "order-first" }),
@@ -2918,32 +2918,32 @@ var alignConfig = {
     left: 'justify-start',
 };
 var sizeConfig$1 = {
-    md: 'px-2.5 py-[9px] text-bia-base',
-    sm: 'px-2.5 py-[7px] text-bia-sm',
-    tn: 'px-2.5 py-[3px] text-bia-sm',
+    md: 'px-2.5 py-[9px]',
+    sm: 'px-2.5 py-[7px]',
+    tn: 'px-2.5 py-[3px]',
 };
 var bodyTextConfig = {
-    md: 'normal-text-semilight',
-    sm: 'small-text',
-    tn: 'small-text',
+    md: 'text-size-base font-segoe font-light',
+    sm: 'text-size-sm font-normal font-segoe',
+    tn: 'text-size-sm font-normal font-segoe',
 };
 var headTextConfig = {
-    md: 'normal-text-semibold',
-    sm: 'small-text-semibold',
-    tn: 'small-text-semibold',
+    md: 'text-size-base font-segoe font-semibold',
+    sm: 'text-size-sm font-semibold font-segoe',
+    tn: 'text-size-sm font-semibold font-segoe',
 };
 
 function TableCell(_a) {
     var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, _c = _a.alignment, alignment = _c === void 0 ? 'left' : _c, className = _a.className, children = _a.children, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.lined, lined = _e === void 0 ? false : _e, _f = _a.bgColor, bgColor = _f === void 0 ? '' : _f, props = __rest(_a, ["variant", "alignment", "className", "children", "size", "lined", "bgColor"]);
     var bottomLined = lined ? 'border-b border-bia-grey' : '';
     var bgColorClass = "bg-bia-".concat(bgColor);
-    var columnClass = "p-0 ".concat(className, " ").concat(sizeConfig$1[size], " ").concat(bottomLined, " ").concat(bgColorClass);
+    var isHead = variant === 'head';
+    var textConfig = isHead ? headTextConfig[size] : bodyTextConfig[size];
+    var columnClass = "p-0 ".concat(sizeConfig$1[size], " ").concat(bottomLined, " ").concat(bgColorClass, " ").concat(alignConfig[alignment], " ").concat(textConfig, " ").concat(className);
     if (variant === 'head') {
-        return (React.createElement("th", __assign({ className: "bianic-table-cell table-head bg-bia-grey-light-80 ".concat(columnClass) }, props),
-            React.createElement(Text, { variant: headTextConfig[size], extended: "flex items-center gap-x-[5px] whitespace-nowrap ".concat(alignConfig[alignment]) }, children)));
+        return (React.createElement("th", __assign({ className: "bianic-table-cell table-head bg-bia-grey-light-80 ".concat(columnClass) }, props), children));
     }
-    return (React.createElement("td", __assign({ className: "bianic-table-cell table-col ".concat(columnClass) }, props),
-        React.createElement(Text, { variant: bodyTextConfig[size], extended: "flex items-center gap-x-[5px] whitespace-nowrap ".concat(alignConfig[alignment]) }, children)));
+    return (React.createElement("td", __assign({ className: "bianic-table-cell table-col ".concat(columnClass) }, props), children));
 }
 TableCell.defaultProps = {
     alignment: 'left',
@@ -3029,13 +3029,14 @@ var TagLabel = function (_a) {
                 setSizeCount(height);
         }
     }, []);
+    var isCloseable = validatedVariant === 'closeable';
     var defaultIconSize = validatedSize === 'md' ? 'text-xl' : 'text-sm';
     var borderColorRules = outlineColor || bgColor;
     var roundedClass = validatedVariant === 'icon' ? 'rounded-full' : 'rounded-[50px]';
     var sizeClass = validatedVariant === 'icon'
         ? iconOnlySizeConfig[validatedSize]
         : sizeConfig[validatedSize];
-    var isCloseableClass = validatedVariant === 'closeable' && rightPaddingConfig[validatedSize];
+    var isCloseableClass = isCloseable && rightPaddingConfig[validatedSize];
     var colorClass = validatedColor === 'custom'
         ? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor, " border border-bia-").concat(borderColorRules)
         : colorConfig[validatedColor];
@@ -3049,7 +3050,8 @@ var TagLabel = function (_a) {
             : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
         : closeColorConfig[validatedColor];
     var closeClass = "".concat(closeColor, " ").concat(closeSizeConfig[validatedSize]);
-    return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base ".concat(containerClass), style: {
+    var isOpen = isCloseable ? open : true;
+    return (isOpen && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base ".concat(containerClass), style: {
             maxWidth: maxWidthStyle,
         } }, props),
         leftIcon && (React.createElement("div", { style: {
@@ -3057,12 +3059,12 @@ var TagLabel = function (_a) {
                 height: sizeCount + 'px',
             }, className: "flex items-center justify-center", ref: containerRef }, leftIcon ||
             (validatedVariant === 'icon' && (React.createElement(TbCheck, { className: defaultIconSize }))))),
-        validatedVariant !== 'icon' && text && (React.createElement("span", { className: "w-full truncate pb-[2px] ".concat(textClass) }, text)),
+        validatedVariant !== 'icon' && text && (React.createElement("span", { className: "w-full truncate pb-[1px] ".concat(textClass) }, text)),
         validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "block" },
             " ",
             rightIcon,
             " ")),
-        validatedVariant === 'closeable' && (React.createElement("button", { type: "button", onClick: closeHandler, className: "flex aspect-square items-center justify-center rounded-full pt-[1px] ".concat(closeClass) },
+        isCloseable && (React.createElement("button", { type: "button", onClick: closeHandler, className: "flex aspect-square items-center justify-center rounded-full pt-[1px] ".concat(closeClass) },
             React.createElement(TbX, null))))));
 };
 TagLabel.defaultProps = {