import { useRender } from '@base-ui/react/use-render';
import { type VariantProps } from 'class-variance-authority';
import * as React from 'react';
import { Button } from './button.js';
import { Input } from './input.js';
import { Separator } from './separator.js';
import { TooltipPopup } from './tooltip.js';
type SidebarContextProps = {
    state: 'expanded' | 'collapsed';
    open: boolean;
    setOpen: (open: boolean) => void;
    openMobile: boolean;
    setOpenMobile: (open: boolean) => void;
    isMobile: boolean;
    toggleSidebar: () => void;
    /** Whether the sidebar is in connected layout mode */
    connected: boolean;
    /** Whether the sidebar is in a loading state */
    loading: boolean;
    /** Custom background color class for the content/inset area */
    contentBgColor?: string;
    /** Ref to the visible sidebar rail element. Use to anchor flyouts/popovers to the sidebar edge. */
    containerRef: React.RefObject<HTMLDivElement | null>;
};
declare const SidebarContext: React.Context<SidebarContextProps | null>, useSidebar: () => SidebarContextProps;
declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, connected, loading, contentBgColor, className, style, children, ...props }: React.ComponentProps<'div'> & {
    defaultOpen?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    /**
     * Enable connected layout mode for use inside AppShell.
     *
     * In connected mode:
     * - Sidebar fills its parent container (no fixed positioning)
     * - Width is controlled by the parent container
     * - Collapse/expand is not supported (sidebar always visible)
     * - The `side` prop is handled by DOM order
     */
    connected?: boolean;
    /** Whether the sidebar is in a loading state */
    loading?: boolean;
    /** Custom background color class for the content/inset area (e.g., 'bg-destructive') */
    contentBgColor?: string;
}): React.JSX.Element;
declare namespace SidebarProvider {
    var displayName: string;
}
/**
 * Sidebar is a responsive navigation container.
 * Supports mobile sheet mode, keyboard shortcuts, and persistent state via cookies.
 *
 * @llms Responsive sidebar with mobile sheet mode
 * @example
 * ```tsx
 * <SidebarProvider>
 *   <Sidebar collapsible="icon">
 *     <SidebarHeader />
 *     <SidebarContent>...</SidebarContent>
 *     <SidebarFooter />
 *   </Sidebar>
 * </SidebarProvider>
 * ```
 */
declare function Sidebar({ side, collapsible, width, collapsedWidth, mobileWidth, offsetTop, offsetBottom, rounded, className, style, children, ...props }: React.ComponentProps<'div'> & {
    side?: 'left' | 'right';
    collapsible?: 'offcanvas' | 'icon' | 'none';
    width?: string;
    collapsedWidth?: string;
    mobileWidth?: string;
    offsetTop?: string;
    offsetBottom?: string;
    rounded?: boolean;
}): React.JSX.Element;
declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
declare namespace SidebarTrigger {
    var displayName: string;
}
declare function SidebarRail({ className, ...props }: React.ComponentProps<'button'>): React.JSX.Element;
declare namespace SidebarRail {
    var displayName: string;
}
declare function SidebarInset({ className, connected: connectedProp, contentBgColor: contentBgColorProp, ...props }: React.ComponentProps<'main'> & {
    /** Enable connected layout mode directly, without needing SidebarProvider */
    connected?: boolean;
    /** Custom background color class (e.g., 'bg-destructive'). Overrides context value. */
    contentBgColor?: string;
}): React.JSX.Element;
declare namespace SidebarInset {
    var displayName: string;
}
declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
declare namespace SidebarInput {
    var displayName: string;
}
declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
declare namespace SidebarHeader {
    var displayName: string;
}
declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
declare namespace SidebarFooter {
    var displayName: string;
}
declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
declare namespace SidebarSeparator {
    var displayName: string;
}
declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
declare namespace SidebarContent {
    var displayName: string;
}
declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
declare namespace SidebarGroup {
    var displayName: string;
}
declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
declare namespace SidebarGroupLabel {
    var displayName: string;
}
declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
declare namespace SidebarGroupAction {
    var displayName: string;
}
declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
declare namespace SidebarGroupContent {
    var displayName: string;
}
declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
declare namespace SidebarMenu {
    var displayName: string;
}
declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
declare namespace SidebarMenuItem {
    var displayName: string;
}
declare const sidebarMenuButtonVariants: (props?: ({
    variant?: "default" | "outline" | null | undefined;
    size?: "default" | "lg" | "sm" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'> & {
    isActive?: boolean;
    tooltip?: string | React.ComponentProps<typeof TooltipPopup>;
} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
declare namespace SidebarMenuButton {
    var displayName: string;
}
declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'> & {
    showOnHover?: boolean;
}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
declare namespace SidebarMenuAction {
    var displayName: string;
}
declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
declare namespace SidebarMenuBadge {
    var displayName: string;
}
declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
    showIcon?: boolean;
}): React.JSX.Element;
declare namespace SidebarMenuSkeleton {
    var displayName: string;
}
declare function SidebarNavSkeleton({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
declare namespace SidebarNavSkeleton {
    var displayName: string;
}
declare function SidebarAccountSkeleton({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
declare namespace SidebarAccountSkeleton {
    var displayName: string;
}
declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
declare namespace SidebarMenuSub {
    var displayName: string;
}
declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
declare namespace SidebarMenuSubItem {
    var displayName: string;
}
declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<'a'> & React.ComponentProps<'a'> & {
    size?: 'sm' | 'md';
    isActive?: boolean;
}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
declare namespace SidebarMenuSubButton {
    var displayName: string;
}
/**
 * Sidebar compound component with dot notation access to all parts.
 *
 * Usage:
 * - `Sidebar.Root` - Main sidebar container (alias for Sidebar)
 * - `Sidebar.Header` - Header section
 * - `Sidebar.Content` - Scrollable content area
 * - `Sidebar.Footer` - Footer section
 * - `Sidebar.Group` - Group container for menu items
 * - `Sidebar.GroupLabel` - Label for a group
 * - `Sidebar.GroupContent` - Content within a group
 * - `Sidebar.GroupAction` - Action button for a group
 * - `Sidebar.Menu` - Menu container
 * - `Sidebar.MenuItem` - Menu item wrapper
 * - `Sidebar.MenuButton` - Clickable menu button
 * - `Sidebar.MenuAction` - Action within a menu item
 * - `Sidebar.MenuBadge` - Badge within a menu item
 * - `Sidebar.MenuSkeleton` - Loading skeleton for menu
 * - `Sidebar.MenuSub` - Submenu container
 * - `Sidebar.MenuSubItem` - Submenu item
 * - `Sidebar.MenuSubButton` - Submenu button
 * - `Sidebar.Input` - Input within sidebar
 * - `Sidebar.Separator` - Visual separator
 * - `Sidebar.Rail` - Resize/toggle rail
 * - `Sidebar.Inset` - Main content inset area
 * - `Sidebar.Trigger` - Toggle button
 */
declare const SidebarCompound: typeof Sidebar & {
    Root: typeof Sidebar;
    Header: typeof SidebarHeader;
    Content: typeof SidebarContent;
    Footer: typeof SidebarFooter;
    Group: typeof SidebarGroup;
    GroupLabel: typeof SidebarGroupLabel;
    GroupContent: typeof SidebarGroupContent;
    GroupAction: typeof SidebarGroupAction;
    Menu: typeof SidebarMenu;
    MenuItem: typeof SidebarMenuItem;
    MenuButton: typeof SidebarMenuButton;
    MenuAction: typeof SidebarMenuAction;
    MenuBadge: typeof SidebarMenuBadge;
    MenuSkeleton: typeof SidebarMenuSkeleton;
    MenuSub: typeof SidebarMenuSub;
    MenuSubItem: typeof SidebarMenuSubItem;
    MenuSubButton: typeof SidebarMenuSubButton;
    Input: typeof SidebarInput;
    Separator: typeof SidebarSeparator;
    Rail: typeof SidebarRail;
    Inset: typeof SidebarInset;
    Trigger: typeof SidebarTrigger;
    NavSkeleton: typeof SidebarNavSkeleton;
    AccountSkeleton: typeof SidebarAccountSkeleton;
};
export { SidebarAccountSkeleton, SidebarCompound as Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavSkeleton, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };