import { ReactNode } from 'react';
export type SidebarSide = 'left' | 'right';
export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
export type SidebarUserStatus = 'online' | 'offline' | 'away' | 'busy';
export interface SidebarContextValue {
    collapsed: boolean;
    setCollapsed: (collapsed: boolean) => void;
    toggleCollapsed: () => void;
    width: {
        expanded: number;
        collapsed: number;
    };
    side: SidebarSide;
    variant: SidebarVariant;
    /** Whether the sidebar is currently showing as mobile overlay */
    isMobileOpen: boolean;
    setMobileOpen: (open: boolean) => void;
    /** Whether we're below the mobile breakpoint */
    isMobile: boolean;
}
export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Which side the sidebar appears on
     * @default "left"
     */
    side?: SidebarSide;
    /**
     * Visual variant of the sidebar
     * @default "sidebar"
     */
    variant?: SidebarVariant;
    /**
     * Whether the sidebar is collapsed by default
     * @default false
     */
    defaultCollapsed?: boolean;
    /**
     * Controlled collapsed state
     */
    collapsed?: boolean;
    /**
     * Callback when collapsed state changes
     */
    onCollapsedChange?: (collapsed: boolean) => void;
    /**
     * Sidebar width configuration
     */
    width?: {
        expanded?: number;
        collapsed?: number;
    };
    /**
     * Mobile breakpoint in pixels. Below this, sidebar becomes a full-screen overlay.
     * @default 1024
     */
    mobileBreakpoint?: number;
    /**
     * Controlled mobile open state
     */
    mobileOpen?: boolean;
    /**
     * Callback when mobile open state changes
     */
    onMobileOpenChange?: (open: boolean) => void;
    /**
     * Children components
     */
    children: ReactNode;
    /**
     * Custom theme overrides
     */
    theme?: SidebarThemeOverrides;
}
export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Logo component to display
     */
    logo?: ReactNode;
    /**
     * Whether to show the collapse toggle button
     * @default true
     */
    showToggle?: boolean;
    /**
     * Custom toggle button
     */
    customToggle?: ReactNode;
    /**
     * Children for custom header content
     */
    children?: ReactNode;
}
export interface SidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
}
export interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
}
export interface SidebarNavProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * When true, only one submenu can be open at a time within this nav.
     * Opening a new submenu auto-closes the previously open one.
     * @default false
     */
    accordion?: boolean;
    children: ReactNode;
}
export interface SidebarNavGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Title for the navigation group
     */
    title?: string;
    /**
     * Whether to show the title when sidebar is collapsed
     * @default false
     */
    showTitleWhenCollapsed?: boolean;
    /**
     * Children navigation items
     */
    children: ReactNode;
}
export interface SidebarToggleProps extends React.HTMLAttributes<HTMLButtonElement> {
    /**
     * Custom icon for expanded state
     */
    expandIcon?: ReactNode;
    /**
     * Custom icon for collapsed state
     */
    collapseIcon?: ReactNode;
}
export interface SidebarMobileTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
    /**
     * Custom icon for the trigger
     */
    icon?: ReactNode;
}
export interface SidebarUserProfileProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * User display name
     */
    name: string;
    /**
     * User email
     */
    email?: string;
    /**
     * Avatar image URL
     */
    avatar?: string;
    /**
     * Online status indicator
     */
    status?: SidebarUserStatus;
    /**
     * Content to render when the profile is clicked (e.g. dropdown menu)
     */
    dropdownContent?: ReactNode;
}
export interface SidebarTheme {
    baseStyle: string;
    variants: {
        [K in SidebarVariant]: string;
    };
    sides: {
        [K in SidebarSide]: string;
    };
    collapsed: string;
    expanded: string;
    mobileOverlay: string;
    mobileBackdrop: string;
}
export interface SidebarThemeOverrides {
    baseStyle?: string;
    variants?: Partial<{
        [K in SidebarVariant]: string;
    }>;
    sides?: Partial<{
        [K in SidebarSide]: string;
    }>;
    collapsed?: string;
    expanded?: string;
    mobileOverlay?: string;
    mobileBackdrop?: string;
}
