import { type CSSProperties, type ReactNode } from "react";
export type ConfigPanelSaveState = "clean" | "dirty" | "saving" | "saved" | "error";
export interface ConfigPanelTab {
    id: string;
    label: ReactNode;
    /** Optional badge (e.g. count of errors). */
    badge?: ReactNode;
    /** When true, the tab is rendered but disabled. */
    disabled?: boolean;
    content: ReactNode;
}
export interface ConfigPanelProps {
    open?: boolean;
    /** Title shown in the header. Double-click opens the inline editor. */
    title?: string;
    /** Optional breadcrumb prefix (e.g. "Action"). */
    kindLabel?: string;
    /** Optional icon rendered before the title. */
    icon?: ReactNode;
    /** Inline status banner — error / warning / hint, shown at the top of the body. */
    banner?: ReactNode;
    /** Tab definitions. When omitted, `children` renders directly (no tabs). */
    tabs?: ConfigPanelTab[];
    /** Initial active tab. Controlled if `onTabChange` is provided. */
    activeTab?: string;
    defaultActiveTab?: string;
    onTabChange?: (id: string) => void;
    /** Save-state pill in the footer. */
    saveState?: ConfigPanelSaveState;
    /** Fires on the title editor's commit. Omit to disable title editing. */
    onTitleChange?: (next: string) => void;
    onClose?: () => void;
    onSave?: () => void;
    onCancel?: () => void;
    /** Resizable width — pass `resizable: false` to lock. */
    resizable?: boolean;
    /** Initial width (px). Defaults to 360. */
    defaultWidth?: number;
    /** Lower clamp during resize. Defaults to 280. */
    minWidth?: number;
    /**
     * Upper clamp during resize. Defaults to 720. The panel ALSO clamps
     * to its parent container's measured width minus
     * `maxWidthContainerInset` (default 80 px) so the panel can never
     * cover the whole canvas — whichever is smaller wins.
     */
    maxWidth?: number;
    /**
     * How much of the parent container to leave visible at the panel's
     * widest. Subtracted from the parent's clientWidth before clamping
     * `maxWidth`. Defaults to 80 px.
     */
    maxWidthContainerInset?: number;
    /** "pinned" sits flush against the canvas; "floating" raises with shadow. */
    variant?: "pinned" | "floating";
    /** Body slot used only when `tabs` is omitted. */
    children?: ReactNode;
    /** Custom footer slot — replaces the default save/cancel buttons. */
    footer?: ReactNode;
    className?: string;
    style?: CSSProperties;
}
export declare function ConfigPanel({ open, title, kindLabel, icon, banner, tabs, activeTab: controlledActive, defaultActiveTab, onTabChange, saveState, onTitleChange, onClose, onSave, onCancel, resizable, defaultWidth, minWidth, maxWidth, maxWidthContainerInset, variant, children, footer, className, style, }: ConfigPanelProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ConfigPanel.d.ts.map