import { type ReactNode } from "react"; import { type ColorTokens, type ViewStyle, type TextStyle, type LayoutStyle } 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.45 on the web and Android (the hand-off's), 0.5 on iOS. */ disabledOpacity: number; /** Android header ripple; null on iOS/web. */ ripple: ((t: ColorTokens) => { color: string; borderless: boolean; }) | null; /** * Where the keyboard focus ring sits on the header Pressable when it 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 header * keeps the ring around itself. 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 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 `reference` look: the v4 hand-off's reference-sheet disclosure (a sub-component's * props card, Component.dc.html lines 245 to 250). `container` replaces the card * container, `header` is layered over the header row, `hover` replaces the header's * wash, `title` and `description` are layered over the skin's type with the description * set inline after the title, and `content` is layered over the panel. Absent on a * platform whose own disclosure control draws the card (iOS), where the boolean * changes nothing. */ reference?: { container: (t: ColorTokens) => ViewStyle; header: ViewStyle; hover: (t: ColorTokens) => ViewStyle; title: (t: ColorTokens) => TextStyle; description: (t: ColorTokens) => TextStyle; content: ViewStyle; }; /** The header trigger row layout/insets. */ header: (t: ColorTokens) => ViewStyle; /** The header's wash while a pointer rests on it (web); omit for none. Its fill is an * inner fill, so under glass it tints the material instead of covering it. */ headerHover?: (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. * * * on iOS the default Collapsible already renders as the inset-grouped card, so `card` is a no-op there. * * * wraps the disclosure in an outlined card container with inset header and content. * */ card?: boolean; /** * The reference-sheet card (a component page's sub-component props): * * the card corner on a hairline over the card fill, a 46 px toggle with the title in * 600 14 and the `description` inline after it in the mono meta ink, and the content * flush to the card's edges, for a `reference attached` DataTable (web/Android). On iOS * the default Collapsible already renders as the inset-grouped card, so `reference` * changes nothing there. * * * on iOS the default Collapsible already renders as the inset-grouped card, so `reference` changes nothing there. * * * the card corner on a hairline over the card fill, a 46 px toggle with the title in * 600 14 and the `description` inline after it in the mono meta ink, and the content * flush to the card's edges, for a `reference attached` DataTable. * */ reference?: 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; /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */ style?: LayoutStyle; } /** 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