import * as React from 'react';
import { CSProps } from '@workday/canvas-kit-styling';
/**
 * Adds the necessary props to the SidePanel container element.
 * This includes the `id` and `aria-labelledby` attributes for accessibility.
 */
export declare const useSidePanelContainer: import("@workday/canvas-kit-react/common").BehaviorHook<{
    state: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    };
    events: {
        expand(): void;
        collapse(): void;
        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
        handleAnimationStart(): undefined;
    };
}, {
    readonly id: string;
    readonly 'aria-labelledby': string;
    readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
}>;
export type SidePanelVariant = 'standard' | 'alternative' | 'overlay';
export interface SidePanelProps extends CSProps {
    /**
     * The width of the component (in `px` if it's a `number`) when it is collapsed.
     *
     * @default 64
     */
    collapsedWidth?: number | string;
    /**
     * The width of the component (in `px` if it's a `number`) when it is expanded.
     *
     * @default 320
     */
    expandedWidth?: number | string;
    /**
     * The style variant of the side panel.
     * - `'standard'`: navigation surface background (`system.legacy.color.surface.navigation`), no depth.
     * - `'alternative'`: raised surface background (`system.legacy.color.surface.raised`), no depth.
     * - `'overlay'`: default surface background (`system.legacy.color.surface.default`) with level 6 depth, for panels that need to look lifted off the page. This is a visual treatment only — it adds no dialog semantics, focus trapping, or backdrop.
     *
     * @default 'standard'
     */
    variant?: SidePanelVariant;
    children?: React.ReactNode;
}
export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
    variant: {
        overlay: {
            backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
            boxShadow: "--cnvs-sys-depth-6";
        };
        alternative: {
            backgroundColor: "var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)))";
        };
        standard: {
            backgroundColor: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
        };
    };
    expanded: {
        expanded: ({ expandedWidth }: {
            expandedWidth: `--${string}`;
            collapsedWidth: `--${string}`;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            width: `--${string}`;
            maxWidth: `--${string}`;
        };
        collapsed: ({ collapsedWidth }: {
            expandedWidth: `--${string}`;
            collapsedWidth: `--${string}`;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            width: `--${string}`;
            maxWidth: `--${string}`;
        };
        expanding: ({ expandedWidth }: {
            expandedWidth: `--${string}`;
            collapsedWidth: `--${string}`;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            width: `--${string}`;
            maxWidth: `--${string}`;
        };
        collapsing: ({ collapsedWidth }: {
            expandedWidth: `--${string}`;
            collapsedWidth: `--${string}`;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            width: `--${string}`;
            maxWidth: `--${string}`;
        };
    };
}, {}, {
    expandedWidth: string;
    collapsedWidth: string;
}, never, never>;
export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponentM<"section", SidePanelProps & Partial<{
    initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
    origin: "end" | "start";
    panelId: string;
    labelId: string;
    onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}> & {
    onExpand?: ((data: undefined, prevState: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    }) => void) | undefined;
    onCollapse?: ((data: undefined, prevState: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    }) => void) | undefined;
    onHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, prevState: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    }) => void) | undefined;
    onHandleAnimationStart?: ((data: undefined, prevState: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    }) => void) | undefined;
} & {
    shouldExpand?: ((data: undefined, state: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    }) => boolean) | undefined;
    shouldCollapse?: ((data: undefined, state: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    }) => boolean) | undefined;
    shouldHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, state: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    }) => boolean) | undefined;
    shouldHandleAnimationStart?: ((data: undefined, state: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    }) => boolean) | undefined;
}, {
    state: {
        panelId: string;
        labelId: string;
        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
        origin: "end" | "start";
        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
    };
    events: {
        expand(): void;
        collapse(): void;
        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
        handleAnimationStart(): undefined;
    };
}> & {
    /**
     * `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
     * It must be used within the `SidePanel` component as a child. For accessibility purposes,
     * it should be the first focusable element in the panel.
     *
     * The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
     * when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
     * Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
     * conveys the state, so the label should not change between states.
     */
    ToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps, {
        state: {
            panelId: string;
            labelId: string;
            transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
            initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
            origin: "end" | "start";
            onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
        };
        events: {
            expand(): void;
            collapse(): void;
            handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
            handleAnimationStart(): undefined;
        };
    }>;
    /**
     * `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
     * The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
     * By default, the heading is hidden when the panel is collapsed.
     */
    Heading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", import("../..").TypeLevelProps>, import("./SidePanelHeading").SidePanelHeadingProps, {
        state: {
            panelId: string;
            labelId: string;
            transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
            initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
            origin: "end" | "start";
            onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
        };
        events: {
            expand(): void;
            collapse(): void;
            handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
            handleAnimationStart(): undefined;
        };
    }>;
};
//# sourceMappingURL=SidePanel.d.ts.map