@datability/8ui 1.2.2 → 1.3.0

package/dist/types/components/input/range-slider/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsRangeSliderInput } from './index.type';
+declare const RangeSliderInput: React.FC<PropsRangeSliderInput>;
+export default RangeSliderInput;

package/dist/types/components/input/range-slider/index.type.d.ts

@@ -0,0 +1,9 @@
+import { Control } from 'react-hook-form';
+export type PropsRangeSliderInput = {
+    control: Control<any>;
+    name: string;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    className?: string;
+};

package/dist/types/components/input/select/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsSelect } from './index.type';
+declare const Select: React.FC<PropsSelect>;
+export default Select;

package/dist/types/components/input/select/index.type.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { PropsInputField } from '../input-base/index.type';
+export type TSelectOption = {
+    label: string;
+    value: string | number;
+};
+export type SelectRenderProps = {
+    value: string | number;
+    onSelect: (value: string | number) => void;
+};
+export type MultiSelectRenderProps = {
+    values: (string | number)[];
+    onToggle: (value: string | number) => void;
+};
+export type PropsSelect = PropsInputField & {
+    options: TSelectOption[];
+    loading?: boolean;
+    children?: (props: SelectRenderProps) => ReactNode;
+};

package/dist/types/components/input/slider/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsSliderInput } from './index.type';
+declare const SliderInput: React.FC<PropsSliderInput>;
+export default SliderInput;

package/dist/types/components/input/{input-switch → slider}/index.type.d.ts

@@ -1,6 +1,9 @@
 import { Control } from 'react-hook-form';
-export type PropsInputSwitch = {
+export type PropsSliderInput = {
     control: Control<any>;
     name: string;
+    min?: number;
+    max?: number;
     disabled?: boolean;
+    className?: string;
 };

package/dist/types/components/input/text-input/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsTextInput } from './index.type';
+declare const TextInput: React.FC<PropsTextInput>;
+export default TextInput;

package/dist/types/components/input/text-input/index.type.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { PropsInputField } from '../input-base/index.type';
+export type PropsTextInput = PropsInputField & {
+    icon?: ReactNode;
+    iconText?: string;
+};

package/dist/types/components/input/textarea/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsTextarea } from './index.type';
+declare const Textarea: React.FC<PropsTextarea>;
+export default Textarea;

package/dist/types/components/input/textarea/index.type.d.ts

@@ -0,0 +1,5 @@
+import { PropsInputField } from '../input-base/index.type';
+export type PropsTextarea = PropsInputField & {
+    rows?: number;
+    cols?: number;
+};

package/dist/types/components/input/toggle/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsToggle } from './index.type';
+declare const Toggle: React.FC<PropsToggle>;
+export default Toggle;

package/dist/types/components/input/toggle/index.type.d.ts

@@ -0,0 +1,8 @@
+import { Control } from 'react-hook-form';
+export type ToggleSize = "sm" | "md" | "lg";
+export type PropsToggle = {
+    control: Control<any>;
+    name: string;
+    disabled?: boolean;
+    size?: ToggleSize;
+};

package/dist/types/components/loading/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsLoading } from './index.type';
+declare const Loading: React.FC<PropsLoading>;
+export default Loading;

package/dist/types/components/loading/index.type.d.ts

@@ -0,0 +1,6 @@
+export type LoadingThickness = "sm" | "lg";
+export type PropsLoading = {
+    progress: number;
+    thickness?: LoadingThickness;
+    className?: string;
+};

package/dist/types/components/menu/index.d.ts

@@ -1,4 +1,8 @@
 import { default as React } from 'react';
-import { PropsMenu } from './index.type';
-declare const Menu: React.FC<PropsMenu>;
+import { PropsMenu, PropsMenuItem, PropsMenuHeader, PropsMenuDivider, PropsMenuButton } from './index.type';
+declare const Menu: React.ForwardRefExoticComponent<PropsMenu & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuItem: React.FC<PropsMenuItem>;
+export declare const MenuHeader: React.FC<PropsMenuHeader>;
+export declare const MenuDivider: React.FC<PropsMenuDivider>;
+export declare const MenuButton: React.FC<PropsMenuButton>;
 export default Menu;

package/dist/types/components/menu/index.type.d.ts

@@ -1,11 +1,34 @@
-import { JSX } from 'react';
+import { ReactNode } from 'react';
+import { CounterLabelType } from '../counter-label/index.type';
+export type MenuSize = "sm" | "md" | "lg" | "xl";
 export type PropsMenu = {
-    trigger: (props: {
-        isOpen: boolean;
-    }) => JSX.Element;
-    children: (args: {
-        close: () => void;
-    }) => JSX.Element | JSX.Element[];
+    children: ReactNode;
+    className?: string;
+    size?: MenuSize;
+};
+export type PropsMenuItem = {
+    children: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    shortcut?: string;
+    counter?: number | string;
+    counterType?: CounterLabelType;
+    hasSubmenu?: boolean;
+    active?: boolean;
     disabled?: boolean;
-    isInModal?: boolean;
+    size?: MenuSize;
+    onClick?: () => void;
+};
+export type PropsMenuHeader = {
+    children: ReactNode;
+    size?: MenuSize;
+};
+export type PropsMenuDivider = object;
+export type MenuAlign = "left" | "right";
+export type PropsMenuButton = {
+    children: ReactNode;
+    trigger: ReactNode;
+    size?: MenuSize;
+    align?: MenuAlign;
+    fullWidth?: boolean;
 };

package/dist/types/components/menu/position.d.ts

@@ -0,0 +1,6 @@
+export type MenuPositionAlign = "left" | "right";
+export type MenuPositionOptions = {
+    align?: MenuPositionAlign;
+    matchWidth?: boolean;
+};
+export declare const applyMenuPosition: (triggerEl: HTMLElement, menuEl: HTMLElement, options?: MenuPositionOptions) => void;

package/dist/types/components/menu/useMenuDropdown.d.ts

@@ -0,0 +1,9 @@
+import { MenuPositionOptions } from './position';
+export declare const useMenuDropdown: (positionOptions?: MenuPositionOptions) => {
+    open: boolean;
+    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    close: () => void;
+    toggle: () => void;
+    triggerRef: import('react').RefObject<HTMLDivElement | null>;
+    menuRef: import('react').RefObject<HTMLDivElement | null>;
+};

package/dist/types/components/modal/index.type.d.ts

@@ -1,7 +1,14 @@
-import { JSX } from 'react';
+import { ReactNode } from 'react';
 export type PropsModal = {
-    children: JSX.Element | JSX.Element[];
     open: boolean;
     onClose: () => void;
-    id: string;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    onBack?: () => void;
+    onNext?: () => void;
+    onDelete?: () => void;
+    backText?: string;
+    nextText?: string;
+    deleteText?: string;
 };

package/dist/types/components/on-remove/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsOnRemove } from './index.type';
+declare const OnRemove: React.FC<PropsOnRemove>;
+export default OnRemove;

package/dist/types/components/on-remove/index.type.d.ts

@@ -0,0 +1,9 @@
+export type OnRemoveSize = "sm" | "md" | "lg";
+export type OnRemoveColor = "default" | "white";
+export type PropsOnRemove = {
+    size?: OnRemoveSize;
+    color?: OnRemoveColor;
+    selected?: boolean;
+    onClick?: (e?: React.MouseEvent) => void;
+    className?: string;
+};

package/dist/types/components/overlay/useOverlay.d.ts

@@ -0,0 +1,5 @@
+export declare const useOverlay: (open: boolean, onClose: () => void) => {
+    removing: boolean;
+    visible: boolean;
+    handleClose: () => void;
+};

package/dist/types/components/pagination/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsPagination } from './index.type';
+declare const Pagination: React.FC<PropsPagination>;
+export default Pagination;

package/dist/types/components/pagination/index.type.d.ts

@@ -0,0 +1,9 @@
+export type PropsPagination = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange?: (page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+    className?: string;
+};

package/dist/types/components/progress-bar/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsProgressBar } from './index.type';
+declare const ProgressBar: React.FC<PropsProgressBar>;
+export default ProgressBar;

package/dist/types/components/progress-bar/index.type.d.ts

@@ -0,0 +1,6 @@
+export type ProgressBarSize = "xs" | "sm" | "md";
+export type PropsProgressBar = {
+    value: number;
+    size?: ProgressBarSize;
+    className?: string;
+};

package/dist/types/components/rate/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsRate } from './index.type';
+declare const Rate: React.FC<PropsRate>;
+export default Rate;

package/dist/types/components/rate/index.type.d.ts

@@ -0,0 +1,8 @@
+export type RateCount = 3 | 4 | 5;
+export type PropsRate = {
+    value?: number;
+    count?: RateCount;
+    onChange?: (value: number) => void;
+    readOnly?: boolean;
+    className?: string;
+};

package/dist/types/components/search-bar/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsSearchBar } from './index.type';
+declare const SearchBar: React.FC<PropsSearchBar>;
+export default SearchBar;

package/dist/types/components/search-bar/index.type.d.ts

@@ -0,0 +1,12 @@
+import { Control } from 'react-hook-form';
+export type SearchBarSize = "sm" | "md" | "lg" | "xl";
+export type PropsSearchBar = {
+    control: Control<any>;
+    name: string;
+    placeholder?: string;
+    showIcon?: boolean;
+    size?: SearchBarSize;
+    disabled?: boolean;
+    onClear?: () => void;
+    className?: string;
+};

package/dist/types/components/slider/index.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { PropsRangeSlider, PropsSlider } from './index.type';
+declare const Slider: React.FC<PropsSlider>;
+export declare const RangeSlider: React.FC<PropsRangeSlider>;
+export default Slider;

package/dist/types/components/slider/index.type.d.ts

@@ -0,0 +1,14 @@
+export type PropsSlider = {
+    value: number;
+    min?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+    className?: string;
+};
+export type PropsRangeSlider = {
+    value: [number, number];
+    min?: number;
+    max?: number;
+    onChange?: (value: [number, number]) => void;
+    className?: string;
+};

package/dist/types/components/table/index.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { PropsTableSort, PropsTableHead, PropsTableCell, PropsTable } from './index.type';
+export declare const TableSort: React.FC<PropsTableSort>;
+export declare const TableHead: React.FC<PropsTableHead>;
+export declare const TableCell: React.FC<PropsTableCell>;
+declare function Table<T>({ columns, data, rowKey, showCheckbox, checkedKeys, onCheck, loading, skeletonRows, totalItems, currentPage, totalPages, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, className, }: PropsTable<T>): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/types/components/table/index.type.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+export type TableSortSize = "sm" | "md" | "lg";
+export type PropsTableSort = {
+    size?: TableSortSize;
+    className?: string;
+};
+export type PropsTableHead = {
+    children?: ReactNode;
+    description?: string;
+    showCheckbox?: boolean;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onCheck?: (checked: boolean) => void;
+    showSort?: boolean;
+    onSort?: () => void;
+    className?: string;
+};
+export type PropsTableCell = {
+    children?: ReactNode;
+    showCheckbox?: boolean;
+    checked?: boolean;
+    onCheck?: (checked: boolean) => void;
+    className?: string;
+};
+export type TableColumn<T = any> = {
+    key: string;
+    header?: string;
+    headerDescription?: string;
+    width?: number | string;
+    showSort?: boolean;
+    onSort?: () => void;
+    render: (row: T, index: number) => ReactNode;
+};
+export type PropsTable<T = any> = {
+    columns: TableColumn<T>[];
+    data: T[];
+    rowKey?: (row: T, index: number) => string | number;
+    showCheckbox?: boolean;
+    checkedKeys?: (string | number)[];
+    onCheck?: (keys: (string | number)[]) => void;
+    loading?: boolean;
+    skeletonRows?: number;
+    totalItems?: number;
+    currentPage?: number;
+    totalPages?: number;
+    onPageChange?: (page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+    className?: string;
+};

package/dist/types/components/tabs/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsTabs } from './index.type';
+declare const Tabs: React.FC<PropsTabs>;
+export default Tabs;

package/dist/types/components/tabs/index.type.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type TabItem = {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    count?: number;
+};
+export type PropsTabs = {
+    items: TabItem[];
+    activeKey?: string;
+    onChange?: (key: string) => void;
+    className?: string;
+};

package/dist/types/components/tag/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsTag } from './index.type';
+declare const Tag: React.FC<PropsTag>;
+export default Tag;

package/dist/types/components/tag/index.type.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type TagColor = "primary" | "secondary" | "tertiary" | "default" | "neutral" | "special";
+export type TagVariant = "default" | "outline";
+export type PropsTag = {
+    children: ReactNode;
+    color?: TagColor;
+    variant?: TagVariant;
+    icon?: ReactNode;
+    className?: string;
+};

package/dist/types/components/toast/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsToaster } from './index.type';
+export declare const Toaster: React.FC<PropsToaster>;
+export default Toaster;

package/dist/types/components/toast/index.type.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export type ToastType = "default" | "danger" | "success" | "warning" | "info";
+export type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
+export type ToastItem = {
+    id: string;
+    type: ToastType;
+    title?: ReactNode;
+    body?: ReactNode;
+    duration: number;
+    removing?: boolean;
+};
+export type ToastOptions = {
+    title?: ReactNode;
+    duration?: number;
+};
+export type PropsToaster = {
+    position?: ToastPosition;
+    maxToasts?: number;
+};

package/dist/types/components/toast/store.d.ts

@@ -0,0 +1,8 @@
+import { ToastItem, ToastType, ToastOptions } from './index.type';
+export declare const toastStore: {
+    subscribe(listener: () => void): () => void;
+    getSnapshot(): ToastItem[];
+    add(type: ToastType, body: React.ReactNode, options?: ToastOptions): string;
+    remove(id: string): void;
+    clear(): void;
+};

package/dist/types/components/toast/toast.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ToastOptions } from './index.type';
+export declare const toast: {
+    (body: ReactNode, options?: ToastOptions): string;
+    success(body: ReactNode, options?: ToastOptions): string;
+    error(body: ReactNode, options?: ToastOptions): string;
+    warning(body: ReactNode, options?: ToastOptions): string;
+    info(body: ReactNode, options?: ToastOptions): string;
+    dismiss(id: string): void;
+    clear(): void;
+};

package/dist/types/components/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsTooltip } from './index.type';
+declare const Tooltip: React.FC<PropsTooltip>;
+export default Tooltip;

package/dist/types/components/tooltip/index.type.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type TooltipPlacement = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom";
+export type TooltipSize = "sm" | "lg";
+export type PropsTooltip = {
+    children: ReactNode;
+    title: string;
+    body?: string;
+    action?: ReactNode;
+    size?: TooltipSize;
+    placement?: TooltipPlacement;
+    className?: string;
+};

package/dist/types/components/tree-folder/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsTreeFolder } from './index.type';
+declare const TreeFolder: React.FC<PropsTreeFolder>;
+export default TreeFolder;

package/dist/types/components/tree-folder/index.type.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type TreeNode = {
+    key: string;
+    label: string;
+    count?: number;
+    badge?: number;
+    iconRight?: ReactNode;
+    onIconRightClick?: () => void;
+    children?: TreeNode[];
+};
+export type TreeFolderVariant = "left" | "right";
+export type PropsTreeFolder = {
+    data: TreeNode[];
+    variant?: TreeFolderVariant;
+    draggable?: boolean;
+    activeKey?: string;
+    defaultExpandedKeys?: string[];
+    onSelect?: (key: string) => void;
+    onToggle?: (key: string, expanded: boolean) => void;
+    onReorder?: (data: TreeNode[]) => void;
+    className?: string;
+};

package/dist/types/components/tree-folder-left/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsTreeFolderLeft } from './index.type';
+declare const TreeFolderLeft: React.FC<PropsTreeFolderLeft>;
+export default TreeFolderLeft;

package/dist/types/components/tree-folder-left/index.type.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type PropsTreeFolderLeft = {
+    label: string;
+    count?: number;
+    badge?: number;
+    open?: boolean;
+    showTree?: boolean;
+    iconRight?: ReactNode;
+    onIconRightClick?: () => void;
+    onClick?: () => void;
+    className?: string;
+};

package/dist/types/components/tree-folder-right/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsTreeFolderRight } from './index.type';
+declare const TreeFolderRight: React.FC<PropsTreeFolderRight>;
+export default TreeFolderRight;

package/dist/types/components/tree-folder-right/index.type.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type TreeFolderRightState = "default" | "hover" | "active";
+export type PropsTreeFolderRight = {
+    label: string;
+    count?: number;
+    badge?: number;
+    open?: boolean;
+    showDrag?: boolean;
+    showTree?: boolean;
+    iconRight?: ReactNode;
+    onIconRightClick?: () => void;
+    onClick?: () => void;
+    className?: string;
+};

package/dist/types/components/typography/index.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { PropsTypography } from './index.type';
+export declare const Display1: React.FC<PropsTypography>;
+export declare const Display2: React.FC<PropsTypography>;
+export declare const Display3: React.FC<PropsTypography>;
+export declare const Display4: React.FC<PropsTypography>;
+export declare const H1: React.FC<PropsTypography>;
+export declare const H2: React.FC<PropsTypography>;
+export declare const H3: React.FC<PropsTypography>;
+export declare const H4: React.FC<PropsTypography>;
+export declare const H5: React.FC<PropsTypography>;
+export declare const H6: React.FC<PropsTypography>;
+export declare const Title: React.FC<PropsTypography>;
+export declare const Subtitle: React.FC<PropsTypography>;
+export declare const LabelLg: React.FC<PropsTypography>;
+export declare const LabelMd: React.FC<PropsTypography>;
+export declare const LabelSm: React.FC<PropsTypography>;
+export declare const Paragraph: React.FC<PropsTypography>;
+export declare const CaptionLg: React.FC<PropsTypography>;
+export declare const CaptionMd: React.FC<PropsTypography>;
+export declare const CaptionSm: React.FC<PropsTypography>;
+export declare const CaptionXs: React.FC<PropsTypography>;

package/dist/types/components/typography/index.type.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, ElementType, ReactNode } from 'react';
+export type TypographyWeight = "bold" | "semibold" | "medium" | "text" | "light" | "thin";
+export type PropsTypography = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    as?: ElementType;
+    weight?: TypographyWeight;
+};

package/dist/types/components/upload-dragger/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsUploadDragger } from './index.type';
+declare const UploadDragger: React.FC<PropsUploadDragger>;
+export default UploadDragger;

package/dist/types/components/upload-dragger/index.type.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type UploadDraggerFile = {
+    name: string;
+    error?: boolean;
+};
+export type PropsUploadDragger = {
+    title?: ReactNode;
+    description?: ReactNode;
+    files?: UploadDraggerFile[];
+    onChange?: (files: FileList | null) => void;
+    onRemove?: (index: number) => void;
+    accept?: string;
+    multiple?: boolean;
+    className?: string;
+};

package/dist/types/components/upload-list-item/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PropsUploadListItem } from './index.type';
+declare const UploadListItem: React.FC<PropsUploadListItem>;
+export default UploadListItem;

package/dist/types/components/upload-list-item/index.type.d.ts

@@ -0,0 +1,9 @@
+export type UploadListItemType = "file" | "image";
+export type PropsUploadListItem = {
+    type?: UploadListItemType;
+    name: string;
+    preview?: string;
+    error?: boolean;
+    onRemove?: () => void;
+    className?: string;
+};