@ceed/ads 1.30.1 → 1.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/components/Calendar/utils/index.d.ts +1 -0
  2. package/dist/components/DatePicker/DatePicker.d.ts +4 -0
  3. package/dist/components/DateRangePicker/DateRangePicker.d.ts +4 -0
  4. package/dist/components/MonthRangePicker/MonthRangePicker.d.ts +8 -0
  5. package/dist/components/inputs/DatePicker.md +40 -20
  6. package/dist/components/inputs/DateRangePicker.md +36 -19
  7. package/dist/components/inputs/MonthPicker.md +49 -18
  8. package/dist/components/inputs/MonthRangePicker.md +34 -16
  9. package/dist/index.browser.js +4 -4
  10. package/dist/index.browser.js.map +3 -3
  11. package/dist/index.cjs +105 -42
  12. package/dist/index.js +105 -42
  13. package/framer/index.js +1 -1
  14. package/package.json +1 -1
package/dist/components/Calendar/utils/index.d.ts CHANGED
@@ -3,6 +3,7 @@ export declare const getYearName: (date: Date, locale: string) => string;
3
3
  export declare const getMonthName: (date: Date, locale: string, options?: {
4
4
  hideYear?: boolean;
5
5
  }) => string;
6
+ export declare const getShortMonthName: (date: Date, locale: string) => string;
6
7
  export declare const getMonthNameFromIndex: (index: number, locale: string) => string;
7
8
  /**
8
9
  * 일~토 / Sun ~ Sat 같은 요일 이름을 가져옵니다.
package/dist/components/DatePicker/DatePicker.d.ts CHANGED
@@ -36,6 +36,10 @@ interface BaseDatePickerProps {
36
36
  * Input 에 표시되는 값의 포맷을 지정한다.
37
37
  */
38
38
  displayFormat?: string;
39
+ /**
40
+ * 월 이름 표시에 사용할 locale (예: 'en-US', 'ko-KR'). MMM/MMMM 토큰 사용 시 적용된다.
41
+ */
42
+ locale?: string;
39
43
  inputReadOnly?: boolean;
40
44
  hideClearButton?: boolean;
41
45
  /**
package/dist/components/DateRangePicker/DateRangePicker.d.ts CHANGED
@@ -36,6 +36,10 @@ interface BaseDateRangePickerProps {
36
36
  * Input 에 표시되는 값의 포맷을 지정한다.
37
37
  */
38
38
  displayFormat?: string;
39
+ /**
40
+ * 월 이름 표시에 사용할 locale (예: 'en-US', 'ko-KR'). MMM/MMMM 토큰 사용 시 적용된다.
41
+ */
42
+ locale?: string;
39
43
  inputReadOnly?: boolean;
40
44
  hideClearButton?: boolean;
41
45
  /**
package/dist/components/MonthRangePicker/MonthRangePicker.d.ts CHANGED
@@ -20,6 +20,14 @@ interface BaseMonthRangePickerProps {
20
20
  disableFuture?: boolean;
21
21
  disablePast?: boolean;
22
22
  format?: string;
23
+ /**
24
+ * Input 에 표시되는 값의 포맷을 지정한다.
25
+ */
26
+ displayFormat?: string;
27
+ /**
28
+ * 월 이름 표시에 사용할 locale (예: 'en-US', 'ko-KR'). MMM/MMMM 토큰 사용 시 적용된다.
29
+ */
30
+ locale?: string;
23
31
  }
24
32
  export type MonthRangePickerProps = BaseMonthRangePickerProps & Omit<React.ComponentProps<typeof Input>, 'onChange' | 'value' | 'defaultValue'>;
25
33
  declare const MonthRangePicker: React.ForwardRefExoticComponent<Omit<MonthRangePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
package/dist/components/inputs/DatePicker.md CHANGED
@@ -482,26 +482,27 @@ function RegionalDateField({ locale }: { locale: string }) {
482
482
 
483
483
  ### Key Props
484
484
 
485
- | Prop | Type | Default | Description |
486
- | ------------------- | ------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------- |
487
- | `value` | `string` | - | Selected date string in `format` (controlled mode) |
488
- | `defaultValue` | `string` | `''` | Initial date string (uncontrolled mode) |
489
- | `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the date changes. Value is in `format` |
490
- | `format` | `string` | `'YYYY/MM/DD'` | Format of the `value` and `onChange` value. Determines the internal data format |
491
- | `displayFormat` | `string` | `'YYYY/MM/DD'` | Format displayed in the input field. Can differ from `format` for locale display |
492
- | `label` | `ReactNode` | - | Form label displayed above the input |
493
- | `helperText` | `ReactNode` | - | Helper text displayed below the input |
494
- | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
495
- | `required` | `boolean` | `false` | Marks the field as required (adds asterisk to label) |
496
- | `disabled` | `boolean` | `false` | Disables the entire component |
497
- | `name` | `string` | - | HTML name attribute for form submission |
498
- | `minDate` | `string` | - | Minimum selectable date (in `format`) |
499
- | `maxDate` | `string` | - | Maximum selectable date (in `format`) |
500
- | `disableFuture` | `boolean` | `false` | Disables all future dates |
501
- | `disablePast` | `boolean` | `false` | Disables all past dates |
502
- | `shouldDisableDate` | `(date: string) => boolean` | - | Custom function to disable specific dates. Receives date in `format`. Return `true` to disable |
503
- | `inputReadOnly` | `boolean` | `false` | Prevents keyboard typing in the input (users must use the calendar popup) |
504
- | `hideClearButton` | `boolean` | `false` | Hides the clear button in the calendar popup |
485
+ | Prop | Type | Default | Description |
486
+ | ------------------- | ------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
487
+ | `value` | `string` | - | Selected date string in `format` (controlled mode) |
488
+ | `defaultValue` | `string` | `''` | Initial date string (uncontrolled mode) |
489
+ | `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the date changes. Value is in `format` |
490
+ | `format` | `string` | `'YYYY/MM/DD'` | Format of the `value` and `onChange` value. Determines the internal data format |
491
+ | `displayFormat` | `string` | `'YYYY/MM/DD'` | Format displayed in the input field. Can differ from `format` for locale display. Supports `MMM` (short month name) and `MMMM` (full month name) tokens |
492
+ | `locale` | `string` | `'default'` | Locale for month names when using `MMM`/`MMMM` tokens in `displayFormat` (BCP 47 format, e.g., `'en-US'`, `'ko-KR'`) |
493
+ | `label` | `ReactNode` | - | Form label displayed above the input |
494
+ | `helperText` | `ReactNode` | - | Helper text displayed below the input |
495
+ | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
496
+ | `required` | `boolean` | `false` | Marks the field as required (adds asterisk to label) |
497
+ | `disabled` | `boolean` | `false` | Disables the entire component |
498
+ | `name` | `string` | - | HTML name attribute for form submission |
499
+ | `minDate` | `string` | - | Minimum selectable date (in `format`) |
500
+ | `maxDate` | `string` | - | Maximum selectable date (in `format`) |
501
+ | `disableFuture` | `boolean` | `false` | Disables all future dates |
502
+ | `disablePast` | `boolean` | `false` | Disables all past dates |
503
+ | `shouldDisableDate` | `(date: string) => boolean` | - | Custom function to disable specific dates. Receives date in `format`. Return `true` to disable |
504
+ | `inputReadOnly` | `boolean` | `false` | Prevents keyboard typing in the input (users must use the calendar popup) |
505
+ | `hideClearButton` | `boolean` | `false` | Hides the clear button in the calendar popup |
505
506
 
506
507
  ### format vs displayFormat
507
508
 
@@ -512,6 +513,25 @@ function RegionalDateField({ locale }: { locale: string }) {
512
513
 
513
514
  When both are set, the component converts between formats internally. This lets you keep a consistent API format while showing locale-appropriate display.
514
515
 
516
+ ### Alphabetic Month Tokens (MMM / MMMM)
517
+
518
+ The `displayFormat` prop supports alphabetic month tokens for more human-readable date display:
519
+
520
+ | Token | Output | Example |
521
+ | ------ | ---------------------- | ------------------------------ |
522
+ | `MMM` | Abbreviated month name | `Jan`, `Feb`, `Apr` |
523
+ | `MMMM` | Full month name | `January`, `February`, `April` |
524
+
525
+ When `displayFormat` contains `MMM` or `MMMM`, the input becomes **read-only** and the user must select a date through the calendar popup. Use the `locale` prop to control the language of month names (e.g., `locale="ko-KR"` for Korean month names).
526
+
527
+ ```tsx
528
+ <DatePicker displayFormat="MMM DD, YYYY" locale="en-US" />
529
+ // → "Apr 09, 2026"
530
+
531
+ <DatePicker displayFormat="MMMM DD, YYYY" locale="ko-KR" />
532
+ // → "4월 09, 2026"
533
+ ```
534
+
515
535
  > **Note**: DatePicker also accepts all Input props (e.g., `size`, `variant`, `color`, `startDecorator`, `placeholder`, `sx`).
516
536
 
517
537
  ## Accessibility
package/dist/components/inputs/DateRangePicker.md CHANGED
@@ -564,25 +564,42 @@ const getDuration = (value) => {
564
564
 
565
565
  ### Key Props
566
566
 
567
- | Prop | Type | Default | Description |
568
- | ----------------- | ------------------------------------------------------- | -------------- | -------------------------------------------------------- |
569
- | `value` | `string` | - | Selected date range string in `format` (controlled mode) |
570
- | `defaultValue` | `string` | `''` | Initial date range string (uncontrolled mode) |
571
- | `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the date range changes |
572
- | `format` | `string` | `'YYYY/MM/DD'` | Format of the `value` and `onChange` value |
573
- | `displayFormat` | `string` | `'YYYY/MM/DD'` | Format displayed in the input field |
574
- | `label` | `ReactNode` | - | Form label displayed above the input |
575
- | `helperText` | `ReactNode` | - | Helper text displayed below the input |
576
- | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
577
- | `required` | `boolean` | `false` | Marks the field as required |
578
- | `disabled` | `boolean` | `false` | Disables the entire component |
579
- | `name` | `string` | - | HTML name attribute for form submission |
580
- | `minDate` | `string` | - | Minimum selectable date (in `format`) |
581
- | `maxDate` | `string` | - | Maximum selectable date (in `format`) |
582
- | `disableFuture` | `boolean` | `false` | Disables all future dates |
583
- | `disablePast` | `boolean` | `false` | Disables all past dates |
584
- | `inputReadOnly` | `boolean` | `false` | Prevents keyboard typing (calendar-only input) |
585
- | `hideClearButton` | `boolean` | `false` | Hides the clear button in the calendar popup |
567
+ | Prop | Type | Default | Description |
568
+ | ----------------- | ------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------- |
569
+ | `value` | `string` | - | Selected date range string in `format` (controlled mode) |
570
+ | `defaultValue` | `string` | `''` | Initial date range string (uncontrolled mode) |
571
+ | `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the date range changes |
572
+ | `format` | `string` | `'YYYY/MM/DD'` | Format of the `value` and `onChange` value |
573
+ | `displayFormat` | `string` | `'YYYY/MM/DD'` | Format displayed in the input field. Supports `MMM` (short month name) and `MMMM` (full month name) tokens |
574
+ | `locale` | `string` | `'default'` | Locale for month names when using `MMM`/`MMMM` tokens in `displayFormat` (BCP 47 format, e.g., `'en-US'`, `'ko-KR'`) |
575
+ | `label` | `ReactNode` | - | Form label displayed above the input |
576
+ | `helperText` | `ReactNode` | - | Helper text displayed below the input |
577
+ | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
578
+ | `required` | `boolean` | `false` | Marks the field as required |
579
+ | `disabled` | `boolean` | `false` | Disables the entire component |
580
+ | `name` | `string` | - | HTML name attribute for form submission |
581
+ | `minDate` | `string` | - | Minimum selectable date (in `format`) |
582
+ | `maxDate` | `string` | - | Maximum selectable date (in `format`) |
583
+ | `disableFuture` | `boolean` | `false` | Disables all future dates |
584
+ | `disablePast` | `boolean` | `false` | Disables all past dates |
585
+ | `inputReadOnly` | `boolean` | `false` | Prevents keyboard typing (calendar-only input) |
586
+ | `hideClearButton` | `boolean` | `false` | Hides the clear button in the calendar popup |
587
+
588
+ ### Alphabetic Month Tokens (MMM / MMMM)
589
+
590
+ The `displayFormat` prop supports alphabetic month tokens for more human-readable date display:
591
+
592
+ | Token | Output | Example |
593
+ | ------ | ---------------------- | ------------------------------ |
594
+ | `MMM` | Abbreviated month name | `Jan`, `Feb`, `Apr` |
595
+ | `MMMM` | Full month name | `January`, `February`, `April` |
596
+
597
+ When `displayFormat` contains `MMM` or `MMMM`, the input becomes **read-only** and the user must select dates through the calendar popup. Use the `locale` prop to control the language of month names.
598
+
599
+ ```tsx
600
+ <DateRangePicker displayFormat="MMM DD, YYYY" locale="en-US" />
601
+ // → "Apr 01, 2026 - Apr 09, 2026"
602
+ ```
586
603
 
587
604
  > **Note**: DateRangePicker also accepts all Input props (e.g., `size`, `variant`, `color`, `sx`).
588
605
 
package/dist/components/inputs/MonthPicker.md CHANGED
@@ -229,6 +229,18 @@ The `displayFormat` prop controls what users see in the input field, independent
229
229
  setValue6(e.target.value);
230
230
  args.onChange?.(e);
231
231
  }} />
232
+ <MonthPicker {...args} value={value6} label="MMM YYYY" name="MMM YYYY" displayFormat="MMM YYYY" onChange={e => {
233
+ setValue6(e.target.value);
234
+ args.onChange?.(e);
235
+ }} />
236
+ <MonthPicker {...args} value={value6} label="MMM YYYY (en-US)" name="MMM YYYY (en-US)" displayFormat="MMM YYYY" locale="en-US" onChange={e => {
237
+ setValue6(e.target.value);
238
+ args.onChange?.(e);
239
+ }} />
240
+ <MonthPicker {...args} value={value6} label="MMM YYYY (ko-KR)" name="MMM YYYY (ko-KR)" displayFormat="MMM YYYY" locale="ko-KR" onChange={e => {
241
+ setValue6(e.target.value);
242
+ args.onChange?.(e);
243
+ }} />
232
244
  </Stack>
233
245
  ```
234
246
 
@@ -361,24 +373,43 @@ const handleChange = (e) => {
361
373
 
362
374
  ### Key Props
363
375
 
364
- | Prop | Type | Default | Description |
365
- | --------------- | ------------------------------------------------------- | -------------- | --------------------------------------------------- |
366
- | `value` | `string` | - | Selected month string in `format` (controlled mode) |
367
- | `defaultValue` | `string` | `''` | Initial month string (uncontrolled mode) |
368
- | `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the month changes |
369
- | `format` | `string` | `'YYYY/MM/DD'` | Format of the `value` and `onChange` value |
370
- | `displayFormat` | `string` | `'YYYY/MM'` | Format displayed in the input field |
371
- | `label` | `ReactNode` | - | Form label displayed above the input |
372
- | `helperText` | `ReactNode` | - | Helper text displayed below the input |
373
- | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
374
- | `required` | `boolean` | `false` | Marks the field as required |
375
- | `disabled` | `boolean` | `false` | Disables the entire component |
376
- | `name` | `string` | - | HTML name attribute for form submission |
377
- | `minDate` | `string` | - | Minimum selectable month (in `format`) |
378
- | `maxDate` | `string` | - | Maximum selectable month (in `format`) |
379
- | `disableFuture` | `boolean` | `false` | Disables all future months |
380
- | `disablePast` | `boolean` | `false` | Disables all past months |
381
- | `locale` | `string` | `'default'` | Locale for month names (BCP 47 format) |
376
+ | Prop | Type | Default | Description |
377
+ | --------------- | ------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------- |
378
+ | `value` | `string` | - | Selected month string in `format` (controlled mode) |
379
+ | `defaultValue` | `string` | `''` | Initial month string (uncontrolled mode) |
380
+ | `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the month changes |
381
+ | `format` | `string` | `'YYYY/MM/DD'` | Format of the `value` and `onChange` value |
382
+ | `displayFormat` | `string` | `'YYYY/MM'` | Format displayed in the input field. Supports `MMM` (short month name) and `MMMM` (full month name) tokens |
383
+ | `label` | `ReactNode` | - | Form label displayed above the input |
384
+ | `helperText` | `ReactNode` | - | Helper text displayed below the input |
385
+ | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
386
+ | `required` | `boolean` | `false` | Marks the field as required |
387
+ | `disabled` | `boolean` | `false` | Disables the entire component |
388
+ | `name` | `string` | - | HTML name attribute for form submission |
389
+ | `minDate` | `string` | - | Minimum selectable month (in `format`) |
390
+ | `maxDate` | `string` | - | Maximum selectable month (in `format`) |
391
+ | `disableFuture` | `boolean` | `false` | Disables all future months |
392
+ | `disablePast` | `boolean` | `false` | Disables all past months |
393
+ | `locale` | `string` | `'default'` | Locale for month names (BCP 47 format) |
394
+
395
+ ### Alphabetic Month Tokens (MMM / MMMM)
396
+
397
+ The `displayFormat` prop supports alphabetic month tokens for more human-readable month display:
398
+
399
+ | Token | Output | Example |
400
+ | ------ | ---------------------- | ------------------------------ |
401
+ | `MMM` | Abbreviated month name | `Jan`, `Feb`, `Apr` |
402
+ | `MMMM` | Full month name | `January`, `February`, `April` |
403
+
404
+ Use the `locale` prop to control the language of month names.
405
+
406
+ ```tsx
407
+ <MonthPicker displayFormat="MMM YYYY" locale="en-US" />
408
+ // → "Apr 2026"
409
+
410
+ <MonthPicker displayFormat="MMMM YYYY" locale="ko-KR" />
411
+ // → "4월 2026"
412
+ ```
382
413
 
383
414
  > **Note**: MonthPicker also accepts all Input props (e.g., `size`, `variant`, `color`, `sx`).
384
415
 
package/dist/components/inputs/MonthRangePicker.md CHANGED
@@ -365,22 +365,40 @@ const handleSubmit = () => {
365
365
 
366
366
  ### Key Props
367
367
 
368
- | Prop | Type | Default | Description |
369
- | --------------- | ------------------------------------------------------- | ----------- | --------------------------------------------------------- |
370
- | `value` | `string` | - | Selected month range string in `format` (controlled mode) |
371
- | `defaultValue` | `string` | `''` | Initial month range string (uncontrolled mode) |
372
- | `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the month range changes |
373
- | `format` | `string` | `'YYYY/MM'` | Format of the `value` and `onChange` value |
374
- | `label` | `ReactNode` | - | Form label displayed above the input |
375
- | `helperText` | `ReactNode` | - | Helper text displayed below the input |
376
- | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
377
- | `required` | `boolean` | `false` | Marks the field as required |
378
- | `disabled` | `boolean` | `false` | Disables the entire component |
379
- | `name` | `string` | - | HTML name attribute for form submission |
380
- | `minDate` | `string` | - | Minimum selectable month (in `format`) |
381
- | `maxDate` | `string` | - | Maximum selectable month (in `format`) |
382
- | `disableFuture` | `boolean` | `false` | Disables all future months |
383
- | `disablePast` | `boolean` | `false` | Disables all past months |
368
+ | Prop | Type | Default | Description |
369
+ | --------------- | ------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------- |
370
+ | `value` | `string` | - | Selected month range string in `format` (controlled mode) |
371
+ | `defaultValue` | `string` | `''` | Initial month range string (uncontrolled mode) |
372
+ | `onChange` | `(event: { target: { name?, value: string } }) => void` | - | Callback when the month range changes |
373
+ | `format` | `string` | `'YYYY/MM'` | Format of the `value` and `onChange` value |
374
+ | `displayFormat` | `string` | same as `format` | Format displayed in the input field. Supports `MMM` (short month name) and `MMMM` (full month name) tokens |
375
+ | `locale` | `string` | `'default'` | Locale for month names when using `MMM`/`MMMM` tokens in `displayFormat` (BCP 47 format, e.g., `'en-US'`, `'ko-KR'`) |
376
+ | `label` | `ReactNode` | - | Form label displayed above the input |
377
+ | `helperText` | `ReactNode` | - | Helper text displayed below the input |
378
+ | `error` | `boolean` | `false` | Applies danger color to indicate validation error |
379
+ | `required` | `boolean` | `false` | Marks the field as required |
380
+ | `disabled` | `boolean` | `false` | Disables the entire component |
381
+ | `name` | `string` | - | HTML name attribute for form submission |
382
+ | `minDate` | `string` | - | Minimum selectable month (in `format`) |
383
+ | `maxDate` | `string` | - | Maximum selectable month (in `format`) |
384
+ | `disableFuture` | `boolean` | `false` | Disables all future months |
385
+ | `disablePast` | `boolean` | `false` | Disables all past months |
386
+
387
+ ### Alphabetic Month Tokens (MMM / MMMM)
388
+
389
+ The `displayFormat` prop supports alphabetic month tokens for more human-readable month display:
390
+
391
+ | Token | Output | Example |
392
+ | ------ | ---------------------- | ------------------------------ |
393
+ | `MMM` | Abbreviated month name | `Jan`, `Feb`, `Apr` |
394
+ | `MMMM` | Full month name | `January`, `February`, `April` |
395
+
396
+ When `displayFormat` contains `MMM` or `MMMM`, the input becomes **read-only** and the user must select months through the calendar popup. Use the `locale` prop to control the language of month names.
397
+
398
+ ```tsx
399
+ <MonthRangePicker displayFormat="MMM YYYY" locale="en-US" />
400
+ // → "Apr 2026 - May 2026"
401
+ ```
384
402
 
385
403
  > **Note**: MonthRangePicker also accepts all Input props (e.g., `size`, `variant`, `color`, `sx`).
386
404