import "./accordion.css";
import { type ReactNode } from "react";
import type * as React from "react";
import { type CollapsiblePanelProps, type CollapsibleRootProps } from "@base-ui/react/collapsible";
import { useRender } from "@base-ui/react/use-render";
import { type IconName } from "./icon";
import { type StyleProps } from "./style_props";
import { type InkColor } from "./text_ink";
export interface AccordionProps extends StyleProps {
    /** `AccordionHeader` (+ optionally `AccordionContent`). Content is
     * optional — a header-only Accordion is a plain row, letting a list mix
     * expandable and static rows with identical rhythm. */
    children: ReactNode;
    /** Uncontrolled initial state. Ignored when `expanded` is provided. */
    defaultExpanded?: boolean;
    /** Controlled open state — provide together with `onToggle`. */
    expanded?: boolean;
    onToggle?: (expanded: boolean) => void;
    testID?: string;
    ref?: React.Ref<HTMLDivElement>;
    render?: CollapsibleRootProps["render"];
}
/**
 * A single expand/collapse disclosure — a styled Base UI Collapsible, so the
 * button, `aria-expanded`, the panel's id wiring and the mount/unmount of the
 * body are all its:
 *
 *   <Accordion expanded={open} onToggle={...}>
 *     <AccordionHeader>
 *       <AccordionTitle icon="circle-alert" iconColor="danger">
 *         Công nợ quá hạn trên 30 ngày
 *       </AccordionTitle>
 *       <AccordionMeta>286.500.000 ₫</AccordionMeta>
 *       <Status label="6" color="red" />
 *     </AccordionHeader>
 *     <AccordionContent>…the records behind the number…</AccordionContent>
 *   </Accordion>
 *
 * The chevron and press handling come from `AccordionHeader` automatically
 * when content exists. Controlled via `expanded`/`onToggle`, or uncontrolled
 * via `defaultExpanded`. Compose several (with Dividers) to build a list.
 */
export declare function Accordion({ children, defaultExpanded, expanded, onToggle, testID, render, ref, ...props }: AccordionProps): React.JSX.Element;
export interface AccordionHeaderProps extends StyleProps {
    /** A layout slot. `AccordionTitle` (+ `AccordionMeta`) is the compact
     * list-row heading; for a configurable section-style header, compose the
     * SAME `SectionHeadingTitle`/`SectionHeadingMeta` you'd use in a `Section`
     * (full font/level/description config). Plus a `Status` or any right-side node. */
    children: ReactNode;
    accessibilityLabel?: string;
    testID?: string;
    ref?: React.Ref<HTMLButtonElement>;
    /**
     * The ONE-ARGUMENT form: with content the row is a Base UI trigger and without
     * it a plain box, and the two hand a callback different state objects — so the
     * prop offers what both accept, the element and the props-only callback.
     */
    render?: React.ReactElement | ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement);
}
/**
 * The always-visible row. A Base UI `Collapsible.Trigger` with an auto chevron
 * when the Accordion has `AccordionContent`; a plain row with identical rhythm
 * when it doesn't — a static row wears no button role, because a control that
 * refuses every press is worse than none.
 */
export declare function AccordionHeader(props: AccordionHeaderProps): React.JSX.Element;
export interface AccordionTitleProps extends StyleProps {
    children: ReactNode;
    /** Leading glyph — the row's category/severity marker. */
    icon?: IconName;
    /** The icon's ink ROLE — the row's severity, where the glyph carries it. */
    iconColor?: InkColor;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Title slot for AccordionHeader — optional leading icon + sm label. Grows
 * to push siblings (meta, badges) to the right edge. */
export declare function AccordionTitle({ children, icon, iconColor, render, ref, ...props }: AccordionTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface AccordionMetaProps extends StyleProps {
    children: ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Right-side context for AccordionHeader — an amount, date, or short hint.
 * xs muted, tabular for numerals. */
export declare function AccordionMeta({ children, render, ref, ...props }: AccordionMetaProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface AccordionContentProps extends StyleProps {
    /** Anything — record rows, key-value pairs, free text, actions. */
    children: ReactNode;
    ref?: React.Ref<HTMLDivElement>;
    render?: CollapsiblePanelProps["render"];
}
/** The collapsible body, revealed in place under the header. Plain by
 * design — flush with the header BOX's left edge, no tinted well; the chevron
 * + position already say "inside". Compose rows/dividers/actions directly.
 *
 * A header carrying an icon starts its title 28px in (the 16px glyph and the
 * row's own gap) and the body still starts at 0: the body belongs to the
 * section, not to the heading. A header with no icon has no gutter, so the two
 * share one edge. */
export declare function AccordionContent({ children, render, ref, ...props }: AccordionContentProps): React.JSX.Element;