/** @jsxRuntime classic */
/** @jsx jsx */
import * as React from 'react';
export type SidePanelVariant = 'standard' | 'alternate';
export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
export interface SidePanelProps {
    /**
     * The width of the component (in `px` if it's a `number`) when it is collapsed.
     *
     * @default 64
     */
    collapsedWidth?: number | string;
    /**
     * If true, sets the expanded state of the side panel
     * @default true
     */
    expanded?: boolean;
    /**
     * The width of the component (in `px` if it's a `number`) when it is expanded.
     *
     * @default 320
     */
    expandedWidth?: number | string;
    /**
     * Which side the side panel is meant to originate from.
     *
     * @default 'left'
     */
    origin?: 'left' | 'right';
    /**
     * The function called when the side panel's `expanded` state changes. States like `'collapsing'` and `'expanding'` are tracked in another callback: `onStateTransition`
     *
     * @param boolean
     */
    onExpandedChange?: (expanded?: boolean) => void;
    /**
     * The function called when the side panel is transitioning between states.
     * Use this to track when the side panel is animating between `'collapsed'`, `'collapsing'`, `'expanded'`, and `'expanding'` states.
     * This can be particularly helpful if child components need to react specifically to these states.
     *
     * @param SidePanelTransitionStates
     */
    onStateTransition?: (state?: SidePanelTransitionStates) => void;
    /**
     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
     *
     * @default 'standard'
     */
    variant?: SidePanelVariant;
    /**
     * This is set by the useSidePanel hook and prevents unintended keyframe animations
     *
     * @param boolean
     */
    touched: boolean;
    children?: React.ReactNode;
    onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
    onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
}
export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponent<"section", SidePanelProps> & {
    /**
     * `SidePanel.ToggleButton` is a control that is meant to toggle between `expanded = true` and
     * `expanded = false` states. It must be used within the `SidePanel` component as a child. Use
     * in conjunction with `useSidePanel`'s `controlProps`, otherwise it does not come with explicit
     * `onClick` handlers.
     *
     * For accessibility purposes, it must be the first focusable element. We recommend that you
     * keep it as the first child of `SidePanel`
     */
    ToggleButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps>;
};
//# sourceMappingURL=SidePanel.d.ts.map