@likelion-design/ui 1.0.1 → 1.0.4

package/dist/index.d.mts

@@ -145,9 +145,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     /** Close 버튼 클릭 핸들러 */
     onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
-/** Chip 컴포넌트는 사용자가 직접 선택, 추가, 삭제할 수 있는 인터랙티브한 컴포넌트다. */
-declare const Chip: ({ type, size, variant, value, onChange, checked: checkedProp, defaultChecked, selectedValue, selectedValues, label, prefixIcon, suffixIcon, showClose, onClose, className, disabled, onClick, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
-interface ChipGroupProps {
+interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     /** 선택된 값 (controlled) - 단일: string, 다중: string[] */
     value?: string | string[];
     /** 초기 선택 값 (uncontrolled) */
@@ -166,13 +164,20 @@ interface ChipGroupProps {
     disabled?: boolean;
     /** 자식 Chip 컴포넌트들 */
     children: React.ReactNode;
-    /** 추가 CSS 클래스명 */
-    className?: string;
 }
 /** Chip.Group은 여러 Chip을 그룹화하여 단일/다중 선택을 관리한다. */
 declare const ChipGroup: {
-    ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, disabled, children, className, }: ChipGroupProps): react_jsx_runtime.JSX.Element;
+    ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const Chip: {
+    ({ type, size, variant, value, onChange, checked: checkedProp, defaultChecked, selectedValue, selectedValues, label, prefixIcon, suffixIcon, showClose, onClose, className, disabled, onClick, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
     displayName: string;
+} & {
+    Group: {
+        ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
 };
 
 type DialogAlign = "center" | "left";
@@ -181,65 +186,937 @@ type DialogVariant = "alert" | "confirm";
 type DialogActionColor = ButtonColor;
 type DialogActionType = ButtonType;
 type DialogActionSize = Exclude<ButtonSize, "xlarge">;
-interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Dialog 표시 여부 */
+/** 기존 방식의 Action Item 정의 */
+interface DialogActionItem {
+    label: string;
+    color?: DialogActionColor;
+    type?: DialogActionType;
+    size?: DialogActionSize;
+    prefixIcon?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    loading?: boolean;
+    disabled?: boolean;
+    onClick?: () => void | Promise<void>;
+    /** 클릭 시 다이얼로그 닫기 여부 (기본값: true) */
+    closeOnClick?: boolean;
+}
+interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "content"> {
     open?: boolean;
-    /** Dialog 타입 */
+    onClose?: () => void;
+    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
+    closeOnOverlayClick?: boolean;
+    /** ESC 키로 닫기 여부 (기본값: true) */
+    closeOnEsc?: boolean;
+    /** 다이얼로그 타입 (스타일링용) */
     variant?: DialogVariant;
-    /** 타이틀 정렬 */
+    /** 정렬 (기본값: variant가 alert면 left, 아니면 center) */
     align?: DialogAlign;
-    /** 타이틀 */
+    /** 다이얼로그 제목 */
     title?: React.ReactNode;
-    /** 설명 텍스트 */
+    /** 다이얼로그 본문/설명 */
     description?: React.ReactNode;
-    /** 아이콘 */
+    /** 다이얼로그 아이콘 */
     icon?: React.ReactNode;
-    /** 하단 액션 영역 */
+    /** 하단 버튼 목록 (Compound Component 대신 사용 가능) */
     actionItems?: DialogActionItem[];
-    /** 액션 레이아웃 */
+    /** actionItems 사용 시 버튼 레이아웃 */
     footerLayout?: DialogFooterLayout;
-    /** 액션 클릭 시 닫기 핸들러 (internal) */
-    onActionClose?: () => void;
+    /** 커스텀 컨텐츠 (헤더/푸터 없이 내용만 렌더링할 때 사용) */
+    content?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
 }
-interface DialogActionItem {
-    /** 버튼 라벨 */
+interface DialogHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
+interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    layout?: DialogFooterLayout;
+}
+interface DialogButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
     label: string;
-    /** 버튼 색상 */
-    color?: DialogActionColor;
-    /** 버튼 타입 */
-    type?: DialogActionType;
-    /** 버튼 크기 */
-    size?: DialogActionSize;
-    /** Prefix 아이콘 */
+    color?: ButtonColor;
+    type?: ButtonType;
+    size?: Exclude<ButtonSize, "xlarge">;
     prefixIcon?: React.ReactNode;
-    /** Suffix 아이콘 */
     suffixIcon?: React.ReactNode;
-    /** 로딩 상태 */
     loading?: boolean;
-    /** 비활성화 */
     disabled?: boolean;
-    /** 클릭 핸들러 */
-    onClick?: () => void;
-    /** 클릭 시 다이얼로그 닫기 */
+    /** 클릭 시 다이얼로그 닫기 여부 (기본값: false - 명시적으로 닫아야 함) */
     closeOnClick?: boolean;
 }
-interface DialogOpenOptions extends Omit<DialogProps, "open" | "onActionClose"> {
-    /** 닫힐 때 호출 */
+declare const Dialog: (({ open, onClose, closeOnOverlayClick, closeOnEsc, variant, align, title, description, icon, actionItems, footerLayout, content, className, children, ...props }: DialogProps) => react_jsx_runtime.JSX.Element | null) & {
+    Header: ({ title, icon, className, children, ...props }: DialogHeaderProps) => react_jsx_runtime.JSX.Element;
+    Body: ({ className, children, ...props }: DialogBodyProps) => react_jsx_runtime.JSX.Element;
+    Footer: ({ layout, className, children, ...props }: DialogFooterProps) => react_jsx_runtime.JSX.Element;
+    Button: ({ label, color, type, size, prefixIcon, suffixIcon, loading, disabled, onClick, closeOnClick, style, ...props }: DialogButtonProps) => react_jsx_runtime.JSX.Element;
+};
+interface DialogOptions {
+    id?: string;
+    variant?: DialogVariant;
+    align?: DialogAlign;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    buttons?: DialogActionItem[];
+    content?: React.ReactNode;
     onClose?: () => void;
-    /** 오버레이 클릭 시 닫기 */
     closeOnOverlayClick?: boolean;
-    /** ESC 키로 닫기 */
     closeOnEsc?: boolean;
 }
-/** Dialog 컴포넌트는 중요한 정보를 전달하고 확인을 받는 모달 레이아웃이다. */
-declare const Dialog: ({ open, variant, align, title, description, icon, actionItems, footerLayout, onActionClose, className, ...props }: DialogProps) => react_jsx_runtime.JSX.Element | null;
+interface AlertOptions extends Omit<DialogOptions, "buttons" | "content"> {
+    confirmLabel?: string;
+    onConfirm?: () => void | Promise<void>;
+}
+interface ConfirmOptions extends Omit<DialogOptions, "buttons" | "content"> {
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void | Promise<void>;
+}
+interface DialogContextType {
+    open: (options: DialogOptions) => string;
+    close: (id: string) => void;
+    closeAll: () => void;
+    alert: (options: AlertOptions) => Promise<void>;
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+}
+declare const DialogProvider: ({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare function useDialog(): DialogContextType;
+
+type TextInputSize = "pc" | "mo" | "medium" | "small";
+type TextInputState = "default" | "error";
+interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "title"> {
+    /** Title 텍스트 (있으면 표시) */
+    title?: string;
+    /** 필수 필드 표시 여부 */
+    required?: boolean;
+    /**
+     * Input 크기
+     * - "pc" / "mo": 디바이스 기반 네이밍
+     * - "medium" / "small": 스토리/디자인 토큰 기반 네이밍 (pc ↔ medium, mo ↔ small)
+     * 미지정 시 breakpoint 기준: tablet 미만 mo(small), 이상 pc(medium). 지정 시 오버라이드
+     */
+    size?: TextInputSize;
+    /** Input 상태 (에러 상태) */
+    error?: boolean;
+    /** Help text */
+    description?: React.ReactNode;
+    /** Character count 표시 (예: "99/100") */
+    maxLength?: number;
+    /** 왼쪽 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** 오른쪽 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** 오른쪽 단위 (타이머 등) */
+    suffixUnit?: React.ReactNode;
+    /** Help text 아이콘 (true면 기본 아이콘, 노드면 커스텀) */
+    accentIcon?: boolean | React.ReactNode;
+}
+/** TextInput 컴포넌트는 사용자로부터 텍스트 입력을 받는 폼 컴포넌트입니다. */
+declare const TextInput: ({ required, size, error, description, maxLength, prefixIcon, suffixIcon, suffixUnit, title, accentIcon, className, id, value, defaultValue, onChange, onFocus, onBlur, ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
+
+type ToggleSize = "medium" | "small";
+type ToggleLabelPosition = "start" | "end";
+interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
+    /** Toggle 크기 */
+    size?: ToggleSize;
+    /** Toggle 라벨 */
+    label?: React.ReactNode;
+    /** Toggle 라벨 위치 */
+    labelPosition?: ToggleLabelPosition;
+    /** Toggle 설명 텍스트 */
+    description?: React.ReactNode;
+    /** Toggle 상태 변경 핸들러 */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/** Toggle 컴포넌트는 사용자가 on/off 상태를 전환할 수 있는 스위치 컴포넌트다. */
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+
+type TextVariant = "display-d1" | "display-d2" | "display-d3" | "display-d4" | "heading-h1" | "heading-h2" | "heading-h3" | "heading-h4" | "heading-h5" | "heading-h6" | "subtitle-p1" | "subtitle-p2" | "subtitle-p3" | "body-p1" | "body-p2" | "body-p3" | "body-p4" | "body-p5";
+type TextDecoration = "none" | "underline";
+interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    /** Text 변형 */
+    variant: TextVariant;
+    /** 텍스트 장식 (underline 등) */
+    decoration?: TextDecoration;
+    /** HTML 태그 (기본값: variant에 따라 자동 결정) */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** 자식 요소 */
+    children: React.ReactNode;
+}
+/** Text 컴포넌트는 텍스트 스타일을 일관되게 적용하는 컴포넌트입니다. */
+declare const Text: ({ variant, decoration, as, children, className, ...props }: TextProps) => React.DOMElement<{
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: React.CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: React.FormEventHandler<HTMLElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollEnd?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollEndCapture?: React.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    className: string;
+}, Element>;
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    /** Checkbox 라벨 */
+    label?: React.ReactNode;
+    /** label 스타일 오버라이드 (옵션) */
+    labelProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
+        variant?: React.ComponentProps<typeof Text>["variant"];
+    };
+    /** Checkbox 설명 텍스트 */
+    description?: React.ReactNode;
+    /** Checkbox 값 (Checkbox.Group에서 사용) */
+    value?: string;
+    /** Checkbox 상태 변경 핸들러 */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Indeterminate 상태 (부분 선택 상태) */
+    indeterminate?: boolean;
+}
+/** Checkbox 컴포넌트는 사용자가 선택/해제할 수 있는 체크박스 입력 컴포넌트다. */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+interface CheckboxGroupProps {
+    /** 그룹 라벨 */
+    label?: React.ReactNode;
+    /** 그룹 라벨 스타일 오버라이드 (옵션) */
+    labelProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
+        variant?: React.ComponentProps<typeof Text>["variant"];
+    };
+    /** 그룹 설명 */
+    description?: React.ReactNode;
+    /** 그룹 설명 스타일 오버라이드 (옵션) */
+    descriptionProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
+        variant?: React.ComponentProps<typeof Text>["variant"];
+    };
+    /** 복수 선택 허용 여부. false면 단일 선택(라디오처럼 동작) */
+    multiple?: boolean;
+    /** 선택된 값들 (controlled). multiple=false일 때는 길이 0 또는 1 */
+    value?: string[];
+    /** 초기 선택된 값들 (uncontrolled) */
+    defaultValue?: string[];
+    /** 값 변경 핸들러 */
+    onChange?: (values: string[]) => void;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 자식 Checkbox 컴포넌트들 */
+    children: React.ReactNode;
+    /** 추가 CSS 클래스명 */
+    className?: string;
+}
+/** Checkbox.Group은 여러 Checkbox를 그룹화하여 관리할 수 있는 컴포넌트다. */
+declare const CheckboxGroup: {
+    ({ label, labelProps, description, descriptionProps, multiple, value: valueProp, defaultValue, onChange, disabled, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface UseCheckboxGroupOptions {
+    /** 선택 가능한 값 목록 (CheckboxGroup 자식들의 value와 일치) */
+    options: readonly string[];
+    /** 초기 선택 값 (uncontrolled일 때) */
+    defaultValue?: string[];
+    /** 선택 값 (controlled일 때). 지정하면 onChange와 함께 사용 */
+    value?: string[];
+    /** 선택 값 변경 핸들러 (controlled일 때 필수) */
+    onChange?: (values: string[]) => void;
+}
+interface UseCheckboxGroupResult {
+    /** 현재 선택된 값들. CheckboxGroup의 value에 전달 */
+    value: string[];
+    /** 선택 변경 핸들러. CheckboxGroup의 onChange에 전달 */
+    onChange: (values: string[]) => void;
+    /** '전체 선택' 체크박스에 넘길 checked */
+    selectAllChecked: boolean;
+    /** '전체 선택' 체크박스에 넘길 indeterminate (일부만 선택된 경우) */
+    selectAllIndeterminate: boolean;
+    /** '전체 선택' 체크박스에 넘길 onChange */
+    handleSelectAll: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** '전체 선택' Checkbox에 그대로 spread 가능한 props (checked, indeterminate, onChange) */
+    selectAllProps: {
+        checked: boolean;
+        indeterminate: boolean;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+}
 /**
- * Dialog를 가장 간편하게 쓰기 위한 훅
+ * CheckboxGroup + '전체 선택' 체크박스(indeterminate 포함) 상태를 관리하는 훅.
+ * options와 동기화된 value/onChange와, 전체 선택용 checked/indeterminate/onChange를 반환한다.
+ * 외부에서는 이 훅만 사용하면 된다.
+ *
+ * @example
+ * const options = ['react', 'vue', 'angular'] as const;
+ * const { value, onChange, selectAllProps } = useCheckboxGroup({ options });
+ *
+ * <Checkbox label="전체 선택" {...selectAllProps} />
+ * <CheckboxGroup value={value} onChange={onChange} ...>
+ *   {options.map(v => <Checkbox key={v} value={v} label={v} />)}
+ * </CheckboxGroup>
  */
-declare function useDialog(): {
-    openDialog: (options: DialogOpenOptions) => void;
-    closeDialog: () => void;
-    DialogContainer: () => React.ReactPortal | null;
+declare function useCheckboxGroup(config: UseCheckboxGroupOptions): UseCheckboxGroupResult;
+
+interface SelectMenuItem {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface SelectMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 메뉴 항목들 */
+    items: SelectMenuItem[];
+    /**
+     * 메뉴 사이즈
+     * - "medium": Web~Tab 권장 사이즈
+     * - "small": Mo 권장 사이즈
+     * - 지정하지 않으면 breakpoint에 따라 자동 결정됨.
+     */
+    size?: "medium" | "small";
+    /** 선택된 값 (controlled) */
+    value?: string | string[];
+    /** 초기 선택 값 (uncontrolled) */
+    defaultValue?: string | string[];
+    /** 값 변경 핸들러 */
+    onChange?: (value: string | string[] | undefined) => void;
+    /** 다중 선택 허용 여부 */
+    multiple?: boolean;
+    /** 항목 텍스트 스타일 오버라이드 (옵션) */
+    itemTextProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
+        variant?: React.ComponentProps<typeof Text>["variant"];
+    };
+    /** 선택된 항목 suffix 아이콘 (기본 체크 아이콘, 함수로 커스터마이즈 가능) */
+    suffixIcon?: React.ReactNode | ((item: SelectMenuItem) => React.ReactNode);
+}
+/** SelectMenu는 옵션 리스트를 표시하고 값을 선택하는 메뉴 컴포넌트다. */
+declare const SelectMenu: React.ForwardRefExoticComponent<SelectMenuProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectMenuOverlayProps extends Omit<SelectMenuProps, "onClose"> {
+    /** 메뉴를 열기 위한 트리거 요소 (버튼/텍스트/아이콘 등) */
+    children: React.ReactNode;
+    /** 열림 상태 (controlled) */
+    open?: boolean;
+    /** 초기 열림 상태 (uncontrolled) */
+    defaultOpen?: boolean;
+    /** 열림 상태 변경 핸들러 */
+    onOpenChange?: (open: boolean) => void;
+    /** 메뉴 컨테이너 스타일 (positioning 커스터마이즈용) */
+    menuContainerStyle?: React.CSSProperties;
+}
+/** SelectMenuOverlay는 트리거(children)를 감싸고 SelectMenu를 토글하는 래퍼 컴포넌트다. */
+declare const SelectMenuOverlay: {
+    ({ children, open: openProp, defaultOpen, onOpenChange, menuContainerStyle, ...menuProps }: SelectMenuOverlayProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type SelectHeaderType = "outlined" | "underlined";
+type SelectHeaderSize = "medium" | "small";
+interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange" | "value"> {
+    /** SelectHeader 타입 */
+    type?: SelectHeaderType;
+    /**
+     * SelectHeader 사이즈
+     * - "medium": Web~Tab 권장 사이즈
+     * - "small": Mo 권장 사이즈
+     * - 지정하지 않으면 breakpoint에 따라 자동 결정됨.
+     */
+    size?: SelectHeaderSize;
+    /** Title 텍스트 */
+    title?: string;
+    /** 필수 필드 표시 여부 */
+    required?: boolean;
+    /** 선택된 값 표시 (items 없을 때) / 선택된 값 controlled (items 있을 때) */
+    value?: string | string[] | null;
+    /** 플레이스홀더 텍스트 */
+    placeholder?: string;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 에러 상태 */
+    error?: boolean;
+    /** Help text (도움말 텍스트) */
+    description?: React.ReactNode;
+    /** Help text 아이콘 (true면 기본 아이콘, 노드면 커스텀, false면 아이콘 없음) */
+    accentIcon?: boolean | React.ReactNode;
+    /** 클릭 핸들러 */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** 값 클리어 핸들러 */
+    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** 커스텀 아이콘 */
+    icon?: React.ReactNode;
+    /** SelectMenu 항목들 (있으면 클릭 시 메뉴 열림) */
+    items?: SelectMenuItem[];
+    /** 초기 선택 값 (uncontrolled, items 있을 때) */
+    defaultValue?: string | string[];
+    /** 값 변경 핸들러 (items 있을 때) */
+    onChange?: (value: string | string[] | undefined) => void;
+    /** 다중 선택 허용 여부 (items 있을 때) */
+    multiple?: boolean;
+    /** 래퍼(Wrapper)에 적용할 클래스 이름 */
+    wrapperClassName?: string;
+    /** 래퍼(Wrapper)에 적용할 인라인 스타일 */
+    wrapperStyle?: React.CSSProperties;
+    /** 너비 설정 (예: "100%", "300px"). 설정 시 max-width 제한이 해제됨 */
+    width?: string | number;
+}
+/** SelectHeader 컴포넌트는 선택된 값을 표시하고 드롭다운을 여는 헤더 컴포넌트다. items를 주면 클릭 시 메뉴가 열린다. */
+declare const SelectHeader: React.ForwardRefExoticComponent<SelectHeaderProps & React.RefAttributes<HTMLButtonElement>>;
+
+type PaginationType = "basic" | "compact";
+interface PaginationProps {
+    /** 총 페이지 수 (1 이상) */
+    totalPages: number;
+    /** 현재 페이지 (1부터 시작) */
+    currentPage: number;
+    /** 페이지 변경 핸들러 */
+    onChange?: (page: number) => void;
+    /** Pagination 타입 (기본형 / 축약형) */
+    type?: PaginationType;
+    /** 추가 CSS 클래스명 */
+    className?: string;
+}
+/** Pagination 컴포넌트는 리스트/테이블 등에서 여러 페이지를 탐색할 때 사용하는 페이지네이션 컴포넌트다. */
+declare const Pagination: {
+    ({ totalPages, currentPage, onChange, type, className, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange"> {
+    /** 라디오 라벨 */
+    label?: React.ReactNode;
+    /** label 스타일 오버라이드 (옵션) */
+    labelProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
+        variant?: React.ComponentProps<typeof Text>["variant"];
+    };
+    /** 라디오 설명 텍스트 */
+    description?: React.ReactNode;
+    /** 라디오 값 (RadioButton.Group에서 사용) */
+    value?: string;
+    /** 라디오 상태 변경 핸들러 */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/** RadioButton은 단일 선택(라디오) 입력 컴포넌트다. */
+declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+interface RadioButtonGroupProps {
+    /** 그룹 라벨 */
+    label?: React.ReactNode;
+    /** 그룹 라벨 스타일 오버라이드 (옵션) */
+    labelProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
+        variant?: React.ComponentProps<typeof Text>["variant"];
+    };
+    /** 그룹 설명 */
+    description?: React.ReactNode;
+    /** 그룹 설명 스타일 오버라이드 (옵션) */
+    descriptionProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
+        variant?: React.ComponentProps<typeof Text>["variant"];
+    };
+    /** 선택된 값 (controlled) */
+    value?: string;
+    /** 초기 선택 값 (uncontrolled) */
+    defaultValue?: string;
+    /** 값 변경 핸들러 (선택 해제 시 value는 undefined) */
+    onChange?: (value: string | undefined) => void;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** name (미지정 시 내부 생성) */
+    name?: string;
+    /** 자식 RadioButton 컴포넌트들 */
+    children: React.ReactNode;
+    /** 추가 CSS 클래스명 */
+    className?: string;
+}
+/** RadioButton.Group은 여러 RadioButton을 그룹화하여 단일 선택을 관리한다. */
+declare const RadioButtonGroup: {
+    ({ label, labelProps, description, descriptionProps, value: valueProp, defaultValue, onChange, disabled, name, children, className, }: RadioButtonGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type BadgeVariant = "primary" | "secondary" | "progressing" | "success" | "warning" | "error" | "disabled";
+type BadgeType = "number" | "dot";
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** number: 글자(숫자/문자) 표시, dot: 점만 표시 */
+    type?: BadgeType;
+    /** Badge variant (primary, secondary, progressing, success, warning, error, disabled) */
+    variant?: BadgeVariant;
+    /** Badge 값 (type이 number일 때 표시할 숫자 또는 글자) */
+    value?: number | string;
+    /** 최대 표시 숫자 (숫자일 때 이 값을 넘으면 maxValue+ 형태로 표시) */
+    maxValue?: number;
+}
+/** Badge 컴포넌트는 알림 카운트, 상태 등을 시각적으로 표현하는 원형 라벨 컴포넌트다. */
+declare const Badge: ({ type, variant, value, maxValue, className, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+type TagType = "solid" | "outline" | "weak";
+type TagSize = "medium" | "small";
+type TagState = "enabled" | "error" | "progress" | "warning" | "success";
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** 태그 타입 (solid, outline, weak) */
+    type?: TagType;
+    /** 태그 크기 */
+    size?: TagSize;
+    /** 태그 상태 (type이 weak일 때만 사용 가능) */
+    state?: TagState;
+    /** 태그 라벨 */
+    label: React.ReactNode;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+}
+/** Tag 컴포넌트는 콘텐츠의 속성, 상태, 카테고리를 시각적으로 표현하는 읽기 전용 라벨 컴포넌트다. */
+declare const Tag: ({ type, size, state, label, prefixIcon, suffixIcon, className, ...props }: TagProps) => react_jsx_runtime.JSX.Element;
+
+type TooltipPosition = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+type TooltipType = "word" | "sentence";
+interface TooltipProps {
+    /** 툴팁에 표시할 내용 */
+    label: React.ReactNode;
+    /** 툴팁 타입 (word: 단어형, sentence: 장문형) */
+    type?: TooltipType;
+    /** Prefix 아이콘 (왼쪽) */
+    prefixIcon?: React.ReactNode;
+    /** Close 버튼 클릭 핸들러 (제공 시 닫기 버튼이 표시됨) */
+    onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** 툴팁이 표시될 방향 */
+    direction?: TooltipPosition;
+    /** 화살표 표시 여부 */
+    withArrow?: boolean;
+    /** 툴팁 열림 상태 (controlled) */
+    opened?: boolean;
+    /** 툴팁 초기 열림 상태 (uncontrolled) */
+    defaultOpened?: boolean;
+    /** 툴팁 비활성화 */
+    disabled?: boolean;
+    /** 툴팁 너비 */
+    width?: number | string;
+    /** 툴팁 오프셋 (px) */
+    offset?: number;
+    /** 포털 사용 여부 */
+    withinPortal?: boolean;
+    /** 툴팁 표시 지연 시간 (ms) */
+    openDelay?: number;
+    /** 툴팁 숨김 지연 시간 (ms) */
+    closeDelay?: number;
+    /** 툴팁이 표시될 대상 요소 */
+    children: React.ReactElement;
+    /** 추가 클래스명 */
+    className?: string;
+}
+/** Tooltip 컴포넌트는 사용자에게 추가 정보나 설명을 제공하는 작은 팝오버입니다. */
+declare const Tooltip: ({ label, type, prefixIcon, onClose, direction, withArrow, opened: openedProp, defaultOpened, disabled, width, offset, withinPortal, openDelay, closeDelay, children, className, }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+type ToastSize = "medium" | "small";
+type ToastState = "default" | "error" | "warning" | "success" | "information";
+type ToastPosition = "top" | "bottom";
+type ToastHorizontalAlign = "center" | "left" | "right";
+interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "style"> {
+    /** Toast 크기. 미지정 시 breakpoint 기준(tablet 미만: small, 이상: medium). 지정 시 해당 값으로 오버라이드 */
+    size?: ToastSize;
+    /** Toast 상태 (default, error, warning, success, information) */
+    state?: ToastState;
+    /** Toast 메시지 */
+    label: React.ReactNode;
+    /** State 아이콘 (state에 따라 자동으로 표시되지만, 커스텀 아이콘을 전달할 수 있음) */
+    icon?: React.ReactNode;
+    /** Toast 위치 (top: 상단, bottom: 하단) - 기본값: top */
+    position?: ToastPosition;
+    /** 수평 정렬 (center: 중앙, left: 왼쪽, right: 오른쪽) - 기본값: center */
+    horizontalAlign?: ToastHorizontalAlign;
+    /** 상단 여백 (px) - 기본값: medium일 때 60px, small일 때 20px */
+    topOffset?: number;
+    /** 하단 여백 (px) - 기본값: 20px */
+    bottomOffset?: number;
+    /** 좌우 여백 (px) - small 사이즈일 때만 적용, 기본값: 16px */
+    horizontalPadding?: number;
+    /** 추가 스타일 (position이 명시되면 fixed position 로직을 건너뜁니다) */
+    style?: React.CSSProperties;
+}
+/** Toast 컴포넌트는 화면에 짧은 시간 동안 나타났다가 자동으로 사라지는 경량 알림 컴포넌트다. */
+declare const Toast: (props: ToastProps) => react_jsx_runtime.JSX.Element;
+interface ToastOptions {
+    /** Toast 상태 */
+    state?: ToastState;
+    /** Toast 크기 */
+    size?: ToastSize;
+    /** 자동으로 사라지는 시간 (ms) - 기본값: 3000 */
+    duration?: number;
+    /** Toast 위치 */
+    position?: ToastPosition;
+    /** 수평 정렬 */
+    horizontalAlign?: ToastHorizontalAlign;
+    /** 상단 여백 */
+    topOffset?: number;
+    /** 하단 여백 */
+    bottomOffset?: number;
+    /** 좌우 여백 */
+    horizontalPadding?: number;
+}
+interface ToastContextType {
+    showToast: (message: string, options?: ToastOptions) => void;
+    hideToast: (id: string) => void;
+}
+/**
+ * ToastProvider
+ *
+ * 앱의 최상위(Root)에 선언하여 전역 Toast 기능을 제공합니다.
+ * Portal을 사용하여 document.body에 Toast를 렌더링합니다.
+ */
+declare const ToastProvider: ({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * useToast Hook
+ *
+ * ToastProvider 내부의 컴포넌트에서 호출하여 사용합니다.
+ * { showToast } 함수를 반환합니다.
+ *
+ * @example
+ * const { showToast } = useToast();
+ * showToast("메시지", { state: "success" });
+ */
+declare function useToast(): ToastContextType;
+
+type LogoType = "likelion-eng" | "likelion-kr" | "bootcamp" | "symbol" | "favicon" | "og-image";
+type LogoVariant = "primary" | "secondary" | "white";
+type LogoSize = "large" | "medium" | "small" | "favicon" | "og-image";
+interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 로고 타입 */
+    type?: LogoType;
+    /** 로고 색상 변형 */
+    variant?: LogoVariant;
+    /** 로고 크기 */
+    size?: LogoSize;
+    /** 서비스 타입 (og-image용) */
+    service?: "likelion" | "bootcamp";
+}
+/** Logo 컴포넌트는 브랜드 아이덴티티를 표현하는 로고 컴포넌트다. */
+declare const Logo: ({ type, variant, size, service, className, ...props }: LogoProps) => react_jsx_runtime.JSX.Element;
+
+interface BreakpointContextType {
+    isMobile?: boolean;
+    isTablet?: boolean;
+    isDesktop?: boolean;
+    isUnderTablet?: boolean;
+}
+declare const BreakpointProvider: React.Provider<BreakpointContextType | null>;
+declare function useMediaQuery(query: string): boolean;
+/**
+ * 프로젝트 브레이크포인트 전용 훅
+ */
+declare function useBreakpoint(): {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isUnderTablet: boolean;
+};
+
+declare const BREAKPOINTS: {
+    readonly mobile: {
+        readonly min: 375;
+        readonly max: 743;
+    };
+    readonly tablet: {
+        readonly min: 744;
+        readonly max: 1279;
+    };
+    readonly desktop: {
+        readonly min: 1280;
+    };
+};
+declare const TAILWIND_SCREENS: {
+    readonly mo: "375px";
+    readonly tb: "744px";
+    readonly pc: "1280px";
+};
+declare const MEDIA_QUERIES: {
+    readonly mobile: "(min-width: 375px) and (max-width: 743px)";
+    readonly tablet: "(min-width: 744px) and (max-width: 1279px)";
+    readonly desktop: "(min-width: 1280px)";
+    readonly underTablet: "(max-width: 743px)";
+};
+declare const LAYOUT_SYSTEM: {
+    readonly mobile: {
+        readonly margin: 16;
+        readonly column: 4;
+        readonly gutter: 16;
+    };
+    readonly tablet: {
+        readonly margin: 24;
+        readonly column: 8;
+        readonly gutter: 24;
+    };
+    readonly desktop: {
+        readonly margin: 24;
+        readonly column: 12;
+        readonly gutter: 24;
+    };
 };
 
-export { ActionButton, type ActionButtonProps, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOpenOptions, type DialogProps, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, Tab, TabGroup, type TabGroupProps, type TabProps, type TabSize, type TabType, useDialog };
+export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, type ConfirmOptions, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOptions, type DialogProps, DialogProvider, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoProps, type LogoSize, type LogoType, type LogoVariant, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, type SelectMenuOverlayProps, type SelectMenuProps, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextInput, type TextInputProps, type TextInputSize, type TextInputState, type TextProps, type TextVariant, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };