1mpacto-react-ui 0.0.6 → 0.0.8

package/dist/src/components/index.d.ts

@@ -1,4 +1,32 @@
 import { default as TPublish } from './TPublish/TPublish';
 import { default as Button } from './Button/Button';
+import { default as Popover } from './Popover/Popover';
+import { IRefPopover } from '../interfaces/components/Popover';
+import { default as InputFloatingInner } from './Input/InputFloatingInner';
+import { default as InputReguler } from './Input/InputReguler';
+import { default as Table } from './Table/Table';
+import { ITableColumnDef } from '../interfaces/components/Table';
+import { default as TableVirtualization } from './Virtualization/TableVirtualization';
+import { TableVirtuosoHandle as IRefTableVirtualization, VirtuosoHandle as IRefListVirtualization } from 'react-virtuoso';
+import { default as ListVirtualization } from './Virtualization/ListVirtualization';
+import { default as Tabs } from './Tabs/Tabs';
+import { default as TabPanel } from './Tabs/TabPanel';
+import { default as Pagination } from './Pagination/Pagination';
+import { default as SelectDropdownContainer } from './SelectDropdownContainer/SelectDropdownContainer';
+import { IRefSelectDropdownContainer, IChildrenSelectDropdownContainer } from '../interfaces/components/SelectDropdownContainer';
+import { default as Calendar } from './Calendar/Calendar';
+import { default as CalendarRange } from './Calendar/CalendarRange';
+import { default as DatePicker } from './DatePicker/DatePicker';
+import { default as DateRangePicker } from './DatePicker/DateRangePicker';
+import { default as FilterDate } from './DatePicker/FilterDate';
+import { default as Switch } from './Switch/Switch';
+import { default as ButtonIcon } from './ButtonIcon/ButtonIcon';
+import { default as Badges } from './Badges/Badges';
+import { default as Chips } from './Chips/Chips';
+import { default as RadioCheckbox } from './RadioCheckbox/RadioCheckbox';
+import { default as RadioCheckboxLabel } from './RadioCheckbox/RadioCheckboxLabel';
+import { default as Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
 
-export { TPublish, Button };
+import * as utilTable from '@tanstack/react-table';
+export { TPublish, Button, Popover, Calendar, CalendarRange, DatePicker, DateRangePicker, FilterDate, InputFloatingInner, InputReguler, Pagination, Tabs, TabPanel, Table, TableVirtualization, ListVirtualization, SelectDropdownContainer, utilTable, Switch, ButtonIcon, Badges, Chips, RadioCheckbox, RadioCheckboxLabel, Breadcrumbs, };
+export type { ITableColumnDef, IRefPopover, IRefTableVirtualization, IRefListVirtualization, IRefSelectDropdownContainer, IChildrenSelectDropdownContainer, };

package/dist/src/config/components/borderRadius.d.ts

@@ -0,0 +1,12 @@
+export type IBorderRadius = '0px' | '2px' | '4px' | '6px' | '8px' | '12px' | '16px' | '24px' | 'full';
+export declare const configBorderRadius: {
+    '0px': string;
+    '2px': string;
+    '4px': string;
+    '6px': string;
+    '8px': string;
+    '12px': string;
+    '16px': string;
+    '24px': string;
+    full: string;
+};

package/dist/src/config/components/gap.d.ts

@@ -0,0 +1,51 @@
+export type IGap = 'gap-0' | 'gap-x-0' | 'gap-y-0' | 'gap-px' | 'gap-x-px' | 'gap-y-px' | 'gap-0.5' | 'gap-x-0.5' | 'gap-y-0.5' | 'gap-1' | 'gap-x-1' | 'gap-y-1' | 'gap-1.5' | 'gap-x-1.5' | 'gap-y-1.5' | 'gap-2' | 'gap-x-2' | 'gap-y-2' | 'gap-2.5' | 'gap-x-2.5' | 'gap-y-2.5' | 'gap-3' | 'gap-x-3' | 'gap-y-3' | 'gap-3.5' | 'gap-x-3.5' | 'gap-y-3.5' | 'gap-4' | 'gap-x-4' | 'gap-y-4' | 'gap-5' | 'gap-x-5' | 'gap-y-5' | 'gap-6' | 'gap-x-6' | 'gap-y-6' | 'gap-7' | 'gap-x-7' | 'gap-y-7' | 'gap-8' | 'gap-x-8' | 'gap-y-8' | 'gap-9' | 'gap-x-9' | 'gap-y-9' | 'gap-10' | 'gap-x-10' | 'gap-y-10';
+export declare const configGap: {
+    'gap-0': string;
+    'gap-x-0': string;
+    'gap-y-0': string;
+    'gap-px': string;
+    'gap-x-px': string;
+    'gap-y-px': string;
+    'gap-0.5': string;
+    'gap-x-0.5': string;
+    'gap-y-0.5': string;
+    'gap-1': string;
+    'gap-x-1': string;
+    'gap-y-1': string;
+    'gap-1.5': string;
+    'gap-x-1.5': string;
+    'gap-y-1.5': string;
+    'gap-2': string;
+    'gap-x-2': string;
+    'gap-y-2': string;
+    'gap-2.5': string;
+    'gap-x-2.5': string;
+    'gap-y-2.5': string;
+    'gap-3': string;
+    'gap-x-3': string;
+    'gap-y-3': string;
+    'gap-3.5': string;
+    'gap-x-3.5': string;
+    'gap-y-3.5': string;
+    'gap-4': string;
+    'gap-x-4': string;
+    'gap-y-4': string;
+    'gap-5': string;
+    'gap-x-5': string;
+    'gap-y-5': string;
+    'gap-6': string;
+    'gap-x-6': string;
+    'gap-y-6': string;
+    'gap-7': string;
+    'gap-x-7': string;
+    'gap-y-7': string;
+    'gap-8': string;
+    'gap-x-8': string;
+    'gap-y-8': string;
+    'gap-9': string;
+    'gap-x-9': string;
+    'gap-y-9': string;
+    'gap-10': string;
+    'gap-x-10': string;
+    'gap-y-10': string;
+};

package/dist/src/config/components/typography.d.ts

@@ -0,0 +1,37 @@
+export type Itypography = 'payhere-h1' | 'payhere-h2' | 'payhere-h3' | 'payhere-h4' | 'payhere-h5' | 'payhere-h6' | 'payhere-body-lr' | 'payhere-body-lm' | 'payhere-body-ls' | 'payhere-body-lb' | 'payhere-body-mr' | 'payhere-body-mm' | 'payhere-body-ms' | 'payhere-body-mb' | 'payhere-label-r' | 'payhere-label-m' | 'payhere-body-sr' | 'payhere-body-sm' | 'payhere-body-esr' | 'payhere-body-esm' | 'laba-h1' | 'laba-h2' | 'laba-base-rb' | 'laba-base-rs' | 'laba-base-rr' | 'laba-base-sb' | 'laba-base-ss' | 'laba-base-sr' | 'laba-subtitle-rb' | 'laba-subtitle-rs' | 'laba-subtitle-rr' | 'laba-subtitle-sb' | 'laba-subtitle-ss' | 'laba-subtitle-sr';
+export declare const configtypography: {
+    'payhere-h1': string;
+    'payhere-h2': string;
+    'payhere-h3': string;
+    'payhere-h4': string;
+    'payhere-h5': string;
+    'payhere-h6': string;
+    'payhere-body-lr': string;
+    'payhere-body-lm': string;
+    'payhere-body-ls': string;
+    'payhere-body-lb': string;
+    'payhere-body-mr': string;
+    'payhere-body-mm': string;
+    'payhere-body-ms': string;
+    'payhere-body-mb': string;
+    'payhere-label-r': string;
+    'payhere-label-m': string;
+    'payhere-body-sr': string;
+    'payhere-body-sm': string;
+    'payhere-body-esr': string;
+    'payhere-body-esm': string;
+    'laba-h1': string;
+    'laba-h2': string;
+    'laba-base-rb': string;
+    'laba-base-rs': string;
+    'laba-base-rr': string;
+    'laba-base-sb': string;
+    'laba-base-ss': string;
+    'laba-base-sr': string;
+    'laba-subtitle-rb': string;
+    'laba-subtitle-rs': string;
+    'laba-subtitle-rr': string;
+    'laba-subtitle-sb': string;
+    'laba-subtitle-ss': string;
+    'laba-subtitle-sr': string;
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { IBorderRadius } from '../../../config/components/borderRadius';
+
+export interface IBadges extends React.HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode | ReactNode[];
+    className?: string | undefined;
+    rounded?: IBorderRadius;
+    variants?: 'filled-gray-600' | 'filled-green-600' | 'filled-red-500' | 'filled-blue-600' | 'filled-amber-800' | 'ghost-gray-200' | 'ghost-green-100' | 'ghost-red-100' | 'ghost-blue-100' | 'ghost-amber-100' | 'outline-gray-600' | 'outline-green-600' | 'outline-red-500' | 'outline-blue-600' | 'outline-amber-800';
+    fonts?: 'lato' | 'inter';
+}

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

@@ -0,0 +1,19 @@
+import { ReactNode, ElementType, HTMLAttributes } from 'react';
+import { IGap } from '../../../config/components/gap';
+
+export interface IBreadcrumbs<T extends ElementType> extends HTMLAttributes<HTMLDivElement> {
+    as?: T;
+    fonts?: 'lato' | 'inter';
+    variants?: 'laba-blue-10' | 'blue-700';
+    urls: string[];
+    textBreadcrumbs: string[];
+    onClickBreadcrumbs?: (() => void | undefined)[];
+    onClickAction?: () => void;
+    onClickUrls?: (url: string) => void;
+    gapAction?: IGap;
+    gapUrls?: IGap;
+    textAction?: string;
+    iconAction?: ReactNode | ReactNode[];
+    separator?: ReactNode | ReactNode[] | string;
+    propsLink?: (value: string, index: number, urls: string[]) => object;
+}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+export interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: 'large' | 'reguler' | 'small' | 'l' | 'm' | 's' | 'xs';
+    kind?: 'filled' | 'ghost' | 'nude' | 'primary' | 'secondary' | 'tertiary';
+    startIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
+    endIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
+    children: ReactNode | ReactNode[];
+    className?: string | undefined;
+}

package/dist/src/interfaces/components/ButtonIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface IButtonIcon extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: 'large' | 'reguler' | 'small' | 'l' | 'm' | 's' | 'xs';
+    kind?: 'filled' | 'ghost' | 'nude' | 'primary' | 'secondary' | 'tertiary';
+    children: ReactNode | ReactNode[];
+    className?: string | undefined;
+}

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

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

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

@@ -0,0 +1,25 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+export interface IInputFloatingInner extends InputHTMLAttributes<HTMLInputElement> {
+    classNameContainer?: string | undefined;
+    id?: string | undefined;
+    label: string;
+    type?: string;
+    endIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
+    isRequired?: boolean;
+    error?: string | undefined;
+    sizeInput?: 'reguler';
+    classNameLabelError?: string | undefined;
+}
+export interface IInputReguler extends InputHTMLAttributes<HTMLInputElement> {
+    classNameContainer?: string | undefined;
+    id?: string | undefined;
+    label: string;
+    type?: string;
+    endIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
+    isRequired?: boolean;
+    error?: string | undefined;
+    sizeInput?: 'reguler';
+    classNameLabel?: string | undefined;
+    classNameLabelError?: string | undefined;
+}

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { FlipOptions, AutoPlacementOptions } from '@floating-ui/react';
+
+export interface IPopover extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode | ReactNode[];
+    className?: string | undefined;
+    offset?: number;
+    anchorEl?: ReactNode;
+    isShow?: boolean;
+    useAutoPlacement?: boolean;
+    flipOptions?: FlipOptions;
+    autoPlacementOptions?: AutoPlacementOptions;
+    zIndex?: number | undefined | string;
+    width?: number | string;
+    styleInnerPopover?: React.CSSProperties;
+}
+export interface IRefPopover {
+    show: boolean;
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+    handlerShow: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+}

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

@@ -0,0 +1,17 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { IBorderRadius } from '../../../config/components/borderRadius';
+import { Itypography } from '../../../config/components/typography';
+
+export interface IRadioCheckbox extends InputHTMLAttributes<HTMLInputElement> {
+    classNameContainer?: string | undefined;
+    classNameLabel?: string | undefined;
+    sizeInput?: 'reguler' | 's';
+    variants?: 'laba-blue-10' | 'blue-700' | 'blue-700-hv_bg_transparent' | 'laba-blue-10-hv_bg_transparent';
+    variantDisableds?: 'default-disabled-checkbox' | 'default-disabled-radio';
+    borderRadius?: IBorderRadius;
+    checkedIcon?: ReactNode | ReactNode[];
+    type?: 'checkbox' | 'radio';
+    fonts?: 'lato' | 'inter';
+    label?: string;
+    typography?: Itypography;
+}

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

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

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { Props as SelectProps, ActionMeta } from 'react-select';
+import { AutoPlacementOptions, FlipOptions } from '@floating-ui/react';
+
+export interface ISelectDropdownContainer extends SelectProps {
+    width?: number | string;
+    children: ((params: IChildrenSelectDropdownContainer) => ReactNode) | ((params: IChildrenSelectDropdownContainer) => ReactNode[]);
+    classNameContainer?: string;
+    classNameContainerShowSelect?: string;
+    classNameContainerSelect?: string;
+    classNameLabelError?: string;
+    error?: string;
+    onChange?: (newValue: unknown, actionMeta: ActionMeta<unknown>) => void;
+    externalValue?: boolean;
+    defaultValueButtonDropdown?: object | unknown[];
+    autoClose?: boolean;
+    onMenuOpen?: () => void;
+    autoCloseOutside?: boolean;
+    styleInnerPopper?: React.CSSProperties;
+    onMenuClose?: () => void;
+    zIndexPopper?: number;
+    id?: string;
+    idPopover?: string;
+    useAutoPlacement?: boolean;
+    flipOptions?: FlipOptions;
+    autoPlacementOptions?: AutoPlacementOptions;
+    withSearch?: boolean;
+}
+export interface IChildrenSelectDropdownContainer {
+    selectValue: unknown;
+    setSelectValue: React.Dispatch<unknown>;
+    handlerClose: () => void;
+    handlerShow: () => void;
+    show: boolean;
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export interface IRefSelectDropdownContainer {
+    selectValue: unknown;
+    setSelectValue: React.Dispatch<React.SetStateAction<object | unknown[]>>;
+    handlerClose: () => void;
+    handlerShow: () => void;
+    show: boolean;
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+}

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

@@ -0,0 +1,64 @@
+import { Table as ITableTanstack, Row, RowData, ColumnDef } from '@tanstack/react-table';
+import { HTMLAttributes, ReactNode } from 'react';
+import { ITableVirtualization } from '../Virtualization/TableVirtualization';
+
+export type ITableColumnDef<T = unknown> = ColumnDef<T>;
+export interface ITable<T = unknown> {
+    tableInstance: ITableTanstack<T>;
+    classNameWrapperTable?: string;
+    classNameTable?: string;
+    collapseAll?: boolean;
+    handlerRowClick?: (original: RowData, row: Row<T>) => void;
+    privillageRowClick?: boolean;
+    virtualization?: boolean;
+    virtualizationProps?: ITableVirtualization;
+    headerId?: string;
+    tbodyTrId?: (row: Row<T>) => string | undefined;
+    maxHeight?: number;
+    idCalculateHeight?: string;
+    kind?: 'laba-reguler' | 'payhere-reguler';
+    componentSortASC?: Element | ReactNode | ReactNode[];
+    componentSortDESC?: Element | ReactNode | ReactNode[];
+    scrollTop?: boolean;
+}
+export interface INonVirtualization<T = unknown> {
+    tableInstance: ITableTanstack<T>;
+    classNameWrapperTable?: string;
+    classNameTable?: string;
+    handlerRowClick?: (original: RowData, row: Row<T>) => void;
+    privillageRowClick?: boolean;
+    headerId?: string;
+    tbodyTrId: (row: Row<T>) => string | undefined;
+    maxHeight?: number;
+    idCalculateHeight?: string;
+    componentSortASC: Element | ReactNode | ReactNode[];
+    componentSortDESC: Element | ReactNode | ReactNode[];
+    classNamePointer: string;
+}
+export interface IVirtualization<T = unknown> {
+    tableInstance: ITableTanstack<T>;
+    classNameWrapperTable?: string;
+    handlerRowClick?: (original: RowData, row: Row<T>) => void;
+    privillageRowClick?: boolean;
+    virtualizationProps?: ITableVirtualization;
+    headerId?: string;
+    tbodyTrId: (row: Row<T>) => string | undefined;
+    classNameTable?: string;
+    componentSortASC: Element | ReactNode | ReactNode[];
+    componentSortDESC: Element | ReactNode | ReactNode[];
+    classNamePointer: string;
+}
+export interface IVirtualizationHead extends HTMLAttributes<HTMLTableSectionElement> {
+    context?: {
+        headerId?: string;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+export interface IVirtualizationTable extends HTMLAttributes<HTMLTableElement> {
+    context?: {
+        classNameTable?: string;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}

package/dist/src/interfaces/components/Virtualization/ListVirtualization.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { Components } from 'react-virtuoso';
+
+export interface IStyleHeight {
+    height?: number;
+}
+export interface IWrapperProps {
+    children: (props: Record<string, unknown>) => ReactNode;
+    [key: string]: unknown;
+}
+export interface IItemProps {
+    children: ReactNode;
+    [key: string]: unknown;
+}
+export interface IListVirtualization {
+    classNameContainer?: string;
+    computeItemKey?: () => string;
+    itemSize?: (el: HTMLElement) => number;
+    totalCount?: number;
+    typeHight: 'min-max' | 'container';
+    minHeightItem?: number;
+    maxHeightTable?: number;
+    minLengthItem?: number;
+    itemContent: (Wrapper: React.ComponentType<IWrapperProps>, index: number, data: unknown, context: unknown) => ReactNode;
+    typeCalculateItemSize?: 'auto' | 'manual';
+    itemSizeNames: string[];
+    overscan?: (value?: number) => number;
+    component?: Components;
+    idContainer?: string;
+    triggerCalCulateContainer?: number | string | boolean | object | Date;
+    accumulationHeight?: number;
+    delayTriggerCalculateHeight?: number;
+    increaseViewportBy?: (value?: number) => number;
+    context?: object;
+    endReached?: (value: number) => void;
+}

package/dist/src/interfaces/components/Virtualization/TableVirtualization.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { TableComponents } from 'react-virtuoso';
+
+export interface IStyleHeight {
+    height?: number;
+}
+export interface IWrapperProps {
+    children: (props: Record<string, unknown>) => ReactNode;
+    [key: string]: unknown;
+}
+export interface ITableRowProps {
+    children: ReactNode;
+    [key: string]: unknown;
+}
+export interface ITableVirtualization {
+    classNameContainer?: string;
+    computeItemKey?: () => string;
+    itemSize?: (el: HTMLElement) => number;
+    totalCount?: number;
+    typeHight: 'min-max' | 'container';
+    minHeightItem?: number;
+    maxHeightTable?: number;
+    minLengthItem?: number;
+    fixedHeaderContent: (() => ReactNode) | (() => ReactNode[]);
+    itemContent: (Wrapper: React.ComponentType<IWrapperProps>, index: number, data: unknown, context: unknown) => ReactNode;
+    typeCalculateItemSize?: 'auto' | 'manual';
+    itemSizeNames: string[];
+    overscan?: (value?: number) => number;
+    component?: TableComponents;
+    idContainer?: string;
+    triggerCalCulateContainer?: number | string | boolean | object | Date;
+    accumulationHeight?: number;
+    delayTriggerCalculateHeight?: number;
+    increaseViewportBy?: (value?: number) => number;
+    context?: object;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "1mpacto-react-ui",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,8 +13,8 @@
   },
   "devDependencies": {
     "@types/node": "^20.14.10",
-    "@types/react": ">=17.0.0 <19.0.0",
-    "@types/react-dom": ">=17.0.0 <19.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
@@ -29,8 +29,8 @@
     "lint-staged": "^15.2.7",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
-    "react": ">=17.0.0 <19.0.0",
-    "react-dom": ">=17.0.0 <19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sass": "^1.77.6",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
@@ -38,22 +38,20 @@
     "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
-    "@types/react": ">=17.0.0 <19.0.0",
-    "@types/react-dom": ">=17.0.0 <19.0.0",
     "react": ">=17.0.0 <19.0.0",
     "react-dom": ">=17.0.0 <19.0.0"
   },
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./dist/assets/core.css" : "./dist/assets/core.css",
-    "./dist/assets/style.css" : "./dist/assets/style.css"
+    "./dist/assets/core.css": "./dist/assets/core.css",
+    "./dist/assets/style.css": "./dist/assets/style.css"
   },
   "files": [
     "/dist"
@@ -70,14 +68,16 @@
     ]
   },
   "dependencies": {
-    "@material-tailwind/html": "^2.2.2",
-    "@rehookify/datepicker": "^6.6.4",
+    "@floating-ui/react": "^0.26.19",
+    "@internationalized/date": "^3.5.4",
     "@tanstack/react-table": "^8.19.2",
     "chart.js": "^4.4.3",
+    "react-aria": "^3.33.1",
     "react-chartjs-2": "^5.2.0",
     "react-number-format": "^5.4.0",
     "react-select": "^5.8.0",
     "react-select-async-paginate": "^0.7.4",
+    "react-stately": "^3.31.1",
     "react-virtuoso": "^4.7.11"
   }
 }