@teravn/onui/lib/index.d.ts

The React UI component library is based on MUI

import { PaletteMode, AlertProps, CheckboxProps, TypographyProps, StackProps, TextFieldProps, TablePaginationProps, PaginationProps } from '@mui/material';
export * from '@mui/material';
export { useTheme } from '@mui/material';
import React from 'react';
export { DataGrid, DataGridProps, GridCallbackDetails, GridColDef, GridFeatureMode, GridOverlay, GridRowId, GridRowParams, GridRowSelectionModel, GridSortModel, MuiEvent, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, useGridApiContext } from '@mui/x-data-grid';
export { Circle } from '@mui/icons-material';
import { DatePickerProps } from 'react-datepicker';
import { BoxProps } from '@mui/material/Box';
import { DrawerProps } from '@mui/material/Drawer';
import { AppBarProps } from '@mui/material/AppBar';
import { ToastContainerProps } from 'react-toastify';
import * as v15AppRouter from '@mui/material-nextjs/v15-appRouter';
export { v15AppRouter };

type BaseColor = {
    black: string;
    white: string;
};
type ColorRange = {
    25: string;
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
};
type Colors = {
    base: BaseColor;
    error: ColorRange;
    info: ColorRange;
    gray: ColorRange;
    primary: ColorRange;
    secondary: ColorRange;
    success: ColorRange;
    warning: ColorRange;
};
type ThemeColor = {
    dark: Colors;
    light: Colors;
};

interface Settings {
    colors?: ThemeColor;
    mode: PaletteMode;
}
interface Props$b {
    settings: Settings;
    children: any;
}
declare const ThemeProvider: (props: Props$b) => React.JSX.Element;

interface Props$a extends AlertProps {
    title: string;
    description: string;
    status?: AlertProps['severity'];
}
declare const OnAlert: React.FC<Props$a>;

declare const OnCheckbox: React.FC<CheckboxProps>;

interface Props$9 {
    disabled?: boolean;
    value: string;
    onChange: (newValue: any) => void;
}
declare const OnHexColorPicker: React.FC<Props$9>;

type Props$8 = DatePickerProps & {
    className?: string;
    customInput?: React.ReactNode;
    disabled?: boolean;
    name: string;
    placeholder?: string;
    onChange: (newValue: any) => void;
};
declare const OnDatePicker: React.FC<Props$8>;

interface Props$7 {
    className?: string;
    disabled?: boolean;
    endAt: number | null;
    name: string;
    placeholder?: string;
    popperPlacement?: DatePickerProps['popperPlacement'];
    startAt: number | null;
    onChange: (newValue: any) => void;
}
declare const OnDatePickersRange: React.FC<Props$7>;

declare enum DisplaySize {
    xs = "xs",
    sm = "sm",
    md = "md",
    lg = "lg",
    xl = "xl",
    xxl = "xxl"
}
declare enum DisplayWeight {
    regular = "regular",
    medium = "medium",
    semibold = "semibold",
    bold = "bold"
}
interface Props$6 extends TypographyProps {
    size?: keyof typeof DisplaySize;
    fontWeight?: keyof typeof DisplayWeight;
}
declare const OnDisplay: React.FC<Props$6>;

declare const OnFlexSingleRow: React.FC<Omit<StackProps, 'direction'>>;

type Props$5 = TextFieldProps;
declare const OnSearchField: React.FC<Props$5>;

interface Props$4 extends React.SVGProps<SVGSVGElement> {
    icon: string;
}
declare const OnIcon: React.FC<Props$4>;

interface MainContentWrapperComposition {
    Main: React.FC<BoxProps>;
    Header: React.FC<AppBarProps>;
}

interface OnLayoutComposition {
    MainContentWrapper: React.FC<BoxProps> & MainContentWrapperComposition;
    Sidebar: React.FC<DrawerProps>;
}
interface Props$3 {
    children: React.ReactNode;
    className?: string;
}
declare const OnLayout: React.FC<Props$3> & OnLayoutComposition;

type OnPaginationBaseProps = Pick<TablePaginationProps, 'labelDisplayedRows' | 'onRowsPerPageChange' | 'rowsPerPage' | 'page' | 'onPageChange' | 'count' | 'labelRowsPerPage' | 'rowsPerPageOptions' | 'className'> & {
    showAction?: boolean;
    renderItem?: PaginationProps['renderItem'];
};
interface Props$2 extends OnPaginationBaseProps {
}
declare const OnPagination: React.FC<Props$2>;

declare enum TextSize {
    xxs = "xxs",
    xs = "xs",
    sm = "sm",
    md = "md",
    lg = "lg",
    xl = "xl"
}
declare enum TextWeight {
    regular = "regular",
    medium = "medium",
    semibold = "semibold",
    bold = "bold"
}
interface Props$1 extends TypographyProps {
    size?: keyof typeof TextSize;
    fontWeight?: keyof typeof TextWeight;
}
declare const OnText: React.FC<Props$1>;

type Props = ToastContainerProps;
declare const ToastContainer: React.FC<Props>;

/**
 * The onToast() allows you to push an information message to the screen with primary color.
 *
 * @param message A default message
 * @param description A description of the information message. It will be replaced text "Thông tin" in the title.
 * @example_01 alertInfo('Lorem ipsum')
 * @example_02 alertInfo('Thông tin', 'Nội dung của bạn sẽ được phát hành sau 13h' )
 */
declare const onToast: (message: string, description?: string) => void;
/**
 * The onToastInfo() allows you to push an information message to the screen.
 *
 * @param message A information message
 * @param description A description of the information message. It will be replaced text "Thông tin" in the title.
 * @example_01 alertInfo('Lorem ipsum')
 * @example_02 alertInfo('Thông tin', 'Nội dung của bạn sẽ được phát hành sau 13h')
 */
declare const onToastInfo: (message: string, description?: string) => void;
/**
 * The onToastSuccess() allows you to push an success message to the screen.
 *
 * @param message A success message
 * @param description A description of the successful message. It will be replaced text "Thành công" in the title.
 * @example_01 alertSuccess('Lorem ipsum')
 * @example_02 alertSuccess('Upload thành công', 'Tệp đã được tải lên hệ thống.')
 */
declare const onToastSuccess: (message: string, description?: string) => void;
/**
 * The onToastWarning() allows you to push an warning message to the screen.
 *
 * @param message A warning message
 * @param description A description of the warning message. It will be replaced text "Cảnh báo" in the title.
 * @example_01 alertWarning('Lorem ipsum')
 * @example_02 alertWarning('Cảnh báo', 'Hệ thống đang bảo trì.')
 */
declare const onToastWarning: (message: string, description?: string) => void;
/**
 * The onToastError() allows you to push an error message to the screen.
 *
 * @param message An error message
 * @param description A description of the error message. It will be replaced text "Lỗi" in the title.
 * @example_01 alertError('Resolution không hợp lệ')
 * @example_02 alertError('Lỗi Video', 'Bitrate không hợp lệ')
 */
declare const onToastError: (message: string, description?: string) => void;

export { OnAlert, OnCheckbox, OnDatePicker, OnDatePickersRange, OnDisplay, OnFlexSingleRow, OnHexColorPicker, OnIcon, OnLayout, OnPagination, OnSearchField, OnText, ThemeProvider, ToastContainer, onToast, onToastError, onToastInfo, onToastSuccess, onToastWarning };