npm - 1mpacto-react-ui - Versions diffs - 0.2.0-beta.8 → 1.0.0 - Mend

1mpacto-react-ui 0.2.0-beta.8 → 1.0.0

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 (294) hide show

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

@@ -1,11 +1,13 @@
 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,11 @@
 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 +17,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,7 @@
 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/ButtonIcon/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
 export type TButtonIcomVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | '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' | 'secondary-red-700';
 export type TButtonIconSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs';
 export interface IButtonIcon extends React.ButtonHTMLAttributes<HTMLButtonElement> {

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

@@ -1,6 +1,7 @@
 import { OffsetOptions, UseFloatingOptions } from '@floating-ui/react';
 import { IPopover } from '../Popover';
 import { IButton } from '../Button';
 export interface IButtonPopover extends IButton {
     text?: string;
     startIconShow?: React.ReactNode | React.ReactNode[];

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

@@ -2,9 +2,10 @@ import { CalendarDate } from '@internationalized/date';
 import { ReactNode } from 'react';
 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[]);
@@ -18,17 +19,22 @@ export interface ITimeCalendar {
     minut?: number;
     second?: number;
 }
+export interface ITimeCalendarRange {
+    start?: ITimeCalendar;
+    end?: ITimeCalendar;
+}
 export interface ICalendar extends CalendarStateOptions<DateValue>, ICalendarPrevNextIcon, ICalendarButtonConfirm {
     withConfirm?: boolean;
     isCustomTime?: boolean;
     minDate?: TDateType;
     maxDate?: TDateType;
-    time?: ITimeCalendar;
+    time?: ITimeCalendarRange;
     activeType?: TCalendarType;
     withDateSelect?: boolean;
     type: TCalendarType[];
+    typeTime?: 'SINGLE' | 'RANGE';
     hiddenHeader?: boolean;
-    handlerChangeTime?: (v: ITimeCalendar) => void;
+    handlerChangeTime?: (v: ITimeCalendarRange) => void;
     handlerReset: (v: CalendarState) => void;
     handlerSubmit: () => void;
 }
@@ -42,7 +48,9 @@ export interface ICustomTimeCalendar {
     value?: DateValue | null | undefined;
     minDate?: TDateType;
     maxDate?: TDateType;
+    timeLabel?: string;
     hiddenHeader?: boolean;
+    type: 'start' | 'end';
     handlerChangeTime?: (v: ITimeCalendar) => void;
 }
 export interface ICalendarButton extends AriaButtonOptions<'button'> {
@@ -80,11 +88,21 @@ export interface IDateRange {
 }
 export interface ICalendarDateRange extends RangeCalendarProps<DateValue>, ICalendarPrevNextIcon, ICalendarButtonConfirm {
     withConfirm?: boolean;
+    isCustomTime?: boolean;
+    minDate?: TDateType;
+    maxDate?: TDateType;
+    time?: ITimeCalendarRange;
+    handlerChangeTimeRange?: (v: ITimeCalendarRange) => void;
     handlerSubmit: () => void;
     handlerReset: (v: RangeCalendarState) => void;
 }
 export interface ICalendarRange extends DateRangePickerStateOptions, ICalendarPrevNextIcon, ICalendarButtonConfirm {
     withConfirm?: boolean;
+    isCustomTime?: boolean;
+    minDate?: TDateType;
+    maxDate?: TDateType;
+    time?: ITimeCalendarRange;
+    handlerChangeTimeRange?: (v: ITimeCalendarRange) => void;
     handlerSubmit: () => void;
     handlerReset: (v: RangeCalendarState) => void;
 }

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

@@ -1,5 +1,6 @@
 import { ChartArea, ChartData, ChartDataset, ChartOptions, CoreScaleOptions, Scale, TooltipItem } from 'chart.js';
 import { default as React } from 'react';
 export type TOptionsDoughnutChart = ChartOptions<'doughnut'>;
 export interface IDataDoughnutChart {
     [key: string]: unknown;

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 export interface ICheckboxTable extends React.HTMLProps<HTMLInputElement> {
     indeterminate?: boolean;
     classNameContainer?: string;

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

@@ -1,9 +1,11 @@
 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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
 export interface ICollapse {
     children: ReactNode | ReactNode[];
     open: boolean;

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { ICalendarButtonConfirm, ICalendarPrevNextIcon, IDateRange, TDateType } from '../Calendar';
 import { OffsetOptions, UseFloatingOptions } from '@floating-ui/react';
 export interface IDatePicker extends ICalendarPrevNextIcon, ICalendarButtonConfirm {
     value?: TDateType;
     defaultValue?: TDateType;
@@ -21,11 +22,12 @@ export interface IDatePicker extends ICalendarPrevNextIcon, ICalendarButtonConfi
 }
 export interface IDateRangePicker extends ICalendarPrevNextIcon, ICalendarButtonConfirm {
     defaultValue?: IDateRange;
-    value?: TDateType;
+    value?: IDateRange;
     minDate?: TDateType;
     maxDate?: TDateType;
     withConfirm?: boolean;
     typePicker?: 'SINGLE' | 'RANGE';
+    isCustomTime?: boolean;
     onChange?: (v: IDateRange) => void;
     onReset?: () => void;
 }
@@ -45,6 +47,7 @@ export interface IFilterDate extends ICalendarPrevNextIcon, ICalendarButtonConfi
     onChange?: (v?: IDateRange, labelDesc?: string, label?: IFilterDateButtonList) => void;
     idPopover?: string;
     id?: string;
+    isCustomTime?: boolean;
     floatingOptions?: UseFloatingOptions;
     offsetPopover?: OffsetOptions;
     zIndexPopper?: number | undefined | string;

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

@@ -1,5 +1,5 @@
 export interface IErrorMessage {
     className?: string;
-    variants?: 'laba' | 'payhere';
+    variants?: 'laba' | 'payhere' | 'bill';
     error?: string;
 }

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 export interface IChildFilterContainer {
     handlerOnChange: THandlerOnChangeFilterContainer;
     handlerOnChangeNative: THandlerOnChangeNative;

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

@@ -1,4 +1,5 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 export interface IInputFloatingInner extends InputHTMLAttributes<HTMLInputElement> {
     classNameContainer?: string | undefined;
     classNameLabel?: string | undefined;
@@ -35,3 +36,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/Modal/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ReactNode, ElementType } from 'react';
 export interface IModalDialog<T extends ElementType> {
     as?: T;
     children: ReactNode | ReactNode[];

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

@@ -1,4 +1,5 @@
 import { NumericFormatProps } from 'react-number-format';
 export interface INumberFormat extends NumericFormatProps {
     max?: number | undefined;
     min?: number | undefined;

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

@@ -1,5 +1,7 @@
 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 +22,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,6 @@
 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 +17,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,20 @@
 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,14 @@ 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

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { Props as SelectProps, ActionMeta, GroupBase, SelectComponentsConfig, MultiValue, SingleValue } from 'react-select';
 import { AutoPlacementOptions, FlipOptions, OffsetOptions, UseFloatingOptions } from '@floating-ui/react';
 export interface ISelectDropdownContainer<T> extends Omit<SelectProps<T, boolean, GroupBase<T>>, 'onChange' | 'getOptionLabel'> {
     width?: number | string | ((width: number, value: MultiValue<T> | SingleValue<T> | T | T[] | object) => string | number);
     children: ((params: IChildrenSelectDropdownContainer<T>) => React.ReactNode) | ((params: IChildrenSelectDropdownContainer<T>) => React.ReactNode[]);
@@ -31,7 +32,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,6 @@
 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,6 +11,7 @@ export interface ISidebarModule {
     icon?: string;
     svgIcon?: React.ReactNode | null;
     svgIconActive?: React.ReactNode | null;
+    svgIconHover?: React.ReactNode | null;
     manualRoute?: boolean;
     propsLink?: (value: string, item: ISidebarModule) => object;
     [key: string]: unknown;
@@ -29,6 +31,7 @@ export interface ISidebar<T extends React.ElementType> extends React.HTMLAttribu
     onClickItems?: (v: ISidebarModule) => void;
     propsLink?: (value: string, item: ISidebarModule) => object;
     withInheritance?: boolean;
+    id?: string;
 }
 export interface IItemSidebar<T extends React.ElementType> extends ISidebarModule {
     as?: T;

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 export interface IDataStepList {
     step: number;
     value?: string | number | React.ReactNode | React.ReactNode[];

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

@@ -1,7 +1,20 @@
 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 +28,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 +54,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 +67,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 +77,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 +101,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 +131,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,16 @@
 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 +26,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/TextEditor/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { IAllProps } from '@tinymce/tinymce-react';
 export interface ITextEditorProps extends IAllProps {
     id: string;
     label?: string;

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 export interface ITextarea extends React.InputHTMLAttributes<HTMLTextAreaElement> {
     classNameContainer?: string | undefined;
     id?: string | undefined;
@@ -28,3 +29,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,29 @@
+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/Timeline/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
 export interface ITimelineLayout {
     children: ReactNode | ReactNode[];
     id?: string;

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

@@ -2,6 +2,7 @@ import { FloatingArrowProps, UseFloatingOptions } from '@floating-ui/react';
 import { default as React } from 'react';
 import { IColor } from '../../../config/tailwind/colors';
 import { IPopover } from '../Popover';
 export interface ITooltip {
     id?: string;
     children: string | React.ReactNode | React.ReactNode[];

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

@@ -1,7 +1,9 @@
 import { default as React } from 'react';
 import { IInputReguler } from '../Input';
 import { IButton } from '../Button';
 export interface IUploadFile {
+    id?: string;
     onChange: (v?: File | null) => void;
     validateFile?: string[];
     maxFile?: number;
@@ -24,6 +26,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 +43,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/interfaces/components/Virtualization/ListVirtualization.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Components } from 'react-virtuoso';
 export interface IStyleHeight {
     height?: number;
 }