maru_design2 2.31.1 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # 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)
+
+
+### Bug Fixes
+
+* restore package ESM configuration ([40b766d](https://github.com/42maru-ai/maru-design2/commit/40b766d3d70c5ed97d2695d5bcd7d5324d0074eb))
+
+## [3.0.1](https://github.com/42maru-ai/maru-design2/compare/v3.0.0...v3.0.1) (2026-07-27)
+
+
+### Bug Fixes
+
+* apply Pretendard globally in Storybook ([e30df92](https://github.com/42maru-ai/maru-design2/commit/e30df92466d50b1c32aad5da64411461338c4729))
+* improve input styles and table filter ([94a4c57](https://github.com/42maru-ai/maru-design2/commit/94a4c573709b8a8fdffb3f255c0a097678ae218c))
+* improve input styles and table filter ([fd8e0f8](https://github.com/42maru-ai/maru-design2/commit/fd8e0f82cf066b08c35f08c0e1aa0ca3d203aa5b))
+* initialize table filter visibility ([52d35c3](https://github.com/42maru-ai/maru-design2/commit/52d35c3668d9ba7ccbe8a73322de21567d9103ee))
+* keep table filter story empty ([33e35b8](https://github.com/42maru-ai/maru-design2/commit/33e35b885bc11baf3c40a249aba7dc227a3c9453))
+* refine table header and toast details ([5992c77](https://github.com/42maru-ai/maru-design2/commit/5992c778a823e7fcf688bf99d4cc6e184c7ea08e))
+
+## [3.0.0](https://github.com/42maru-ai/maru-design2/compare/v2.32.0...v3.0.0) (2026-07-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* MaruDesign v3는 React 18과 ESM만 지원하며 React 17, CommonJS, 레거시 Badge 색상 및 Toggle API를 지원하지 않습니다.
+
+### Features
+
+* MaruDesign v3 릴리즈 계약과 접근성 완성 ([20a44a0](https://github.com/42maru-ai/maru-design2/commit/20a44a04e03dc0a966796cdb08b5f266aea78b1e))
+* update Badge and Chip for v3 sizes, icons, and states ([8723178](https://github.com/42maru-ai/maru-design2/commit/87231787052f9110bc22238ad8b3a2439454ab14))
+* update Button for v3 variants, sizes, and custom icons ([2bb27b0](https://github.com/42maru-ai/maru-design2/commit/2bb27b0806005f674ef6f187589a4b5a18487f54))
+* update design system components and add tabs ([dbbe235](https://github.com/42maru-ai/maru-design2/commit/dbbe235b770f9505124c1e6f10c02f619184181e))
+* update Input for v3 and add related input molecules ([ab6df75](https://github.com/42maru-ai/maru-design2/commit/ab6df75cabd44008ce9f3111d82533c51b3abf76))
+
+
+### Bug Fixes
+
+* align Button only-icon, Modal overlay, and TagInput with v3 ([389a89e](https://github.com/42maru-ai/maru-design2/commit/389a89e7fb50df659e6e6c209b7fc03e9a3a8254))
+
+## [2.32.0](https://github.com/42maru-ai/maru-design2/compare/v2.31.1...v2.32.0) (2026-07-13)
+
+
+### Features
+
+* improve table interaction states and styling ([1a3c242](https://github.com/42maru-ai/maru-design2/commit/1a3c2423357b820aa583f7fdf533845821f90dea))
+
 ## [2.31.1](https://github.com/42maru-ai/maru-design2/compare/v2.31.0...v2.31.1) (2026-03-19)
 
 

package/dist/components/atoms/badge/Badge.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
+import { TBadgeSize } from '../../../enums/size';
 import { TBadgeColor, TBadgeVariant } from '../../../enums/variant';
+import { IconProps } from '../icon';
 import './badge.scss';
 export interface BadgeProps {
     /**
-     * 컴포넌트에 들어갈 내용
+     * 컴포넌트에 들어갈 내용.
+     * iconOnly(아이콘만)일 때는 생략할 수 있습니다.
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * 배지 색상
      */
@@ -14,10 +17,44 @@ export interface BadgeProps {
      * 배지 스타일 변형
      */
     variant?: TBadgeVariant;
+    /**
+     * 사이즈. Figma sm/md/lg ↔ small/normal/large. 기본값 `normal`.
+     */
+    size?: TBadgeSize;
     className?: string;
     /**
      * 설정하면 X아이콘이 렌더링되고 클릭 이벤트가 할당됩니다.
      */
     onXIconClick?: () => void;
+    /**
+     * 마루 Icon 시작 아이콘. `customStartIcon`과 함께 넘기면 custom이 우선입니다.
+     */
+    startIcon?: IconProps;
+    /**
+     * 마루 Icon 끝 아이콘. `customEndIcon`과 함께 넘기면 custom이 우선입니다.
+     * `onXIconClick`이 있으면 X 버튼이 end 쪽에 렌더되고 이 prop은 무시됩니다.
+     */
+    endIcon?: IconProps;
+    /**
+     * 마루 Icon 외 커스텀 시작 아이콘(Lucide 등). `startIcon`보다 우선합니다.
+     */
+    customStartIcon?: React.ReactNode;
+    /**
+     * 마루 Icon 외 커스텀 끝 아이콘(Lucide 등). `endIcon`보다 우선합니다.
+     * `onXIconClick`이 있으면 무시됩니다.
+     */
+    customEndIcon?: React.ReactNode;
+    /**
+     * Figma `Icon=Dot`에 대응하는 상태점 표시 여부.
+     */
+    showDot?: boolean;
+    /**
+     * 비활성 상태. opacity 50% 적용.
+     */
+    disabled?: boolean;
+    /**
+     * X 아이콘 버튼의 접근성 레이블.
+     */
+    closeButtonAriaLabel?: string;
 }
-export declare function Badge({ children, color, variant, className, onXIconClick, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ children, color, variant, size, className, onXIconClick, startIcon, endIcon, customStartIcon, customEndIcon, showDot, disabled, closeButtonAriaLabel, }: BadgeProps): React.JSX.Element;

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

@@ -15,19 +15,37 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     color?: TColor;
     /**
      * 사이즈 (@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;
     /**
      * 모양 (@v1 kind)
+     * - `link` / `link-outline`: 컴팩트 텍스트·칩 (Round의 작은 버전이 아님)
+     * - `round`: pill shape 컨테이너
      */
     variant?: TButtonVariant;
     /**
      * 컴포넌트 시작점에 위치시킬 아이콘 (@v1 icon)
+     * `customStartIcon`과 함께 넘기면 custom이 우선이며 개발 환경에서 console.warn을 출력합니다.
      */
     startIcon?: IconProps;
     /**
      * 컴포넌트 끝점에 위치시킬 아이콘 (@v1 icon)
+     * `customEndIcon`과 함께 넘기면 custom이 우선이며 개발 환경에서 console.warn을 출력합니다.
      */
     endIcon?: IconProps;
+    /**
+     * 마루 Icon 외 커스텀 시작 아이콘 노드
+     * `startIcon`보다 우선합니다. 함께 넘기면 개발 환경에서 console.warn을 출력합니다.
+     */
+    customStartIcon?: React.ReactNode;
+    /**
+     * 마루 Icon 외 커스텀 끝 아이콘 노드
+     * `endIcon`보다 우선합니다. 함께 넘기면 개발 환경에서 console.warn을 출력합니다.
+     */
+    customEndIcon?: React.ReactNode;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,20 +1,24 @@
 import React from 'react';
+import type { TColorValue } from '../../../types/color';
 import { TGap } from '../../../enums/gap';
 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)
      */
-    color?: string;
+    color?: TColorValue;
     /**
      * 컴포넌트와 라벨 사이의 거리
      */
     gap?: TGap;
     /**
-     * [16, 18, 24]
+     * Figma sm: 16, md: 20. 기존 18, 24도 지원합니다.
      */
     size?: TCheckboxSize;
 }

package/dist/components/atoms/chip/Chip.d.ts

@@ -2,18 +2,21 @@ import React from 'react';
 import { TColor } from '../../../enums/color';
 import { TChipSize } from '../../../enums/size';
 import { TChipVariant } from '../../../enums/variant';
+import { IconProps } from '../icon';
 import './chip.scss';
 export interface ChipProps {
     /**
-     * 컴포넌트에 들어갈 내용. number인 경우 천의 자리마다 컴마(,) 표시됨
+     * 컴포넌트에 들어갈 내용. number인 경우 천의 자리마다 컴마(,) 표시됨.
+     * iconOnly(아이콘만)일 때는 생략할 수 있습니다.
      */
-    children: React.ReactNode | string | number;
+    children?: React.ReactNode | string | number;
     /**
      * (@v1 variant)
      */
     color?: TColor;
     /**
      * (@v1 kind)
+     * Figma sm/md/lg ↔ small/normal/large
      */
     size?: TChipSize;
     /**
@@ -25,5 +28,35 @@ export interface ChipProps {
      * 설정하면 X아이콘 생기며, 해당 아이콘에 클릭 이벤트를 할당함.
      */
     onXIconClick?: () => void;
+    /**
+     * 마루 Icon 시작 아이콘. `customStartIcon`과 함께 넘기면 custom이 우선입니다.
+     */
+    startIcon?: IconProps;
+    /**
+     * 마루 Icon 끝 아이콘. `customEndIcon`과 함께 넘기면 custom이 우선입니다.
+     * `onXIconClick`이 있으면 X 버튼이 end 쪽에 렌더되고 이 prop은 무시됩니다.
+     */
+    endIcon?: IconProps;
+    /**
+     * 마루 Icon 외 커스텀 시작 아이콘(Lucide 등). `startIcon`보다 우선합니다.
+     */
+    customStartIcon?: React.ReactNode;
+    /**
+     * 마루 Icon 외 커스텀 끝 아이콘(Lucide 등). `endIcon`보다 우선합니다.
+     * `onXIconClick`이 있으면 무시됩니다.
+     */
+    customEndIcon?: React.ReactNode;
+    /**
+     * Figma `Icon=Dot`에 대응하는 상태점 표시 여부.
+     */
+    showDot?: boolean;
+    /**
+     * 비활성 상태. opacity 50% 적용.
+     */
+    disabled?: boolean;
+    /**
+     * X 아이콘 버튼의 접근성 레이블.
+     */
+    closeButtonAriaLabel?: string;
 }
-export declare function Chip({ children, color, size, variant, className, onXIconClick, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ children, color, size, variant, className, onXIconClick, startIcon, endIcon, customStartIcon, customEndIcon, showDot, disabled, closeButtonAriaLabel, }: ChipProps): React.JSX.Element;

package/dist/components/atoms/code/Code.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import 'highlight.js/styles/a11y-light.css';
 import './code.scss';
 export interface CodeProps {
     value: string;
     copyable?: boolean;
 }
-export declare function Code({ value, copyable }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Code({ value, copyable }: CodeProps): React.JSX.Element;

package/dist/components/atoms/icon/Icon.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { TColorValue } from '../../../types/color';
 import { TIcons } from './iconmap';
 export interface IconProps {
     /**
@@ -7,10 +9,10 @@ export interface IconProps {
     /**
      * primary, secondary, positive, warning, danger + rgb. (@v1 fill)
      */
-    color?: string;
+    color?: TColorValue;
     /**
      * primary, secondary, positive, warning, danger + rgb. (@v1 fill)
      */
-    hoverColor?: string;
+    hoverColor?: TColorValue;
 }
-export declare function Icon({ name, color, hoverColor }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ name, color, hoverColor }: IconProps): React.JSX.Element;

package/dist/components/atoms/icon/iconmap.d.ts

@@ -45,6 +45,7 @@ export declare const ICONS: {
     readonly AlertTriangle_s1615: "AlertTriangle_s1615";
     readonly ArrowCross_s1613: "ArrowCross_s1613";
     readonly ArrowDownCircle_s1413: "ArrowDownCircle_s1413";
+    readonly ArrowDown_s1215: "ArrowDown_s1215";
     readonly ArrowLeftIn_s1613: "ArrowLeftIn_s1613";
     readonly ArrowLeftOut_s1810: "ArrowLeftOut_s1810";
     readonly ArrowLeft_s1613: "ArrowLeft_s1613";
@@ -56,6 +57,7 @@ export declare const ICONS: {
     readonly ArrowRight_s1613: "ArrowRight_s1613";
     readonly ArrowRight_s1813: "ArrowRight_s1813";
     readonly ArrowRight_s2420: "ArrowRight_s2420";
+    readonly ArrowUp_s1215: "ArrowUp_s1215";
     readonly Atom01_s1615: "Atom01_s1615";
     readonly BackToLines_s1615: "BackToLines_s1615";
     readonly BagSetting_s2415: "BagSetting_s2415";
@@ -118,6 +120,7 @@ export declare const ICONS: {
     readonly ChevronRight_s1615: "ChevronRight_s1615";
     readonly ChevronRight_s2020: "ChevronRight_s2020";
     readonly ChevronRight_s2420: "ChevronRight_s2420";
+    readonly ChevronSelectorVertical_s1215: "ChevronSelectorVertical_s1215";
     readonly ChevronSelectorVertical_s2020: "ChevronSelectorVertical_s2020";
     readonly ChevronUp_s1613: "ChevronUp_s1613";
     readonly ChevronUp_s1615: "ChevronUp_s1615";
@@ -318,6 +321,7 @@ export declare const ICONS: {
     readonly PlusDownLines_s1413: "PlusDownLines_s1413";
     readonly PlusLines_s1210: "PlusLines_s1210";
     readonly PlusUpLines_s1413: "PlusUpLines_s1413";
+    readonly Plus_s1210: "Plus_s1210";
     readonly Plus_s1610: "Plus_s1610";
     readonly PreviewEye_s1413: "PreviewEye_s1413";
     readonly PreviewLine_s2013: "PreviewLine_s2013";

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

@@ -10,6 +10,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
         message?: string;
     };
     label?: string;
+    /**
+     * 인풋 하단에 표시할 도움말
+     */
+    helperText?: React.ReactNode;
     /**
      * 데이터 타입
      */
@@ -22,6 +26,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * 초기화 버튼 숨기기
      */
     hiddenClearButton?: boolean;
+    /** 초기화 버튼의 번역된 접근성 이름 */
+    clearAriaLabel?: string;
     /**
      * input을 감싸고 있는 div의 ref, input은 일반 ref 사용
      */
@@ -39,5 +45,9 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * true이면 placeholder가 없어지지 않음
      */
     persistentPlaceholder?: boolean;
+    /**
+     * 입력값에서 feature highlight 색상으로 강조할 문자열
+     */
+    highlightText?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/popover/Popover.d.ts

@@ -16,4 +16,4 @@ export interface PopoverProps {
     portal?: boolean;
     className?: string;
 }
-export declare function Popover({ anchorEl, children, open, className, direction, onClose, portal, }: PopoverProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Popover({ anchorEl, children, open, className, direction, onClose, portal, }: PopoverProps): React.JSX.Element | null;

package/dist/components/atoms/radio/Radio.d.ts

@@ -1,23 +1,27 @@
 import React from 'react';
+import { TRadioGap, TRadioSize } from '../../../types/radio';
 import { TRadioColor } from '../../../enums/color';
-import { TGap } from '../../../enums/gap';
 import './radio.scss';
-export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'type'> {
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type'> {
     /**
      * 라디오 토글의 값
      */
     checked?: boolean;
     /**
-     * 기본 회색, 메인 테마색 ['primary']
+     * 메인 테마색, 기존 회색 ['default']
      */
     color?: TRadioColor;
     /**
-     * 컴포넌트와 라벨 사이의 거리. ['8px', '4px', '2px']
+     * 컴포넌트와 라벨 사이의 거리. ['8px', '6px', '4px', '2px']
      */
-    gap?: TGap;
+    gap?: TRadioGap;
     /**
      * 라디오 버튼 옆 문자 내용
      */
     label?: string;
+    /**
+     * 라디오 버튼 크기
+     */
+    size?: TRadioSize;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/radio/index.d.ts

@@ -1 +1,2 @@
 export * from './Radio';
+export { TRadioGap, TRadioSize } from '../../../types/radio';

package/dist/components/atoms/skeleton/Contents.d.ts

@@ -1 +1,2 @@
-export default function Contents(): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export default function Contents(): React.JSX.Element;

package/dist/components/atoms/skeleton/Skeleton.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { TSkeletonVariant } from '../../../enums/variant';
 import './skeleton.scss';
 export interface SkeletonProps {
     variant: TSkeletonVariant;
 }
-export declare function Skeleton({ variant }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ variant }: SkeletonProps): React.JSX.Element;

package/dist/components/atoms/slider/Slider.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TColor } from '../../../enums/color';
 import './slider.scss';
 export interface SliderProps {
@@ -26,13 +27,10 @@ export interface SliderProps {
      */
     step?: number;
     /**
-     * 값 표시 여부
+     * 포인터 위에 현재 값 표시 여부
      */
     showValue?: boolean;
     disabled?: boolean;
     className?: string;
 }
-/**
- * showValue에 관한 글: showValue가 true면 기존 input에 있는 thumb를 숨기고 custom thumb를 보여준다.
- */
-export declare function Slider({ value, onChange, color, min, max, step, showValue, disabled, className, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ value, onChange, color, min, max, step, showValue, disabled, className, }: SliderProps): React.JSX.Element;

package/dist/components/atoms/toggle/Toggle.d.ts

@@ -1,31 +1,16 @@
-import { TColor } from '../../../enums/color';
+import React from 'react';
+import type { TToggleSize } from '../../../types/toggle';
 import './toggle.scss';
-export interface ToggleProps {
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'onChange' | 'size' | 'type'> {
     checked: boolean;
     onChange: (checked: boolean) => void;
-    className?: string;
     /**
-     * ['primary', 'secondary', 'positive', 'warning', 'danger']. (@v1 variant)
+     * 토글 오른쪽에 표시할 텍스트
      */
-    color?: TColor;
+    text?: string;
     /**
-     * 비활성화 여부
+     * 토글 크기
      */
-    disabled?: boolean;
-    /**
-     * 텍스트가 있는 토글.
-     */
-    text?: {
-        left?: string;
-        right?: string;
-    };
-    /**
-     * 토글 아이콘 표시 여부
-     */
-    showIcon?: boolean;
-    /**
-     * 토글 크기 배율 (기본값: 1)
-     */
-    scale?: number;
+    size?: TToggleSize;
 }
-export declare function Toggle({ checked, onChange, className, color, disabled, text, showIcon, scale, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toggle({ checked, onChange, className, disabled, text, size, ...props }: ToggleProps): React.JSX.Element;

package/dist/components/atoms/toggle/index.d.ts

@@ -1 +1,2 @@
 export * from './Toggle';
+export { TToggleSize } from '../../../types/toggle';

package/dist/components/atoms/tooltip/Tooltip.d.ts

@@ -26,4 +26,4 @@ export interface TooltipProps {
      */
     gap?: TTooltipGap;
 }
-export declare function Tooltip({ children, content, className, hidden, direction, portal, gap, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, content, className, hidden, direction, portal, gap, }: TooltipProps): React.JSX.Element;

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';
     /**
@@ -53,4 +53,4 @@ export interface ButtonGroupProps<T extends string> {
     disabled?: boolean;
     className?: string;
 }
-export declare function ButtonGroup<T extends string>({ value, onChange, buttons, variant, size, disabled, className, }: ButtonGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonGroup<T extends string>({ value, onChange, buttons, variant, size, disabled, className, }: ButtonGroupProps<T>): React.JSX.Element;

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): import("react/jsx-runtime").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,3 +1,11 @@
+import React from 'react';
 import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
-declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }: ReactDatePickerCustomHeaderProps): import("react/jsx-runtime").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,9 +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): import("react/jsx-runtime").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;
+}[];