c4cui/dist/index.d.ts

Highly customizable elegant react components

import React, { ReactNode, KeyboardEventHandler } from 'react';

declare const Button: ({ icon, label, onClick, disabled, outline, className, type, active, }: {
    icon?: ReactNode;
    label?: string;
    active?: boolean;
    onClick?: () => void;
    disabled?: boolean;
    outline?: boolean;
    invert?: boolean;
    className?: string;
    type?: string;
}) => React.JSX.Element;

declare const InputComponent: ({ label, name, type, labelClasses, readOnly, value, onChange, inputClasses, placeholder, options, defaultValue, required, maxLength, minLength, maxNumber, minNumber, copyPassword, generatePassword, rows, suggestions, onKeyDown, multiple, step, onSearch, error, }: {
    label?: string;
    name?: string;
    type?: string;
    readOnly?: boolean;
    required?: boolean;
    options?: Array<{
        id: string;
        disabled?: boolean;
        value?: string;
    }>;
    labelClasses?: string;
    inputClasses?: string;
    placeholder?: string;
    defaultValue?: string;
    maxLength?: number;
    minLength?: number;
    value?: string;
    maxNumber?: number;
    minNumber?: number;
    step?: number;
    copyPassword?: boolean;
    generatePassword?: boolean;
    suggestions?: ReactNode;
    multiple?: boolean;
    rows?: number;
    onChange?: (value: string) => void;
    onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
    onSearch?: () => void;
    error?: string;
}) => React.JSX.Element;

declare const RichTextEditor: ({ value, onChange }: {
    value: string;
    onChange: (value: string) => void;
}) => React.JSX.Element;

interface Header$1 {
    title?: string;
    startIcon?: ReactNode;
    endIcon?: ReactNode;
    logo?: string;
    logoClassNames?: string;
    className?: string;
}
interface Item {
    label: string;
    icon?: ReactNode;
    active?: boolean;
    link?: string;
    onClick?: () => void;
}
interface Profile {
    username: string;
    avatar?: string;
    link?: string;
    onAvatarClick?: () => void;
    onUsernameClick?: () => void;
}
declare const Nav: ({ header, items, profile, type, rightIcons, hideProfileIcon, hideSearchIcon, onSearch, }: {
    header?: Header$1;
    items?: Item[];
    profile?: Profile;
    type?: "xnav" | "ynav" | "responsive";
    rightIcons?: ReactNode[];
    hideProfileIcon?: boolean;
    hideSearchIcon?: boolean;
    onSearch?: () => void;
}) => React.JSX.Element;

type NavContextType = {
    query: string;
    setQuery: React.Dispatch<React.SetStateAction<string>>;
    searchSuggestions: ReactNode | null;
    setSearchSuggestions: React.Dispatch<React.SetStateAction<ReactNode | null>>;
};
declare const NavProvider: ({ children }: {
    children: ReactNode;
}) => React.JSX.Element;
declare const useNav: () => NavContextType;

declare const Header: ({ title, back, children, type, className, query, refreshing, refreshIcon, onRefresh, setQuery, deleteIcon, onDelete, editIcon, onEdit, copyIcon, onCopy, optionsIcon, onOptionsClicked, steps, closeIcon, onClose, actionIcon, actionLabel, onAction, }: {
    refresh?: boolean;
    title?: string | ReactNode;
    back?: () => void;
    children?: ReactNode;
    type?: "bordered";
    className?: string;
    query?: string;
    editIcon?: ReactNode;
    onEdit?: () => void;
    copyIcon?: ReactNode;
    onCopy?: () => void;
    deleteIcon?: ReactNode;
    onDelete?: () => void;
    optionsIcon?: ReactNode;
    onOptionsClicked?: () => void;
    refreshing?: boolean;
    refreshIcon?: ReactNode;
    onRefresh?: () => void;
    steps?: [{
        name: string;
        onClick?: () => void;
    }];
    setQuery?: (query: string) => void;
    closeIcon?: ReactNode;
    onClose?: () => void;
    actionIcon?: ReactNode;
    actionLabel?: string;
    onAction?: () => void;
}) => React.JSX.Element;

interface ModalContextType {
    openModal: (content: ReactNode) => void;
    closeModal: (index?: number) => void;
    modalStack: ReactNode[];
}
declare const useModal: () => ModalContextType;
interface ModalProviderProps {
    children: ReactNode;
}
declare const ModalProvider: React.FC<ModalProviderProps>;
interface Props {
    children: ReactNode;
    index: number;
}
declare const Modal: React.MemoExoticComponent<({ children, index }: Props) => React.JSX.Element>;

declare const Cropper: ({ title, image, setImage, handleClose, onImageEdit, max_zoom, min_zoom, zoom_step, max_rotation, min_rotation, rotation_step, defaultCrop, defaultRotation, defaultZoom, cropShape, defaultCroppedAreaPixels, }: {
    title?: string;
    image: string | undefined;
    max_zoom?: number;
    min_zoom?: number;
    zoom_step?: number;
    max_rotation?: number;
    min_rotation?: number;
    rotation_step?: number;
    defaultCrop?: {
        x: number;
        y: number;
    };
    defaultRotation?: number;
    defaultZoom?: number;
    defaultCroppedAreaPixels?: {
        x: number;
        y: number;
        width: number;
        height: number;
    } | null;
    setImage: (image: string) => void;
    handleClose: () => void;
    onImageEdit?: () => void;
    cropShape?: "rect" | "round";
}) => React.JSX.Element;

declare const toast: {
    success: (message: string) => void | undefined;
    error: (message: string) => void | undefined;
    info: (message: string) => void | undefined;
    warning: (message: string) => void | undefined;
};
declare const ToastContainer: () => React.JSX.Element;

declare const ConfirmDialog: ({ message, confirmLabel, cancelLabel, neutralLabel, confirmLabelClasses, cancelLabelClasses, neutralLabelClasses, onConfirm, onCancel, onNeutral, }: {
    message: string;
    confirmLabel?: string;
    cancelLabel?: string;
    neutralLabel?: string;
    onConfirm: () => void;
    onCancel?: () => void;
    onNeutral?: () => void;
    confirmLabelClasses?: string;
    cancelLabelClasses?: string;
    neutralLabelClasses?: string;
}) => React.JSX.Element;

declare const CircularProgress: ({ percentage, label, labelClassName, percentClassName, size, }: {
    percentage: number;
    label?: string;
    percentClassName?: string;
    labelClassName?: string;
    size?: number;
}) => React.JSX.Element;

declare const LinearProgressBar: ({ percentage, label, labelType, size, height, width, }: {
    percentage: number;
    label?: string;
    labelType?: "negative" | "amber" | "positive";
    size?: number;
    height?: string;
    width?: string;
}) => React.JSX.Element;

export { Button, CircularProgress, ConfirmDialog, Cropper, Header, InputComponent, LinearProgressBar, Modal, ModalProvider, Nav, NavProvider, RichTextEditor, ToastContainer, toast, useModal, useNav };