bianic-ui 1.10.2 → 1.11.0

package/dist/cjs/index.js

@@ -309,12 +309,17 @@ var variantUnion$2 = [
     'link',
 ];
 function Text(_a) {
-    var _b = _a.extended, extended = _b === void 0 ? '' : _b, variant = _a.variant, children = _a.children;
+    var _b = _a.extended, extended = _b === void 0 ? '' : _b, variant = _a.variant, children = _a.children, _c = _a.className, className = _c === void 0 ? '' : _c;
     var validatedVariant = validUnion(variant, variantUnion$2);
-    return (React.createElement("span", { className: "bianic-text ".concat(textClasses[validatedVariant], " ").concat(extended) }, childrenElement(children)));
+    var defaultColor = extended.includes('text-bia') || (className === null || className === void 0 ? void 0 : className.includes('text-bia'))
+        ? ''
+        : 'text-bia-black';
+    var extendedClasses = "".concat(className, " ").concat(extended);
+    return (React.createElement("span", { className: "bianic-text ".concat(textClasses[validatedVariant], " ").concat(defaultColor, " ").concat(extendedClasses) }, childrenElement(children)));
 }
 Text.defaultProps = {
     extended: '',
+    className: '',
 };
 
 /******************************************************************************
@@ -440,10 +445,10 @@ var minWidthConfig$1 = {
     tn: 'min-w-[64px]',
 };
 var iconOnlySizeConfig$1 = {
-    lg: 'p-[13px] flex items-center justify-center gap-[10px]',
-    md: ' p-[11px] flex items-center justify-center gap-[5px]',
-    sm: 'p-[8px] flex items-center justify-center gap-[5px] ',
-    tn: 'p-[4px] flex items-center justify-center gap-[3px]',
+    lg: 'py-[13px] flex items-center justify-center gap-[10px]',
+    md: 'py-[11px] flex items-center justify-center gap-[5px]',
+    sm: 'py-[8px] flex items-center justify-center gap-[5px] ',
+    tn: 'py-[4px] flex items-center justify-center gap-[3px]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
 var variantConfig$2 = {
@@ -481,7 +486,7 @@ var variantUnion$1 = [
     'primary-outlined',
     'success-outlined',
     'warning-outlined',
-    'form-group'
+    'form-group',
 ];
 var radiusUnion = ['default', 'full-rounded'];
 var sizeUnion$5 = ['md', 'lg', 'sm', 'tn'];
@@ -506,7 +511,7 @@ function Button(_a) {
     }
     var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
-        : iconOnlySizeConfig$1[validatedSize];
+        : "".concat(iconOnlySizeConfig$1[validatedSize], " ").concat(variant.includes('link') ? '' : "".concat(sidePaddingConfig[validatedSize]));
     var classString = "\n    ".concat(variantConfig$2[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig$1[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
     return (React.createElement("button", __assign({ type: "button", className: "bianic-button bianic-fgc-target flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
         childrenElement(iconLeft || left),
@@ -1588,7 +1593,7 @@ function Color() {
         'light-30',
         'light-20',
         'light-10',
-        'primary',
+        '',
         'dark-10',
         'dark-20',
         'dark-30',
@@ -1599,14 +1604,8 @@ function Color() {
         'dark-80',
         'dark-90',
     ];
-    var aliases = {
-        'light-90': 'pastel',
-        'light-50': 'disabled',
-        'light-10': 'hover',
-        'dark-10': 'active',
-    };
     return (React.createElement("div", { className: "color-pallete flex flex-col gap-y-10" },
-        React.createElement("div", { className: "flex gap-x-5 justify-center" },
+        React.createElement("div", { className: "flex justify-center gap-x-5" },
             React.createElement("div", { className: "flex w-fit flex-col items-center gap-y-3" },
                 React.createElement("div", { className: "text-center text-xs font-semibold" }, "Black"),
                 React.createElement("div", { className: "aspect-square w-10 rounded-lg", style: {
@@ -1621,13 +1620,13 @@ function Color() {
             React.createElement("div", { className: "flex flex-col items-end justify-center space-y-3" },
                 React.createElement("div", { className: "h-10 min-w-10" }),
                 lightLevels.map(function (level) { return (React.createElement("div", { key: level, className: "flex h-10 w-fit items-center justify-end" },
-                    React.createElement("div", { className: "whitespace-nowrap text-center text-xs font-semibold" }, aliases[level] ? "(".concat(aliases[level], ") ").concat(level) : level))); })),
+                    React.createElement("div", { className: "whitespace-nowrap text-center text-xs font-semibold" }, level))); })),
             colors.map(function (color, index) {
                 return (React.createElement("div", { className: "flex w-fit flex-col items-center gap-y-3", key: index },
                     React.createElement("div", { className: "h-10 w-fit" },
                         React.createElement("div", { className: "text-center text-xs font-semibold" }, color.tailwind)),
                     lightLevels.map(function (level) {
-                        var suffix = level === 'primary' ? '' : "-".concat(level);
+                        var suffix = level === '' ? '' : "-".concat(level);
                         return (React.createElement("div", { key: level, className: "aspect-square w-10 rounded-lg", style: {
                                 backgroundColor: "var(--".concat(color.css).concat(suffix, ")"),
                             } }));
@@ -1728,18 +1727,18 @@ var TreeItem = function (_a) {
 };
 
 var MenuContainer = React.forwardRef(function MenuContainer(propsComp, ref) {
-    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.zIndex, zIndex = _f === void 0 ? 0 : _f, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex"]);
+    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.zIndex, zIndex = _f === void 0 ? 100 : _f, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     return (open && (React.createElement(React.Fragment, null,
-        isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); } })),
+        isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); }, style: { zIndex: zIndex } })),
         React.createElement("div", __assign({ className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), ref: ref, style: {
-                zIndex: zIndex,
+                zIndex: zIndex + 10,
             } }, restProps), React.Children.map(children, function (child) {
             return React.isValidElement(child)
                 ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
                     React.cloneElement(child, {
                         onClose: function () { return onClose(); },
-                        zIndex: zIndex,
+                        zIndex: zIndex + 10,
                     })
                 : child;
         })))));
@@ -1749,7 +1748,7 @@ MenuContainer.defaultProps = {
 };
 
 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, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex"]);
+    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, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex"]);
     var _h = React.useState(false), isHovered = _h[0], setIsHovered = _h[1];
     var _j = React.useState(false), isLeft = _j[0], setIsLeft = _j[1];
     var isWithChecked = isChecked !== undefined;
@@ -1778,14 +1777,14 @@ function MenuItem(_a) {
         React.createElement("div", __assign({ className: "relative flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
                 onClick(e);
             }, onKeyDown: function () { }, style: {
-                zIndex: isHovered ? currentZIndex : 0,
+                zIndex: isHovered ? currentZIndex : currentZIndex + 15,
             } }, props),
             isWithChecked && (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] text-bia-black" }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
                 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 top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex }, children))));
+        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10 }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
@@ -2128,7 +2127,7 @@ var fontConfig = {
 };
 
 var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, ref) {
-    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 0 : _h, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
+    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
     var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
@@ -2157,7 +2156,7 @@ DropdownContainer.defaultProps = {
 };
 
 function DropdownItem(_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.onClickItem, onClickItem = _c === void 0 ? function () { } : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.value, value = _f === void 0 ? '' : _f, content = _a.content, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, props = __rest(_a, ["children", "className", "onClickItem", "onClose", "size", "value", "content", "disabled", "zIndex"]);
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.onClickItem, onClickItem = _c === void 0 ? function () { } : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.value, value = _f === void 0 ? '' : _f, content = _a.content, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, props = __rest(_a, ["children", "className", "onClickItem", "onClose", "size", "value", "content", "disabled", "zIndex"]);
     var _j = React.useState(false), isHovered = _j[0], setIsHovered = _j[1];
     var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
     var fontClass = fontConfig[size] || fontConfig['md'];