react-timezone-range-picker 0.1.0

package/dist/index.js

@@ -0,0 +1,1007 @@
+'use strict';
+
+var react = require('react');
+var core = require('@mantine/core');
+var jsxRuntime = require('react/jsx-runtime');
+var dayjs4 = require('dayjs');
+var utc = require('dayjs/plugin/utc');
+var timezone = require('dayjs/plugin/timezone');
+var dates = require('@mantine/dates');
+var form = require('@mantine/form');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var dayjs4__default = /*#__PURE__*/_interopDefault(dayjs4);
+var utc__default = /*#__PURE__*/_interopDefault(utc);
+var timezone__default = /*#__PURE__*/_interopDefault(timezone);
+
+// src/TimezonePanel/index.tsx
+function useTimeoutFn(fn, ms) {
+  var ready = react.useRef(false);
+  var timeout = react.useRef();
+  var callback = react.useRef(fn);
+  var isReady = react.useCallback(function() {
+    return ready.current;
+  }, []);
+  var set = react.useCallback(function() {
+    ready.current = false;
+    timeout.current && clearTimeout(timeout.current);
+    timeout.current = setTimeout(function() {
+      ready.current = true;
+      callback.current();
+    }, ms);
+  }, [ms]);
+  var clear = react.useCallback(function() {
+    ready.current = null;
+    timeout.current && clearTimeout(timeout.current);
+  }, []);
+  react.useEffect(function() {
+    callback.current = fn;
+  }, [fn]);
+  react.useEffect(function() {
+    set();
+    return clear;
+  }, [ms]);
+  return [isReady, clear, set];
+}
+
+// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-use/esm/useDebounce.js
+function useDebounce(fn, ms, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+  var _a = useTimeoutFn(fn, ms), isReady = _a[0], cancel = _a[1], reset = _a[2];
+  react.useEffect(reset, deps);
+  return [isReady, cancel];
+}
+
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/TimezonePanel/components/TimezoneList/index.module.css
+var TimezoneList_default = {};
+var useAppTheme = () => {
+  const { colorScheme } = core.useMantineColorScheme();
+  const theme = core.useMantineTheme();
+  return { colorScheme, theme, appTheme: theme.other.appTheme[colorScheme] };
+};
+var TimezoneList = ({
+  name,
+  longName,
+  currentTime,
+  utcOffset,
+  selectedTimezone,
+  isBrowserTimezone = false,
+  handleTimezoneMouseClick = void 0
+}) => {
+  const { colorScheme } = useAppTheme();
+  const onClick = () => {
+    if (isBrowserTimezone) return;
+    handleTimezoneMouseClick({
+      name,
+      longName,
+      utcOffset
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Flex,
+    {
+      direction: "column",
+      className: clsx_default(
+        TimezoneList_default.row,
+        isBrowserTimezone ? void 0 : colorScheme === "dark" ? TimezoneList_default["row-dark"] : TimezoneList_default["row-light"],
+        selectedTimezone?.name === name ? colorScheme === "dark" ? TimezoneList_default["row-selected-dark"] : TimezoneList_default["row-selected-light"] : void 0
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { justify: "space-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", children: name }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.Text, { size: "sm", children: [
+            currentTime,
+            " \u2022 UTC",
+            utcOffset
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", children: longName })
+      ]
+    }
+  );
+};
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
+var defaultAttributes = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
+  }
+};
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
+var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
+  const Component = react.forwardRef(
+    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => react.createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes[type],
+        width: size,
+        height: size,
+        className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
+        ...type === "filled" ? {
+          fill: color
+        } : {
+          strokeWidth: stroke,
+          stroke: color
+        },
+        ...rest
+      },
+      [
+        title && react.createElement("title", { key: "svg-title" }, title),
+        ...iconNode.map(([tag, attrs]) => react.createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    )
+  );
+  Component.displayName = `${iconNamePascal}`;
+  return Component;
+};
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCalendar.mjs
+var __iconNode = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
+var IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode);
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs
+var __iconNode2 = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
+var IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode2);
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconClock.mjs
+var __iconNode3 = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 7v5l3 3", "key": "svg-1" }]];
+var IconClock = createReactComponent("outline", "clock", "Clock", __iconNode3);
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFilter2.mjs
+var __iconNode4 = [["path", { "d": "M4 6h16", "key": "svg-0" }], ["path", { "d": "M6 12h12", "key": "svg-1" }], ["path", { "d": "M9 18h6", "key": "svg-2" }]];
+var IconFilter2 = createReactComponent("outline", "filter-2", "Filter2", __iconNode4);
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconWorld.mjs
+var __iconNode5 = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M3.6 9h16.8", "key": "svg-1" }], ["path", { "d": "M3.6 15h16.8", "key": "svg-2" }], ["path", { "d": "M11.5 3a17 17 0 0 0 0 18", "key": "svg-3" }], ["path", { "d": "M12.5 3a17 17 0 0 1 0 18", "key": "svg-4" }]];
+var IconWorld = createReactComponent("outline", "world", "World", __iconNode5);
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCalendarWeekFilled.mjs
+var __iconNode6 = [["path", { "d": "M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z", "key": "svg-0" }], ["path", { "d": "M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1", "key": "svg-1" }], ["path", { "d": "M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1", "key": "svg-2" }], ["path", { "d": "M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1", "key": "svg-3" }], ["path", { "d": "M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z", "key": "svg-4" }], ["path", { "d": "M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1", "key": "svg-5" }]];
+var IconCalendarWeekFilled = createReactComponent("filled", "calendar-week-filled", "CalendarWeekFilled", __iconNode6);
+var TimezoneSearch = ({ searchText, setSearchText }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Input,
+    {
+      placeholder: "Timezone search (Asia, Tokyo, +09:00, etc)",
+      leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconFilter2, { stroke: 2 }),
+      value: searchText,
+      onChange: (e) => setSearchText(e.currentTarget.value)
+    }
+  );
+};
+
+// src/TimezonePanel/util/longTzName.ts
+var longTzName = (timezone3, locale = "en-US") => {
+  return new Intl.DateTimeFormat(locale, {
+    timeZone: timezone3,
+    timeZoneName: "long"
+  }).formatToParts(/* @__PURE__ */ new Date()).find((p) => p.type === "timeZoneName")?.value || "";
+};
+
+// src/TimezonePanel/util/parseOffest.ts
+var parseOffset = (offsetUtc) => {
+  const sign = offsetUtc[0] === "-" ? -1 : 1;
+  const [hours, minutes] = offsetUtc.slice(1).split(":").map(Number);
+  return sign * (hours * 60 + minutes);
+};
+
+// src/TimezonePanel/util/getTimezones.ts
+dayjs4__default.default.extend(utc__default.default);
+dayjs4__default.default.extend(timezone__default.default);
+var getTimezones = () => {
+  const timezones = Intl.supportedValuesOf("timeZone");
+  return timezones.map((timezone3) => {
+    const offset = dayjs4__default.default().tz(timezone3).format("Z");
+    return {
+      name: timezone3,
+      longName: longTzName(timezone3),
+      currentTime: dayjs4__default.default().tz(timezone3).format("h:mm A"),
+      utcOffset: offset,
+      offsetMinutes: parseOffset(offset)
+    };
+  }).sort((a, b) => a.offsetMinutes - b.offsetMinutes);
+};
+
+// src/TimezonePanel/index.module.css
+var TimezonePanel_default = {};
+
+// src/styles/index.module.css
+var styles_default = {};
+dayjs4__default.default.extend(utc__default.default);
+dayjs4__default.default.extend(timezone__default.default);
+var getBrowserTimezone = () => {
+  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const offset = dayjs4__default.default().tz(tz).format("Z");
+  return {
+    name: tz,
+    longName: longTzName(tz),
+    currentTime: dayjs4__default.default().tz(tz).format("h:mm A"),
+    utcOffset: offset,
+    offsetMinutes: parseOffset(offset)
+  };
+};
+var Footer = ({ handleCancelClick }) => {
+  const { theme } = useAppTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { columnGap: 16, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Button, { size: "xs", variant: "subtle", color: theme.primaryColor, onClick: handleCancelClick, children: "Cancel" }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Button, { type: "submit", size: "xs", color: theme.primaryColor, children: "Apply" })
+  ] }) });
+};
+var TimezonePanel = ({ tzRange }) => {
+  const [selectedTimezone, setSelectedTimezone] = react.useState(tzRange.timezone);
+  const [filteredTimezones, setFilteredTimezones] = react.useState([]);
+  const [searchText, setSearchText] = react.useState("");
+  const timezones = react.useMemo(() => getTimezones(), []);
+  react.useEffect(() => {
+    setFilteredTimezones(timezones);
+  }, []);
+  useDebounce(
+    () => {
+      if (searchText === "") {
+        setFilteredTimezones(timezones);
+        return;
+      }
+      setFilteredTimezones(
+        timezones.filter(
+          (timezone3) => timezone3.name.toLowerCase().includes(searchText.toLocaleLowerCase()) || timezone3.longName.toLowerCase().includes(searchText.toLocaleLowerCase()) || timezone3.currentTime.toLowerCase().includes(searchText.toLocaleLowerCase()) || timezone3.utcOffset.toLowerCase().includes(searchText.toLocaleLowerCase())
+        )
+      );
+    },
+    250,
+    [searchText]
+  );
+  react.useMemo(() => getBrowserTimezone(), []);
+  const handleTimezoneMouseClick = (selectedTimezone2) => {
+    setSelectedTimezone(selectedTimezone2);
+  };
+  const handleApply = (e) => {
+    e.preventDefault();
+    tzRange.onApply({
+      startDate: tzRange.startDate,
+      startTime: tzRange.startTime,
+      endDate: tzRange.endDate,
+      endTime: tzRange.endTime,
+      timezone: selectedTimezone || {
+        name: null,
+        longName: null,
+        utcOffset: null
+      }
+    });
+  };
+  const getCurrentTimeInTz = (tzName) => {
+    if (!tzName) return "";
+    return dayjs4__default.default().tz(tzName).format("h:mm A");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { className: styles_default["form-container"], onSubmit: handleApply, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", style: { height: "calc(100% - 40px)" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Box, { style: { width: "95%" }, mx: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(TimezoneSearch, { searchText, setSearchText }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { style: { overflowY: "scroll" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fw: 600, px: 12, children: "My Location" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(
+          TimezoneList,
+          {
+            isBrowserTimezone: true,
+            name: tzRange.timezone?.name,
+            longName: tzRange.timezone?.longName,
+            currentTime: getCurrentTimeInTz(tzRange.timezone?.name),
+            utcOffset: tzRange.timezone?.utcOffset,
+            selectedTimezone
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fw: 600, px: 12, children: "Locations" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { direction: "column", className: TimezonePanel_default["list-container"], children: filteredTimezones.map((tz, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          TimezoneList,
+          {
+            name: tz.name,
+            longName: tz.longName,
+            currentTime: tz.currentTime,
+            utcOffset: tz.utcOffset,
+            selectedTimezone,
+            handleTimezoneMouseClick
+          },
+          idx
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Box, { px: 12, children: /* @__PURE__ */ jsxRuntime.jsx(Footer, {}) })
+  ] });
+};
+
+// src/Sidebar/index.module.css
+var Sidebar_default = {};
+var getTimeOptions = (timezoneName) => [
+  {
+    label: "Today",
+    searchKey: "today",
+    startTime: dayjs4__default.default().tz(timezoneName).startOf("day").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).endOf("day").format()
+  },
+  {
+    label: "Tomorrow",
+    searchKey: "tomorrow",
+    startTime: dayjs4__default.default().tz(timezoneName).add(1, "day").startOf("day").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(1, "day").endOf("day").format()
+  },
+  {
+    label: "Yesterday",
+    searchKey: "yesterday",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(1, "day").startOf("day").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).subtract(1, "day").endOf("day").format(),
+    lineBreak: true
+  },
+  {
+    label: "Last 15 seconds",
+    searchKey: "-15s",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(15, "second").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 30 seconds",
+    searchKey: "-30s",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(30, "second").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Next 15 seconds",
+    searchKey: "+15s",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(15, "second").format()
+  },
+  {
+    label: "Next 30 seconds",
+    searchKey: "+30s",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(30, "second").format(),
+    lineBreak: true
+  },
+  {
+    label: "Last 5 minutes",
+    searchKey: "-5m",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(5, "minute").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 10 minutes",
+    searchKey: "-10m",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(10, "minute").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 15 minutes",
+    searchKey: "-15m",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(15, "minute").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 30 minutes",
+    searchKey: "-30m",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(30, "minute").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 45 minutes",
+    searchKey: "-45m",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(45, "minute").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Next 5 minutes",
+    searchKey: "+5m",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(5, "minute").format()
+  },
+  {
+    label: "Next 10 minutes",
+    searchKey: "+10m",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(10, "minute").format()
+  },
+  {
+    label: "Next 15 minutes",
+    searchKey: "+15m",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(15, "minute").format()
+  },
+  {
+    label: "Next 30 minutes",
+    searchKey: "+30m",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(30, "minute").format()
+  },
+  {
+    label: "Next 45 minutes",
+    searchKey: "+45m",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(45, "minute").format(),
+    lineBreak: true
+  },
+  {
+    label: "Last 1 hour",
+    searchKey: "-1h",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(1, "hour").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 3 hours",
+    searchKey: "-3h",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(3, "hour").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 6 hours",
+    searchKey: "-6h",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(6, "hour").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 12 hours",
+    searchKey: "-12h",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(12, "hour").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Next 1 hour",
+    searchKey: "+1h",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(1, "hour").format()
+  },
+  {
+    label: "Next 3 hours",
+    searchKey: "+3h",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(3, "hour").format()
+  },
+  {
+    label: "Next 6 hours",
+    searchKey: "+6h",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(6, "hour").format()
+  },
+  {
+    label: "Next 12 hours",
+    searchKey: "+12h",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(12, "hour").format(),
+    lineBreak: true
+  },
+  {
+    label: "Last 1 day",
+    searchKey: "-1d",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(1, "day").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 2 days",
+    searchKey: "-2d",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(2, "day").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 7 days",
+    searchKey: "-7d",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(7, "day").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 14 days",
+    searchKey: "-14d",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(14, "day").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Last 30 days",
+    searchKey: "-30d",
+    startTime: dayjs4__default.default().tz(timezoneName).subtract(30, "day").format(),
+    endTime: dayjs4__default.default().tz(timezoneName).format()
+  },
+  {
+    label: "Next 1 day",
+    searchKey: "+1d",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(1, "day").format()
+  },
+  {
+    label: "Next 2 days",
+    searchKey: "+2d",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(2, "day").format()
+  },
+  {
+    label: "Next 7 days",
+    searchKey: "+7d",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(7, "day").format()
+  },
+  {
+    label: "Next 14 days",
+    searchKey: "+14d",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(14, "day").format()
+  },
+  {
+    label: "Next 30 days",
+    searchKey: "+30d",
+    startTime: dayjs4__default.default().tz(timezoneName).format(),
+    endTime: dayjs4__default.default().tz(timezoneName).add(30, "day").format()
+  }
+];
+
+// src/RelativeTimePanel/index.module.css
+var RelativeTimePanel_default = {};
+var RelativeTimePanel = ({ tzRange }) => {
+  const [filteredOptions, setFilteredOptions] = react.useState([]);
+  const [searchText, setSearchText] = react.useState("");
+  const { colorScheme } = useAppTheme();
+  react.useEffect(() => {
+    if (tzRange.timezone.name !== null) {
+      const timeOptions = getTimeOptions(tzRange.timezone.name);
+      setFilteredOptions(timeOptions);
+    }
+  }, [tzRange.timezone]);
+  useDebounce(
+    () => {
+      if (searchText === "") {
+        setFilteredOptions(getTimeOptions(tzRange.timezone.name));
+        return;
+      }
+      const newTimeOptions = filteredOptions.filter(
+        (value) => value.searchKey.includes(searchText)
+      );
+      setFilteredOptions(newTimeOptions);
+    },
+    250,
+    [searchText]
+  );
+  const handleRowClick = (option) => {
+    const [startDate, startTime] = option.startTime.split("T");
+    const [endDate, endTime] = option.endTime.split("T");
+    tzRange.onApply({
+      startDate,
+      startTime: startTime.slice(0, 8),
+      endDate,
+      endTime: endTime.slice(0, 8),
+      timezone: tzRange.timezone
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Box, { style: { width: "90%" }, mx: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+      core.Input,
+      {
+        placeholder: "Relative time (15m, 1h, 1d, 1w)",
+        value: searchText,
+        onChange: (e) => setSearchText(e.currentTarget.value)
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { direction: "column", className: RelativeTimePanel_default["relative-time-panel-container"], children: filteredOptions.map((op) => /* @__PURE__ */ jsxRuntime.jsxs(
+      core.Flex,
+      {
+        align: "center",
+        justify: "space-between",
+        className: clsx_default(
+          colorScheme === "dark" ? RelativeTimePanel_default["time-row-dark"] : RelativeTimePanel_default["time-row-light"],
+          RelativeTimePanel_default["time-row"]
+        ),
+        py: 4,
+        px: 12,
+        mb: op.lineBreak ? 8 : 0,
+        onClick: () => handleRowClick(op),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", children: op.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", c: "#5f6368", children: op.searchKey })
+        ]
+      },
+      op.label
+    )) })
+  ] });
+};
+var Sidebar = ({ setSelectedPanel, tzRange }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { className: Sidebar_default["sidebar-container"], flex: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RelativeTimePanel, { tzRange }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", rowGap: 16, py: 8, style: { borderTop: "1px solid #ddd" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        core.Flex,
+        {
+          className: Sidebar_default["sidebar-row"],
+          justify: "space-between",
+          align: "center",
+          px: 12,
+          onClick: () => setSelectedPanel("Start and end times" /* START_END_TIME */),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IconCalendarWeekFilled, { stroke: 1.5 }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", children: "Start and end times" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, { stroke: 1.5 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        core.Flex,
+        {
+          className: Sidebar_default["sidebar-row"],
+          justify: "space-between",
+          align: "center",
+          px: 12,
+          onClick: () => setSelectedPanel("Around a time" /* AROUND_TIME */),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IconClock, { stroke: 1.5 }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", children: "Around a time" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, { stroke: 1.5 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        core.Flex,
+        {
+          className: Sidebar_default["sidebar-row"],
+          justify: "space-between",
+          align: "center",
+          px: 12,
+          onClick: () => setSelectedPanel("Time zone" /* TIMEZONE */),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IconWorld, { stroke: 1.5 }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", children: "Time zone" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, { stroke: 1.5 })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var getCurrentTime = () => dayjs4__default.default().format("HH:mm:ss");
+var getCurrentDate = () => dayjs4__default.default().format("YYYY-MM-DD");
+var getCurrentPlusDate = (amount) => dayjs4__default.default().add(amount, "day").format("YYYY-MM-DD");
+var getShortTimezoneName = (tz) => {
+  if (!tz) return tz;
+  return dayjs4__default.default().tz(tz).format("Z");
+};
+var getPopoverButtonText = (tzRange) => {
+  return `${dayjs4__default.default(tzRange.startDate).format("YYYY/MM/DD")} ${tzRange.startTime} - ${dayjs4__default.default(
+    tzRange.endDate
+  ).format("YYYY/MM/DD")} ${tzRange.endTime} (${getShortTimezoneName(tzRange.timezone.name)})`;
+};
+var getPastDateTime = (date, time, amount, unit) => {
+  const d = dayjs4__default.default(`${date} ${time}`).subtract(amount, unit);
+  return {
+    date: d.format("YYYY-MM-DD"),
+    time: d.format("HH:mm:ss")
+  };
+};
+var getFutureDateTime = (date, time, amount, unit) => {
+  const d = dayjs4__default.default(`${date} ${time}`).add(amount, unit);
+  return {
+    date: d.format("YYYY-MM-DD"),
+    time: d.format("HH:mm:ss")
+  };
+};
+
+// src/AroundTimePanel/util.ts
+var TIME_OPTIONS = [
+  "\xB1 30 seconds" /* ThirtySeconds */,
+  "\xB1 1 minute" /* OneMinute */,
+  "\xB1 15 minutes" /* FifteenMinutes */,
+  "\xB1 30 minutes" /* ThirtyMinutes */,
+  "\xB1 1 hour" /* OneHour */,
+  "\xB1 1 day" /* OneDay */
+];
+var getStartEndDateTime = (date, time, timeOption) => {
+  switch (timeOption) {
+    case "\xB1 30 seconds" /* ThirtySeconds */:
+      const startDateTime = getPastDateTime(date, time, 30, "second");
+      const endDateTime = getFutureDateTime(date, time, 30, "second");
+      return {
+        startDate: startDateTime.date,
+        startTime: startDateTime.time,
+        endDate: endDateTime.date,
+        endTime: endDateTime.time
+      };
+    case "\xB1 1 minute" /* OneMinute */:
+      const startDateTime1 = getPastDateTime(date, time, 1, "minute");
+      const endDateTime1 = getFutureDateTime(date, time, 1, "minute");
+      return {
+        startDate: startDateTime1.date,
+        startTime: startDateTime1.time,
+        endDate: endDateTime1.date,
+        endTime: endDateTime1.time
+      };
+    case "\xB1 15 minutes" /* FifteenMinutes */:
+      const startDateTime15 = getPastDateTime(date, time, 15, "minute");
+      const endDateTime15 = getFutureDateTime(date, time, 15, "minute");
+      return {
+        startDate: startDateTime15.date,
+        startTime: startDateTime15.time,
+        endDate: endDateTime15.date,
+        endTime: endDateTime15.time
+      };
+    case "\xB1 30 minutes" /* ThirtyMinutes */:
+      const startDateTime30 = getPastDateTime(date, time, 30, "minute");
+      const endDateTime30 = getFutureDateTime(date, time, 30, "minute");
+      return {
+        startDate: startDateTime30.date,
+        startTime: startDateTime30.time,
+        endDate: endDateTime30.date,
+        endTime: endDateTime30.time
+      };
+    case "\xB1 1 hour" /* OneHour */:
+      const startDateTime60 = getPastDateTime(date, time, 1, "hour");
+      const endDateTime60 = getFutureDateTime(date, time, 1, "hour");
+      return {
+        startDate: startDateTime60.date,
+        startTime: startDateTime60.time,
+        endDate: endDateTime60.date,
+        endTime: endDateTime60.time
+      };
+    case "\xB1 1 day" /* OneDay */:
+      const startDateTimeDay = getPastDateTime(date, time, 1, "day");
+      const endDateTimeDay = getFutureDateTime(date, time, 1, "day");
+      return {
+        startDate: startDateTimeDay.date,
+        startTime: startDateTimeDay.time,
+        endDate: endDateTimeDay.date,
+        endTime: endDateTimeDay.time
+      };
+    default:
+      return {
+        startDate: date,
+        startTime: time,
+        endDate: date,
+        endTime: time
+      };
+  }
+};
+var AroundTimePanel = ({ tzRange }) => {
+  const form$1 = form.useForm({
+    initialValues: {
+      date: getCurrentDate(),
+      time: getCurrentTime(),
+      duration: "\xB1 1 day" /* OneDay */
+    }
+  });
+  const onSubmit = (values) => {
+    const { startDate, startTime, endDate, endTime } = getStartEndDateTime(
+      values.date,
+      values.time,
+      values.duration
+    );
+    tzRange.onApply({
+      startDate,
+      startTime,
+      endDate,
+      endTime,
+      timezone: tzRange.timezone
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { direction: "column", flex: 2, justify: "space-between", style: { height: "100%" }, px: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: styles_default["form-container"], onSubmit: form$1.onSubmit(onSubmit), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fw: 600, children: "Around a time" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: 8, mt: 12, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dates.DatePickerInput,
+          {
+            label: "Pick date",
+            placeholder: "Pick date",
+            ...form$1.getInputProps("date"),
+            popoverProps: { withinPortal: false },
+            valueFormat: "YYYY/MM/DD",
+            leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, { stroke: 1.5 })
+          },
+          form$1.key("date")
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dates.TimeInput,
+          {
+            label: "Pick time",
+            placeholder: "Pick time",
+            withSeconds: true,
+            defaultValue: getCurrentTime(),
+            ...form$1.getInputProps("time"),
+            leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconClock, { stroke: 1.5 }),
+            rightSection: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { style: { fontSize: 12, fontStyle: "italic", textAlign: "right" }, children: tzRange.timezone?.longName }),
+            rightSectionWidth: 180,
+            rightSectionProps: {
+              style: {
+                paddingRight: 1
+              }
+            }
+          },
+          form$1.key("time")
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Select,
+          {
+            label: "Duration",
+            placeholder: "Pick value",
+            data: TIME_OPTIONS,
+            ...form$1.getInputProps("duration"),
+            comboboxProps: { withinPortal: false }
+          },
+          form$1.key("duration")
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
+  ] }) });
+};
+var StartEndTimePanel = ({ tzRange }) => {
+  const form$1 = form.useForm({
+    mode: "uncontrolled",
+    initialValues: {
+      startDate: getCurrentDate(),
+      startTime: getCurrentTime(),
+      endDate: getCurrentPlusDate(30),
+      endTime: getCurrentTime()
+    }
+  });
+  const onSubmit = (values) => {
+    tzRange.onApply({
+      startDate: values.startDate,
+      startTime: values.startTime,
+      endDate: values.endDate,
+      endTime: values.endTime,
+      timezone: tzRange.timezone
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { direction: "column", flex: 2, style: { height: "100%" }, px: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: styles_default["form-container"], onSubmit: form$1.onSubmit(onSubmit), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fw: 600, children: "Start and end times" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: 8, mt: 12, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dates.DatePickerInput,
+          {
+            label: "Start time",
+            ...form$1.getInputProps("startDate"),
+            popoverProps: { withinPortal: false },
+            valueFormat: "YYYY/MM/DD",
+            leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, { stroke: 1.5 })
+          },
+          form$1.key("startDate")
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dates.TimeInput,
+          {
+            withSeconds: true,
+            defaultValue: getCurrentTime(),
+            ...form$1.getInputProps("startTime"),
+            leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconClock, { stroke: 1.5 }),
+            rightSection: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { style: { fontSize: 12, fontStyle: "italic" }, children: tzRange.timezone?.longName }),
+            rightSectionWidth: 180,
+            rightSectionProps: {
+              style: {
+                paddingRight: 1
+              }
+            }
+          },
+          form$1.key("startTime")
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dates.DatePickerInput,
+          {
+            label: "End time",
+            ...form$1.getInputProps("endDate"),
+            popoverProps: { withinPortal: false },
+            valueFormat: "YYYY/MM/DD",
+            leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, { stroke: 1.5 })
+          },
+          form$1.key("endDate")
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dates.TimeInput,
+          {
+            withSeconds: true,
+            defaultValue: getCurrentTime(),
+            ...form$1.getInputProps("endTime"),
+            leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconClock, { stroke: 1.5 }),
+            rightSection: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { style: { fontSize: 12, fontStyle: "italic" }, children: tzRange.timezone?.longName }),
+            rightSectionWidth: 180,
+            rightSectionProps: {
+              style: {
+                paddingRight: 1
+              }
+            }
+          },
+          form$1.key("endTime")
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
+  ] }) });
+};
+var Panel = /* @__PURE__ */ ((Panel2) => {
+  Panel2["START_END_TIME"] = "Start and end times";
+  Panel2["AROUND_TIME"] = "Around a time";
+  Panel2["TIMEZONE"] = "Time zone";
+  return Panel2;
+})(Panel || {});
+var TimezoneRangePicker = (tzRange) => {
+  const [selectedPanel, setSelectedPanel] = react.useState("Start and end times" /* START_END_TIME */);
+  const renderPanel = () => {
+    switch (selectedPanel) {
+      case "Start and end times" /* START_END_TIME */:
+        return /* @__PURE__ */ jsxRuntime.jsx(StartEndTimePanel, { tzRange });
+      case "Around a time" /* AROUND_TIME */:
+        return /* @__PURE__ */ jsxRuntime.jsx(AroundTimePanel, { tzRange });
+      case "Time zone" /* TIMEZONE */:
+        return /* @__PURE__ */ jsxRuntime.jsx(TimezonePanel, { tzRange });
+      default:
+        return null;
+    }
+  };
+  const getButtonText = react.useMemo(
+    () => getPopoverButtonText(tzRange),
+    [tzRange.startDate, tzRange.startTime, tzRange.endDate, tzRange.endTime, tzRange.timezone]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Popover, { position: "bottom", shadow: "md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, { children: getButtonText }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Dropdown, { style: { width: 700, height: 400, padding: 0 }, py: 8, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { style: { height: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { tzRange, setSelectedPanel }),
+      renderPanel()
+    ] }) })
+  ] });
+};
+/*! Bundled license information:
+
+@tabler/icons-react/dist/esm/defaultAttributes.mjs:
+@tabler/icons-react/dist/esm/createReactComponent.mjs:
+@tabler/icons-react/dist/esm/icons/IconCalendar.mjs:
+@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs:
+@tabler/icons-react/dist/esm/icons/IconClock.mjs:
+@tabler/icons-react/dist/esm/icons/IconFilter2.mjs:
+@tabler/icons-react/dist/esm/icons/IconWorld.mjs:
+@tabler/icons-react/dist/esm/icons/IconCalendarWeekFilled.mjs:
+@tabler/icons-react/dist/esm/tabler-icons-react.mjs:
+  (**
+   * @license @tabler/icons-react v3.35.0 - MIT
+   *
+   * This source code is licensed under the MIT license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/
+
+exports.Panel = Panel;
+exports.TimezonePanel = TimezonePanel;
+exports.TimezoneRangePicker = TimezoneRangePicker;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map