/**
 * @file LayoutPanel.tsx
 * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext
 * @output Exports LayoutPanel component and LayoutPanelProps
 * @position Sidebar panel for Layout start/end slots. Use for navigation panels,
 *   settings sidebars, detail panels, or any fixed-width side content.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Layout/Layout.doc.mjs
 * - /apps/storybook/stories/Layout.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
 */
import type { AriaRole, ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import type { SizeValue, SpacingStep } from '../utils/types';
import type { ResizableProps } from '../Resizable/useResizable';
export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Content to render inside the panel.
     */
    children?: ReactNode;
    /**
     * Adds a themed border on the appropriate edge.
     * - Start panel: border on end edge (right in LTR)
     * - End panel: border on start edge (left in LTR)
     * When false, spacing collapse is applied automatically for seamless visual flow.
     *
     * Note: When using `resizable` with an adjacent `ResizeHandle hasDivider`,
     * set this to `false` to avoid a double-line artifact.
     * @default false
     */
    hasDivider?: boolean;
    /**
     * Internal padding of the panel using the spacing scale.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     * Overrides the default padding from the layout container.
     */
    padding?: SpacingStep;
    /**
     * Enables scrollable overflow for the panel.
     * Set to false for auto-height layouts where sticky positioning
     * needs to work with parent containers.
     * @default true
     */
    isScrollable?: boolean;
    /**
     * Accessible label for the landmark.
     * Required when role is set and multiple landmarks of the same type exist.
     */
    label?: string;
    /**
     * ARIA landmark role for accessibility.
     * Use 'navigation' or 'complementary' only for top-level layouts (not nested).
     */
    role?: AriaRole;
    /**
     * Width of the panel.
     * Numbers are treated as pixels, strings are used as-is.
     * When `resizable` is provided, this is ignored — the hook controls width.
     */
    width?: SizeValue;
    /**
     * Resize props from `useResizable()`. When provided, the panel width
     * is driven by the hook and a resize handle should be placed adjacent
     * to this panel.
     *
     * @example
     * ```
     * const sidebar = useResizable({ defaultSize: 250, minSizePx: 200 });
     * <LayoutPanel resizable={sidebar.props}>
     *   <Navigation />
     * </LayoutPanel>
     * <ResizeHandle resizable={sidebar.props} />
     * ```
     */
    resizable?: ResizableProps;
}
/**
 * Sidebar or side panel for Layout. Use in the `start` slot for left navigation
 * or in the `end` slot for detail/inspector panels.
 * Renders with optional divider and context-aware padding.
 * Divider position is auto-detected based on which slot the panel is in.
 *
 * Already provides its own padding and scroll — don't add padding or
 * overflow to children. Use `padding={0}` if you need edge-to-edge content.
 *
 * @example
 * ```
 * <LayoutContainer variant="card">
 *   <Layout
 *     start={
 *       <LayoutPanel hasDivider role="navigation">
 *         <Navigation />
 *       </LayoutPanel>
 *     }
 *     content={<LayoutContent>Main content</LayoutContent>}
 *     end={
 *       <LayoutPanel hasDivider role="complementary">
 *         <Sidebar />
 *       </LayoutPanel>
 *     }
 *   />
 * </LayoutContainer>
 * ```
 */
export declare function LayoutPanel({ children, hasDivider, isScrollable, label, padding, role, width, resizable, xstyle, className, style, ref, ...props }: LayoutPanelProps): import("react").JSX.Element;
export declare namespace LayoutPanel {
    var displayName: string;
}
//# sourceMappingURL=LayoutPanel.d.ts.map