import React from 'react';
/**
* Contextual action menu item for routes and groups.
*/
export interface ActionMenuItem {
/** Text label */
label: string;
/** Optional icon component */
icon?: React.ComponentType<{
className?: string;
}>;
/** Click handler */
onClick?: (item: unknown) => void;
/** Visual variant */
variant?: 'default' | 'destructive';
/** Nested sub-actions */
children?: ActionMenuItem[];
}
/**
* Navigation route configuration.
*/
export interface RouteConfig {
/** Relative or absolute path */
path: string;
/** Navigation label */
label: string;
/** Icon component */
icon?: React.ComponentType<{
className?: string;
}>;
/** React component for the route (optional) */
component?: React.ComponentType<{
className?: string;
}>;
/** Hover action menu items (ellipsis) */
actions?: ActionMenuItem[];
/** Auxiliary content shown when the route is selected */
description?: React.ReactNode;
/** Child routes exposed via contextual menu button at the end of the item */
children?: RouteConfig[];
}
export interface NavigationItem {
path: string;
label: string;
icon?: React.ComponentType<{
className?: string;
}>;
active: boolean;
children?: RouteConfig[];
actions?: ActionMenuItem[];
}
export interface SidebarFilterConfig {
show: boolean;
content?: React.ReactNode;
icon?: React.ReactNode;
}
export interface SidebarSearchConfig {
show: boolean;
placeholder?: string;
value?: string;
onChange?: (value: string) => void;
filter?: SidebarFilterConfig;
}
export interface SidebarFixedAreaConfig {
show: boolean;
content?: React.ReactNode;
icon?: React.ComponentType<{
className?: string;
}> | React.ReactElement;
onClick?: () => void;
}
export interface SidebarFooterConfig {
showUser?: boolean;
showSettings?: boolean;
showLogout?: boolean;
}
/**
* Logical grouping of navigation routes (e.g., in Assistant variant).
*/
export interface RouteGroup {
/** Unique ID */
id: string;
/** Group title */
label?: string;
/** Group icon */
icon?: React.ComponentType<{
className?: string;
}>;
/** Navigational items in the group */
items: RouteConfig[];
/** Context menu for the entire group */
actions?: ActionMenuItem[];
}
/**
* Navigation Sidebar component.
*/
export interface SidebarProps {
/** Whether the sidebar is expanded (defaults to LayoutContext state if available) */
expanded?: boolean;
/** Callback to toggle expansion state (defaults to LayoutContext toggle if available) */
onToggle?: () => void;
/** Authenticated user info */
user?: {
name?: string;
email?: string;
avatar?: string;
} | null;
/** Logout callback */
onLogout?: () => void;
/** Settings callback */
onSettingsClick?: () => void;
/** Current location for active state detection (defaults to window.location if missing) */
location?: {
pathname: string;
};
/** Navigation callback (defaults to window.location.href if missing) */
navigate?: (path: string) => void;
/** Flat list of navigation routes */
routes?: RouteConfig[];
/** Logo shown in expanded state */
logo?: React.ReactNode;
/** Logo shown in collapsed state */
logoCollapsed?: React.ReactNode;
/** Visual variant */
variant?: 'default' | 'assistant';
/** Assistant-only fixed area configuration */
fixedArea?: SidebarFixedAreaConfig;
/** Assistant-only search bar configuration */
search?: SidebarSearchConfig;
/** Grouped navigation items */
navigationGroups?: RouteGroup[];
/** Footer content configuration */
footer?: SidebarFooterConfig;
/** Whether to show the footer (defaults: true for 'default', false for 'assistant') */
showFooter?: boolean;
/** Pixel width when expanded (desktop) */
width?: number;
}
/**
* Root container for the Sidebar. Provides context to all sub-components.
* Use this when building a fully custom sidebar layout.
*
* @example
*
* } />
*
*
*
*/
declare function SidebarRoot({ expanded: expandedProp, onToggle: onToggleProp, navigate: navigateProp, location: locationProp, width: widthProp, children, className, }: {
expanded?: boolean;
onToggle?: () => void;
navigate?: (path: string) => void;
location?: {
pathname: string;
};
width?: number;
children: React.ReactNode;
className?: string;
}): React.JSX.Element;
/**
* Toggle button + logo header area for the Sidebar.
*/
declare function SidebarHeader({ logo, logoCollapsed, }: {
logo?: React.ReactNode;
logoCollapsed?: React.ReactNode;
}): React.JSX.Element;
/**
* Navigation area for the Sidebar (default variant).
* Renders grouped or flat navigation items with overflow handling.
*/
declare function SidebarNav({ navigationGroups, routes, variant, }: {
navigationGroups?: RouteGroup[];
routes?: RouteConfig[];
variant?: 'default' | 'assistant';
}): React.JSX.Element;
/**
* Assistant-specific search + fixed area header for the Sidebar.
*/
declare function SidebarSearch({ fixedArea, search, }: {
fixedArea?: SidebarFixedAreaConfig;
search?: SidebarSearchConfig;
}): React.JSX.Element | null;
/**
* Footer area for the Sidebar with user info, settings, and logout.
*/
declare function SidebarFooter({ user, onLogout, onSettingsClick, showUser, showSettings, showLogout, }: {
user?: {
name?: string;
email?: string;
avatar?: string;
} | null;
onLogout?: () => void;
onSettingsClick?: () => void;
showUser?: boolean;
showSettings?: boolean;
showLogout?: boolean;
}): React.JSX.Element;
/**
* Primary navigation sidebar component.
*
* @description
* Manages desktop/mobile responsive navigation rendering with two variants:
* - `"default"` — simple flat or grouped route list.
* - `"assistant"` — advanced variant with fixed areas, search, filters, and grouped navigation.
*
* This component is autonomous: it works out-of-the-box using local state or
* integrates automatically with `LayoutContext` if wrapped in `LayoutProvider`.
*
* For advanced customization, use the Compound Component API:
* ``, ``, ``, ``, ``
*
* @ai-rules
* 1. NEVER recreate the sidebar with raw Tailwind classes — always use this component.
* 2. Use `variant="assistant"` for AI/tool sidebars; use `variant="default"` for standard navigation.
* 3. Supports `Ctrl+B` keyboard shortcut automatically via `LayoutProvider`.
*/
export declare function Sidebar({ expanded: expandedProp, onToggle: onToggleProp, user, onLogout, onSettingsClick, location: locationProp, navigate: navigateProp, routes, logo, logoCollapsed, variant, fixedArea, search, navigationGroups, footer, showFooter, width: widthProp, }: SidebarProps): React.JSX.Element;
export declare namespace Sidebar {
var Root: typeof SidebarRoot;
var Header: typeof SidebarHeader;
var Search: typeof SidebarSearch;
var Nav: typeof SidebarNav;
var Footer: typeof SidebarFooter;
}
export { useSidebar } from './use-sidebar';
export type { UseSidebarProps } from './use-sidebar';