import { Card as WebCard } from "../card/card.js";
import { type ReactNode } from "react";
import { type ColorTokens, type ViewStyle, type TextStyle, type LayoutStyle } from "../../style/index.js";
export interface AccordionSkin {
    /** iOS/web dim the header on press; Android uses a ripple instead (null). */
    pressedOpacity: number | null;
    /** Android header ripple; null on iOS/web. */
    ripple: ((t: ColorTokens) => {
        color: string;
        borderless: boolean;
    }) | null;
    /**
     * Where the keyboard focus ring sits on the header Pressables when the group sits in a
     * surfaced, clipping container (the card variant, the iOS inset group): INSET_FOCUS_RING
     * draws it just inside the full-bleed header, which the clip would otherwise cut. A bare
     * list keeps the ring around the header. The ring itself is the kit Pressable's (the
     * palette's `ring`); no skin suppresses it, since the header paints no focus state of
     * its own. No-op natively.
     */
    focusRing?: ViewStyle;
    /** Chevron glyph size, in px. The glyph paints in the `subtle-foreground` token
     *  (the hand-off's tertiary ink) on every platform. */
    chevronSize: number;
    /** The disclosure chevron glyph at rest: `chevronRight` on iOS/web (the HIG/Radix
     *  tree-disclosure caret, points right and rotates to point down), or `chevronDown`
     *  on Android (the M3 in-place-expansion affordance, points down and rotates to
     *  point up). */
    chevronGlyph: "chevronRight" | "chevronDown";
    /** Degrees the chevron rotates to when OPEN: 90 for the iOS/web right->down idiom,
     *  180 for the M3 down->up (expand_more -> expand_less) idiom. */
    chevronSpinTo: number;
    /** The optional outer container shape (iOS inset-grouped card; flat on web/Android). */
    container: (t: ColorTokens) => ViewStyle;
    /** The `card` variant's surface: an outlined card container wrapping the whole
     *  group on web/Android. On iOS this ALIASES `container` (the default skin
     *  already IS the inset-grouped card), so `card` is a documented no-op there. */
    cardContainer: (t: ColorTokens) => ViewStyle;
    /** The extra header inset applied in `card` mode. Idempotent where the header
     *  already carries the same horizontal inset (iOS/Android): style-array merge
     *  overrides per key, it never sums. */
    cardHeaderInset: ViewStyle;
    /** The extra content inset applied in `card` mode (idempotent, as above). */
    cardContentInset: ViewStyle;
    /** The inter-row divider line, rendered by the shell only between rows (never after
     *  the last one): a full-bleed hairline on web/Android, inset to the text leading
     *  edge on iOS (the grouped-list separator). */
    separator: (t: ColorTokens) => ViewStyle;
    /** The header trigger row layout/insets. */
    header: (t: ColorTokens) => ViewStyle;
    /** The header title type. */
    title: (t: ColorTokens) => TextStyle;
    /** The title's look while a pointer rests on its header (web); omit for none. */
    titleHover?: (t: ColorTokens) => TextStyle;
    /** The muted secondary description line under a row's title (the skin's type
     *  ramp, one step below the title). */
    description: (t: ColorTokens) => TextStyle;
    /** The content panel insets. */
    content: (t: ColorTokens) => ViewStyle;
    /** The default content text type (when an item's content is a plain string). */
    contentText: (t: ColorTokens) => TextStyle;
}
export interface AccordionItem {
    /** Stable identity for the panel; also its controlled-value token. */
    key: string;
    /** The header label. */
    title: string;
    /** The muted secondary line under this row's title. */
    description?: string;
    /** The collapsible panel body. A string renders in the skin's content type; a
     *  ReactNode renders as-is. */
    content: ReactNode;
    /** A disabled row does not toggle and reads dimmed. */
    disabled?: boolean;
}
export interface AccordionProps {
    /** Original Argus run disclosure surface, header and trace insets. */
    activity?: boolean;
    /** Compact activity header and trace indentation. */
    compact?: boolean;
    /** Activity header content; the Accordion owns its trigger and indicator. */
    renderHeader?: (item: AccordionItem, expanded: boolean, indicator: ReactNode) => ReactNode;
    /** The disclosure rows, top to bottom. */
    items?: AccordionItem[];
    /**
     * Controlled open state. A single key in single-open mode, an array of keys in
     * `multiple` mode. Pair with `onValueChange`. Omit for uncontrolled.
     */
    value?: string | string[];
    /** Initial open state for the uncontrolled case (read once). */
    defaultValue?: string | string[];
    /** Called with the next open value whenever a header toggles. */
    onValueChange?: (value: string | string[]) => void;
    /** Allow more than one panel open at once (default: single-open). */
    multiple?: boolean;
    /**
     * Card surface:
     * <!-- only: web -->
     * wraps the group in an outlined card container with inset
     * headers and content (web/Android). On iOS the default Accordion already
     * renders as the inset-grouped card, so `card` is a no-op there.
     * <!-- /only -->
     * <!-- only: ios -->
     * on iOS the default Accordion already renders as the inset-grouped card, so `card` is a no-op there.
     * <!-- /only -->
     * <!-- only: android -->
     * wraps the group in an outlined card container with inset headers and content.
     * <!-- /only -->
     */
    card?: boolean;
    /** Disable the whole group (every row stops toggling and dims). */
    disabled?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */
    style?: LayoutStyle;
}
export declare function createAccordion(skin: AccordionSkin, parts?: {
    Card?: typeof WebCard;
}): (props: AccordionProps) => import("react").JSX.Element;
//# sourceMappingURL=accordion.shared.d.ts.map