bianic-ui 2.2.0-beta.2 → 2.3.0

package/dist/cjs/types/components/Card/config.d.ts

@@ -0,0 +1,6 @@
+declare const config: {
+    'dark-background': string;
+    'light-background': string;
+    'outline-light-background': string;
+};
+export default config;

package/dist/cjs/types/components/Card/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import config from './config';
+declare const Card: ({ children, disabled, variant, }: {
+    children: React.ReactNode;
+    disabled?: boolean | undefined;
+    variant?: "dark-background" | "light-background" | "outline-light-background" | undefined;
+}) => React.JSX.Element;
+export default Card;

package/dist/cjs/types/components/FileTree/FileTreeSimulation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FileTreeSimulation: () => React.JSX.Element;
+export default FileTreeSimulation;

package/dist/cjs/types/components/FileTree/TreeItem.d.ts

@@ -0,0 +1,13 @@
+import React, { ComponentPropsWithRef } from 'react';
+interface TreeItemInterface extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    data: any;
+    expandedData: Map<string, boolean>;
+    setExpandedData: (data: Map<string, boolean>) => void;
+    dataMap: Map<string, any>;
+    activeUnitId?: string;
+    handleChevronClick?: (data: any) => void;
+    handleRightClick?: (data: any) => void;
+    handleCLick?: (data: any) => void;
+}
+declare const TreeItem: ({ data, expandedData, setExpandedData, dataMap, activeUnitId, handleChevronClick, handleRightClick, handleCLick, }: TreeItemInterface) => React.JSX.Element;
+export default TreeItem;

package/dist/cjs/types/components/FileTree/useFileTree.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const useFileTree: (data: any[], alias?: {
+    id: null;
+    label: null;
+    parent: null;
+}) => {
+    tree: any[];
+    map: Map<any, any>;
+    expandedData: Map<string, boolean>;
+    setExpandedData: React.Dispatch<React.SetStateAction<Map<string, boolean>>>;
+};
+export default useFileTree;

package/dist/cjs/types/components/PaginationBar/SelectedPage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SelectedPageProps {
+    label?: string;
+    size?: 'sm' | 'md';
+}
+declare const SelectedPage: ({ label, size }: SelectedPageProps) => React.JSX.Element;
+export default SelectedPage;

package/dist/cjs/types/components/Popover/PropInterface.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface PopoverProps {
+    className?: string;
+    children: React.ReactNode;
+    content: string;
+    delay?: number;
+    maxWidth?: string;
+    title?: string;
+    style?: React.CSSProperties;
+    zIndex?: number;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+export interface PopoverItemProps {
+    anchorRef: React.RefObject<HTMLElement>;
+    className?: string;
+    content: string;
+    style?: React.CSSProperties;
+    title: string;
+    zIndex?: number;
+    direction: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}

package/dist/cjs/types/components/Popover/index.d.ts

@@ -1,16 +1,8 @@
 import React from 'react';
-interface PopoverProps {
-    children: React.ReactNode;
-    content: string;
-    delay?: number;
-    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    title?: string;
-    maxWidth?: string;
-}
-declare function Popover({ children, content, delay, direction, title, maxWidth, }: PopoverProps): React.JSX.Element;
+import { PopoverProps } from './PropInterface';
+declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
-        delay: number;
         direction: string;
         title: string;
     };

package/dist/cjs/types/components/Tooltip/PropsInterface.d.ts

@@ -1,16 +1,20 @@
-import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, RefObject } from 'react';
 interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
     children: ReactNode;
     content: ReactNode | string;
     delay?: number;
     maxWidth?: string;
+    zIndex?: number;
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 interface TooltipItemProps {
     anchorRef: RefObject<HTMLDivElement>;
-    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    className?: string;
     content: ReactNode | string;
     tooltipContainerRef: React.RefObject<HTMLDivElement>;
     tooltipContainerStyle: React.CSSProperties;
+    style?: ComponentPropsWithRef<'div'>['style'];
+    zIndex: number;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 export { TooltipProps, TooltipItemProps };

package/dist/cjs/types/components/index.d.ts

@@ -6,9 +6,12 @@ export { default as Banner } from './Banner';
 export { default as Brand } from './Brand/Brand';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
 export { Button, ButtonApp, ContextualButton } from './Button';
+export { default as Card } from './Card';
 export { default as Color } from './Color';
 export { default as Divider } from './Divider/Divider';
 export { default as FileTree } from './FileTree';
+export { default as TreeItem } from './FileTree/TreeItem';
+export { default as useFileTree } from './FileTree/useFileTree';
 export { MenuContainer, MenuItem } from './Menu';
 export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle, SegmentButtonItem, SegmentButtonGroup, FormLabel, FormGroup, FormGroupButton, FormGroupLabel, DropdownItem, DropdownContainer, DatePicker, PickerCalendar, } from './Forms';
 export * from './Icons';

package/dist/cjs/types/stories/Card/Card.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, disabled, variant, }: {
+        children: import("react").ReactNode;
+        disabled?: boolean | undefined;
+        variant?: "dark-background" | "light-background" | "outline-light-background" | undefined;
+    }) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;

package/dist/cjs/types/stories/FileTree/FileTreeSimulation.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const NewFileTreeSimulation: Story;

package/dist/cjs/types/utility/public/words.d.ts

@@ -0,0 +1,13 @@
+/**
+ * getRelativeTime
+ * Accepts a JavaScript Date and returns a human friendly relative time string.
+ * Rules:
+ * - < 1 minute: "just now"
+ * - < 1 hour: "x minutes ago"
+ * - < 1 day: "x hours ago"
+ * - < 30 days: "x days ago"
+ * - < 12 months: "x months ago" (uses 30-day months approximation)
+ * - >= 1 year: "x years ago" (uses 365-day years approximation; floors to whole years,
+ *   so e.g. 1 year 11 months => "1 years ago" as requested)
+ */
+export declare function getRelativeTime(date: Date): string;

package/dist/esm/index.js

@@ -101,6 +101,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) {
@@ -457,7 +461,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 = {
@@ -475,7 +479,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",
@@ -1553,6 +1557,27 @@ var ContextualButton = 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 = [
         {
@@ -1694,7 +1719,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
@@ -1704,7 +1729,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 = useRef(null);
     var _b = useState(false), isExpand = _b[0], setIsExpand = _b[1];
@@ -1745,10 +1770,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 = 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 {};
@@ -1987,15 +2108,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 = useState(false), active = _c[0], setActive = _c[1];
+    var _d = useState(false), active = _d[0], setActive = _d[1];
     var anchorRef = useRef(null);
     var tooltipContainerRef = useRef(null);
-    var _d = useState({
+    var _e = 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);
@@ -2039,12 +2160,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 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 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,
@@ -3588,48 +3709,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 = useState([]), range = _b[0], setRange = _b[1];
-    var _c = useState([]), showedPages = _c[0], setShowedPages = _c[1];
+    var totalRange = Array.from({ length: totalPages }, function (_, i) { return i + 1; });
+    var PAGE_SIZE = 5;
+    var _b = useState(0), startIndex = _b[0], setStartIndex = _b[1];
+    var _c = useState(totalRange.slice(startIndex, PAGE_SIZE)), showedPages = _c[0], setShowedPages = _c[1];
     var buttonSizingStyle = size === 'sm' ? 31 : 38;
     var iconSize = size === 'sm' ? 14 : 18;
-    useEffect(function () {
-        var tempRange = [];
-        for (var i = 1; i <= totalPages; i += 1) {
-            tempRange.push(i);
-        }
-        setRange(tempRange);
-    }, [totalPages]);
-    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;
+    };
+    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 = {
@@ -3714,20 +3865,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 = useRef(null);
-    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 = useRef(null);
     var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
     var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
-    return 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 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)),
@@ -3735,7 +3885,6 @@ var PopoverItem = function (_a) {
             React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
 };
 Popover.defaultProps = {
-    delay: 400,
     direction: 'top',
     title: '',
 };
@@ -4269,4 +4418,4 @@ function Window(_a) {
         React.createElement("div", { className: "bianic-window-content flex w-full flex-col items-start gap-[20px] px-[20px] pb-[20px] text-primary-black" }, rest.children)));
 }
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, useFileTree };