react-timezone-range-picker 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Your Name or Your Company
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,81 @@
+# 🕓 React Timezone Range Picker
+
+**Flexible, Mantine-powered UI components for building timezone-aware date and time range pickers.**
+
+[![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)
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
+[![React](https://img.shields.io/badge/react-18%2B-61dafb?logo=react)](https://react.dev)
+
+---
+
+## ✨ Features
+
+- 📅 **Start–End & Around-time panels** for absolute and relative time selection
+- 🌍 **Timezone-aware** display and conversion (via `dayjs`)
+- 🎨 **Mantine 8** components for accessibility and theming
+- ⚡️ **TypeScript** support with generated definitions
+- 🪶 **Lightweight** build via `tsup`, tree-shakeable ESM + CJS outputs
+
+---
+
+## 📦 Installation
+
+```bash
+# npm
+npm install react-timezone-range-picker
+
+# yarn
+yarn add react-timezone-range-picker
+
+# pnpm
+pnpm add react-timezone-range-picker
+```
+
+**Peer dependencies:**  
+You must install these in your project:
+
+- `react` (>=18)
+- `react-dom` (>=18)
+- `@mantine/core` (>=8.3.1)
+- `@mantine/dates` (>=8.3.1)
+- `@mantine/form` (>=8.3.4)
+- `@mantine/hooks` (>=8.3.1)
+- `dayjs` (>=1.11.18)
+
+---
+
+## Usage
+
+```tsx
+import { TimezoneRangePicker, OnApplyParams, TimezoneData } from "react-timezone-range-picker";
+
+const DEFAULT_TIMEZONE = {
+  name: "Asia/Tokyo",
+  longName: "Japan Standard Time",
+  utcOffset: "+09:00",
+};
+
+const DEFAULT_RANGE = {
+  startDate: "2025-06-10",
+  startTime: "09:00:00",
+  endDate: "2025-06-11",
+  endTime: "18:00:00",
+  timezone: DEFAULT_TIMEZONE,
+};
+
+function App() {
+  const [range, setRange] = useState<TzRange>(DEFAULT_RANGE);
+
+  const handleTimeRangeApply = ({
+    startDate,
+    startTime,
+    endDate,
+    endTime,
+    timezone,
+  }: OnApplyParams) => {
+    setRange({ startDate, startTime, endDate, endTime, timezone });
+  };
+
+  return <TimezoneRangePicker {...range} onApply={handleTimeRangeApply} />;
+}
+```

package/dist/index.css

@@ -0,0 +1,80 @@
+/* src/TimezonePanel/components/TimezoneList/index.module.css */
+.row {
+  padding: 0.4rem;
+}
+.row-dark {
+  cursor: pointer;
+  &:hover {
+    background-color: #3a3a3a;
+  }
+}
+.row-light {
+  cursor: pointer;
+  &:hover {
+    background-color: #f3f4f6;
+  }
+}
+.row-selected-dark {
+  background-color: #5a5a5a;
+  font-weight: 600;
+  &:hover {
+    background-color: #5a5a5a;
+  }
+}
+.row-selected-light {
+  background-color: #f3f4f6;
+  font-weight: 600;
+  &:hover {
+    background-color: #f3f4f6;
+  }
+}
+
+/* src/TimezonePanel/index.module.css */
+.timezone-panel-container {
+  height: 100%;
+}
+.list-container {
+  overflow-y: auto;
+  height: inherit;
+  margin-top: 0.5rem;
+}
+
+/* src/styles/index.module.css */
+.form-container {
+  display: flex;
+  flex: 2;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+/* src/Sidebar/index.module.css */
+.sidebar-container {
+  border-right: 1px solid #ddd;
+}
+.sidebar-row {
+  cursor: pointer;
+  & > div > svg {
+    margin-right: 0.5rem;
+  }
+}
+
+/* src/RelativeTimePanel/index.module.css */
+.relative-time-panel-container {
+  height: calc(100% - 120px - 36px);
+  overflow-y: auto;
+}
+.time-row {
+  cursor: pointer;
+}
+.time-row-dark {
+  &:hover {
+    background-color: #3a3a3a;
+  }
+}
+.time-row-light {
+  &:hover {
+    background-color: #f3f4f6;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TimezonePanel/components/TimezoneList/index.module.css","../src/TimezonePanel/index.module.css","../src/styles/index.module.css","../src/Sidebar/index.module.css","../src/RelativeTimePanel/index.module.css"],"sourcesContent":[".row {\n  padding: 0.4rem;\n}\n\n.row-dark {\n  cursor: pointer;\n  &:hover {\n    background-color: #3a3a3a;\n  }\n}\n\n.row-light {\n  cursor: pointer;\n  &:hover {\n    background-color: #f3f4f6;\n  }\n}\n\n.row-selected-dark {\n  background-color: #5a5a5a;\n  font-weight: 600;\n  &:hover {\n    background-color: #5a5a5a;\n  }\n}\n\n.row-selected-light {\n  background-color: #f3f4f6;\n  font-weight: 600;\n  &:hover {\n    background-color: #f3f4f6;\n  }\n}\n",".timezone-panel-container {\n  height: 100%;\n}\n\n.list-container {\n  overflow-y: auto;\n  height: inherit;\n  margin-top: 0.5rem;\n}\n",".form-container {\n  display: flex;\n  flex: 2;\n  flex-direction: column;\n  justify-content: space-between;\n  height: 100%;\n}\n",".sidebar-container {\n  border-right: 1px solid #ddd;\n}\n\n.sidebar-row {\n  cursor: pointer;\n\n  & > div > svg {\n    margin-right: 0.5rem;\n  }\n}\n",".relative-time-panel-container {\n  height: calc(100% - 120px - 36px);\n  overflow-y: auto;\n}\n\n.time-row {\n  cursor: pointer;\n}\n\n.time-row-dark {\n  &:hover {\n    background-color: #3a3a3a;\n  }\n}\n\n.time-row-light {\n  &:hover {\n    background-color: #f3f4f6;\n  }\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACX;AAEA,CAAC;AACC,UAAQ;AACR,GAAC;AACC,sBAAkB;AACpB;AACF;AAEA,CAAC;AACC,UAAQ;AACR,GAAC;AACC,sBAAkB;AACpB;AACF;AAEA,CAAC;AACC,oBAAkB;AAClB,eAAa;AACb,GAAC;AACC,sBAAkB;AACpB;AACF;AAEA,CAAC;AACC,oBAAkB;AAClB,eAAa;AACb,GAAC;AACC,sBAAkB;AACpB;AACF;;;AChCA,CAAC;AACC,UAAQ;AACV;AAEA,CAAC;AACC,cAAY;AACZ,UAAQ;AACR,cAAY;AACd;;;ACRA,CAAC;AACC,WAAS;AACT,QAAM;AACN,kBAAgB;AAChB,mBAAiB;AACjB,UAAQ;AACV;;;ACNA,CAAC;AACC,gBAAc,IAAI,MAAM;AAC1B;AAEA,CAAC;AACC,UAAQ;AAER,IAAE,EAAE,IAAI,EAAE;AACR,kBAAc;AAChB;AACF;;;ACVA,CAAC;AACC,UAAQ,KAAK,KAAK,EAAE,MAAM,EAAE;AAC5B,cAAY;AACd;AAEA,CAAC;AACC,UAAQ;AACV;AAEA,CAAC;AACC,GAAC;AACC,sBAAkB;AACpB;AACF;AAEA,CAAC;AACC,GAAC;AACC,sBAAkB;AACpB;AACF;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+
+interface TimezoneData {
+    name: string | null;
+    longName: string | null;
+    utcOffset: string | null;
+}
+interface OnApplyParams {
+    startDate: string | null;
+    startTime: string | null;
+    endDate: string | null;
+    endTime: string | null;
+    timezone: TimezoneData;
+}
+interface TzRange {
+    startDate: string | null;
+    startTime: string | null;
+    endDate: string | null;
+    endTime: string | null;
+    timezone: TimezoneData;
+    onApply: ({ startDate, startTime, endDate, endTime, timezone }: OnApplyParams) => void;
+}
+
+interface ITimezonePanel {
+    tzRange: TzRange;
+}
+declare const TimezonePanel: FC<ITimezonePanel>;
+
+declare enum Panel {
+    START_END_TIME = "Start and end times",
+    AROUND_TIME = "Around a time",
+    TIMEZONE = "Time zone"
+}
+declare const TimezoneRangePicker: FC<TzRange>;
+
+export { type OnApplyParams, Panel, type TimezoneData, TimezonePanel, TimezoneRangePicker, type TzRange };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+
+interface TimezoneData {
+    name: string | null;
+    longName: string | null;
+    utcOffset: string | null;
+}
+interface OnApplyParams {
+    startDate: string | null;
+    startTime: string | null;
+    endDate: string | null;
+    endTime: string | null;
+    timezone: TimezoneData;
+}
+interface TzRange {
+    startDate: string | null;
+    startTime: string | null;
+    endDate: string | null;
+    endTime: string | null;
+    timezone: TimezoneData;
+    onApply: ({ startDate, startTime, endDate, endTime, timezone }: OnApplyParams) => void;
+}
+
+interface ITimezonePanel {
+    tzRange: TzRange;
+}
+declare const TimezonePanel: FC<ITimezonePanel>;
+
+declare enum Panel {
+    START_END_TIME = "Start and end times",
+    AROUND_TIME = "Around a time",
+    TIMEZONE = "Time zone"
+}
+declare const TimezoneRangePicker: FC<TzRange>;
+
+export { type OnApplyParams, Panel, type TimezoneData, TimezonePanel, TimezoneRangePicker, type TzRange };