import { FC, ReactNode } from 'react';
/**
 * Sidebar Item Interface
 *
 * Represents a single item in the sidebar navigation.
 */
export interface SidebarItem {
    /** Unique identifier */
    id: string;
    /** Item label */
    label: string;
    /** Optional icon */
    icon?: ReactNode;
    /** Optional badge */
    badge?: string | number;
    /** Whether item is active */
    isActive?: boolean;
    /** Whether item is disabled */
    disabled?: boolean;
    /** Click handler */
    onClick?: () => void;
    /** Optional href for native links */
    href?: string;
}
/**
 * Sidebar Section Interface
 *
 * Represents a collapsible section in the sidebar.
 */
export interface SidebarSection {
    /** Section title */
    title: string;
    /** Section items */
    items: SidebarItem[];
    /** Whether section is initially collapsed */
    defaultCollapsed?: boolean;
    /** Whether section can be collapsed */
    collapsible?: boolean;
}
/**
 * Sidebar Props Interface
 *
 * Generic sidebar navigation component that accepts all data via props.
 * No dependencies on routing libraries - pure presentation component.
 */
export interface SidebarProps {
    /** Sidebar sections */
    sections: SidebarSection[];
    /** Whether sidebar is collapsed (icon-only mode) */
    isCollapsed?: boolean;
    /** Collapse toggle handler */
    onToggleCollapse?: () => void;
    /** Header content (logo, branding) */
    header?: ReactNode;
    /** Footer content (user menu, settings) */
    footer?: ReactNode;
    /** Additional CSS classes */
    className?: string;
    /** Width when expanded */
    width?: string;
    /** Width when collapsed */
    collapsedWidth?: string;
}
/**
 * Sidebar Component
 *
 * Generic sidebar navigation for app shells. Pure presentation component
 * that accepts all data via props.
 *
 * Features:
 * - Collapsible sections
 * - Collapsed/expanded states (icon-only mode)
 * - Active state indication
 * - Icon and badge support
 * - Header and footer slots
 * - Smooth transitions
 * - Accessible navigation
 *
 * Uses semantic tokens for styling, which must be provided by the shell.
 *
 * @example
 * ```tsx
 * <Sidebar
 *   sections={[
 *     {
 *       title: 'Main',
 *       items: [
 *         { id: 'dashboard', label: 'Dashboard', icon: <HomeIcon />, isActive: true },
 *         { id: 'projects', label: 'Projects', icon: <FolderIcon />, badge: 5 }
 *       ]
 *     },
 *     {
 *       title: 'Settings',
 *       collapsible: true,
 *       items: [
 *         { id: 'preferences', label: 'Preferences', icon: <SettingsIcon /> }
 *       ]
 *     }
 *   ]}
 *   isCollapsed={isSidebarCollapsed}
 *   onToggleCollapse={toggleSidebar}
 *   header={<Logo />}
 *   footer={<UserMenu />}
 * />
 * ```
 */
export declare const Sidebar: FC<SidebarProps>;
//# sourceMappingURL=Sidebar.d.ts.map