@ceed/ads 1.29.1 → 1.30.0

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import Input from '../Input';
+export interface DatePickerPreset {
+    /** 프리셋 버튼에 표시할 라벨 */
+    label: string;
+    /** 컴포넌트의 format에 맞는 날짜 문자열 (예: "2026/04/03") */
+    value: string;
+}
 interface BaseDatePickerProps {
     /**
      * props.format 의 형식을 따라야 한다.
@@ -39,6 +45,10 @@ interface BaseDatePickerProps {
      * @returns If `true` the date will be disabled
      */
     shouldDisableDate?: (date: string) => boolean;
+    /**
+     * 달력 옆에 표시할 프리셋 목록. 각 항목의 value는 format prop의 형식을 따라야 한다.
+     */
+    presets?: DatePickerPreset[];
 }
 export type DatePickerProps = BaseDatePickerProps & Omit<React.ComponentProps<typeof Input>, 'onChange' | 'value' | 'defaultValue'>;
 declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,11 @@
 import React from 'react';
 import Input from '../Input';
+export interface DateRangePickerPreset {
+    /** 프리셋 버튼에 표시할 라벨 */
+    label: string;
+    /** 컴포넌트의 format에 맞는 날짜 범위 문자열 (예: "2026/03/31 - 2026/04/03") */
+    value: string;
+}
 interface BaseDateRangePickerProps {
     /**
      * props.format 의 형식을 따라야 한다.
@@ -32,6 +38,10 @@ interface BaseDateRangePickerProps {
     displayFormat?: string;
     inputReadOnly?: boolean;
     hideClearButton?: boolean;
+    /**
+     * 달력 옆에 표시할 프리셋 목록. 각 항목의 value는 format prop의 형식을 따라야 한다.
+     */
+    presets?: DateRangePickerPreset[];
 }
 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/DatePicker.md

@@ -256,6 +256,54 @@ Common patterns: `YYYY/MM/DD` (default), `YYYY-MM-DD` (ISO 8601), `MM/DD/YYYY` (
 
 ## Additional Features
 
+### Presets
+
+Use the `presets` prop to display a list of quick-select options alongside the calendar. This is useful when users frequently select common dates like "Today" or a specific day offset. The preset panel appears to the right of the calendar inside the popup.
+
+Each preset's `value` must match the component's `format` prop. When the current value matches a preset, that preset is automatically highlighted -- regardless of whether the value was set via the preset button or by selecting the same date on the calendar.
+
+```tsx
+<DatePicker {...args} value={value} onChange={e => {
+  setValue(e.target.value);
+  args.onChange?.(e);
+}} presets={[{
+  label: 'Today',
+  value: fmt(today)
+}, {
+  label: 'Yesterday',
+  value: daysAgo(1)
+}, {
+  label: '3 days ago',
+  value: daysAgo(3)
+}, {
+  label: '1 week ago',
+  value: daysAgo(7)
+}]} />
+```
+
+```tsx
+import { DatePicker } from '@ceed/ads';
+
+function QuickDateSelect() {
+  const [date, setDate] = useState('');
+  const today = new Date();
+  const fmt = (d: Date) =>
+    `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}`;
+
+  return (
+    <DatePicker
+      label="Select Date"
+      value={date}
+      onChange={(e) => setDate(e.target.value)}
+      presets={[
+        { label: 'Today', value: fmt(today) },
+        { label: 'Yesterday', value: fmt(new Date(today.getTime() - 86400000)) },
+      ]}
+    />
+  );
+}
+```
+
 ### Reset Button
 
 Pair DatePicker with an external reset button to programmatically clear the value.

package/dist/components/inputs/DateRangePicker.md

@@ -339,6 +339,68 @@ Fully read-only state where neither typing nor calendar selection is available.
 
 ## Additional Options
 
+### Presets
+
+Use the `presets` prop to display quick-select options alongside the calendar, such as "Last 7 days" or "Last 1 month". The preset panel appears to the right of the calendar inside the popup, providing one-click access to commonly used date ranges.
+
+Each preset's `value` must match the component's `format` prop and use the `-` separator (e.g., `"2026/03/01 - 2026/04/03"`). When the current value matches a preset, that preset is automatically highlighted -- regardless of whether the value was set via the preset button or by selecting the same range on the calendar.
+
+```tsx
+<DateRangePicker {...args} value={value} onChange={e => {
+  setValue(e.target.value);
+  args.onChange?.(e);
+}} presets={[{
+  label: 'Today',
+  value: `${fmt(today)} - ${fmt(today)}`
+}, {
+  label: 'Last 3 days',
+  value: range(3)
+}, {
+  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
+import { DateRangePicker } from '@ceed/ads';
+
+function ReportFilter() {
+  const [dateRange, setDateRange] = useState('');
+  const today = new Date();
+  const fmt = (d: Date) =>
+    `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}`;
+  const monthsAgo = (n: number) => {
+    const d = new Date(today);
+    d.setMonth(d.getMonth() - n);
+    return `${fmt(d)} - ${fmt(today)}`;
+  };
+
+  return (
+    <DateRangePicker
+      label="Report Period"
+      value={dateRange}
+      onChange={(e) => setDateRange(e.target.value)}
+      disableFuture
+      presets={[
+        { label: 'Last 7 days', value: `${fmt(new Date(today.getTime() - 7 * 86400000))} - ${fmt(today)}` },
+        { label: 'Last 1 month', value: monthsAgo(1) },
+        { label: 'Last 3 months', value: monthsAgo(3) },
+        { label: 'Last 6 months', value: monthsAgo(6) },
+      ]}
+    />
+  );
+}
+```
+
 ### Hide Clear Button
 
 Remove the clear button from the calendar popup using `hideClearButton`.