maru_design2 3.0.2 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [3.1.0](https://github.com/42maru-ai/maru-design2/compare/v3.0.2...v3.1.0) (2026-09-09)
+
+
+### Features
+
+* add single-date calendar mode ([a996bd1](https://github.com/42maru-ai/maru-design2/commit/a996bd1f9e63d6e57d0f5ed343790a57c1bd39b7))
+
+
+### Bug Fixes
+
+* :sparkles: Design System - UPDATE Figma 토큰과 컴포넌트 및 사용 가이드 ([acf9bf6](https://github.com/42maru-ai/maru-design2/commit/acf9bf6b47f43beca3bc6ddb4141347ee0f896a2))
+* update component variants and harden calendar interactions ([c87cee0](https://github.com/42maru-ai/maru-design2/commit/c87cee0603d738a57e75e5f4666638d4c2518cbc))
+
 ## [3.0.2](https://github.com/42maru-ai/maru-design2/compare/v3.0.1...v3.0.2) (2026-07-27)
 
 

package/dist/components/atoms/button/Button.d.ts

@@ -17,6 +17,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * 사이즈 (@v1 kind)
      * Figma `xxs`/`xs`/`sm`/`md`/`lg` ↔ `xxs`/`xs`/`small`/`normal`/`large`
      * `xs`/`xxs`는 주로 icon-only용
+     * `comfortable-small`/`comfortable-normal`/`comfortable-large`는 같은 높이에 좌우 패딩 16px.
+     * 라벨이 있는 default/default-light/outline/text/round에 적용하며, 나머지는 대응 기본 크기를 사용합니다.
      */
     size?: TButtonSize;
     /**

package/dist/components/atoms/checkbox/Checkbox.d.ts

@@ -5,7 +5,10 @@ import { TCheckboxSize } from '../../../enums/size';
 import './checkbox.scss';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'type'> {
     checked?: boolean;
+    /** 부분 선택 상태. 네이티브 input의 indeterminate에도 반영합니다. */
+    indeterminate?: boolean;
     label?: string;
+    labelPosition?: 'left' | 'right';
     /**
      * (@v1 variant)
      */
@@ -15,7 +18,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     gap?: TGap;
     /**
-     * [16, 18, 24]
+     * Figma sm: 16, md: 20. 기존 18, 24도 지원합니다.
      */
     size?: TCheckboxSize;
 }

package/dist/components/atoms/input/Input.d.ts

@@ -26,6 +26,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * 초기화 버튼 숨기기
      */
     hiddenClearButton?: boolean;
+    /** 초기화 버튼의 번역된 접근성 이름 */
+    clearAriaLabel?: string;
     /**
      * input을 감싸고 있는 div의 ref, input은 일반 ref 사용
      */

package/dist/components/molecules/buttonGroup/ButtonGroup.d.ts

@@ -37,14 +37,14 @@ export interface ButtonGroupProps<T extends string> {
     buttons: ButtonGroupButton<T>[];
     /**
      * 스타일 타입
-     * - segmented: 버튼들을 간격을 두고 묶여있는 형태 (기본값).
-     * - segmented-secondary: segmented와 동일한 래퍼,
+     * - segmented: 간격 없이 연결된 아웃라인 버튼, 선택 시 브랜드 배경 (기본값).
+     * - segmented-secondary: 회색 래퍼 안에 간격을 두고 배치,
      *    선택된 버튼이 흰색 배경 + primary색 텍스트 컬러.
      * - icon: 아웃라인 버튼 안에 간격없이 붙어있는 형태.
      */
     variant?: 'segmented' | 'segmented-secondary' | 'icon';
     /**
-     * 사이즈
+     * 사이즈. segmented 기준 sm: 36px (Figma 기본), md: 40px.
      */
     size?: 'sm' | 'md';
     /**

package/dist/components/molecules/calendar/Calendar.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
 import './calendar.scss';
+export type CalendarMode = 'range' | 'single';
+export interface CalendarTimeValue {
+    /** 시간 설정이 켜져 있으면 HH:mm, 꺼져 있으면 undefined */
+    startTime?: string;
+    /** 기간 선택의 종료 시간 (HH:mm) */
+    endTime?: string;
+}
 export interface CalendarProps {
     /**
      * Maru Datepicker를 띄울 대상이 되는 컴포넌트. setOpen을 변수로 전달해서 외부에서 datepicker를 띄울 수 있도록 설정
@@ -15,13 +22,44 @@ export interface CalendarProps {
      * @example minStartDate를 오늘 날짜로 지정하면 시작일 지정은 오늘 날짜부터 가능
      */
     minStartDate?: Date | null;
+    /**
+     * 날짜 선택 방식
+     * @default 'range'
+     */
+    mode?: CalendarMode;
+    /** 선택 가능한 마지막 날짜. 날짜 단위로 제한합니다. */
+    maxDate?: Date | null;
+    /** 동시에 표시할 월 수. 기본값 1 */
+    monthsToShow?: 1 | 2;
+    /** 연·월 선택 드롭다운 표시. 기본값 false */
+    showMonthYearDropdown?: boolean;
+    /** 시간 설정 토글과 시간 선택 표시. 기본값 false */
+    showTime?: boolean;
+    /** 시간 선택을 필수로 설정합니다. true이면 showTime과 무관하게 시간 UI를 표시하고 끌 수 없게 합니다. 기본값 false */
+    timeRequired?: boolean;
+    /** 확인 시 실행하는 동기 검증. 오류 문구를 반환하면 표시하고 저장을 막으며, undefined 또는 빈 문자열이면 허용합니다. */
+    validate?: (startDate?: string, endDate?: string, time?: CalendarTimeValue) => string | undefined;
+    /** 오늘·최근 7/30/90일·이전 3개 연도 프리셋 표시. range에서만 적용됩니다. */
+    showPresets?: boolean;
+    /** 하단 날짜 직접 입력 표시. 기본값 true */
+    showDateInputs?: boolean;
+    /** 취소 버튼 표시. 기본값 false */
+    showCancelButton?: boolean;
+    /** 취소 버튼 문구. 기본값 취소 */
+    cancelButtonContent?: string;
+    /** 열 때 선택할 시작 날짜. 저장한 값을 넘기면 다시 열 때 복원됩니다. */
+    startDate?: Date | null;
+    /** 열 때 선택할 종료 날짜. single에서는 무시합니다. */
+    endDate?: Date | null;
+    /** 열 때 복원할 시간. showTime과 함께 사용합니다. */
+    timeValue?: CalendarTimeValue;
     saveButtonContent: string;
     /**
      * 캘린더 하단 버튼을 누르면 동작할 함수, 선택한 startDate와 endDate를 전달
      * @param startDate 시작일
      * @param endDate 마지막일
      */
-    onSaveClick: (startDate?: string, endDate?: string) => void;
+    onSaveClick: (startDate?: string, endDate?: string, time?: CalendarTimeValue) => void;
     className?: string;
 }
-export declare function Calendar({ children, minStartDate, saveButtonContent, onSaveClick, className, }: CalendarProps): React.JSX.Element;
+export declare function Calendar({ children, minStartDate, mode, saveButtonContent, onSaveClick, className, ...options }: CalendarProps): React.JSX.Element;

package/dist/components/molecules/calendar/DatePickerHeader.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
-declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }: ReactDatePickerCustomHeaderProps): React.JSX.Element;
+interface Props extends ReactDatePickerCustomHeaderProps {
+    monthsToShow?: 1 | 2;
+    showMonthYearDropdown?: boolean;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    onNavigate?: (date: Date) => void;
+}
+declare function DatePickerHeader({ monthDate, customHeaderCount, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, monthsToShow, showMonthYearDropdown, minDate, maxDate, onNavigate, }: Props): React.JSX.Element;
 export default DatePickerHeader;

package/dist/components/molecules/calendar/DatePickerWrapper.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
+import type { CalendarProps } from './Calendar';
 import 'react-datepicker/dist/react-datepicker.css';
-interface Props {
-    minStartDate?: Date | null;
-    saveButtonContent?: string;
-    onSaveClick: (startDate?: string, endDate?: string) => void;
+type Props = Omit<CalendarProps, 'children' | 'className'> & {
     setOpen: (open: boolean) => void;
-}
-declare function DatePickerWrapper({ minStartDate, saveButtonContent, onSaveClick, setOpen, }: Props): React.JSX.Element;
+};
+declare function DatePickerWrapper({ minStartDate, maxDate, mode, monthsToShow, showMonthYearDropdown, showTime, timeRequired, validate, showPresets, showDateInputs, showCancelButton, cancelButtonContent, startDate: initialStart, endDate: initialEnd, timeValue, saveButtonContent, onSaveClick, setOpen, }: Props): React.JSX.Element;
 export default DatePickerWrapper;

package/dist/components/molecules/calendar/calendar-utils.d.ts

@@ -0,0 +1,11 @@
+export declare const DATE_FORMAT = "yyyy-MM-dd";
+export declare const formatDate: (date: Date | null) => string;
+export declare function validDay(date?: Date | null): Date | null;
+export declare function clampDate(date: Date, min: Date | null, max: Date | null): Date;
+export declare function parseDate(text: string, min: Date | null, max: Date | null): Date | null;
+export declare const validTime: (time?: string) => boolean;
+export declare function calendarPresets(today: Date): {
+    label: string;
+    start: Date;
+    end: Date;
+}[];

package/dist/components/molecules/dropdown/Dropdown.d.ts

@@ -1,9 +1,28 @@
 import React from 'react';
+import { DropdownItemOptions, DropdownVariant } from './types';
 import { TColor } from '../../../enums/color';
 import { TDropdownType } from '../../../enums/type';
 import { IconProps } from '../../atoms/icon';
 import './dropdown.scss';
-interface DropdownProps<T extends Record<string, any>> {
+export interface DropdownProps<T extends Record<string, any>> {
+    /** Visual variant; independent of the existing search type. */
+    variant?: DropdownVariant;
+    startIcon?: IconProps;
+    customStartIcon?: React.ReactNode;
+    badge?: React.ReactNode;
+    helperText?: React.ReactNode;
+    actionContent?: React.ReactNode;
+    onAction?: () => void;
+    actionDisabled?: boolean;
+    actionAriaLabel?: string;
+    clearAriaLabel?: string;
+    searchAriaLabel?: string;
+    searchClearAriaLabel?: string;
+    getItemProps?: (item: T) => DropdownItemOptions;
+    /** Menu width, independent of the complete control width. */
+    menuWidth?: number;
+    /** Accessible name when no visible label is supplied. */
+    'aria-label'?: string;
     data: T[];
     /**
      * 선택된 아이디
@@ -82,6 +101,8 @@ interface DropdownProps<T extends Record<string, any>> {
      * 컴포넌트 위치의 기준이 될 엘리먼트 사용자 정의. (@v1 portalAnchor)
      */
     anchorEl?: HTMLElement | null;
+    /** 메뉴를 StyleProvider 루트로 분리합니다. 변형·스크롤이 있는 팝업 내부에서 사용합니다. 기본값 false */
+    portal?: boolean;
     /**
      * 메뉴 맨 밑에 버튼
      */
@@ -91,5 +112,4 @@ interface DropdownProps<T extends Record<string, any>> {
         onClick: () => void;
     };
 }
-export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, label, onClear, noDataMessage, noResultMessage, width, height, gap, customButton, customMenuItem, anchorEl, menuBottomButton, }: DropdownProps<T>): React.JSX.Element;
-export {};
+export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, variant, startIcon, customStartIcon, badge, helperText, actionContent, onAction, actionDisabled, actionAriaLabel, clearAriaLabel, searchAriaLabel, searchClearAriaLabel, getItemProps, menuWidth, 'aria-label': ariaLabel, errorMessage, label, onClear, noDataMessage, noResultMessage, width, height, gap, customButton, customMenuItem, anchorEl, portal, menuBottomButton, }: DropdownProps<T>): React.JSX.Element;

package/dist/components/molecules/dropdown/OverflowText.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function useOverflow(ref: React.RefObject<HTMLElement>, content: React.ReactNode): boolean;
+export default function OverflowText({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/molecules/dropdown/index.d.ts

@@ -1 +1,2 @@
 export * from './Dropdown';
+export type { DropdownVariant, DropdownItemVariant, DropdownItemOptions, } from './types';

package/dist/components/molecules/dropdown/menu/MenuItem.d.ts

@@ -1,16 +1,14 @@
 import React from 'react';
+import { DropdownCustomMenuItem, DropdownItemOptions } from '../types';
 interface Props<T extends Record<string, any>> {
     item: T;
     selectedId: string | undefined;
     onSelect: (id?: string) => void;
     idKey: string;
     displayKey: string;
-    width?: number;
-    customMenuItem?: ({ children, rowId, }: {
-        children: React.ReactNode;
-        rowId: string | number;
-    }) => JSX.Element;
+    customMenuItem?: DropdownCustomMenuItem;
+    options?: DropdownItemOptions;
     onClose: () => void;
 }
-declare function MenuItem<T extends Record<string, any>>({ item, selectedId, onSelect, idKey, displayKey, width, customMenuItem: CustomMenuItem, onClose, }: Props<T>): React.JSX.Element;
-export default MenuItem;
+export default function MenuItem<T extends Record<string, any>>({ item, selectedId, onSelect, idKey, displayKey, customMenuItem: CustomMenuItem, options, onClose, }: Props<T>): React.JSX.Element;
+export {};

package/dist/components/molecules/dropdown/menu/index.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
+import { DropdownCustomMenuItem, DropdownItemOptions, DropdownItemVariant } from '../types';
 import { TColor } from '../../../../enums/color';
 import { IconProps } from '../../../atoms/icon';
 interface Props<T extends Record<string, any>> {
+    id: string;
+    labelledBy: string;
+    initialFocus: 'selected' | 'first' | 'last';
     data: T[];
     selectedId: string | undefined;
     onSelect: (id?: string) => void;
@@ -9,23 +13,24 @@ interface Props<T extends Record<string, any>> {
     displayKey: string;
     color?: TColor;
     searchPlaceholder?: string;
+    searchAriaLabel?: string;
+    searchClearAriaLabel?: string;
     noDataMessage?: string;
     noResultMessage?: string;
     width?: number;
     height?: number;
-    customMenuItem?: ({ children, rowId, }: {
-        children: React.ReactNode;
-        rowId: string | number;
-    }) => JSX.Element;
+    customMenuItem?: DropdownCustomMenuItem;
+    getItemProps?: (item: T) => DropdownItemOptions;
+    defaultItemVariant: DropdownItemVariant;
     isSearch: boolean;
     parent: HTMLElement;
-    open: boolean;
-    onClose: () => void;
+    alignEnd: boolean;
+    onClose: (restoreFocus?: boolean) => void;
     menuBottomButton?: {
         content: string;
         startIcon?: IconProps;
         onClick: () => void;
     };
 }
-declare function DropdownMenu<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, color, searchPlaceholder, noDataMessage, noResultMessage, width, height, customMenuItem, isSearch, parent, open, onClose, menuBottomButton, }: Props<T>): React.JSX.Element;
-export default DropdownMenu;
+export default function DropdownMenu<T extends Record<string, any>>({ id, labelledBy, initialFocus, data, selectedId, onSelect, idKey, displayKey, color, searchPlaceholder, searchAriaLabel, searchClearAriaLabel, noDataMessage, noResultMessage, width, height, customMenuItem, getItemProps, defaultItemVariant, isSearch, parent, alignEnd, onClose, menuBottomButton, }: Props<T>): React.JSX.Element;
+export {};

package/dist/components/molecules/dropdown/toggleButton/Arrow.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
-import { TColor } from '../../../../enums/color';
-interface Props {
+import { DropdownVariant } from '../types';
+export default function Arrow({ open, variant, }: {
     open: boolean;
-    color: TColor;
-    disabled?: boolean;
-}
-declare function Arrow({ open, color, disabled }: Props): React.JSX.Element;
-export default Arrow;
+    variant: DropdownVariant;
+}): React.JSX.Element;

package/dist/components/molecules/dropdown/toggleButton/Clear.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-interface Props {
-    focus: boolean;
+export default function Clear({ onClear, ariaLabel, }: {
     onClear: () => void;
-}
-declare function Clear({ focus, onClear }: Props): React.JSX.Element;
-export default Clear;
+    ariaLabel?: string;
+}): React.JSX.Element;

package/dist/components/molecules/dropdown/toggleButton/index.d.ts

@@ -1,20 +1,33 @@
 import React from 'react';
+import { DropdownVariant } from '../types';
 import { TColor } from '../../../../enums/color';
+import { IconProps } from '../../../atoms/icon';
 interface Props<T extends Record<string, any>> {
+    id: string;
+    menuId: string;
+    triggerRef: React.RefObject<HTMLButtonElement>;
+    ariaLabel?: string;
+    describedBy?: string;
     displayKey: string;
     placeholder?: string;
     disabled?: boolean;
     color: TColor;
     stopPropagation?: boolean;
-    width?: number;
     gap: number;
     customButton?: React.ReactNode;
+    variant: DropdownVariant;
+    startIcon?: IconProps;
+    customStartIcon?: React.ReactNode;
+    badge?: React.ReactNode;
     open: boolean;
     selected: T | undefined;
     errored?: boolean;
     hasClearBtn: boolean;
+    clearAriaLabel?: string;
+    popupRole?: 'menu' | 'dialog';
     onClear: () => void;
     onClick: () => void;
+    onKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;
 }
-declare function DropdownToggleButton<T extends Record<string, any>>({ displayKey, placeholder, disabled, color, stopPropagation, width, gap, customButton, open, selected, errored, hasClearBtn, onClear, onClick, }: Props<T>): React.JSX.Element;
+declare function DropdownToggleButton<T extends Record<string, any>>({ id, menuId, triggerRef, ariaLabel, describedBy, displayKey, placeholder, disabled, color, stopPropagation, gap, customButton, variant, startIcon, customStartIcon, badge, open, selected, errored, hasClearBtn, clearAriaLabel, popupRole, onClear, onClick, onKeyDown, }: Props<T>): React.JSX.Element;
 export default DropdownToggleButton;

package/dist/components/molecules/dropdown/types.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { IconProps } from '../../atoms/icon';
+export type DropdownVariant = 'default' | 'button' | 'button-tag' | 'borderless';
+export type DropdownItemVariant = 'default' | 'model' | 'icon' | 'tag';
+/** Presentation and optional actions for one item; data remains caller-owned. */
+export interface DropdownItemOptions {
+    variant?: DropdownItemVariant;
+    startIcon?: IconProps;
+    customStartIcon?: React.ReactNode;
+    endIcon?: IconProps;
+    customEndIcon?: React.ReactNode;
+    supportingText?: React.ReactNode;
+    showDot?: boolean;
+    showSelectedCheck?: boolean;
+    disabled?: boolean;
+    action?: {
+        content: React.ReactNode;
+        ariaLabel: string;
+        onClick: () => void;
+        disabled?: boolean;
+    };
+    onRemove?: () => void;
+    removeAriaLabel?: string;
+}
+export type DropdownCustomMenuItem = (props: {
+    children: React.ReactNode;
+    rowId: string | number;
+}) => JSX.Element;

package/dist/components/molecules/multiSelectDropdown/MultiSelectDropdown.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { DropdownVariant } from '../dropdown/types';
 import { TColor } from '../../../enums/color';
 import { TDropdownType } from '../../../enums/type';
+import '../dropdown/dropdown.scss';
 import './multi-select-dropdown.scss';
 export interface MultiSelectDropdownProps<T extends Record<string, any>> {
     data: T[];
@@ -20,7 +22,21 @@ export interface MultiSelectDropdownProps<T extends Record<string, any>> {
     /**
      * 드롭다운 버튼에 노출할 컨텐츠
      */
-    content: string;
+    content?: React.ReactNode;
+    /** Optional visual variant; default preserves the existing control. */
+    variant?: DropdownVariant;
+    /** Called only for two or more selections. No built-in language or i18n dependency. */
+    formatSelectedCount?: (count: number) => React.ReactNode;
+    actionContent?: React.ReactNode;
+    onAction?: () => void;
+    actionDisabled?: boolean;
+    actionAriaLabel?: string;
+    clearAriaLabel?: string;
+    searchAriaLabel?: string;
+    searchClearAriaLabel?: string;
+    helperText?: React.ReactNode;
+    menuWidth?: number;
+    'aria-label'?: string;
     className?: string;
     /**
      * 드롭다운 버튼의 placeholder
@@ -74,4 +90,4 @@ export interface MultiSelectDropdownProps<T extends Record<string, any>> {
      */
     anchorEl?: HTMLElement | null;
 }
-export declare function MultiSelectDropdown<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, content, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, label, allCheckLabel, onClear, noDataMessage, noResultMessage, width, height, anchorEl, }: MultiSelectDropdownProps<T>): React.JSX.Element;
+export declare function MultiSelectDropdown<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, content, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, variant, formatSelectedCount, actionContent, onAction, actionDisabled, actionAriaLabel, clearAriaLabel, searchAriaLabel, searchClearAriaLabel, helperText, menuWidth, 'aria-label': ariaLabel, errorMessage, label, allCheckLabel, onClear, noDataMessage, noResultMessage, width, height, anchorEl, }: MultiSelectDropdownProps<T>): React.JSX.Element;

package/dist/components/molecules/multiSelectDropdown/menu/index.d.ts

@@ -1,6 +1,13 @@
 import React from 'react';
 import { TColor } from '../../../../enums/color';
 interface Props<T extends Record<string, any>> {
+    id: string;
+    labelledBy: string;
+    initialFocus: 'selected' | 'first' | 'last';
+    figmaVariant: boolean;
+    alignEnd: boolean;
+    searchAriaLabel?: string;
+    searchClearAriaLabel?: string;
     data: T[];
     selectedIds: string[];
     onSelect: (ids: string[]) => void;
@@ -15,8 +22,7 @@ interface Props<T extends Record<string, any>> {
     height?: number;
     isSearch: boolean;
     parent: HTMLElement;
-    open: boolean;
-    onClose: () => void;
+    onClose: (restoreFocus?: boolean) => void;
 }
-declare function DropdownMenu<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, searchPlaceholder, allCheckLabel, color, noDataMessage, noResultMessage, width, height, isSearch, parent, open, onClose, }: Props<T>): React.JSX.Element;
+declare function DropdownMenu<T extends Record<string, any>>({ id, labelledBy, initialFocus, figmaVariant, alignEnd, searchAriaLabel, searchClearAriaLabel, data, selectedIds, onSelect, idKey, displayKey, searchPlaceholder, allCheckLabel, color, noDataMessage, noResultMessage, width, height, isSearch, parent, onClose, }: Props<T>): React.JSX.Element;
 export default DropdownMenu;

package/dist/components/molecules/multiSelectDropdown/toggleButton/Clear.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface Props {
     focus: boolean;
     onClear: () => void;
+    ariaLabel?: string;
 }
-declare function Clear({ focus, onClear }: Props): React.JSX.Element;
+declare function Clear({ focus, onClear, ariaLabel }: Props): React.JSX.Element;
 export default Clear;

package/dist/components/molecules/multiSelectDropdown/toggleButton/index.d.ts

@@ -1,7 +1,14 @@
 import React from 'react';
 import { TColor } from '../../../../enums/color';
 interface Props {
-    content: string;
+    content: React.ReactNode;
+    id: string;
+    menuId: string;
+    triggerRef: React.RefObject<HTMLButtonElement>;
+    ariaLabel?: string;
+    describedBy?: string;
+    clearAriaLabel?: string;
+    onKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;
     placeholder?: string;
     disabled?: boolean;
     color: TColor;
@@ -14,5 +21,5 @@ interface Props {
     onClear: () => void;
     onClick: () => void;
 }
-declare function DropdownToggleButton({ content, placeholder, disabled, color, stopPropagation, width, open, selected, errored, hasClearBtn, onClear, onClick, }: Props): React.JSX.Element;
+declare function DropdownToggleButton({ content, id, menuId, triggerRef, ariaLabel, describedBy, clearAriaLabel, onKeyDown, placeholder, disabled, color, stopPropagation, width, open, selected, errored, hasClearBtn, onClear, onClick, }: Props): React.JSX.Element;
 export default DropdownToggleButton;

package/dist/components/molecules/pagination/Pagination.d.ts

@@ -1,23 +1,33 @@
 import React from 'react';
 import './pagination.scss';
+export type PaginationVariant = 'default' | 'simple' | 'number';
 export interface PaginationProps {
-    /**
-     * 현재 페이지. (@v1 page.curPage)
-     */
+    /** 현재 페이지 (1부터 시작). */
     page: number;
-    /**
-     * 현재 페이지 설정 함수. (@v1 page.setPage)
-     */
+    /** 페이지 이동 요청. 부모에서 page와 표시 데이터를 갱신합니다. */
     onPageChange: (page: number) => void;
-    /**
-     * 총 페이지
-     */
+    /** 전체 페이지 수. 빈 목록은 0을 전달합니다. */
     totalPage: number;
-    className?: string;
-    /**
-     * prev, next 버튼 공간 차지 여부
-     */
+    /** 기본형 / 페이지 크기 선택형 / 번호형. @default 'default' */
+    variant?: PaginationVariant;
+    /** 기본형 왼쪽에 표시할 정확한 전체 항목 수. 생략하면 범위를 숨깁니다. */
+    totalCount?: number;
+    /** 페이지당 항목 수. simple에서는 부모가 관리하는 선택값입니다. @default 30 */
+    pageSize?: number;
+    /** simple의 페이지당 항목 수 선택지. @default [15, 30, 50, 100] */
+    pageSizeOptions?: number[];
+    /** simple의 개수 변경 요청. 부모에서 pageSize와 totalPage를 갱신하고 page를 1로 초기화하세요. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** 위쪽 구분선 표시. @default true */
+    divider?: boolean;
+    /** 전체 조작 비활성화. @default false */
+    disabled?: boolean;
+    /** visible: 경계의 이동 버튼을 비활성화해 표시. hidden: 공간을 남기고 숨김. */
     buttonVisibility?: 'visible' | 'hidden';
-    label: string;
+    /** 전체 페이지 수 뒤에 붙는 문구. @default '페이지' */
+    label?: string;
+    /** 탐색 영역의 접근성 이름. @default '페이지네이션' */
+    'aria-label'?: string;
+    className?: string;
 }
-export declare function Pagination({ page, onPageChange, totalPage, className, buttonVisibility, label, }: PaginationProps): React.JSX.Element;
+export declare function Pagination({ page, onPageChange, totalPage, variant, totalCount, pageSize, pageSizeOptions, onPageSizeChange, divider, disabled, buttonVisibility, label, 'aria-label': ariaLabel, className, }: PaginationProps): React.JSX.Element;

package/dist/components/molecules/table/Table.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableProps } from './types';
 import './table.scss';
-export declare function Table({ rowIdKey, data, formats, maxHeight, sort, onSort, checkedIds, onCheck, radioCheckedId, onRadioCheck, filter, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, className, id, noData, loading, }: TableProps): React.JSX.Element;
+export declare function Table({ rowIdKey, data, formats, maxHeight, sort, onSort, checkedIds, onCheck, getCheckboxStatus, radioCheckedId, onRadioCheck, filter, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, className, id, noData, loading, }: TableProps): React.JSX.Element;

package/dist/components/molecules/table/body/CheckboxTd.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 interface Props {
     checked: boolean;
     disabled?: boolean;
+    hidden?: boolean;
     onCheck: (checked: boolean) => void;
 }
-declare function CheckboxTd({ checked, disabled, onCheck }: Props): React.JSX.Element;
+declare function CheckboxTd({ checked, disabled, hidden, onCheck }: Props): React.JSX.Element;
 export default CheckboxTd;

package/dist/components/molecules/table/body/Tr.d.ts

@@ -4,5 +4,5 @@ interface Props extends TableProps {
     row: Record<string, any>;
     hasActionCol: boolean;
 }
-declare function Tr({ row, rowIdKey, formats, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, }: Props): React.JSX.Element;
+declare function Tr({ row, rowIdKey, formats, checkedIds, onCheck, getCheckboxStatus, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, }: Props): React.JSX.Element;
 export default Tr;

package/dist/components/molecules/table/body/index.d.ts

@@ -4,5 +4,5 @@ interface Props extends TableProps {
     hasActionCol: boolean;
     emptyBodyHeight: number;
 }
-declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, noData, loading, emptyBodyHeight, }: Props): React.JSX.Element;
+declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, getCheckboxStatus, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, noData, loading, emptyBodyHeight, }: Props): React.JSX.Element;
 export default TBody;

package/dist/components/molecules/table/header/index.d.ts

@@ -6,6 +6,8 @@ interface Props {
     onSortClick: (columnName: string) => () => void;
     hasCheckbox?: boolean;
     allCheckbox: boolean;
+    allCheckboxIndeterminate: boolean;
+    allCheckboxDisabled: boolean;
     onAllCheck: (checked: boolean) => void;
     hasRadio?: boolean;
     filter?: IFilter;
@@ -13,5 +15,5 @@ interface Props {
     setFilterToggle: React.Dispatch<React.SetStateAction<boolean>>;
     hasActionCol: boolean;
 }
-declare function THead({ formats, sort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasRadio, filter, filterToggle, setFilterToggle, hasActionCol, }: Props): React.JSX.Element;
+declare function THead({ formats, sort, onSortClick, hasCheckbox, allCheckbox, allCheckboxIndeterminate, allCheckboxDisabled, onAllCheck, hasRadio, filter, filterToggle, setFilterToggle, hasActionCol, }: Props): React.JSX.Element;
 export default THead;

package/dist/components/molecules/table/types.d.ts

@@ -50,6 +50,14 @@ export interface TableProps {
      * 체크박스에 체크된 아이디들. radioCheckedId와 같이 쓸 수 없음.(@v1 hasCheckbox, checkedArray)
      */
     checkedIds?: string[];
+    /**
+     * 행별 체크박스 상태. hidden, disabled의 기본값은 false.
+     * 숨김/비활성 체크박스는 전체 선택·해제 대상에서 제외하며 기존 체크 상태는 유지.
+     */
+    getCheckboxStatus?: (row: Record<string, any>, rowId: string) => {
+        hidden?: boolean;
+        disabled?: boolean;
+    };
     /**
      * (@v1 setCheckedArray)
      */

package/dist/components/molecules/tabs/Tabs.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import './tabs.scss';
+export type TabsVariant = 'line' | 'button';
+export type TabsSize = 'compact' | 'comfortable';
 export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
      * 현재 선택된 탭의 값
@@ -9,6 +11,10 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
      * 선택된 탭이 변경될 때 호출되는 함수
      */
     onChange: (value: string) => void;
+    /** 라인형 또는 버튼형 탭. 기본값은 line입니다. */
+    variant?: TabsVariant;
+    /** 라인형 탭의 좌우 간격. 버튼형은 항상 Comfortable 규격입니다. */
+    size?: TabsSize;
     /**
      * 탭이 컨테이너 너비를 동일한 비율로 채울지 여부
      */