bianic-ui 2.2.0-beta.2 → 2.3.0

package/dist/cjs/index.js

@@ -103,6 +103,10 @@ function TbCircleCheckFilled (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M9 6l6 6l-6 6"},"child":[]}]})(props);
 }function TbChevronUp (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M6 15l6 -6l6 6"},"child":[]}]})(props);
+}function TbChevronsLeft (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M11 7l-5 5l5 5"},"child":[]},{"tag":"path","attr":{"d":"M17 7l-5 5l5 5"},"child":[]}]})(props);
+}function TbChevronsRight (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M7 7l5 5l-5 5"},"child":[]},{"tag":"path","attr":{"d":"M13 7l5 5l-5 5"},"child":[]}]})(props);
 }function TbCrop11 (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"},"child":[]}]})(props);
 }function TbDots (props) {
@@ -459,7 +463,7 @@ var minWidthConfig$1 = {
 var iconOnlySizeConfig$1 = {
     lg: 'py-[13px] h-[48px] w-[48px] flex items-center justify-center gap-[10px]',
     md: 'py-[11px] h-[40px] w-[40px] flex items-center justify-center gap-[5px]',
-    sm: 'py-[8px] h-[30px] w-[30px] flex items-center justify-center gap-[5px] ',
+    sm: 'py-[8px] h-[30px] w-[30px] flex items-center justify-center gap-[5px]',
     tn: 'py-[4px] h-[22px] w-[22px] flex items-center justify-center gap-[3px]',
 };
 var doubleIconSizeConfig = {
@@ -477,7 +481,7 @@ var variantConfig$2 = {
     warning: "text-primary-white bg-bia-orange active:bg-bia-orange-active hover:bg-bia-orange-hover disabled:bg-bia-orange-light-50 disabled:text-bia-orange-light-90 focus-visible:outline focus-visible:outline-offset-0 focus-visible:outline-bia-orange-light-50 focus-visible:outline-[3px] focus-visible:rounded-md shadow-bia-orange-disabled ".concat(shadow),
     danger: "text-primary-white bg-bia-red active:bg-bia-red-dark-10 hover:bg-bia-red-hover disabled:bg-bia-red-light-50 disabled:text-bia-red-light-90 focus-visible:outline focus-visible:outline-offset-0 focus-visible:outline-bia-red-light-50 focus-visible:outline-[3px] focus-visible:rounded-md shadow-bia-red-disabled ".concat(shadow),
     link: "text-bia-blue bg-transparent hover:text-bia-blue-hover disabled:text-bia-blue-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50",
-    subtle: "text-primary-cool bg-bia-grey-disabled active:bg-bia-grey-dark-10 hover:bg-bia-grey-hover disabled:bg-bia-grey-light-50disabled:text-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50 ",
+    subtle: "text-primary-cool bg-bia-grey-light-50 active:bg-bia-grey-dark-10 hover:bg-bia-grey-hover disabled:bg-bia-grey-light-50 disabled:text-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50 ",
     'subtle-link': "text-bia-coolgrey bg-transparent active:text-bia-blue-dark-10 hover:text-bia-blue-light-10 disabled:text-bia-coolgrey-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50 ",
     'default-outlined': "text-primary-black bg-primary-white border-bia-coolgrey border-solid active:bg-bia-coolgrey-light-90 active:border-bia-coolgrey-active hover:border-bia-coolgrey-hover border disabled:bg-primary-white disabled:border-[1px]disabled:border-bia-coolgrey-disabled disabled:text-bia-coolgrey-disabled focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-coolgrey-light-50 focus-visible:border-none",
     'primary-outlined': "bg-primary-white border border-bia-blue active:text-bia-blue-active active:bg-bia-blue-pastel active:border-bia-blue-active hover:text-bia-blue-hover hover:border-bia-blue-hover disabled:border-[1px]disabled:border-bia-blue-disabled disabled:text-bia-blue-disabled focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-bia-blue-disabled focus-visible:outline-[3px] focus-visible:rounded-md text-bia-blue focus-visible:border-none",
@@ -1555,6 +1559,27 @@ var ContextualButton = React.forwardRef(function (_a, ref) {
             actionElement))));
 });
 
+var config$2 = {
+    'dark-background': 'bg-white hover:bg-bia-grey-light-90 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-80',
+    'light-background': 'bg-bia-grey-light-90 hover:bg-bia-grey-light-80 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-70',
+    'outline-light-background': 'bg-white border border-bia-grey-light-40 hover:bg-bia-grey-light-90 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-80',
+};
+
+var Card = function (_a) {
+    var children = _a.children, disabled = _a.disabled, variant = _a.variant;
+    var base = config$2[variant || 'dark-background'];
+    var removeStateClasses = function (cls) {
+        return cls
+            .replace(/\b(?:hover|active|focus-visible|focus):[^\s]+/g, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+    };
+    var cardClassName = disabled
+        ? "".concat(removeStateClasses(base), " cursor-not-allowed")
+        : base;
+    return (React.createElement("button", { disabled: disabled, "aria-disabled": disabled, className: "rounded-radius-md p-5 ".concat(cardClassName), tabIndex: disabled ? -1 : 0 }, children));
+};
+
 function Color() {
     var colors = [
         {
@@ -1696,7 +1721,7 @@ var FileTree = function (_a) {
     return (React.createElement("div", { className: "file-tree" },
         data.map(function (_a, index) {
             var label = _a.label, nodes = _a.nodes, props = __rest(_a, ["label", "nodes"]);
-            return (React.createElement(TreeItem, __assign({ label: label, nodes: nodes, key: index, color: color, chevronColor: chevronColor, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDown }, props)));
+            return (React.createElement(TreeItem$1, __assign({ label: label, nodes: nodes, key: index, color: color, chevronColor: chevronColor, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDown }, props)));
         }),
         isOpenContMenu && (React.createElement("div", { style: menuStyle, ref: popupRef, className: "bianic-filetree-contextmenu" }, React.isValidElement(contextMenu)
             ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
@@ -1706,7 +1731,7 @@ var FileTree = function (_a) {
                 })
             : contextMenu))));
 };
-var TreeItem = function (_a) {
+var TreeItem$1 = function (_a) {
     var label = _a.label, nodes = _a.nodes, color = _a.color, chevronColor = _a.chevronColor, handleRightClick = _a.handleRightClick, onMouseDownTreeItem = _a.onMouseDownTreeItem, props = __rest(_a, ["label", "nodes", "color", "chevronColor", "handleRightClick", "onMouseDownTreeItem"]);
     var treeRef = React.useRef(null);
     var _b = React.useState(false), isExpand = _b[0], setIsExpand = _b[1];
@@ -1747,10 +1772,106 @@ var TreeItem = function (_a) {
                 React.createElement(Text, { variant: "small-text" }, label))),
         isExpand && nodes && nodes.length > 0 && (React.createElement("div", { className: "ml-4" }, nodes.map(function (_a, index) {
             var label = _a.label, nodes = _a.nodes, props = __rest(_a, ["label", "nodes"]);
-            return (React.createElement(TreeItem, __assign({ label: label, nodes: nodes, key: index, color: color, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDownTreeItem }, props)));
+            return (React.createElement(TreeItem$1, __assign({ label: label, nodes: nodes, key: index, color: color, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDownTreeItem }, props)));
         })))));
 };
 
+var TreeItem = function (_a) {
+    var data = _a.data, expandedData = _a.expandedData, setExpandedData = _a.setExpandedData, dataMap = _a.dataMap, activeUnitId = _a.activeUnitId, handleChevronClick = _a.handleChevronClick, handleRightClick = _a.handleRightClick, handleCLick = _a.handleCLick;
+    var isExpanded = !!expandedData.get(data.id);
+    var toogleExpand = function () {
+        var isCurrentlyExpanded = !!expandedData.get(data.id);
+        // create a new Map based on the existing one
+        var newExpandedState = new Map(expandedData);
+        if (isCurrentlyExpanded) {
+            // Logic to collapse this data and all its descendants
+            var collapseDescendants_1 = function (parent) {
+                newExpandedState.set(parent.id, false);
+                if (parent.children && parent.children.length > 0)
+                    parent.children.forEach(function (child) { return collapseDescendants_1(child); });
+            };
+            collapseDescendants_1(data);
+        }
+        else {
+            // Logic to expand this data and all its ancestors
+            var current = data;
+            while (current) {
+                newExpandedState.set(current.id, true);
+                current = dataMap[current.parent];
+            }
+        }
+        setExpandedData(newExpandedState);
+    };
+    var clickItemHandler = function () {
+        if (data.children && !isExpanded)
+            toogleExpand();
+        // forward selection event to optional handler; cast is used because this is a click callback without a MouseEvent
+        handleCLick === null || handleCLick === void 0 ? void 0 : handleCLick(data);
+    };
+    var chevronClickHandler = function () {
+        toogleExpand();
+        handleChevronClick === null || handleChevronClick === void 0 ? void 0 : handleChevronClick(data);
+    };
+    return (React.createElement("div", { className: "tree-item" },
+        React.createElement("div", { className: "tree-item-header flex items-center justify-start" },
+            data.children ? (React.createElement("button", { className: "tree-item-chevron", onClick: chevronClickHandler, type: "button" },
+                React.createElement(TbChevronRight, { className: "chevron ".concat(activeUnitId === data.id ? 'text-bia-green hover:text-bia-green-light-10' : 'text-bia-coolgrey-light-50 hover:text-bia-coolgrey-light-20', " ").concat(isExpanded ? 'rotate-90' : ''), size: 18 }))) : (React.createElement("div", { className: "chevron-placeholder aspect-square min-w-[18px]" })),
+            React.createElement("button", { className: "tree-item-label rounded-radius-sm px-0.5 py-[0.5px] text-start font-segoe text-size-sm font-normal text-bia-black ".concat(activeUnitId === data.id ? 'bg-bia-green-light-70' : 'hover:bg-bia-coolgrey-light-90'), onClick: clickItemHandler, type: "button", onContextMenu: function (e) {
+                    e.preventDefault();
+                    handleRightClick === null || handleRightClick === void 0 ? void 0 : handleRightClick(data);
+                } }, data.label)),
+        isExpanded && data.children && (React.createElement("div", { className: "tree-item-children flex flex-col gap-0.5 rounded-radius-sm pl-[18px]" }, data.children.map(function (childUnit) { return (React.createElement(TreeItem, { key: childUnit.id, data: childUnit, expandedData: expandedData, setExpandedData: setExpandedData, dataMap: dataMap, activeUnitId: activeUnitId, handleRightClick: handleRightClick, handleCLick: handleCLick })); })))));
+};
+
+var defaultAlias = {
+    id: null,
+    label: null,
+    parent: null,
+};
+var unitTransformator = function (unit, alias) {
+    var _a, _b, _c;
+    if (alias === void 0) { alias = defaultAlias; }
+    var newUnit = {
+        id: unit[(_a = alias.id) !== null && _a !== void 0 ? _a : 'id'],
+        label: unit[(_b = alias.label) !== null && _b !== void 0 ? _b : 'label'],
+        parent: unit[(_c = alias.parent) !== null && _c !== void 0 ? _c : 'parent'],
+        children: [],
+        data: __assign({}, unit),
+    }; // new unit object that will used in TreeItem Component
+    return newUnit;
+};
+var useFileTree = function (data, alias) {
+    if (alias === void 0) { alias = defaultAlias; }
+    var _a = React.useState(function () { return new Map(); }), expandedData = _a[0], setExpandedData = _a[1];
+    var usedAlias = __assign(__assign({}, defaultAlias), alias);
+    // A map to store all items by their ID for quick lookup
+    var map = new Map();
+    // An array to hold the root-level objects
+    var tree = [];
+    // First, create a map of all items
+    data.forEach(function (unit) {
+        map.set(unit['id'], unitTransformator(unit, usedAlias));
+    });
+    // build tree structure by linkiing children to parents
+    map.forEach(function (unit) {
+        var parent = map.get(unit.parent);
+        if (parent) {
+            // Find the correct insertion point for the new child
+            var insertionIndex = parent.children.findIndex(function (child) {
+                return unit.label.toLowerCase().localeCompare(child.label.toLowerCase()) < 0;
+            });
+            // Insert the new child at the correct position
+            if (insertionIndex === -1)
+                parent.children.push(unit);
+            else
+                parent.children.splice(insertionIndex, 0, unit);
+        }
+        else
+            tree.push(unit);
+    });
+    return { tree: tree, map: map, expandedData: expandedData, setExpandedData: setExpandedData };
+};
+
 var getContextualPopupStyle = function (anchorRef, popupRef, position) {
     if (!anchorRef.current || !popupRef.current) {
         return {};
@@ -1989,15 +2110,15 @@ MenuItem.defaultProps = {
 };
 
 function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b, _c = props.zIndex, zIndex = _c === void 0 ? 150 : _c, className = props.className, style = props.style;
     var timeout;
-    var _c = React.useState(false), active = _c[0], setActive = _c[1];
+    var _d = React.useState(false), active = _d[0], setActive = _d[1];
     var anchorRef = React.useRef(null);
     var tooltipContainerRef = React.useRef(null);
-    var _d = React.useState({
+    var _e = React.useState({
         maxWidth: maxWidth + 'px',
         whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _d[0], setTooltipContainerStyle = _d[1];
+    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -2041,12 +2162,12 @@ function Tooltip(props) {
     }, [content, maxWidth, scrollWidth, offsetHeight]);
     return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip, ref: anchorRef },
         children,
-        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle }))));
+        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle, zIndex: zIndex, className: className, style: style }))));
 }
 var TooltipItem = function (_a) {
-    var anchorRef = _a.anchorRef, direction = _a.direction, content = _a.content, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle;
+    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, zIndex = _a.zIndex;
     var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
-    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white", style: __assign(__assign({}, positionStyle), tooltipContainerStyle), ref: tooltipContainerRef }, content), document.body);
+    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(className), style: __assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), ref: tooltipContainerRef }, content), document.body);
 };
 Tooltip.defaultProps = {
     delay: 400,
@@ -3590,48 +3711,78 @@ var positionConfig = {
     end: 'justify-end',
 };
 
+var SelectedPage = function (_a) {
+    var label = _a.label, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
+    var basicButtonStyle = 'bianic-custom-button bianic-fgc-target flex items-center justify-center font-semibold cursor-default';
+    var basicColorStyle = 'text-primary-cool bg-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50';
+    var textStyleOptions = {
+        sm: 'text-size-sm',
+        md: 'text-size-base',
+    };
+    var sizeStyleOptions = "".concat(iconOnlySizeConfig$1[size], " ").concat(radiusConfig$1['default'][size]);
+    var style = "".concat(basicButtonStyle, " ").concat(basicColorStyle, " ").concat(sizeStyleOptions, " ").concat(textStyleOptions[size]);
+    return React.createElement("div", { className: style }, label);
+};
+
 function PaginationBar(_a) {
     var size = _a.size, position = _a.position, currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange;
-    var _b = React.useState([]), range = _b[0], setRange = _b[1];
-    var _c = React.useState([]), showedPages = _c[0], setShowedPages = _c[1];
+    var totalRange = Array.from({ length: totalPages }, function (_, i) { return i + 1; });
+    var PAGE_SIZE = 5;
+    var _b = React.useState(0), startIndex = _b[0], setStartIndex = _b[1];
+    var _c = React.useState(totalRange.slice(startIndex, PAGE_SIZE)), showedPages = _c[0], setShowedPages = _c[1];
     var buttonSizingStyle = size === 'sm' ? 31 : 38;
     var iconSize = size === 'sm' ? 14 : 18;
-    React.useEffect(function () {
-        var tempRange = [];
-        for (var i = 1; i <= totalPages; i += 1) {
-            tempRange.push(i);
-        }
-        setRange(tempRange);
-    }, [totalPages]);
-    React.useEffect(function () {
-        var usedRange = [];
-        var startRange = 0;
-        var endRange = totalPages > 5 ? 5 : totalPages;
-        if (totalPages > 5) {
-            if (currentPage < 3) {
-                endRange = 5;
-            }
-            else if (currentPage >= totalPages - 1) {
-                startRange = totalPages - 5;
-                endRange = totalPages;
-            }
-            else {
-                startRange = currentPage - 3;
-                endRange = currentPage + 2;
-            }
-        }
-        usedRange = range.slice(startRange, endRange);
-        setShowedPages(usedRange);
-    }, [currentPage, totalPages, range]);
     var handlePageChange = function (page) {
-        if (page >= 1 && page <= totalPages) {
+        if (page >= 1 && page <= totalPages)
             onPageChange(page);
-        }
     };
+    var handleNextRange = function () {
+        var newStartIndex = startIndex + PAGE_SIZE;
+        if (newStartIndex < totalPages)
+            setStartIndex(newStartIndex);
+        else
+            setStartIndex(totalPages - PAGE_SIZE);
+    };
+    var handlePrevRange = function () {
+        var newStartIndex = startIndex - PAGE_SIZE;
+        if (newStartIndex >= 0)
+            setStartIndex(newStartIndex);
+        else
+            setStartIndex(0);
+    };
+    var getStartIndex = function (index) {
+        if (index + PAGE_SIZE > totalPages)
+            return Math.max(0, totalPages - PAGE_SIZE);
+        return index;
+    };
+    React.useEffect(function () {
+        var correctedIndex = getStartIndex(startIndex);
+        setShowedPages(totalRange.slice(correctedIndex, correctedIndex + PAGE_SIZE));
+    }, [startIndex, totalRange, totalPages]);
     return (React.createElement("div", { className: "flex ".concat(positionConfig[position], " gap-[5px]") },
-        React.createElement(Button, { variant: "subtle-link", size: size, type: "button", onClick: function () { return handlePageChange(currentPage - 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
-        showedPages.map(function (page) { return (React.createElement(Button, { key: page, variant: currentPage === page ? 'default' : 'subtle-link', size: size, type: "button", onClick: function () { return handlePageChange(page); }, className: "cursor-pointer ".concat(sizeConfig$2[size]), label: page.toString(), minWidth: buttonSizingStyle })); }),
-        React.createElement(Button, { variant: "subtle-link", size: size, type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages })));
+        totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handlePrevRange, className: showedPages[0] === 1 ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronsLeft, { size: iconSize }), disabled: showedPages[0] === 1 })),
+        React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: function () {
+                handlePageChange(currentPage - 1);
+                if (showedPages[0] === currentPage)
+                    setStartIndex(function (old) { return old - 1; });
+            }, className: currentPage === 1 ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
+        showedPages.map(function (page) {
+            if (page === currentPage) {
+                return React.createElement(SelectedPage, { key: page, label: page.toString(), size: size });
+            }
+            return (React.createElement(Button, { key: page, variant: "subtle", size: size, type: "button", onClick: function () {
+                    handlePageChange(page);
+                }, className: "cursor-pointer ".concat(sizeConfig$2[size]), label: page.toString(), minWidth: buttonSizingStyle }));
+        }),
+        React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: function () {
+                handlePageChange(currentPage + 1);
+                if (showedPages[4] === currentPage) {
+                    setStartIndex(function (old) { return old + 1; });
+                }
+            }, className: currentPage === totalPages ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages }),
+        totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handleNextRange, className: showedPages[showedPages.length - 1] === totalPages
+                ? ''
+                : 'cursor-pointer', iconLeft: React.createElement(TbChevronsRight, { size: iconSize }), disabled: showedPages[showedPages.length - 1] === totalPages }))));
 }
 
 var activeConfig = {
@@ -3716,20 +3867,19 @@ var classConfig = {
 };
 
 function Popover(_a) {
-    var children = _a.children, content = _a.content; _a.delay; var _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d; _a.maxWidth;
+    var className = _a.className, children = _a.children, content = _a.content, _b = _a.direction, direction = _b === void 0 ? 'bottom' : _b; _a.maxWidth; var _c = _a.title, title = _c === void 0 ? '' : _c, style = _a.style, zIndex = _a.zIndex;
     var wrapperRef = React.useRef(null);
-    React.useRef(null);
-    var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
+    var _d = useDetectOutsideClick(wrapperRef, false), isOpen = _d[0], setIsOpen = _d[1];
     return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction, className: className, style: style, zIndex: zIndex }))));
 }
 var PopoverItem = function (_a) {
-    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction;
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex;
     var popoverRef = React.useRef(null);
     var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
     var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
-    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: positionStyle, className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white" },
+    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: __assign(__assign(__assign({}, positionStyle), style), { zIndex: zIndex }), className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white ".concat(className) },
         React.createElement("div", { className: "flex flex-col" },
             React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
             React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
@@ -3737,7 +3887,6 @@ var PopoverItem = function (_a) {
             React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
 };
 Popover.defaultProps = {
-    delay: 400,
     direction: 'top',
     title: '',
 };
@@ -4302,6 +4451,7 @@ exports.Brand = Brand;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonApp = ButtonApp;
+exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Color = Color;
 exports.ContextualButton = ContextualButton;
@@ -4346,4 +4496,6 @@ exports.TextInput = TextInput;
 exports.Toaster = Toaster;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
+exports.TreeItem = TreeItem;
 exports.Window = Window;
+exports.useFileTree = useFileTree;