lumir-design-system-shared/dist/types/src/primitives/Surface/Surface.d.ts

Lumir Design System - Shared Components & Tokens

import React from 'react';
export type BackgroundToken = 'primary-system01-1-rest' | 'primary-system01-1-hovered' | 'primary-system01-1-pressed' | 'primary-system01-1-selected' | 'primary-system01-1-disabled' | 'primary-system01-2-rest' | 'primary-system01-2-hovered' | 'primary-system01-2-pressed' | 'primary-system01-2-selected' | 'primary-system01-2-disabled' | 'primary-system02-1-rest' | 'primary-system02-1-hovered' | 'primary-system02-1-pressed' | 'primary-system02-1-selected' | 'primary-system02-1-disabled' | 'primary-system02-2-rest' | 'primary-system02-2-hovered' | 'primary-system02-2-pressed' | 'primary-system02-2-selected' | 'primary-system02-2-disabled' | 'primary-system03-1-rest' | 'primary-system03-1-hovered' | 'primary-system03-1-pressed' | 'primary-system03-1-selected' | 'primary-system03-1-disabled' | 'primary-system03-2-rest' | 'primary-system03-2-hovered' | 'primary-system03-2-pressed' | 'primary-system03-2-selected' | 'primary-system03-2-disabled' | 'secondary-system01-1-rest' | 'secondary-system01-1-hovered' | 'secondary-system01-1-pressed' | 'secondary-system01-1-selected' | 'secondary-system01-1-disabled' | 'secondary-system01-2-rest' | 'secondary-system01-2-hovered' | 'secondary-system01-2-pressed' | 'secondary-system01-2-selected' | 'secondary-system01-2-disabled' | 'secondary-system01-3-rest' | 'secondary-system01-3-hovered' | 'secondary-system01-3-pressed' | 'secondary-system01-3-selected' | 'secondary-system01-3-disabled' | 'secondary-system01-inverse-rest' | 'secondary-system02-1-rest' | 'secondary-system02-1-hovered' | 'secondary-system02-1-pressed' | 'secondary-system02-1-selected' | 'secondary-system02-1-disabled' | 'secondary-system02-2-rest' | 'secondary-system02-2-hovered' | 'secondary-system02-2-pressed' | 'secondary-system02-2-selected' | 'secondary-system02-2-disabled' | 'secondary-system02-3-rest' | 'secondary-system02-3-hovered' | 'secondary-system02-3-pressed' | 'secondary-system02-3-selected' | 'secondary-system02-3-disabled' | 'secondary-system02-inverse-rest' | 'secondary-system03-1-rest' | 'secondary-system03-1-hovered' | 'secondary-system03-1-pressed' | 'secondary-system03-1-selected' | 'secondary-system03-1-disabled' | 'secondary-system03-2-rest' | 'secondary-system03-2-hovered' | 'secondary-system03-2-pressed' | 'secondary-system03-2-selected' | 'secondary-system03-2-disabled' | 'secondary-system03-3-rest' | 'secondary-system03-3-hovered' | 'secondary-system03-3-pressed' | 'secondary-system03-3-selected' | 'secondary-system03-3-disabled' | 'secondary-system03-inverse-rest' | 'cta-system01-1-rest' | 'cta-system01-1-hovered' | 'cta-system01-1-pressed' | 'cta-system01-1-disabled' | 'cta-system01-2-rest' | 'cta-system01-2-hovered' | 'cta-system01-2-pressed' | 'cta-system01-2-disabled' | 'cta-system02-1-rest' | 'cta-system02-1-hovered' | 'cta-system02-1-pressed' | 'cta-system02-1-disabled' | 'cta-system02-2-rest' | 'cta-system02-2-hovered' | 'cta-system02-2-pressed' | 'cta-system02-2-disabled' | 'cta-system03-1-rest' | 'cta-system03-1-hovered' | 'cta-system03-1-pressed' | 'cta-system03-1-disabled' | 'cta-system03-2-rest' | 'cta-system03-2-hovered' | 'cta-system03-2-pressed' | 'cta-system03-2-disabled' | 'error-1-rest' | 'error-1-hovered' | 'error-1-pressed' | 'error-1-selected' | 'error-1-disabled' | 'error-2-rest' | 'error-2-hovered' | 'error-2-pressed' | 'error-2-selected' | 'error-2-disabled' | 'warning-1-rest' | 'warning-1-hovered' | 'warning-1-pressed' | 'warning-1-selected' | 'warning-1-disabled' | 'warning-2-rest' | 'warning-2-hovered' | 'warning-2-pressed' | 'warning-2-selected' | 'warning-2-disabled' | 'error' | 'warning' | 'success' | 'info' | 'focused';
export type ForegroundToken = 'primary-system01-1-rest' | 'primary-system01-1-hovered' | 'primary-system01-1-pressed' | 'primary-system01-1-selected' | 'primary-system01-1-disabled' | 'primary-system01-oncolor' | 'primary-system02-1-rest' | 'primary-system02-1-hovered' | 'primary-system02-1-pressed' | 'primary-system02-1-selected' | 'primary-system02-1-disabled' | 'primary-system02-oncolor' | 'primary-system03-1-rest' | 'primary-system03-1-hovered' | 'primary-system03-1-pressed' | 'primary-system03-1-selected' | 'primary-system03-1-disabled' | 'primary-system03-oncolor' | 'secondary-system01-1-rest' | 'secondary-system01-1-hovered' | 'secondary-system01-1-pressed' | 'secondary-system01-1-selected' | 'secondary-system01-1-disabled' | 'secondary-system01-2-rest' | 'secondary-system01-2-hovered' | 'secondary-system01-2-pressed' | 'secondary-system01-2-selected' | 'secondary-system01-2-disabled' | 'secondary-system01-3-rest' | 'secondary-system01-3-hovered' | 'secondary-system01-3-pressed' | 'secondary-system01-3-selected' | 'secondary-system01-3-disabled' | 'secondary-system01-inverse-rest' | 'secondary-system01-oncolor' | 'secondary-system02-1-rest' | 'secondary-system02-1-hovered' | 'secondary-system02-1-pressed' | 'secondary-system02-1-selected' | 'secondary-system02-1-disabled' | 'secondary-system02-2-rest' | 'secondary-system02-2-hovered' | 'secondary-system02-2-pressed' | 'secondary-system02-2-selected' | 'secondary-system02-2-disabled' | 'secondary-system02-3-rest' | 'secondary-system02-3-hovered' | 'secondary-system02-3-pressed' | 'secondary-system02-3-selected' | 'secondary-system02-3-disabled' | 'secondary-system02-inverse-rest' | 'secondary-system02-oncolor' | 'secondary-system03-1-rest' | 'secondary-system03-1-hovered' | 'secondary-system03-1-pressed' | 'secondary-system03-1-selected' | 'secondary-system03-1-disabled' | 'secondary-system03-2-rest' | 'secondary-system03-2-hovered' | 'secondary-system03-2-pressed' | 'secondary-system03-2-selected' | 'secondary-system03-2-disabled' | 'secondary-system03-3-rest' | 'secondary-system03-3-hovered' | 'secondary-system03-3-pressed' | 'secondary-system03-3-selected' | 'secondary-system03-3-disabled' | 'secondary-system03-inverse-rest' | 'secondary-system03-oncolor' | 'cta-system01-1-rest' | 'cta-system01-1-hovered' | 'cta-system01-1-pressed' | 'cta-system01-1-selected' | 'cta-system01-1-disabled' | 'cta-system01-2-rest' | 'cta-system01-2-hovered' | 'cta-system01-2-pressed' | 'cta-system01-2-selected' | 'cta-system01-2-disabled' | 'cta-system01-oncolor' | 'cta-system02-1-rest' | 'cta-system02-1-hovered' | 'cta-system02-1-pressed' | 'cta-system02-1-selected' | 'cta-system02-1-disabled' | 'cta-system02-2-rest' | 'cta-system02-2-hovered' | 'cta-system02-2-pressed' | 'cta-system02-2-selected' | 'cta-system02-2-disabled' | 'cta-system02-oncolor' | 'cta-system03-1-rest' | 'cta-system03-1-hovered' | 'cta-system03-1-pressed' | 'cta-system03-1-selected' | 'cta-system03-1-disabled' | 'cta-system03-2-rest' | 'cta-system03-2-hovered' | 'cta-system03-2-pressed' | 'cta-system03-2-selected' | 'cta-system03-2-disabled' | 'cta-system03-oncolor' | 'error-1-rest' | 'error-1-hovered' | 'error-1-pressed' | 'error-1-selected' | 'error-1-disabled' | 'error-oncolor' | 'warning-1-rest' | 'warning-1-hovered' | 'warning-1-pressed' | 'warning-1-selected' | 'warning-1-disabled' | 'warning-oncolor' | 'error' | 'warning' | 'success' | 'info' | 'focused';
export type StrokeToken = 'primary-system01-1-rest' | 'primary-system01-1-hovered' | 'primary-system01-1-pressed' | 'primary-system01-1-disabled' | 'primary-system02-1-rest' | 'primary-system02-1-hovered' | 'primary-system02-1-pressed' | 'primary-system02-1-disabled' | 'primary-system03-1-rest' | 'primary-system03-1-hovered' | 'primary-system03-1-pressed' | 'primary-system03-1-disabled' | 'secondary-system01-1-rest' | 'secondary-system01-1-hovered' | 'secondary-system01-1-pressed' | 'secondary-system01-1-disabled' | 'secondary-system01-2-rest' | 'secondary-system01-2-hovered' | 'secondary-system01-2-pressed' | 'secondary-system01-2-disabled' | 'secondary-system01-3-rest' | 'secondary-system01-3-hovered' | 'secondary-system01-3-pressed' | 'secondary-system01-3-disabled' | 'secondary-system01-inverse-rest' | 'secondary-system02-1-rest' | 'secondary-system02-1-hovered' | 'secondary-system02-1-pressed' | 'secondary-system02-1-disabled' | 'secondary-system02-2-rest' | 'secondary-system02-2-hovered' | 'secondary-system02-2-pressed' | 'secondary-system02-2-disabled' | 'secondary-system02-3-rest' | 'secondary-system02-3-hovered' | 'secondary-system02-3-pressed' | 'secondary-system02-3-disabled' | 'secondary-system02-inverse-rest' | 'secondary-system03-1-rest' | 'secondary-system03-1-hovered' | 'secondary-system03-1-pressed' | 'secondary-system03-1-disabled' | 'secondary-system03-2-rest' | 'secondary-system03-2-hovered' | 'secondary-system03-2-pressed' | 'secondary-system03-2-disabled' | 'secondary-system03-3-rest' | 'secondary-system03-3-hovered' | 'secondary-system03-3-pressed' | 'secondary-system03-3-disabled' | 'secondary-system03-inverse-rest' | 'cta-system01-1-rest' | 'cta-system01-1-hovered' | 'cta-system01-1-pressed' | 'cta-system01-1-disabled' | 'cta-system01-2-rest' | 'cta-system01-2-hovered' | 'cta-system01-2-pressed' | 'cta-system01-2-disabled' | 'cta-system02-1-rest' | 'cta-system02-1-hovered' | 'cta-system02-1-pressed' | 'cta-system02-1-disabled' | 'cta-system02-2-rest' | 'cta-system02-2-hovered' | 'cta-system02-2-pressed' | 'cta-system02-2-disabled' | 'cta-system03-1-rest' | 'cta-system03-1-hovered' | 'cta-system03-1-pressed' | 'cta-system03-1-disabled' | 'cta-system03-2-rest' | 'cta-system03-2-hovered' | 'cta-system03-2-pressed' | 'cta-system03-2-disabled' | 'error-1-rest' | 'error-1-hovered' | 'error-1-pressed' | 'error-1-disabled' | 'warning-1-rest' | 'warning-1-hovered' | 'warning-1-pressed' | 'warning-1-disabled' | 'error' | 'warning' | 'success' | 'info' | 'focused';
export type RadiusToken = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'circular' | 'pill' | 'button-sm' | 'button-md' | 'button-lg' | 'card' | 'input' | 'badge-default' | 'badge-pill' | 'avatar' | 'popover' | 'modal';
export type BorderWidthToken = 'thin' | 'medium' | 'thick' | 'thicker' | 'button' | 'card' | 'input-default' | 'input-focused' | 'divider';
export type ShadowToken = '0' | '10' | '20' | '30' | '40' | '50';
export type OverlayToken = 'light' | 'medium' | 'heavy';
export interface SurfaceProps extends React.HTMLAttributes<HTMLElement> {
    as?: 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'span';
    background?: BackgroundToken;
    foreground?: ForegroundToken;
    borderColor?: StrokeToken;
    borderWidth?: BorderWidthToken;
    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
    borderRadius?: RadiusToken;
    boxShadow?: ShadowToken | 'none';
    overlay?: OverlayToken;
    fill?: boolean;
    children?: React.ReactNode;
}
/**
 * Surface 프리미티브 컴포넌트
 *
 * 색상, 그림자, 반지름, 테두리 등 시각적 표면 속성만을 담당하는 순수한 프리미티브입니다.
 * 시스템 + 위계 + 상태 체계를 사용하여 명확한 시스템별 색상 구분과 상태별 색상을 모두 보장합니다.
 *
 * **특징:**
 * - **시스템별 명확한 구분**: primary-system01-1-rest, primary-system02-1-rest 등으로 시스템별 색상 명시
 * - **색상 위계 지원**: 각 시스템 내에서 1, 2, 3... 위계별 색상 구분
 * - **상태별 색상 지원**: rest, hovered, pressed, disabled 상태별 색상 변화
 * - **명확한 역할 분리**: 시각적 표면만 담당 (레이아웃은 Frame 사용)
 *
 * @example
 * ```tsx
 * // System-01 기본 카드
 * <Surface background="secondary-system01-1-rest" borderRadius="card">
 *   Content
 * </Surface>
 *
 * // System-02 Primary 버튼 (hover 상태)
 * <Surface background="primary-system02-1-hovered" foreground="primary-system02-oncolor" borderRadius="button-md">
 *   Button
 * </Surface>
 *
 * // System-01 테두리가 있는 입력 필드
 * <Surface
 *   background="secondary-system01-1-rest"
 *   borderColor="secondary-system01-1-rest"
 *   borderWidth="input-default"
 *   borderStyle="solid"
 *   borderRadius="input"
 * >
 *   Input
 * </Surface>
 * ```
 */
export declare const Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLElement>>;