bianic-ui 2.10.0-beta.2 → 2.10.1

package/dist/esm/types/components/Forms/Checkbox/index.d.ts

@@ -6,8 +6,9 @@ interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>
     label?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     value?: string | number | readonly string[] | undefined;
+    isIndeterminate?: boolean;
 }
-declare function Checkbox({ disabled, id, size, label, onChange, ...props }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ disabled, id, size, label, onChange, isIndeterminate, ...props }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
     var defaultProps: {
         disabled: boolean;

package/dist/esm/types/components/Forms/Dropdown/DropdownContainer.d.ts

@@ -13,7 +13,7 @@ export interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
     onClickItem?: (event: React.MouseEvent<HTMLDivElement>, val: string | number | object) => void;
 }
 declare const DropdownContainer: {
-    (propsComp: DropdownContainerProps): React.JSX.Element | null;
+    (propsComp: DropdownContainerProps): React.JSX.Element;
     defaultProps: {
         isTopFlat: boolean;
     };

package/dist/esm/types/components/Sidebar/SidebarCointainer.d.ts

@@ -1,9 +1,10 @@
-import React, { ReactNode } from 'react';
-export interface SidebarContainerProps {
-    bgColor?: string;
-    children?: ReactNode | undefined;
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface SidebarContainerProps extends ComponentPropsWithoutRef<'div'> {
+    color?: string;
+    children?: ReactNode;
     isMinimized?: boolean;
-    activeItem?: string | undefined;
+    activeId?: string | null;
+    setActiveId?: (id?: string | null) => void;
 }
-declare const SidebarContainer: ({ bgColor, children, isMinimized, activeItem, }: SidebarContainerProps) => React.JSX.Element;
+declare const SidebarContainer: React.ForwardRefExoticComponent<SidebarContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default SidebarContainer;

package/dist/esm/types/components/Sidebar/SidebarItem.d.ts

@@ -1,14 +1,18 @@
 import React, { ComponentPropsWithoutRef } from 'react';
+type SidebarItemLevel = 0 | 1 | 2;
 export interface SidebarItemProps extends ComponentPropsWithoutRef<'button'> {
     title: string;
     icon?: React.ReactNode;
     active?: boolean;
-    onClick?: () => void | undefined;
+    onClick?: () => void;
     children?: React.ReactNode;
     isMinimized?: boolean;
-    isExpand?: boolean | undefined;
-    notificationCount?: number | undefined;
-    level?: number | undefined;
+    isExpand?: boolean;
+    notificationCount?: number;
+    level?: SidebarItemLevel;
+    activeId: string | null;
+    setActiveId?: (id?: string | null) => void;
+    color?: string;
 }
-declare const SidebarItem: ({ title, icon, active, onClick, children, isMinimized, isExpand, notificationCount, level, }: SidebarItemProps) => React.JSX.Element;
+declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default SidebarItem;

package/dist/esm/types/components/Sidebar/SidebarMenu.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+export interface SidebarMenu {
+    color?: string;
+    children?: ReactNode;
+    isMinimized?: boolean;
+    activeId?: string | null;
+    setActiveId?: (id?: string | null) => void;
+}
+declare const SidebarMenu: ({ color, children, isMinimized, activeId, setActiveId, }: SidebarMenu) => React.JSX.Element;
+export default SidebarMenu;

package/dist/esm/types/components/Sidebar/SidebarProfile.d.ts

@@ -0,0 +1,17 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+export interface SidebarProfileProps extends ComponentPropsWithoutRef<'button'> {
+    username: string;
+    role: string;
+    avatarImg?: React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+    children?: React.ReactNode;
+    isMinimized?: boolean;
+    isExpand?: boolean;
+    notificationCount?: number;
+    activeId?: string | null;
+    setActiveId?: (id?: string | null) => void;
+    color?: string;
+}
+declare const SidebarProfile: React.ForwardRefExoticComponent<SidebarProfileProps & React.RefAttributes<HTMLButtonElement>>;
+export default SidebarProfile;

package/dist/esm/types/components/Sidebar/config.d.ts

@@ -0,0 +1,21 @@
+export declare const containerSizeConfig: {
+    minimized: string;
+    maximized: string;
+};
+export declare const itemConfig: {
+    minimized: string;
+    maximized: string;
+};
+export declare const profileConfig: {
+    minimized: string;
+    maximized: string;
+};
+export declare const overlaySizeConfig: {
+    minimized: string;
+    maximized: string;
+};
+export declare const buttonConfig: {
+    0: string;
+    1: string;
+    2: string;
+};

package/dist/esm/types/components/Sidebar/index.d.ts

@@ -1,2 +1,4 @@
 export { default as SidebarContainer } from './SidebarCointainer';
+export { default as SidebarMenu } from './SidebarMenu';
 export { default as SidebarItem } from './SidebarItem';
+export { default as SidebarProfile } from './SidebarProfile';

package/dist/esm/types/components/Table/Table.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentPropsWithRef } from 'react';
+interface tableProps extends ComponentPropsWithRef<'table'> {
+}
+declare const Table: ({ children, ...rest }: tableProps) => React.JSX.Element;
+export default Table;

package/dist/esm/types/components/Table/TableBody.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentPropsWithRef } from 'react';
+interface tableBodyProps extends ComponentPropsWithRef<'tbody'> {
+}
+declare const TableBody: ({ children, ...rest }: tableBodyProps) => React.JSX.Element;
+export default TableBody;

package/dist/esm/types/components/Table/TableHead.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentPropsWithRef } from 'react';
+interface tableHeadProps extends ComponentPropsWithRef<'thead'> {
+}
+declare const TableHead: ({ children, ...rest }: tableHeadProps) => React.JSX.Element;
+export default TableHead;

package/dist/esm/types/components/Table/TableRow/index.d.ts

@@ -0,0 +1,6 @@
+import React, { ComponentPropsWithRef } from 'react';
+interface TableRowProps extends ComponentPropsWithRef<'tr'> {
+    variant: 'head' | 'body';
+}
+declare const TableRow: ({ variant, children, ...rest }: TableRowProps) => React.JSX.Element;
+export default TableRow;

package/dist/esm/types/components/Table/TableUtility/BlockLoading.d.ts

@@ -0,0 +1,6 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+interface BlockLoadingProps extends ComponentPropsWithoutRef<'div'> {
+    backgroundColor?: string;
+}
+declare const BlockLoading: ({ className, backgroundColor, }: BlockLoadingProps) => React.JSX.Element;
+export default BlockLoading;

package/dist/esm/types/components/Table/TableUtility/EmptyTable.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface EmptyTableProps {
+    content?: string;
+    subContent: string;
+}
+declare const EmptyTable: ({ content, subContent }: EmptyTableProps) => React.JSX.Element;
+export default EmptyTable;

package/dist/esm/types/components/Table/TableUtility/TableFooterController.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, Dispatch, SetStateAction } from 'react';
+import React from 'react';
+interface TableFooterControllerProps extends ComponentPropsWithoutRef<'div'> {
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    setCurrentPage: Dispatch<SetStateAction<number>>;
+    setPageSize: Dispatch<SetStateAction<number>>;
+    isLoading?: boolean;
+}
+declare const TableFooterController: ({ currentPage, totalPages, pageSize, setCurrentPage, setPageSize, isLoading, }: TableFooterControllerProps) => React.JSX.Element;
+export default TableFooterController;

package/dist/esm/types/components/Table/TableUtility/TableHeaderController.d.ts

@@ -0,0 +1,9 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface TableHeaderControllerProps extends ComponentPropsWithoutRef<'div'> {
+    buttonActions?: ReactNode[];
+    totalData?: number;
+    firstIndex?: number;
+    lastIndex?: number;
+}
+declare const TableHeaderController: ({ buttonActions, totalData, firstIndex, lastIndex, }: TableHeaderControllerProps) => React.JSX.Element;
+export default TableHeaderController;

package/dist/esm/types/components/Table/TableUtility/TableSearchInput.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithoutRef } from 'react';
+import React from 'react';
+interface TableSearchInputProps extends ComponentPropsWithoutRef<'input'> {
+    isShow: boolean;
+    onEnter?: any;
+    onClose?: any;
+    showEnter?: boolean;
+    showClose?: boolean;
+}
+declare const TableSearchInput: ({ isShow, value, onChange, placeholder, }: TableSearchInputProps) => React.JSX.Element | null;
+export default TableSearchInput;

package/dist/esm/types/components/Table/TableUtility/index.d.ts

@@ -0,0 +1,5 @@
+export { default as BlockLoading } from './BlockLoading';
+export { default as EmptyTable } from './EmptyTable';
+export { default as TableFooterController } from './TableFooterController';
+export { default as TableHeaderController } from './TableHeaderController';
+export { default as TableSearchInput } from './TableSearchInput';

package/dist/esm/types/components/Table/index.d.ts

@@ -1 +1,6 @@
+export { default as Table } from './Table';
+export { default as TableBody } from './TableBody';
 export { default as TableCell } from './TableCell';
+export { default as TableHead } from './TableHead';
+export { default as TableRow } from './TableRow';
+export { BlockLoading, EmptyTable, TableFooterController, TableHeaderController, TableSearchInput, } from './TableUtility';

package/dist/esm/types/components/TagLabel/index.d.ts

@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef } from 'react';
 interface TagLabelProps extends ComponentPropsWithoutRef<'div'> {
     color: 'default' | 'blue' | 'teal' | 'green' | 'orange' | 'red' | 'black' | 'white' | 'custom';
     size?: 'md' | 'sm' | 'tn';
-    variant?: 'label' | 'icon' | 'closeable';
+    variant?: 'label' | 'icon' | 'closeable' | 'monospace';
     closeHandler?: () => void;
     open?: boolean;
     text: string;

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

@@ -24,12 +24,12 @@ export { default as Pills } from './Pills/Pills';
 export { default as Popover } from './Popover';
 export { ProgressBar, ProgressCircle } from './Progress';
 export { default as ResizeableDiv } from './ResizeableDiv';
-export { SidebarContainer, SidebarItem } from './Sidebar';
+export { SidebarContainer, SidebarItem, SidebarMenu, SidebarProfile, } from './Sidebar';
 export { default as Slider } from './Slider';
 export { default as Spinner } from './Spinner/Spinner';
 export { default as Tab } from './Tab/Tab';
 export { default as TabMenu } from './TabMenu/TabMenu';
-export { TableCell } from './Table';
+export { Table, TableBody, TableCell, TableHead, TableRow, TableFooterController, TableHeaderController, TableSearchInput, EmptyTable, BlockLoading, } from './Table';
 export { default as TagLabel } from './TagLabel';
 export { default as Tooltip } from './Tooltip';
 export { Display, P, Heading, Text, Link } from './Typography';
@@ -37,3 +37,4 @@ export { Toaster } from './Toaster';
 export { default as VerticalStepper } from './Stepper/Vertical';
 export { default as Window } from './Window';
 export { getRelativeTime } from '../utility';
+export { useTableDataHandler } from '../utility/hooks/useTableDataHandler';

package/dist/esm/types/image/index.d.ts

@@ -0,0 +1,2 @@
+import EmptyIcon from './Empty.svg';
+export { EmptyIcon };

package/dist/esm/types/stories/Form/Checkbox/Checkbox.stories.d.ts

@@ -6,7 +6,6 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    tags: string[];
     args: {};
 };
 export default meta;

package/dist/esm/types/stories/Form/Checkbox/CheckboxSimulation.stories.d.ts

@@ -6,7 +6,6 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    tags: string[];
     args: {};
 };
 export default meta;

package/dist/esm/types/stories/Form/Dropdown/DropdownContainer.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     component: {
-        (propsComp: import("../../../components/Forms/Dropdown/DropdownContainer").DropdownContainerProps): import("react").JSX.Element | null;
+        (propsComp: import("../../../components/Forms/Dropdown/DropdownContainer").DropdownContainerProps): import("react").JSX.Element;
         defaultProps: {
             isTopFlat: boolean;
         };

package/dist/esm/types/stories/Sidebar/SidebarContainer.stories.d.ts

@@ -2,11 +2,10 @@ import React from 'react';
 import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: ({ bgColor, children, isMinimized, activeItem, }: import("../../components/Sidebar/SidebarCointainer").SidebarContainerProps) => React.JSX.Element;
+    component: React.ForwardRefExoticComponent<import("../../components/Sidebar/SidebarCointainer").SidebarContainerProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
     };
-    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/esm/types/stories/Sidebar/SidebarItem.stories.d.ts

@@ -2,11 +2,10 @@ import type { StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 declare const meta: {
     title: string;
-    component: ({ title, icon, active, onClick, children, isMinimized, isExpand, notificationCount, level, }: import("../../components/Sidebar/SidebarItem").SidebarItemProps) => React.JSX.Element;
+    component: React.ForwardRefExoticComponent<import("../../components/Sidebar/SidebarItem").SidebarItemProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         layout: string;
     };
-    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/esm/types/utility/helper.d.ts

@@ -1,4 +1,5 @@
 declare const childrenElement: (element: any) => any;
+declare const cn: (...classes: Array<string | false | undefined>) => string;
 declare const validUnion: (value: any, union: any) => any;
 declare const useDetectOutsideClick: (ref: React.RefObject<HTMLElement>, initialState: boolean, ignoreRef?: React.RefObject<HTMLElement>, event?: string) => (boolean | import("react").Dispatch<import("react").SetStateAction<boolean>>)[];
-export { childrenElement, validUnion, useDetectOutsideClick };
+export { childrenElement, cn, validUnion, useDetectOutsideClick };

package/dist/esm/types/utility/hooks/useTableDataHandler.d.ts

@@ -0,0 +1,54 @@
+export type SortOrder = 'asc' | 'desc';
+/**
+ * Configuration options for the useTableDataHandler hook.
+ * * @interface UseTableDataOptions
+ * @property {string[]} [searchKeys] - Specific object keys to check during client-side filtering. If omitted, defaults to all keys containing string values.
+ * @property {string} [initialSortKey] - The object key to sort the table by on initial render.
+ * @property {SortOrder} [initialSortOrder='asc'] - The initial sorting direction ('asc' or 'desc').
+ * @property {boolean} [isFilterable=true] - Enables or disables client-side searching functionality.
+ * @property {boolean} [isSortable=true] - Enables or disables client-side sorting functionality.
+ * @property {boolean} [isServerSide=false] - If true, bypasses client-side processing, assuming filtering and sorting are handled by an API.
+ */
+interface UseTableDataOptions {
+    searchKeys?: string[];
+    initialSortKey?: string;
+    initialSortOrder?: SortOrder;
+    isFilterable?: boolean;
+    isSortable?: boolean;
+    isServerSide?: boolean;
+}
+/**
+ * A custom hook to handle data processing for tables, managing internal states
+ * for client-side filtering (searching) and sorting. It can also safely yield control
+ * to server-side operations if configured.
+ *
+ * ### Key Features:
+ * - **Automatic Key Detection:** Automatically finds string fields to search if no `searchKeys` are provided.
+ * - **Smart Sorting:** Uses `localeCompare` for strings, standard operators for numbers, and gracefully handles `null`/`undefined` values by moving them to the bottom.
+ * - **Server-Side Ready:** Setting `isServerSide: true` disables internal processing while preserving handlers for external API synchronization.
+ *
+ * @param {any[]} initialData - The raw array of data/rows to be displayed in the table.
+ * @param {UseTableDataOptions} [options={}] - Optional configuration flags and initial states.
+ * * @returns {Object} Table state and control handlers.
+ * @returns {any[]} data - The processed array (filtered and sorted) ready for rendering.
+ * @returns {string} searchTerm - The current text being filtered against.
+ * @returns {string|undefined} sortKey - The current object key being used to sort.
+ * @returns {SortOrder} sortOrder - The current direction of the sort ('asc' or 'desc').
+ * @returns {(value: string) => void} handleSearchChange - Callback to update the search filter string.
+ * @returns {(key: string) => void} handleSortChange - Callback to trigger sorting on a specific column. Toggles direction if called on the same column consecutively.
+ *
+ * @example
+ * const { data, handleSearchChange, handleSortChange } = useTableDataHandler(users, {
+ * searchKeys: ['name', 'email'],
+ * initialSortKey: 'name'
+ * });
+ */
+export declare const useTableDataHandler: (initialData: any[], options?: UseTableDataOptions) => {
+    data: any[];
+    searchTerm: string;
+    sortKey: string | undefined;
+    sortOrder: SortOrder;
+    handleSearchChange: (value: string) => void;
+    handleSortChange: (key: string) => void;
+};
+export {};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React$1, { ComponentPropsWithoutRef, ComponentPropsWithRef, ChangeEvent, ReactNode, MouseEvent, HTMLAttributes, KeyboardEvent } from 'react';
+import React$1, { ComponentPropsWithoutRef, ComponentPropsWithRef, ChangeEvent, ReactNode, MouseEvent, HTMLAttributes, KeyboardEvent, Dispatch, SetStateAction } from 'react';
 
 interface AccordionsProps extends ComponentPropsWithoutRef<'div'> {
     title: string;
@@ -328,8 +328,9 @@ interface CheckboxProps$1 extends Omit<ComponentPropsWithoutRef<'input'>, 'size'
     label?: string;
     onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
     value?: string | number | readonly string[] | undefined;
+    isIndeterminate?: boolean;
 }
-declare function Checkbox({ disabled, id, size, label, onChange, ...props }: CheckboxProps$1): React$1.JSX.Element;
+declare function Checkbox({ disabled, id, size, label, onChange, isIndeterminate, ...props }: CheckboxProps$1): React$1.JSX.Element;
 declare namespace Checkbox {
     var defaultProps: {
         disabled: boolean;
@@ -355,7 +356,7 @@ interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
     onClickItem?: (event: React$1.MouseEvent<HTMLDivElement>, val: string | number | object) => void;
 }
 declare const DropdownContainer: {
-    (propsComp: DropdownContainerProps): React$1.JSX.Element | null;
+    (propsComp: DropdownContainerProps): React$1.JSX.Element;
     defaultProps: {
         isTopFlat: boolean;
     };
@@ -723,26 +724,56 @@ declare namespace ResizeableDiv {
     };
 }
 
-interface SidebarContainerProps {
-    bgColor?: string;
-    children?: ReactNode | undefined;
+interface SidebarContainerProps extends ComponentPropsWithoutRef<'div'> {
+    color?: string;
+    children?: ReactNode;
+    isMinimized?: boolean;
+    activeId?: string | null;
+    setActiveId?: (id?: string | null) => void;
+}
+declare const SidebarContainer: React$1.ForwardRefExoticComponent<SidebarContainerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SidebarMenu {
+    color?: string;
+    children?: ReactNode;
     isMinimized?: boolean;
-    activeItem?: string | undefined;
+    activeId?: string | null;
+    setActiveId?: (id?: string | null) => void;
 }
-declare const SidebarContainer: ({ bgColor, children, isMinimized, activeItem, }: SidebarContainerProps) => React$1.JSX.Element;
+declare const SidebarMenu: ({ color, children, isMinimized, activeId, setActiveId, }: SidebarMenu) => React$1.JSX.Element;
 
+type SidebarItemLevel = 0 | 1 | 2;
 interface SidebarItemProps extends ComponentPropsWithoutRef<'button'> {
     title: string;
     icon?: React$1.ReactNode;
     active?: boolean;
-    onClick?: () => void | undefined;
+    onClick?: () => void;
     children?: React$1.ReactNode;
     isMinimized?: boolean;
-    isExpand?: boolean | undefined;
-    notificationCount?: number | undefined;
-    level?: number | undefined;
+    isExpand?: boolean;
+    notificationCount?: number;
+    level?: SidebarItemLevel;
+    activeId: string | null;
+    setActiveId?: (id?: string | null) => void;
+    color?: string;
 }
-declare const SidebarItem: ({ title, icon, active, onClick, children, isMinimized, isExpand, notificationCount, level, }: SidebarItemProps) => React$1.JSX.Element;
+declare const SidebarItem: React$1.ForwardRefExoticComponent<SidebarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface SidebarProfileProps extends ComponentPropsWithoutRef<'button'> {
+    username: string;
+    role: string;
+    avatarImg?: React$1.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+    children?: React$1.ReactNode;
+    isMinimized?: boolean;
+    isExpand?: boolean;
+    notificationCount?: number;
+    activeId?: string | null;
+    setActiveId?: (id?: string | null) => void;
+    color?: string;
+}
+declare const SidebarProfile: React$1.ForwardRefExoticComponent<SidebarProfileProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface SliderProps {
     disabled: boolean;
@@ -785,6 +816,14 @@ interface MoreDropdownTabProps extends BaseTabMenuProps {
 type TabMenuProps = StandardTabProps | MoreDropdownTabProps;
 declare const TabMenu: React$1.ForwardRefExoticComponent<TabMenuProps & React$1.RefAttributes<HTMLDivElement>>;
 
+interface tableProps extends ComponentPropsWithRef<'table'> {
+}
+declare const Table: ({ children, ...rest }: tableProps) => React$1.JSX.Element;
+
+interface tableBodyProps extends ComponentPropsWithRef<'tbody'> {
+}
+declare const TableBody: ({ children, ...rest }: tableBodyProps) => React$1.JSX.Element;
+
 interface TableCellProps extends ComponentPropsWithoutRef<'td'> {
     variant?: 'head' | 'body';
     lined?: boolean;
@@ -800,10 +839,57 @@ declare namespace TableCell {
     };
 }
 
+interface tableHeadProps extends ComponentPropsWithRef<'thead'> {
+}
+declare const TableHead: ({ children, ...rest }: tableHeadProps) => React$1.JSX.Element;
+
+interface TableRowProps extends ComponentPropsWithRef<'tr'> {
+    variant: 'head' | 'body';
+}
+declare const TableRow: ({ variant, children, ...rest }: TableRowProps) => React$1.JSX.Element;
+
+interface BlockLoadingProps extends ComponentPropsWithoutRef<'div'> {
+    backgroundColor?: string;
+}
+declare const BlockLoading: ({ className, backgroundColor, }: BlockLoadingProps) => React$1.JSX.Element;
+
+interface EmptyTableProps {
+    content?: string;
+    subContent: string;
+}
+declare const EmptyTable: ({ content, subContent }: EmptyTableProps) => React$1.JSX.Element;
+
+interface TableFooterControllerProps extends ComponentPropsWithoutRef<'div'> {
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    setCurrentPage: Dispatch<SetStateAction<number>>;
+    setPageSize: Dispatch<SetStateAction<number>>;
+    isLoading?: boolean;
+}
+declare const TableFooterController: ({ currentPage, totalPages, pageSize, setCurrentPage, setPageSize, isLoading, }: TableFooterControllerProps) => React$1.JSX.Element;
+
+interface TableHeaderControllerProps extends ComponentPropsWithoutRef<'div'> {
+    buttonActions?: ReactNode[];
+    totalData?: number;
+    firstIndex?: number;
+    lastIndex?: number;
+}
+declare const TableHeaderController: ({ buttonActions, totalData, firstIndex, lastIndex, }: TableHeaderControllerProps) => React$1.JSX.Element;
+
+interface TableSearchInputProps extends ComponentPropsWithoutRef<'input'> {
+    isShow: boolean;
+    onEnter?: any;
+    onClose?: any;
+    showEnter?: boolean;
+    showClose?: boolean;
+}
+declare const TableSearchInput: ({ isShow, value, onChange, placeholder, }: TableSearchInputProps) => React$1.JSX.Element | null;
+
 interface TagLabelProps extends ComponentPropsWithoutRef<'div'> {
     color: 'default' | 'blue' | 'teal' | 'green' | 'orange' | 'red' | 'black' | 'white' | 'custom';
     size?: 'md' | 'sm' | 'tn';
-    variant?: 'label' | 'icon' | 'closeable';
+    variant?: 'label' | 'icon' | 'closeable' | 'monospace';
     closeHandler?: () => void;
     open?: boolean;
     text: string;
@@ -957,4 +1043,58 @@ declare function Window({ size, title, zIndex, onClose, ...rest }: WindowProps):
  */
 declare function getRelativeTime(date: Date): string;
 
-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, Rhombus as BCRhombus, 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, Countdown, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, MonospaceBadge, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, SidebarContainer, SidebarItem, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, StepperItem as VerticalStepper, Window, getRelativeTime, useFileTree };
+type SortOrder = 'asc' | 'desc';
+/**
+ * Configuration options for the useTableDataHandler hook.
+ * * @interface UseTableDataOptions
+ * @property {string[]} [searchKeys] - Specific object keys to check during client-side filtering. If omitted, defaults to all keys containing string values.
+ * @property {string} [initialSortKey] - The object key to sort the table by on initial render.
+ * @property {SortOrder} [initialSortOrder='asc'] - The initial sorting direction ('asc' or 'desc').
+ * @property {boolean} [isFilterable=true] - Enables or disables client-side searching functionality.
+ * @property {boolean} [isSortable=true] - Enables or disables client-side sorting functionality.
+ * @property {boolean} [isServerSide=false] - If true, bypasses client-side processing, assuming filtering and sorting are handled by an API.
+ */
+interface UseTableDataOptions {
+    searchKeys?: string[];
+    initialSortKey?: string;
+    initialSortOrder?: SortOrder;
+    isFilterable?: boolean;
+    isSortable?: boolean;
+    isServerSide?: boolean;
+}
+/**
+ * A custom hook to handle data processing for tables, managing internal states
+ * for client-side filtering (searching) and sorting. It can also safely yield control
+ * to server-side operations if configured.
+ *
+ * ### Key Features:
+ * - **Automatic Key Detection:** Automatically finds string fields to search if no `searchKeys` are provided.
+ * - **Smart Sorting:** Uses `localeCompare` for strings, standard operators for numbers, and gracefully handles `null`/`undefined` values by moving them to the bottom.
+ * - **Server-Side Ready:** Setting `isServerSide: true` disables internal processing while preserving handlers for external API synchronization.
+ *
+ * @param {any[]} initialData - The raw array of data/rows to be displayed in the table.
+ * @param {UseTableDataOptions} [options={}] - Optional configuration flags and initial states.
+ * * @returns {Object} Table state and control handlers.
+ * @returns {any[]} data - The processed array (filtered and sorted) ready for rendering.
+ * @returns {string} searchTerm - The current text being filtered against.
+ * @returns {string|undefined} sortKey - The current object key being used to sort.
+ * @returns {SortOrder} sortOrder - The current direction of the sort ('asc' or 'desc').
+ * @returns {(value: string) => void} handleSearchChange - Callback to update the search filter string.
+ * @returns {(key: string) => void} handleSortChange - Callback to trigger sorting on a specific column. Toggles direction if called on the same column consecutively.
+ *
+ * @example
+ * const { data, handleSearchChange, handleSortChange } = useTableDataHandler(users, {
+ * searchKeys: ['name', 'email'],
+ * initialSortKey: 'name'
+ * });
+ */
+declare const useTableDataHandler: (initialData: any[], options?: UseTableDataOptions) => {
+    data: any[];
+    searchTerm: string;
+    sortKey: string | undefined;
+    sortOrder: SortOrder;
+    handleSearchChange: (value: string) => void;
+    handleSortChange: (key: string) => void;
+};
+
+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, Rhombus as BCRhombus, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, BlockLoading, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, Countdown, DatePicker, Display, Divider, DropdownContainer, DropdownItem, EmptyTable, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, MonospaceBadge, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, SidebarContainer, SidebarItem, SidebarMenu, SidebarProfile, Slider, Spinner, Tab, TabMenu, Table, TableBody, TableCell, TableFooterController, TableHead, TableHeaderController, TableRow, TableSearchInput, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, StepperItem as VerticalStepper, Window, getRelativeTime, useFileTree, useTableDataHandler };