@papernote/ui/dist/components/ControlBar.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React, { ReactNode } from 'react';
export interface ControlBarSection {
    key: string;
    icon: ReactNode;
    label: string;
    summary?: string | (() => string);
    content: ReactNode;
    position?: 'left' | 'right';
}
export interface ControlBarProps {
    sections: ControlBarSection[];
    defaultExpanded?: string | null;
    accordionMode?: boolean;
    className?: string;
}
/**
 * ControlBar - Modular expandable control bar with multiple sections
 *
 * Features:
 * - Accordion-style expandable sections
 * - Configurable left/right positioning
 * - Optional accordion mode (only one section open at a time)
 * - Summary text on collapsed sections
 * - Responsive and accessible
 *
 * @example
 * ```tsx
 * <ControlBar
 *   sections={[
 *     {
 *       key: 'filters',
 *       icon: <Filter className="h-4 w-4" />,
 *       label: 'Filters',
 *       summary: 'Year: 2025 • Month: January',
 *       content: <FilterBar {...filterProps} />,
 *       position: 'right'
 *     },
 *     {
 *       key: 'actions',
 *       icon: <MoreVertical className="h-4 w-4" />,
 *       label: 'Actions',
 *       content: <div>Action buttons...</div>,
 *       position: 'left'
 *     }
 *   ]}
 *   accordionMode={true}
 * />
 * ```
 */
export declare const ControlBar: React.FC<ControlBarProps>;
/**
 * Pre-configured sections for common use cases
 */
export interface PageControlsSectionProps {
    itemsPerPage: number;
    onItemsPerPageChange: (value: number) => void;
    currentPage: number;
    totalPages: number;
    totalItems?: number;
    itemsPerPageOptions?: number[];
}
export declare const createPageControlsSection: (props: PageControlsSectionProps) => ControlBarSection;
export interface FiltersSectionProps {
    filterContent: ReactNode;
    filterSummary?: string;
}
export declare const createFiltersSection: (props: FiltersSectionProps) => ControlBarSection;
export interface ActionsSectionProps {
    actions: ReactNode;
    actionSummary?: string;
}
export declare const createActionsSection: (props: ActionsSectionProps) => ControlBarSection;
export interface QueryDetailsSectionProps {
    queryTransparencyInfo: {
        apiEndpoint?: string;
        pagination?: {
            currentPage: number;
            totalPages: number;
            pageSize: number;
            totalCount: number;
            startIndex?: number;
            endIndex?: number;
        };
        totalCount?: number;
        appliedFilters?: Array<{
            key: string;
            label: string;
            value: any;
            displayValue?: string;
        }>;
        sorting?: {
            field: string;
            direction: 'asc' | 'desc';
            label?: string;
        };
        executionTime?: number;
        lastUpdated?: Date | string;
        rawQuery?: string;
        relatedData?: Array<{
            entity: string;
            description: string;
            type: 'join' | 'include' | 'lookup';
        }>;
        calculations?: Array<{
            field: string;
            description: string;
            formula?: string;
            type: string;
            example?: string;
        }>;
    };
    recordCount: number;
    filterSummary: string;
    showRawQuery?: boolean;
}
export declare const createQueryDetailsSection: (props: QueryDetailsSectionProps) => ControlBarSection;
//# sourceMappingURL=ControlBar.d.ts.map