maru_design2 3.3.0 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [3.3.1](https://github.com/42maru-ai/maru-design2/compare/v3.3.0...v3.3.1) (2026-09-21)
+
+
+### Bug Fixes
+
+* add date range picker for independent endpoint editing ([7a66969](https://github.com/42maru-ai/maru-design2/commit/7a66969235f2df328e71a93a8dda8232d51eabc7))
+* align calendar design and time selection ([f218135](https://github.com/42maru-ai/maru-design2/commit/f2181352aeb68c9fa85eeaff662e03584dab9c58))
+* correct calendar header class names ([46f6b4f](https://github.com/42maru-ai/maru-design2/commit/46f6b4ff9cf09f9a40944c036c2719da67295bf0))
+* preserve calendar compatibility defaults ([d42e9ee](https://github.com/42maru-ai/maru-design2/commit/d42e9ee5ec0b9687db24a134efd8cbf8ae6c7577))
+* refine textarea styles and copy feedback ([f6b7092](https://github.com/42maru-ai/maru-design2/commit/f6b7092484753ae8383a6c6a4ef792b6122457d4))
+* show cancel button in calendar date bounds story ([cb049b9](https://github.com/42maru-ai/maru-design2/commit/cb049b9f8dc43ea4bc0940949d4570e8d98d2a13))
+
 ## [3.3.0](https://github.com/42maru-ai/maru-design2/compare/v3.2.1...v3.3.0) (2026-09-16)
 
 

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

@@ -3,6 +3,7 @@ import 'highlight.js/styles/a11y-light.css';
 import './code.scss';
 export interface CodeProps {
     value: string;
+    /** 현재 코드 복사 버튼 표시. 복사 성공 시 1.5초 동안 체크 아이콘 표시 */
     copyable?: boolean;
 }
 export declare function Code({ value, copyable }: CodeProps): React.JSX.Element;

package/dist/components/atoms/textarea/Textarea.d.ts

@@ -21,11 +21,11 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
      */
     wrapperRef?: React.RefObject<HTMLDivElement>;
     /**
-     * 현재 입력값 복사 버튼 표시
+     * 현재 입력값 복사 버튼 표시. 복사 성공 시 1.5초 동안 체크 아이콘 표시
      */
     copyable?: boolean;
     /**
-     * 컴포넌트 끝점에 위치시킬 추가 노드
+     * 우측 상단에 표시할 추가 버튼 등의 요소
      */
     endNode?: React.ReactNode;
     className?: string;

package/dist/components/common/datePicker/CalendarHeader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CalendarHeaderProps } from './types';
+interface Props extends CalendarHeaderProps {
+    showMonthYearDropdown?: boolean;
+}
+export default function CalendarHeader({ month: monthDate, monthIndex, monthsToShow, previousDisabled, nextDisabled, onPrevious, onNext, onMonthChange, disabled, showMonthYearDropdown, minDate, maxDate, }: Props): React.JSX.Element;
+export {};

package/dist/components/common/datePicker/CalendarPanel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CalendarPanelProps } from './types';
+import 'react-datepicker/dist/react-datepicker.css';
+import './date-picker.scss';
+export declare function CalendarPanel({ selected, startDate, endDate, onSelect, minDate, maxDate, monthsToShow, viewDate, onViewDateChange, selectionTarget, fixedHeight, appearance, showMonthYearDropdown, className, }: CalendarPanelProps): React.JSX.Element;
+export type { CalendarHeaderProps, CalendarPanelProps } from './types';

package/dist/components/common/datePicker/TimeColumn.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function TimeColumn({ label, values, value, onSelect, }: {
+    label: string;
+    values: number[];
+    value: number | null;
+    onSelect: (nextValue: number) => void;
+}): React.JSX.Element;

package/dist/components/common/datePicker/TimeDropdown.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TimeParts } from './date-picker-utils';
+interface Props {
+    label: string;
+    value: TimeParts;
+    onChange: (value: TimeParts) => void;
+    minuteStep: number;
+    amLabel: string;
+    pmLabel: string;
+    disabled?: boolean;
+}
+export default function TimeDropdown({ label, value, onChange, minuteStep, amLabel, pmLabel, disabled, }: Props): React.JSX.Element;
+export {};

package/dist/components/common/datePicker/TimePanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TimeParts } from './date-picker-utils';
+import './date-picker.scss';
+interface Props {
+    value: TimeParts;
+    minuteStep: number;
+    amLabel: string;
+    pmLabel: string;
+    onChange: (value: TimeParts) => void;
+}
+export default function TimePanel({ value, minuteStep, amLabel, pmLabel, onChange, }: Props): React.JSX.Element;
+export {};

package/dist/components/common/datePicker/date-picker-utils.d.ts

@@ -0,0 +1,11 @@
+export declare const validDay: (date?: Date | null) => Date | null;
+export declare const clampMonth: (date: Date, min: Date | null, max: Date | null) => Date;
+export interface TimeParts {
+    period: 'am' | 'pm' | null;
+    hour: number | null;
+    minute: number | null;
+}
+export declare const parseTime: (time?: string) => TimeParts;
+export declare const formatTime: ({ period, hour, minute }: TimeParts) => string | undefined;
+export declare const minuteOptions: (step: number, current: number | null) => number[];
+export declare const timeText: (time: TimeParts, amLabel?: string, pmLabel?: string) => string;

package/dist/components/common/datePicker/types.d.ts

@@ -0,0 +1,54 @@
+export interface CalendarHeaderProps {
+    /** 이 헤더가 표시하는 월 */
+    month: Date;
+    /** 첫 달은 0, 두 번째 달은 1 */
+    monthIndex: number;
+    /** 동시에 표시하는 월 수 */
+    monthsToShow: 1 | 2;
+    /** 선택 가능한 첫 날짜 */
+    minDate: Date | null;
+    /** 선택 가능한 마지막 날짜 */
+    maxDate: Date | null;
+    /** 날짜 제한이 유효하지 않아 이동과 선택을 할 수 없는 상태 */
+    disabled: boolean;
+    /** 이전 달 이동 불가 여부 */
+    previousDisabled: boolean;
+    /** 다음 달 이동 불가 여부 */
+    nextDisabled: boolean;
+    /** 이전 달로 이동 */
+    onPrevious: () => void;
+    /** 다음 달로 이동 */
+    onNext: () => void;
+    /** 이 헤더의 표시 월을 변경합니다. 두 번째 달의 offset과 날짜 제한을 반영합니다. */
+    onMonthChange: (month: Date) => void;
+}
+export interface CalendarPanelProps {
+    /** 선택한 날짜. 선택 상태는 호출부에서 보관합니다. */
+    selected?: Date | null;
+    /** 강조할 기간의 시작 날짜 */
+    startDate?: Date | null;
+    /** 강조할 기간의 종료 날짜 */
+    endDate?: Date | null;
+    /** 날짜를 선택할 때 호출합니다. 이미 선택한 날짜를 눌러도 호출합니다. */
+    onSelect: (date: Date) => void;
+    /** 선택 가능한 첫 날짜. 시간은 무시하고 경계를 포함합니다. */
+    minDate?: Date | null;
+    /** 선택 가능한 마지막 날짜. 시간은 무시하고 경계를 포함합니다. */
+    maxDate?: Date | null;
+    /** 동시에 표시할 월 수. 기본값 1 */
+    monthsToShow?: 1 | 2;
+    /** 표시 월을 외부에서 지정합니다. 생략하면 달력 내부에서 관리합니다. */
+    viewDate?: Date;
+    /** 표시 월 변경. viewDate를 지정하면 이 콜백에서 해당 값을 갱신합니다. */
+    onViewDateChange?: (date: Date) => void;
+    /** 기간 선택 중 hover 미리보기 대상. 생략하면 확정된 기간만 강조합니다. */
+    selectionTarget?: 'start' | 'end';
+    /** 매월 6주를 표시합니다. 기본값 false */
+    fixedHeight?: boolean;
+    /** 채운 선택 표시 또는 테두리 선택 표시. 기본값 solid */
+    appearance?: 'solid' | 'outline';
+    /** 연·월 드롭다운 표시 여부. 기본값 true */
+    showMonthYearDropdown?: boolean;
+    /** 루트에 추가할 클래스 */
+    className?: string;
+}

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

@@ -1,65 +1,5 @@
 import React from 'react';
+import type { CalendarProps } from './types';
 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를 띄울 수 있도록 설정
-     * @param setOpen 토글형태로 동작. children의 onClick 메서드에서 실행 필요
-     * @param open 캘린더 오픈 여부 리턴
-     */
-    children: ({ setOpen, open, }: {
-        setOpen: () => void;
-        open: boolean;
-    }) => React.ReactNode;
-    /**
-     * 최소 시작일
-     * @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, time?: CalendarTimeValue) => void;
-    className?: string;
-}
-export declare function Calendar({ children, minStartDate, mode, saveButtonContent, onSaveClick, className, ...options }: CalendarProps): React.JSX.Element;
+export declare function Calendar(props: CalendarProps): React.JSX.Element;
+export type { CalendarMode, CalendarProps, CalendarTimeValue } from './types';

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import type { CalendarProps } from './Calendar';
-import 'react-datepicker/dist/react-datepicker.css';
+import type { CalendarProps } from './types';
 type Props = Omit<CalendarProps, 'children' | 'className'> & {
     setOpen: (open: boolean) => void;
 };
-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;
+declare function DatePickerWrapper({ minStartDate, maxDate, mode, monthsToShow, showMonthYearDropdown, showTime, timeRequired, minuteStep, amLabel, pmLabel, 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

@@ -1,6 +1,5 @@
 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;

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

@@ -0,0 +1,69 @@
+import type React from 'react';
+export type CalendarMode = 'range' | 'single';
+export interface CalendarTimeValue {
+    /** 시간 설정이 켜져 있으면 HH:mm, 꺼져 있으면 undefined */
+    startTime?: string;
+    /** 기간 선택의 종료 시간 (HH:mm) */
+    endTime?: string;
+}
+export interface CalendarProps {
+    /**
+     * Maru Datepicker를 띄울 대상이 되는 컴포넌트. setOpen을 변수로 전달해서 외부에서 datepicker를 띄울 수 있도록 설정
+     * @param setOpen 토글형태로 동작. children의 onClick 메서드에서 실행 필요
+     * @param open 캘린더 오픈 여부 리턴
+     */
+    children: ({ setOpen, open, }: {
+        setOpen: () => void;
+        open: boolean;
+    }) => React.ReactNode;
+    /**
+     * 최소 시작일
+     * @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;
+    /** 시간 드롭다운의 분 간격(양의 정수). 기본값 5, 유효하지 않은 값도 5로 처리합니다. */
+    minuteStep?: number;
+    /** 시간 드롭다운의 오전 표시 문구. 기본값 오전 */
+    amLabel?: string;
+    /** 시간 드롭다운의 오후 표시 문구. 기본값 오후 */
+    pmLabel?: string;
+    saveButtonContent: string;
+    /**
+     * 캘린더 하단 버튼을 누르면 동작할 함수, 선택한 startDate와 endDate를 전달
+     * @param startDate 시작일
+     * @param endDate 마지막일
+     */
+    onSaveClick: (startDate?: string, endDate?: string, time?: CalendarTimeValue) => void;
+    className?: string;
+}

package/dist/components/molecules/dateRangePicker/DateRangeContent.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DateRangePickerProps } from './types';
+export default function DateRangeContent({ startDate, endDate, timeValue, minStartDate, maxDate, showTime, minuteStep, startLabel, endLabel, amLabel, pmLabel, cancelButtonContent, saveButtonContent, validate, onSaveClick, onClose, }: Omit<DateRangePickerProps, 'children' | 'className'> & {
+    onClose: () => void;
+}): React.JSX.Element;

package/dist/components/molecules/dateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DateRangePickerProps } from './types';
+import './date-range-picker.scss';
+export declare function DateRangePicker(props: DateRangePickerProps): React.JSX.Element;
+export type { DateRangePickerProps, DateRangeTimeValue } from './types';

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

@@ -0,0 +1 @@
+export * from './DateRangePicker';

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

@@ -0,0 +1,46 @@
+import type React from 'react';
+export interface DateRangeTimeValue {
+    /** 시작 시간 (HH:mm) */
+    startTime?: string;
+    /** 종료 시간 (HH:mm) */
+    endTime?: string;
+}
+export interface DateRangePickerProps {
+    /** 팝업 트리거. setOpen은 열림 상태를 토글합니다. */
+    children: ({ setOpen, open, }: {
+        setOpen: () => void;
+        open: boolean;
+    }) => React.ReactNode;
+    /** 선택 가능한 첫 날짜. 날짜 단위로 제한합니다. */
+    minStartDate?: Date | null;
+    /** 선택 가능한 마지막 날짜. 날짜 단위로 제한합니다. */
+    maxDate?: Date | null;
+    /** 시간 선택 표시. 기본값 true. 표시하면 시작·종료 시간이 모두 있어야 저장합니다. */
+    showTime?: boolean;
+    /** 확인 시 동기 검증. 오류 문자열이면 저장을 막습니다. 오류 문구는 자동으로 표시하지 않습니다. */
+    validate?: (startDate: string, endDate: string, time?: DateRangeTimeValue) => string | undefined;
+    /** 취소 버튼 문구. 기본값 취소 */
+    cancelButtonContent?: string;
+    /** 열 때 복원할 시작 날짜. 열린 중 변경은 다음 열기에 반영합니다. */
+    startDate?: Date | null;
+    /** 열 때 복원할 종료 날짜. 열린 중 변경은 다음 열기에 반영합니다. */
+    endDate?: Date | null;
+    /** 열 때 복원할 시작·종료 시간. 열린 중 변경은 다음 열기에 반영합니다. */
+    timeValue?: DateRangeTimeValue;
+    /** 분 간격(양의 정수). 기본값 5, 유효하지 않은 값도 5로 처리합니다. */
+    minuteStep?: number;
+    /** 시작 행 문구. 기본값 시작일 */
+    startLabel?: string;
+    /** 종료 행 문구. 기본값 종료일 */
+    endLabel?: string;
+    /** 오전 표시 문구. 기본값 오전 */
+    amLabel?: string;
+    /** 오후 표시 문구. 기본값 오후 */
+    pmLabel?: string;
+    /** 확인 버튼 문구 */
+    saveButtonContent: string;
+    /** 완성된 범위를 확인할 때 호출합니다. 날짜는 yyyy-MM-dd, 시간은 HH:mm이며 날짜 전용이면 시간 인자를 생략합니다. */
+    onSaveClick: (startDate: string, endDate: string, time?: DateRangeTimeValue) => void;
+    /** 루트에 추가할 클래스 */
+    className?: string;
+}

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from './components/atoms/toggle';
 export * from './components/atoms/tooltip';
 export * from './components/molecules/buttonGroup';
 export * from './components/molecules/calendar';
+export * from './components/molecules/dateRangePicker';
 export * from './components/molecules/dropdown';
 export * from './components/molecules/inputWithAction';
 export * from './components/molecules/modal';