import type React from 'react';
import type { CloseDetail, CrushDetail, MoveDetail, NavigateDetail, SidebarGroup } from './types.js';
export interface TopBarRef extends HTMLElement {
    /** Opens the mobile navigation drawer. */
    open(): void;
    /** Closes the mobile navigation drawer. */
    close(): void;
    /** Toggles the mobile navigation drawer open/close state. */
    toggle(): void;
}
/**
 * Desktop content uses named slots (`leading`, `content`, `trailing`).
 * Mobile renders a full-width bar (hamburger + brand + action slots) + drawer.
 * Use `mobileLeading` for brand/logo next to hamburger, `mobileTrailing` for action buttons.
 * Mobile drawer navigation uses `groups` prop (same SidebarGroup[] as Sidebar).
 * Open/close the mobile drawer with the `open` boolean prop, or imperatively — see the framework access note below.
 * Style zones via `::part(bar)`, `::part(leading)`, `::part(content)`, `::part(trailing)`, `::part(mobile-bar)`, `::part(mobile-leading)`, `::part(mobile-trailing)`.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<TopBarRef>(null)`, pass `ref={api}`, then `api.current?.open()`.
 * Available: open(), close(), toggle().
 *
 * @csspart bar, leading, content, trailing, mobile-bar, mobile-leading, mobile-trailing
 */
export interface TopBarOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Slot content for the mobile bar center zone.
     * @example 'example'
     */
    mobileContent?: string;
    /**
     * Visual style variant. Allowed values: `filled`, `outline`, `ghost`.
     * @example 'filled'
     */
    variant?: 'filled' | 'outline' | 'ghost';
    /**
     * Corner radius style. Allowed values: `sharp`, `rounded`, `pill`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded' | 'pill';
    /**
     * Placement position relative to the trigger. Allowed values: `static`, `sticky`, `fixed`.
     * @example 'static'
     */
    position?: 'static' | 'sticky' | 'fixed';
    /**
     * Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`.
     * @example 'neutral'
     */
    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Collapses the top bar to a compact height.
     * @defaultValue false
     * @example true
     */
    crush?: boolean;
    /**
     * Viewport width in pixels below which the top bar collapses to mobile mode.
     * @defaultValue 0
     * @example 1
     */
    crushThreshold?: number;
    /**
     * Enables drag-to-reorder for top bar items.
     * @defaultValue false
     * @example true
     */
    movable?: boolean;
    /**
     * Which viewport edge the mobile drawer slides from. Allowed values: `top`, `left`, `right`, `bottom`.
     * @example 'top'
     */
    drawerSide?: 'top' | 'left' | 'right' | 'bottom';
    /**
     * Width preset for the mobile navigation drawer. Allowed values: `sm`, `md`, `lg`, `xl`, `full`.
     * @example 'sm'
     */
    drawerSize?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /**
     * Array of group indices after which to render a visual separator.
     * @example [0, 2]
     */
    separatorsAfter?: number[];
    /**
     * Navigation item groups rendered in the top bar.
     * @example [{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]
     */
    groups?: SidebarGroup[];
    /**
     * Whether the component is in an open/expanded state.
     * @defaultValue false
     * @example true
     */
    open?: boolean;
    /**
     * Fires when the component closes. Detail: `CloseDetail`.
     * @example (event) => console.log(event.detail.reason)
     */
    onClose?: (event: CustomEvent<CloseDetail>) => void;
    /**
     * Fires when the user activates a navigation item. Detail: `NavigateDetail`.
     * @example (event) => console.log(event.detail.href)
     */
    onNavigate?: (event: CustomEvent<NavigateDetail>) => void;
    /**
     * Fires when cx-crush occurs. Detail: `CrushDetail`.
     * @example (event) => console.log(event.detail)
     */
    onCrush?: (event: CustomEvent<CrushDetail>) => void;
    /**
     * Fires when cx-move occurs. Detail: `MoveDetail`.
     * @example (event) => console.log(event.detail)
     */
    onMove?: (event: CustomEvent<MoveDetail>) => void;
    /** Content for the `leading` slot.
     * @example <span>Content</span>
     */
    leading?: React.ReactNode;
    /** Content for the `content` slot.
     * @example <span>Content</span>
     */
    content?: React.ReactNode;
    /** Content for the `trailing` slot.
     * @example <span>Content</span>
     */
    trailing?: React.ReactNode;
    /** Content for the `mobile-leading` slot.
     * @example <span>Content</span>
     */
    mobileLeading?: React.ReactNode;
    /** Content for the `mobile-trailing` slot.
     * @example <span>Content</span>
     */
    mobileTrailing?: React.ReactNode;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<TopBar>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-top-bar>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type TopBarProps = TopBarOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TopBarOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const TopBar: React.ForwardRefExoticComponent<TopBarOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof TopBarOwnProps> & React.RefAttributes<TopBarRef>>;