bianic-ui 0.5.18 → 1.0.0-beta.2

package/dist/esm/index.js

@@ -527,19 +527,17 @@ var variantConfig = {
 };
 
 function Banner(_a) {
-    var children = _a.children, _b = _a.isCloseable, isCloseable = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? 'black' : _c, isShow = _a.isShow, setIsShow = _a.setIsShow;
-    if (isShow) {
+    var children = _a.children, _b = _a.closeable, closeable = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? 'black' : _c, open = _a.open, onClose = _a.onClose;
+    if (open) {
         return (React.createElement("div", { className: "w-full h-[42px] py-[22px] text-size-base font-semibold flex justify-center items-center text-white relative ".concat(variantConfig[variant].bg) },
             React.createElement("div", { className: "w-full flex justify-center items-center gap-[10px]" },
                 React.createElement("div", { className: "font-semibold font-segoe text-[14px] leading-[21px]" }, children),
-                React.createElement("div", { className: "flex items-center justify-center" }, isCloseable && (React.createElement("button", { className: "ml-auto text-xs outline-2 text-white absolute right-4 w-[18px] h-[18px] flex justify-center items-center ".concat(variantConfig[variant].focus), type: "button", onClick: function () {
-                        setIsShow(false);
-                    } },
+                React.createElement("div", { className: "flex items-center justify-center" }, closeable && (React.createElement("button", { className: "ml-auto text-xs outline-2 text-white absolute right-4 w-[18px] h-[18px] flex justify-center items-center ".concat(variantConfig[variant].focus), type: "button", onClick: function () { return onClose(false); } },
                     React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig[variant].hover, " ").concat(variantConfig[variant].active) })))))));
     }
 }
 Banner.defaultProps = {
-    isCloseable: true,
+    closeable: true,
     variant: 'black',
 };
 
@@ -1461,8 +1459,8 @@ function ValidationIcon(_a) {
 }
 
 function PasswordIcon(_a) {
-    var isShow = _a.isShow, _b = _a.showHandler, showHandler = _b === void 0 ? function () { } : _b, iconSize = _a.iconSize, isDisabled = _a.isDisabled;
-    var iconColor = isDisabled ? '#8b8ba6' : '#5E5EEA';
+    var isShow = _a.isShow, _b = _a.showHandler, showHandler = _b === void 0 ? function () { } : _b, iconSize = _a.iconSize, disabled = _a.disabled;
+    var iconColor = disabled ? '#8b8ba6' : '#5E5EEA';
     if (isShow) {
         return (React.createElement(TbEye, { onClick: function () { return showHandler(false); }, style: {
                 fontSize: iconSize,
@@ -1473,7 +1471,7 @@ function PasswordIcon(_a) {
 }
 
 function TextInput(_a) {
-    var descText = _a.descText, _b = _a.isDisabled, isDisabled = _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 ? '' : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l;
+    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 ? '' : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l;
     var _m = useState(false), isShow = _m[0], setIsShow = _m[1];
     var _o = styleConfig[variant], fieldStyle = _o.fieldStyle, iconStyle = _o.iconStyle;
     var _p = sizeConfig$9[size], iconSize = _p.iconSize, fieldSize = _p.fieldSize, iconPosition = _p.iconPosition;
@@ -1482,35 +1480,35 @@ function TextInput(_a) {
         typeVariant = isShow ? 'text' : 'password';
     var isExistValidation = isValid !== null;
     var descColor = 'text-primary-cool';
-    if (!isDisabled && isExistValidation && isValid)
+    if (!disabled && isExistValidation && isValid)
         descColor = 'text-bia-green';
-    if (!isDisabled && isExistValidation && !isValid)
+    if (!disabled && isExistValidation && !isValid)
         descColor = 'text-bia-red';
     var bottomBorderColor = 'hover:border-b-bia-blue focus:border-b-bia-blue';
-    if (!isDisabled && isExistValidation && isValid)
+    if (!disabled && isExistValidation && isValid)
         bottomBorderColor = 'border-b-bia-green';
-    if (!isDisabled && isExistValidation && !isValid)
+    if (!disabled && isExistValidation && !isValid)
         bottomBorderColor = 'border-b-bia-red';
     var iconElement = null;
-    if (!isDisabled && isExistValidation)
+    if (!disabled && isExistValidation)
         iconElement = React.createElement(ValidationIcon, { isValid: isValid, iconSize: iconSize });
     if (icon)
         iconElement = icon;
     if (variant === 'password') {
-        iconElement = (React.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, isDisabled: isDisabled }));
+        iconElement = (React.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, disabled: disabled }));
     }
     return (React.createElement("div", { className: "field-group w-full flex flex-col gap-y-2" },
         React.createElement("label", { htmlFor: id, className: "label text-xs font-semibold" },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "w-full relative" },
-            React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80  disabled:text-bia-grey-active read-only:border-bia-grey-light-50 read-only:pointer-events-none w-full border border-bia-grey-dark-10 disabled:border-bia-grey-dark-10 focus:rounded-b-none hover:rounded-b-none focus-visible:outline-none rounded ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: isDisabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); } }),
+            React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80  disabled:text-bia-grey-active read-only:border-bia-grey-light-50 read-only:pointer-events-none w-full border border-bia-grey-dark-10 disabled:border-bia-grey-dark-10 focus:rounded-b-none hover:rounded-b-none focus-visible:outline-none rounded ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); } }),
             React.createElement("div", { className: "absolute inset-y-0 pl-3 flex items-center ".concat(iconStyle, " ").concat(iconPosition) }, iconElement)),
         React.createElement("span", { className: "desc text-xs ".concat(descColor) }, descText)));
 }
 TextInput.defaultProps = {
     descText: '',
-    isDisabled: false,
+    disabled: false,
     icon: null,
     id: '',
     size: 'md',
@@ -1545,20 +1543,20 @@ var sizeConfig$8 = {
 };
 
 function Radio(_a) {
-    var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.checked, checked = _e === void 0 ? false : _e;
+    var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.checked, checked = _e === void 0 ? false : _e;
     var _f = sizeConfig$8[size], checkSize = _f.checkSize, labelSize = _f.labelSize;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
-            React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: isDisabled }),
+            React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
             React.createElement("div", { className: "check-icon flex text-bia-grey group justify-center border-2 border-primary-white  peer-disabled:bg-bia-grey-light-80 peer-disabled:border-transparent peer-disabled:peer-checked:border-primary-white peer-checked:peer-disabled:bg-bia-blue-disabled peer-checked:hover:border-bia-blue-hover peer-checked:bg-bia-blue peer-checked:peer-hover:bg-bia-blue-hover outline-2 peer-checked:hover:outline-bia-blue-hover outline-bia-blue rounded-full w-full h-full z-1" })),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: isDisabled ? '#8C8CA6' : '#2f2f2f' } }, label)));
+        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, label)));
 }
 Radio.defaultProps = {
     label: '',
     size: 'md',
     id: '',
     onClick: function () { },
-    isDisabled: false,
+    disabled: false,
     checked: false,
 };
 
@@ -1708,7 +1706,7 @@ DefaultDropdownItem.defaultProps = {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.isDisabled, isDisabled = _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.isRequired, isRequired = _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;
     var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
     var _f = sizeConfig$5[size], searchSize = _f.searchSize, iconSize = _f.iconSize;
     var inputRef = useRef(null);
@@ -1726,9 +1724,9 @@ function SelectInput(_a) {
     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" },
             label,
-            isRequired && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
+            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: isDisabled }),
+            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) {
                 var isSelected = selected && selected.id && option.id === selected.id;
@@ -1741,11 +1739,11 @@ function SelectInput(_a) {
 }
 SelectInput.defaultProps = {
     descText: '',
-    isDisabled: false,
+    disabled: false,
     id: '',
     size: 'md',
     label: '',
-    isRequired: false,
+    required: false,
     selected: {},
     setSelected: function () { },
 };
@@ -1911,33 +1909,33 @@ function SegmentButtonSimulation(_a) {
     var SegmentButtonArr = [
         {
             content: 'Segment Button A',
-            isDisabled: false,
+            disabled: false,
             handleClick: function (index) { return setActiveButton(index); },
         },
         {
             content: 'Segment Button B',
-            isDisabled: false,
+            disabled: false,
             handleClick: function (index) { return setActiveButton(index); },
         },
         {
             content: 'Segment Button C (Disabled)',
-            isDisabled: true,
+            disabled: true,
             handleClick: function (index) { return setActiveButton(index); },
         },
         {
             content: 'Segment Button D',
-            isDisabled: false,
+            disabled: false,
             handleClick: function (index) { return setActiveButton(index); },
         },
         {
             content: 'Segment Button E',
-            isDisabled: false,
+            disabled: false,
             handleClick: function (index) { return setActiveButton(index); },
         },
     ];
     return (React.createElement(SegmentButtonGroup, null, SegmentButtonArr.map(function (_a, index) {
-        var content = _a.content, isDisabled = _a.isDisabled, handleClick = _a.handleClick;
-        return (React.createElement(SegmentButtonItem, { active: activeButton === index, size: size, disabled: isDisabled, onClick: function () { return handleClick(index); } },
+        var content = _a.content, disabled = _a.disabled, handleClick = _a.handleClick;
+        return (React.createElement(SegmentButtonItem, { selected: activeButton === index, size: size, disabled: disabled, onClick: function () { return handleClick(index); } },
             React.createElement("div", { className: "flex items-center justify-center" },
                 React.createElement("div", { className: "mt-[1px] mr-[5px]" },
                     React.createElement(TbCheck$1, null)),
@@ -1946,7 +1944,7 @@ function SegmentButtonSimulation(_a) {
 }
 
 function Modal(_a) {
-    var size = _a.size, title = _a.title, isShow = _a.isShow, setIsShow = _a.setIsShow, rest = __rest(_a, ["size", "title", "isShow", "setIsShow"]);
+    var size = _a.size, title = _a.title, open = _a.open, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "onClose"]);
     var modalSize;
     if (size === 'sm') {
         modalSize = 'w-[300px]';
@@ -1962,19 +1960,17 @@ function Modal(_a) {
     }
     var handleClose = function (e) {
         if (e && e.target && e.target.id === 'wrapper') {
-            setIsShow(false);
+            onClose();
         }
     };
-    if (isShow) {
+    if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
         React.createElement("div", { className: "fixed inset-0 flex justify-center items-center bg-bia-black-transparent-75", id: "wrapper", onClick: handleClose },
             React.createElement("div", { className: "modal flex flex-col gap-[20px] bg-white rounded-[5px] p-[20px] ".concat(modalSize) },
                 React.createElement("div", { className: "flex justify-between" },
                     React.createElement("div", { className: " font-humnst777 font-bold text-[18px] leading-[21.85px] text-primary-black w-[260px] text-wrap" }, title),
-                    React.createElement("button", { type: "button", title: "button", className: "w-[22px] h-[22px] rounded-radius-full flex items-center justify-center bg-bia-grey-light-50 hover:bg-bia-grey-light-30 cursor-pointer", onClick: function () {
-                            setIsShow(false);
-                        } },
+                    React.createElement("button", { type: "button", title: "button", className: "w-[22px] h-[22px] rounded-radius-full flex items-center justify-center bg-bia-grey-light-50 hover:bg-bia-grey-light-30 cursor-pointer", onClick: function () { return onClose(); } },
                         React.createElement(TbX, { className: "text-bia-coolgrey text-[14px]" }))),
                 React.createElement("div", { className: "flex flex-col gap-[20px]" }, rest.children))));
     }
@@ -2094,16 +2090,16 @@ var classConfig$1 = {
 };
 
 function Popover(_a) {
-    var children = _a.children, content = _a.content, _b = _a.delay, delay = _b === void 0 ? 400 : _b, _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d, open = _a.open, setIsActive = _a.setIsActive;
+    var children = _a.children, content = _a.content, _b = _a.delay, delay = _b === void 0 ? 400 : _b, _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d, open = _a.open, setOpen = _a.setOpen;
     var timeout;
     var showPopover = function () {
         timeout = setTimeout(function () {
-            setIsActive(true);
+            setOpen(true);
         }, delay);
     };
     var hidePopover = function () {
         clearInterval(timeout);
-        setIsActive(false);
+        setOpen(false);
     };
     var _e = classConfig$1[direction], tooltipContainer = _e.tooltipContainer, triangleContainer = _e.triangleContainer, triangleShape = _e.triangleShape;
     return (React.createElement("div", { className: "Popover-Wrapper relative block w-fit h-fit", onMouseEnter: showPopover, onMouseLeave: hidePopover },
@@ -3133,7 +3129,7 @@ CloseIcon.defaultProps = {
 };
 
 function TagLabel(_a) {
-    var children = _a.children, _b = _a.closeHandler, closeHandler = _b === void 0 ? undefined : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.variant, variant = _d === void 0 ? 'label' : _d, isShow = _a.isShow, color = _a.color, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon;
+    var children = _a.children, _b = _a.closeHandler, closeHandler = _b === void 0 ? undefined : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.variant, variant = _d === void 0 ? 'label' : _d, open = _a.open, color = _a.color, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon;
     var config = TagLabelConfig[color][size][variant];
     var configIcon = TagLabelConfig[color][size];
     var configbg = config.bg;
@@ -3205,7 +3201,7 @@ function TagLabel(_a) {
     else {
         outlineColor = 'outline-white';
     }
-    if (!isShow)
+    if (!open)
         return null;
     return (React.createElement("div", { className: "flex items-center font-segoe font-normal justify-center ".concat(configradius, " ").concat(configtext, " ").concat(configbg, " ").concat(configpadding) },
         variant === 'icon' ? (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[size]) }, leftIcon || renderIcon(configX))) : (React.createElement(React.Fragment, null,
@@ -3218,7 +3214,7 @@ function TagLabel(_a) {
 TagLabel.defaultProps = {
     variant: 'default',
     size: 'sm',
-    isShow: true,
+    open: true,
     closeHandler: function () { },
     rightIcon: null,
     leftIcon: null,