sales-frontend-design-system 0.0.137 → 0.0.139

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
-import react__default, { HTMLAttributes, ReactNode, JSX, ComponentPropsWithRef, InputHTMLAttributes, LabelHTMLAttributes, PropsWithChildren, HtmlHTMLAttributes, MouseEvent as MouseEvent$1, KeyboardEvent, ElementType, ComponentPropsWithoutRef, Dispatch, SetStateAction } from 'react';
-import { PeriodType } from 'sales-frontend-utils';
+import react__default, { HTMLAttributes, ReactNode, JSX, ComponentPropsWithRef, InputHTMLAttributes, LabelHTMLAttributes, PropsWithChildren, MouseEvent as MouseEvent$1, KeyboardEvent, ElementType, ComponentPropsWithoutRef, HtmlHTMLAttributes, Dispatch, SetStateAction } from 'react';
 import * as zustand from 'zustand';
+import { PeriodType } from 'sales-frontend-utils';
+import dayjs from 'dayjs';
 
 /**
  * Accordion 컴포넌트/훅 전반에서 사용하는 타입 정의
@@ -378,255 +379,6 @@ declare const useDropDown: (props?: UseDropDownProps) => {
     orientation: "portrait" | "landscape";
 };
 
-interface ComboBoxProps extends ComboBoxItemProps {
-    rootProps?: ComboBoxBoxProps;
-}
-interface ComboBoxBoxProps extends ComponentPropsWithRef<'div'> {
-}
-interface ComboBoxItemProps extends Omit<ComponentPropsWithRef<'input'>, 'size'>, FieldControlContextProps {
-    /** 사이즈 */
-    size?: 'xsmall' | 'small' | 'medium' | 'large';
-    /** 에러여부 */
-    error?: boolean;
-    /** 선택여부 */
-    isSelected?: boolean;
-    /** 아이콘 명 */
-    icon?: 'arrow' | 'calendar' | 'search';
-    /** 아이콘 클래스명  */
-    iconClassName?: string;
-    /** 클릭이벤트 */
-    onClick?: (e: React.MouseEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
-}
-
-/**
- * Combobox (버튼 모양의 Input)
- * ComboBox를 통해서 선택할 수 있는 UI를 호출하여 선택하도록 한다.
- * @param param0
- * @returns
- */
-declare const ComboBoxItem: ({ type, className, name, isSelected, icon, iconClassName, onClick, onKeyDown, children, validator, ...props }: ComboBoxItemProps) => react__default.JSX.Element;
-declare const ComboBox: {
-    ({ children, rootProps, ...itemProps }: ComboBoxProps): react__default.JSX.Element;
-    Box: ({ children, className, ...rest }: ComboBoxBoxProps) => react__default.JSX.Element;
-    Item: ({ type, className, name, isSelected, icon, iconClassName, onClick, onKeyDown, children, validator, ...props }: ComboBoxItemProps) => react__default.JSX.Element;
-};
-
-/**
- * ComboBox 래퍼
- * @param param0
- * @returns
- */
-declare const ComboBoxBox: ({ children, className, ...rest }: ComboBoxBoxProps) => react.JSX.Element;
-
-type CalendarNavigationType = 'month-only' | 'year-and-month';
-type CalendarNavigationButton = 'nextMonth' | 'prevMonth' | 'nextYear' | 'prevYear';
-interface PeriodDate {
-    /** 기간시작 날짜 */
-    startDate?: Date;
-    /** 기간종료 날짜 */
-    endDate?: Date;
-}
-interface PeriodText {
-    /** 기간시작 필드 값*/
-    startDate?: string;
-    /** 기간종료 필드 값 */
-    endDate?: string;
-}
-interface DatePickerRange {
-    /** 선택 가능한 최소 날짜 */
-    min?: Date;
-    /** 선택 가능한 최대 날짜 */
-    max?: Date;
-}
-interface PeriodProps {
-    /** 기간선택 기본값 옵션 */
-    periodType?: PeriodType;
-}
-interface PeriodReturn {
-    /** 선택된 기간 */
-    period: PeriodDate;
-    /** 선택 기간 변경 */
-    updatePeriod: (newDate: Required<PeriodDate>) => void;
-}
-type UsePeriodProps = PeriodProps;
-type UsePeriodReturn = PeriodReturn;
-interface DatePickerInputHtmlProps extends ComboBoxItemProps {
-}
-interface DatePickerCalendarProps extends Pick<DatePickerBaseProps, 'mobile' | 'navigationType'> {
-    isToday?: (day: number) => boolean;
-    isTempSelected?: (day: number) => boolean;
-    isFinalSelected?: (day: number) => boolean;
-    isCtaDisabled?: boolean;
-    headerTitle?: string;
-    /** 캘린더 타이틀 텍스트 */
-    calendarTitle?: string;
-    /** 캘린더 CTA버튼 텍스트 */
-    calendarCtaText?: string;
-    /** 캘린더 하단 CTA버튼 클릭시 호출되는 이벤트 핸들러 */
-    onCtaClick?: () => void;
-    onDayClick?: (day: string | number) => void;
-    /** current를 기준으로 생성된 달력 데이터 */
-    weekCalendarList?: (string | number)[][];
-    /** 다음달 이동 클릭 이벤트 */
-    onNextMonthClick?: (curDate?: number) => Date;
-    /** 이전달 이동 클릭 이벤트 */
-    onPrevMonthClick?: (curDate?: number) => Date;
-    /** 다음해 이동 클릭 이벤트 */
-    onNextYearClick?: () => Date;
-    /** 이전해 이동 클릭 이벤트 */
-    onPrevYearClick?: () => Date;
-}
-type DatePickerCalendarHtmlProps = Assign<HTMLProps<'div'>, DatePickerCalendarProps>;
-interface CalendarProps extends DatePickerCalendarProps {
-    /** 달력 생성을 위한 기준 날짜 */
-    current: Date;
-    /** 달력 생성을 위한 기준 날짜 변경*/
-    updateCurrent: (newDate: Date) => void;
-    /** 달력에서 선택된 날짜 */
-    selectedDate?: Date;
-    /** 달력에서 선택된 날짜 변경*/
-    updateSelectedDate: (newDate: Date) => void;
-    /** 달력에서 임시 선택된 날짜 */
-    tempSelectedDate?: Date;
-    /** 달력에서 임시 선택된 날짜 변경*/
-    updateTempSelectedDate: (newDate: Date) => void;
-}
-interface DatePickerBaseProps extends Omit<FieldControlContextProps, 'validator'>, DatePickerRange {
-    /** 모바일 레이아웃 여부 */
-    mobile?: boolean;
-    /**  캘린더 상단 네비게이션 버튼 유형 설정 */
-    navigationType?: CalendarNavigationType;
-    /** 날짜 유효성 검사 함수 (true 반환 시 선택 가능) */
-    validator?: () => boolean;
-}
-interface DatePickerSingleProps extends DatePickerBaseProps {
-    /** 처음 렌더링시 표시할 기본 날짜 */
-    defaultValue?: Date;
-    /** 입력 필드에 값이 없을 때 표시되는 안내 텍스트 */
-    placeholder?: string;
-    /** 캘린더 타이틀 텍스트 */
-    calendarTitle?: string;
-    /** 캘린더 CTA버튼 텍스트 */
-    calendarCtaText?: string;
-    /** 선택된 날짜 값이 변경될 때 호출되는 이벤트 핸들러  */
-    onValueChange?: (newValue: Date) => void;
-    onCtaClick?: () => void;
-}
-type DatePickerSingleHtmlProps = Assign<ComponentPropsWithRef<'div'>, DatePickerSingleProps> & {
-    datepickerInputProps?: DatePickerInputHtmlProps;
-    name?: string;
-};
-interface DatePickerRangeHtmlProps extends Omit<DatePickerSingleHtmlProps, 'defaultValue' | 'placeholder' | 'calendarTitle' | 'calendarCtaText' | 'onValueChange'> {
-    defaultValue?: PeriodDate;
-    placeholder?: PeriodText;
-    calendarTitle?: PeriodText;
-    calendarCtaText?: PeriodText;
-    onValueChange?: (value: PeriodDate) => void;
-}
-interface DatePickerBaseContext extends Omit<FieldControlContextProps, 'validator'>, Pick<DatePickerBaseProps, 'mobile' | 'navigationType'> {
-    triggerRef: React.RefObject<any>;
-    isOpen: boolean;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    DropDown: React.ComponentType<PropsWithChildren<Omit<DropDownProps, 'isOpen' | 'dropdownRef' | 'position'>>>;
-    /** 선택 가능한 기간 값 */
-    range: DatePickerRange;
-    /** 선택 가능한 기간 값 변경 */
-    setRange: React.Dispatch<React.SetStateAction<DatePickerRange>>;
-    /** current를 기준으로 생성된 달력 데이터 */
-    weekCalendarList: (string | number)[][];
-    /** 다음달 이동 클릭 이벤트 */
-    onNextMonthClick: (curDate?: number) => Date;
-    /** 이전달 이동 클릭 이벤트 */
-    onPrevMonthClick: (curDate?: number) => Date;
-    /** 다음해 이동 클릭 이벤트 */
-    onNextYearClick: () => Date;
-    /** 이전해 이동 클릭 이벤트 */
-    onPrevYearClick: () => Date;
-}
-interface DatePickerSingleContext extends DatePickerBaseContext {
-    /** 달력 생성을 위한 기준 날짜 */
-    current: Date;
-    /** 달력 생성을 위한 기준 날짜 변경 */
-    setCurrent: React.Dispatch<React.SetStateAction<Date>>;
-    /** 달력에서 임시 선택된 날짜 */
-    tempSelectedDate?: Date;
-    /** 달력에서 임시 선택된 날짜 변경 */
-    setTempSelectedDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-    /** 달력에서 선택된 날짜 */
-    selectedDate?: Date;
-    /** 달력에서 선택된 날짜 변경 */
-    setSelectedDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-    /** 입력필드에 입력된 날짜 */
-    inputValue: string;
-    /** 입력필드에 입력된 날짜 변경*/
-    setInputValue: React.Dispatch<React.SetStateAction<string>>;
-    /** 처음 렌더링시 표시할 기본 날짜 */
-    defaultValue?: Date;
-    /** 입력 필드에 값이 없을 때 표시되는 안내 텍스트 */
-    placeholder?: string;
-    /** 캘린더 타이틀 텍스트 */
-    calendarTitle?: string;
-    /** 캘린더 CTA버튼 텍스트 */
-    calendarCtaText?: string;
-    /** 선택된 날짜 값이 변경될 때 호출되는 이벤트 핸들러  */
-    onValueChange?: (newValue: Date) => void;
-}
-type UseDatePickerProps = DatePickerSingleProps;
-type UseDateRangePickerPickerProps = DatePickerSingleHtmlProps;
-type UseDatePickerReturn = DatePickerSingleContext;
-
-interface HelperTextProps extends HTMLAttributes<HTMLDivElement>, SizeProps<'medium' | 'small'> {
-    variant: 'caption' | 'error';
-    /** 무조건 보여주기 여부 */
-    forceShow?: boolean;
-}
-
-/**
- * Form Field 에서 사용될 헬퍼 텍스트입니다.
- * @param param0
- * @returns
- */
-declare const HelperText: ({ variant, children, className, size, forceShow, ...rest }: HelperTextProps) => react__default.JSX.Element;
-
-interface DateRangePickerRootProps {
-    defaultValue?: PeriodDate;
-    placeholder?: PeriodText;
-    calendarTitle?: PeriodText;
-    calendarCtaText?: PeriodText;
-    onValueChange?: (value: PeriodDate) => void;
-    children: react__default.ReactNode;
-    className?: string;
-}
-declare const DateRangePickerExperimental: (({ defaultValue, placeholder, calendarTitle, calendarCtaText, onValueChange, children, className }: DateRangePickerRootProps) => react__default.JSX.Element) & {
-    StartDateInput: ({ datepickerInputProps, ...props }: DatePickerSingleHtmlProps) => react__default.JSX.Element;
-    EndDateInput: ({ datepickerInputProps, ...props }: DatePickerSingleHtmlProps) => react__default.JSX.Element;
-    Separator: ({ className, ...rest }: HtmlHTMLAttributes<HTMLSpanElement>) => react__default.JSX.Element;
-    HelperText: ({ variant, children, className, size, forceShow, ...rest }: HelperTextProps) => react__default.JSX.Element;
-};
-
-declare const DatePicker: {
-    ({ datepickerInputProps, ...rest }: DatePickerSingleHtmlProps): react__default.JSX.Element;
-    Calendar: (props: DatePickerCalendarHtmlProps) => react__default.JSX.Element;
-    Input: ({ ...props }: DatePickerInputHtmlProps) => react__default.JSX.Element;
-    Root: ({ children, max, min, ...props }: DatePickerSingleHtmlProps) => react__default.JSX.Element;
-};
-declare const DateRangePicker: ({ defaultValue, placeholder, calendarTitle, calendarCtaText, onValueChange, ...props }: Omit<DatePickerSingleHtmlProps, "defaultValue" | "placeholder" | "calendarTitle" | "calendarCtaText" | "onValueChange"> & {
-    defaultValue?: PeriodDate;
-    placeholder?: PeriodText;
-    calendarTitle?: PeriodText;
-    calendarCtaText?: PeriodText;
-    onValueChange?: (value: PeriodDate) => void;
-}) => react__default.JSX.Element;
-
-declare const DatePickerCalendar: (props: DatePickerCalendarHtmlProps) => react__default.JSX.Element;
-
-declare const DatePickerContext: react__default.Context<DatePickerSingleContext | undefined>;
-declare const useDatePickerContext: () => DatePickerSingleContext;
-
-declare const useDatePicker: (props: UseDatePickerProps) => UseDatePickerReturn;
-
-declare const usePeriod: ({ periodType }: UsePeriodProps) => UsePeriodReturn;
-
 type FeedbackSize = 'medium' | 'small';
 interface FeedbackRootProps extends React.ComponentProps<'div'> {
 }
@@ -752,20 +504,61 @@ declare const Input: {
 };
 
 /**
- * Input Box (자식 Input을 컨트롤 한다.)
+ * Input Box (자식 Input을 컨트롤 한다.)
+ * @param param0
+ * @returns
+ */
+declare const InputBox: ({ children, clearable, className, endElement, onClear, ...rest }: InputBoxProps) => react__default.JSX.Element;
+
+declare const core_Input: typeof Input;
+declare const core_InputBox: typeof InputBox;
+type core_InputBoxProps = InputBoxProps;
+type core_InputProps = InputProps;
+declare namespace core {
+  export { core_Input as Input, core_InputBox as InputBox };
+  export type { core_InputBoxProps as InputBoxProps, core_InputProps as InputProps };
+}
+
+interface ComboBoxProps extends ComboBoxItemProps {
+    rootProps?: ComboBoxBoxProps;
+}
+interface ComboBoxBoxProps extends ComponentPropsWithRef<'div'> {
+}
+interface ComboBoxItemProps extends Omit<ComponentPropsWithRef<'input'>, 'size'>, FieldControlContextProps {
+    /** 사이즈 */
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    /** 에러여부 */
+    error?: boolean;
+    /** 선택여부 */
+    isSelected?: boolean;
+    /** 아이콘 명 */
+    icon?: 'arrow' | 'calendar' | 'search';
+    /** 아이콘 클래스명  */
+    iconClassName?: string;
+    onValueChange?: (value: string) => void;
+    /** 클릭이벤트 */
+    onClick?: (e: React.MouseEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * Combobox (버튼 모양의 Input)
+ * ComboBox를 통해서 선택할 수 있는 UI를 호출하여 선택하도록 한다.
+ * @param param0
+ * @returns
+ */
+declare const ComboBoxItem: ({ type, className, name, isSelected, icon, iconClassName, onClick, onKeyDown, children, validator, value, onValueChange, inputMode, ...props }: ComboBoxItemProps) => react__default.JSX.Element;
+declare const ComboBox: {
+    ({ children, rootProps, ...itemProps }: ComboBoxProps): react__default.JSX.Element;
+    Box: ({ children, className, ...rest }: ComboBoxBoxProps) => react__default.JSX.Element;
+    Item: ({ type, className, name, isSelected, icon, iconClassName, onClick, onKeyDown, children, validator, value, onValueChange, inputMode, ...props }: ComboBoxItemProps) => react__default.JSX.Element;
+};
+
+/**
+ * ComboBox 래퍼
  * @param param0
  * @returns
  */
-declare const InputBox: ({ children, clearable, className, endElement, onClear, ...rest }: InputBoxProps) => react__default.JSX.Element;
-
-declare const core_Input: typeof Input;
-declare const core_InputBox: typeof InputBox;
-type core_InputBoxProps = InputBoxProps;
-type core_InputProps = InputProps;
-declare namespace core {
-  export { core_Input as Input, core_InputBox as InputBox };
-  export type { core_InputBoxProps as InputBoxProps, core_InputProps as InputProps };
-}
+declare const ComboBoxBox: ({ children, className, ...rest }: ComboBoxBoxProps) => react.JSX.Element;
 
 /**
  * Combo List
@@ -832,6 +625,19 @@ interface TextFieldProps extends InputProps {
  */
 declare const TextField: ({ value, name, rootProps, onChange, validator, error, ...inputProps }: TextFieldProps) => react.JSX.Element;
 
+interface HelperTextProps extends HTMLAttributes<HTMLDivElement>, SizeProps<'medium' | 'small'> {
+    variant: 'caption' | 'error';
+    /** 무조건 보여주기 여부 */
+    forceShow?: boolean;
+}
+
+/**
+ * Form Field 에서 사용될 헬퍼 텍스트입니다.
+ * @param param0
+ * @returns
+ */
+declare const HelperText: ({ variant, children, className, size, forceShow, ...rest }: HelperTextProps) => react__default.JSX.Element;
+
 interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 }
 
@@ -1756,6 +1562,327 @@ interface SimpleTooltipProps extends BaseComponentProps {
  */
 declare const Tooltip: ({ visible: externalVisible, type, duration, notch, title, text, onClose, children, className, showHeadIcon, showCloseIcon, showTextButton, textButtonLabel, onTextButtonClick, ...rest }: TooltipProps) => react.JSX.Element;
 
+type CalendarNavigationType = 'month-only' | 'year-and-month';
+type CalendarNavigationButton = 'nextMonth' | 'prevMonth' | 'nextYear' | 'prevYear';
+interface PeriodDate {
+    /** 기간시작 날짜 */
+    startDate?: Date;
+    /** 기간종료 날짜 */
+    endDate?: Date;
+}
+interface PeriodText {
+    /** 기간시작 필드 값*/
+    startDate?: string;
+    /** 기간종료 필드 값 */
+    endDate?: string;
+}
+interface DatePickerRange {
+    /** 선택 가능한 최소 날짜 */
+    min?: Date;
+    /** 선택 가능한 최대 날짜 */
+    max?: Date;
+}
+interface PeriodProps {
+    /** 기간선택 기본값 옵션 */
+    periodType?: PeriodType;
+}
+interface PeriodReturn {
+    /** 선택된 기간 */
+    period: PeriodDate;
+    /** 선택 기간 변경 */
+    updatePeriod: (newDate: Required<PeriodDate>) => void;
+}
+type UsePeriodProps = PeriodProps;
+type UsePeriodReturn = PeriodReturn;
+interface DatePickerInputHtmlProps extends ComboBoxItemProps {
+}
+interface DatePickerCalendarProps extends Pick<DatePickerBaseProps, 'mobile' | 'navigationType'> {
+    isToday?: (day: number) => boolean;
+    isTempSelected?: (day: number) => boolean;
+    isFinalSelected?: (day: number) => boolean;
+    isCtaDisabled?: boolean;
+    headerTitle?: string;
+    /** 캘린더 타이틀 텍스트 */
+    calendarTitle?: string;
+    /** 캘린더 CTA버튼 텍스트 */
+    calendarCtaText?: string;
+    /** 캘린더 하단 CTA버튼 클릭시 호출되는 이벤트 핸들러 */
+    onCtaClick?: () => void;
+    onDayClick?: (day: string | number) => void;
+    /** current를 기준으로 생성된 달력 데이터 */
+    weekCalendarList?: (string | number)[][];
+    /** 다음달 이동 클릭 이벤트 */
+    onNextMonthClick?: (curDate?: number) => Date;
+    /** 이전달 이동 클릭 이벤트 */
+    onPrevMonthClick?: (curDate?: number) => Date;
+    /** 다음해 이동 클릭 이벤트 */
+    onNextYearClick?: () => Date;
+    /** 이전해 이동 클릭 이벤트 */
+    onPrevYearClick?: () => Date;
+}
+type DatePickerCalendarHtmlProps = Assign<HTMLProps<'div'>, DatePickerCalendarProps>;
+interface CalendarProps extends DatePickerCalendarProps {
+    /** 달력 생성을 위한 기준 날짜 */
+    current: Date;
+    /** 달력 생성을 위한 기준 날짜 변경*/
+    updateCurrent: (newDate: Date) => void;
+    /** 달력에서 선택된 날짜 */
+    selectedDate?: Date;
+    /** 달력에서 선택된 날짜 변경*/
+    updateSelectedDate: (newDate: Date) => void;
+    /** 달력에서 임시 선택된 날짜 */
+    tempSelectedDate?: Date;
+    /** 달력에서 임시 선택된 날짜 변경*/
+    updateTempSelectedDate: (newDate: Date) => void;
+}
+interface DatePickerBaseProps extends Omit<FieldControlContextProps, 'validator'>, DatePickerRange {
+    /** 모바일 레이아웃 여부 */
+    mobile?: boolean;
+    /**  캘린더 상단 네비게이션 버튼 유형 설정 */
+    navigationType?: CalendarNavigationType;
+    /** 날짜 유효성 검사 함수 (true 반환 시 선택 가능) */
+    validator?: () => boolean;
+}
+interface DatePickerSingleProps extends DatePickerBaseProps {
+    /** 처음 렌더링시 표시할 기본 날짜 */
+    defaultValue?: Date;
+    /** 입력 필드에 값이 없을 때 표시되는 안내 텍스트 */
+    placeholder?: string;
+    /** 캘린더 타이틀 텍스트 */
+    calendarTitle?: string;
+    /** 캘린더 CTA버튼 텍스트 */
+    calendarCtaText?: string;
+    /** 선택된 날짜 값이 변경될 때 호출되는 이벤트 핸들러  */
+    onValueChange?: (newValue: Date) => void;
+    onCtaClick?: () => void;
+}
+type DatePickerSingleHtmlProps = Assign<ComponentPropsWithRef<'div'>, DatePickerSingleProps> & {
+    datepickerInputProps?: DatePickerInputHtmlProps;
+    name?: string;
+};
+interface DatePickerRangeHtmlProps extends Omit<DatePickerSingleHtmlProps, 'defaultValue' | 'placeholder' | 'calendarTitle' | 'calendarCtaText' | 'onValueChange'> {
+    defaultValue?: PeriodDate;
+    placeholder?: PeriodText;
+    calendarTitle?: PeriodText;
+    calendarCtaText?: PeriodText;
+    onValueChange?: (value: PeriodDate) => void;
+}
+interface DatePickerBaseContext extends Omit<FieldControlContextProps, 'validator'>, Pick<DatePickerBaseProps, 'mobile' | 'navigationType'> {
+    triggerRef: React.RefObject<any>;
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    DropDown: React.ComponentType<PropsWithChildren<Omit<DropDownProps, 'isOpen' | 'dropdownRef' | 'position'>>>;
+    /** 선택 가능한 기간 값 */
+    range: DatePickerRange;
+    /** 선택 가능한 기간 값 변경 */
+    setRange: React.Dispatch<React.SetStateAction<DatePickerRange>>;
+    /** current를 기준으로 생성된 달력 데이터 */
+    weekCalendarList: (string | number)[][];
+    /** 다음달 이동 클릭 이벤트 */
+    onNextMonthClick: (curDate?: number) => Date;
+    /** 이전달 이동 클릭 이벤트 */
+    onPrevMonthClick: (curDate?: number) => Date;
+    /** 다음해 이동 클릭 이벤트 */
+    onNextYearClick: () => Date;
+    /** 이전해 이동 클릭 이벤트 */
+    onPrevYearClick: () => Date;
+}
+interface DatePickerSingleContext extends DatePickerBaseContext {
+    /** 달력 생성을 위한 기준 날짜 */
+    current: Date;
+    /** 달력 생성을 위한 기준 날짜 변경 */
+    setCurrent: React.Dispatch<React.SetStateAction<Date>>;
+    /** 달력에서 임시 선택된 날짜 */
+    tempSelectedDate?: Date;
+    /** 달력에서 임시 선택된 날짜 변경 */
+    setTempSelectedDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    /** 달력에서 선택된 날짜 */
+    selectedDate?: Date;
+    /** 달력에서 선택된 날짜 변경 */
+    setSelectedDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    /** 입력필드에 입력된 날짜 */
+    inputValue: string;
+    /** 입력필드에 입력된 날짜 변경*/
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+    /** 처음 렌더링시 표시할 기본 날짜 */
+    defaultValue?: Date;
+    /** 입력 필드에 값이 없을 때 표시되는 안내 텍스트 */
+    placeholder?: string;
+    /** 캘린더 타이틀 텍스트 */
+    calendarTitle?: string;
+    /** 캘린더 CTA버튼 텍스트 */
+    calendarCtaText?: string;
+    /** 선택된 날짜 값이 변경될 때 호출되는 이벤트 핸들러  */
+    onValueChange?: (newValue: Date) => void;
+}
+type UseDatePickerProps = DatePickerSingleProps;
+type UseDateRangePickerPickerProps = DatePickerSingleHtmlProps;
+type UseDatePickerReturn = DatePickerSingleContext;
+
+interface DateRangePickerRootProps {
+    defaultValue?: PeriodDate;
+    placeholder?: PeriodText;
+    calendarTitle?: PeriodText;
+    calendarCtaText?: PeriodText;
+    onValueChange?: (value: PeriodDate) => void;
+    children: react__default.ReactNode;
+    className?: string;
+}
+declare const DateRangePickerExperimental: (({ defaultValue, placeholder, calendarTitle, calendarCtaText, onValueChange, children, className }: DateRangePickerRootProps) => react__default.JSX.Element) & {
+    StartDateInput: ({ datepickerInputProps, ...props }: DatePickerSingleHtmlProps) => react__default.JSX.Element;
+    EndDateInput: ({ datepickerInputProps, ...props }: DatePickerSingleHtmlProps) => react__default.JSX.Element;
+    Separator: ({ className, ...rest }: HtmlHTMLAttributes<HTMLSpanElement>) => react__default.JSX.Element;
+    HelperText: ({ variant, children, className, size, forceShow, ...rest }: HelperTextProps) => react__default.JSX.Element;
+};
+
+declare const DatePicker: {
+    ({ datepickerInputProps, ...rest }: DatePickerSingleHtmlProps): react__default.JSX.Element;
+    Calendar: (props: DatePickerCalendarHtmlProps) => react__default.JSX.Element;
+    Input: ({ ...props }: DatePickerInputHtmlProps) => react__default.JSX.Element;
+    Root: ({ children, max, min, ...props }: DatePickerSingleHtmlProps) => react__default.JSX.Element;
+};
+declare const DateRangePicker: ({ defaultValue, placeholder, calendarTitle, calendarCtaText, onValueChange, ...props }: Omit<DatePickerSingleHtmlProps, "defaultValue" | "placeholder" | "calendarTitle" | "calendarCtaText" | "onValueChange"> & {
+    defaultValue?: PeriodDate;
+    placeholder?: PeriodText;
+    calendarTitle?: PeriodText;
+    calendarCtaText?: PeriodText;
+    onValueChange?: (value: PeriodDate) => void;
+}) => react__default.JSX.Element;
+
+declare const DatePickerCalendar$1: (props: DatePickerCalendarHtmlProps) => react__default.JSX.Element;
+
+declare const DatePickerContext: react__default.Context<DatePickerSingleContext | undefined>;
+declare const useDatePickerContext: () => DatePickerSingleContext;
+
+declare const useDatePicker: (props: UseDatePickerProps) => UseDatePickerReturn;
+
+declare const usePeriod: ({ periodType }: UsePeriodProps) => UsePeriodReturn;
+
+type CalendarNavigationTypeRenew = 'month-only' | 'year-and-month';
+/**
+ * <DatePickerSingle /> 컴포넌트에서 사용하는 props
+ */
+interface DatePickerSingleComponentPropsRenew {
+    dropdownProps?: {
+        triggerRef?: React.RefObject<any>;
+        isOpen?: boolean;
+        setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+        DropDown?: ReturnType<typeof useDropDown>['DropDown'];
+        classname?: string;
+    };
+    inputProps?: {
+        comboBoxItemProps?: ComboBoxItemProps;
+        fieldControlContextProps?: FieldControlContextProps;
+        helperTextProps?: HelperTextProps;
+    };
+    navigationProps?: {
+        /**  캘린더 상단 네비게이션 버튼 유형 설정 */
+        navigationType?: CalendarNavigationTypeRenew;
+        calendarTitle?: string;
+        headerTitle?: string;
+        /** 달력 생성을 위한 기준 날짜 */
+        current?: dayjs.Dayjs;
+        /** 달력 생성을 위한 기준 날짜 변경 */
+        setCurrent?: React.Dispatch<React.SetStateAction<dayjs.Dayjs>>;
+    };
+    calendarProps?: {
+        /**  최상위 React div 에 전달할 props */
+        divProps?: React.HTMLAttributes<HTMLDivElement>;
+        /** 선택 가능한 최소 날짜 */
+        min?: dayjs.Dayjs;
+        /** 선택 가능한 최대 날짜 */
+        max?: dayjs.Dayjs;
+        isCtaDisabled?: boolean;
+        /** 캘린더 CTA버튼 텍스트 */
+        calendarCtaText?: string;
+        /** 캘린더 하단 CTA버튼 클릭시 호출되는 이벤트 핸들러 */
+        onCtaClick?: () => void;
+        onDayClick?: (day: dayjs.Dayjs) => void;
+        /** current를 기준으로 생성된 달력 데이터 */
+        weekCalendarList?: dayjs.Dayjs[];
+        /** 달력에서 선택된 날짜 */
+        selectedDate?: dayjs.Dayjs;
+        /** 달력에서 선택된 날짜 변경 */
+        setSelectedDate?: (value: dayjs.Dayjs) => void;
+        /** 입력필드에 입력된 날짜 */
+        inputValue?: string;
+        /** 입력필드에 입력된 날짜 변경*/
+        setInputValue?: (value: string) => void;
+        /** 달력에서 임시 선택된 날짜 */
+        tempSelectedDate?: dayjs.Dayjs;
+        /** 달력에서 임시 선택된 날짜 변경 */
+        setTempSelectedDate?: (value: dayjs.Dayjs) => void;
+    };
+    /** 처음 렌더링시 표시할 기본 날짜 */
+    defaultValue?: dayjs.Dayjs;
+    /** 입력필드에 표시할 날짜 형식 */
+    inputFormat?: string;
+    /** 모바일 레이아웃 여부 */
+    mobile?: boolean;
+    /** 날짜 유효성 검사 함수 (true 반환 시 선택 가능) */
+    validator?: () => boolean;
+    validatorName?: string;
+    /** 선택된 날짜 값이 변경될 때 호출되는 이벤트 핸들러  */
+    onValueChange?: (newValue: dayjs.Dayjs) => void;
+}
+/**
+ * <DatePickerRange /> 컴포넌트에서 사용하는 props
+ */
+interface DatePickerRangeComponentProps {
+    startDateProps?: DatePickerSingleComponentPropsRenew;
+    endDateProps?: DatePickerSingleComponentPropsRenew;
+}
+
+declare function DatePickerCalendar(props?: DatePickerSingleComponentPropsRenew['calendarProps']): react.JSX.Element | null;
+
+interface CtaButtonProps {
+    onCtaClick?: (date: dayjs.Dayjs) => void;
+    calendarCtaText?: string;
+    mobile?: boolean;
+    isCtaDisabled?: boolean;
+}
+declare function DatePickerCtaBottomButton(props: CtaButtonProps): react.JSX.Element | null;
+
+declare function DatePickerDropdown({ children, ...rest }: PropsWithChildren<DatePickerSingleComponentPropsRenew['dropdownProps']>): react.JSX.Element | null;
+
+type DatePickerNavigationProps = DatePickerSingleComponentPropsRenew['navigationProps'] & {
+    mobile?: DatePickerSingleComponentPropsRenew['mobile'];
+};
+declare function DatePickerNavigation(props?: DatePickerNavigationProps): react.JSX.Element | null;
+
+declare function DatePickerRoot({ children, ...props }: DatePickerSingleComponentPropsRenew & PropsWithChildren): react.JSX.Element;
+
+declare function DatePickerSingleRenew(props?: DatePickerSingleComponentPropsRenew): react__default.JSX.Element;
+declare namespace DatePickerSingleRenew {
+    var Calendar: typeof DatePickerCalendar;
+    var Dropdown: typeof DatePickerDropdown;
+    var Input: (props?: DatePickerSingleComponentPropsRenew["inputProps"]) => react__default.JSX.Element | null;
+    var Root: typeof DatePickerRoot;
+    var Navigation: typeof DatePickerNavigation;
+    var CtaBottomButton: typeof DatePickerCtaBottomButton;
+}
+
+declare function DatePickerRangeRenew(props?: DatePickerRangeComponentProps): react__default.JSX.Element;
+
+declare const DAY_LIST: string[];
+
+declare const contextDefaultProps: DatePickerSingleComponentPropsRenew;
+declare const DatePickerContextRenew: react.Context<DatePickerSingleComponentPropsRenew>;
+declare const useDatePickerContextRenew: (props?: DatePickerSingleComponentPropsRenew) => DatePickerSingleComponentPropsRenew;
+
+/** calendar 날짜 데이터 생성
+ *  year, month 에 맞는 해당월의 Date 배열을 리턴
+ * 첫주와 마지막주는 이전월과 다음월의 날짜로 채운다.
+ */
+declare function generateCalendarGridDayInfo(year: number, month: number): dayjs.Dayjs[];
+declare const handleDayClick: (dayInfo: dayjs.Dayjs, context: DatePickerSingleComponentPropsRenew, isTempSelected?: boolean) => void;
+declare const isSameDay: (day: dayjs.Dayjs, current: dayjs.Dayjs) => boolean;
+declare const isToday: (day: dayjs.Dayjs) => boolean;
+declare const isTempSelected: (day: dayjs.Dayjs, tempSelectedDate?: dayjs.Dayjs) => boolean;
+declare const isFinalSelected: (day: dayjs.Dayjs, selectedDate?: dayjs.Dayjs) => boolean;
+declare const isDisabled: (day: dayjs.Dayjs, min?: dayjs.Dayjs, max?: dayjs.Dayjs) => boolean;
+declare function mergeDeep(target: any, source: any): any;
+
 interface SelectProps extends Omit<ComboBoxProps, 'onChange' | 'onClick'> {
     /** 선택된 값 */
     value?: string;
@@ -1811,5 +1938,5 @@ declare const Select: {
     Option: ({ value: optionValue, children, disabled, hover, className, onClick, ...props }: OptionProps) => react__default.JSX.Element;
 };
 
-export { Accordion, BottomBar, Button, Checkbox, CheckboxButton, Chip, ChipGroup, CommandModalProvider, DatePicker, DatePickerCalendar, DatePickerContext, DateRangePicker, DateRangePickerExperimental, DropDown, Feedback, core as FormCore, field as FormField, Header, HeaderIcon, Icon, IconButton, Image, List, ListItem, Loading, Modal, ModalStack, ModalUtils, Notification, Pagination, PaginationContext, Radio, RadioGroup, Segment, SegmentContext, SegmentGroup, Select, Skeleton, Stepper, Tab, TabGroup, Table, Tag, TextButton, Toast, Tooltip, headerIconClassName, useAccordion, useAccordionContext, useChip, useCommandModalStore, useDatePicker, useDatePickerContext, useDropDown, useFormValidator, useModalState, usePagination, usePaginationContext, usePeriod, usePreventInteraction, useRightPadding, useSegment, useSegmentContext };
-export type { AccordionContentProps, AccordionContextValue, AccordionHeaderButtonProps, AccordionHeaderDivProps, AccordionItemForHook, AccordionItemProps, AccordionRootProps, AnchorHtmlProps, BaseComponentProps, BottomBarDesktopProps, BottomBarMobileProps, ButtonAppearance, ButtonBaseProps, ButtonHtmlProps, ButtonProps, ButtonSize, ButtonVariant, ButtonWidth, CalendarNavigationButton, CalendarNavigationType, CalendarProps, CheckboxButtonProps, CheckboxIconProps, CheckboxProps, ChipAppearance, ChipBaseProps, ChipGroupHtmlProps, ChipGroupProps, ChipItemHtmlProps, ChipItemProps, ChipItems, ChipRootHtmlProps, ChipSize, ChipVariant, DatePickerBaseContext, DatePickerBaseProps, DatePickerCalendarHtmlProps, DatePickerCalendarProps, DatePickerInputHtmlProps, DatePickerRange, DatePickerRangeHtmlProps, DatePickerSingleContext, DatePickerSingleHtmlProps, DatePickerSingleProps, DefaultTooltipProps, DropDownManager, DropDownProps, DropDownSize, DropDownSpecificProps, DropDownWidth, DropdownType, HeaderIconProps, HeaderProps, IChipContext, IListItemProps, IListProps, ISelectContext, IconButtonAppearance, IconButtonHtmlProps, IconButtonProps, IconDir, IconProps, ImageProps, ListItemProps, ListProps, LoadingContentsProps, LoadingDotsProps, LoadingPositionalProps, LoadingProcessProps, LoadingWaitProps, ModalBaseProps, ModalBodyProps, ModalContentProps, ModalContextProps, ModalFooterProps, ModalHeaderProps, ModalOverlayProps, ModalProps, ModalRootProps, ModalStackItem, ModalState, ModalStateOptions, ModalStore, ModalStoreItem, NotificationHtmlProps, NotificationInnerProps, NotificationProps, NotificationTriggerProps, NotificationType, OptionProps, PaginationContextProps, PaginationHtmlProps, PaginationInnerHtmlProps, PaginationProps, PaginationRootProviderProps, PeriodDate, PeriodProps, PeriodReturn, PeriodText, RadioItemProps, RadioRootProps, SegmentAlign, SegmentAppearance, SegmentBaseProps, SegmentContextProps, SegmentGroupHtmlProps, SegmentGroupProps, SegmentItemHtmlProps, SegmentItemProps, SegmentItems, SegmentRootHtmlProps, SegmentSize, SelectProps, SimpleToastProps, SimpleTooltipProps, SizeToken, SkeletonProps, StepperProps, TabGroupProps, TabItemProps, TabItemSpecificProps, TabRootContextProps, TabRootProps, TabScroll, TabSize, TabVariant, TableHtmlProps, TableProps, TagProps, TagVariant, TextButtonAppearance, TextButtonHtmlProps, TextButtonProps, TextButtonSize, ToastContextValue, ToastIconProps, ToastProps, ToastTextButtonProps, ToastTextProps, ToastVariant, TooltipProps, TooltipType, UseAccordionOptions, UseAccordionReturn, UseChipProps, UseChipReturn, UseDatePickerProps, UseDatePickerReturn, UseDateRangePickerPickerProps, UseDropDownBaseReturn, UseDropDownProps, UsePaginationProps, UsePaginationReturn, UsePeriodProps, UsePeriodReturn, UseSegmentProps, UseSegmentReturn };
+export { Accordion, BottomBar, Button, Checkbox, CheckboxButton, Chip, ChipGroup, CommandModalProvider, DAY_LIST, DatePicker, DatePickerCalendar$1 as DatePickerCalendar, DatePickerContext, DatePickerContextRenew, DatePickerRangeRenew, DatePickerSingleRenew, DateRangePicker, DateRangePickerExperimental, DropDown, Feedback, core as FormCore, field as FormField, Header, HeaderIcon, Icon, IconButton, Image, List, ListItem, Loading, Modal, ModalStack, ModalUtils, Notification, Pagination, PaginationContext, Radio, RadioGroup, Segment, SegmentContext, SegmentGroup, Select, Skeleton, Stepper, Tab, TabGroup, Table, Tag, TextButton, Toast, Tooltip, contextDefaultProps, generateCalendarGridDayInfo, handleDayClick, headerIconClassName, isDisabled, isFinalSelected, isSameDay, isTempSelected, isToday, mergeDeep, useAccordion, useAccordionContext, useChip, useCommandModalStore, useDatePicker, useDatePickerContext, useDatePickerContextRenew, useDropDown, useFormValidator, useModalState, usePagination, usePaginationContext, usePeriod, usePreventInteraction, useRightPadding, useSegment, useSegmentContext };
+export type { AccordionContentProps, AccordionContextValue, AccordionHeaderButtonProps, AccordionHeaderDivProps, AccordionItemForHook, AccordionItemProps, AccordionRootProps, AnchorHtmlProps, BaseComponentProps, BottomBarDesktopProps, BottomBarMobileProps, ButtonAppearance, ButtonBaseProps, ButtonHtmlProps, ButtonProps, ButtonSize, ButtonVariant, ButtonWidth, CalendarNavigationButton, CalendarNavigationType, CalendarNavigationTypeRenew, CalendarProps, CheckboxButtonProps, CheckboxIconProps, CheckboxProps, ChipAppearance, ChipBaseProps, ChipGroupHtmlProps, ChipGroupProps, ChipItemHtmlProps, ChipItemProps, ChipItems, ChipRootHtmlProps, ChipSize, ChipVariant, DatePickerBaseContext, DatePickerBaseProps, DatePickerCalendarHtmlProps, DatePickerCalendarProps, DatePickerInputHtmlProps, DatePickerRange, DatePickerRangeComponentProps, DatePickerRangeHtmlProps, DatePickerSingleComponentPropsRenew, DatePickerSingleContext, DatePickerSingleHtmlProps, DatePickerSingleProps, DefaultTooltipProps, DropDownManager, DropDownProps, DropDownSize, DropDownSpecificProps, DropDownWidth, DropdownType, HeaderIconProps, HeaderProps, IChipContext, IListItemProps, IListProps, ISelectContext, IconButtonAppearance, IconButtonHtmlProps, IconButtonProps, IconDir, IconProps, ImageProps, ListItemProps, ListProps, LoadingContentsProps, LoadingDotsProps, LoadingPositionalProps, LoadingProcessProps, LoadingWaitProps, ModalBaseProps, ModalBodyProps, ModalContentProps, ModalContextProps, ModalFooterProps, ModalHeaderProps, ModalOverlayProps, ModalProps, ModalRootProps, ModalStackItem, ModalState, ModalStateOptions, ModalStore, ModalStoreItem, NotificationHtmlProps, NotificationInnerProps, NotificationProps, NotificationTriggerProps, NotificationType, OptionProps, PaginationContextProps, PaginationHtmlProps, PaginationInnerHtmlProps, PaginationProps, PaginationRootProviderProps, PeriodDate, PeriodProps, PeriodReturn, PeriodText, RadioItemProps, RadioRootProps, SegmentAlign, SegmentAppearance, SegmentBaseProps, SegmentContextProps, SegmentGroupHtmlProps, SegmentGroupProps, SegmentItemHtmlProps, SegmentItemProps, SegmentItems, SegmentRootHtmlProps, SegmentSize, SelectProps, SimpleToastProps, SimpleTooltipProps, SizeToken, SkeletonProps, StepperProps, TabGroupProps, TabItemProps, TabItemSpecificProps, TabRootContextProps, TabRootProps, TabScroll, TabSize, TabVariant, TableHtmlProps, TableProps, TagProps, TagVariant, TextButtonAppearance, TextButtonHtmlProps, TextButtonProps, TextButtonSize, ToastContextValue, ToastIconProps, ToastProps, ToastTextButtonProps, ToastTextProps, ToastVariant, TooltipProps, TooltipType, UseAccordionOptions, UseAccordionReturn, UseChipProps, UseChipReturn, UseDatePickerProps, UseDatePickerReturn, UseDateRangePickerPickerProps, UseDropDownBaseReturn, UseDropDownProps, UsePaginationProps, UsePaginationReturn, UsePeriodProps, UsePeriodReturn, UseSegmentProps, UseSegmentReturn };