react-timezone-range-picker 0.1.5 β†’ 0.1.6

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.
package/README.md CHANGED
@@ -4,20 +4,35 @@
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/react-timezone-range-picker?color=blue&label=npm)](https://www.npmjs.com/package/react-timezone-range-picker)
6
6
  [![license](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
7
- [![React](https://img.shields.io/badge/react-18%2B-61dafb?logo=react)](https://react.dev)
7
+ [![React](https://img.shields.io/badge/react-19.2%2B-61dafb?logo=react)](https://react.dev)
8
8
 
9
9
  ---
10
10
 
11
11
  ## ✨ Features
12
12
 
13
- - πŸ“… **Start–End & Around-time panels** for absolute and relative time selection
14
- - 🌍 **Timezone-aware** display and conversion (via `dayjs`)
15
- - 🎨 **Mantine 8** components for accessibility and theming
13
+ - πŸ“… **Basic picker by default** with a date-only range field and scrollable day quick ranges
14
+ - πŸ› οΈ **Advanced mode** with separate start/end date and time fields, relative ranges, around-time selection, and timezone changes
15
+ - 🌍 **Timezone-aware** display and conversion via the Temporal API with an old-browser polyfill
16
+ - 🎨 **Mantine 9** components for accessibility and theming
16
17
  - ⚑️ **TypeScript** support with generated definitions
17
18
  - πŸͺΆ **Lightweight** build via `vite`, tree-shakeable ESM + CJS outputs
18
19
 
19
20
  ---
20
21
 
22
+ ## Picker modes
23
+
24
+ ### Basic mode
25
+
26
+ The picker opens in basic mode on every mount. It provides a compact date-only range field and day-based quick options. Date and quick-option selections are applied immediately without an Apply button, and both returned times are set to `00:00:00`.
27
+
28
+ Select **Advanced** to switch modes for the lifetime of the mounted component. Reloading the page or remounting the picker resets it to basic mode.
29
+
30
+ ### Advanced mode
31
+
32
+ Advanced mode provides the full picker with separate start/end date and time fields, relative time options, around-time selection, and timezone selection. Changes to its form-based panels are submitted with the Apply button.
33
+
34
+ ---
35
+
21
36
  ## πŸ“¦ Installation
22
37
 
23
38
  ```bash
@@ -34,17 +49,19 @@ pnpm add react-timezone-range-picker
34
49
  **Peer dependencies:**
35
50
  You must install these in your project:
36
51
 
37
- - `react` (>=18)
38
- - `react-dom` (>=18)
39
- - `@mantine/core` (>=8.3.1)
40
- - `@mantine/dates` (>=8.3.1)
41
- - `@mantine/hooks` (>=8.3.1)
52
+ - `react` (>=19.2.0)
53
+ - `react-dom` (>=19.2.0)
54
+ - `@mantine/core` (>=9.5.2)
55
+ - `@mantine/dates` (>=9.5.2)
56
+ - `@mantine/form` (>=9.5.2)
57
+ - `@mantine/hooks` (>=9.5.2)
42
58
 
43
59
  ---
44
60
 
45
61
  ## Usage
46
62
 
47
63
  ```tsx
64
+ import { useState } from "react";
48
65
  import {
49
66
  TimezoneRangePicker,
50
67
  type OnApplyParams,
@@ -60,9 +77,9 @@ const DEFAULT_TIMEZONE = {
60
77
  };
61
78
 
62
79
  const DEFAULT_RANGE = {
63
- startDate: "2025-06-10",
80
+ startDate: "2025/06/10",
64
81
  startTime: "09:00:00",
65
- endDate: "2025-06-11",
82
+ endDate: "2025/06/11",
66
83
  endTime: "18:00:00",
67
84
  timezone: DEFAULT_TIMEZONE,
68
85
  };
@@ -1 +1 @@
1
- {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/AroundTimePanel/util.ts"],"names":[],"mappings":"AAGA,oBAAY,UAAU;IACpB,aAAa,sBAAiB;IAC9B,SAAS,oBAAe;IACxB,cAAc,sBAAiB;IAC/B,aAAa,sBAAiB;IAC9B,OAAO,kBAAa;IACpB,MAAM,iBAAY;CACnB;AAED,eAAO,MAAM,YAAY,cAOxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,MAAM,EAAE,YAAY,UAAU;;;;;CAgE5F,CAAC"}
1
+ {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/AroundTimePanel/util.ts"],"names":[],"mappings":"AAEA,oBAAY,UAAU;IACpB,aAAa,sBAAiB;IAC9B,SAAS,oBAAe;IACxB,cAAc,sBAAiB;IAC/B,aAAa,sBAAiB;IAC9B,OAAO,kBAAa;IACpB,MAAM,iBAAY;CACnB;AAED,eAAO,MAAM,YAAY,cAOxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,MAAM,EAAE,YAAY,UAAU;;;;;CAgE5F,CAAC"}
@@ -1,2 +1,2 @@
1
- export declare const Footer: () => import("react/jsx-runtime").JSX.Element;
1
+ export declare const Footer: () => import("react").JSX.Element;
2
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Footer/index.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM,+CA4BlB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Footer/index.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM,mCA4BlB,CAAC"}
@@ -7,6 +7,6 @@ interface PopoverContextType {
7
7
  export declare const usePopoverContext: () => PopoverContextType;
8
8
  export declare const PopoverProvider: ({ children }: {
9
9
  children: ReactNode;
10
- }) => import("react/jsx-runtime").JSX.Element;
10
+ }) => import("react").JSX.Element;
11
11
  export {};
12
12
  //# sourceMappingURL=PopoverProvider.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"PopoverProvider.d.ts","sourceRoot":"","sources":["../../src/Provider/PopoverProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAwB,MAAM,OAAO,CAAC;AAEjG,UAAU,kBAAkB;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAID,eAAO,MAAM,iBAAiB,0BAI7B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAYpE,CAAC"}
1
+ {"version":3,"file":"PopoverProvider.d.ts","sourceRoot":"","sources":["../../src/Provider/PopoverProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAwB,MAAM,OAAO,CAAC;AAEjG,UAAU,kBAAkB;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAID,eAAO,MAAM,iBAAiB,0BAI7B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,gCAYpE,CAAC"}
@@ -2,6 +2,6 @@ import { TzRange } from "../interfaces";
2
2
  interface IRelativeTimePanel {
3
3
  tzRange: TzRange;
4
4
  }
5
- export declare const RelativeTimePanel: ({ tzRange }: IRelativeTimePanel) => import("react/jsx-runtime").JSX.Element;
5
+ export declare const RelativeTimePanel: ({ tzRange }: IRelativeTimePanel) => import("react").JSX.Element;
6
6
  export {};
7
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RelativeTimePanel/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,iBAAiB,GAAI,aAAa,kBAAkB,4CAmFhE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RelativeTimePanel/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,iBAAiB,GAAI,aAAa,kBAAkB,gCAmFhE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"timeOptions.d.ts","sourceRoot":"","sources":["../../src/RelativeTimePanel/timeOptions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAkQD,eAAO,MAAM,cAAc,GACzB,cAAc,MAAM,EACpB,UAAU,0BAA0B,KACnC,YAAY,EASd,CAAC"}
1
+ {"version":3,"file":"timeOptions.d.ts","sourceRoot":"","sources":["../../src/RelativeTimePanel/timeOptions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAoED,eAAO,MAAM,cAAc,GACzB,cAAc,MAAM,EACpB,UAAU,0BAA0B,KACnC,YAAY,EASd,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { Dispatch, FC, SetStateAction } from "react";
2
- import { Panel } from "../TimezoneRangePicker";
2
+ import { Panel } from "../TimezoneRangePicker/panels";
3
3
  import { TzRange } from "../interfaces";
4
4
  interface ISidebar {
5
5
  tzRange: TzRange;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sidebar/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,UAAU,QAAQ;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,QAAQ,CAuDhC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sidebar/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,UAAU,QAAQ;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,QAAQ,CAuDhC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StartEndTimePanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOxC,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,kBAAkB,CAmI7C,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StartEndTimePanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAc3B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOxC,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,kBAAkB,CAuI7C,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimezonePanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA2C,MAAM,OAAO,CAAC;AASpE,OAAO,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AActD,UAAU,cAAc;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,cAAc,CA0HrC,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimezonePanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA2C,MAAM,OAAO,CAAC;AASpE,OAAO,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAatD,UAAU,cAAc;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,cAAc,CA0HrC,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"getBrowserTimezone.d.ts","sourceRoot":"","sources":["../../../src/TimezonePanel/util/getBrowserTimezone.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,kBAAkB;;;;;;CAW9B,CAAC"}
1
+ {"version":3,"file":"getBrowserTimezone.d.ts","sourceRoot":"","sources":["../../../src/TimezonePanel/util/getBrowserTimezone.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,kBAAkB;;;;;;CAY9B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"getTimezones.d.ts","sourceRoot":"","sources":["../../../src/TimezonePanel/util/getTimezones.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,YAAY;;;;;;GAWxB,CAAC"}
1
+ {"version":3,"file":"getTimezones.d.ts","sourceRoot":"","sources":["../../../src/TimezonePanel/util/getTimezones.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,YAAY;;;;;;GAgBxB,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { FC } from "react";
2
+ import { TzRange } from "../interfaces";
3
+ interface AdvancedPickerViewProps {
4
+ tzRange: TzRange;
5
+ }
6
+ export declare const AdvancedPickerView: FC<AdvancedPickerViewProps>;
7
+ export {};
8
+ //# sourceMappingURL=AdvancedPickerView.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AdvancedPickerView.d.ts","sourceRoot":"","sources":["../../src/TimezoneRangePicker/AdvancedPickerView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAKhD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAIxC,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAoD1D,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { FC } from "react";
2
+ import { TzRange } from "../interfaces";
3
+ interface BasicPickerViewProps {
4
+ tzRange: TzRange;
5
+ onAdvanced: () => void;
6
+ }
7
+ export declare const BasicPickerView: FC<BasicPickerViewProps>;
8
+ export {};
9
+ //# sourceMappingURL=BasicPickerView.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BasicPickerView.d.ts","sourceRoot":"","sources":["../../src/TimezoneRangePicker/BasicPickerView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAIxC,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAOD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA+FpD,CAAC"}
@@ -1,10 +1,5 @@
1
1
  import { TzRange } from "../interfaces";
2
- export declare enum Panel {
3
- RELATIVE_TIME = "Relative time",
4
- START_END_TIME = "Start and end times",
5
- AROUND_TIME = "Around a time",
6
- TIMEZONE = "Time zone"
7
- }
8
- declare const TimezoneRangePickerWrapper: (props: TzRange) => import("react/jsx-runtime").JSX.Element;
2
+ export { Panel } from "./panels";
3
+ declare const TimezoneRangePickerWrapper: (props: TzRange) => import("react").JSX.Element;
9
4
  export { TimezoneRangePickerWrapper as TimezoneRangePicker };
10
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimezoneRangePicker/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,oBAAY,KAAK;IACf,aAAa,kBAAkB;IAC/B,cAAc,wBAAwB;IACtC,WAAW,kBAAkB;IAC7B,QAAQ,cAAc;CACvB;AAmHD,QAAA,MAAM,0BAA0B,GAAI,OAAO,OAAO,4CAMjD,CAAC;AAEF,OAAO,EAAE,0BAA0B,IAAI,mBAAmB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimezoneRangePicker/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAMxC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAgFjC,QAAA,MAAM,0BAA0B,GAAI,OAAO,OAAO,gCAIjD,CAAC;AAEF,OAAO,EAAE,0BAA0B,IAAI,mBAAmB,EAAE,CAAC"}
@@ -0,0 +1,7 @@
1
+ export declare enum Panel {
2
+ RELATIVE_TIME = "Relative time",
3
+ START_END_TIME = "Start and end times",
4
+ AROUND_TIME = "Around a time",
5
+ TIMEZONE = "Time zone"
6
+ }
7
+ //# sourceMappingURL=panels.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/TimezoneRangePicker/panels.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK;IACf,aAAa,kBAAkB;IAC/B,cAAc,wBAAwB;IACtC,WAAW,kBAAkB;IAC7B,QAAQ,cAAc;CACvB"}