lumir-design-system-shared
Version:
Lumir Design System - Shared Components & Tokens
105 lines (104 loc) • 4.8 kB
TypeScript
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>>;