@teamsparta/stack-flex/dist/Flex.d.ts

stack flex

import { Responsive } from '@teamsparta/stack-core';
import { PolymorphicComponentPropsWithRef } from '@teamsparta/stack-utils';
import { ElementType, ReactElement } from 'react';
import { FlexDirection, FlexAlignItems, FlexJustifyContent, FlexWrap, FlexPosition } from './type.js';

type FlexProps<C extends ElementType> = PolymorphicComponentPropsWithRef<C, {
    /**
     * 방향을 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default "row"
     */
    direction?: Responsive<FlexDirection>;
    /**
     * 수평 정렬을 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default "start"
     */
    align?: Responsive<FlexAlignItems>;
    /**
     * 수직 정렬을 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default "start"
     */
    justify?: Responsive<FlexJustifyContent>;
    /**
     * 줄 바꿈 여부를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default "nowrap"
     */
    wrap?: Responsive<FlexWrap>;
    /**
     * 아이템 사이의 간격을 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default 0
     */
    gap?: Responsive<number | string>;
    /**
     * 아이템이 전체 너비를 차지하는지 여부를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default false
     */
    fullWidth?: Responsive<boolean>;
    /**
     * 아이템이 전체 높이를 차지하는지 여부를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default false
     */
    fullHeight?: Responsive<boolean>;
    /**
     * 내부 여백을 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default 0
     */
    padding?: Responsive<number | string>;
    /**
     * 너비를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    width?: Responsive<number | string>;
    /**
     * 높이를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    height?: Responsive<number | string>;
    /**
     * 최대 너비를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    maxWidth?: Responsive<number | string>;
    /**
     * 최대 높이를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    maxHeight?: Responsive<number | string>;
    /**
     * 테두리 반경을 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    borderRadius?: Responsive<number | string>;
    /**
     * 배경색을 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    background?: Responsive<string>;
    /**
     * 위치를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    position?: Responsive<FlexPosition>;
    /**
     * flex 속성을 설정합니다 (flex-grow, flex-shrink, flex-basis의 축약형).
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    flex?: Responsive<number | string>;
    /**
     * 테두리를 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     */
    border?: Responsive<string>;
}>;
type FlexComponent = <C extends ElementType = "div">(props: FlexProps<C>) => ReactElement | null;
declare const Flex: FlexComponent & {
    Column: FlexComponent;
    Row: FlexComponent;
};

export { Flex, type FlexProps };