@accelint/design-toolkit/dist/components/accordion/index.d.ts

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ContextValue } from 'react-aria-components';
import { AccordionProps, AccordionGroupProps, AccordionHeaderProps, AccordionTriggerProps, AccordionPanelProps } from './types.js';
import 'tailwind-variants';
import '../../lib/types.js';
import './styles.js';

declare const AccordionContext: react.Context<ContextValue<AccordionProps, HTMLDivElement>>;
declare function AccordionGroup({ ref, children, className, variant, isDisabled, ...rest }: AccordionGroupProps): react_jsx_runtime.JSX.Element;
declare namespace AccordionGroup {
    var displayName: string;
}
declare function AccordionHeader({ ref, children, className }: AccordionHeaderProps): react_jsx_runtime.JSX.Element;
declare namespace AccordionHeader {
    var displayName: string;
}
declare function AccordionTrigger({ ref, children, classNames, }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
declare namespace AccordionTrigger {
    var displayName: string;
}
declare function AccordionPanel({ ref, children, className, ...rest }: AccordionPanelProps): react_jsx_runtime.JSX.Element;
declare namespace AccordionPanel {
    var displayName: string;
}
/**
 * Accordion - A collapsible content component with expandable sections
 *
 * Provides an accessible accordion interface for organizing content into
 * collapsible sections. Supports both compact and full variants with
 * integrated controls for expanding/collapsing content areas.
 *
 * @example
 * // Basic accordion
 * <Accordion>
 *   <Accordion.Header>
 *     <Accordion.Trigger>Section Title</Accordion.Trigger>
 *   </Accordion.Header>
 *   <Accordion.Panel>Content goes here</Accordion.Panel>
 * </Accordion>
 *
 * @example
 * // Compact variant
 * <Accordion variant="compact">
 *   <Accordion.Header>
 *     <Accordion.Trigger>Compact Section</Accordion.Trigger>
 *   </Accordion.Header>
 *   <Accordion.Panel>Compact content</Accordion.Panel>
 * </Accordion>
 *
 * @example
 * // Multiple accordions in a group
 * <Accordion.Group>
 *   <Accordion>
 *     <Accordion.Header>
 *       <Accordion.Trigger>First Section</Accordion.Trigger>
 *     </Accordion.Header>
 *     <Accordion.Panel>First content</Accordion.Panel>
 *   </Accordion>
 *   <Accordion>
 *     <Accordion.Header>
 *       <Accordion.Trigger>Second Section</Accordion.Trigger>
 *     </Accordion.Header>
 *     <Accordion.Panel>Second content</Accordion.Panel>
 *   </Accordion>
 * </Accordion.Group>
 */
declare function Accordion({ ref, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
declare namespace Accordion {
    var displayName: string;
    var Group: typeof AccordionGroup;
    var Header: typeof AccordionHeader;
    var Trigger: typeof AccordionTrigger;
    var Panel: typeof AccordionPanel;
}

export { Accordion, AccordionContext };