import React from 'react';
import { ResponsiveOrSingle } from '../../types/responsive';
export type DisplayValue = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'none' | 'contents';
export type PositionValue = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
export type OverflowValue = 'visible' | 'hidden' | 'scroll' | 'auto';
export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
export type AlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
export type AlignContent = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
export type SpacingValue = 'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
export interface FrameProps extends React.HTMLAttributes<HTMLElement> {
    as?: 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'span';
    display?: ResponsiveOrSingle<DisplayValue>;
    position?: ResponsiveOrSingle<PositionValue>;
    top?: ResponsiveOrSingle<string | number>;
    right?: ResponsiveOrSingle<string | number>;
    bottom?: ResponsiveOrSingle<string | number>;
    left?: ResponsiveOrSingle<string | number>;
    zIndex?: ResponsiveOrSingle<number>;
    overflow?: ResponsiveOrSingle<OverflowValue>;
    overflowX?: ResponsiveOrSingle<OverflowValue>;
    overflowY?: ResponsiveOrSingle<OverflowValue>;
    direction?: ResponsiveOrSingle<FlexDirection>;
    wrap?: ResponsiveOrSingle<FlexWrap>;
    justify?: ResponsiveOrSingle<JustifyContent>;
    align?: ResponsiveOrSingle<AlignItems>;
    alignContent?: ResponsiveOrSingle<AlignContent>;
    flex?: ResponsiveOrSingle<string | number>;
    flexGrow?: ResponsiveOrSingle<number>;
    flexShrink?: ResponsiveOrSingle<number>;
    flexBasis?: ResponsiveOrSingle<string | number>;
    alignSelf?: ResponsiveOrSingle<AlignItems>;
    order?: ResponsiveOrSingle<number>;
    gap?: ResponsiveOrSingle<SpacingValue | string | number>;
    rowGap?: ResponsiveOrSingle<SpacingValue | string | number>;
    columnGap?: ResponsiveOrSingle<SpacingValue | string | number>;
    gridTemplateColumns?: ResponsiveOrSingle<string>;
    gridTemplateRows?: ResponsiveOrSingle<string>;
    gridColumn?: ResponsiveOrSingle<string>;
    gridRow?: ResponsiveOrSingle<string>;
    padding?: ResponsiveOrSingle<SpacingValue>;
    margin?: ResponsiveOrSingle<SpacingValue>;
    paddingX?: ResponsiveOrSingle<SpacingValue>;
    paddingY?: ResponsiveOrSingle<SpacingValue>;
    marginX?: ResponsiveOrSingle<SpacingValue>;
    marginY?: ResponsiveOrSingle<SpacingValue>;
    paddingTop?: ResponsiveOrSingle<SpacingValue>;
    paddingRight?: ResponsiveOrSingle<SpacingValue>;
    paddingBottom?: ResponsiveOrSingle<SpacingValue>;
    paddingLeft?: ResponsiveOrSingle<SpacingValue>;
    marginTop?: ResponsiveOrSingle<SpacingValue>;
    marginRight?: ResponsiveOrSingle<SpacingValue>;
    marginBottom?: ResponsiveOrSingle<SpacingValue>;
    marginLeft?: ResponsiveOrSingle<SpacingValue>;
    width?: ResponsiveOrSingle<string | number>;
    height?: ResponsiveOrSingle<string | number>;
    minWidth?: ResponsiveOrSingle<string | number>;
    minHeight?: ResponsiveOrSingle<string | number>;
    maxWidth?: ResponsiveOrSingle<string | number>;
    maxHeight?: ResponsiveOrSingle<string | number>;
    fill?: boolean;
    children?: React.ReactNode;
}
/**
 * Frame 프리미티브 컴포넌트
 *
 * 틀, 구조, 레이아웃, 배치, 간격을 담당하는 구조적 프리미티브입니다.
 * 모든 레이아웃과 spacing 관련 기능을 제공합니다.
 *
 * **역할:**
 * - Display, Position, Overflow 제어
 * - Flexbox, Grid 레이아웃
 * - Gap, Padding, Margin 간격 관리
 * - Width, Height 크기 제어
 *
 * **Surface와의 차이점:**
 * - Frame: 구조적 속성 (레이아웃, 간격, 크기)
 * - Surface: 시각적 속성 (색상, 테두리, 그림자)
 *
 * @example
 * ```tsx
 * // 기본 Flexbox 레이아웃
 * <Frame display="flex" justify="center" align="center" gap="md">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </Frame>
 *
 * // Grid 레이아웃
 * <Frame display="grid" gridTemplateColumns="1fr 1fr" gap="lg">
 *   <div>Left</div>
 *   <div>Right</div>
 * </Frame>
 *
 * // Surface와 조합
 * <Surface backgroundColor="primary" borderRadius="md">
 *   <Frame padding="xl" display="flex" direction="column" gap="sm">
 *     <Text>Title</Text>
 *     <Text>Content</Text>
 *   </Frame>
 * </Surface>
 * ```
 */
export declare const Frame: React.ForwardRefExoticComponent<FrameProps & React.RefAttributes<HTMLElement>>;