@ceed/ads 1.31.1 → 1.32.1-next.1

package/dist/components/Calendar/hooks/use-calendar-props.d.ts

@@ -16,6 +16,7 @@ export declare const useCalendarProps: (inProps: CalendarProps) => readonly [{
     disableFuture?: boolean | undefined;
     disablePast?: boolean | undefined;
     shouldDisableDate?: ((date: Date) => boolean) | undefined;
+    numberOfMonths?: number | undefined;
 }, {
     viewMonth: Date;
     direction: number;
@@ -34,4 +35,5 @@ export declare const useCalendarProps: (inProps: CalendarProps) => readonly [{
     disableFuture?: boolean | undefined;
     disablePast?: boolean | undefined;
     shouldDisableDate?: ((date: Date) => boolean) | undefined;
+    numberOfMonths?: number | undefined;
 }];

package/dist/components/Calendar/types.d.ts

@@ -24,8 +24,18 @@ export interface CalendarProps {
      * @returns If `true` the date will be disabled
      */
     shouldDisableDate?: (date: DateValue) => boolean;
+    /**
+     * Number of months to display side by side. Defaults to 1.
+     */
+    numberOfMonths?: number;
 }
 export interface CalendarOwnerState extends CalendarProps {
     viewMonth: Date;
     direction: number;
+    /** Shared hover day state for multi-month coordination */
+    hoverDay?: Date | null;
+    onHoverDayChange?: (day: Date | null) => void;
+    /** Shared hover month state for multi-month coordination */
+    hoverMonth?: Date | null;
+    onHoverMonthChange?: (month: Date | null) => void;
 }

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

@@ -46,6 +46,10 @@ interface BaseDateRangePickerProps {
      * 달력 옆에 표시할 프리셋 목록. 각 항목의 value는 format prop의 형식을 따라야 한다.
      */
     presets?: DateRangePickerPreset[];
+    /**
+     * 팝오버에 표시할 달력의 수. 기본값은 1.
+     */
+    numberOfMonths?: number;
 }
 export type DateRangePickerProps = BaseDateRangePickerProps & Omit<React.ComponentProps<typeof Input>, 'onChange' | 'value' | 'defaultValue'>;
 declare const DateRangePicker: React.ForwardRefExoticComponent<Omit<DateRangePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/DateRangePicker.md

@@ -29,6 +29,7 @@ DateRangePicker is ideal for booking systems, reporting filters, scheduling, and
 | inputReadOnly   | —           | —       |
 | hideClearButton | —           | —       |
 | size            | —           | —       |
+| numberOfMonths  | —           | —       |
 
 > **Use built-in form props**
 >
@@ -337,6 +338,53 @@ Fully read-only state where neither typing nor calendar selection is available.
 />
 ```
 
+## Dual Calendar
+
+Use the `numberOfMonths` prop to display two calendar months side by side in the popup. This gives users a wider view of the date range without navigating back and forth, and is especially useful for selecting ranges that span across months.
+
+```tsx
+<DateRangePicker
+  onChange={onChange}
+  numberOfMonths={2}
+  label="Date Range"
+/>
+```
+
+When combined with `presets`, the dual calendar provides a fast, at-a-glance interface for report and analytics date filters.
+
+```tsx
+<DateRangePicker {...args} value={value} onChange={e => {
+  setValue(e.target.value);
+  args.onChange?.(e);
+}} disableFuture presets={[{
+  label: 'Today',
+  value: `${fmt(today)} - ${fmt(today)}`
+}, {
+  label: 'Last 7 days',
+  value: range(7)
+}, {
+  label: 'Last 1 month',
+  value: range(1, 'months')
+}, {
+  label: 'Last 3 months',
+  value: range(3, 'months')
+}, {
+  label: 'Last 6 months',
+  value: range(6, 'months')
+}]} />
+```
+
+```tsx
+<DateRangePicker numberOfMonths={2} label="Date Range" />
+```
+
+**Navigation behavior with two calendars:**
+
+- The left calendar shows only the **previous** (◀) button.
+- The right calendar shows only the **next** (▶) button.
+- Each click advances the view by **1 month**, keeping the two calendars consecutive.
+- Range selection and hover preview work across both calendars seamlessly.
+
 ## Additional Options
 
 ### Presets
@@ -584,6 +632,7 @@ const getDuration = (value) => {
 | `disablePast`     | `boolean`                                               | `false`        | Disables all past dates                                                                                              |
 | `inputReadOnly`   | `boolean`                                               | `false`        | Prevents keyboard typing (calendar-only input)                                                                       |
 | `hideClearButton` | `boolean`                                               | `false`        | Hides the clear button in the calendar popup                                                                         |
+| `numberOfMonths`  | `number`                                                | `1`            | Number of calendar months to show side by side in the popup                                                          |
 
 ### Alphabetic Month Tokens (MMM / MMMM)