/** biome-ignore-all lint/a11y/noNoninteractiveTabindex: ChatList uses tabIndex on scrollable div for keyboard scrolling */
/** biome-ignore-all lint/a11y/useSemanticElements: NavSection uses role="separator" on inner <div>; ChatList uses role="list" on scrollable div */
/** biome-ignore-all lint/a11y/useFocusableInteractive: Non-focusable separator per WAI-ARIA spec for decorative separators */
/** biome-ignore-all lint/a11y/useAriaPropsForRole: Non-focusable separators don't require aria-valuenow per WAI-ARIA spec */
/** biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: role="separator" on <div> inside list items for semantic section boundaries */
import { type VariantProps } from 'class-variance-authority';
import * as React from 'react';
import { Sidebar, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, useSidebar } from '../../ui/sidebar.js';
export interface AppSidebarLogoProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Logo image or element */
    logo?: React.ReactNode;
    /** Icon to show when sidebar is compacted. Defaults to Humain logomark. */
    compactedLogo?: React.ReactNode;
    /** Subtext displayed below the logo (e.g., "Dashboard"). Hidden when collapsed. */
    subtext?: string;
}
export interface AppSidebarSlotProps {
    children?: React.ReactNode;
    className?: string;
}
declare function AppSidebarHeader({ children, className }: AppSidebarSlotProps): React.JSX.Element;
declare function AppSidebarContent({ children, className }: AppSidebarSlotProps): React.JSX.Element;
declare function AppSidebarFooter({ children, className }: AppSidebarSlotProps): React.JSX.Element;
export interface AppSidebarNavProps {
    children?: React.ReactNode;
    /** Accessible label for the nav landmark (useful when multiple Nav instances exist) */
    'aria-label'?: string;
    className?: string;
}
declare function AppSidebarNav({ children, 'aria-label': ariaLabel, className, }: AppSidebarNavProps): React.JSX.Element;
export interface AppSidebarNavSectionProps {
    /** Section label shown when sidebar is expanded */
    label: string;
    /** Additional className */
    className?: string;
}
declare function AppSidebarNavSection({ label, className }: AppSidebarNavSectionProps): React.JSX.Element;
declare const navItemVariants: (props?: ({
    state?: "active" | "default" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface AppSidebarNavItemProps {
    icon: React.ReactNode;
    label: string;
    isActive?: boolean;
    badge?: string | number;
    onClick?: () => void;
    href?: string;
    className?: string;
    /** Sub-navigation children (AppSidebar.NavSub items). When present, renders as collapsible parent. */
    children?: React.ReactNode;
}
declare function AppSidebarNavItem({ icon, label, isActive, badge, onClick, href, className, children, }: AppSidebarNavItemProps): React.JSX.Element;
export interface AppSidebarNavSubProps {
    label: string;
    badge?: string | number;
    isActive?: boolean;
    href?: string;
    onClick?: () => void;
    className?: string;
}
declare function AppSidebarNavSub({ label, badge, isActive, href, onClick, className, }: AppSidebarNavSubProps): React.JSX.Element;
export interface AppSidebarNavSkeletonProps {
    /** Number of skeleton items to show */
    count?: number;
    className?: string;
}
declare function AppSidebarNavSkeleton({ count, className, }: AppSidebarNavSkeletonProps): React.JSX.Element;
export interface AppSidebarChatListProps {
    /** Section label */
    label?: string;
    children?: React.ReactNode;
    className?: string;
}
declare function AppSidebarChatList({ label, children, className, }: AppSidebarChatListProps): React.JSX.Element;
declare const chatItemVariants: (props?: ({
    state?: "default" | "hover" | "selected" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface AppSidebarChatItemProps extends VariantProps<typeof chatItemVariants> {
    /** Chat title */
    title: string;
    /** Time indicator (e.g., "12h ago") */
    time?: string;
    /** Icon for collapsed view (defaults to chat bubble) */
    icon?: React.ReactNode;
    /** Whether this chat is selected */
    isSelected?: boolean;
    /** Click handler */
    onClick?: () => void;
    /** Context menu handler (right-click) */
    onContextMenu?: (event: React.MouseEvent) => void;
    /** Additional className */
    className?: string;
}
declare function AppSidebarChatItem({ title, time, icon, isSelected, onClick, onContextMenu, className, }: AppSidebarChatItemProps): React.JSX.Element;
export interface AppSidebarChatListSkeletonProps {
    /** Number of skeleton items to show */
    count?: number;
    /** Section label */
    label?: string;
    className?: string;
}
declare function AppSidebarChatListSkeleton({ count, label, className, }: AppSidebarChatListSkeletonProps): React.JSX.Element;
export interface AppSidebarAccountProps extends React.HTMLAttributes<HTMLDivElement> {
    /** User's name */
    name: string;
    /** Subtitle text (e.g., email, role) */
    subtitle?: string;
    /** User's avatar URL */
    avatarSrc?: string;
    /** Whether user is online */
    isOnline?: boolean;
    /** Click handler for the expand button */
    onExpand?: () => void;
}
declare function AppSidebarAccount({ name, subtitle, avatarSrc, isOnline, onExpand, className, }: AppSidebarAccountProps): React.JSX.Element;
declare function AppSidebarAccountSkeleton({ className }: {
    className?: string;
}): React.JSX.Element;
export interface AppSidebarSkeletonProps {
    /** Number of nav skeleton items */
    navCount?: number;
    /** Number of chat skeleton items */
    chatCount?: number;
    /** Logo element */
    logo?: React.ReactNode;
    /** Icon to show when sidebar is compacted. Defaults to Humain logomark. */
    compactedLogo?: React.ReactNode;
    /** Collapsible mode */
    collapsible?: 'offcanvas' | 'icon' | 'none';
    /** Side of the screen */
    side?: 'left' | 'right';
    /** Whether to round sidebar corners */
    rounded?: boolean;
    /** Custom background color class for the sidebar (e.g., 'bg-card') */
    sidebarBgColor?: string;
    className?: string;
}
declare function AppSidebarSkeleton({ navCount, chatCount, logo, compactedLogo, collapsible, side, rounded, sidebarBgColor, className, }: AppSidebarSkeletonProps): React.JSX.Element;
export interface AppSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Logo element or configuration */
    logo?: React.ReactNode;
    /** Icon to show when sidebar is compacted. Defaults to Humain logomark. */
    compactedLogo?: React.ReactNode;
    /** Subtext displayed below the logo (e.g., "Dashboard"). Hidden when collapsed. */
    logoSubtext?: string;
    /** Collapsible mode - 'icon' shows only icons when collapsed, 'none' disables collapsing */
    collapsible?: 'offcanvas' | 'icon' | 'none';
    /** Side of the screen. When omitted, resolves from the nearest DOM direction. */
    side?: 'left' | 'right';
    /** Whether to round sidebar corners */
    rounded?: boolean;
    /** Custom background color class for the sidebar (e.g., 'bg-card'). Defaults to the sidebar token when expanded, bg-transparent when collapsed. */
    sidebarBgColor?: string;
    /** Children (compound components) */
    children?: React.ReactNode;
}
/**
 * AppSidebar is a full-featured application sidebar with navigation, chat list, and account sections.
 * Supports collapsible modes with a unified logo toggle and loading skeletons.
 *
 * @llms Full-featured app sidebar with nav, chat list, account, collapsible modes
 * @example
 * ```tsx
 * <AppSidebar logo={<Logo />} collapsible="icon">
 *   <AppSidebar.Nav>
 *     <AppSidebar.NavItem icon={<Home />} label="Home" isActive />
 *   </AppSidebar.Nav>
 *   <AppSidebar.ChatList>
 *     <AppSidebar.ChatItem title="Chat 1" />
 *   </AppSidebar.ChatList>
 *   <AppSidebar.Account name="User" subtitle="user@example.com" />
 * </AppSidebar>
 * ```
 */
declare function AppSidebarRoot({ logo, compactedLogo, logoSubtext, collapsible, side, rounded, sidebarBgColor, className, children, dir, ...props }: AppSidebarProps): React.JSX.Element;
export declare const AppSidebar: typeof AppSidebarRoot & {
    Header: typeof AppSidebarHeader;
    Content: typeof AppSidebarContent;
    Footer: typeof AppSidebarFooter;
    Nav: typeof AppSidebarNav;
    NavSection: typeof AppSidebarNavSection;
    NavItem: typeof AppSidebarNavItem;
    NavSub: typeof AppSidebarNavSub;
    NavSkeleton: typeof AppSidebarNavSkeleton;
    ChatList: typeof AppSidebarChatList;
    ChatItem: typeof AppSidebarChatItem;
    ChatListSkeleton: typeof AppSidebarChatListSkeleton;
    Account: typeof AppSidebarAccount;
    AccountSkeleton: typeof AppSidebarAccountSkeleton;
    Skeleton: typeof AppSidebarSkeleton;
};
export { MOBILE_BREAKPOINT, useIsMobile } from '../../../hooks/use-mobile.js';
export { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH, } from './AppSidebar.constants';
export type { AppSidebarAccountProps as AccountProps, AppSidebarChatItemProps as ChatItemProps, AppSidebarChatListProps as ChatListProps, AppSidebarChatListSkeletonProps as ChatListSkeletonProps, AppSidebarNavItemProps as NavItemProps, AppSidebarNavProps as NavProps, AppSidebarNavSectionProps as NavSectionProps, AppSidebarNavSkeletonProps as NavSkeletonProps, AppSidebarNavSubProps as NavSubProps, AppSidebarSkeletonProps as SkeletonProps, AppSidebarSlotProps as SlotProps, };
export { chatItemVariants, navItemVariants, Sidebar, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, useSidebar, };