import * as react from 'react';
import { ReactNode } from 'react';

type AccordionOrientation = "horizontal" | "vertical";
/**
 * Render-prop or static node accepted by Trigger.children — lets the
 * caller branch rendering on the section state.
 */
type SectionRenderable = ReactNode | ((state: SectionRenderState) => ReactNode);
interface SectionRenderState {
    /** Section's id */
    id: string;
    /** True when the section is currently open */
    open: boolean;
    /** Direction the panel is laid out in */
    orientation: AccordionOrientation;
    /** Toggle this section open/closed */
    toggle: () => void;
}
interface AccordionPanelProps {
    /** Layout direction. Horizontal for menus/toolbars, vertical for sidebars/panels. */
    orientation?: AccordionOrientation;
    /** Controlled list of open section ids */
    value?: string[];
    /** Default open section ids (uncontrolled) */
    defaultValue?: string[];
    /** Fires whenever the open set changes */
    onValueChange?: (open: string[]) => void;
    /** Optional class on the root container */
    className?: string;
    children: ReactNode;
}
interface AccordionPanelSectionProps {
    /** Stable id used for open-state tracking */
    id: string;
    /**
     * Pinned sections never collapse. Useful for an "anchor" item like a
     * Home button at the start of a menu.
     */
    pinned?: boolean;
    /** Class on the section's outer container */
    className?: string;
    /** Class applied only when the section is open */
    openClassName?: string;
    /** Class applied only when the section is collapsed */
    closedClassName?: string;
    /**
     * Skip the default flex layout (items-center + gap-1 + flex-row/col).
     * Use this for full-bleed panel sections that need their children
     * to stretch (e.g. a chat sidebar where the trigger should fill
     * full panel height). The data attributes, section context, and
     * conditional render of children stay in place.
     */
    unstyled?: boolean;
    /**
     * Children. Compose with `<AccordionPanel.Trigger>` and
     * `<AccordionPanel.Content>` — Trigger always renders, Content only
     * renders when the section is open.
     */
    children: ReactNode;
}
interface AccordionPanelTriggerProps {
    /**
     * Custom render. Receives section state — `{ open, toggle, ... }`. If
     * omitted, the default chevron-divider is rendered.
     */
    children?: SectionRenderable;
    /** Class on the trigger element */
    className?: string;
    /** Aria label override (default: "Toggle section") */
    "aria-label"?: string;
}

/**
 * One collapsible section inside an AccordionPanel.
 *
 * Compose with `<AccordionPanel.Trigger>` and `<AccordionPanel.Content>`
 * children — Content renders only when open, Trigger always renders and
 * adapts its look by state. Children that are not Trigger/Content are
 * rendered as-is, regardless of state, so static decorations stay put.
 *
 * Pinned sections never collapse and don't need a Trigger.
 */
declare function AccordionPanelSection({ id, pinned, className, openClassName, closedClassName, unstyled, children, }: AccordionPanelSectionProps): react.JSX.Element;
declare namespace AccordionPanelSection {
    var displayName: string;
}

/**
 * Trigger for an AccordionPanel.Section.
 *
 * Has two visual roles, picked automatically from section state:
 *
 *   - When the section is OPEN: renders as a thin divider on the section's
 *     trailing edge. Hovering reveals an inset chevron pointing toward the
 *     section so the user knows clicking will collapse it.
 *
 *   - When the section is CLOSED: renders as a standalone chevron button
 *     in place of the section content. Clicking re-expands the section.
 *
 * Supply `children` (node or render-prop) to fully replace the default
 * rendering. The render-prop receives `{ open, toggle, orientation, id }`.
 */
declare function AccordionPanelTrigger({ children, className, "aria-label": ariaLabel, }: AccordionPanelTriggerProps): react.JSX.Element;
declare namespace AccordionPanelTrigger {
    var displayName: string;
}

interface AccordionPanelContentProps {
    children: ReactNode;
    className?: string;
    /**
     * Skip the default flex-row/flex-col + items-center + gap classes so the
     * consumer can lay out the open-state content however they want (e.g. a
     * full-height chat panel with header/scroll/input rows). The
     * `data-react-fancy-accordion-content` attribute and conditional render
     * (only when the section is open) are kept.
     */
    unstyled?: boolean;
}
/**
 * Wrapper for the open-state content of a Section. Renders its children
 * only when the parent Section is open; returns `null` otherwise.
 *
 * Use this so siblings of `<AccordionPanel.Trigger>` inside a section can
 * cleanly toggle in/out of the DOM.
 *
 * The default styling assumes an inline cluster — flex row (horizontal
 * orientation) or column (vertical), centered, with a small gap. For panel
 * use cases where the content needs full-bleed layout (chat panes, canvas
 * surfaces, etc.), pass `unstyled` and supply your own className.
 */
declare function AccordionPanelContent({ children, className, unstyled, }: AccordionPanelContentProps): react.JSX.Element | null;
declare namespace AccordionPanelContent {
    var displayName: string;
}

/**
 * Horizontal or vertical accordion of collapsible sections.
 *
 * Use the compound parts:
 *   <AccordionPanel orientation="horizontal" defaultValue={["wishlist"]}>
 *     <AccordionPanel.Section id="home" pinned>
 *       <Button icon="home" />
 *     </AccordionPanel.Section>
 *     <AccordionPanel.Section id="wishlist">
 *       <Button icon="list">Wishlist</Button>
 *     </AccordionPanel.Section>
 *   </AccordionPanel>
 *
 * Each non-pinned section renders a trigger (default chevron-divider) that
 * collapses/expands. Pass a custom `trigger` prop on a Section, or use the
 * exported `AccordionPanel.Trigger` directly to compose your own.
 */
declare function AccordionPanelRoot({ orientation, value: controlledValue, defaultValue, onValueChange, className, children, }: AccordionPanelProps): react.JSX.Element;
declare namespace AccordionPanelRoot {
    var displayName: string;
}
type AccordionPanelType = typeof AccordionPanelRoot & {
    Section: typeof AccordionPanelSection;
    Trigger: typeof AccordionPanelTrigger;
    Content: typeof AccordionPanelContent;
};
declare const AccordionPanel: AccordionPanelType;

interface AccordionPanelContextValue {
    orientation: AccordionOrientation;
    isOpen: (id: string) => boolean;
    toggle: (id: string) => void;
    open: (id: string) => void;
    close: (id: string) => void;
    /** Ordered list of all section ids registered in this panel */
    sectionIds: string[];
    registerSection: (id: string) => () => void;
}
declare function useAccordionPanel(): AccordionPanelContextValue;
interface AccordionSectionContextValue {
    id: string;
    open: boolean;
    pinned: boolean;
    orientation: AccordionOrientation;
    toggle: () => void;
}
declare function useAccordionSection(): AccordionSectionContextValue;

export { type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type SectionRenderState, type SectionRenderable, useAccordionPanel, useAccordionSection };