bianic-ui 2.10.0-beta.2 → 2.10.2-beta.1

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface CountdownProps extends React.ComponentPropsWithoutRef<'div'> {
     seconds: number;
+    maxSeconds: number;
     variant?: 'countdown' | 'success';
 }
 declare const Countdown: React.ForwardRefExoticComponent<CountdownProps & React.RefAttributes<HTMLDivElement>>;

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/Forms/SelectInput/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import SelectInputProps from './PropsInterface';
-declare function SelectInput({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
+declare function SelectInput({ descText, disabled, size, id, isValid, label, options, readOnly, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;

package/dist/esm/types/components/Icons/Unlinked.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './interface';
+declare const Unlinked: ({ className, fill, size, }: IconProps) => React.JSX.Element;
+export default Unlinked;

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

@@ -15,9 +15,10 @@ export { default as BCNeutral } from './Neutral';
 export { default as BCNode } from './Node';
 export { default as BCOutlet } from './Outlet';
 export { default as BCPort } from './Port';
+export { default as BCRhombus } from './Rhombus';
 export { default as BCSelectAllAdd } from './SelectAllAdd';
 export { default as BCSelectAllRemove } from './SelectAllRemove';
 export { default as BCSpinner } from './Spinner';
 export { default as BCStack } from './Stack';
-export { default as BCRhombus } from './Rhombus';
+export { default as BCUnlinked } from './Unlinked';
 export { default as BCVirtualPort } from './VirtualPort';

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

@@ -7,6 +7,7 @@ export interface PopoverProps {
     title?: string;
     style?: React.CSSProperties;
     zIndex?: number;
+    color?: 'black' | 'white';
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 export interface PopoverItemProps {
@@ -16,5 +17,6 @@ export interface PopoverItemProps {
     style?: React.CSSProperties;
     title: string;
     zIndex?: number;
+    color?: 'black' | 'white';
     direction: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }

package/dist/esm/types/components/Popover/configs.d.ts

@@ -2,42 +2,42 @@ declare const classConfig: {
     top: {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     right: {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     bottom: {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     left: {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     'top-right': {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     'top-left': {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     'bottom-right': {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     'bottom-left': {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
 };
 export default classConfig;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PopoverProps } from './PropInterface';
-declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React.JSX.Element;
+declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, color, }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
         direction: string;

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,13 @@
+import { ComponentPropsWithoutRef, Dispatch, SetStateAction } from 'react';
+import React from 'react';
+interface TableFooterControllerProps extends ComponentPropsWithoutRef<'div'> {
+    size: 'sm' | 'md';
+    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, size, }: TableFooterControllerProps) => React.JSX.Element;
+export default TableFooterController;

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

@@ -0,0 +1,10 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface TableHeaderControllerProps extends ComponentPropsWithoutRef<'div'> {
+    size?: 'sm' | 'md';
+    buttonActions?: ReactNode[];
+    totalData?: number;
+    firstIndex?: number;
+    lastIndex?: number;
+}
+declare const TableHeaderController: ({ size, 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/Tooltip/PropsInterface.d.ts

@@ -10,6 +10,7 @@ interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 interface TooltipItemProps {
+    active?: boolean;
     anchorRef: RefObject<HTMLDivElement>;
     className?: string;
     content: ReactNode | 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/Banner.stories.d.ts

@@ -16,3 +16,4 @@ export declare const DemoIconButtonDanger: Story;
 export declare const DemoIconButtonInfo: Story;
 export declare const DemoIconButtonSuccess: Story;
 export declare const DemoIconButtonWarning: Story;
+export declare const DemoMoreText: Story;

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/Icons/Unlinked.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: ({ className, fill, size, }: import("../../components/Icons/interface").IconProps) => React.JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Preview: Story;

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 {};