import * as React from 'react';
import { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH } from '../AppSidebar/AppSidebar.constants';
import { AppShellContent } from './AppShellContent.js';
import { AppShellPanel, type AppShellPanelProps } from './AppShellPanel.js';
export interface AppShellProps extends React.ComponentProps<'div'> {
    /** Any CSS background value (color, gradient, image). Defaults to var(--app-background). */
    background?: string;
    /** Fixed height, supports CSS calc() */
    height?: string;
    /** Spacing around the inner content in pixels or CSS value */
    padding?: number | string;
    /** Padding on mobile viewports. Defaults to 8px. */
    mobilePadding?: number | string;
    /** Gap between panels in pixels or CSS value. Defaults to 12. */
    gap?: number | string;
    /** Joined-edge mode where panels share borders. Defaults to false. */
    connected?: boolean;
    /** ID of the main content element for skip navigation. */
    skipToId?: string;
    /** Controlled active panel index for mobile tab switching. */
    activePanel?: number;
    /** Callback when active panel changes on mobile. */
    onActivePanelChange?: (index: number) => void;
    /** Default active panel on mobile (default: 0). */
    defaultActivePanel?: number;
    /** Controlled expanded panel index. Use null for no expanded panel. */
    expandedPanel?: number | null;
    /** Initial expanded panel index for uncontrolled root-owned expansion. */
    defaultExpandedPanel?: number | null;
    /** Callback when root-owned expansion changes. */
    onExpandedPanelChange?: (panelIndex: number | null) => void;
    /** Enables root-owned two-panel resizing on desktop. Defaults to true for eligible two-panel layouts. */
    resizablePanels?: boolean;
    /** Initial panel size split in percentages. Defaults to [35, 65]. */
    defaultPanelSizes?: [number, number];
    /** Controlled panel size split in percentages. */
    panelSizes?: [number, number];
    /** Called after the user releases the resize handle. */
    onPanelSizesChange?: (sizes: [number, number]) => void;
    /** Percentage threshold that expands the dominant panel on release. */
    expandThreshold?: number;
}
declare function AppShellRoot({ background, height, padding, mobilePadding, gap, connected, skipToId, activePanel: activePanelProp, onActivePanelChange, defaultActivePanel, expandedPanel: expandedPanelProp, defaultExpandedPanel, onExpandedPanelChange, resizablePanels, defaultPanelSizes, panelSizes, onPanelSizesChange, expandThreshold, className, children, ...props }: AppShellProps): React.ReactElement;
declare namespace AppShellRoot {
    var displayName: string;
}
export interface AppShellSidebarProps extends React.ComponentProps<'div'> {
    /**
     * Explicit width override — bypasses auto-detection. Manual widths are
     * protected by AppSidebar's canonical collapsed width to prevent clipping.
     * When omitted, the sidebar auto-sizes based on the child
     * SidebarProvider's expanded/collapsed state.
     */
    width?: string;
    /** Width when sidebar is expanded (auto mode only). @default '280px' */
    expandedWidth?: string;
    /** Width when sidebar is collapsed (auto mode only). @default '68px' */
    collapsedWidth?: string;
}
/**
 * Layout slot for the sidebar region. Renders a div — the actual aside
 * landmark is provided by AppSidebar/Sidebar primitive inside it.
 *
 * **Auto-detection (default):** When no `width` prop is provided, the sidebar
 * observes the child SidebarProvider's `data-state` attribute via CSS `:has()`
 * and transitions between `collapsedWidth` and `expandedWidth` automatically.
 *
 * **Manual mode:** Pass an explicit `width` to control sizing yourself.
 */
declare function AppShellSidebar({ width, expandedWidth, collapsedWidth, className, style, children, ...props }: AppShellSidebarProps): React.JSX.Element;
declare namespace AppShellSidebar {
    var displayName: string;
}
export interface AppShellHeaderProps extends React.ComponentProps<'div'> {
}
declare function AppShellHeader({ className, children, ...props }: AppShellHeaderProps): React.JSX.Element;
declare namespace AppShellHeader {
    var displayName: string;
}
declare const appShellBackgrounds: {
    readonly transparent: 'transparent';
    readonly appBg: "var(--app-background)";
    readonly neutral: 'var(--muted)';
    readonly brandSubtle: 'linear-gradient(135deg, var(--air-50) 0%, var(--air-100) 100%)';
    readonly brand: 'linear-gradient(135deg, var(--air-400) 0%, var(--primary) 100%)';
    readonly brandDeep: 'linear-gradient(135deg, var(--primary) 0%, var(--air-900) 100%)';
    readonly desertMidnight: 'linear-gradient(135deg, var(--slate-500) 0%, var(--slate-700) 100%)';
    readonly aqua: 'linear-gradient(135deg, var(--air-400) 0%, var(--air-600) 100%)';
};
declare const AppShell: typeof AppShellRoot & {
    Root: typeof AppShellRoot;
    Sidebar: typeof AppShellSidebar;
    Header: typeof AppShellHeader;
    Panel: (({ width, flex, minWidth, expanded, onExpandedChange, label, className, style, children, ...props }: AppShellPanelProps) => React.ReactElement) & {
        displayName: string;
        __appShellType: "AppShell.Panel";
    };
    Content: typeof AppShellContent;
};
export type { AppShellContentProps } from './AppShellContent.js';
export type { AppShellPanelProps } from './AppShellPanel.js';
export { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH, AppShell, AppShellContent, AppShellHeader, AppShellPanel, AppShellRoot, AppShellSidebar, appShellBackgrounds, };