bianic-ui 2.10.0-beta.2 → 2.10.1

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/types/image/index.d.ts

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/esm/Empty.svg

@@ -0,0 +1,12 @@
+<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="#DADEEB"/>
+<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="white" fill-opacity="0.5"/>
+<path d="M34.3638 11.5V16.1283C34.3638 21.0391 30.3828 25.02 25.472 25.02H20.8438L34.3638 11.5Z" fill="#DADEEB"/>
+<rect x="28.1716" y="32.6677" width="18.7253" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="39.9949" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="47.3223" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="54.6497" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="61.9768" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<path d="M58.7737 63.8789C63.267 59.3856 70.5519 59.3856 75.0452 63.8789C79.5382 68.3722 79.5384 75.6572 75.0452 80.1504C70.552 84.6436 63.267 84.6434 58.7737 80.1504C54.2804 75.6571 54.2804 68.3722 58.7737 63.8789Z" stroke="#54A0F9" stroke-width="1.70457"/>
+<path d="M75.6475 80.1499L81.9753 86.4778" stroke="#54A0F9" stroke-width="1.70457"/>
+</svg>