/**
 * @file Section.tsx
 * @input Uses container utility, StyleX
 * @output Exports Section component and SectionProps
 * @position Core section container component
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Section/Section.doc.mjs (props table, features)
 * - /packages/core/src/Section/index.ts (exports if types change)
 * - /apps/storybook/stories/Section.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Section/ (showcase blocks)
 */
import type { ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import type { SizeValue, SpacingStep } from '../utils/types';
import type { SectionVariantMap } from './index';
/**
 * Visual variant for the section.
 * Extensible via module augmentation of SectionVariantMap.
 */
export type SectionVariant = keyof SectionVariantMap;
export interface SectionProps extends BaseProps<HTMLElement> {
    ref?: React.Ref<HTMLElement>;
    /**
     * Visual variant of the section.
     * - 'section': Surface background color
     * - 'transparent': Fully transparent background
     * - 'muted': Muted background color
     * @default 'section'
     */
    variant?: SectionVariant;
    /**
     * Width of the section.
     * Numbers are treated as pixels, strings are used as-is.
     */
    width?: SizeValue;
    /**
     * Height of the section.
     * Numbers are treated as pixels, strings are used as-is.
     */
    height?: SizeValue;
    /**
     * Maximum width of the section.
     * Numbers are treated as pixels, strings are used as-is.
     */
    maxWidth?: SizeValue;
    /**
     * Minimum height of the section.
     * Numbers are treated as pixels, strings are used as-is.
     */
    minHeight?: SizeValue;
    /**
     * Content to render inside the section.
     * Should typically be Layout child components.
     */
    children?: ReactNode;
    /**
     * Which sides should have divider borders.
     * Use 'start'/'end' for horizontal (respects RTL).
     * @example
     * ```
     * dividers={['top', 'bottom']}
     * ```
     */
    dividers?: ('top' | 'bottom' | 'start' | 'end')[];
    /**
     * Internal padding of the section using the spacing scale.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     * @default 4 (16px)
     */
    padding?: SpacingStep;
    /**
     * Block (vertical) padding override. When set, overrides only the block
     * axis padding while preserving inline padding from `padding` or the
     * container theme default.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     */
    paddingBlock?: SpacingStep;
}
/**
 * A section container with background variants.
 *
 * Applies section-specific appearance based on the variant prop
 * and sets CSS variables for child layout components.
 *
 * @compositionHint Use inside Card to create visually distinct regions.
 * Sections automatically escape parent container padding for edge-to-edge fills.
 *
 * @example
 * ```
 * <Section variant="muted" width={300} height={250}>
 *   <Layout
 *     content={<LayoutContent>Content in muted section</LayoutContent>}
 *   />
 * </Section>
 * ```
 */
export declare function Section({ variant, width, height, maxWidth, minHeight, children, dividers, padding, paddingBlock, xstyle, className, style, ref, ...props }: SectionProps): import("react").JSX.Element;
export declare namespace Section {
    var displayName: string;
}
//# sourceMappingURL=Section.d.ts.map