import type React from 'react';
import type { CloseDetail, NavigateDetail, SidebarGroup, SidebarToggleDetail } from './types.js';
export interface SidebarRef extends HTMLElement {
    /** Opens the mobile sidebar drawer. */
    open(): void;
    /** Closes the mobile sidebar drawer. */
    close(): void;
    /** Toggles the mobile sidebar drawer open/close state. */
    toggle(): void;
}
/**
 * Navigation structure is passed via `groups` (SidebarGroup[]) — not as children.
 * Each group has a label and items with icons, hrefs, and active state.
 * The `onNavigate` event detail contains the item `id` and `href`.
 * The `onToggle` event fires on expand/narrow state changes with `{ state: 'expanded' | 'narrow' }`.
 * Mobile renders a full-width bar (hamburger + brand + action slots) + drawer.
 * Use `mobileActions` for trailing action buttons in the mobile bar.
 * Style zones via `::part(header)`, `::part(nav)`, `::part(footer)`, `::part(mobile-bar)`, `::part(mobile-leading)`, `::part(mobile-trailing)`.
 * Mobile drawer branding goes in `mobileHeader` / `mobileFooter` — `header`/`footer` reach the DESKTOP sidebar only, which is hidden on mobile.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<SidebarRef>(null)`, pass `ref={api}`, then `api.current?.open()`.
 * Available: open(), close(), toggle().
 *
 * @csspart base, header, nav, footer, mobile-bar, mobile-leading, mobile-trailing, mobile-header, mobile-footer
 */
export interface SidebarOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Which viewport edge the component anchors to. Allowed values: `left`, `right`.
     * @example 'left'
     */
    side?: 'left' | 'right';
    /**
     * Sidebar state: expanded, collapsed, or auto. Allowed values: `expanded`, `narrow`, `hidden`.
     * @example 'expanded'
     */
    state?: 'expanded' | 'narrow' | 'hidden';
    /**
     * Corner radius style. Allowed values: `sharp`, `rounded`, `pill`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded' | 'pill';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Pre-rendered HTML for action buttons in the mobile bar trailing zone.
     * @example 'example'
     */
    mobileActions?: string;
    /**
     * Array of group indices after which to render a visual separator.
     * @example [10, 25, 50]
     */
    separatorsAfter?: number[];
    /**
     * Navigation groups. Each group has a label and array of NavItem entries.
     * @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 the expanded or narrow state toggles. Detail: `SidebarToggleDetail`.
     * @example (event) => console.log(event.detail.state)
     */
    onToggle?: (event: CustomEvent<SidebarToggleDetail>) => void;
    /** Content for the `header` slot.
     * @example <span>Content</span>
     */
    header?: React.ReactNode;
    /** Content for the `footer` slot.
     * @example <span>Content</span>
     */
    footer?: 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;
    /** Content for the `mobile-header` slot.
     * @example <span>Content</span>
     */
    mobileHeader?: React.ReactNode;
    /** Content for the `mobile-footer` slot.
     * @example <span>Content</span>
     */
    mobileFooter?: 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 `<Sidebar>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-sidebar>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type SidebarProps = SidebarOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof SidebarOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Sidebar: React.ForwardRefExoticComponent<SidebarOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof SidebarOwnProps> & React.RefAttributes<SidebarRef>>;