import { FC, HTMLAttributes, ReactNode } from "react";
import * as class_variance_authority_types12 from "class-variance-authority/types";
import { VariantProps } from "class-variance-authority";

//#region src/components/CollapsibleTable/CollapsibleTable.d.ts
declare const collapsibleTableVariants: (props?: {
  size?: "full" | "sm" | "md" | "lg" | "xl";
  variant?: "default" | "ghost" | "dark" | "outlined";
  spacing?: "auto" | "sm" | "md" | "lg" | "none";
} & class_variance_authority_types12.ClassProp) => string;
interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
  /** Table title displayed in the header */
  title: string;
  /** Array of data objects to display in the table */
  data: Record<string, unknown>[];
  /** Custom class for the main container */
  className?: string;
  /** Custom class for the header section */
  headerClassName?: string;
  /** Custom class for the content wrapper */
  contentClassName?: string;
  /** Custom class for the table element */
  tableClassName?: string;
  /** Custom class for table header cells */
  thClassName?: string;
  /** Custom class for table body cells */
  tdClassName?: string;
  /** Custom class for table rows */
  trClassName?: string;
  /** Controls if the table is expanded by default */
  defaultExpanded?: boolean;
  /** Controlled expansion state */
  isExpanded?: boolean;
  /** Callback when expansion state changes */
  onExpandToggle?: (expanded: boolean) => void;
  /** Custom icon for the toggle (defaults to ChevronRight) */
  toggleIcon?: ReactNode;
  /** Header border style variant */
  borderStyle?: 'none' | 'dashed' | 'solid';
  /** Table spacing variant */
  tableSpacing?: 'none' | 'sm' | 'md' | 'lg';
  /** Table layout variant */
  tableLayout?: 'auto' | 'fixed';
  /** Custom column renderers */
  columnRenderers?: Record<string, (value: unknown, row: Record<string, unknown>) => ReactNode>;
  /** Disable the collapse functionality */
  disabled?: boolean;
  /** Accessible label for screen readers */
  'aria-label'?: string;
  /** ID for the table content (for aria-controls) */
  contentId?: string;
}
/**
 * CollapsibleTable component that displays tabular data in an expandable/collapsible format.
 * It provides a clickable header that controls the visibility of the table content with smooth animations.
 *
 * Features:
 * - Supports both controlled and uncontrolled modes
 * - Customizable styling with CVA variants (size, variant, spacing)
 * - Multiple className props for granular styling control
 * - Custom column rendering and ordering
 * - Accessible with proper ARIA attributes and keyboard navigation
 * - Responsive design with overflow handling
 * - Empty state customization
 * - Flexible data structure support
 *
 * @example
 * // Basic usage
 * const userData = [
 *   { name: 'John Doe', role: 'Developer', experience: '5 years' },
 *   { name: 'Jane Smith', role: 'Designer', experience: '3 years' },
 * ];
 *
 * <CollapsibleTable
 *   title="Team Members"
 *   data={userData}
 *   defaultExpanded={true}
 * />
 *
 * @example
 * // Advanced usage with custom styling and renderers
 * const projectData = [
 *   { name: 'Project A', status: 'active', priority: 'high' },
 *   { name: 'Project B', status: 'completed', priority: 'medium' },
 * ];
 *
 * const columnRenderers = {
 *   status: (value) => (
 *     <Badge variant={value === 'active' ? 'success' : 'default'}>
 *       {value}
 *     </Badge>
 *   ),
 *   priority: (value) => (
 *     <span className={`font-semibold ${
 *       value === 'high' ? 'text-red-600' :
 *       value === 'medium' ? 'text-yellow-600' : 'text-green-600'
 *     }`}>
 *       {value}
 *     </span>
 *   ),
 * };
 *
 * <CollapsibleTable
 *   title="Project Dashboard"
 *   data={projectData}
 *   variant="dark"
 *   size="lg"
 *   borderStyle="solid"
 *   columnRenderers={columnRenderers}
 *   headerClassName="bg-slate-800 text-white"
 *   tableClassName="bg-slate-900"
 *   onExpandToggle={(expanded) => console.log('Table expanded:', expanded)}
 * />
 *
 * @param title - The text or React node displayed in the table header
 * @param data - Array of objects representing table rows. Keys become column headers, values become cell content
 * @param className - Additional CSS classes for the main container element
 * @param headerClassName - Additional CSS classes for the clickable header section
 * @param contentClassName - Additional CSS classes for the table content wrapper
 * @param tableClassName - Additional CSS classes for the HTML table element
 * @param thClassName - Additional CSS classes for table header cells (th elements)
 * @param tdClassName - Additional CSS classes for table body cells (td elements)
 * @param trClassName - Additional CSS classes for table rows (tr elements)
 * @param defaultExpanded - Initial expansion state when component is uncontrolled (default: false)
 * @param isExpanded - Controls expansion state when component is controlled. When provided, component becomes controlled
 * @param onExpandToggle - Callback function called when expansion state changes. Receives new expanded state as parameter
 * @param toggleIcon - Custom React node to display as toggle icon. Defaults to ChevronRight from lucide-react
 * @param size - Size variant affecting container max-width: 'sm' | 'md' | 'lg' | 'xl' | 'full'
 * @param variant - Visual style variant: 'default' | 'dark' | 'ghost' | 'outlined'
 * @param spacing - Container margin spacing: 'none' | 'sm' | 'md' | 'lg' | 'auto'
 * @param borderStyle - Header border style when expanded: 'none' | 'dashed' | 'solid'
 * @param tableSpacing - Table cell spacing: 'none' | 'sm' | 'md' | 'lg'
 * @param tableLayout - CSS table-layout property: 'auto' | 'fixed'
 * @param columnRenderers - Object mapping column names to custom render functions. Function receives (value, rowData) and returns ReactNode
 * @param disabled - When true, disables click interaction and shows disabled visual state
 * @param aria-label - Accessible label for screen readers describing the table purpose
 * @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided
 */
declare const CollapsibleTable: FC<CollapsibleTableProps>;
//#endregion
export { CollapsibleTable, CollapsibleTableProps };
//# sourceMappingURL=CollapsibleTable.d.ts.map