import { type ReactNode } from "react";
import { type ColorTokens, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js";
export interface CollapsibleSkin {
    /** iOS/web dim the header on press; Android uses a ripple instead (null). */
    pressedOpacity: number | null;
    /** Disabled-header dim opacity: 0.5 on web/iOS (shadcn / HIG), 0.38 on Android
     *  (M3 disabled content = 38% on-surface). */
    disabledOpacity: number;
    /** Android header ripple; null on iOS/web. */
    ripple: ((t: ColorTokens) => {
        color: string;
        borderless: boolean;
    }) | null;
    /**
     * Web-only focus-outline reset for the header Pressable, so the
     * react-native-web keyboard-focus blue ring (which a real device never shows)
     * is suppressed. No-op natively, where `outline*` are not real styles.
     */
    focusOutlineReset?: ViewStyle;
    /** Chevron glyph size, in px. The glyph paints in the `muted-foreground` token
     *  (the HIG tertiary-gray / M3 on-surface-variant disclosure tint) on every
     *  platform, via the kit Icon's `muted` color prop. */
    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 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
     *  disclosure 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 header trigger row layout/insets. */
    header: (t: ColorTokens) => ViewStyle;
    /** The header title type (used for the default `title` text). */
    title: (t: ColorTokens) => TextStyle;
    /** The muted secondary description line under the 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 the children is a plain string). */
    contentText: (t: ColorTokens) => TextStyle;
}
export interface CollapsibleProps {
    /** The default trigger label text. */
    title?: string;
    /**
     * The muted secondary line under the title in the default trigger anatomy
     * (ignored when a custom `trigger` is given, which owns its own anatomy).
     */
    description?: string;
    /**
     * A custom trigger node; if provided, it renders as the pressable's content
     * instead of the `title` text (the chevron still renders alongside).
     */
    trigger?: ReactNode;
    /**
     * Card surface: wraps the disclosure in an outlined card container with inset
     * header and content (web/Android). On iOS the default Collapsible already
     * renders as the inset-grouped card, so `card` is a no-op there.
     */
    card?: boolean;
    /** The collapsible content. A string renders in the skin's content type; a
     *  ReactNode renders as-is. */
    children: ReactNode;
    /** Controlled open state. Pair with `onOpenChange`. Omit for uncontrolled. */
    open?: boolean;
    /** Called with the next open state whenever the header toggles. */
    onOpenChange?: (open: boolean) => void;
    /** Initial open state for the uncontrolled case (read once, default false). */
    defaultOpen?: boolean;
    /** A disabled header does not toggle and reads dimmed. */
    disabled?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Outer layout composition only (width/flex within a parent), never a restyle hook. */
    style?: StyleProp<ViewStyle>;
}
/** Build a Collapsible component from a platform skin. */
export declare function createCollapsible(skin: CollapsibleSkin): (props: CollapsibleProps) => import("react").JSX.Element;
//# sourceMappingURL=collapsible.shared.d.ts.map