@prismiq/react 0.1.0

package/dist/CustomSQLEditor-DYeId0Gp.d.ts

@@ -0,0 +1,1297 @@
+import * as react from 'react';
+import react__default, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes, ReactElement, SVGAttributes, Component, ErrorInfo } from 'react';
+import { c as TableSchema, o as ColumnSchema, b as QueryTable, q as ColumnSelection, D as DatabaseSchema, r as FilterDefinition, F as FilterOperator, t as SortDefinition, A as AggregationType, Q as QueryResult, a as QueryDefinition, j as SavedQuery } from './types-WrCbOeAV.js';
+
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Button visual style. */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /** Button size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether the button is in a loading state. */
+    loading?: boolean;
+    /** Icon to display before the label. */
+    leftIcon?: ReactNode;
+    /** Icon to display after the label. */
+    rightIcon?: ReactNode;
+    /** Button content. */
+    children: ReactNode;
+}
+/**
+ * Button component with multiple variants and sizes.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onClick={() => console.log('clicked')}>
+ *   Click me
+ * </Button>
+ *
+ * <Button variant="secondary" size="sm" leftIcon={<Icon name="plus" />}>
+ *   Add item
+ * </Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Input size. */
+    inputSize?: 'sm' | 'md' | 'lg';
+    /** Whether the input has an error. */
+    error?: boolean;
+}
+/**
+ * Input component with multiple sizes and error state.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   placeholder="Enter your name"
+ *   value={name}
+ *   onChange={(e) => setName(e.target.value)}
+ * />
+ *
+ * <Input inputSize="sm" error placeholder="Invalid value" />
+ * ```
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Select component.
+ */
+interface SelectOption<T> {
+    /** Option value. */
+    value: T;
+    /** Display label. */
+    label: string;
+    /** Whether the option is disabled. */
+    disabled?: boolean;
+}
+interface SelectProps<T> {
+    /** Currently selected value. */
+    value: T | null;
+    /** Callback when value changes. */
+    onChange: (value: T) => void;
+    /** Available options. */
+    options: SelectOption<T>[];
+    /** Placeholder text when no value selected. */
+    placeholder?: string;
+    /** Whether the select is disabled. */
+    disabled?: boolean;
+    /** Whether to show a search input. */
+    searchable?: boolean;
+    /** Select size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+declare const Select: <T>(props: SelectProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Checkbox size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Label text. */
+    label?: string;
+}
+/**
+ * Checkbox component with optional label.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   checked={isChecked}
+ *   onChange={(e) => setIsChecked(e.target.checked)}
+ *   label="Remember me"
+ * />
+ * ```
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Badge visual style. */
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /** Badge size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Badge content. */
+    children: ReactNode;
+}
+/**
+ * Badge component for status indicators and labels.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="error" size="sm">Error</Badge>
+ * ```
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface TooltipProps {
+    /** The content to show in the tooltip. */
+    content: ReactNode;
+    /** The element that triggers the tooltip. */
+    children: ReactElement;
+    /** Position of the tooltip relative to the trigger. */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Delay before showing tooltip (ms). */
+    delay?: number;
+    /** Whether the tooltip is disabled. */
+    disabled?: boolean;
+    /** Additional class name for the tooltip element. */
+    className?: string;
+    /** Additional styles for the tooltip element. */
+    style?: React.CSSProperties;
+}
+/**
+ * Tooltip component that shows content on hover.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The element that triggers the dropdown. */
+    trigger: ReactNode;
+    /** The dropdown content. */
+    children: ReactNode;
+    /** Alignment of the dropdown relative to the trigger. */
+    align?: 'start' | 'end';
+    /** Whether the dropdown is disabled. */
+    disabled?: boolean;
+}
+interface DropdownItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+    /** Icon to display before the label. */
+    icon?: ReactNode;
+    /** Item content. */
+    children: ReactNode;
+}
+interface DropdownSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * An item within a dropdown menu.
+ */
+declare const DropdownItem: react.ForwardRefExoticComponent<DropdownItemProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * A separator line within a dropdown menu.
+ */
+declare const DropdownSeparator: react.ForwardRefExoticComponent<DropdownSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Dropdown menu component.
+ *
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   trigger={<Button>Open menu</Button>}
+ * >
+ *   <DropdownItem onClick={() => console.log('Edit')}>Edit</DropdownItem>
+ *   <DropdownItem onClick={() => console.log('Delete')}>Delete</DropdownItem>
+ *   <DropdownSeparator />
+ *   <DropdownItem disabled>Disabled</DropdownItem>
+ * </Dropdown>
+ * ```
+ */
+declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLDivElement>>;
+
+type IconName = 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'x' | 'plus' | 'minus' | 'check' | 'search' | 'filter' | 'sort-asc' | 'sort-desc' | 'drag' | 'table' | 'column' | 'key' | 'link' | 'play' | 'refresh' | 'sync' | 'trash' | 'edit' | 'copy' | 'download' | 'settings' | 'sun' | 'moon' | 'info' | 'warning' | 'error' | 'more' | 'more-vertical' | 'expand' | 'fullscreen' | 'minimize' | 'chart-bar' | 'chart-line' | 'chart-pie' | 'grid' | 'layout' | 'calendar' | 'alert-circle';
+interface IconProps extends SVGAttributes<SVGSVGElement> {
+    /** Icon name. */
+    name: IconName;
+    /** Icon size in pixels. */
+    size?: number;
+}
+/**
+ * Icon component rendering SVG icons.
+ *
+ * @example
+ * ```tsx
+ * <Icon name="search" size={20} />
+ * <Icon name="plus" style={{ color: 'var(--prismiq-color-primary)' }} />
+ * ```
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
+interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Called when the dialog should close. */
+    onClose: () => void;
+    /** Dialog title. */
+    title?: ReactNode;
+    /** Dialog description. */
+    description?: ReactNode;
+    /** Dialog content. */
+    children: ReactNode;
+    /** Whether to show a close button. */
+    showCloseButton?: boolean;
+    /** Whether clicking the backdrop closes the dialog. */
+    closeOnBackdropClick?: boolean;
+    /** Whether pressing Escape closes the dialog. */
+    closeOnEscape?: boolean;
+    /** Dialog width. */
+    width?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * Dialog header component.
+ */
+declare const DialogHeader: react.ForwardRefExoticComponent<DialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Dialog footer component for action buttons.
+ */
+declare const DialogFooter: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Modal dialog component with accessibility features.
+ *
+ * @example
+ * ```tsx
+ * function Example() {
+ *   const [open, setOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+ *       <Dialog
+ *         open={open}
+ *         onClose={() => setOpen(false)}
+ *         title="Confirm Action"
+ *         description="Are you sure you want to proceed?"
+ *       >
+ *         <p>This action cannot be undone.</p>
+ *         <DialogFooter>
+ *           <Button variant="secondary" onClick={() => setOpen(false)}>
+ *             Cancel
+ *           </Button>
+ *           <Button variant="danger">Delete</Button>
+ *         </DialogFooter>
+ *       </Dialog>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the Skeleton component.
+ */
+interface SkeletonProps {
+    /** Width of the skeleton (CSS value or number for pixels) */
+    width?: string | number;
+    /** Height of the skeleton (CSS value or number for pixels) */
+    height?: string | number;
+    /** Border radius of the skeleton */
+    borderRadius?: string;
+    /** Whether to animate the skeleton */
+    animate?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: react__default.CSSProperties;
+}
+/**
+ * Base skeleton loading placeholder with shimmer animation.
+ *
+ * @example
+ * ```tsx
+ * // Simple skeleton
+ * <Skeleton width={200} height={20} />
+ *
+ * // Circular skeleton
+ * <Skeleton width={40} height={40} borderRadius="50%" />
+ *
+ * // Full width
+ * <Skeleton width="100%" height={100} />
+ * ```
+ */
+declare function Skeleton({ width, height, borderRadius, animate, className, style, }: SkeletonProps): react__default.ReactElement;
+
+/**
+ * Props for the SkeletonText component.
+ */
+interface SkeletonTextProps {
+    /** Number of lines to show */
+    lines?: number;
+    /** Width of the last line (for natural-looking text) */
+    lastLineWidth?: string;
+    /** Height of each line */
+    lineHeight?: number;
+    /** Gap between lines */
+    gap?: number;
+    /** Whether to animate the skeleton */
+    animate?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Skeleton placeholder for text content.
+ *
+ * @example
+ * ```tsx
+ * // Single line
+ * <SkeletonText />
+ *
+ * // Multiple lines with shorter last line
+ * <SkeletonText lines={3} lastLineWidth="60%" />
+ *
+ * // Paragraph
+ * <SkeletonText lines={5} lastLineWidth="40%" gap={8} />
+ * ```
+ */
+declare function SkeletonText({ lines, lastLineWidth, lineHeight, gap, animate, className, }: SkeletonTextProps): react__default.ReactElement;
+
+/**
+ * Props for the SkeletonChart component.
+ */
+interface SkeletonChartProps {
+    /** Type of chart to simulate */
+    type: 'bar' | 'line' | 'pie' | 'area' | 'scatter';
+    /** Height of the chart skeleton */
+    height?: number;
+    /** Whether to animate the skeleton */
+    animate?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Skeleton placeholder for chart components.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonChart type="bar" height={300} />
+ * <SkeletonChart type="pie" height={250} />
+ * <SkeletonChart type="line" />
+ * ```
+ */
+declare function SkeletonChart({ type, height, animate, className, }: SkeletonChartProps): react__default.ReactElement;
+
+/**
+ * Props for the SkeletonTable component.
+ */
+interface SkeletonTableProps {
+    /** Number of rows to show */
+    rows?: number;
+    /** Number of columns to show */
+    columns?: number;
+    /** Whether to show a header row */
+    showHeader?: boolean;
+    /** Height of each row */
+    rowHeight?: number;
+    /** Whether to animate the skeleton */
+    animate?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Skeleton placeholder for table components.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonTable rows={5} columns={4} />
+ * <SkeletonTable rows={10} columns={6} showHeader={true} />
+ * ```
+ */
+declare function SkeletonTable({ rows, columns, showHeader, rowHeight, animate, className, }: SkeletonTableProps): react__default.ReactElement;
+
+/**
+ * Props for the SkeletonMetricCard component.
+ */
+interface SkeletonMetricCardProps {
+    /** Whether to show a sparkline placeholder */
+    showSparkline?: boolean;
+    /** Whether to show a trend indicator placeholder */
+    showTrend?: boolean;
+    /** Whether to animate the skeleton */
+    animate?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Skeleton placeholder for MetricCard components.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonMetricCard />
+ * <SkeletonMetricCard showSparkline showTrend />
+ * ```
+ */
+declare function SkeletonMetricCard({ showSparkline, showTrend, animate, className, }: SkeletonMetricCardProps): react__default.ReactElement;
+
+/**
+ * Props for the ErrorBoundary component.
+ */
+interface ErrorBoundaryProps {
+    /** Content to render */
+    children: ReactNode;
+    /** Custom fallback UI or render function */
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    /** Callback when an error is caught */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Reset the error boundary when these values change */
+    resetKeys?: unknown[];
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Error boundary component that catches JavaScript errors in child components.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ErrorBoundary>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ *
+ * // With custom fallback
+ * <ErrorBoundary fallback={<div>Something went wrong</div>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ *
+ * // With error handler
+ * <ErrorBoundary onError={(error) => logError(error)}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ *
+ * // With reset keys (resets when values change)
+ * <ErrorBoundary resetKeys={[userId]}>
+ *   <MyComponent userId={userId} />
+ * </ErrorBoundary>
+ * ```
+ */
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    componentDidUpdate(prevProps: ErrorBoundaryProps): void;
+    resetError: () => void;
+    render(): ReactNode;
+}
+
+/**
+ * Props for the ErrorFallback component.
+ */
+interface ErrorFallbackProps {
+    /** The error that was caught */
+    error: Error;
+    /** Function to reset the error state */
+    resetError: () => void;
+    /** Custom title for the error display */
+    title?: string;
+    /** Whether to show error details */
+    showDetails?: boolean;
+}
+/**
+ * Default error fallback UI component.
+ *
+ * @example
+ * ```tsx
+ * <ErrorFallback
+ *   error={error}
+ *   resetError={reset}
+ *   title="Chart Error"
+ *   showDetails={true}
+ * />
+ * ```
+ */
+declare function ErrorFallback({ error, resetError, title, showDetails, }: ErrorFallbackProps): react__default.ReactElement;
+
+/**
+ * Props for the WidgetErrorBoundary component.
+ */
+interface WidgetErrorBoundaryProps {
+    /** Content to render */
+    children: ReactNode;
+    /** Title of the widget (for display in error state) */
+    widgetTitle?: string;
+    /** Callback when an error is caught */
+    onError?: (error: Error) => void;
+}
+interface WidgetErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Error boundary specifically designed for dashboard widgets.
+ *
+ * Provides a compact error display that fits within widget containers.
+ *
+ * @example
+ * ```tsx
+ * <WidgetErrorBoundary widgetTitle="Sales Chart" onError={logError}>
+ *   <BarChart data={data} />
+ * </WidgetErrorBoundary>
+ * ```
+ */
+declare class WidgetErrorBoundary extends Component<WidgetErrorBoundaryProps, WidgetErrorBoundaryState> {
+    constructor(props: WidgetErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): WidgetErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    resetError: () => void;
+    render(): ReactNode;
+}
+
+/**
+ * Props for the EmptyState component.
+ */
+interface EmptyStateProps {
+    /** Custom icon to display */
+    icon?: react__default.ReactNode;
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Optional action button */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Generic empty state component with customizable content.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   title="No data available"
+ *   description="Try adjusting your filters"
+ *   action={{ label: "Clear Filters", onClick: clearFilters }}
+ * />
+ * ```
+ */
+declare function EmptyState({ icon, title, description, action, className, }: EmptyStateProps): react__default.ReactElement;
+
+/**
+ * Props for the NoData component.
+ */
+interface NoDataProps {
+    /** Custom message to display */
+    message?: string;
+    /** Callback when refresh button is clicked */
+    onRefresh?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Empty state for when a query returns no data.
+ *
+ * @example
+ * ```tsx
+ * <NoData message="No sales data for this period" onRefresh={refetch} />
+ * ```
+ */
+declare function NoData({ message, onRefresh, className, }: NoDataProps): react__default.ReactElement;
+
+/**
+ * Props for the NoResults component.
+ */
+interface NoResultsProps {
+    /** The search query that returned no results */
+    searchQuery?: string;
+    /** Callback when clear filters button is clicked */
+    onClearFilters?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Empty state for when a search or filter returns no results.
+ *
+ * @example
+ * ```tsx
+ * <NoResults searchQuery="xyz123" onClearFilters={clearFilters} />
+ * ```
+ */
+declare function NoResults({ searchQuery, onClearFilters, className, }: NoResultsProps): react__default.ReactElement;
+
+/**
+ * Props for the EmptyDashboard component.
+ */
+interface EmptyDashboardProps {
+    /** Callback when add widget button is clicked */
+    onAddWidget?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Empty state for dashboards with no widgets.
+ *
+ * @example
+ * ```tsx
+ * <EmptyDashboard onAddWidget={openWidgetPalette} />
+ * ```
+ */
+declare function EmptyDashboard({ onAddWidget, className, }: EmptyDashboardProps): react__default.ReactElement;
+
+/**
+ * SchemaExplorer component for browsing database tables and columns.
+ */
+
+interface SchemaExplorerProps {
+    /** Callback when a table is selected. */
+    onTableSelect?: (table: TableSchema) => void;
+    /** Callback when a column is selected. */
+    onColumnSelect?: (table: TableSchema, column: ColumnSchema) => void;
+    /** Callback when column drag starts. */
+    onColumnDragStart?: (table: TableSchema, column: ColumnSchema) => void;
+    /** Currently selected table name. */
+    selectedTable?: string;
+    /** Array of selected column identifiers. */
+    selectedColumns?: Array<{
+        table: string;
+        column: string;
+    }>;
+    /** Whether to show search input. */
+    searchable?: boolean;
+    /** Whether tables are collapsible. */
+    collapsible?: boolean;
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Schema explorer component for browsing database structure.
+ *
+ * @example
+ * ```tsx
+ * <SchemaExplorer
+ *   onTableSelect={(table) => console.log('Table:', table.name)}
+ *   onColumnSelect={(table, column) => console.log('Column:', column.name)}
+ *   searchable
+ *   collapsible
+ * />
+ * ```
+ */
+declare function SchemaExplorer({ onTableSelect, onColumnSelect, onColumnDragStart, selectedTable, selectedColumns, searchable, collapsible, className, style, }: SchemaExplorerProps): JSX.Element;
+
+/**
+ * TableNode component for displaying a table in the schema explorer.
+ */
+
+interface TableNodeProps {
+    /** The table schema. */
+    table: TableSchema;
+    /** Whether the table is currently selected. */
+    isSelected?: boolean;
+    /** Array of selected column identifiers. */
+    selectedColumns?: Array<{
+        table: string;
+        column: string;
+    }>;
+    /** Callback when table is clicked. */
+    onTableClick?: (table: TableSchema) => void;
+    /** Callback when a column is clicked. */
+    onColumnClick?: (table: TableSchema, column: ColumnSchema) => void;
+    /** Callback when column drag starts. */
+    onColumnDragStart?: (table: TableSchema, column: ColumnSchema) => void;
+    /** Whether the tree is collapsible. */
+    collapsible?: boolean;
+    /** Initial expanded state. */
+    defaultExpanded?: boolean;
+    /** Search filter to highlight matching items. */
+    searchFilter?: string;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * A table node in the schema explorer tree with expandable columns.
+ */
+declare function TableNode({ table, isSelected, selectedColumns, onTableClick, onColumnClick, onColumnDragStart, collapsible, defaultExpanded, searchFilter, className, }: TableNodeProps): JSX.Element;
+
+/**
+ * ColumnNode component for displaying a column in the schema explorer.
+ */
+
+interface ColumnNodeProps {
+    /** The column schema. */
+    column: ColumnSchema;
+    /** The parent table schema. */
+    table: TableSchema;
+    /** Whether this column is selected. */
+    isSelected?: boolean;
+    /** Callback when column is clicked. */
+    onClick?: (table: TableSchema, column: ColumnSchema) => void;
+    /** Callback when column drag starts. */
+    onDragStart?: (table: TableSchema, column: ColumnSchema) => void;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * A single column node in the schema explorer tree.
+ */
+declare function ColumnNode({ column, table, isSelected, onClick, onDragStart, className, }: ColumnNodeProps): JSX.Element;
+
+/**
+ * ColumnSelector component for selecting and ordering columns in a query.
+ */
+
+interface ColumnSelectorProps {
+    /** Tables in the query. */
+    tables: QueryTable[];
+    /** Selected columns. */
+    columns: ColumnSelection[];
+    /** Callback when columns change. */
+    onChange: (columns: ColumnSelection[]) => void;
+    /** Database schema for type information. */
+    schema: DatabaseSchema;
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Column selector component for selecting and ordering columns.
+ *
+ * @example
+ * ```tsx
+ * <ColumnSelector
+ *   tables={query.tables}
+ *   columns={query.columns}
+ *   onChange={(columns) => setQuery({ ...query, columns })}
+ *   schema={schema}
+ * />
+ * ```
+ */
+declare function ColumnSelector({ tables, columns, onChange, schema, className, style, }: ColumnSelectorProps): JSX.Element;
+
+/**
+ * SelectedColumn component for displaying a selected column in the query.
+ */
+
+interface SelectedColumnProps {
+    /** The column selection. */
+    column: ColumnSelection;
+    /** The table this column belongs to. */
+    table: QueryTable;
+    /** The table schema for type information. */
+    tableSchema: TableSchema | undefined;
+    /** Index of this column in the list. */
+    index: number;
+    /** Callback when the column should be removed. */
+    onRemove: () => void;
+    /** Callback when the column selection is updated. */
+    onUpdate: (column: ColumnSelection) => void;
+    /** Callback when drag ends with reorder. */
+    onDragEnd: (fromIndex: number, toIndex: number) => void;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * A selected column in the query with aggregation and alias options.
+ */
+declare function SelectedColumn({ column, table, tableSchema, index, onRemove, onUpdate, onDragEnd, className, }: SelectedColumnProps): JSX.Element;
+
+/**
+ * FilterBuilder component for building filter conditions.
+ */
+
+interface FilterBuilderProps {
+    /** Tables in the query. */
+    tables: QueryTable[];
+    /** Current filter definitions. */
+    filters: FilterDefinition[];
+    /** Callback when filters change. */
+    onChange: (filters: FilterDefinition[]) => void;
+    /** Database schema. */
+    schema: DatabaseSchema;
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Filter builder component for creating filter conditions.
+ *
+ * @example
+ * ```tsx
+ * <FilterBuilder
+ *   tables={query.tables}
+ *   filters={query.filters ?? []}
+ *   onChange={(filters) => setQuery({ ...query, filters })}
+ *   schema={schema}
+ * />
+ * ```
+ */
+declare function FilterBuilder({ tables, filters, onChange, schema, className, style, }: FilterBuilderProps): JSX.Element;
+
+/**
+ * FilterRow component for a single filter condition.
+ */
+
+interface FilterRowProps {
+    /** The filter definition. */
+    filter: FilterDefinition;
+    /** Tables in the query. */
+    tables: QueryTable[];
+    /** Database schema. */
+    schema: DatabaseSchema;
+    /** Callback when the filter changes. */
+    onChange: (filter: FilterDefinition) => void;
+    /** Callback when the filter should be removed. */
+    onRemove: () => void;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * A single filter row with column, operator, and value inputs.
+ */
+declare function FilterRow({ filter, tables, schema, onChange, onRemove, className, }: FilterRowProps): JSX.Element;
+
+/**
+ * FilterValueInput component for entering filter values.
+ */
+
+interface FilterValueInputProps {
+    /** Filter operator. */
+    operator: FilterOperator;
+    /** Current value. */
+    value: unknown;
+    /** Callback when value changes. */
+    onChange: (value: unknown) => void;
+    /** Column data type. */
+    dataType?: string;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * Input component for filter values that adapts to the operator and data type.
+ */
+declare function FilterValueInput({ operator, value, onChange, dataType, disabled, className, }: FilterValueInputProps): JSX.Element;
+
+/**
+ * SortBuilder component for defining sort order.
+ */
+
+interface SortBuilderProps {
+    /** Tables in the query. */
+    tables: QueryTable[];
+    /** Current sort definitions. */
+    sorts: SortDefinition[];
+    /** Callback when sorts change. */
+    onChange: (sorts: SortDefinition[]) => void;
+    /** Database schema. */
+    schema: DatabaseSchema;
+    /** Maximum number of sorts allowed. */
+    maxSorts?: number;
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Sort builder component for defining sort order.
+ *
+ * @example
+ * ```tsx
+ * <SortBuilder
+ *   tables={query.tables}
+ *   sorts={query.order_by ?? []}
+ *   onChange={(sorts) => setQuery({ ...query, order_by: sorts })}
+ *   schema={schema}
+ *   maxSorts={3}
+ * />
+ * ```
+ */
+declare function SortBuilder({ tables, sorts, onChange, schema, maxSorts, className, style, }: SortBuilderProps): JSX.Element;
+
+/**
+ * SortRow component for a single sort condition.
+ */
+
+interface SortRowProps {
+    /** The sort definition. */
+    sort: SortDefinition;
+    /** Tables in the query. */
+    tables: QueryTable[];
+    /** Database schema. */
+    schema: DatabaseSchema;
+    /** Index of this sort in the list. */
+    index: number;
+    /** Callback when the sort changes. */
+    onChange: (sort: SortDefinition) => void;
+    /** Callback when the sort should be removed. */
+    onRemove: () => void;
+    /** Callback when drag ends with reorder. */
+    onDragEnd: (fromIndex: number, toIndex: number) => void;
+    /** Already used columns to prevent duplicates. */
+    usedColumns: Array<{
+        table_id: string;
+        column: string;
+    }>;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * A single sort row with column and direction.
+ */
+declare function SortRow({ sort, tables, schema, index, onChange, onRemove, onDragEnd, usedColumns, className, }: SortRowProps): JSX.Element;
+
+/**
+ * AggregationPicker component for selecting column aggregations.
+ */
+
+interface AggregationPickerProps {
+    /** Current aggregation value. */
+    value: AggregationType;
+    /** Callback when aggregation changes. */
+    onChange: (aggregation: AggregationType) => void;
+    /** Column data type for filtering applicable aggregations. */
+    columnType: string;
+    /** Whether the picker is disabled. */
+    disabled?: boolean;
+    /** Size variant. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Dropdown picker for selecting column aggregation functions.
+ *
+ * @example
+ * ```tsx
+ * <AggregationPicker
+ *   value={column.aggregation}
+ *   onChange={(agg) => updateColumn({ ...column, aggregation: agg })}
+ *   columnType="integer"
+ * />
+ * ```
+ */
+declare function AggregationPicker({ value, onChange, columnType, disabled, size, className, style, }: AggregationPickerProps): JSX.Element;
+
+/**
+ * ResultsTable component for displaying query results.
+ */
+
+interface ResultsTableProps {
+    /** Query result data. */
+    result: QueryResult | null;
+    /** Whether data is currently loading. */
+    loading?: boolean;
+    /** Error that occurred during query execution. */
+    error?: Error | null;
+    /** Number of rows per page. */
+    pageSize?: number;
+    /** Whether columns are sortable. */
+    sortable?: boolean;
+    /** Callback when a column is sorted. */
+    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    /** Callback when a row is clicked. */
+    onRowClick?: (row: unknown[], index: number) => void;
+    /** Callback when a cell is clicked. */
+    onCellClick?: (value: unknown, column: string, rowIndex: number) => void;
+    /** Custom formatters by column name. */
+    formatters?: Record<string, (value: unknown) => string>;
+    /** Callback when export is requested. */
+    onExport?: (format: 'csv' | 'json') => void;
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Data grid component for displaying query results.
+ *
+ * @example
+ * ```tsx
+ * <ResultsTable
+ *   result={queryResult}
+ *   loading={isLoading}
+ *   error={error}
+ *   pageSize={25}
+ *   sortable
+ *   onSort={(column, direction) => handleSort(column, direction)}
+ *   onRowClick={(row, index) => handleRowClick(row, index)}
+ * />
+ * ```
+ */
+declare function ResultsTable({ result, loading, error, pageSize: initialPageSize, sortable, onSort, onRowClick, onCellClick, formatters, className, style, }: ResultsTableProps): JSX.Element;
+
+/**
+ * TableHeader component for rendering the table header row.
+ */
+interface TableHeaderProps {
+    /** Column names. */
+    columns: string[];
+    /** Column data types. */
+    columnTypes?: string[];
+    /** Whether columns are sortable. */
+    sortable?: boolean;
+    /** Currently sorted column. */
+    sortColumn?: string;
+    /** Current sort direction. */
+    sortDirection?: 'asc' | 'desc';
+    /** Callback when a column header is clicked for sorting. */
+    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * Table header row with optional sorting.
+ */
+declare function TableHeader({ columns, sortable, sortColumn, sortDirection, onSort, className, }: TableHeaderProps): JSX.Element;
+
+/**
+ * TableRow component for rendering a single data row.
+ */
+interface TableRowProps {
+    /** Row data. */
+    row: unknown[];
+    /** Row index. */
+    index: number;
+    /** Column data types. */
+    columnTypes?: string[];
+    /** Custom formatters by column index or name. */
+    formatters?: Record<string | number, (value: unknown) => string>;
+    /** Callback when the row is clicked. */
+    onRowClick?: (row: unknown[], index: number) => void;
+    /** Callback when a cell is clicked. */
+    onCellClick?: (value: unknown, columnIndex: number, rowIndex: number) => void;
+    /** Whether the row is selected. */
+    isSelected?: boolean;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * A single data row in the results table.
+ */
+declare function TableRow({ row, index, columnTypes, formatters, onRowClick, onCellClick, isSelected, className, }: TableRowProps): JSX.Element;
+
+/**
+ * TableCell component for rendering a single cell in the results table.
+ */
+interface TableCellProps {
+    /** Cell value. */
+    value: unknown;
+    /** Column data type. */
+    columnType?: string;
+    /** Custom formatter function. */
+    formatter?: (value: unknown) => string;
+    /** Maximum width before truncation. */
+    maxWidth?: number;
+    /** Callback when cell is clicked. */
+    onClick?: () => void;
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * A single cell in the results table.
+ */
+declare function TableCell({ value, columnType, formatter, maxWidth, onClick, className, }: TableCellProps): JSX.Element;
+
+/**
+ * Pagination component for the results table.
+ */
+interface PaginationProps {
+    /** Current page (1-indexed). */
+    currentPage: number;
+    /** Total number of items. */
+    totalItems: number;
+    /** Items per page. */
+    pageSize: number;
+    /** Callback when page changes. */
+    onPageChange: (page: number) => void;
+    /** Callback when page size changes. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Available page size options. */
+    pageSizeOptions?: number[];
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Pagination controls for the results table.
+ */
+declare function Pagination({ currentPage, totalItems, pageSize, onPageChange, onPageSizeChange, pageSizeOptions, className, style, }: PaginationProps): JSX.Element;
+
+/**
+ * QueryBuilder component - main container combining all query building components.
+ */
+
+interface QueryBuilderProps {
+    /** Initial query definition. */
+    initialQuery?: QueryDefinition;
+    /** Callback when query changes. */
+    onQueryChange?: (query: QueryDefinition) => void;
+    /** Callback when query is executed successfully. */
+    onExecute?: (result: QueryResult) => void;
+    /** Callback when an error occurs. */
+    onError?: (error: Error) => void;
+    /** Whether to auto-execute on query change. */
+    autoExecute?: boolean;
+    /** Delay before auto-execute (ms). */
+    autoExecuteDelay?: number;
+    /** Whether to show SQL preview panel. */
+    showSqlPreview?: boolean;
+    /** Whether to show results table. */
+    showResultsTable?: boolean;
+    /** Whether to show saved queries picker. */
+    showSavedQueries?: boolean;
+    /** Callback when a saved query is loaded. */
+    onSavedQueryLoad?: (savedQuery: SavedQuery) => void;
+    /** Callback when the current query is saved. */
+    onSavedQuerySave?: (savedQuery: SavedQuery) => void;
+    /** Layout direction. */
+    layout?: 'horizontal' | 'vertical';
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+interface QueryBuilderState {
+    query: QueryDefinition;
+    result: QueryResult | null;
+    isExecuting: boolean;
+    error: Error | null;
+}
+/**
+ * Main QueryBuilder component combining all query building components.
+ *
+ * @example
+ * ```tsx
+ * <QueryBuilder
+ *   onQueryChange={(query) => console.log('Query:', query)}
+ *   onExecute={(result) => console.log('Result:', result)}
+ *   showSqlPreview
+ *   showResultsTable
+ * />
+ * ```
+ */
+declare function QueryBuilder({ initialQuery, onQueryChange, onExecute, onError, autoExecute, autoExecuteDelay, showSqlPreview, showResultsTable, showSavedQueries, onSavedQueryLoad, onSavedQuerySave, layout, className, style, }: QueryBuilderProps): JSX.Element;
+
+/**
+ * QueryBuilderToolbar component for query actions.
+ */
+interface QueryBuilderToolbarProps {
+    /** Whether a query is currently executing. */
+    isExecuting: boolean;
+    /** Whether the query can be executed (has valid configuration). */
+    canExecute: boolean;
+    /** Callback when execute button is clicked. */
+    onExecute: () => void;
+    /** Callback when preview button is clicked. */
+    onPreview: () => void;
+    /** Callback when clear button is clicked. */
+    onClear: () => void;
+    /** Whether SQL preview is currently shown. */
+    showingPreview?: boolean;
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Toolbar with execute, preview, and clear buttons.
+ */
+declare function QueryBuilderToolbar({ isExecuting, canExecute, onExecute, onPreview, onClear, className, style, }: QueryBuilderToolbarProps): JSX.Element;
+
+/**
+ * QueryPreview component for displaying SQL preview.
+ */
+interface QueryPreviewProps {
+    /** The SQL query string. */
+    sql: string | null;
+    /** Whether the preview is loading. */
+    loading?: boolean;
+    /** Error message if SQL generation failed. */
+    error?: string | null;
+    /** Whether the preview is collapsible. */
+    collapsible?: boolean;
+    /** Initial collapsed state. */
+    defaultCollapsed?: boolean;
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * SQL preview panel with syntax highlighting (basic).
+ */
+declare function QueryPreview({ sql, loading, error, collapsible, defaultCollapsed, className, style, }: QueryPreviewProps): JSX.Element;
+
+interface SavedQueryPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Current query definition (used when saving). */
+    currentQuery?: QueryDefinition | null;
+    /** Callback when a saved query is selected. */
+    onSelect?: (query: SavedQuery) => void;
+    /** Callback after successfully saving a query. */
+    onSave?: (query: SavedQuery) => void;
+    /** Whether to show the save option. */
+    showSave?: boolean;
+    /** Custom trigger element. */
+    trigger?: React.ReactNode;
+    /** Label for the trigger button. */
+    label?: string;
+}
+/**
+ * SavedQueryPicker component for selecting and saving queries.
+ *
+ * @example
+ * ```tsx
+ * <SavedQueryPicker
+ *   currentQuery={query}
+ *   onSelect={(savedQuery) => setQuery(savedQuery.query)}
+ *   onSave={(savedQuery) => console.log('Saved:', savedQuery.name)}
+ * />
+ * ```
+ */
+declare const SavedQueryPicker: react.ForwardRefExoticComponent<SavedQueryPickerProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * CustomSQLEditor component.
+ *
+ * A simple SQL editor with textarea input, validation, and execution.
+ */
+interface CustomSQLEditorProps {
+    /** Initial SQL query. */
+    initialSql?: string;
+    /** Callback when SQL changes. */
+    onSqlChange?: (sql: string) => void;
+    /** Callback when query executes successfully. */
+    onExecute?: (sql: string) => void;
+    /** Placeholder text for the textarea. */
+    placeholder?: string;
+    /** Whether to show the results table. */
+    showResults?: boolean;
+    /** Height of the textarea in pixels. */
+    height?: number;
+    /** Additional class name. */
+    className?: string;
+    /** Additional styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * SQL editor with textarea input and query execution.
+ *
+ * @example
+ * ```tsx
+ * <CustomSQLEditor
+ *   initialSql="SELECT * FROM users LIMIT 10"
+ *   onExecute={(sql) => console.log('Executed:', sql)}
+ *   showResults
+ * />
+ * ```
+ */
+declare function CustomSQLEditor({ initialSql, onSqlChange, onExecute, placeholder, showResults, height, className, style, }: CustomSQLEditorProps): JSX.Element;
+
+export { TableNode as $, SkeletonMetricCard as A, Button as B, Checkbox as C, Dropdown as D, type SkeletonProps as E, type SkeletonTextProps as F, type SkeletonChartProps as G, type SkeletonTableProps as H, Input as I, type SkeletonMetricCardProps as J, ErrorBoundary as K, ErrorFallback as L, type ErrorBoundaryProps as M, type ErrorFallbackProps as N, type WidgetErrorBoundaryProps as O, EmptyState as P, NoData as Q, NoResults as R, Select as S, Tooltip as T, EmptyDashboard as U, type EmptyStateProps as V, WidgetErrorBoundary as W, type NoDataProps as X, type NoResultsProps as Y, type EmptyDashboardProps as Z, SchemaExplorer as _, Badge as a, ColumnNode as a0, type SchemaExplorerProps as a1, type TableNodeProps as a2, type ColumnNodeProps as a3, ColumnSelector as a4, SelectedColumn as a5, type ColumnSelectorProps as a6, type SelectedColumnProps as a7, FilterBuilder as a8, FilterRow as a9, type QueryPreviewProps as aA, SavedQueryPicker as aB, type SavedQueryPickerProps as aC, CustomSQLEditor as aD, type CustomSQLEditorProps as aE, FilterValueInput as aa, type FilterBuilderProps as ab, type FilterRowProps as ac, type FilterValueInputProps as ad, SortBuilder as ae, SortRow as af, type SortBuilderProps as ag, type SortRowProps as ah, AggregationPicker as ai, type AggregationPickerProps as aj, ResultsTable as ak, TableHeader as al, TableRow as am, TableCell as an, Pagination as ao, type ResultsTableProps as ap, type TableHeaderProps as aq, type TableRowProps as ar, type TableCellProps as as, type PaginationProps as at, QueryBuilder as au, QueryBuilderToolbar as av, QueryPreview as aw, type QueryBuilderProps as ax, type QueryBuilderState as ay, type QueryBuilderToolbarProps as az, DropdownItem as b, DropdownSeparator as c, Icon as d, Dialog as e, DialogHeader as f, DialogFooter as g, type ButtonProps as h, type InputProps as i, type SelectProps as j, type SelectOption as k, type CheckboxProps as l, type BadgeProps as m, type TooltipProps as n, type DropdownProps as o, type DropdownItemProps as p, type DropdownSeparatorProps as q, type IconProps as r, type IconName as s, type DialogProps as t, type DialogHeaderProps as u, type DialogFooterProps as v, Skeleton as w, SkeletonText as x, SkeletonChart as y, SkeletonTable as z };