import { default as React } from 'react';
import { IconName } from '../display/Icon';
export interface SideNavProps {
    /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */
    collapsed?: boolean;
    /** Callback when collapsed state changes (via toggle button or responsive breakpoint). */
    onCollapsedChange?: (collapsed: boolean) => void;
    /** Show a collapse/expand toggle button in the sidebar (default true). */
    showCollapseToggle?: boolean;
    /** Width in pixels (default 260) */
    width?: number;
    /** Collapsed width in pixels (default 64) */
    collapsedWidth?: number;
    /**
     * Row density. `'compact'` tightens row padding, drops the left accent bar
     * in favour of a pill-style (rounded, bg-tinted) active row, and shrinks the
     * label — matching the v2.3 operator/admin secondary-nav mock. Default
     * `'default'`. (TODO: row inset + mono section headings for full mock parity.)
     */
    density?: "default" | "compact";
    /**
     * Mobile viewport behavior.
     * - `'drawer'` (default): hamburger button with slide-out overlay drawer.
     * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).
     */
    mobileVariant?: "drawer" | "collapsed";
    /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */
    children?: React.ReactNode;
    /** Custom style */
    style?: React.CSSProperties;
}
declare const SideNavRoot: React.NamedExoticComponent<SideNavProps>;
/** Default height for the logo row so dashboard / operator / other apps align the same mark. */
export declare const SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;
export interface SideNavHeaderProps {
    /** Logo element (Icon, image, or ReactNode) */
    logo?: React.ReactNode;
    /** Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) */
    collapsedLogo?: React.ReactNode;
    /** App title */
    title?: string;
    /** Subtitle or version */
    subtitle?: string;
    /** Role badge (e.g., "Operator", "Admin") */
    badge?: string;
    /** Badge variant for color */
    badgeVariant?: "info" | "success" | "warning" | "caution";
    /**
     * Fixed height (px) for the top logo band. Title, subtitle, and badge render below this band
     * so different logo assets still line up across apps (dashboard vs operator).
     */
    logoSlotHeight?: number;
    /** Children override (advanced: replaces default header content entirely) */
    children?: React.ReactNode;
}
declare const SideNavHeader: React.NamedExoticComponent<SideNavHeaderProps>;
export interface SideNavItemProps {
    /** Icon name from zendir-ui icon library */
    icon?: IconName | React.ReactNode;
    /** Label text */
    label: string;
    /** Description text displayed beneath the label (hidden in collapsed mode) */
    description?: string;
    /** Small tag/chip displayed after the label (e.g. "v2", "NEW", "BETA") */
    tag?: string;
    /** Tag color variant */
    tagVariant?: "default" | "info" | "success" | "warning" | "danger";
    /** Link href (renders <a>) */
    href?: string;
    /** Click handler (renders <button>) */
    onClick?: () => void;
    /** Active state */
    active?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Notification badge count */
    badge?: number;
    /** External link indicator */
    external?: boolean;
    /**
     * Astro UX status level — renders a dual-coded indicator (color + shape).
     * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,
     * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.
     */
    status?: "off" | "standby" | "normal" | "caution" | "serious" | "critical";
    /** Optional status label shown as tooltip or text next to status shape */
    statusLabel?: string;
    /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */
    suffix?: React.ReactNode;
}
declare const SideNavItem: React.NamedExoticComponent<SideNavItemProps>;
export interface SideNavSectionProps {
    /** Section title */
    title?: string;
    /** Children (SideNav.Item elements) */
    children?: React.ReactNode;
}
declare const SideNavSection: React.NamedExoticComponent<SideNavSectionProps>;
export interface SideNavDividerProps {
    /** Optional label shown in the center of the divider line */
    label?: string;
}
declare const SideNavDivider: React.NamedExoticComponent<SideNavDividerProps>;
export interface SideNavFooterProps {
    children?: React.ReactNode;
}
declare const SideNavFooter: React.NamedExoticComponent<SideNavFooterProps>;
type SideNavComponent = typeof SideNavRoot & {
    Header: typeof SideNavHeader;
    Item: typeof SideNavItem;
    Section: typeof SideNavSection;
    Divider: typeof SideNavDivider;
    Footer: typeof SideNavFooter;
};
export declare const SideNav: SideNavComponent;
export default SideNav;