lumir-design-system-shared
Version:
Lumir Design System - Shared Components & Tokens
53 lines (52 loc) • 2.56 kB
TypeScript
import React from 'react';
import { ResponsiveOrSingle } from '../../types/responsive';
export type HeightValue = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
export type WidthValue = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
export type ObjectFitValue = 'fill' | 'contain' | 'cover' | 'none' | 'scaleDown' | 'stretch' | 'fitInside' | 'fillArea' | 'crop';
export type ObjectPositionValue = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'cropCenter' | 'cropTop' | 'cropBottom' | 'cropLeft' | 'cropRight' | 'cropTopLeft' | 'cropTopRight' | 'cropBottomLeft' | 'cropBottomRight';
export type BoxSizingValue = 'contentBox' | 'borderBox';
export type AspectRatioValue = 'square' | 'landscape.classic' | 'landscape.wide' | 'landscape.ultraWide' | 'landscape.film' | 'portrait.classic' | 'portrait.tall' | 'portrait.book';
export interface SizingProps extends React.HTMLAttributes<HTMLElement> {
as?: 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'span';
width?: ResponsiveOrSingle<WidthValue | string | number>;
height?: ResponsiveOrSingle<HeightValue | string | number>;
minWidth?: ResponsiveOrSingle<string | number>;
minHeight?: ResponsiveOrSingle<string | number>;
maxWidth?: ResponsiveOrSingle<string | number>;
maxHeight?: ResponsiveOrSingle<string | number>;
aspectRatio?: ResponsiveOrSingle<AspectRatioValue | string | number>;
objectFit?: ResponsiveOrSingle<ObjectFitValue>;
objectPosition?: ResponsiveOrSingle<ObjectPositionValue | string>;
boxSizing?: ResponsiveOrSingle<BoxSizingValue>;
children?: React.ReactNode;
}
/**
* Sizing 프리미티브 컴포넌트
*
* CSS 크기 속성만을 담당하는 순수한 프리미티브입니다.
* width, height, min/max 크기, aspect ratio 등의 크기 관련 속성을 제공합니다.
*
* @example
* ```tsx
* // 기본 크기 설정
* <Sizing width="100%" height="sm">
* Content
* </Sizing>
*
* // 최소/최대 크기 제한
* <Sizing minWidth="200px" maxWidth="400px" height="auto">
* Responsive content
* </Sizing>
*
* // 가로세로 비율 고정
* <Sizing width="100%" aspectRatio="16/9">
* Video container
* </Sizing>
*
* // 이미지 제어
* <Sizing width="100%" height="200px" objectFit="cover">
* <img src="image.jpg" alt="Cover image" />
* </Sizing>
* ```
*/
export declare const Sizing: React.ForwardRefExoticComponent<SizingProps & React.RefAttributes<HTMLElement>>;