@sikka/hawa/dist/appLayout/index.d.mts

Modern UI Kit made with Tailwind

import * as React from 'react';
import React__default from 'react';

type DirectionType = "rtl" | "ltr";
type RadioOptionType = {
    label: string;
    value: string;
};

type SubItem$1 = {
    label?: string;
    value?: any;
    icon?: any;
    action?: () => void;
    onMiddleClick?: (e: any) => void;
    highlighted?: boolean;
    disabled?: boolean;
    slug?: string;
};
type MenuItemType = {
    icon?: React.ReactNode;
    label?: string;
    shortcut?: React.ReactNode;
    badged?: boolean;
    value?: any;
    content?: any;
    slug?: string;
    end?: any;
    presist?: boolean;
    itemType?: "separator" | "label" | "custom" | "radio";
    action?: () => void;
    highlighted?: boolean;
    subitems?: SubItem$1[];
    options?: RadioOptionType[];
    currentOption?: string;
    onOptionChange?: (value: string) => void;
    disabled?: boolean;
    onMiddleClick?: (e: any) => void;
    onClick?: any;
};

type ChipColors = "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";

type AppSidebarItemProps = {
    value: string;
    slug?: string;
    label: string;
    badge?: {
        label: string;
        color?: ChipColors;
    };
    icon?: any;
    subitems?: SubItem[];
    onClick?: (e: React.MouseEvent) => void;
    onMouseDown?: (e: React.MouseEvent) => void;
};
type SubItem = {
    value: string;
    label: string;
    slug?: string;
    badge?: {
        label: string;
        color?: ChipColors;
    };
    icon?: any;
    onMouseDown?: (e: React.MouseEvent) => void;
    onClick?: (e: React.MouseEvent) => void;
};

type AppLayoutTypes = {
    /** a custom header to replace the logoLink & logoSymbol */
    header?: React__default.ReactNode;
    design?: "default";
    bordered?: boolean;
    /** The pages of the side drawer */
    drawerItems: AppSidebarItemProps[];
    /** The direction of the layout */
    direction?: DirectionType;
    /** The title of the current selected page, make sure it's the same as the drawerItem slug */
    currentPage: string;
    /** Specifies the title of the page. */
    pageTitle?: string;
    /** Specifies the symbol for the logo. */
    logoSymbol?: any;
    /** Specifies the link for the logo. */
    logoLink?: string;
    /** Specifies the text for the logo. */
    logoText?: any;
    /** Specifies the content to be displayed in the layout. */
    children?: any;
    /** Specifies whether to display the top bar. */
    topBar?: boolean;
    /** Specifies the username to be displayed. */
    username?: string;
    /** Specifies the user email to be displayed. */
    email?: string;
    /** Specifies the image for the avatar. */
    avatarImage?: any;
    /**
     * Specifies the size of the drawer.
     * - 'sm': Small.
     * - 'md': Medium.
     * - 'large': Large.
     */
    drawerSize?: "sm" | "md" | "large";
    /** Specifies the menu items for the profile menu. */
    profileMenuItems?: MenuItemType[];
    onAvatarClick?: () => void;
    /**
     * Specifies the width of the profile menu.
     * - 'default': Default width.
     * - 'sm': Small width.
     * - 'lg': Large width.
     * - 'parent': Inherits width from parent element.
     */
    profileMenuWidth?: "default" | "sm" | "lg" | "parent";
    /** Specifies additional actions for the drawer footer. */
    DrawerFooterActions?: any;
    /** Specifies the item that was clicked. */
    clickedItem?: any;
    /** Event handler for logo button click. */
    onLogoClick?: () => void;
    /** Event handler for drawer expanded. */
    onDrawerExpanded?: (isExpanded: boolean) => void;
    /** Text labels for various UI elements. */
    texts?: {
        /** Label for expand sidebar button. */
        expandSidebar?: string;
        /** Label for collapse sidebar button. */
        collapseSidebar?: string;
    };
    classNames?: {
        fullLogoImg?: string;
        symbolLogoImg?: string;
        logoContainer?: string;
    };
    DrawerLinkComponent?: any;
    MenuLinkComponent?: any;
};
declare const AppLayout: React__default.FunctionComponent<AppLayoutTypes>;

export { AppLayout };