@likelion-design/ui 1.0.2 → 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,75 +186,120 @@ 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;
-/**
- * Dialog를 가장 간편하게 쓰기 위한 훅
- */
-declare function useDialog(): {
-    openDialog: (options: DialogOpenOptions) => void;
-    closeDialog: () => void;
-    DialogContainer: () => React.ReactPortal | 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";
+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 크기 (미지정 시 breakpoint 기준: tablet 미만 mo, 이상 pc). 지정 시 오버라이드 */
+    /**
+     * Input 크기
+     * - "pc" / "mo": 디바이스 기반 네이밍
+     * - "medium" / "small": 스토리/디자인 토큰 기반 네이밍 (pc ↔ medium, mo ↔ small)
+     * 미지정 시 breakpoint 기준: tablet 미만 mo(small), 이상 pc(medium). 지정 시 오버라이드
+     */
     size?: TextInputSize;
     /** Input 상태 (에러 상태) */
     error?: boolean;
@@ -685,6 +735,13 @@ interface SelectMenuItem {
 interface SelectMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     /** 메뉴 항목들 */
     items: SelectMenuItem[];
+    /**
+     * 메뉴 사이즈
+     * - "medium": Web~Tab 권장 사이즈
+     * - "small": Mo 권장 사이즈
+     * - 지정하지 않으면 breakpoint에 따라 자동 결정됨.
+     */
+    size?: "medium" | "small";
     /** 선택된 값 (controlled) */
     value?: string | string[];
     /** 초기 선택 값 (uncontrolled) */
@@ -721,9 +778,17 @@ declare const SelectMenuOverlay: {
 };
 
 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;
     /** 필수 필드 표시 여부 */
@@ -754,6 +819,12 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     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>>;
@@ -947,27 +1018,30 @@ interface ToastOptions {
     /** 좌우 여백 */
     horizontalPadding?: number;
 }
+interface ToastContextType {
+    showToast: (message: string, options?: ToastOptions) => void;
+    hideToast: (id: string) => void;
+}
 /**
- * Toast를 사용하기 위한 커스텀 훅
+ * ToastProvider
  *
- * @returns {Object} Toast 관련 상태와 핸들러
- * @returns {function} showToast - Toast를 표시하는 함수
- * @returns {function} hideToast - Toast를 숨기는 함수
- * @returns {React.ReactNode} ToastContainer - Toast 컴포넌트들을 렌더링하는 컨테이너
+ * 앱의 최상위(Root)에 선언하여 전역 Toast 기능을 제공합니다.
+ * Portal을 사용하여 document.body에 Toast를 렌더링합니다.
+ */
+declare const ToastProvider: ({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * useToast Hook
  *
- * @example
- * const { showToast, ToastContainer } = useToast();
+ * ToastProvider 내부의 컴포넌트에서 호출하여 사용합니다.
+ * { showToast } 함수를 반환합니다.
  *
- * <button onClick={() => showToast("성공했습니다!", { state: "success" })}>
- *   Show Toast
- * </button>
- * {ToastContainer}
+ * @example
+ * const { showToast } = useToast();
+ * showToast("메시지", { state: "success" });
  */
-declare function useToast(): {
-    showToast: (message: string, options?: ToastOptions) => void;
-    hideToast: (id: string) => void;
-    ToastContainer: react_jsx_runtime.JSX.Element | null;
-};
+declare function useToast(): ToastContextType;
 
 type LogoType = "likelion-eng" | "likelion-kr" | "bootcamp" | "symbol" | "favicon" | "og-image";
 type LogoVariant = "primary" | "secondary" | "white";
@@ -1045,4 +1119,4 @@ declare const LAYOUT_SYSTEM: {
     };
 };
 
-export { ActionButton, type ActionButtonProps, 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, 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, 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, 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 };
+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 };

package/dist/index.d.ts

@@ -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,75 +186,120 @@ 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;
-/**
- * Dialog를 가장 간편하게 쓰기 위한 훅
- */
-declare function useDialog(): {
-    openDialog: (options: DialogOpenOptions) => void;
-    closeDialog: () => void;
-    DialogContainer: () => React.ReactPortal | 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";
+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 크기 (미지정 시 breakpoint 기준: tablet 미만 mo, 이상 pc). 지정 시 오버라이드 */
+    /**
+     * Input 크기
+     * - "pc" / "mo": 디바이스 기반 네이밍
+     * - "medium" / "small": 스토리/디자인 토큰 기반 네이밍 (pc ↔ medium, mo ↔ small)
+     * 미지정 시 breakpoint 기준: tablet 미만 mo(small), 이상 pc(medium). 지정 시 오버라이드
+     */
     size?: TextInputSize;
     /** Input 상태 (에러 상태) */
     error?: boolean;
@@ -685,6 +735,13 @@ interface SelectMenuItem {
 interface SelectMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     /** 메뉴 항목들 */
     items: SelectMenuItem[];
+    /**
+     * 메뉴 사이즈
+     * - "medium": Web~Tab 권장 사이즈
+     * - "small": Mo 권장 사이즈
+     * - 지정하지 않으면 breakpoint에 따라 자동 결정됨.
+     */
+    size?: "medium" | "small";
     /** 선택된 값 (controlled) */
     value?: string | string[];
     /** 초기 선택 값 (uncontrolled) */
@@ -721,9 +778,17 @@ declare const SelectMenuOverlay: {
 };
 
 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;
     /** 필수 필드 표시 여부 */
@@ -754,6 +819,12 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     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>>;
@@ -947,27 +1018,30 @@ interface ToastOptions {
     /** 좌우 여백 */
     horizontalPadding?: number;
 }
+interface ToastContextType {
+    showToast: (message: string, options?: ToastOptions) => void;
+    hideToast: (id: string) => void;
+}
 /**
- * Toast를 사용하기 위한 커스텀 훅
+ * ToastProvider
  *
- * @returns {Object} Toast 관련 상태와 핸들러
- * @returns {function} showToast - Toast를 표시하는 함수
- * @returns {function} hideToast - Toast를 숨기는 함수
- * @returns {React.ReactNode} ToastContainer - Toast 컴포넌트들을 렌더링하는 컨테이너
+ * 앱의 최상위(Root)에 선언하여 전역 Toast 기능을 제공합니다.
+ * Portal을 사용하여 document.body에 Toast를 렌더링합니다.
+ */
+declare const ToastProvider: ({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * useToast Hook
  *
- * @example
- * const { showToast, ToastContainer } = useToast();
+ * ToastProvider 내부의 컴포넌트에서 호출하여 사용합니다.
+ * { showToast } 함수를 반환합니다.
  *
- * <button onClick={() => showToast("성공했습니다!", { state: "success" })}>
- *   Show Toast
- * </button>
- * {ToastContainer}
+ * @example
+ * const { showToast } = useToast();
+ * showToast("메시지", { state: "success" });
  */
-declare function useToast(): {
-    showToast: (message: string, options?: ToastOptions) => void;
-    hideToast: (id: string) => void;
-    ToastContainer: react_jsx_runtime.JSX.Element | null;
-};
+declare function useToast(): ToastContextType;
 
 type LogoType = "likelion-eng" | "likelion-kr" | "bootcamp" | "symbol" | "favicon" | "og-image";
 type LogoVariant = "primary" | "secondary" | "white";
@@ -1045,4 +1119,4 @@ declare const LAYOUT_SYSTEM: {
     };
 };
 
-export { ActionButton, type ActionButtonProps, 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, 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, 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, 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 };
+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 };