@opengovsg/oui 0.0.0-snapshot-20250320092809 → 0.0.0-snapshot-20250326084237

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 (63) hide show
  1. package/dist/cjs/calendar/agnostic-calendar-state-context.cjs +13 -0
  2. package/dist/cjs/calendar/calendar-bottom-content.cjs +51 -0
  3. package/dist/cjs/calendar/calendar-grid-header.cjs +28 -0
  4. package/dist/cjs/calendar/calendar-header.cjs +74 -0
  5. package/dist/cjs/calendar/calendar-month-day-selector.cjs +86 -0
  6. package/dist/cjs/calendar/calendar-style-context.cjs +0 -25
  7. package/dist/cjs/calendar/calendar.cjs +143 -4
  8. package/dist/cjs/calendar/hooks/index.cjs +11 -0
  9. package/dist/cjs/calendar/hooks/use-calendar-i18n.cjs +33 -0
  10. package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs +41 -0
  11. package/dist/cjs/calendar/index.cjs +1 -1
  12. package/dist/cjs/index.cjs +9 -5
  13. package/dist/cjs/range-calendar/index.cjs +10 -0
  14. package/dist/cjs/range-calendar/range-calendar.cjs +188 -0
  15. package/dist/esm/calendar/agnostic-calendar-state-context.js +10 -0
  16. package/dist/esm/calendar/calendar-bottom-content.js +49 -0
  17. package/dist/esm/calendar/calendar-grid-header.js +26 -0
  18. package/dist/esm/calendar/calendar-header.js +72 -0
  19. package/dist/esm/calendar/calendar-month-day-selector.js +84 -0
  20. package/dist/esm/calendar/calendar-style-context.js +1 -25
  21. package/dist/esm/calendar/calendar.js +147 -9
  22. package/dist/esm/calendar/hooks/index.js +3 -0
  23. package/dist/esm/calendar/hooks/use-calendar-i18n.js +30 -0
  24. package/dist/esm/calendar/hooks/use-calendar-selectors.js +39 -0
  25. package/dist/esm/calendar/index.js +2 -2
  26. package/dist/esm/index.js +5 -4
  27. package/dist/esm/range-calendar/index.js +2 -0
  28. package/dist/esm/range-calendar/range-calendar.js +184 -0
  29. package/dist/types/calendar/agnostic-calendar-state-context.d.ts +3 -0
  30. package/dist/types/calendar/agnostic-calendar-state-context.d.ts.map +1 -0
  31. package/dist/types/calendar/calendar-bottom-content.d.ts +4 -0
  32. package/dist/types/calendar/calendar-bottom-content.d.ts.map +1 -0
  33. package/dist/types/calendar/calendar-grid-header.d.ts +2 -0
  34. package/dist/types/calendar/calendar-grid-header.d.ts.map +1 -0
  35. package/dist/types/calendar/calendar-header.d.ts +6 -0
  36. package/dist/types/calendar/calendar-header.d.ts.map +1 -0
  37. package/dist/types/calendar/calendar-month-day-selector.d.ts +2 -0
  38. package/dist/types/calendar/calendar-month-day-selector.d.ts.map +1 -0
  39. package/dist/types/calendar/calendar-style-context.d.ts +10 -1030
  40. package/dist/types/calendar/calendar-style-context.d.ts.map +1 -1
  41. package/dist/types/calendar/calendar.d.ts +5 -2
  42. package/dist/types/calendar/calendar.d.ts.map +1 -1
  43. package/dist/types/calendar/hooks/index.d.ts +3 -0
  44. package/dist/types/calendar/hooks/index.d.ts.map +1 -0
  45. package/dist/types/calendar/hooks/use-calendar-i18n.d.ts +4 -0
  46. package/dist/types/calendar/hooks/use-calendar-i18n.d.ts.map +1 -0
  47. package/dist/types/calendar/hooks/use-calendar-selectors.d.ts +13 -0
  48. package/dist/types/calendar/hooks/use-calendar-selectors.d.ts.map +1 -0
  49. package/dist/types/calendar/types.d.ts +5 -4
  50. package/dist/types/calendar/types.d.ts.map +1 -1
  51. package/dist/types/index.d.mts +1 -0
  52. package/dist/types/index.d.ts +1 -0
  53. package/dist/types/index.d.ts.map +1 -1
  54. package/dist/types/range-calendar/index.d.ts +2 -0
  55. package/dist/types/range-calendar/index.d.ts.map +1 -0
  56. package/dist/types/range-calendar/range-calendar.d.ts +69 -0
  57. package/dist/types/range-calendar/range-calendar.d.ts.map +1 -0
  58. package/dist/types/tag-field/tag-field-tag-list.d.ts.map +1 -1
  59. package/package.json +4 -4
  60. package/dist/cjs/calendar/calendar-base.cjs +0 -347
  61. package/dist/esm/calendar/calendar-base.js +0 -343
  62. package/dist/types/calendar/calendar-base.d.ts +0 -14
  63. package/dist/types/calendar/calendar-base.d.ts.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"calendar-style-context.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-style-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAKtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,SAAS,EAC1D,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBhC;AAED,MAAM,MAAM,8BAA8B,GAAG,UAAU,CACrD,OAAO,wBAAwB,CAChC,CAAA;AAED,eAAO,MAAO,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAE,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKzD,CAAA"}
1
+ {"version":3,"file":"calendar-style-context.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-style-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,MAAM,WAAW,8BAA8B,CAAC,CAAC,SAAS,YAAY;IACpE,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;IACxC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;IAC1C,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAA;IAC7E,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;CAC/B;AAED,eAAO,MAAO,oBAAoB,yEAAE,uBAAuB,oDAKzD,CAAA"}
@@ -1,5 +1,8 @@
1
1
  import type { ReactElement } from "react";
2
- import type { DateValue } from "react-aria-components";
2
+ import { CalendarDate } from "@internationalized/date";
3
3
  import type { CalendarProps } from "./types";
4
- export declare const Calendar: <T extends DateValue>(props: CalendarProps<T>) => ReactElement;
4
+ export declare const Calendar: <T extends CalendarDate>(props: CalendarProps<T>) => ReactElement;
5
+ export declare const CalendarStateWrapper: ({ children, }: {
6
+ children: React.ReactNode;
7
+ }) => import("react/jsx-runtime").JSX.Element;
5
8
  //# sourceMappingURL=calendar.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,YAAY,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAQ5C,eAAO,MAAM,QAAQ,EAWf,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,YAAY,CAAA"}
1
+ {"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,YAAY,EAAE,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAE,YAAY,EAA2B,MAAM,yBAAyB,CAAA;AAe/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAQ5C,eAAO,MAAM,QAAQ,EA8Hf,CAAC,CAAC,SAAS,YAAY,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,YAAY,CAAA;AAEvE,eAAO,MAAM,oBAAoB,kBAE9B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,4CAQA,CAAA"}
@@ -0,0 +1,3 @@
1
+ export * from "./use-calendar-i18n";
2
+ export * from "./use-calendar-selectors";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA"}
@@ -0,0 +1,4 @@
1
+ import type { LocalizedStrings } from "react-aria";
2
+ export declare const i18nStrings: LocalizedStrings;
3
+ export declare const useCalendarI18n: () => import("react-aria").FormatMessage;
4
+ //# sourceMappingURL=use-calendar-i18n.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-calendar-i18n.d.ts","sourceRoot":"","sources":["../../../../src/calendar/hooks/use-calendar-i18n.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAGlD,eAAO,MAAM,WAAW,EAAE,gBAqBzB,CAAA;AAED,eAAO,MAAM,eAAe,0CAE3B,CAAA"}
@@ -0,0 +1,13 @@
1
+ import type { CalendarState, RangeCalendarState } from "react-stately";
2
+ export declare const useCalendarSelectors: (state: CalendarState | RangeCalendarState) => {
3
+ months: {
4
+ id: number;
5
+ textValue: string;
6
+ }[];
7
+ years: {
8
+ id: number;
9
+ textValue: string;
10
+ }[];
11
+ datePartOrder: ("month" | "year")[];
12
+ };
13
+ //# sourceMappingURL=use-calendar-selectors.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-calendar-selectors.d.ts","sourceRoot":"","sources":["../../../../src/calendar/hooks/use-calendar-selectors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAMtE,eAAO,MAAM,oBAAoB,UACxB,aAAa,GAAG,kBAAkB;;;;;;;;;;CAmC1C,CAAA"}
@@ -1,7 +1,8 @@
1
+ import type { CalendarDate } from "@internationalized/date";
1
2
  import type { ReactNode } from "react";
2
- import type { CalendarProps as AriaCalendarProps, CalendarGridProps, DateValue } from "react-aria-components";
3
+ import type { CalendarProps as AriaCalendarProps, CalendarGridProps } from "react-aria-components";
3
4
  import type { CalendarSlots, CalendarVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
4
- export interface CalendarProps<T extends DateValue> extends AriaCalendarProps<T>, CalendarVariantProps, Pick<CalendarGridProps, "weekdayStyle"> {
5
+ export interface CalendarProps<T extends CalendarDate> extends AriaCalendarProps<T>, CalendarVariantProps, Pick<CalendarGridProps, "weekdayStyle"> {
5
6
  errorMessage?: string;
6
7
  /**
7
8
  * List of classes to change the classNames of the element.
@@ -41,12 +42,12 @@ export interface CalendarProps<T extends DateValue> extends AriaCalendarProps<T>
41
42
  * The minimum allowed date that a user may select.
42
43
  * @defaultValue `new CalendarDate(1900, 0, 1)`
43
44
  */
44
- minValue?: DateValue;
45
+ minValue?: T;
45
46
  /**
46
47
  * The maximum allowed date that a user may select.
47
48
  * @defaultValue `new CalendarDate(2100, 12, 31)`
48
49
  */
49
- maxValue?: DateValue;
50
+ maxValue?: T;
50
51
  /**
51
52
  * If provided, there will be a button below the calendar for users to jump to today's date.
52
53
  * @defaultValue `true`
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/calendar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,iBAAiB,EACjB,SAAS,EACV,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAK7B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,SAAS,CAChD,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,oBAAoB,EACpB,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;IAE1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/calendar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,iBAAiB,EAClB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,YAAY,CACnD,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,oBAAoB,EACpB,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;IAE1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAA;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B"}
@@ -16,4 +16,5 @@ export * from "./tag-field";
16
16
  export * from "./select";
17
17
  export * from "./badge";
18
18
  export * from "./calendar";
19
+ export * from "./range-calendar";
19
20
  //# sourceMappingURL=index.d.ts.map
@@ -16,4 +16,5 @@ export * from "./tag-field";
16
16
  export * from "./select";
17
17
  export * from "./badge";
18
18
  export * from "./calendar";
19
+ export * from "./range-calendar";
19
20
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA"}
@@ -0,0 +1,2 @@
1
+ export * from "./range-calendar";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/range-calendar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
@@ -0,0 +1,69 @@
1
+ import type { RangeCalendarProps as AriaRangeCalendarProps, CalendarGridProps, DateValue } from "react-aria-components";
2
+ import { CalendarDate } from "@internationalized/date";
3
+ import type { CalendarSlots, CalendarVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
4
+ interface RangeCalendarProps<T extends CalendarDate> extends CalendarVariantProps, Pick<CalendarGridProps, "weekdayStyle">, AriaRangeCalendarProps<T> {
5
+ /**
6
+ * List of classes to change the classNames of the element.
7
+ * if `className` is passed, it will be added to the base slot.
8
+ *
9
+ * @example
10
+ * ```ts
11
+ *
12
+ * Component: Calendar, RangeCalendar
13
+ *
14
+ * <Component classNames={{
15
+ * base:"base-classes",
16
+ * nextButton:"next-button-classes",
17
+ * prevButton:"prev-button-classes",
18
+ * buttonGroup:"button-group-classes",
19
+ * header:"header-classes",
20
+ * title:"title-classes",
21
+ * content:"content-classes",
22
+ * gridWrapper:"grid-wrapper-classes",
23
+ * calendar:"calendar-classes",
24
+ * grid:"grid-classes",
25
+ * gridHeader:"grid-header-classes",
26
+ * gridHeaderCell:"grid-header-cell-classes",
27
+ * gridBody:"grid-body-classes",
28
+ * cell:"grid-cell-classes",
29
+ * monthSelector:"month-selector-classes",
30
+ * yearSelector:"year-selector-classes",
31
+ * selectors:"selectors-classes",
32
+ * selectorText:"selector-text-classes",
33
+ * monthList:"month-list-classes",
34
+ * yearList:"year-list-classes",
35
+ * }} />
36
+ * ```
37
+ */
38
+ classNames?: SlotsToClasses<CalendarSlots>;
39
+ /**
40
+ * The minimum allowed date that a user may select.
41
+ * @defaultValue `new CalendarDate(1900, 0, 1)`
42
+ */
43
+ minValue?: T;
44
+ /**
45
+ * The maximum allowed date that a user may select.
46
+ * @defaultValue `new CalendarDate(2100, 12, 31)`
47
+ */
48
+ maxValue?: T;
49
+ /**
50
+ * If provided, there will be a button below the calendar for users to jump to today's date.
51
+ * @defaultValue `true`
52
+ * If `bottomContent is provided, this will be ignored.
53
+ */
54
+ showTodayButton?: boolean;
55
+ bottomContent?: React.ReactNode;
56
+ errorMessage?: string;
57
+ }
58
+ export declare const RangeCalendar: import("react").ForwardRefExoticComponent<RangeCalendarProps<CalendarDate> & import("react").RefAttributes<HTMLDivElement>>;
59
+ export declare const RangeCalendarStateWrapper: ({ children, }: {
60
+ children: React.ReactNode;
61
+ }) => import("react/jsx-runtime").JSX.Element;
62
+ export declare const RangeCalendarCell: <T extends CalendarDate>({ date, isMultipleMonths, dateToHighlight, firstDayOfWeek, }: {
63
+ date: CalendarDate;
64
+ isMultipleMonths: boolean;
65
+ dateToHighlight: DateValue | null;
66
+ firstDayOfWeek?: RangeCalendarProps<T>["firstDayOfWeek"];
67
+ }) => import("react/jsx-runtime").JSX.Element;
68
+ export {};
69
+ //# sourceMappingURL=range-calendar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"range-calendar.d.ts","sourceRoot":"","sources":["../../../src/range-calendar/range-calendar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,kBAAkB,IAAI,sBAAsB,EAC5C,iBAAiB,EACjB,SAAS,EACV,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EACL,YAAY,EAIb,MAAM,yBAAyB,CAAA;AAahC,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAe7B,UAAU,kBAAkB,CAAC,CAAC,SAAS,YAAY,CACjD,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC,EACvC,sBAAsB,CAAC,CAAC,CAAC;IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAA;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE/B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,aAAa,6HAiHxB,CAAA;AAEF,eAAO,MAAM,yBAAyB,kBAEnC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,4CAQA,CAAA;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,YAAY,gEAKrD;IACD,IAAI,EAAE,YAAY,CAAA;IAClB,gBAAgB,EAAE,OAAO,CAAA;IACzB,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;IACjC,cAAc,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACzD,4CAuDA,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"tag-field-tag-list.d.ts","sourceRoot":"","sources":["../../../src/tag-field/tag-field-tag-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,WAAW,CAAA;AAKhE,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAKzE,UAAU,0BAA0B,CAAC,CAAC;IACpC,IAAI,EAAE,CAAC,CAAA;IACP,SAAS,EAAE,UAAU,CACnB,+BAA+B,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAC3D,CAAA;IACD,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM;IACpD,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,aAAa,CAAC,EAC7B,KAAK,GAAG,SAAS,GAAG,SAAS,CAC9B,CAAA;IACD,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACjE;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,MAAM,4BAG7C,oBAAoB,CAAC,CAAC,CAAC,iwBAyDzB,CAAA"}
1
+ {"version":3,"file":"tag-field-tag-list.d.ts","sourceRoot":"","sources":["../../../src/tag-field/tag-field-tag-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,WAAW,CAAA;AAIhE,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAKzE,UAAU,0BAA0B,CAAC,CAAC;IACpC,IAAI,EAAE,CAAC,CAAA;IACP,SAAS,EAAE,UAAU,CACnB,+BAA+B,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAC3D,CAAA;IACD,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM;IACpD,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,aAAa,CAAC,EAC7B,KAAK,GAAG,SAAS,GAAG,SAAS,CAC9B,CAAA;IACD,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACjE;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,MAAM,4BAG7C,oBAAoB,CAAC,CAAC,CAAC,iwBAyDzB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.0-snapshot-20250320092809",
3
+ "version": "0.0.0-snapshot-20250326084237",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -47,11 +47,11 @@
47
47
  "prettier": "^3.5.0",
48
48
  "tsx": "^4.19.2",
49
49
  "typescript": "5.7.3",
50
- "@opengovsg/oui-theme": "0.0.0-snapshot-20250320092809",
51
50
  "@oui/chromatic": "0.0.0",
52
51
  "@oui/eslint-config": "0.0.0",
53
52
  "@oui/prettier-config": "0.0.0",
54
- "@oui/typescript-config": "0.0.0"
53
+ "@oui/typescript-config": "0.0.0",
54
+ "@opengovsg/oui-theme": "0.0.0-snapshot-20250326084237"
55
55
  },
56
56
  "dependencies": {
57
57
  "@internationalized/date": "^3.7.0",
@@ -79,7 +79,7 @@
79
79
  "peerDependencies": {
80
80
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
81
81
  "react-aria-components": "^1.7.1",
82
- "@opengovsg/oui-theme": "0.0.0-snapshot-20250320092809"
82
+ "@opengovsg/oui-theme": "0.0.0-snapshot-20250326084237"
83
83
  },
84
84
  "prettier": "@oui/prettier-config",
85
85
  "scripts": {
@@ -1,347 +0,0 @@
1
- "use strict";
2
- "use client";
3
- 'use strict';
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var react = require('react');
7
- var date = require('@internationalized/date');
8
- var reactAria = require('react-aria');
9
- var reactAriaComponents = require('react-aria-components');
10
- var ouiTheme = require('@opengovsg/oui-theme');
11
- var button = require('../button/button.cjs');
12
- var calendarStyleContext = require('./calendar-style-context.cjs');
13
- var utils = require('./utils.cjs');
14
- var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
15
- var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
16
- var select = require('../select/select.cjs');
17
- var selectItem = require('../select/select-item.cjs');
18
-
19
- const useCalendarSelectors = (state) => {
20
- const yearRange = react.useMemo(() => {
21
- const start = state.minValue.year ?? 1900;
22
- const end = state.maxValue.year ?? 2100;
23
- return { start, end };
24
- }, [state.maxValue, state.minValue]);
25
- const dateFormatter = reactAria.useDateFormatter(state);
26
- const datePartOrder = react.useMemo(() => {
27
- const parts = dateFormatter.formatToParts(
28
- state.visibleRange.start.toDate(state.timeZone)
29
- );
30
- const filteredParts = parts.filter(
31
- (part) => ["year", "month"].includes(part.type)
32
- );
33
- const filteredPartNames = filteredParts.map((part) => part.type);
34
- return filteredPartNames;
35
- }, [dateFormatter, state.timeZone, state.visibleRange.start]);
36
- const months = utils.useGenerateLocalizedMonths(state.timeZone);
37
- const years = utils.useGenerateLocalizedYears(
38
- yearRange.start,
39
- yearRange.end,
40
- state.timeZone
41
- );
42
- return react.useMemo(() => {
43
- return {
44
- months,
45
- years,
46
- datePartOrder
47
- };
48
- }, [datePartOrder, months, years]);
49
- };
50
- const i18nStrings = {
51
- "en-SG": {
52
- selectMonth: "Select month",
53
- selectYear: "Select year",
54
- today: "Today"
55
- },
56
- "zh-SG": {
57
- selectMonth: "\u9009\u62E9\u6708\u4EFD",
58
- selectYear: "\u9009\u62E9\u5E74\u4EFD",
59
- today: "\u4ECA\u5929"
60
- },
61
- "ms-SG": {
62
- selectMonth: "Pilih bulan",
63
- selectYear: "Pilih tahun",
64
- today: "Hari ini"
65
- },
66
- "ta-SG": {
67
- selectMonth: "\u0BAE\u0BBE\u0BA4\u0BA4\u0BCD\u0BA4\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
68
- selectYear: "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
69
- today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
70
- }
71
- };
72
- const CalendarBottomContent = ({
73
- bottomContent,
74
- showTodayButton
75
- }) => {
76
- const state = react.useContext(reactAriaComponents.CalendarStateContext);
77
- const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
78
- const formatMessage = reactAria.useMessageFormatter(i18nStrings);
79
- if (bottomContent) {
80
- return bottomContent;
81
- }
82
- if (!showTodayButton) {
83
- return null;
84
- }
85
- return /* @__PURE__ */ jsxRuntime.jsx(
86
- "div",
87
- {
88
- className: slots.bottomContentWrapper({
89
- className: classNames?.bottomContentWrapper
90
- }),
91
- children: /* @__PURE__ */ jsxRuntime.jsx(
92
- button.Button,
93
- {
94
- isDisabled: state.isDisabled,
95
- variant: "clear",
96
- color: "sub",
97
- size,
98
- slot: null,
99
- className: slots.todayButton({ className: classNames?.todayButton }),
100
- onPress: () => {
101
- state.setFocusedDate(date.today(date.getLocalTimeZone()));
102
- },
103
- children: formatMessage("today")
104
- }
105
- )
106
- }
107
- );
108
- };
109
- function CalendarBase({
110
- weekdayStyle = "narrow",
111
- calendarRef,
112
- minValue = new date.CalendarDate(1900, 0, 1),
113
- maxValue = new date.CalendarDate(2100, 12, 31),
114
- bottomContent,
115
- showTodayButton = true,
116
- ...props
117
- }) {
118
- const { slots, className, classNames } = calendarStyleContext.useCalendarStyleContext();
119
- const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
120
- const dateToHighlight = react.useMemo(() => {
121
- return props.defaultFocusedValue ?? date.today(date.getLocalTimeZone());
122
- }, [props.defaultFocusedValue]);
123
- return /* @__PURE__ */ jsxRuntime.jsxs(
124
- reactAriaComponents.Calendar,
125
- {
126
- pageBehavior: "single",
127
- ...props,
128
- ref: calendarRef,
129
- minValue,
130
- maxValue,
131
- className: reactAriaComponents.composeRenderProps(
132
- className,
133
- (className2, renderProps) => slots.base({
134
- className: ouiTheme.cn(classNames?.base, className2),
135
- ...renderProps
136
- })
137
- ),
138
- children: [
139
- /* @__PURE__ */ jsxRuntime.jsx(
140
- "div",
141
- {
142
- className: slots.gridWrapper({
143
- className: classNames?.gridWrapper
144
- }),
145
- children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(
146
- "div",
147
- {
148
- className: slots.calendar({ className: classNames?.calendar }),
149
- children: [
150
- /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { offsetMonths: index }),
151
- /* @__PURE__ */ jsxRuntime.jsxs(
152
- reactAriaComponents.CalendarGrid,
153
- {
154
- className: slots.grid({ className: classNames?.grid }),
155
- weekdayStyle,
156
- offset: { months: index },
157
- children: [
158
- /* @__PURE__ */ jsxRuntime.jsx(CalendarGridHeader, {}),
159
- /* @__PURE__ */ jsxRuntime.jsx(
160
- reactAriaComponents.CalendarGridBody,
161
- {
162
- className: slots.gridBody({ className: classNames?.gridBody }),
163
- children: (date) => /* @__PURE__ */ jsxRuntime.jsx(
164
- reactAriaComponents.CalendarCell,
165
- {
166
- className: reactAriaComponents.composeRenderProps(
167
- classNames?.cell,
168
- (className2, renderProps) => slots.cell({
169
- className: className2,
170
- isMultipleMonths: numberOfVisibleMonths >= 2,
171
- isDateHighlighted: date.compare(dateToHighlight) === 0,
172
- ...renderProps
173
- })
174
- ),
175
- date
176
- }
177
- )
178
- }
179
- )
180
- ]
181
- }
182
- )
183
- ]
184
- },
185
- index
186
- ))
187
- }
188
- ),
189
- /* @__PURE__ */ jsxRuntime.jsx(
190
- CalendarBottomContent,
191
- {
192
- bottomContent,
193
- showTodayButton
194
- }
195
- )
196
- ]
197
- }
198
- );
199
- }
200
- const CalendarMonthDaySelector = () => {
201
- const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
202
- const state = react.useContext(reactAriaComponents.CalendarStateContext);
203
- const { months, years, datePartOrder } = useCalendarSelectors(state);
204
- const formatMessage = reactAria.useMessageFormatter(i18nStrings);
205
- return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
206
- if (part === "month") {
207
- return /* @__PURE__ */ jsxRuntime.jsx(
208
- select.Select,
209
- {
210
- isDisabled: state.isDisabled,
211
- size,
212
- items: months,
213
- variant: "clear",
214
- classNames: {
215
- trigger: slots.monthSelector({
216
- className: classNames?.monthSelector
217
- }),
218
- list: slots.monthList({ className: classNames?.monthList }),
219
- selectedText: slots.selectorText({
220
- className: classNames?.selectorText
221
- }),
222
- popover: "min-w-[12ch]"
223
- },
224
- selectedKey: state.visibleRange.start.month,
225
- "aria-label": formatMessage("selectMonth"),
226
- onSelectionChange: (month) => {
227
- state.setFocusedDate(
228
- new date.CalendarDate(state.focusedDate.year, Number(month), 1)
229
- );
230
- },
231
- children: (month) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: month.textValue })
232
- },
233
- part
234
- );
235
- }
236
- return /* @__PURE__ */ jsxRuntime.jsx(
237
- select.Select,
238
- {
239
- isDisabled: state.isDisabled,
240
- size,
241
- variant: "clear",
242
- items: years,
243
- classNames: {
244
- trigger: slots.yearSelector({
245
- className: classNames?.yearSelector
246
- }),
247
- list: slots.yearList({ className: classNames?.yearList }),
248
- selectedText: slots.selectorText({
249
- className: classNames?.selectorText
250
- })
251
- },
252
- selectedKey: state.visibleRange.start.year,
253
- "aria-label": formatMessage("selectYear"),
254
- onSelectionChange: (year) => {
255
- state.setFocusedDate(
256
- new date.CalendarDate(
257
- Number(year),
258
- state.focusedDate.month,
259
- state.focusedDate.day
260
- )
261
- );
262
- },
263
- children: (year) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: year.textValue })
264
- },
265
- part
266
- );
267
- }) });
268
- };
269
- function CalendarHeader({ offsetMonths = 0 }) {
270
- const { direction } = reactAriaComponents.useLocale();
271
- const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
272
- const state = react.useContext(reactAriaComponents.CalendarStateContext);
273
- const monthYearTitle = utils.useLocalizedMonthYear(
274
- state.visibleRange.start.add({ months: offsetMonths }),
275
- state.timeZone
276
- );
277
- if (offsetMonths === 0) {
278
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.header({ className: classNames?.header }), children: [
279
- /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthDaySelector, {}),
280
- /* @__PURE__ */ jsxRuntime.jsxs(
281
- reactAriaComponents.Group,
282
- {
283
- className: slots.buttonGroup({ className: classNames?.buttonGroup }),
284
- children: [
285
- /* @__PURE__ */ jsxRuntime.jsx(
286
- button.Button,
287
- {
288
- size,
289
- isIconOnly: true,
290
- variant: "clear",
291
- color: "sub",
292
- slot: "previous",
293
- className: slots.prevButton({ className: classNames?.prevButton }),
294
- children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true })
295
- }
296
- ),
297
- /* @__PURE__ */ jsxRuntime.jsx(
298
- button.Button,
299
- {
300
- size,
301
- variant: "clear",
302
- color: "sub",
303
- isIconOnly: true,
304
- slot: "next",
305
- className: slots.nextButton({
306
- className: classNames?.nextButton
307
- }),
308
- children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true })
309
- }
310
- )
311
- ]
312
- }
313
- )
314
- ] });
315
- }
316
- return /* @__PURE__ */ jsxRuntime.jsx(
317
- reactAriaComponents.Heading,
318
- {
319
- className: slots.header({ className: classNames?.header }),
320
- "aria-hidden": true,
321
- level: 2,
322
- children: monthYearTitle
323
- }
324
- );
325
- }
326
- function CalendarGridHeader() {
327
- const { slots, classNames } = calendarStyleContext.useCalendarStyleContext();
328
- return /* @__PURE__ */ jsxRuntime.jsx(
329
- reactAriaComponents.CalendarGridHeader,
330
- {
331
- className: slots.gridHeader({ className: classNames?.gridHeader }),
332
- children: (day) => /* @__PURE__ */ jsxRuntime.jsx(
333
- reactAriaComponents.CalendarHeaderCell,
334
- {
335
- className: slots.gridHeaderCell({
336
- className: classNames?.gridHeaderCell
337
- }),
338
- children: day
339
- }
340
- )
341
- }
342
- );
343
- }
344
-
345
- exports.CalendarBase = CalendarBase;
346
- exports.CalendarGridHeader = CalendarGridHeader;
347
- exports.CalendarHeader = CalendarHeader;