npm - 1mpacto-react-ui - Versions diffs - 0.2.0-beta.2 → 0.2.0-beta.21 - Mend

1mpacto-react-ui 0.2.0-beta.2 → 0.2.0-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/dist/src/hooks/useOtpInput.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export interface IUseOtpInput {
+    id?: string;
+    numInputs: number;
+    onComplete?: (otp: string) => void;
+    disableFocusOnEdit?: boolean;
+    blurOnComplete?: boolean;
+    disableOnComplete?: boolean;
+}
+export interface IInputProps {
+    id: string;
+    ref: (el: HTMLInputElement | null) => void;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onPaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+    onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    disabled: boolean;
+    type: 'text';
+    inputMode: 'numeric';
+    autoComplete: 'one-time-code';
+    'aria-label': string;
+}
+export interface IInputData {
+    id: string;
+    ref: (el: HTMLInputElement | null) => void;
+    value: string;
+    disabled: boolean;
+    type: 'text';
+    inputMode: 'numeric';
+    isOtpFilled: boolean;
+}
+export interface IUseOtpInputReturn {
+    getInputProps: (index: number) => IInputProps;
+    getInputData: (index: number) => IInputData;
+    clearOtp: () => void;
+    otpValues: string[];
+    otpString: string;
+    isOtpComplete: boolean;
+}
+export declare const useOtpInput: ({ id, numInputs, onComplete, disableFocusOnEdit, blurOnComplete, disableOnComplete, }: IUseOtpInput) => IUseOtpInputReturn;
+export default useOtpInput;

package/dist/src/interfaces/components/Badges/index.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
 import { IBorderRadius } from '../../../config/components/borderRadius';
 import { Itypography } from '../../../config/components/typography';
+import { TFont } from '../../../config/components/font';
 export interface IBadges extends React.HTMLAttributes<HTMLSpanElement> {
     children: ReactNode | ReactNode[];
     className?: string | undefined;
     rounded?: IBorderRadius;
     variants?: 'filled-gray-600' | 'filled-green-600' | 'filled-green-50' | 'filled-blue-gray-50' | 'filled-red-500' | 'filled-blue-600' | 'filled-amber-800' | 'filled-pink-600' | 'filled-lime-700' | 'filled-lime-900-bg_lime-100' | 'filled-red-900' | 'filled-laba-green-10' | 'filled-cyan-800-bg_cyan-100' | 'ghost-gray-200' | 'ghost-green-100' | 'ghost-red-100' | 'ghost-blue-100' | 'ghost-amber-100' | 'ghost-laba-orange-01' | 'ghost-laba-green-01' | 'ghost-laba-green-02' | 'ghost-laba-blue-02' | 'ghost-laba-blue-01' | 'ghost-laba-grey-05' | 'ghost-laba-red-01' | 'outline-gray-600' | 'outline-green-600' | 'outline-red-500' | 'outline-blue-600' | 'outline-amber-800' | 'outline-laba-blue-01' | 'outline-laba-orange-06' | 'outline-laba-orange-06-bg_laba-orange-01' | 'outline-laba-red-06' | 'outline-laba-green-06';
-    fonts?: 'lato' | 'inter';
+    fonts?: TFont;
     typography?: Itypography;
 }

package/dist/src/interfaces/components/Breadcrumbs/index.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { ReactNode, ElementType, HTMLAttributes } from 'react';
 import { IGap } from '../../../config/components/gap';
+import { TFont } from '../../../config/components/font';
 export interface IBreadcrumbs<T extends ElementType> extends HTMLAttributes<HTMLDivElement> {
     as?: T;
-    fonts?: 'lato' | 'inter';
-    variants?: 'laba-blue-10' | 'blue-700';
+    fonts?: TFont;
+    variants?: 'laba-blue-10' | 'blue-700' | 'bill-secondary-800';
     urls: string[];
     textBreadcrumbs: string[];
     onClickBreadcrumbs?: (() => void | undefined)[];
@@ -15,4 +16,7 @@ export interface IBreadcrumbs<T extends ElementType> extends HTMLAttributes<HTML
     iconAction?: ReactNode | ReactNode[];
     separator?: ReactNode | ReactNode[] | string;
     propsLink?: (value: string, index: number, urls: string[]) => object;
+    classNameAction?: string;
+    classNameUrl?: string;
+    renderAction?: () => ReactNode | ReactNode[];
 }

package/dist/src/interfaces/components/Button/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-export type TButtonVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'ghost-blue-gray-100-bg_white-text_blue-gray-400' | 'ghost-laba-blue-05' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-08' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'ghost-laba-blue-01' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'secondary-red-700';
-export type TButtonSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs';
+export type TButtonVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'ghost-blue-gray-100-bg_white-text_blue-gray-400' | 'ghost-laba-blue-05' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-08' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'ghost-laba-blue-01' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'secondary-red-700' | 'tertiary-black' | 'primary-bill-primary-600' | 'secondary-bill-secondary-800' | 'tertiary-bill-secondary-800' | 'primary-bill-red-700';
+export type TButtonSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs' | 'bill-l' | 'bill-m' | 'bill-s' | 'bill-xs';
 export interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     size?: TButtonSize;
     variants?: TButtonVariants;

package/dist/src/interfaces/components/Calendar/index.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { AriaButtonOptions, DateValue, RangeCalendarProps } from 'react-aria';
 import { CalendarState, CalendarStateOptions, DateRangePickerStateOptions, RangeCalendarState } from 'react-stately';
 export type TCalendarType = 'date' | 'month' | 'year';
 export type TDateType = Date | string | null | undefined;
-export type TKeyLocale = 'id' | 'enUS' | 'nl';
+export type TKeyLocale = 'id-ID' | 'en-US' | 'nl-NL' | 'zh-CN';
 export interface ICalendarPrevNextIcon {
     prevIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
     nextIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);

package/dist/src/interfaces/components/Chips/index.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { Itypography } from '../../../config/components/typography';
+import { TFont } from '../../../config/components/font';
 export interface IChips extends React.HTMLAttributes<HTMLSpanElement> {
     children: ReactNode | ReactNode[];
     className?: string | undefined;
-    fonts?: 'lato' | 'inter';
+    fonts?: TFont;
     size?: 'reguler' | 'small' | 'l' | 's';
     variants?: 'filled-laba-blue-10' | 'ghost-laba-grey-02' | 'nude-laba-grey-10' | 'filled-blue-gray-100' | 'filled-gray-300';
     icon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);

package/dist/src/interfaces/components/Collapse/index.d.ts CHANGED Viewed

@@ -9,3 +9,10 @@ export interface ICollapse {
     triggerCalCulateContainer?: number | string | boolean | object;
     delayTriggerCalculateHeight?: number;
 }
+export interface ICollapseV2 {
+    children: ReactNode | ReactNode[];
+    open: boolean;
+    id: string;
+    className?: string;
+    classNameContainer?: string | undefined;
+}

package/dist/src/interfaces/components/Input/index.d.ts CHANGED Viewed

@@ -35,3 +35,16 @@ export interface IInputNative extends InputHTMLAttributes<HTMLInputElement> {
     sizeInput?: 's' | 'xs' | 'l';
     classNameLabelError?: string | undefined;
 }
+export interface IInputInnerLabel extends InputHTMLAttributes<HTMLInputElement> {
+    classNameContainer?: string | undefined;
+    id?: string | undefined;
+    label?: string;
+    type?: string;
+    startIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
+    endIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
+    isRequired?: boolean;
+    error?: string | undefined;
+    sizeInput?: 'large' | 'small';
+    classNameLabel?: string | undefined;
+    classNameLabelError?: string | undefined;
+}

package/dist/src/interfaces/components/Pagination/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { OffsetOptions } from '@floating-ui/react';
 import { ReactNode } from 'react';
+import { TKeyLocale } from '../Calendar';
 export type TKindPaginationType = 'box' | 'nude';
 export interface IPagination {
     pageNumber: number;
@@ -20,4 +21,5 @@ export interface IPaginationProps extends IPagination {
     withOptionPageSize?: boolean;
     withGotoPage?: boolean;
     withMorePage?: boolean;
+    locale?: TKeyLocale;
 }

package/dist/src/interfaces/components/Popover/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FlipOptions, AutoPlacementOptions, UseFloatingOptions, OffsetOptions, FloatingArrowProps } from '@floating-ui/react';
+import { FlipOptions, AutoPlacementOptions, UseFloatingOptions, OffsetOptions, FloatingArrowProps, FloatingFocusManagerProps, UseDismissProps } from '@floating-ui/react';
 export interface IPopover extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode | ReactNode[];
     className?: string | undefined;
@@ -16,6 +16,8 @@ export interface IPopover extends React.HTMLAttributes<HTMLDivElement> {
     withArrow?: boolean;
     propsArrow?: Partial<FloatingArrowProps>;
     onClose?: () => void;
+    floatingFocusManagerProps?: Omit<FloatingFocusManagerProps, 'context' | 'children'>;
+    useDismissProps?: UseDismissProps;
 }
 export interface IRefPopover {
     show: boolean;

package/dist/src/interfaces/components/RadioCheckbox/RadioCheckbox.d.ts CHANGED Viewed

@@ -1,18 +1,19 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 import { IBorderRadius } from '../../../config/components/borderRadius';
 import { Itypography } from '../../../config/components/typography';
+import { TFont } from '../../../config/components/font';
 export interface IRadioCheckbox extends InputHTMLAttributes<HTMLInputElement> {
     classNameContainer?: string | undefined;
     classNameLabel?: string | undefined;
     classNameCheckedIcon?: string | undefined;
     classNameContainerCheckedIcon?: string | undefined;
     sizeInput?: 'reguler' | 'small' | 's' | 'm';
-    variants?: 'laba-blue-10' | 'blue-700' | 'blue-700-hv_bg_transparent' | 'laba-blue-10-hv_bg_transparent';
+    variants?: 'laba-blue-10' | 'blue-700' | 'blue-700-hv_bg_transparent' | 'laba-blue-10-hv_bg_transparent' | 'bill-primary-500' | 'bill-primary-600-hv_bg_transparent' | 'bill-secondary-800-hv_bg_transparent';
     variantDisableds?: 'default-disabled-checkbox' | 'default-disabled-radio';
     borderRadius?: IBorderRadius;
     checkedIcon?: ReactNode | ReactNode[];
     type?: 'checkbox' | 'radio';
-    fonts?: 'lato' | 'inter';
+    fonts?: TFont;
     label?: string;
     typography?: Itypography;
 }

package/dist/src/interfaces/components/RadioCheckbox/RadioCheckboxLabel.d.ts CHANGED Viewed

@@ -2,12 +2,13 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 import { Itypography } from '../../../config/components/typography';
 import { IRadioCheckbox } from './RadioCheckbox';
 import { IBorderRadius } from '../../../config/components/borderRadius';
+import { TFont } from '../../../config/components/font';
 export interface IRadioCheckboxLabel extends InputHTMLAttributes<HTMLInputElement> {
     typographyLabel?: Itypography;
     typographyDesc?: Itypography;
     borderRadius?: IBorderRadius;
     type?: 'checkbox' | 'radio';
-    fonts?: 'lato' | 'inter';
+    fonts?: TFont;
     radioCheckboxProps?: IRadioCheckbox;
     variants?: 'blue-50' | 'laba-blue-01';
     label: string | ReactNode | ReactNode[];

package/dist/src/interfaces/components/SelectDropdownContainer/index.d.ts CHANGED Viewed

@@ -31,7 +31,7 @@ export interface ISelectDropdownContainer<T> extends Omit<SelectProps<T, boolean
     offsetPopover?: OffsetOptions;
     errorLabel?: 'payhere' | 'laba';
     actionValueChange?: (value: MultiValue<T> | SingleValue<T> | T | T[] | object) => void;
-    controlType?: 'laba' | 'payhere';
+    controlType?: 'laba' | 'payhere' | 'bill';
 }
 export interface IChildrenSelectDropdownContainer<T> {
     selectValue: T | T[] | object;

package/dist/src/interfaces/components/Sidebar/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export type TVariantSidebarType = 'payhere-brand-base-white' | 'payhere-brand-base-transparent' | 'laba-white';
+export type TVariantSidebarType = 'payhere-brand-base-white' | 'payhere-brand-base-transparent' | 'laba-white' | 'lpd-brand-base-transparent' | 'lpd-brand-base-transparent-responsive' | 'lpd-brand-base-white' | 'lpd-brand-base-white-responsive' | 'bill-brand-base-white' | 'bill-brand-base-white-responsive';
 export interface ISidebarModule {
     name: string;
     label: string;
@@ -10,8 +10,10 @@ export interface ISidebarModule {
     icon?: string;
     svgIcon?: React.ReactNode | null;
     svgIconActive?: React.ReactNode | null;
+    svgIconHover?: React.ReactNode | null;
     manualRoute?: boolean;
-    propsLink?: (value: string) => object;
+    propsLink?: (value: string, item: ISidebarModule) => object;
+    [key: string]: unknown;
 }
 export interface ISidebar<T extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
     as?: T;
@@ -26,8 +28,9 @@ export interface ISidebar<T extends React.ElementType> extends React.HTMLAttribu
     toleranceWidthIconCompany?: number;
     footer?: React.ReactNode | React.ReactNode[] | (() => React.ReactNode) | (() => React.ReactNode[]);
     onClickItems?: (v: ISidebarModule) => void;
-    propsLink?: (value: string) => object;
+    propsLink?: (value: string, item: ISidebarModule) => object;
     withInheritance?: boolean;
+    id?: string;
 }
 export interface IItemSidebar<T extends React.ElementType> extends ISidebarModule {
     as?: T;
@@ -38,7 +41,7 @@ export interface IItemSidebar<T extends React.ElementType> extends ISidebarModul
     variant?: TVariantSidebarType;
     setShow: (v: string) => void;
     onClickItems?: (v: ISidebarModule) => void;
-    propsLink?: (value: string) => object;
+    propsLink?: (value: string, item: ISidebarModule) => object;
     linkComponent?: T;
 }
 export interface ICloneElementSidebar {

package/dist/src/interfaces/components/Switch/index.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ export interface ISwitch {
     className?: string | undefined;
     classNameTitle?: string | undefined;
     classNameDesc?: string | undefined;
-    kind?: 'payhere' | 'laba';
+    kind?: 'payhere' | 'laba' | 'bill';
     onChange: (v: boolean) => void;
 }
 export {};

package/dist/src/interfaces/components/Table/index.d.ts CHANGED Viewed

@@ -2,6 +2,18 @@ import { Table as ITableTanstack, Row, ColumnDef } from '@tanstack/react-table';
 import { default as React } from 'react';
 import { ITableVirtualization, IWrapperProps } from '../Virtualization/TableVirtualization';
 export type ITableColumnDef<T = unknown> = ColumnDef<T>;
+export interface ITableColumnBreakpoint {
+    maxWidth?: number;
+    minWidth?: number;
+    columns: string[];
+    realColumns?: string[];
+    resetExpanded?: boolean;
+}
+export type TTableRenderSubComponent<T = unknown> = (original: T, row: Row<T>, other: {
+    visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+    classNameSubMobile: string;
+}) => React.ReactNode | React.ReactNode[];
+export type TTableHandlerRowClick<T = unknown> = (original: T, row: Row<T>) => void;
 export interface ITable<T = unknown> {
     tableInstance: ITableTanstack<T>;
     classNameWrapperTable?: string;
@@ -15,19 +27,23 @@ export interface ITable<T = unknown> {
     tbodyTrId?: (row: Row<T>) => string | undefined;
     maxHeight?: number;
     idCalculateHeight?: string;
-    kind?: 'laba-reguler' | 'payhere-reguler' | 'laba-small';
+    kind?: 'laba-reguler' | 'payhere-reguler' | 'laba-small' | 'bill-reguler';
     variant?: 'laba-grey-02';
     componentSortASC?: Element | React.ReactNode | React.ReactNode[];
     componentSortDESC?: Element | React.ReactNode | React.ReactNode[];
     scrollTop?: boolean;
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    renderSubComponent?: (original: T, row: Row<T>, other: {
+        visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+        classNameSubMobile: string;
+    }) => React.ReactNode | React.ReactNode[];
+    columnBreakpoints?: ITableColumnBreakpoint[];
 }
 export interface INonVirtualization<T = unknown> {
     tableInstance: ITableTanstack<T>;
     classNameWrapperTable?: string;
     classNameTable?: string;
-    handlerRowClick?: (original: T, row: Row<T>) => void;
+    handlerRowClick?: ITable<T>['handlerRowClick'];
     privillageRowClick?: boolean;
     headerId?: string;
     tbodyTrId: (row: Row<T>) => string | undefined;
@@ -37,7 +53,9 @@ export interface INonVirtualization<T = unknown> {
     componentSortDESC: Element | React.ReactNode | React.ReactNode[];
     classNamePointer: string;
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    renderSubComponent?: ITable<T>['renderSubComponent'];
+    visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+    classNameSubMobile: string;
 }
 export interface IVirtualizationProps extends Omit<ITableVirtualization, 'typeHight' | 'itemContent' | 'fixedHeaderContent' | 'itemSizeNames'> {
     typeHight?: 'min-max' | 'container';
@@ -48,7 +66,7 @@ export interface IVirtualizationProps extends Omit<ITableVirtualization, 'typeHi
 export interface IVirtualization<T = unknown> {
     tableInstance: ITableTanstack<T>;
     classNameWrapperTable?: string;
-    handlerRowClick?: (original: T, row: Row<T>) => void;
+    handlerRowClick?: ITable<T>['handlerRowClick'];
     privillageRowClick?: boolean;
     virtualizationProps?: IVirtualizationProps;
     headerId?: string;
@@ -58,7 +76,9 @@ export interface IVirtualization<T = unknown> {
     componentSortDESC: Element | React.ReactNode | React.ReactNode[];
     classNamePointer: string;
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    renderSubComponent?: ITable<T>['renderSubComponent'];
+    visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+    classNameSubMobile: string;
 }
 export interface IVirtualizationHead extends React.HTMLAttributes<HTMLTableSectionElement> {
     context?: {
@@ -80,11 +100,19 @@ export interface ITableConfig {
         'payhere-reguler': string;
         'laba-reguler': string;
         'laba-small': string;
+        'bill-reguler': string;
+    };
+    subMobile: {
+        'payhere-reguler': string;
+        'laba-reguler': string;
+        'laba-small': string;
+        'bill-reguler': string;
     };
     pointer: {
         'payhere-reguler': string;
         'laba-reguler': string;
         'laba-small': string;
+        'bill-reguler': string;
     };
     utility: {
         'table-scroll-top': string;
@@ -102,6 +130,10 @@ export interface ITableConfig {
             asc: Element | React.ReactNode | React.ReactNode[];
             desc: Element | React.ReactNode | React.ReactNode[];
         };
+        'bill-reguler': {
+            asc: Element | React.ReactNode | React.ReactNode[];
+            desc: Element | React.ReactNode | React.ReactNode[];
+        };
     };
     variant: {
         'laba-grey-02': string;

package/dist/src/interfaces/components/Tabs/index.d.ts CHANGED Viewed

@@ -1,12 +1,15 @@
 import { IBorderRadius } from '../../../config/components/borderRadius';
-export type TVariantTabs = 'original-laba-blue-10' | 'container-payhere-brand-base' | 'container-laba-blue-10' | 'container-laba-blue-10-bg_white';
+import { TKeyLocale } from '../Calendar';
+export type TVariantTabs = 'original-laba-blue-10' | 'container-payhere-brand-base' | 'container-payhere-brand-base-bg_white' | 'container-laba-blue-10' | 'container-laba-blue-10-bg_white' | 'original-bill-secondary-800';
 export type TSizeTabs = 'tabs-m' | 'tabs-s' | 'tabs-medium' | 'tabs-small';
+export type TTypeEventTabs = 'change' | 'mounted';
 export interface ITabsList {
     id: string | number;
     label: string | number;
     isHide?: boolean;
     className?: string;
     activeColor?: string;
+    locale?: Partial<Record<TKeyLocale, string>>;
 }
 export interface ITabs {
     id?: string;
@@ -22,8 +25,9 @@ export interface ITabs {
     disabled?: boolean;
     animation?: boolean;
     mountedExecuteChange?: boolean;
-    onChange?: (v: ITabsList) => void;
+    onChange?: (v: ITabsList, sourceEvent: TTypeEventTabs) => void;
     typeButton?: 'button' | 'submit';
+    locale?: TKeyLocale;
 }
 export interface IStyleTabs {
     width: number;

package/dist/src/interfaces/components/Textarea/index.d.ts CHANGED Viewed

@@ -28,3 +28,16 @@ export interface ITextareaFloatingInner extends React.InputHTMLAttributes<HTMLTe
     translateLabel?: number;
     autoTranslateLabel?: boolean;
 }
+export interface ITextareaInnerLabel extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+    classNameContainer?: string | undefined;
+    id?: string | undefined;
+    label?: string;
+    type?: string;
+    isRequired?: boolean;
+    error?: string | undefined;
+    sizeInput?: 'large' | 'small';
+    classNameLabel?: string | undefined;
+    classNameLabelError?: string | undefined;
+    maxHeight?: number;
+    minHeight?: number;
+}

package/dist/src/interfaces/components/TimeRange/index.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { UseFloatingOptions } from '@floating-ui/react';
+import { ReactNode } from 'react';
+import { TKeyLocale } from '../Calendar';
+export type TTimeRangeValue = [[string, string], [string, string]];
+export interface ITimeRange {
+    id?: string;
+    value?: TTimeRangeValue;
+    zIndexPopper?: number;
+    offsetPopover?: number;
+    classNameContainer?: string;
+    className?: string;
+    buttonClick?: (value: TTimeRangeValue, formatValue: string) => ReactNode;
+    onChange?: (value: TTimeRangeValue) => void;
+    floatingOptions?: UseFloatingOptions;
+    locale?: TKeyLocale;
+    buttonReset?: (() => ReactNode) | (() => ReactNode[]);
+    buttonSubmit?: (() => ReactNode) | (() => ReactNode[]);
+    disableValidation?: boolean;
+}
+export interface ITimeRangeListTime {
+    type: 'start' | 'end';
+    value: TTimeRangeValue[0];
+    values: TTimeRangeValue;
+    onChange: (value: TTimeRangeValue[0]) => void;
+    locale: TKeyLocale;
+    disableValidation: boolean;
+}
+export type TRenderTimeRageText = (value: TTimeRangeValue, locale: TKeyLocale) => string;

package/dist/src/interfaces/components/TruncateComponent/index.d.ts CHANGED Viewed

@@ -1,11 +1,9 @@
 export interface ITruncateComponent extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode[] | React.ReactNode;
-    initialVisibleCount: number;
     maxWidth?: string;
-    moreElement: (count: number) => React.ReactNode | (() => React.ReactNode[]);
+    moreElement: (count: number) => React.ReactNode | React.ReactNode[];
     style?: React.CSSProperties;
     className?: string;
     gap?: number;
     gapStyle?: string;
-    triggerCalCulateContainer?: number | string | boolean | object;
 }

package/dist/src/interfaces/components/UploadFile/index.d.ts CHANGED Viewed

@@ -24,6 +24,7 @@ export interface IUploadImage {
     classNameContainer?: string | undefined;
     classNameImage?: string | undefined;
     classNameAction?: string | undefined;
+    id?: string;
 }
 export interface IUploadMultipleFile {
     onChange?: (v?: File[] | null) => void;
@@ -40,6 +41,7 @@ export interface IUploadMultipleFile {
     handlerDownload?: (value: IUploadMultipleFileValue) => void;
     priorityError?: 'internal' | 'external';
     eventError?: (message: string) => void;
+    locationRemoveElement?: 'left' | 'right';
 }
 export interface IUploadMultipleFileValue {
     name?: string;

package/dist/src/utils/common.d.ts CHANGED Viewed

@@ -9,10 +9,10 @@ export declare function parseBigDecimal<T extends {
 }>(value: number | string, options?: T): T['instance'] extends true ? TypeBigNumber : string;
 export declare const parseDecimal: (value: number | string, decimals?: number) => number;
 export declare function formatNumber(number: number, style?: 'currency' | 'decimal', options?: {
-    minimumFractionDigits: number;
-    locale: string;
-    currency: string;
-    withSpace: boolean;
+    minimumFractionDigits?: number;
+    locale?: string;
+    currency?: string;
+    withSpace?: boolean;
 }): string;
 export declare const formatDate: (date: TDateType, format?: string, defaultValue?: string, keyLocale?: TKeyLocale) => string;
 export declare const formatDateRange: (startDate: TDateType, endDate: TDateType, format?: string, separator?: string, defaultValue?: string, keyLocale?: TKeyLocale) => string;
@@ -53,6 +53,8 @@ export declare function transformSecondTime(secs: number, option?: {
     second: string | number;
 };
 export declare function mergeObjects<T>(target: T, ...sources: unknown[]): T;
+export declare function deleteKeysMutable<T = Record<string | number, unknown>>(obj: T, paths: string | string[]): T;
+export declare function deleteKeysImmutable<T = Record<string | number, unknown>>(obj: T, paths: string | string[]): T;
 export declare const transformNumber: (val: string) => number;
 export declare const transformBigNumber: (val: TBigNumber) => string;
 export declare const transfromIsNan: (value: number) => number | undefined;
@@ -62,3 +64,4 @@ export declare function parseFileName(fileName: string): {
     extension: string;
 };
 export declare const extractElementStringToOriginalValue: (value: string) => string;
+export declare function encryptRSAOAEP<T = object>(data: T, base64Key: string): string;