bianic-ui 1.0.0-beta.27 → 1.0.0-beta.28

package/dist/cjs/index.js

@@ -284,29 +284,42 @@ Text.defaultProps = {
 };
 
 function Alert(_a) {
-    var title = _a.title, caption = _a.caption, variant = _a.variant, visible = _a.visible, setVisible = _a.setVisible, visibleIcon = _a.visibleIcon, visibleClose = _a.visibleClose;
-    var IconComponent = AlertConfig[variant].icon[visibleIcon ? 'true' : 'false'];
+    var _b = _a.title, title = _b === void 0 ? '' : _b, caption = _a.caption, _c = _a.variant, variant = _c === void 0 ? 'base' : _c, _d = _a.visible, visible = _d === void 0 ? true : _d, _e = _a.setVisible, setVisible = _e === void 0 ? function () { } : _e, _f = _a.visibleIcon, visibleIcon = _f === void 0 ? true : _f, _g = _a.visibleClose, visibleClose = _g === void 0 ? false : _g;
+    var validateVariant = validUnion(variant, [
+        'base',
+        'info',
+        'success',
+        'warning',
+        'danger',
+    ]);
+    var IconComponent = AlertConfig[validateVariant].icon[visibleIcon ? 'true' : 'false'];
     var IconX = AlertConfig[visibleClose ? 'true' : 'false'];
     var handleCloseAlert = function () {
         setVisible(false);
     };
-    return (visible && (React.createElement("div", { className: "flex flex-col w-full" },
-        React.createElement("div", { className: "w-full ".concat(AlertConfig[variant].bg, "  rounded-[5px] mb-5") },
+    return (visible && (React.createElement("div", { className: "alert-container flex flex-col w-full" },
+        React.createElement("div", { className: "alert-body w-full ".concat(AlertConfig[validateVariant].bg, "  rounded-[5px]") },
             React.createElement("div", { className: "flex w-full" },
-                React.createElement("div", { className: "accent flex items-center py-[10px]" },
-                    React.createElement("div", { className: "left-0 w-[3px] h-full ".concat(AlertConfig[variant].vBar, "  rounded-r-[10px]") })),
-                React.createElement("div", { className: "content w-full flex py-[10px] pe-[10px] items-start" },
-                    React.createElement("div", { className: "icon-area flex ps-[10px]" }, IconComponent && typeof IconComponent === 'function' && (React.createElement("div", { className: "flex p-[7px] ".concat(AlertConfig[variant].ContainerIcon, " items-center justify-center rounded-radius-full") },
+                React.createElement("div", { className: "alert-accent flex items-center py-[10px]" },
+                    React.createElement("div", { className: "left-0 w-[3px] h-full ".concat(AlertConfig[validateVariant].vBar, "  rounded-r-[10px]") })),
+                React.createElement("div", { className: "alert-content w-full flex py-[10px] pe-[10px] items-start" },
+                    React.createElement("div", { className: "icon-area flex ps-[10px]" }, IconComponent && typeof IconComponent === 'function' && (React.createElement("div", { className: "flex p-[7px] ".concat(AlertConfig[validateVariant].ContainerIcon, " items-center justify-center rounded-radius-full") },
                         React.createElement(IconComponent, { size: 20, color: "white" })))),
-                    React.createElement("div", { className: "flex w-full justify-between" },
-                        React.createElement("div", { className: "flex ps-[10px] text-area flex-col ".concat(visibleClose ? 'mr-[10px]' : '', " ").concat(visibleIcon ? '' : 'ml-[-10px]') },
+                    React.createElement("div", { className: "content-area flex w-full justify-between" },
+                        React.createElement("div", { className: "text-area flex ps-[10px] text-area flex-col ".concat(visibleClose ? 'mr-[10px]' : '', " ").concat(visibleIcon ? '' : 'ml-[-10px]') },
                             React.createElement("div", { className: "flex justify-between" },
                                 React.createElement(Text, { variant: "normal-text-semibold" }, title)),
                             React.createElement(Text, { variant: "small-text" }, caption)),
-                        React.createElement("div", { className: "flex closable-area" }, IconX && typeof IconX === 'function' && (React.createElement(IconX, { className: "cursor-pointer ".concat(AlertConfig[variant].hover, " ").concat(AlertConfig[variant].active, " ").concat(AlertConfig[variant].focus, " ").concat(AlertConfig[variant].close), onClick: function () { return handleCloseAlert(); }, tabIndex: 0 }))))))))));
+                        IconX && typeof IconX === 'function' && (React.createElement("div", { className: "closable-area flex " },
+                            React.createElement(IconX, { className: "cursor-pointer ".concat(AlertConfig[validateVariant].hover, " ").concat(AlertConfig[validateVariant].active, " ").concat(AlertConfig[validateVariant].focus, " ").concat(AlertConfig[validateVariant].close), onClick: function () { return handleCloseAlert(); }, tabIndex: 0 }))))))))));
 }
 Alert.defaultProps = {
-    title: null,
+    title: '',
+    variant: 'base',
+    visible: true,
+    setVisible: function () { },
+    visibleIcon: true,
+    visibleClose: false,
 };
 
 /******************************************************************************
@@ -437,7 +450,7 @@ function Button(_a) {
         ? sizeConfig$b[validatedSize]
         : iconOnlySizeConfig$1[validatedSize];
     var classString = "\n    ".concat(variantConfig$1[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
-    return (React.createElement("button", __assign({ type: "button", className: "button flex justify-center items-center ".concat(classString), disabled: disabled }, props),
+    return (React.createElement("button", __assign({ type: "button", className: "button flex justify-center items-center font-semibold ".concat(classString), disabled: disabled }, props),
         childrenElement(iconLeft || left),
         childrenElement(label),
         childrenElement(iconRight || right)));
@@ -1545,9 +1558,9 @@ function TextInput(_a) {
         descColor = 'text-bia-red';
     var bottomBorderColor = 'hover:border-b-bia-blue focus:border-b-bia-blue';
     if (!disabled && isExistValidation && isValid)
-        bottomBorderColor = 'border-b-bia-green';
+        bottomBorderColor = 'hover:border-b-bia-green focus:border-b-bia-green';
     if (!disabled && isExistValidation && !isValid)
-        bottomBorderColor = 'border-b-bia-red';
+        bottomBorderColor = 'hover:border-b-bia-red focus:border-b-bia-red';
     var iconElement = null;
     if (!disabled && isExistValidation)
         iconElement = React.createElement(ValidationIcon, { isValid: isValid, iconSize: iconSize });
@@ -1744,7 +1757,7 @@ var sizeConfig$5 = {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function DefaultDropdownItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, isSelected = _a.isSelected, options = _a.options, caption = _a.caption;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, isSelected = _a.isSelected, options = _a.options;
     var _f = React.useState(false), isHovered = _f[0], setisHovered = _f[1];
     var _g = React.useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
@@ -1753,11 +1766,9 @@ function DefaultDropdownItem(_a) {
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "w-full relative focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
-        React.createElement("div", { className: "hover:bg-bia-blue-light-90 active:bg-bia-blue-light-80 select-none flex flex-col ".concat(itemClass) },
-            React.createElement("span", null,
-                label,
-                isExistSubDropdown && (React.createElement(TbChevronRight, { className: "float-right text-bia-grey" }))),
-            React.createElement(Text, { variant: "small-text", extended: "text-bia-coolgrey" }, caption)),
+        React.createElement("div", { className: "hover:bg-bia-blue-light-90 active:bg-bia-blue-light-80 select-none ".concat(itemClass) },
+            label,
+            isExistSubDropdown && (React.createElement(TbChevronRight, { className: "float-right text-bia-grey" }))),
         isOpenDropdown && options && isExistSubDropdown && (React.createElement("div", { className: "absolute z-50 top-0 right-0 translate-x-full border w-full bg-primary-white border-bia-grey-dark-10 rounded-md shadow-lg", onMouseEnter: function () { return setIsHoveredSubMenu(true); }, onMouseLeave: function () { return setIsHoveredSubMenu(false); } }, options.map(function (option) { return (React.createElement(DefaultDropdownItem, { label: option.label, size: size, options: option.options })); })))));
 }
 DefaultDropdownItem.defaultProps = {
@@ -1766,13 +1777,11 @@ DefaultDropdownItem.defaultProps = {
     size: 'md',
     options: [],
     isSelected: false,
-    caption: '',
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 var sizeUnion$1 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected;
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected, props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected"]);
     var _e = React.useState(false), isOpen = _e[0], setIsOpen = _e[1];
     var validatedSize = validUnion(size, sizeUnion$1);
     var _f = sizeConfig$6[validatedSize], searchSize = _f.searchSize, iconSize = _f.iconSize;
@@ -1788,21 +1797,21 @@ function SelectInput(_a) {
             document.removeEventListener('mousedown', handleOutsideClick);
         };
     });
-    return (React.createElement("div", { className: "field-group w-full flex flex-col", ref: inputRef },
-        React.createElement("label", { htmlFor: id, className: "label text-xs pb-2 font-semibold" },
+    return (React.createElement("div", { className: "field-group flex w-full flex-col", ref: inputRef },
+        React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
-        React.createElement("div", { className: "group w-full relative" },
-            React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80 pe-8 w-full border border-bia-grey-dark-10 enabled:hover:border-b-bia-blue enabled:hover:rounded-b-none enabled:focus:border-b-bia-blue enabled:focus:rounded-b-none focus-visible:outline-none cursor-pointer rounded disabled:text-bia-coolgrey peer ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selected === null || selected === void 0 ? void 0 : selected.label, readOnly: true, id: id, disabled: disabled }),
-            React.createElement("div", { className: "absolute inset-y-0 pl-3 flex items-center pointer-events-none text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? (React.createElement(TbChevronUp, { className: "" })) : (React.createElement(TbChevronDown, { className: "" }))),
-            isOpen && (React.createElement("div", { className: "absolute border w-full bg-primary-white border-bia-grey-dark-10 rounded-b-md shadow-lg z-10" }, options.map(function (option) {
+        React.createElement("div", { className: "group relative w-full" },
+            React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selected === null || selected === void 0 ? void 0 : selected.label, readOnly: true, id: id, disabled: disabled }, props)),
+            React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? (React.createElement(TbChevronUp, { className: "" })) : (React.createElement(TbChevronDown, { className: "" }))),
+            isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg" }, options.map(function (option) {
                 var isSelected = selected && selected.id && option.id === selected.id;
-                return (React.createElement(DefaultDropdownItem, { label: option.label, caption: option.caption, size: validatedSize, isSelected: isSelected, onClick: function () {
+                return (React.createElement(DefaultDropdownItem, { label: option.label, size: validatedSize, isSelected: isSelected, onClick: function () {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
             })))),
-        React.createElement("span", { className: "desc text-primary-cool text-xs mt-2" }, descText)));
+        React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText)));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -1817,39 +1826,30 @@ SelectInput.defaultProps = {
 
 function SelectInputSimulation(_a) {
     var _b = _a.size, size = _b === void 0 ? 'md' : _b;
-    var _c = React.useState({
-        id: 1,
-        label: 'Mohammed Salah',
-        caption: 'Liverpool',
-    }), selected = _c[0], setSelected = _c[1];
+    var _c = React.useState(null), selected = _c[0], setSelected = _c[1];
     var optionData = [
         {
             id: 1,
             label: 'Mohammed Salah',
-            caption: 'Liverpool',
         },
         {
             id: 2,
             label: 'Cristiono Ronaldo',
-            caption: 'Manchester United',
         },
         {
             id: 3,
             label: 'Vinicius Junior',
-            caption: 'Real Madrid',
         },
         {
             id: 4,
             label: 'Lionel Messi',
-            caption: 'Paris Saint Germain',
         },
         {
             id: 5,
             label: 'Ricardo Kaka',
-            caption: 'AC Milan',
         },
     ];
-    return (React.createElement(SelectInput, { label: "Input Select", descText: "Deskripsi Input Select", options: optionData, selected: selected, setSelected: setSelected, size: size, id: "demo-id" }));
+    return (React.createElement(SelectInput, { label: "Input Select", descText: "Deskripsi Input Select", options: optionData, selected: selected, setSelected: setSelected, size: size, placeholder: '-- Select Player --', id: "demo-id" }));
 }
 
 var sizeConfig$4 = {
@@ -2501,7 +2501,7 @@ var iconOnlySizeConfig = {
     sm: 'p-[4px]',
     tn: 'p-[2px]',
 };
-var closeConfig = {
+var closeColorConfig = {
     default: 'bg-bia-grey-dark-30 text-primary-white',
     blue: 'bg-bia-white-transparent-50 text-bia-blue',
     teal: 'bg-bia-white-transparent-50 text-bia-teal',
@@ -2511,6 +2511,11 @@ var closeConfig = {
     black: 'bg-bia-white-transparent-50 text-primary-black',
     white: 'bg-bia-grey-dark-30 text-primary-white',
 };
+var closeSizeConfig = {
+    md: 'w-[18px] h-[18px] text-[14px]',
+    sm: 'w-[12px] h-[12px] text-[9.33px]',
+    tn: 'w-[12px] h-[12px] text-[9.33px]',
+};
 var rightPaddingConfig = {
     md: 'pr-[8px]',
     sm: 'pr-[5px]',
@@ -2565,24 +2570,27 @@ var TagLabel = function (_a) {
     var maxWidthStyle = !isBlock ? maxWidth + 'px' : '';
     var textClass = isBlock ? 'text-center' : 'text-left';
     var containerClass = "".concat(sizeClass, " ").concat(colorClass, " ").concat(roundedClass, " ").concat(isCloseableClass, " ").concat(blockclass);
-    var closeClass = validatedColor === 'custom'
+    var closeColor = validatedColor === 'custom'
         ? isDark
             ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
             : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
-        : closeConfig[validatedColor];
+        : 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: {
             maxWidth: maxWidthStyle,
         } }, props),
-        React.createElement("div", { style: {
+        leftIcon && (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]" }))))));
+            }, 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 === '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) },
+            React.createElement(TbX, null))))));
 };
 TagLabel.defaultProps = {
     variant: 'default',