bianic-ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/cjs/index.js

@@ -377,7 +377,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var radiusConfig = {
+var radiusConfig$1 = {
     default: {
         sm: 'rounded-radius-sm focus-visible:rounded-radius-sm',
         md: 'rounded-radius-md focus-visible:rounded-radius-md',
@@ -404,7 +404,7 @@ var iconOnlySizeConfig$1 = {
     tn: 'p-[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$1 = {
+var variantConfig$2 = {
     default: "\n  text-primary-black \n  bg-bia-grey \n  active:bg-bia-grey-dark-10  \n  hover:bg-bia-grey-hover \n  disabled:bg-bia-grey-disabled \n  disabled:text-bia-grey-active \n  disabled:cursor-not-allowed \n  focus-visible:outline \n  focus-visible:outline-offset-0 \n  focus-visible:outline-bia-blue-light-50\n  focus-visible:outline-[3px] \n  focus-visible:rounded-md\n  shadow-[0px_6px_18px_1px_#BCC7ED80] ".concat(shadow),
     primary: "\n  text-primary-white \n  bg-bia-blue \n  active:bg-bia-blue-dark-10 \n  hover:bg-bia-blue-hover \n  disabled:bg-bia-blue-disabled \n  disabled:text-bia-blue-light-90 \n  disabled:cursor-not-allowed \n  focus-visible:outline\n  focus-visible:outline-offset-0\n  focus-visible:outline-bia-blue-light-50 \n  focus-visible:outline-[3px] \n  focus-visible:rounded-md\n  shadow-bia-blue-disabled ".concat(shadow),
     info: "\n  text-primary-white \n  bg-bia-teal \n  active:bg-bia-teal-dark-10 \n  hover:bg-bia-teal-hover \n  disabled:bg-bia-teal-light-50 \n  disabled:text-bia-teal-light-90 \n  disabled:cursor-not-allowed \n  focus-visible:outline \n  focus-visible:outline-offset-0\n  focus-visible:outline-bia-teal-light-50 \n  focus-visible:outline-[3px] \n  focus-visible:rounded-md \n  shadow-bia-teal-disabled ".concat(shadow),
@@ -449,7 +449,7 @@ function Button(_a) {
     var sizeClass = label
         ? 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  ");
+    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: "button flex justify-center items-center font-semibold ".concat(classString), disabled: disabled }, props),
         childrenElement(iconLeft || left),
         childrenElement(label),
@@ -565,7 +565,7 @@ Badge.defaultProps = {
     color: undefined,
 };
 
-var variantConfig = {
+var variantConfig$1 = {
     black: {
         bg: 'bg-primary-black',
         active: 'active:bg-bia-coolgrey-dark-30 active:rounded-sm',
@@ -601,11 +601,11 @@ var variantConfig = {
 function Banner(_a) {
     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) },
+        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$1[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" }, 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) })))))));
+                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$1[variant].focus), type: "button", onClick: function () { return onClose(false); } },
+                    React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig$1[variant].hover, " ").concat(variantConfig$1[variant].active) })))))));
     }
 }
 Banner.defaultProps = {
@@ -2029,7 +2029,7 @@ function SegmentButtonSimulation(_a) {
 }
 
 function Modal(_a) {
-    var size = _a.size, title = _a.title, open = _a.open, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "onClose"]);
+    var size = _a.size, title = _a.title, open = _a.open, zIndex = _a.zIndex, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose"]);
     var modalSize;
     if (size === 'sm') {
         modalSize = 'w-[300px]';
@@ -2051,12 +2051,12 @@ function Modal(_a) {
     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: "fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
+            React.createElement("div", { className: "modal flex flex-col gap-[20px] rounded-[5px] bg-white 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 () { return onClose(); } },
-                        React.createElement(TbX, { className: "text-bia-coolgrey text-[14px]" }))),
+                    React.createElement("div", { className: " w-[260px] text-wrap font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
+                    React.createElement("button", { type: "button", title: "button", className: "flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-radius-full bg-bia-grey-light-50 hover:bg-bia-grey-light-30", onClick: function () { return onClose(); } },
+                        React.createElement(TbX, { className: "text-[14px] text-bia-coolgrey" }))),
                 React.createElement("div", { className: "flex flex-col gap-[20px]" }, rest.children))));
     }
     return null;
@@ -2401,6 +2401,60 @@ Tab.defaultProps = {
     card: false,
 };
 
+var radiusConfig = {
+    none: '',
+    all: 'rounded-radius-sm',
+    top: 'rounded-t-radius-sm',
+    right: 'rounded-tr-radius-sm',
+    left: 'rounded-tl-radius-sm',
+};
+var variantConfig = {
+    default: 'py-[7px] ps-[15px] pe-[10px] gap-[10px]',
+    alternative: 'pt-[4px] pb-[4.8px] px-[20px] relative',
+};
+var defaultConfigs = {
+    true: 'cursor-default bg-bia-grey-light-80 hover:bg-bia-coolgrey-light-90 text-primary-black ',
+    false: 'cursor-pointer bg-bia-grey hover:bg-bia-grey-light-50 text-bia-coolgrey-dark-10',
+};
+var defaultButtonConfigs = {
+    true: 'text-primary-black',
+    false: 'text-primary-black',
+};
+var alternativeConfigs = {
+    true: 'cursor-default bg-primary-white text-primary-black overflow-hidden',
+    false: 'cursor-pointer bg-bia-verdantgreen-dark-40 hover:bg-bia-verdantgreen-dark-50 text-primary-white overflow-hidden',
+};
+var alternativeButtonConfigs = {
+    true: 'absolute px-[5px] opacity-0 hover:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-primary-white from-50% to-primary-white/[.0] inset-y-0 right-0',
+    false: ' absolute px-[5px] opacity-0 hover:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-bia-verdantgreen-dark-50 from-50% to-bia-verdantgreen-dark-50/[.0] inset-y-0 right-0',
+};
+
+var TabMenu = function (_a) {
+    var variant = _a.variant, _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.rounded, rounded = _c === void 0 ? 'none' : _c, _d = _a.isActive, isActive = _d === void 0 ? false : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, rest = __rest(_a, ["variant", "text", "rounded", "isActive", "onClose"]);
+    // valiated parameter
+    var validatedVariant = validUnion(variant, [
+        'default',
+        'alternative',
+    ]);
+    var validatedRadius = validUnion(rounded, ['none', 'all', 'top', 'right', 'left']);
+    var usedBaseConfig;
+    var usedButtonConfig;
+    if (validatedVariant === 'alternative') {
+        usedBaseConfig = alternativeConfigs[isActive];
+        usedButtonConfig = alternativeButtonConfigs[isActive];
+    }
+    else {
+        usedBaseConfig = defaultConfigs[isActive];
+        usedButtonConfig = defaultButtonConfigs[isActive];
+    }
+    return (React.createElement("div", __assign({ className: "tab-menu flex flex-row text-size-tiny font-normal ".concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(usedBaseConfig, " ") }, rest),
+        text,
+        React.createElement("div", { className: "grid ".concat(usedButtonConfig, " ") },
+            validatedVariant === 'alternative' && React.createElement("div", { className: "order-first" }),
+            React.createElement("button", { className: "order-last", onClick: onClose },
+                React.createElement(TbX, { size: 14 })))));
+};
+
 var colAlign = {
     middle: 'justify-center',
     right: 'justify-end',
@@ -2735,6 +2789,7 @@ exports.SelectInputSimulation = SelectInputSimulation;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.Tab = Tab;
+exports.TabMenu = TabMenu;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCol = TableCol;