alouette/dist/definitions/ui/containers/Disclosure.d.ts

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

import { type ReactNode } from "react";
import type { VariantProps } from "tailwind-variants";
declare const disclosureVariants: import("tailwind-variants").TVReturnType<{
    size: {
        sm: {
            trigger: string;
        };
        md: {
            trigger: string;
        };
    };
    guide: {
        true: {
            content: string;
        };
        false: {
            content: string;
        };
    };
    expanded: {
        true: {
            caretFrame: string;
        };
        false: {
            caretFrame: string;
        };
    };
    disabled: {
        true: {
            caret: string;
        };
        false: {
            caret: string;
        };
    };
}, {
    root: string;
    trigger: string;
    caretFrame: string;
    caret: string;
    label: string;
    clip: string;
    content: string;
}, undefined, {
    size: {
        sm: {
            trigger: string;
        };
        md: {
            trigger: string;
        };
    };
    guide: {
        true: {
            content: string;
        };
        false: {
            content: string;
        };
    };
    expanded: {
        true: {
            caretFrame: string;
        };
        false: {
            caretFrame: string;
        };
    };
    disabled: {
        true: {
            caret: string;
        };
        false: {
            caret: string;
        };
    };
}, {
    root: string;
    trigger: string;
    caretFrame: string;
    caret: string;
    label: string;
    clip: string;
    content: string;
}, import("tailwind-variants").TVReturnType<{
    size: {
        sm: {
            trigger: string;
        };
        md: {
            trigger: string;
        };
    };
    guide: {
        true: {
            content: string;
        };
        false: {
            content: string;
        };
    };
    expanded: {
        true: {
            caretFrame: string;
        };
        false: {
            caretFrame: string;
        };
    };
    disabled: {
        true: {
            caret: string;
        };
        false: {
            caret: string;
        };
    };
}, {
    root: string;
    trigger: string;
    caretFrame: string;
    caret: string;
    label: string;
    clip: string;
    content: string;
}, undefined, unknown, unknown, undefined>>;
type DisclosureVariantProps = VariantProps<typeof disclosureVariants>;
export interface DisclosureProps {
    /**
     * The trigger's text, which stays visible in both states. Inline text
     * content only — strings and nested `Text` / `Code` runs — as it renders
     * inside a `Text` and names the trigger: never a link or another pressable
     * (an interactive element inside a button). Content without text needs an
     * `aria-label`.
     */
    label: ReactNode;
    /**
     * Classes for the label's `Text`, which defaults to `text-sm text-muted`.
     * The disabled color is applied after them, so a color set here still dims.
     */
    labelClassName?: string;
    /** Accessible name of the trigger, when its label carries no text. */
    "aria-label"?: string;
    /**
     * `"md"` (default) holds the trigger at the control height (the 44px touch
     * target). `"sm"` sizes it to a line of text, for a disclosure inside running
     * content (a markdown `<details>`), like a text link: a line plus its
     * padding still clears the 24px of WCAG 2.5.8.
     */
    size?: DisclosureVariantProps["size"];
    /**
     * Draws a line down the content's leading edge, under the caret, to show
     * where long or nested content ends. Leave it off when the content is a
     * surface, whose own edge already frames it.
     */
    guide?: boolean;
    children: ReactNode;
    expanded?: boolean;
    defaultExpanded?: boolean;
    onExpandedChange?: (expanded: boolean) => void;
    disabled?: boolean;
    className?: string;
}
/**
 * A caret row that shows or hides the content below it — the WAI-ARIA
 * disclosure pattern. The content mounts only while expanded and animates with
 * the `disclose-*` tokens.
 */
export declare function Disclosure({ label, labelClassName, "aria-label": ariaLabel, size, guide, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, disabled, className, }: DisclosureProps): ReactNode;
export {};
//# sourceMappingURL=Disclosure.d.ts.map