@teamsparta/stack-flex/dist/v2/FlexV2.d.mts

stack flex

import * as react from 'react';
import { ComponentPropsWithoutRef, ElementType } from 'react';
import { Primitive } from '@radix-ui/react-primitive';
import { Responsive } from '@teamsparta/stack-core';
import { FlexDirection, FlexAlignItems, FlexJustifyContent, FlexWrap, FlexPosition } from '../shared/type.mjs';

interface FlexV2Props extends ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * as를 사용하여 렌더링할 컴포넌트를 설정합니다.
     */
    as?: ElementType;
    /**
     * asChild를 사용하여 다른 컴포넌트로 렌더링할지 여부를 설정합니다.
     * @default false
     */
    asChild?: boolean;
    /**
     * 방향을 설정합니다.
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default "row"
     */
    direction?: Responsive<FlexDirection>;
    /**
     * 교차축 정렬을 설정합니다. (축 방향은 direction에 따라 수직/수평으로 달라집니다)
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default "normal"
     */
    align?: Responsive<FlexAlignItems>;
    /**
     * 주축 정렬을 설정합니다. (축 방향은 direction에 따라 수직/수평으로 달라집니다)
     * - Responsive 값을 사용하여 반응형 디자인을 적용할 수 있습니다.
     * @default "normal"
     */
    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>;
}
declare const FlexV2: react.ForwardRefExoticComponent<FlexV2Props & react.RefAttributes<HTMLDivElement>> & {
    Column: react.ForwardRefExoticComponent<FlexV2Props & react.RefAttributes<HTMLDivElement>>;
    Row: react.ForwardRefExoticComponent<FlexV2Props & react.RefAttributes<HTMLDivElement>>;
};

export { FlexV2, type FlexV2Props };