retro-react/dist/cjs/components/accordion/Accordion.d.ts

A React component library for building retro-style websites

import React from 'react';
import { ThemeUICSSObject } from 'theme-ui';
export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The title of the accordion.
     *
     * @default ''
     */
    title: string;
    /**
     * Icon to display in the header (optional).
     *
     * @default undefined
     */
    icon?: React.ReactNode;
    /**
     * The content of the accordion.
     *
     * @default undefined
     */
    children?: string | React.ReactNode | React.ReactNode[];
    /**
     * Whether the accordion is initially open.
     *
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Whether the accordion is disabled.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Whether the accordion is in a loading state.
     *
     * @default false
     */
    loading?: boolean;
    /**
     * Callback when accordion state changes.
     *
     * @default undefined
     */
    onToggle?: (isOpen: boolean) => void;
    /**
     * Whether to animate the expansion/collapse.
     *
     * @default true
     */
    animated?: boolean;
    /**
     * Custom expand/collapse icons.
     *
     * @default undefined
     */
    expandIcon?: React.ReactNode;
    collapseIcon?: React.ReactNode;
    /**
     * The sx prop for header.
     *
     * @default undefined
     */
    sxHeader?: any;
    sx?: ThemeUICSSObject;
}
/**
 * The Accordion component is used to display content in a collapsible panel with authentic retro styling.
 * Features WIN31-inspired borders, proper keyboard navigation, and enhanced accessibility.
 *
 * Enhanced with:
 * - Authentic retro styling with WIN31 borders
 * - Icon support for visual hierarchy
 * - Loading and disabled states
 * - Keyboard navigation (Enter, Space, Arrow keys)
 * - Better accessibility with ARIA attributes
 * - Custom expand/collapse icons
 *
 * @example
 * <Accordion
 *   title="System Configuration"
 *   icon="⚙️"
 *   defaultOpen={false}
 *   onToggle={(isOpen) => console.log('Accordion is', isOpen ? 'open' : 'closed')}
 * >
 *   <p>Configure your system settings here.</p>
 * </Accordion>
 */
export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;