@athosws/react-components/dist/module-index.d.ts

This is a set of useful ReactJS components developed by Athos.\n Email:ladiesman217.as@gmail.com

import * as react from 'react';
import react__default, { ReactNode, ReactElement, RefObject } from 'react';

interface TreeType {
    id: string;
    name: string;
    icon?: React.ReactNode;
    component?: React.ReactNode;
    sub?: TreeType[];
    onClick?: (id: string) => void;
}

interface ATHOSTreeviewPropsI {
    styles?: {
        generalClassName?: string;
        selected?: {
            bgColor?: string;
            bgcolorIndex?: (index: number) => string;
            color?: string;
            colorIndex?: (index: number) => string;
        };
    };
    isLoading?: boolean;
    data: TreeType[];
    selected?: string[];
    onAdd?: (name: string, parentId?: string) => void;
    onDelete?: (id: string) => void;
    onSelect?: (id: string) => void;
    onMove?: (id: string, parentId: string) => void;
    fillWidth?: boolean;
    levelIndicator?: "darken" | "brighten";
}

declare function ATHOSTreeview(props: ATHOSTreeviewPropsI): react.JSX.Element;

interface ATHOSInputStyles {
    borderColor?: string;
    check?: {
        borderColor?: string;
        centerColor?: string;
    };
    backgroundColor?: string;
    textColor?: string;
    iconColor?: string;
    hover?: {
        backgroundColor?: string;
        borderColor?: string;
        textColor?: string;
        iconColor?: string;
    };
    focused?: {
        backgroundColor?: string;
        borderColor?: string;
        textColor?: string;
        iconColor?: string;
    };
    disabled?: {
        backgroundColor?: string;
        borderColor?: string;
        textColor?: string;
        iconColor?: string;
    };
}
type ATHOSInputType = "text" | "email" | "user" | "password" | "number" | "tel" | "url" | "date" | "time" | "color" | "file" | "check";
interface ATHOSInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    type?: ATHOSInputType;
    label?: string;
    error?: string;
    icon?: React.ReactNode;
    colors?: ATHOSInputStyles;
    onblur?: () => void | Promise<void>;
    onfocus?: () => void | Promise<void>;
    onCheck?: (checked: boolean) => void | Promise<void>;
    isSubmitting?: boolean;
    innerPadding?: {
        vertical?: string;
        horizontal?: string;
    };
    inputClassName?: string;
    inputWrapperClassName?: string;
}

type PopUpPosition = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom";

interface SelectedItemI {
    label: string;
    component?: ReactNode;
    value: string | number;
    className?: string;
    style?: React.CSSProperties;
}
type MultiSelectType = boolean | {
    amountBeforeShortening: number;
};
interface ATHOSSelectBaseProps {
    loading?: boolean;
    justValues?: boolean;
    thin?: boolean;
    label?: string;
    disabled?: boolean;
    error?: string;
    selected?: (string | number)[] | string | number | null;
    position?: PopUpPosition;
    style?: React.CSSProperties;
    className?: string;
    labelClassName?: string;
    listWrapperClassName?: string;
    containerClassName?: string;
    optionClassName?: string;
    selectedLabelClassName?: string;
    selectedLabelStyle?: React.CSSProperties;
    labelsStyle?: React.CSSProperties;
    spacing?: number;
    matchLabelWidth?: boolean;
    onToggleOpen?: (isOpen: boolean) => void;
    inline?: boolean;
    listContainerClassName?: string;
    listContainerStyle?: React.CSSProperties;
    multiSelect?: MultiSelectType;
    multiSelectLabelClassName?: string;
    onChange?: ((selected: (string | number)[]) => Promise<any>) | ((selected: (string | number)[]) => void);
    search?: {
        placeholder?: string;
        colors?: ATHOSInputStyles;
        className?: string;
    } | boolean;
}
interface ATHOSSelectPropsList extends ATHOSSelectBaseProps {
    labels: SelectedItemI[];
}
interface ATHOSSelectPropsCols extends ATHOSSelectBaseProps {
    cols: SelectedItemI[][];
    colClassName?: string;
    colStyle?: React.CSSProperties;
}
type ATHOSSelectedProps = ATHOSSelectPropsList | ATHOSSelectPropsCols;

declare const ATHOSSelect: (props: ATHOSSelectedProps) => react.JSX.Element;

interface Crumb {
    crumb: React.ReactNode;
    dropdown?: {
        label: string;
        value: number;
        path: string;
        onClick?: () => void;
    }[];
}
interface ATHOSBreadcrumbsProps {
    crumbs: Crumb[];
    subTitle?: string;
    selected?: {
        value: number;
        label: string;
    };
}
declare const ATHOSBreadcrumbs: ({ crumbs, subTitle, selected }: ATHOSBreadcrumbsProps) => react.JSX.Element;

interface ATHOSButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
    disabled?: boolean;
    icon?: React.ReactNode;
    tooltip?: React.ReactNode;
    confirmCollapse?: boolean;
    onConfirm?: () => void;
    inConfirmClassName?: string;
}

declare const ATHOSButton: (props: ATHOSButtonProps) => react.JSX.Element;

interface BaseItem {
    id: string;
}
interface Props<T extends BaseItem> {
    items: T[];
    update(changeItems: T[]): void;
    render(item: T): react__default.JSX.Element;
}
declare const GripIcon: (props: react__default.SVGProps<SVGSVGElement>) => any;
declare const GripIconVertical: (props: react__default.SVGProps<SVGSVGElement>) => any;
declare function ATHOSCards<T extends BaseItem>(props: react__default.HTMLAttributes<HTMLDivElement> & Props<T>): any;

declare function DeleteHandle(props: React.HTMLAttributes<HTMLButtonElement>): react.JSX.Element;

declare function DragHandle(props: React.HTMLAttributes<HTMLButtonElement>): react.JSX.Element;

interface ATHOSCollapseProps {
    children: React.ReactNode;
    collpasedComponent: React.ReactNode;
    onToggle?: (isOpen?: boolean) => void;
    position?: "top" | "bottom" | "left" | "right";
    spacing?: number;
    initialOpen?: boolean;
    collapsedClassName?: string;
    wrapperClassName?: string;
    buttonClassName?: string;
    toggleOnWrapperClick?: boolean;
    fade?: boolean;
    hideOnClickOutside?: boolean;
    open?: boolean;
    extraButton?: React.ReactNode;
    buttonContainerClassName?: string;
}
declare const ATHOSCollapse: ({ children, collpasedComponent, spacing, position, onToggle, initialOpen, collapsedClassName, wrapperClassName, buttonClassName, toggleOnWrapperClick, fade, hideOnClickOutside, extraButton, open: forceOpen, buttonContainerClassName, }: ATHOSCollapseProps) => react.JSX.Element;

interface ATHOSDDDPPBaseProps {
    position?: PopUpPosition;
    style?: React.CSSProperties;
    className?: string;
    listButtonsClassName?: string;
    labelsStyle?: React.CSSProperties;
    spacing?: number;
    matchChildrenWidth?: boolean;
    onToggle?: (isOpen: boolean) => void;
    buttonClassName?: string;
    buttonStyle?: React.CSSProperties;
    disabled?: boolean;
}
interface LabelI {
    label: ReactNode;
    onClick?: () => void;
    className?: string;
    style?: React.CSSProperties;
}
interface ATHOSDropDownBaseProps extends ATHOSDDDPPBaseProps {
    children: React.ReactNode;
}
interface ATHOSDropDownPropsList extends ATHOSDropDownBaseProps {
    labels: LabelI[];
}
interface ATHOSDropDownPropsCols extends ATHOSDropDownBaseProps {
    cols: LabelI[][];
    colClassName?: string;
    colStyle?: React.CSSProperties;
}
type ATHOSDropDownProps = ATHOSDropDownPropsList | ATHOSDropDownPropsCols;

declare const ATHOSDropDown: (props: ATHOSDropDownProps) => react.JSX.Element;

interface ATHOSPopUpProps {
    children: React.ReactNode;
    onToggle?: (isOpen: boolean) => void;
    position?: PopUpPosition;
    style?: React.CSSProperties;
    contentWrapperStyle?: React.CSSProperties;
    contentWrapperClassName?: string;
    className?: string;
    content: React.ReactNode;
    spacing?: number;
    matchChildrenWidth?: boolean;
}

declare const ATHOSPopUp: ({ children, onToggle, position, contentWrapperClassName: contentClassName, content, style, matchChildrenWidth, spacing, className, contentWrapperStyle: contentStyle, }: ATHOSPopUpProps) => react.JSX.Element;

type TdefaultStyles = {
    style?: React.CSSProperties;
    className?: string;
};
type GlobalConfig<T> = {
    maxCharToCut?: number;
    maxWidth?: number;
    minWidth?: number;
    minColWidthToShort?: number;
    cellComponent?: (cell: ReactNode) => React.ReactNode;
    rowClick?: (rowData: T) => void;
};
type SpecificColConfig<T, D> = {
    maxCharToCut?: number;
    label?: React.ReactNode;
    maxWidth?: number;
    minWidth?: number;
    minColWidthToShort?: number;
    cellComponent?: (cell: T) => ReactNode;
    cellComponentRowData?: (cell: D) => ReactNode;
    formatter?: (value: T) => ReactNode;
} & TdefaultStyles;
type ExtraColConfig<T> = {
    id?: string;
    column: keyof T;
    maxCharToCut?: number;
    label?: React.ReactNode;
    maxWidth?: number;
    minWidth?: number;
    minColWidthToShort?: number;
    cellComponent?: (cell: ReactNode) => React.ReactNode;
} & TdefaultStyles;
type ADTLabelI<T> = {
    label: string;
    onClick: (selectedData: T[]) => void;
};
type SelectedRowsTooltipI<T> = {
    mainFunc?: {
        label?: string;
        icon?: React.ReactNode;
        onClick: (selectedData: T[]) => void;
    };
    secondaryFunc?: {
        label?: string;
        icon?: React.ReactNode;
        onClick: (selectedData: T[]) => void;
    };
    othersFunc?: ADTLabelI<T>[];
    containerColor?: TdefaultStyles;
};
type ExtraCellColumnsI<T> = {
    label?: string;
    center?: boolean;
    showCondition?: (data: T) => boolean;
    component: (data: T) => React.ReactNode;
};
type ColConfig<T> = {
    [key in keyof T]?: SpecificColConfig<T[key], T>;
};
type StartShortI<T> = {
    [key in keyof T]?: boolean;
};
type ColumnTextTableStyle<T> = {
    [key in keyof T]?: string;
};
type ColumnTextTableStyleCustomLabelADD = {
    [key: string]: string;
};
type CellColumnTextTableStyle<T> = {
    [key in keyof T]?: {
        global?: string;
        specificIndex?: {
            indexes: number[];
            color: string;
        };
        condional?: {
            showCondition: (rowColumnData: string) => boolean;
            color: string;
        };
    };
};
type CellColumnTextTableStyleCustomLabelADD = {
    [key: string]: {
        global?: string;
        specificIndex?: {
            indexes: number[];
            color: string;
        };
        condional?: {
            showCondition: (rowColumnData: string) => boolean;
            color: string;
        };
    };
};
type TableStyle<T> = {
    selected?: {
        rowColor?: string;
        rowTextColor?: string;
        rowBorderColor?: string;
        rowSpacingColor?: string;
        selectedIconColor?: string;
    };
    header?: {
        functionsColors?: {
            icons: TdefaultStyles & {
                open?: TdefaultStyles;
            };
            body?: TdefaultStyles & {
                itemsAmount?: TdefaultStyles;
                itemsAmountLabel?: TdefaultStyles;
                clearFilters?: TdefaultStyles;
                listItem?: TdefaultStyles;
                search?: TdefaultStyles;
            };
        };
        title?: TdefaultStyles;
        subtitle?: TdefaultStyles;
    };
    nav?: {
        buttons?: {
            disabled?: TdefaultStyles;
            enabled?: TdefaultStyles;
        };
        pageIndicator?: TdefaultStyles;
        pageButton?: {
            disabled?: TdefaultStyles;
            enabled?: TdefaultStyles;
        };
    };
    cellTextColor?: {
        global?: string;
        specific?: CellColumnTextTableStyle<T> & CellColumnTextTableStyleCustomLabelADD;
    };
    columnTextColor?: {
        global?: string;
        specific?: ColumnTextTableStyle<T> & ColumnTextTableStyleCustomLabelADD;
    };
    highlightColor?: string;
    rowClassName?: string;
};
type FilterConfig = {
    isDateRange?: boolean;
    isValueRange?: boolean;
    label?: string;
};
type HideColConfig = {
    label?: string;
};
type TableColFilter<T> = {
    [key in keyof T]?: FilterConfig | boolean;
};
type TableColHide<T> = {
    [key in keyof T]?: HideColConfig | boolean;
};
type ResizableConfig = {
    autoBorder?: boolean;
};
type ColumnsToStartShow<T> = {
    [key in keyof T]?: boolean;
};
type DynamicTableProps<T> = {
    columnsToStartShow?: ColumnsToStartShow<T>;
    extraFuncs?: ReactNode;
    selectable?: boolean;
    tableSelectedFuncs?: {
        title?: string;
        funcs?: {
            label: ReactNode;
            onClick: (selectedData: T[]) => void;
        }[];
    };
    tableColFilterName?: string;
    hidableColumns?: TableColHide<T>;
    colsToFilter?: TableColFilter<T>;
    loading?: boolean | string;
    boldColumns?: boolean;
    wrapperClassName?: string;
    tableWrapperClassName?: string;
    className?: string;
    tableName: string;
    data: T[];
    resizeable?: boolean | ResizableConfig;
    tableStyle?: TableStyle<T>;
    colConfig?: ColConfig<T>;
    globalConfig?: GlobalConfig<T>;
    columnsToHide?: (keyof T)[];
    columnsToShow?: (keyof T)[];
    customColumns?: {
        newLabel: string;
        colsToGet: (keyof T)[];
        index?: number;
        render?: (data: T) => React.ReactNode;
    }[];
    columnOrder?: (keyof T)[];
    noDataPlaceholder?: React.ReactNode;
    style?: React.CSSProperties;
    spacingBetweenCells?: number | string;
    paddingInCells?: number | string;
    spacingHeader?: number | string;
    spacingBetweenColumns?: number | string;
    spacingBetweenExtraColumns?: number | string;
    selectedRowsToast?: SelectedRowsTooltipI<T>;
    extraCellColumns?: ExtraCellColumnsI<T>[];
    extraColumns?: ExtraColConfig<T>[];
    startShort?: StartShortI<T> | boolean;
    persistPrimaryColumn?: {
        backgroundColor?: string;
        borderColor?: string;
    } | boolean;
};

declare function ATHOSDynamicTable<T>(props: DynamicTableProps<T>): react.JSX.Element;

declare const ATHOSDynamicTableProvider: ({ children }: {
    children: React.ReactNode;
}) => react.JSX.Element;
declare function useATHOSDynamicTableContext<T>(): {
    selectedData: T[];
};

/**
 * DESCRIBE COMPONENT
 */
declare const ATHOSInput: (props: ATHOSInputProps) => react.JSX.Element;

interface ResizableDivProps {
    localSaveName?: string;
    style?: React.CSSProperties;
    OuterContainerStyle?: React.CSSProperties;
    children?: React.ReactNode;
    withToogle?: boolean;
    disabled?: boolean;
    className?: string;
    outerClassName?: string;
    highlightColor?: string;
}

declare const ATHOSResizableDiv: (props: ResizableDivProps) => react.JSX.Element;

interface SwitchI {
    id?: string;
    onSelected?: () => void;
    label?: ReactNode;
    icon?: ReactNode;
    className?: {
        default?: string;
        active?: string;
    };
    style?: {
        default?: React.CSSProperties;
        active?: React.CSSProperties;
    };
}

interface ATHOSSwitcherProps {
    selectedId?: string;
    onChange?: (id: string) => void;
    switchs: SwitchI[];
    style?: {
        container?: React.CSSProperties;
        switches?: {
            default?: React.CSSProperties;
            active?: React.CSSProperties;
        };
    };
    className?: {
        container?: string;
        switches?: {
            default?: string;
            active?: string;
        };
    };
}

declare const ATHOSSwitcher: (props: ATHOSSwitcherProps) => react.JSX.Element;

interface TabClassNameProps {
    default?: string;
    active?: string;
}
interface TabColorsProps {
    default?: React.CSSProperties;
    active?: React.CSSProperties;
}
interface ATHOSTabProps {
    title: {
        value?: ReactNode;
        className?: TabClassNameProps;
        style?: TabColorsProps;
    };
    content: {
        value?: ReactNode;
        className?: string;
        style?: React.CSSProperties;
    };
}
interface ATHOSTabsProps {
    tabs: ATHOSTabProps[];
    gap?: number;
    className?: {
        tab?: TabClassNameProps;
        tabsWrapper?: string;
        body?: string;
    };
    colors?: {
        tab?: TabColorsProps;
        body?: React.CSSProperties;
    };
    addTab?: {
        icon: ReactNode;
        onClick?: () => void;
        className?: string;
    };
}

declare const ATHOSTabs: (props: ATHOSTabsProps) => react.JSX.Element;

declare const ATHOSVirtualDiv: ({ children, className, style, offset, viewportId, }: {
    children: ReactElement;
    className?: string;
    style?: react__default.CSSProperties;
    offset?: number;
    viewportId?: string;
}) => any;

interface ATHOSToastProps {
    id?: string;
    updateState?: any;
    removeCondition?: boolean;
    renderCondition?: boolean;
    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
    gap?: number;
    renderAndFade?: boolean;
    fadeTime?: number;
    children?: React.ReactNode;
    className?: string;
}

declare const ATHOSToast: (props: ATHOSToastProps) => react.JSX.Element;

declare const useATHOSToast: () => {
    toast: (t: react__default.ReactNode | react__default.JSX.Element, props?: ATHOSToastProps) => void;
};

interface ATHOSModalProps {
    show?: boolean;
    children?: React.ReactNode;
    hide?: () => void;
    blur?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none";
    backdrop?: string;
    className?: string;
}

declare const ATHOSModal: (props: ATHOSModalProps) => react.ReactPortal;

declare const useATHOSModal: () => {
    modal: (t: react__default.ReactNode | react__default.JSX.Element, props?: ATHOSModalProps) => void;
};

interface ATHOSTooltipProps {
    children: ReactNode;
    forceOpen?: boolean;
    position?: "top" | "bottom" | "left" | "right";
    followCursor?: boolean;
    tooltipContent: ReactNode;
    gap?: number;
    style?: React.CSSProperties;
    className?: string;
}

declare const ATHOSTooltip: (props: ATHOSTooltipProps) => react.JSX.Element;

/**
 * Generates a set of color shades based on the provided base color.
 *
 * Uses the `chroma-js` library to create a lighter and darker set of shades for the given color.
 *
 * @param {string} colorr - The base color in any valid CSS color format (e.g., hex, rgb, etc.).
 * @returns {Object} An object containing the following shades of the color:
 * - `lighter`: A lighter shade of the color.
 * - `light`: A light shade of the color.
 * - `default`: The original color.
 * - `dark`: A dark shade of the color.
 * - `darker`: A darker shade of the color.
 */
declare const generateColorShades: (colorr: string) => {
    lighter: string;
    light: string;
    default: string;
    dark: string;
    darker: string;
    darker2: string;
};
/**
 * Determines the appropriate contrast color (black or white) based on the luminance of the given color.
 *
 * Uses the `chroma-js` library to compute the luminance of the color and returns either "black" or "white"
 * to ensure good contrast and readability against the given color.
 *
 * @param {string} color - The base color in any valid CSS color format (e.g., hex, rgb, etc.).
 * @returns {string} "black" if the luminance of the color is above 0.5, otherwise "white".
 */
declare const getContrastColor: (color: string) => "black" | "white";

declare const adaptSize: (size: number, refValue: number, unit: string) => string;
declare const getValueWithoutUnit: (value: string) => number;
declare const getUnitWithoutValue: (value: string) => string;
declare function convertRemToPixels(rem: number): number;

declare const ATHOSColors: {
    aqua: {
        default: string;
        default_2: string;
        dark: string;
        darker: string;
    };
    gray: {
        darker_2: string;
        darker: string;
        dark: string;
        dark_05: string;
        default: string;
        light: string;
        light_2: string;
        lighter: string;
    };
    red: {
        darker_2: string;
        darker: string;
        dark: string;
        default: string;
        light: string;
    };
    white: {
        eggshell: string;
        eggshell_faded: string;
    };
    black: {
        coal: string;
        coal_faded: string;
    };
    background: string;
};

type AMOptColorsProps = {
    background?: string;
    border?: {
        color?: string;
        width?: string;
    } | "none";
    text?: string;
    icon?: string;
    className?: string;
};
interface ColorOptType {
    hover?: AMOptColorsProps;
    clicked?: AMOptColorsProps;
    normal?: AMOptColorsProps;
    defaults?: AMOptColorsProps;
}
interface AMMenuColorsProps extends AMOptColorsProps {
    option: ColorOptType;
    subOption?: ColorOptType;
    subSubOption?: ColorOptType;
}
interface AMColorsProps {
    selected?: AMOptColorsProps;
    menu?: AMMenuColorsProps;
}
interface DefaultOptProps {
    label: string;
    icon?: ReactNode;
    path?: string;
    onClick?: () => void;
    onInit?: () => void;
    specificColors?: ColorOptType;
}
interface SubSubOptionProps extends DefaultOptProps {
}
interface SubOptionProps extends DefaultOptProps {
    subSubOpts?: SubSubOptionProps[];
}
interface OptionProps extends DefaultOptProps {
    subOpts?: SubOptionProps[];
}
interface ATHOSMenuProps {
    spacing?: number;
    className?: string;
    generalColors?: AMColorsProps;
    options: OptionProps[];
    navigate?: {
        useNavigate: any;
        useLocation: any;
    };
    maxMenuHeight?: number;
    blur?: {
        menu?: boolean;
        selected?: boolean;
    };
    menuDirection?: "top" | "bottom";
}

declare const ATHOSMenu: (props: ATHOSMenuProps) => react.JSX.Element;

/**
 * Custom hook that detects clicks outside of a set of specified elements.
 *
 * @param ids - An array of strings representing the ids of the elements to detect clicks outside of.
 * @param refs - An array of React ref objects representing the elements to detect clicks outside of.
 * @param callback - A callback function to be executed when a click outside is detected.
 */
interface ClickOutsideBaseProps {
    callback: () => void;
}
interface ClickOutsideRefProps extends ClickOutsideBaseProps {
    refs: RefObject<any>[];
}
interface ClickOutsideIdProps extends ClickOutsideBaseProps {
    ids: string[];
}
type ClickOutsideProps = ClickOutsideRefProps | ClickOutsideIdProps;
declare const useClickOutside: (props: ClickOutsideProps) => void;

type Sizes = "sm" | "md" | "lg" | "xl" | "2xl";
declare const isBiggerThan: (size: Sizes) => boolean;
declare function useWindowDimensions(): {
    size: Sizes;
    dimensions: {
        width: number;
        height: number;
    };
};

export { ATHOSBreadcrumbs, ATHOSButton, ATHOSCards, ATHOSCollapse, ATHOSColors, ATHOSDropDown, ATHOSDynamicTable, ATHOSDynamicTableProvider, ATHOSInput, ATHOSMenu, ATHOSModal, ATHOSPopUp, ATHOSResizableDiv, ATHOSSelect, ATHOSSwitcher, ATHOSTabs, ATHOSToast, ATHOSTooltip, ATHOSTreeview, ATHOSVirtualDiv, DeleteHandle, DragHandle, GripIcon, GripIconVertical, adaptSize, convertRemToPixels, generateColorShades, getContrastColor, getUnitWithoutValue, getValueWithoutUnit, isBiggerThan, useATHOSDynamicTableContext, useATHOSModal, useATHOSToast, useClickOutside, useWindowDimensions };
export type { ATHOSBreadcrumbsProps, ATHOSButtonProps, ATHOSInputType };