lumir-design-system-shared
Version:
Lumir Design System - Shared Components & Tokens
63 lines (62 loc) • 2.66 kB
TypeScript
import React from 'react';
import { ResponsiveOrSingle } from '../../types/responsive';
export type ZIndexLevel = 'base' | 'raised' | 'navigation' | 'header' | 'dropdown' | 'sticky' | 'overlay' | 'modal' | 'toast' | 'popover' | 'tooltip';
export type CursorType = 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed' | 'grab' | 'grabbing' | 'zoom-in' | 'zoom-out' | 'crosshair' | 'cell' | 'context-menu' | 'copy' | 'alias';
export type FocusStyle = 'outline' | 'ring' | 'none';
export type PointerEvents = 'auto' | 'none';
export type UserSelect = 'auto' | 'none' | 'text' | 'all';
export type OpacityLevel = 'hover' | 'disabled' | 'overlay-light' | 'overlay-medium' | 'overlay-heavy' | number;
export interface InteractiveProps extends React.HTMLAttributes<HTMLElement> {
as?: 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'span' | 'button';
zIndex?: ResponsiveOrSingle<ZIndexLevel | number>;
cursor?: ResponsiveOrSingle<CursorType>;
focusStyle?: FocusStyle;
focusWithin?: boolean;
pointerEvents?: ResponsiveOrSingle<PointerEvents>;
userSelect?: ResponsiveOrSingle<UserSelect>;
opacity?: ResponsiveOrSingle<OpacityLevel>;
hoverOpacity?: OpacityLevel;
hoverScale?: number;
hoverElevation?: boolean;
pressed?: boolean;
disabled?: boolean;
touchAction?: 'auto' | 'none' | 'pan-x' | 'pan-y' | 'manipulation';
children?: React.ReactNode;
}
/**
* Interactive 프리미티브 컴포넌트
*
* 인터랙션 관련 속성(포커스, z-index, 커서, 호버 등)을 담당하는 순수한 프리미티브입니다.
* 시멘틱 토큰을 활용하여 일관된 인터랙션 경험을 제공합니다.
*
* 참고: 애니메이션은 기존 AnimationUtils를 사용하므로 이 컴포넌트에서는 제외됩니다.
*
* @example
* ```tsx
* // 기본 포커스와 호버 효과
* <Interactive focusStyle="ring" hoverOpacity="hover" cursor="pointer">
* <button>Clickable button</button>
* </Interactive>
*
* // 높은 z-index와 특별한 커서
* <Interactive zIndex="modal" cursor="grab">
* <div>Draggable modal</div>
* </Interactive>
*
* // 비활성 상태 처리
* <Interactive disabled opacity="disabled" cursor="not-allowed">
* <button>Disabled button</button>
* </Interactive>
*
* // 복잡한 호버 효과
* <Interactive
* hoverOpacity="hover"
* hoverScale={1.05}
* hoverElevation
* focusStyle="outline"
* >
* <div>Interactive card</div>
* </Interactive>
* ```
*/
export declare const Interactive: React.ForwardRefExoticComponent<InteractiveProps & React.RefAttributes<HTMLElement>>;