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

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;
@@ -153,6 +153,7 @@ declare function Color(): React$1.JSX.Element;
 
 interface CountdownProps extends React$1.ComponentPropsWithoutRef<'div'> {
     seconds: number;
+    maxSeconds: number;
     variant?: 'countdown' | 'success';
 }
 declare const Countdown: React$1.ForwardRefExoticComponent<CountdownProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -328,8 +329,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 +357,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;
     };
@@ -379,7 +381,7 @@ interface SelectInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size
     dropContProps?: Omit<DropdownContainerProps, 'children'>;
 }
 
-declare function SelectInput({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React$1.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$1.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;
@@ -600,6 +602,8 @@ declare const Outlet: ({ className, fill, size }: IconProps) => React$1.JSX.Elem
 
 declare const Port: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
+declare const Rhombus: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
+
 declare const SelectAllAdd: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
 declare const SelectAllRemove: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
@@ -608,7 +612,7 @@ declare const Spinner$1: ({ className, fill, size }: IconProps) => React$1.JSX.E
 
 declare const Stack: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
-declare const Rhombus: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
+declare const Unlinked: ({ className, fill, size, }: IconProps) => React$1.JSX.Element;
 
 declare const VirtualPort: ({ className, fill, size }: IconProps) => React$1.JSX.Element;
 
@@ -678,10 +682,11 @@ 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';
 }
 
-declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React$1.JSX.Element;
+declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, color, }: PopoverProps): React$1.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
         direction: string;
@@ -723,26 +728,56 @@ declare namespace ResizeableDiv {
     };
 }
 
-interface SidebarContainerProps {
-    bgColor?: string;
-    children?: ReactNode | undefined;
+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$1.JSX.Element;
+declare const SidebarContainer: React$1.ForwardRefExoticComponent<SidebarContainerProps & React$1.RefAttributes<HTMLDivElement>>;
 
+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$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: 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 SidebarItem: ({ title, icon, active, onClick, children, isMinimized, isExpand, notificationCount, level, }: SidebarItemProps) => React$1.JSX.Element;
+declare const SidebarProfile: React$1.ForwardRefExoticComponent<SidebarProfileProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface SliderProps {
     disabled: boolean;
@@ -785,6 +820,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 +843,59 @@ 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'> {
+    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$1.JSX.Element;
+
+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$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 +1049,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, Unlinked as BCUnlinked, 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 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "2.10.0-beta.2",
+  "version": "2.10.2-beta.1",
   "description": "Design Language System develop by BIAENERGI",
   "repository": {
     "type": "git",

package/tailwind.config.js

@@ -474,6 +474,10 @@ module.exports = {
       },
     },
     extend: {
+      animation: {
+        // 0.45s animation duration running once, maintaining final state
+        'number-drop': 'number-drop 0.45s cubic-bezier(0.25, 1, 1, 1) forwards',
+      },
       borderRadius: {
         'radius-lg': '5px',
         'radius-md': '4px',
@@ -481,7 +485,6 @@ module.exports = {
         'radius-tn': '2.5px',
         'radius-full': '1000px',
       },
-
       fontFamily: {
         humnst777: ['humnst777', 'sans-serif'],
         segoe: ['SegoeUI', 'sans-serif'],
@@ -568,6 +571,21 @@ module.exports = {
           },
         ],
       },
+      keyframes: {
+        'number-drop': {
+          '0%': { 
+            transform: 'translateY(-50%)', 
+            opacity: '0' 
+          },
+          '40%': { 
+            transform: 'translateY(7%)', 
+            opacity: '1' 
+          },
+          '100%': { 
+            transform: 'translateY(0)'
+          },
+        },
+      },
     },
   },
   plugins: [],