@navikt/ds-react/esm/accordion/Accordion.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
import type { AkselColor } from "../types/index.js";
import AccordionContent, { AccordionContentProps } from "./AccordionContent.js";
import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader.js";
import AccordionItem, { AccordionItemProps } from "./AccordionItem.js";
interface AccordionComponent extends React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>> {
    /**
     * @see 🏷️ {@link AccordionItemProps}
     */
    Item: typeof AccordionItem;
    /**
     * @see 🏷️ {@link AccordionHeaderProps}
     */
    Header: typeof AccordionHeader;
    /**
     * @see 🏷️ {@link AccordionContentProps}
     */
    Content: typeof AccordionContent;
}
interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * @deprecated Will be removed in a future major version. Use `data-color` instead.
     */
    variant?: "default" | "neutral";
    /**
     * @default "medium"
     */
    size?: "large" | "medium" | "small";
    /**
     * Whether to indent content or not.
     * @default true
     */
    indent?: boolean;
    /**
     * Instances of `Accordion.Item`.
     */
    children: React.ReactNode;
    /**
     * @deprecated No longer has any effect.
     */
    headingSize?: "large" | "medium" | "small" | "xsmall";
    /**
     * Overrides inherited color.
     *
     * We recommend only using `accent` and `neutral`. We have disallowed status-colors.
     * @see 🏷️ {@link AkselColor}
     * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
     */
    "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
}
/**
 * A component that displays collapsible content sections.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/accordion)
 * @see 🏷️ {@link AccordionProps}
 *
 * @example
 * ```jsx
 * <Accordion>
 *   <Accordion.Item>
 *     <Accordion.Header>Section 1</Accordion.Header>
 *     <Accordion.Content>Content 1</Accordion.Content>
 *   </Accordion.Item>
 *   <Accordion.Item>
 *     <Accordion.Header>Section 2</Accordion.Header>
 *     <Accordion.Content>Content 2</Accordion.Content>
 *   </Accordion.Item>
 * </Accordion>
 * ```
 */
export declare const Accordion: AccordionComponent;
export default Accordion;
export { AccordionItem, AccordionHeader, AccordionContent };
export type { AccordionProps, AccordionItemProps, AccordionHeaderProps, AccordionContentProps, };