@primer/react-brand/lib/Accordion/Accordion.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { type DetailsHTMLAttributes, type HTMLAttributes, type ReactElement } from 'react';
import { type HeadingProps } from '../';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css';
export type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {
    children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
    variant?: 'default' | 'emphasis';
    handleOpen?: (isOpen: boolean) => void;
};
export declare const AccordionRoot: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
    children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
    variant?: "default" | "emphasis";
    handleOpen?: (isOpen: boolean) => void;
} & React.RefAttributes<HTMLDetailsElement>>;
export declare const AccordionToggleColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];
export type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {
    as?: HeadingProps['as'];
    reversedToggles?: boolean;
    toggleColor?: (typeof AccordionToggleColors)[number];
};
/**
 * TODO This type is incorrect
 * The ref is applied to the summary, not the heading, so the correct type is
 * `forwardRef<HTMLElement, AccordionHeadingProps>`
 */
export declare const AccordionHeading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
    as?: HeadingProps["as"];
    reversedToggles?: boolean;
    toggleColor?: (typeof AccordionToggleColors)[number];
} & React.RefAttributes<HTMLHeadingElement>>;
export type AccordionContentProps = HTMLAttributes<HTMLElement>;
export declare const AccordionContent: ({ className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
export declare const Accordion: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
    children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
    variant?: "default" | "emphasis";
    handleOpen?: (isOpen: boolean) => void;
} & React.RefAttributes<HTMLDetailsElement>> & {
    Content: ({ className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
    Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
        as?: HeadingProps["as"];
        reversedToggles?: boolean;
        toggleColor?: (typeof AccordionToggleColors)[number];
    } & React.RefAttributes<HTMLHeadingElement>>;
};