@likelion-design/ui 1.0.4 → 1.0.7

package/dist/index.d.mts

@@ -10,8 +10,10 @@ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     size?: ButtonSize;
     /** 버튼 색상 (primary, neutral, secondary) */
     color?: ButtonColor;
-    /** 버튼 타입 (solid, outline, ghost, weak) */
+    /** 버튼 스타일 타입 (solid, outline, ghost, weak) */
     type?: ButtonType;
+    /** HTML 버튼 타입 (button, submit, reset) */
+    htmlType?: "button" | "submit" | "reset";
     /** 버튼 상태 */
     state?: ButtonState;
     /** 버튼 텍스트 */
@@ -24,7 +26,7 @@ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     loading?: boolean;
 }
 /** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
-declare const ActionButton: ({ size, color, type, state, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ActionButton: ({ size, color, type, htmlType, state, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
 type IconButtonSize = "xlarge" | "large" | "medium" | "small";
 /** 버튼 색상. solid/outline: primary | neutral | secondary. weak: primary | neutral-dark | neutral-light */
@@ -136,10 +138,17 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     selectedValues?: string[];
     /** Chip 라벨 */
     label: React.ReactNode;
-    /** Prefix 아이콘 */
+    /** Prefix 아이콘 (항상 표시) */
     prefixIcon?: React.ReactNode;
     /** Suffix 아이콘 */
     suffixIcon?: React.ReactNode;
+    /**
+     * Checked 상태일 때 체크 아이콘 표시 여부
+     * - 기본값: undefined (outline 타입이고 prefixIcon이 없을 때만 자동 표시)
+     * - true: 항상 표시 (checked 상태일 때)
+     * - false: 표시 안 함
+     */
+    showCheck?: boolean;
     /** Close 버튼 표시 여부 */
     showClose?: boolean;
     /** Close 버튼 클릭 핸들러 */
@@ -160,6 +169,8 @@ interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onC
     size?: ChipSize;
     /** Chip variant */
     variant?: ChipVariant;
+    /** 체크 아이콘 표시 여부 (자식 Chip에 일괄 적용) */
+    showCheck?: boolean;
     /** 전체 비활성화 */
     disabled?: boolean;
     /** 자식 Chip 컴포넌트들 */
@@ -167,15 +178,15 @@ interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onC
 }
 /** Chip.Group은 여러 Chip을 그룹화하여 단일/다중 선택을 관리한다. */
 declare const ChipGroup: {
-    ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
+    ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, 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;
+    ({ type, size, variant, value, onChange, checked: checkedProp, defaultChecked, selectedValue, selectedValues, label, prefixIcon, suffixIcon, showCheck, 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;
+        ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };
@@ -246,7 +257,7 @@ interface DialogButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     /** 클릭 시 다이얼로그 닫기 여부 (기본값: false - 명시적으로 닫아야 함) */
     closeOnClick?: boolean;
 }
-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) & {
+declare const Dialog: (({ open, onClose, closeOnOverlayClick, closeOnEsc, variant, align, title, description, icon, actionItems, footerLayout, content, className, children, ...props }: DialogProps) => React.ReactPortal | 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;
@@ -317,7 +328,7 @@ interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     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;
+declare const TextInput: ({ required, size, error, description, maxLength, prefixIcon, suffixIcon, suffixUnit, title, accentIcon, className, id, value, defaultValue, readOnly, onChange, onFocus, onBlur, ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
 
 type ToggleSize = "medium" | "small";
 type ToggleLabelPosition = "start" | "end";
@@ -819,16 +830,81 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     onChange?: (value: string | string[] | undefined) => void;
     /** 다중 선택 허용 여부 (items 있을 때) */
     multiple?: boolean;
+    /** 클리어 버튼 표시 여부 (미지정 시 hasValue && !disabled && (onChange|onClear) 기준 자동) */
+    showClear?: boolean;
     /** 래퍼(Wrapper)에 적용할 클래스 이름 */
     wrapperClassName?: string;
     /** 래퍼(Wrapper)에 적용할 인라인 스타일 */
     wrapperStyle?: React.CSSProperties;
     /** 너비 설정 (예: "100%", "300px"). 설정 시 max-width 제한이 해제됨 */
     width?: string | number;
+    /** SelectMenu에 전달: 항목 텍스트 스타일 오버라이드 */
+    menuItemTextProps?: SelectMenuProps["itemTextProps"];
+    /** SelectMenu에 전달: 선택된 항목 suffix 아이콘 */
+    menuSuffixIcon?: SelectMenuProps["suffixIcon"];
+    /** 헤더와 메뉴 사이 간격 (px, 기본 8) */
+    menuGap?: number;
+    /** SelectMenu에 전달: className */
+    menuClassName?: string;
+    /** SelectMenu에 전달: style */
+    menuStyle?: React.CSSProperties;
 }
 /** SelectHeader 컴포넌트는 선택된 값을 표시하고 드롭다운을 여는 헤더 컴포넌트다. items를 주면 클릭 시 메뉴가 열린다. */
 declare const SelectHeader: React.ForwardRefExoticComponent<SelectHeaderProps & React.RefAttributes<HTMLButtonElement>>;
 
+type SelectBoxType = "default" | "label" | "placeholder";
+type SelectBoxSize = "small" | "medium" | "large" | "full";
+type SelectBoxState = "default" | "active" | "disabled" | "error" | "success" | "loading";
+/** root/header/menu별 className 또는 전체 적용 */
+type SelectBoxClassName = string | {
+    root?: string;
+    header?: string;
+    menu?: string;
+};
+/** root/header/menu별 style 또는 전체 적용 */
+type SelectBoxStyle = React.CSSProperties | {
+    root?: React.CSSProperties;
+    header?: React.CSSProperties;
+    menu?: React.CSSProperties;
+};
+/** SelectBox 전용 props (label는 SelectHeader title에 매핑) */
+type SelectBoxSpecificProps = {
+    /** SelectBox 타입 (Default: 라벨 없음, Label: 라벨 있음, Placeholder: 라벨+플레이스홀더) */
+    type?: SelectBoxType;
+    /** SelectBox 사이즈 */
+    size?: SelectBoxSize;
+    /** SelectBox 상태 */
+    state?: SelectBoxState;
+    /** 라벨 텍스트 (SelectHeader title에 매핑) */
+    label?: string;
+    /** Helper text (에러/성공 시 표시) */
+    helperText?: string;
+    /**
+     * className: 문자열이면 root에 적용, 객체면 root/header/menu 각각 적용
+     * @example className="w-12"
+     * @example className={{ root: "w-12", header: "border-red-500", menu: "border-red-500" }}
+     */
+    className?: SelectBoxClassName;
+    /**
+     * style: 객체면 root/header/menu 각각 적용
+     * @example style={{ root: { width: 48 }, header: { borderColor: "red" }, menu: { borderColor: "red" } }}
+     */
+    style?: SelectBoxStyle;
+};
+/** SelectHeader에서 SelectBox가 오버라이드하는 props 제외 */
+type SelectHeaderPassThrough = Omit<SelectHeaderProps, "type" | "size" | "title" | "disabled" | "error" | "description" | "accentIcon" | "icon" | "wrapperClassName" | "menuClassName" | "menuStyle" | "style" | "className"> & {
+    /** SelectHeader 타입 (outlined | underlined) */
+    headerType?: SelectHeaderType;
+};
+/** SelectMenu props (SelectHeader menuItemTextProps, menuSuffixIcon로 전달) */
+type SelectMenuPassThrough = Pick<SelectMenuProps, "itemTextProps" | "suffixIcon">;
+type SelectBoxProps = SelectBoxSpecificProps & SelectHeaderPassThrough & SelectMenuPassThrough;
+/** SelectBox는 SelectHeader와 SelectMenu를 하나로 통합한 컴포넌트로, 미리 정의된 목록에서 항목을 선택하도록 돕습니다. */
+declare const SelectBox: {
+    ({ type, size, state, label, required, placeholder, items, value, defaultValue, onChange, multiple, helperText, className, style, width, headerType, onClear, showClear, wrapperStyle, onClick, id, itemTextProps, suffixIcon, ...restHeaderProps }: SelectBoxProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type PaginationType = "basic" | "compact";
 interface PaginationProps {
     /** 총 페이지 수 (1 이상) */
@@ -1044,20 +1120,20 @@ declare const ToastProvider: ({ children }: {
 declare function useToast(): ToastContextType;
 
 type LogoType = "likelion-eng" | "likelion-kr" | "bootcamp" | "symbol" | "favicon" | "og-image";
-type LogoVariant = "primary" | "secondary" | "white";
+type LogoColor = "primary" | "black" | "white";
 type LogoSize = "large" | "medium" | "small" | "favicon" | "og-image";
 interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 로고 타입 */
     type?: LogoType;
-    /** 로고 색상 변형 */
-    variant?: LogoVariant;
+    /** 로고 색상 */
+    color?: LogoColor;
     /** 로고 크기 */
     size?: LogoSize;
     /** 서비스 타입 (og-image용) */
     service?: "likelion" | "bootcamp";
 }
 /** Logo 컴포넌트는 브랜드 아이덴티티를 표현하는 로고 컴포넌트다. */
-declare const Logo: ({ type, variant, size, service, className, ...props }: LogoProps) => react_jsx_runtime.JSX.Element;
+declare const Logo: ({ type, color, size, service, className, ...props }: LogoProps) => react_jsx_runtime.JSX.Element;
 
 interface BreakpointContextType {
     isMobile?: boolean;
@@ -1119,4 +1195,4 @@ declare const LAYOUT_SYSTEM: {
     };
 };
 
-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 };
+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 LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectBox, type SelectBoxClassName, type SelectBoxProps, type SelectBoxSize, type SelectBoxState, type SelectBoxStyle, type SelectBoxType, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, 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

@@ -10,8 +10,10 @@ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     size?: ButtonSize;
     /** 버튼 색상 (primary, neutral, secondary) */
     color?: ButtonColor;
-    /** 버튼 타입 (solid, outline, ghost, weak) */
+    /** 버튼 스타일 타입 (solid, outline, ghost, weak) */
     type?: ButtonType;
+    /** HTML 버튼 타입 (button, submit, reset) */
+    htmlType?: "button" | "submit" | "reset";
     /** 버튼 상태 */
     state?: ButtonState;
     /** 버튼 텍스트 */
@@ -24,7 +26,7 @@ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     loading?: boolean;
 }
 /** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
-declare const ActionButton: ({ size, color, type, state, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ActionButton: ({ size, color, type, htmlType, state, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
 type IconButtonSize = "xlarge" | "large" | "medium" | "small";
 /** 버튼 색상. solid/outline: primary | neutral | secondary. weak: primary | neutral-dark | neutral-light */
@@ -136,10 +138,17 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     selectedValues?: string[];
     /** Chip 라벨 */
     label: React.ReactNode;
-    /** Prefix 아이콘 */
+    /** Prefix 아이콘 (항상 표시) */
     prefixIcon?: React.ReactNode;
     /** Suffix 아이콘 */
     suffixIcon?: React.ReactNode;
+    /**
+     * Checked 상태일 때 체크 아이콘 표시 여부
+     * - 기본값: undefined (outline 타입이고 prefixIcon이 없을 때만 자동 표시)
+     * - true: 항상 표시 (checked 상태일 때)
+     * - false: 표시 안 함
+     */
+    showCheck?: boolean;
     /** Close 버튼 표시 여부 */
     showClose?: boolean;
     /** Close 버튼 클릭 핸들러 */
@@ -160,6 +169,8 @@ interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onC
     size?: ChipSize;
     /** Chip variant */
     variant?: ChipVariant;
+    /** 체크 아이콘 표시 여부 (자식 Chip에 일괄 적용) */
+    showCheck?: boolean;
     /** 전체 비활성화 */
     disabled?: boolean;
     /** 자식 Chip 컴포넌트들 */
@@ -167,15 +178,15 @@ interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onC
 }
 /** Chip.Group은 여러 Chip을 그룹화하여 단일/다중 선택을 관리한다. */
 declare const ChipGroup: {
-    ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
+    ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, 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;
+    ({ type, size, variant, value, onChange, checked: checkedProp, defaultChecked, selectedValue, selectedValues, label, prefixIcon, suffixIcon, showCheck, 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;
+        ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };
@@ -246,7 +257,7 @@ interface DialogButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     /** 클릭 시 다이얼로그 닫기 여부 (기본값: false - 명시적으로 닫아야 함) */
     closeOnClick?: boolean;
 }
-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) & {
+declare const Dialog: (({ open, onClose, closeOnOverlayClick, closeOnEsc, variant, align, title, description, icon, actionItems, footerLayout, content, className, children, ...props }: DialogProps) => React.ReactPortal | 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;
@@ -317,7 +328,7 @@ interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     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;
+declare const TextInput: ({ required, size, error, description, maxLength, prefixIcon, suffixIcon, suffixUnit, title, accentIcon, className, id, value, defaultValue, readOnly, onChange, onFocus, onBlur, ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
 
 type ToggleSize = "medium" | "small";
 type ToggleLabelPosition = "start" | "end";
@@ -819,16 +830,81 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     onChange?: (value: string | string[] | undefined) => void;
     /** 다중 선택 허용 여부 (items 있을 때) */
     multiple?: boolean;
+    /** 클리어 버튼 표시 여부 (미지정 시 hasValue && !disabled && (onChange|onClear) 기준 자동) */
+    showClear?: boolean;
     /** 래퍼(Wrapper)에 적용할 클래스 이름 */
     wrapperClassName?: string;
     /** 래퍼(Wrapper)에 적용할 인라인 스타일 */
     wrapperStyle?: React.CSSProperties;
     /** 너비 설정 (예: "100%", "300px"). 설정 시 max-width 제한이 해제됨 */
     width?: string | number;
+    /** SelectMenu에 전달: 항목 텍스트 스타일 오버라이드 */
+    menuItemTextProps?: SelectMenuProps["itemTextProps"];
+    /** SelectMenu에 전달: 선택된 항목 suffix 아이콘 */
+    menuSuffixIcon?: SelectMenuProps["suffixIcon"];
+    /** 헤더와 메뉴 사이 간격 (px, 기본 8) */
+    menuGap?: number;
+    /** SelectMenu에 전달: className */
+    menuClassName?: string;
+    /** SelectMenu에 전달: style */
+    menuStyle?: React.CSSProperties;
 }
 /** SelectHeader 컴포넌트는 선택된 값을 표시하고 드롭다운을 여는 헤더 컴포넌트다. items를 주면 클릭 시 메뉴가 열린다. */
 declare const SelectHeader: React.ForwardRefExoticComponent<SelectHeaderProps & React.RefAttributes<HTMLButtonElement>>;
 
+type SelectBoxType = "default" | "label" | "placeholder";
+type SelectBoxSize = "small" | "medium" | "large" | "full";
+type SelectBoxState = "default" | "active" | "disabled" | "error" | "success" | "loading";
+/** root/header/menu별 className 또는 전체 적용 */
+type SelectBoxClassName = string | {
+    root?: string;
+    header?: string;
+    menu?: string;
+};
+/** root/header/menu별 style 또는 전체 적용 */
+type SelectBoxStyle = React.CSSProperties | {
+    root?: React.CSSProperties;
+    header?: React.CSSProperties;
+    menu?: React.CSSProperties;
+};
+/** SelectBox 전용 props (label는 SelectHeader title에 매핑) */
+type SelectBoxSpecificProps = {
+    /** SelectBox 타입 (Default: 라벨 없음, Label: 라벨 있음, Placeholder: 라벨+플레이스홀더) */
+    type?: SelectBoxType;
+    /** SelectBox 사이즈 */
+    size?: SelectBoxSize;
+    /** SelectBox 상태 */
+    state?: SelectBoxState;
+    /** 라벨 텍스트 (SelectHeader title에 매핑) */
+    label?: string;
+    /** Helper text (에러/성공 시 표시) */
+    helperText?: string;
+    /**
+     * className: 문자열이면 root에 적용, 객체면 root/header/menu 각각 적용
+     * @example className="w-12"
+     * @example className={{ root: "w-12", header: "border-red-500", menu: "border-red-500" }}
+     */
+    className?: SelectBoxClassName;
+    /**
+     * style: 객체면 root/header/menu 각각 적용
+     * @example style={{ root: { width: 48 }, header: { borderColor: "red" }, menu: { borderColor: "red" } }}
+     */
+    style?: SelectBoxStyle;
+};
+/** SelectHeader에서 SelectBox가 오버라이드하는 props 제외 */
+type SelectHeaderPassThrough = Omit<SelectHeaderProps, "type" | "size" | "title" | "disabled" | "error" | "description" | "accentIcon" | "icon" | "wrapperClassName" | "menuClassName" | "menuStyle" | "style" | "className"> & {
+    /** SelectHeader 타입 (outlined | underlined) */
+    headerType?: SelectHeaderType;
+};
+/** SelectMenu props (SelectHeader menuItemTextProps, menuSuffixIcon로 전달) */
+type SelectMenuPassThrough = Pick<SelectMenuProps, "itemTextProps" | "suffixIcon">;
+type SelectBoxProps = SelectBoxSpecificProps & SelectHeaderPassThrough & SelectMenuPassThrough;
+/** SelectBox는 SelectHeader와 SelectMenu를 하나로 통합한 컴포넌트로, 미리 정의된 목록에서 항목을 선택하도록 돕습니다. */
+declare const SelectBox: {
+    ({ type, size, state, label, required, placeholder, items, value, defaultValue, onChange, multiple, helperText, className, style, width, headerType, onClear, showClear, wrapperStyle, onClick, id, itemTextProps, suffixIcon, ...restHeaderProps }: SelectBoxProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type PaginationType = "basic" | "compact";
 interface PaginationProps {
     /** 총 페이지 수 (1 이상) */
@@ -1044,20 +1120,20 @@ declare const ToastProvider: ({ children }: {
 declare function useToast(): ToastContextType;
 
 type LogoType = "likelion-eng" | "likelion-kr" | "bootcamp" | "symbol" | "favicon" | "og-image";
-type LogoVariant = "primary" | "secondary" | "white";
+type LogoColor = "primary" | "black" | "white";
 type LogoSize = "large" | "medium" | "small" | "favicon" | "og-image";
 interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 로고 타입 */
     type?: LogoType;
-    /** 로고 색상 변형 */
-    variant?: LogoVariant;
+    /** 로고 색상 */
+    color?: LogoColor;
     /** 로고 크기 */
     size?: LogoSize;
     /** 서비스 타입 (og-image용) */
     service?: "likelion" | "bootcamp";
 }
 /** Logo 컴포넌트는 브랜드 아이덴티티를 표현하는 로고 컴포넌트다. */
-declare const Logo: ({ type, variant, size, service, className, ...props }: LogoProps) => react_jsx_runtime.JSX.Element;
+declare const Logo: ({ type, color, size, service, className, ...props }: LogoProps) => react_jsx_runtime.JSX.Element;
 
 interface BreakpointContextType {
     isMobile?: boolean;
@@ -1119,4 +1195,4 @@ declare const LAYOUT_SYSTEM: {
     };
 };
 
-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 };
+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 LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectBox, type SelectBoxClassName, type SelectBoxProps, type SelectBoxSize, type SelectBoxState, type SelectBoxStyle, type SelectBoxType, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, 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 };