bianic-ui 2.10.0-beta.0 → 2.10.0-beta.2

package/dist/cjs/index.js

@@ -456,7 +456,7 @@ var radiusConfig$1 = {
         tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
-var sizeConfig$d = {
+var sizeConfig$e = {
     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 ',
@@ -540,10 +540,10 @@ var Button = React.forwardRef(function (_a, ref) {
     }
     var sizingRules;
     if (variant.includes('link')) {
-        sizingRules = "".concat(sizeConfig$d[validatedSize]);
+        sizingRules = "".concat(sizeConfig$e[validatedSize]);
     }
     else {
-        sizingRules = "".concat(sizeConfig$d[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
+        sizingRules = "".concat(sizeConfig$e[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
     var hasDoubleIcon = iconRight && iconLeft;
     var isVariantLink = variant.includes('link')
@@ -723,6 +723,38 @@ Banner.defaultProps = {
     variant: 'black',
 };
 
+var sizeConfig$d = {
+    md: 'h-[16px] text-[12px]',
+    sm: 'h-[15px] text-[10px]',
+};
+var colorConfig$3 = {
+    blue: 'bg-bia-blue-light-90 text-bia-blue-dark-10',
+    brown: 'bg-bia-brown-light-90 text-bia-brown-dark-10',
+    grey: 'bg-bia-coolgrey-light-80 text-bia-black', //
+    crayola: 'bg-bia-crayola-light-90 text-bia-crayola-dark-10',
+    green: 'bg-bia-green-light-90 text-bia-green-dark-10',
+    marguirette: 'bg-bia-margueriteblue-light-90 text-bia-margueriteblue-dark-10',
+    orange: 'bg-bia-orange-light-90 text-bia-orange-dark-10',
+    pink: 'bg-bia-pink-light-90 text-bia-pink-dark-10',
+    red: 'bg-bia-red-light-90 text-bia-red-dark-10',
+    sky: 'bg-bia-sky-light-90 text-bia-sky-dark-10',
+    teal: 'bg-bia-teal-light-90 text-bia-teal-dark-10',
+    verdant: 'bg-bia-verdantgreen-light-90 text-bia-verdantgreen-dark-10',
+    yellow: 'bg-bia-yellow-light-90 text-bia-yellow-dark-10',
+    black: 'bg-bia-black text-bia-white',
+    white: 'bg-bia-white text-bia-black border border-bia-grey',
+};
+
+var MonospaceBadge = function (_a) {
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.color, color = _c === void 0 ? 'blue' : _c;
+    var sizeClass = sizeConfig$d[size];
+    var colorClass = colorConfig$3[color];
+    var fontPosition = size === 'sm' ? 'top-[1px]' : '';
+    var variantClass = "".concat(sizeClass, " ").concat(colorClass);
+    return (React.createElement("span", { className: "relative -top-[1px] inline-flex w-fit items-center justify-center rounded-[2px] px-[3px] ".concat(variantClass) },
+        React.createElement("span", { className: "font-sans-code relative ".concat(fontPosition) }, text)));
+};
+
 function Biaenergi$6() {
     return (React.createElement("div", { className: "" },
         React.createElement("svg", { width: "235", height: "74", viewBox: "0 0 235 74", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -7762,6 +7794,189 @@ ResizeableDiv.defaultProps = {
     position: 'left',
 };
 
+var SidebarContainer = function (_a) {
+    _a.bgColor; var children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c; _a.activeItem;
+    var minWidth = isMinimized ? 'min-w-0' : 'min-w-[285px]';
+    return (React.createElement("div", { className: "sidebar-container flex h-full flex-col justify-start bg-[#64747D] py-[30px] ".concat(minWidth) }, React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, {
+                isMinimized: isMinimized,
+            })
+            : child;
+    })));
+};
+
+var colorConfig = {
+    default: 'bg-bia-grey-light-50 text-primary-black',
+    blue: 'bg-bia-blue text-primary-white',
+    teal: 'bg-bia-teal text-primary-white',
+    green: 'bg-bia-green text-primary-white',
+    // yellow: 'bg-bia-yellow text-primary-black',
+    orange: 'bg-bia-orange text-primary-white',
+    red: 'bg-bia-red text-primary-white',
+    black: 'bg-primary-black text-primary-white',
+    white: 'bg-primary-white text-primary-black border border-primary-black',
+};
+var sizeConfig$1 = {
+    md: 'px-[10px] py-[7px] h-[34px] text-size-base',
+    sm: 'px-[10px] py-[4px] h-[22px] text-size-sm',
+    tn: 'px-[8px] py-[2px] h-[18px] text-size-sm',
+};
+var iconOnlySizeConfig = {
+    md: 'p-[7px]',
+    sm: 'p-[4px]',
+    tn: 'p-[2px]',
+};
+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',
+    green: 'bg-bia-white-transparent-50 text-bia-green',
+    yellow: 'bg-bia-white-transparent-50 text-bia-yellow',
+    red: 'bg-bia-white-transparent-50 text-bia-red',
+    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]',
+    tn: 'pr-[3px]',
+};
+
+var colorUnion = [
+    'default',
+    'blue',
+    'teal',
+    'green',
+    'orange',
+    'red',
+    'black',
+    'white',
+    'custom',
+];
+var sizeUnion = ['md', 'sm', 'tn'];
+var variantUnion = ['label', 'icon', 'closeable'];
+var TagLabel = function (_a) {
+    var color = _a.color, _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, closeHandler = _a.closeHandler, open = _a.open, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon; _a.left; _a.right; var _c = _a.bgColor, bgColor = _c === void 0 ? 'grey-light-50' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'black' : _d, outlineColor = _a.outlineColor, isBlock = _a.isBlock, maxWidth = _a.maxWidth, isDark = _a.isDark; _a.style; var props = __rest(_a, ["color", "size", "variant", "closeHandler", "open", "text", "leftIcon", "rightIcon", "left", "right", "bgColor", "textColor", "outlineColor", "isBlock", "maxWidth", "isDark", "style"]);
+    var validatedColor = validUnion(color, colorUnion);
+    var validatedSize = validUnion(size, sizeUnion);
+    var validatedVariant = validUnion(variant, variantUnion);
+    var containerRef = React.useRef(null);
+    var _e = React.useState(null), sizeCount = _e[0], setSizeCount = _e[1];
+    React.useEffect(function () {
+        if (variant === 'icon') {
+            // Get the size of the icon
+            // and set the size of the container
+            // to the one with the biggest size (width or height icon)
+            // in order to make the container square
+            var rect = containerRef.current.getBoundingClientRect();
+            var width = rect.width;
+            var height = rect.height;
+            if (width > height)
+                setSizeCount(width);
+            else
+                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$1[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];
+    var blockclass = isBlock && validatedVariant !== 'icon' ? 'w-full' : "w-fit";
+    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 closeColor = validatedColor === 'custom'
+        ? isDark
+            ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
+            : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
+        : closeColorConfig[validatedColor];
+    var closeClass = "".concat(closeColor, " ").concat(closeSizeConfig[validatedSize]);
+    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: {
+                width: sizeCount + 'px',
+                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-[1px] ".concat(textClass) }, text)),
+        validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "block" },
+            " ",
+            rightIcon,
+            " ")),
+        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 = {
+    variant: 'default',
+    size: 'sm',
+    open: true,
+    closeHandler: function () { },
+    leftIcon: null,
+    rightIcon: null,
+    left: null,
+    right: null,
+    bgColor: 'grey-light-50',
+    textColor: 'black',
+    isBlock: false,
+    maxWidth: 300,
+    isDark: false,
+};
+
+var SidebarItem = function (_a) {
+    var title = _a.title, icon = _a.icon, _b = _a.active, active = _b === void 0 ? false : _b, onClick = _a.onClick, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.isExpand, isExpand = _d === void 0 ? false : _d, notificationCount = _a.notificationCount, _e = _a.level, level = _e === void 0 ? 0 : _e;
+    var horizontalPadding = isMinimized ? 'px-[11px]' : 'pl-[30px] pr-[15px]';
+    var _f = React.useState(isExpand || false), isChildExpanded = _f[0], setIsChildExpanded = _f[1];
+    var hasChildren = !!children;
+    var chevronClass = hasChildren ? 'inline-block' : 'hidden';
+    var nextLevel = level + 1;
+    var buttonClass = level === 1 ? 'pl-[30px]' : level === 2 ? 'pl-[68px]' : '';
+    var isGrandChild = level === 2;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "sidebar-item relative flex h-fit items-center ".concat(horizontalPadding) },
+            isGrandChild && (React.createElement("div", { className: "relative left-[39px] h-full w-[1px] bg-bia-white" })),
+            React.createElement("div", { className: "group relative grow" },
+                !isMinimized && (React.createElement("button", { onClick: function () {
+                        if (hasChildren)
+                            setIsChildExpanded(function (prev) { return !prev; });
+                        else
+                            onClick === null || onClick === void 0 ? void 0 : onClick();
+                    }, className: "flex w-full min-w-fit grow items-center gap-x-2.5 p-2.5 ".concat(buttonClass) },
+                    React.isValidElement(icon)
+                        ? React.cloneElement(icon, {
+                            className: 'text-bia-white',
+                            size: '18',
+                        })
+                        : '',
+                    React.createElement(Text, { variant: "normal-text", className: "text-bia-white" }, title),
+                    React.createElement("div", { className: "ml-auto flex items-center gap-x-[5px]" },
+                        notificationCount !== undefined ? (React.createElement(TagLabel, { text: String(notificationCount), color: "white", size: "tn" })) : (''),
+                        React.createElement("button", { className: chevronClass }, isChildExpanded ? (React.createElement(TbChevronDown, { className: "text-bia-white", size: 18 })) : (React.createElement(TbChevronRight, { className: "text-bia-white", size: 18 })))))),
+                isMinimized && (React.createElement("button", { className: "flex items-center justify-center px-2.5 py-[11px] text-bia-white" }, icon)),
+                React.createElement("div", { className: "pointer-events-none absolute inset-0 rounded-radius-lg bg-black opacity-0 transition-opacity duration-200 group-hover:opacity-5 group-active:opacity-15" })),
+            active && (React.createElement("div", { className: "absolute right-0 ml-auto h-2/3 w-1 rounded-l-radius-md bg-bia-white" }))),
+        isChildExpanded &&
+            React.Children.map(children, function (child) {
+                return React.isValidElement(child)
+                    ? React.cloneElement(child, { level: nextLevel })
+                    : child;
+            })));
+};
+
 function Slider(_a) {
     var disabled = _a.disabled;
     var _b = React.useState(50), sliderValue = _b[0], setsliderValue = _b[1];
@@ -7908,7 +8123,7 @@ var TabMenu = React.forwardRef(function (props, ref) {
 });
 TabMenu.displayName = 'TabMenu';
 
-var sizeConfig$1 = {
+var sizeConfig = {
     md: 'px-2.5 py-[9px]',
     sm: 'px-2.5 py-[7px]',
     tn: 'px-2.5 py-[3px]',
@@ -7930,7 +8145,7 @@ function TableCell(_a) {
     var bgColorClass = "bg-bia-".concat(bgColor);
     var isHead = variant === 'head';
     var textConfig = isHead ? headTextConfig[size] : bodyTextConfig[size];
-    var columnClass = "p-0 ".concat(sizeConfig$1[size], " ").concat(bottomLined, " ").concat(bgColorClass, " ").concat(textConfig, " ").concat(className);
+    var columnClass = "p-0 ".concat(sizeConfig[size], " ").concat(bottomLined, " ").concat(bgColorClass, " ").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), children));
     }
@@ -7942,137 +8157,6 @@ TableCell.defaultProps = {
     variant: 'body',
 };
 
-var colorConfig = {
-    default: 'bg-bia-grey-light-50 text-primary-black',
-    blue: 'bg-bia-blue text-primary-white',
-    teal: 'bg-bia-teal text-primary-white',
-    green: 'bg-bia-green text-primary-white',
-    // yellow: 'bg-bia-yellow text-primary-black',
-    orange: 'bg-bia-orange text-primary-white',
-    red: 'bg-bia-red text-primary-white',
-    black: 'bg-primary-black text-primary-white',
-    white: 'bg-primary-white text-primary-black border border-primary-black',
-};
-var sizeConfig = {
-    md: 'px-[10px] py-[7px] h-[34px] text-size-base',
-    sm: 'px-[10px] py-[4px] h-[22px] text-size-sm',
-    tn: 'px-[8px] py-[2px] h-[18px] text-size-sm',
-};
-var iconOnlySizeConfig = {
-    md: 'p-[7px]',
-    sm: 'p-[4px]',
-    tn: 'p-[2px]',
-};
-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',
-    green: 'bg-bia-white-transparent-50 text-bia-green',
-    yellow: 'bg-bia-white-transparent-50 text-bia-yellow',
-    red: 'bg-bia-white-transparent-50 text-bia-red',
-    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]',
-    tn: 'pr-[3px]',
-};
-
-var colorUnion = [
-    'default',
-    'blue',
-    'teal',
-    'green',
-    'orange',
-    'red',
-    'black',
-    'white',
-    'custom',
-];
-var sizeUnion = ['md', 'sm', 'tn'];
-var variantUnion = ['label', 'icon', 'closeable'];
-var TagLabel = function (_a) {
-    var color = _a.color, _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, closeHandler = _a.closeHandler, open = _a.open, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon; _a.left; _a.right; var _c = _a.bgColor, bgColor = _c === void 0 ? 'grey-light-50' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'black' : _d, outlineColor = _a.outlineColor, isBlock = _a.isBlock, maxWidth = _a.maxWidth, isDark = _a.isDark; _a.style; var props = __rest(_a, ["color", "size", "variant", "closeHandler", "open", "text", "leftIcon", "rightIcon", "left", "right", "bgColor", "textColor", "outlineColor", "isBlock", "maxWidth", "isDark", "style"]);
-    var validatedColor = validUnion(color, colorUnion);
-    var validatedSize = validUnion(size, sizeUnion);
-    var validatedVariant = validUnion(variant, variantUnion);
-    var containerRef = React.useRef(null);
-    var _e = React.useState(null), sizeCount = _e[0], setSizeCount = _e[1];
-    React.useEffect(function () {
-        if (variant === 'icon') {
-            // Get the size of the icon
-            // and set the size of the container
-            // to the one with the biggest size (width or height icon)
-            // in order to make the container square
-            var rect = containerRef.current.getBoundingClientRect();
-            var width = rect.width;
-            var height = rect.height;
-            if (width > height)
-                setSizeCount(width);
-            else
-                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 = isCloseable && rightPaddingConfig[validatedSize];
-    var colorClass = validatedColor === 'custom'
-        ? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor, " border border-bia-").concat(borderColorRules)
-        : colorConfig[validatedColor];
-    var blockclass = isBlock && validatedVariant !== 'icon' ? 'w-full' : "w-fit";
-    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 closeColor = validatedColor === 'custom'
-        ? isDark
-            ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
-            : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
-        : closeColorConfig[validatedColor];
-    var closeClass = "".concat(closeColor, " ").concat(closeSizeConfig[validatedSize]);
-    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: {
-                width: sizeCount + 'px',
-                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-[1px] ".concat(textClass) }, text)),
-        validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "block" },
-            " ",
-            rightIcon,
-            " ")),
-        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 = {
-    variant: 'default',
-    size: 'sm',
-    open: true,
-    closeHandler: function () { },
-    leftIcon: null,
-    rightIcon: null,
-    left: null,
-    right: null,
-    bgColor: 'grey-light-50',
-    textColor: 'black',
-    isBlock: false,
-    maxWidth: 300,
-    isDark: false,
-};
-
 var colorConfigs = {
     default: 'bg-bia-black',
     info: 'bg-bia-teal',
@@ -8253,6 +8337,7 @@ exports.LiveSearch = LiveSearch;
 exports.MenuContainer = MenuContainer;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.MonospaceBadge = MonospaceBadge;
 exports.Notification = Notification;
 exports.P = P;
 exports.PaginationBar = PaginationBar;
@@ -8266,6 +8351,8 @@ exports.ResizeableDiv = ResizeableDiv;
 exports.SegmentButtonGroup = SegmentButtonGroup;
 exports.SegmentButtonItem = SegmentButtonItem;
 exports.SelectInput = SelectInput;
+exports.SidebarContainer = SidebarContainer;
+exports.SidebarItem = SidebarItem;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.Tab = Tab;