@tidbcloud/uikit 2.0.0-beta.4 → 2.0.0-beta.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.5
+
+### Minor Changes
+
+- add TimeRangePicker component
+
 ## 2.0.0-beta.4
 
 ### Patch Changes

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.cjs

@@ -0,0 +1,168 @@
+"use strict";
+const jsxRuntime = require("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs");
+const dayjs = require("dayjs");
+const React = require("react");
+const AlertCircle = require("../../icons/react/AlertCircle.cjs");
+const ChevronLeft = require("../../icons/react/ChevronLeft.cjs");
+const index = require("../../primitive/Typography/index.cjs");
+const helpers = require("./helpers.cjs");
+const DatePicker = require("../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.7_react@18.2.0/node_modules/@mantine/dates/esm/components/DatePicker/DatePicker.cjs");
+const TimeInput = require("../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.7_react@18.2.0/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
+const RangeCalendar = require("../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.7_react@18.2.0/node_modules/@mantine/dates/esm/components/RangeCalendar/RangeCalendar.cjs");
+const Text = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Text/Text.cjs");
+const MantineProvider = require("../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.11.0_react-dom@18.2.0_react@18.2.0/node_modules/@mantine/styles/esm/theme/MantineProvider.cjs");
+const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Box/Box.cjs");
+const Group = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Group/Group.cjs");
+const Flex = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Flex/Flex.cjs");
+const Alert = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Alert/Alert.cjs");
+const Button = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Button/Button.cjs");
+const AbsoluteTimeRangePicker = ({
+  value,
+  maxDateTime,
+  minDateTime,
+  maxDuration,
+  onChange,
+  onCancel,
+  onReturnClick
+}) => {
+  const theme = MantineProvider.useMantineTheme();
+  const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.gray[7] } : null;
+  const [start, setStart] = React.useState(() => new Date(value[0] * 1e3));
+  const [end, setEnd] = React.useState(() => new Date(value[1] * 1e3));
+  const startAfterEnd = React.useMemo(() => {
+    return start.valueOf() > end.valueOf();
+  }, [start, end]);
+  const beyondMin = React.useMemo(() => {
+    return minDateTime && start.valueOf() < minDateTime.valueOf();
+  }, [minDateTime, start]);
+  const beyondMax = React.useMemo(() => {
+    return maxDateTime && end.valueOf() > maxDateTime.valueOf();
+  }, [maxDateTime, end]);
+  const beyondDuration = React.useMemo(() => {
+    if (maxDuration !== void 0) {
+      return end.valueOf() - start.valueOf() > maxDuration * 1e3;
+    }
+    return false;
+  }, [maxDuration, start, end]);
+  const updateDate = (dates) => {
+    const newStart = new Date(dates[0]);
+    newStart.setHours(start.getHours());
+    newStart.setMinutes(start.getMinutes());
+    newStart.setSeconds(start.getSeconds());
+    setStart(newStart);
+    let newEnd = new Date(dates[0]);
+    if (dates[1]) {
+      newEnd = new Date(dates[1]);
+    }
+    newEnd.setHours(end.getHours());
+    newEnd.setMinutes(end.getMinutes());
+    newEnd.setSeconds(end.getSeconds());
+    setEnd(newEnd);
+  };
+  const updateTime = (d, setter) => {
+    setter((old) => {
+      const newD = new Date(old);
+      newD.setHours(d.getHours());
+      newD.setMinutes(d.getMinutes());
+      newD.setSeconds(d.getSeconds());
+      return newD;
+    });
+  };
+  const apply = () => onChange == null ? void 0 : onChange({ type: "absolute", value: [dayjs(start).unix(), dayjs(end).unix()] });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { p: 16, w: 280, m: -4, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronLeft, { size: 16 }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "body-lg", children: "Back" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { spacing: 0, pt: 8, position: "apart", children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "label-sm", children: "Start" }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { spacing: 8, children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          DatePicker.DatePicker,
+          {
+            onClick: () => {
+            },
+            w: 116,
+            value: start,
+            inputFormat: "MMM D, YYYY",
+            clearable: false,
+            error: beyondMin || startAfterEnd || beyondDuration
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          TimeInput.TimeInput,
+          {
+            format: "24",
+            w: 90,
+            styles: { input: { paddingLeft: 4, paddingRight: 4 } },
+            withSeconds: true,
+            value: start,
+            onChange: (d) => updateTime(d, setStart),
+            error: beyondMin || startAfterEnd || beyondDuration
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { spacing: 0, pt: 8, position: "apart", children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "label-sm", children: "End" }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { spacing: 8, children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          DatePicker.DatePicker,
+          {
+            onClick: () => {
+            },
+            w: 116,
+            value: end,
+            inputFormat: "MMM D, YYYY",
+            clearable: false,
+            error: beyondMax || startAfterEnd || beyondDuration
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          TimeInput.TimeInput,
+          {
+            format: "24",
+            w: 90,
+            styles: { input: { paddingLeft: 4, paddingRight: 4 } },
+            withSeconds: true,
+            value: end,
+            onChange: (d) => updateTime(d, setEnd),
+            error: beyondMax || startAfterEnd || beyondDuration
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      RangeCalendar.RangeCalendar,
+      {
+        value: [start, end],
+        onChange: updateDate,
+        maxDate: maxDateTime,
+        minDate: minDateTime,
+        dayStyle
+      }
+    ) }),
+    (startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Alert.Alert, { icon: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(AlertCircle, { size: 16 }), color: "red", pt: 8, children: [
+      startAfterEnd && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { color: "red", children: "Please select an end time after the start time." }),
+      beyondMin && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { color: "red", children: [
+        "Please select a start time after ",
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: helpers.timeFormatter(minDateTime, null, "MMM D, YYYY HH:mm:ss") })
+      ] }),
+      beyondMax && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { color: "red", children: [
+        "Please select an end time before ",
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: helpers.timeFormatter(maxDateTime, null, "MMM D, YYYY HH:mm:ss") })
+      ] }),
+      beyondDuration && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { color: "red", children: [
+        "The selection exceeds the ",
+        helpers.formatDuration(maxDuration),
+        " limit, please select a shorter time range."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { pt: 8, gap: "xs", justify: "flex-end", align: "flex-start", direction: "row", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button.Button, { size: "xs", variant: "default", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button.Button, { size: "xs", onClick: apply, disabled: startAfterEnd || beyondMin || beyondMax || beyondDuration, children: "Apply" })
+    ] })
+  ] });
+};
+const AbsoluteTimeRangePicker$1 = AbsoluteTimeRangePicker;
+module.exports = AbsoluteTimeRangePicker$1;

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.d.cts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+import { AbsoluteTimeRange, TimeRangeValue } from './helpers.js';
+interface AbsoluteTimeRangePickerProps {
+    value: TimeRangeValue;
+    minDateTime?: Date;
+    maxDateTime?: Date;
+    maxDuration?: number;
+    onChange?: (v: AbsoluteTimeRange) => void;
+    onCancel?: () => void;
+    onReturnClick?: MouseEventHandler<HTMLElement>;
+}
+declare const AbsoluteTimeRangePicker: React.FC<React.PropsWithChildren<AbsoluteTimeRangePickerProps>>;
+export default AbsoluteTimeRangePicker;

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.d.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+import { AbsoluteTimeRange, TimeRangeValue } from './helpers.js';
+interface AbsoluteTimeRangePickerProps {
+    value: TimeRangeValue;
+    minDateTime?: Date;
+    maxDateTime?: Date;
+    maxDuration?: number;
+    onChange?: (v: AbsoluteTimeRange) => void;
+    onCancel?: () => void;
+    onReturnClick?: MouseEventHandler<HTMLElement>;
+}
+declare const AbsoluteTimeRangePicker: React.FC<React.PropsWithChildren<AbsoluteTimeRangePickerProps>>;
+export default AbsoluteTimeRangePicker;

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.js

@@ -0,0 +1,169 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
+import dayjs from "dayjs";
+import { useState, useMemo } from "react";
+import IconAlertCircle from "../../icons/react/AlertCircle.js";
+import IconChevronLeft from "../../icons/react/ChevronLeft.js";
+import { Typography } from "../../primitive/Typography/index.js";
+import { timeFormatter, formatDuration } from "./helpers.js";
+import { DatePicker } from "../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.7_react@18.2.0/node_modules/@mantine/dates/esm/components/DatePicker/DatePicker.js";
+import { TimeInput } from "../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.7_react@18.2.0/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.js";
+import { RangeCalendar } from "../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.7_react@18.2.0/node_modules/@mantine/dates/esm/components/RangeCalendar/RangeCalendar.js";
+import { Text } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Text/Text.js";
+import { useMantineTheme } from "../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.11.0_react-dom@18.2.0_react@18.2.0/node_modules/@mantine/styles/esm/theme/MantineProvider.js";
+import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Box/Box.js";
+import { Group } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Group/Group.js";
+import { Flex } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Flex/Flex.js";
+import { Alert } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Alert/Alert.js";
+import { Button } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Button/Button.js";
+const AbsoluteTimeRangePicker = ({
+  value,
+  maxDateTime,
+  minDateTime,
+  maxDuration,
+  onChange,
+  onCancel,
+  onReturnClick
+}) => {
+  const theme = useMantineTheme();
+  const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.gray[7] } : null;
+  const [start, setStart] = useState(() => new Date(value[0] * 1e3));
+  const [end, setEnd] = useState(() => new Date(value[1] * 1e3));
+  const startAfterEnd = useMemo(() => {
+    return start.valueOf() > end.valueOf();
+  }, [start, end]);
+  const beyondMin = useMemo(() => {
+    return minDateTime && start.valueOf() < minDateTime.valueOf();
+  }, [minDateTime, start]);
+  const beyondMax = useMemo(() => {
+    return maxDateTime && end.valueOf() > maxDateTime.valueOf();
+  }, [maxDateTime, end]);
+  const beyondDuration = useMemo(() => {
+    if (maxDuration !== void 0) {
+      return end.valueOf() - start.valueOf() > maxDuration * 1e3;
+    }
+    return false;
+  }, [maxDuration, start, end]);
+  const updateDate = (dates) => {
+    const newStart = new Date(dates[0]);
+    newStart.setHours(start.getHours());
+    newStart.setMinutes(start.getMinutes());
+    newStart.setSeconds(start.getSeconds());
+    setStart(newStart);
+    let newEnd = new Date(dates[0]);
+    if (dates[1]) {
+      newEnd = new Date(dates[1]);
+    }
+    newEnd.setHours(end.getHours());
+    newEnd.setMinutes(end.getMinutes());
+    newEnd.setSeconds(end.getSeconds());
+    setEnd(newEnd);
+  };
+  const updateTime = (d, setter) => {
+    setter((old) => {
+      const newD = new Date(old);
+      newD.setHours(d.getHours());
+      newD.setMinutes(d.getMinutes());
+      newD.setSeconds(d.getSeconds());
+      return newD;
+    });
+  };
+  const apply = () => onChange == null ? void 0 : onChange({ type: "absolute", value: [dayjs(start).unix(), dayjs(end).unix()] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { p: 16, w: 280, m: -4, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronLeft, { size: 16 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body-lg", children: "Back" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { spacing: 0, pt: 8, position: "apart", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "label-sm", children: "Start" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { spacing: 8, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DatePicker,
+          {
+            onClick: () => {
+            },
+            w: 116,
+            value: start,
+            inputFormat: "MMM D, YYYY",
+            clearable: false,
+            error: beyondMin || startAfterEnd || beyondDuration
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TimeInput,
+          {
+            format: "24",
+            w: 90,
+            styles: { input: { paddingLeft: 4, paddingRight: 4 } },
+            withSeconds: true,
+            value: start,
+            onChange: (d) => updateTime(d, setStart),
+            error: beyondMin || startAfterEnd || beyondDuration
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { spacing: 0, pt: 8, position: "apart", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "label-sm", children: "End" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { spacing: 8, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DatePicker,
+          {
+            onClick: () => {
+            },
+            w: 116,
+            value: end,
+            inputFormat: "MMM D, YYYY",
+            clearable: false,
+            error: beyondMax || startAfterEnd || beyondDuration
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TimeInput,
+          {
+            format: "24",
+            w: 90,
+            styles: { input: { paddingLeft: 4, paddingRight: 4 } },
+            withSeconds: true,
+            value: end,
+            onChange: (d) => updateTime(d, setEnd),
+            error: beyondMax || startAfterEnd || beyondDuration
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      RangeCalendar,
+      {
+        value: [start, end],
+        onChange: updateDate,
+        maxDate: maxDateTime,
+        minDate: minDateTime,
+        dayStyle
+      }
+    ) }),
+    (startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(IconAlertCircle, { size: 16 }), color: "red", pt: 8, children: [
+      startAfterEnd && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "red", children: "Please select an end time after the start time." }),
+      beyondMin && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { color: "red", children: [
+        "Please select a start time after ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: timeFormatter(minDateTime, null, "MMM D, YYYY HH:mm:ss") })
+      ] }),
+      beyondMax && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { color: "red", children: [
+        "Please select an end time before ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: timeFormatter(maxDateTime, null, "MMM D, YYYY HH:mm:ss") })
+      ] }),
+      beyondDuration && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { color: "red", children: [
+        "The selection exceeds the ",
+        formatDuration(maxDuration),
+        " limit, please select a shorter time range."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { pt: 8, gap: "xs", justify: "flex-end", align: "flex-start", direction: "row", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "xs", variant: "default", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "xs", onClick: apply, disabled: startAfterEnd || beyondMin || beyondMax || beyondDuration, children: "Apply" })
+    ] })
+  ] });
+};
+const AbsoluteTimeRangePicker$1 = AbsoluteTimeRangePicker;
+export {
+  AbsoluteTimeRangePicker$1 as default
+};

package/dist/biz/TimeRangePicker/helpers.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dayjs = require("dayjs");
+const lodashEs = require("lodash-es");
+const prettyMs = require("pretty-ms");
+const DEFAULT_QUICK_RANGES = [
+  3 * 24 * 60 * 60,
+  2 * 24 * 60 * 60,
+  24 * 60 * 60,
+  12 * 60 * 60,
+  3 * 60 * 60,
+  60 * 60,
+  30 * 60,
+  15 * 60,
+  5 * 60
+];
+const formatDuration = (seconds, short = false) => {
+  if (short) {
+    return prettyMs(seconds * 1e3, { compact: true });
+  } else {
+    return prettyMs(seconds * 1e3, { verbose: true });
+  }
+};
+const toTimeRangeValue = (timeRange, offset = 0) => {
+  if (timeRange.type === "absolute") {
+    return timeRange.value.map((t) => t + offset);
+  } else {
+    const now = dayjs().unix();
+    return [now - timeRange.value + offset, now + offset];
+  }
+};
+const DEFAULT_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+function addOffsetUTC(time, utcOffset) {
+  const targetTime = new Date(time);
+  const tzDifference = utcOffset * 60 + targetTime.getTimezoneOffset();
+  return new Date(targetTime.getTime() + tzDifference * 60 * 1e3);
+}
+const getUTCString = (offset) => {
+  const offsetStrs = offset.toString().split(".");
+  let mm = "00";
+  let hh = "";
+  const offsetH = Number.parseInt(offsetStrs[0] || "0");
+  const offsetM = Number.parseFloat(`0.${offsetStrs[1]}` || "0") * 60;
+  hh = Math.abs(offsetH).toString().padStart(2, "0");
+  mm = offsetM === 0 ? "00" : offsetM.toString();
+  if (offset > 0) {
+    return `UTC+${hh}:${mm}`;
+  }
+  if (offset < 0) {
+    return `UTC-${hh}:${mm}`;
+  }
+  return "UTC±00:00";
+};
+const timeFormatter = (timeValue, utcOffset, format = DEFAULT_TIME_FORMAT) => {
+  if (!timeValue)
+    return "-";
+  const time = timeValue instanceof Date || isNaN(Number(timeValue)) ? timeValue : Number(timeValue) * 1e3;
+  const currentTZOffsetInHours = utcOffset === void 0 || utcOffset === null ? -((/* @__PURE__ */ new Date()).getTimezoneOffset() / 60) : utcOffset;
+  const withUTC = format.indexOf("Z") >= 0;
+  return dayjs(addOffsetUTC(time, currentTZOffsetInHours)).format(withUTC ? lodashEs.trim(format, "Z") : format) + (withUTC ? getUTCString(currentTZOffsetInHours) : "");
+};
+exports.DEFAULT_QUICK_RANGES = DEFAULT_QUICK_RANGES;
+exports.DEFAULT_TIME_FORMAT = DEFAULT_TIME_FORMAT;
+exports.addOffsetUTC = addOffsetUTC;
+exports.formatDuration = formatDuration;
+exports.getUTCString = getUTCString;
+exports.timeFormatter = timeFormatter;
+exports.toTimeRangeValue = toTimeRangeValue;

package/dist/biz/TimeRangePicker/helpers.d.cts

@@ -0,0 +1,27 @@
+export type TimeRange = RelativeTimeRange | AbsoluteTimeRange;
+export interface RelativeTimeRange {
+    type: 'relative';
+    value: number;
+}
+export interface AbsoluteTimeRange {
+    type: 'absolute';
+    value: TimeRangeValue;
+}
+export type TimeRangeValue = [from: number, to: number];
+export declare const DEFAULT_QUICK_RANGES: number[];
+export declare const DEFAULT_TIME_RANGE: TimeRange;
+export declare const formatDuration: (seconds: number, short?: boolean) => string;
+export declare const toTimeRangeValue: (timeRange: TimeRange, offset?: number) => TimeRangeValue;
+export declare function fromTimeRangeValue(v: TimeRangeValue): AbsoluteTimeRange;
+export type URLTimeRange = {
+    from: string;
+    to: string;
+};
+export declare const toURLTimeRange: (timeRange: TimeRange) => URLTimeRange;
+export declare const urlToTimeRange: (urlTimeRange: URLTimeRange) => TimeRange;
+export declare const urlToTimeRangeValue: (urlTimeRange: URLTimeRange) => TimeRangeValue;
+export declare const DEFAULT_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+export declare const DEFAULT_TIME_FORMAT_WITH_TIMEZONE = "YYYY-MM-DD HH:mm:ss Z";
+export declare function addOffsetUTC(time: string | number | Date, utcOffset: number): Date;
+export declare const getUTCString: (offset: number) => string;
+export declare const timeFormatter: (timeValue: number | string | Date, utcOffset?: number | null, format?: string) => string;

package/dist/biz/TimeRangePicker/helpers.d.ts

@@ -0,0 +1,27 @@
+export type TimeRange = RelativeTimeRange | AbsoluteTimeRange;
+export interface RelativeTimeRange {
+    type: 'relative';
+    value: number;
+}
+export interface AbsoluteTimeRange {
+    type: 'absolute';
+    value: TimeRangeValue;
+}
+export type TimeRangeValue = [from: number, to: number];
+export declare const DEFAULT_QUICK_RANGES: number[];
+export declare const DEFAULT_TIME_RANGE: TimeRange;
+export declare const formatDuration: (seconds: number, short?: boolean) => string;
+export declare const toTimeRangeValue: (timeRange: TimeRange, offset?: number) => TimeRangeValue;
+export declare function fromTimeRangeValue(v: TimeRangeValue): AbsoluteTimeRange;
+export type URLTimeRange = {
+    from: string;
+    to: string;
+};
+export declare const toURLTimeRange: (timeRange: TimeRange) => URLTimeRange;
+export declare const urlToTimeRange: (urlTimeRange: URLTimeRange) => TimeRange;
+export declare const urlToTimeRangeValue: (urlTimeRange: URLTimeRange) => TimeRangeValue;
+export declare const DEFAULT_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+export declare const DEFAULT_TIME_FORMAT_WITH_TIMEZONE = "YYYY-MM-DD HH:mm:ss Z";
+export declare function addOffsetUTC(time: string | number | Date, utcOffset: number): Date;
+export declare const getUTCString: (offset: number) => string;
+export declare const timeFormatter: (timeValue: number | string | Date, utcOffset?: number | null, format?: string) => string;

package/dist/biz/TimeRangePicker/helpers.js

@@ -0,0 +1,68 @@
+import dayjs from "dayjs";
+import { trim } from "lodash-es";
+import prettyMs from "pretty-ms";
+const DEFAULT_QUICK_RANGES = [
+  3 * 24 * 60 * 60,
+  2 * 24 * 60 * 60,
+  24 * 60 * 60,
+  12 * 60 * 60,
+  3 * 60 * 60,
+  60 * 60,
+  30 * 60,
+  15 * 60,
+  5 * 60
+];
+const formatDuration = (seconds, short = false) => {
+  if (short) {
+    return prettyMs(seconds * 1e3, { compact: true });
+  } else {
+    return prettyMs(seconds * 1e3, { verbose: true });
+  }
+};
+const toTimeRangeValue = (timeRange, offset = 0) => {
+  if (timeRange.type === "absolute") {
+    return timeRange.value.map((t) => t + offset);
+  } else {
+    const now = dayjs().unix();
+    return [now - timeRange.value + offset, now + offset];
+  }
+};
+const DEFAULT_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+function addOffsetUTC(time, utcOffset) {
+  const targetTime = new Date(time);
+  const tzDifference = utcOffset * 60 + targetTime.getTimezoneOffset();
+  return new Date(targetTime.getTime() + tzDifference * 60 * 1e3);
+}
+const getUTCString = (offset) => {
+  const offsetStrs = offset.toString().split(".");
+  let mm = "00";
+  let hh = "";
+  const offsetH = Number.parseInt(offsetStrs[0] || "0");
+  const offsetM = Number.parseFloat(`0.${offsetStrs[1]}` || "0") * 60;
+  hh = Math.abs(offsetH).toString().padStart(2, "0");
+  mm = offsetM === 0 ? "00" : offsetM.toString();
+  if (offset > 0) {
+    return `UTC+${hh}:${mm}`;
+  }
+  if (offset < 0) {
+    return `UTC-${hh}:${mm}`;
+  }
+  return "UTC±00:00";
+};
+const timeFormatter = (timeValue, utcOffset, format = DEFAULT_TIME_FORMAT) => {
+  if (!timeValue)
+    return "-";
+  const time = timeValue instanceof Date || isNaN(Number(timeValue)) ? timeValue : Number(timeValue) * 1e3;
+  const currentTZOffsetInHours = utcOffset === void 0 || utcOffset === null ? -((/* @__PURE__ */ new Date()).getTimezoneOffset() / 60) : utcOffset;
+  const withUTC = format.indexOf("Z") >= 0;
+  return dayjs(addOffsetUTC(time, currentTZOffsetInHours)).format(withUTC ? trim(format, "Z") : format) + (withUTC ? getUTCString(currentTZOffsetInHours) : "");
+};
+export {
+  DEFAULT_QUICK_RANGES,
+  DEFAULT_TIME_FORMAT,
+  addOffsetUTC,
+  formatDuration,
+  getUTCString,
+  timeFormatter,
+  toTimeRangeValue
+};

package/dist/biz/TimeRangePicker/index.cjs

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const ChevronRight = require("../../icons/react/ChevronRight.cjs");
+const index = require("../../primitive/Typography/index.cjs");
+const AbsoluteTimeRangePicker = require("./AbsoluteTimeRangePicker.cjs");
+const helpers = require("./helpers.cjs");
+const Menu = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Menu/Menu.cjs");
+const ChevronIcon = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Select/SelectRightSection/ChevronIcon.cjs");
+const Tooltip = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Tooltip/Tooltip.cjs");
+const Button = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Button/Button.cjs");
+const Group = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Group/Group.cjs");
+const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Box/Box.cjs");
+const Text = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Text/Text.cjs");
+const TimeRangePicker = ({
+  value,
+  minDateTime,
+  maxDateTime,
+  maxDuration,
+  disableAbsoluteRanges = false,
+  onChange,
+  quickRanges = helpers.DEFAULT_QUICK_RANGES,
+  loading,
+  timezone
+}) => {
+  const [opened, setOpened] = React.useState(false);
+  const [customMode, setCustomMode] = React.useState(false);
+  const isRelativeRange = (value == null ? void 0 : value.type) === "relative";
+  const timeRangeValue = helpers.toTimeRangeValue(value);
+  const duration = timeRangeValue[1] - timeRangeValue[0];
+  const selectedRelativeItem = React.useMemo(() => {
+    if (value.type === "absolute") {
+      return;
+    }
+    return quickRanges.find((it) => it === value.value);
+  }, [quickRanges, value]);
+  const formattedAbsDateTime = React.useMemo(() => {
+    return `${helpers.timeFormatter(timeRangeValue[0], timezone || null, "MMM D, YYYY HH:mm")} - ${helpers.timeFormatter(
+      timeRangeValue[1],
+      timezone || null,
+      "MMM D, YYYY HH:mm"
+    )}`;
+  }, [timeRangeValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    Menu.Menu,
+    {
+      shadow: "md",
+      width: customMode ? "auto" : disableAbsoluteRanges ? 200 : 280,
+      position: "bottom-end",
+      opened,
+      onOpen: () => {
+        setOpened(true);
+        setCustomMode(false);
+      },
+      onClose: () => setOpened(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: formattedAbsDateTime, disabled: isRelativeRange, withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          Button.Button,
+          {
+            variant: "default",
+            styles: (theme) => ({
+              root: {
+                paddingLeft: "12px",
+                paddingRight: "12px",
+                borderColor: opened ? theme.colors.blue[7] : "",
+                "&:hover": {
+                  background: "transparent"
+                }
+              },
+              inner: {
+                width: "100%"
+              },
+              label: {
+                display: "flex",
+                justifyContent: "space-between",
+                width: "100%"
+              }
+            }),
+            w: disableAbsoluteRanges ? 200 : 280,
+            fw: "normal",
+            ...loading ? { "data-loading": true } : {},
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { w: "100%", spacing: 0, children: [
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(DurationBadge, { children: helpers.formatDuration(duration, true) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { px: 8, sx: { flex: "1 1", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: isRelativeRange ? `Past ${helpers.formatDuration(duration)}` : formattedAbsDateTime }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronIcon.ChevronIcon, { size: "md", error: false }) })
+            ] })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Dropdown, { children: customMode ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          AbsoluteTimeRangePicker,
+          {
+            value: timeRangeValue,
+            minDateTime: minDateTime == null ? void 0 : minDateTime(),
+            maxDateTime: maxDateTime == null ? void 0 : maxDateTime(),
+            maxDuration,
+            onChange: (v) => {
+              onChange == null ? void 0 : onChange(v);
+              setOpened(false);
+            },
+            onCancel: () => setOpened(false),
+            onReturnClick: () => setCustomMode(false)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+          !disableAbsoluteRanges && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              Menu.Menu.Item,
+              {
+                rightSection: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronRight, { size: 16 }),
+                closeMenuOnClick: false,
+                onClick: () => setCustomMode(true),
+                children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "body-lg", children: "Custom" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Divider, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: quickRanges.map((seconds) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            Menu.Menu.Item,
+            {
+              sx: (theme) => ({
+                background: seconds === selectedRelativeItem ? theme.colors.gray[2] : ""
+              }),
+              onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds }),
+              children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { children: [
+                "Past ",
+                helpers.formatDuration(seconds)
+              ] })
+            },
+            seconds
+          )) })
+        ] }) })
+      ]
+    }
+  );
+};
+const DurationBadge = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    Box.Box,
+    {
+      display: "inline-block",
+      w: 35,
+      py: 3,
+      bg: "gray.4",
+      c: "gray.7",
+      fz: 10,
+      lh: "14px",
+      ta: "center",
+      sx: { borderRadius: 8 },
+      children
+    }
+  );
+};
+exports.TimeRangePicker = TimeRangePicker;

package/dist/biz/TimeRangePicker/index.d.cts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TimeRange } from './helpers.js';
+export interface TimeRangePickerProps {
+    value: TimeRange;
+    onChange?: (value: TimeRange) => void;
+    loading?: boolean;
+    minDateTime?: () => Date;
+    maxDateTime?: () => Date;
+    maxDuration?: number;
+    quickRanges?: number[];
+    disableAbsoluteRanges?: boolean;
+    timezone?: number;
+}
+export declare const TimeRangePicker: React.FC<React.PropsWithChildren<TimeRangePickerProps>>;

package/dist/biz/TimeRangePicker/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TimeRange } from './helpers.js';
+export interface TimeRangePickerProps {
+    value: TimeRange;
+    onChange?: (value: TimeRange) => void;
+    loading?: boolean;
+    minDateTime?: () => Date;
+    maxDateTime?: () => Date;
+    maxDuration?: number;
+    quickRanges?: number[];
+    disableAbsoluteRanges?: boolean;
+    timezone?: number;
+}
+export declare const TimeRangePicker: React.FC<React.PropsWithChildren<TimeRangePickerProps>>;

package/dist/biz/TimeRangePicker/index.js

@@ -0,0 +1,153 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
+import { useState, useMemo } from "react";
+import IconChevronRight from "../../icons/react/ChevronRight.js";
+import { Typography } from "../../primitive/Typography/index.js";
+import AbsoluteTimeRangePicker from "./AbsoluteTimeRangePicker.js";
+import { toTimeRangeValue, timeFormatter, formatDuration, DEFAULT_QUICK_RANGES } from "./helpers.js";
+import { Menu } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Menu/Menu.js";
+import { ChevronIcon } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Select/SelectRightSection/ChevronIcon.js";
+import { Tooltip } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Tooltip/Tooltip.js";
+import { Button } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Button/Button.js";
+import { Group } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Group/Group.js";
+import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Box/Box.js";
+import { Text } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.11.0_@mantine_ho_pge4mijgvpte4ejkiygju76xvm/node_modules/@mantine/core/esm/Text/Text.js";
+const TimeRangePicker = ({
+  value,
+  minDateTime,
+  maxDateTime,
+  maxDuration,
+  disableAbsoluteRanges = false,
+  onChange,
+  quickRanges = DEFAULT_QUICK_RANGES,
+  loading,
+  timezone
+}) => {
+  const [opened, setOpened] = useState(false);
+  const [customMode, setCustomMode] = useState(false);
+  const isRelativeRange = (value == null ? void 0 : value.type) === "relative";
+  const timeRangeValue = toTimeRangeValue(value);
+  const duration = timeRangeValue[1] - timeRangeValue[0];
+  const selectedRelativeItem = useMemo(() => {
+    if (value.type === "absolute") {
+      return;
+    }
+    return quickRanges.find((it) => it === value.value);
+  }, [quickRanges, value]);
+  const formattedAbsDateTime = useMemo(() => {
+    return `${timeFormatter(timeRangeValue[0], timezone || null, "MMM D, YYYY HH:mm")} - ${timeFormatter(
+      timeRangeValue[1],
+      timezone || null,
+      "MMM D, YYYY HH:mm"
+    )}`;
+  }, [timeRangeValue]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Menu,
+    {
+      shadow: "md",
+      width: customMode ? "auto" : disableAbsoluteRanges ? 200 : 280,
+      position: "bottom-end",
+      opened,
+      onOpen: () => {
+        setOpened(true);
+        setCustomMode(false);
+      },
+      onClose: () => setOpened(false),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: formattedAbsDateTime, disabled: isRelativeRange, withArrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "default",
+            styles: (theme) => ({
+              root: {
+                paddingLeft: "12px",
+                paddingRight: "12px",
+                borderColor: opened ? theme.colors.blue[7] : "",
+                "&:hover": {
+                  background: "transparent"
+                }
+              },
+              inner: {
+                width: "100%"
+              },
+              label: {
+                display: "flex",
+                justifyContent: "space-between",
+                width: "100%"
+              }
+            }),
+            w: disableAbsoluteRanges ? 200 : 280,
+            fw: "normal",
+            ...loading ? { "data-loading": true } : {},
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { w: "100%", spacing: 0, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DurationBadge, { children: formatDuration(duration, true) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { px: 8, sx: { flex: "1 1", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: isRelativeRange ? `Past ${formatDuration(duration)}` : formattedAbsDateTime }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronIcon, { size: "md", error: false }) })
+            ] })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Dropdown, { children: customMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          AbsoluteTimeRangePicker,
+          {
+            value: timeRangeValue,
+            minDateTime: minDateTime == null ? void 0 : minDateTime(),
+            maxDateTime: maxDateTime == null ? void 0 : maxDateTime(),
+            maxDuration,
+            onChange: (v) => {
+              onChange == null ? void 0 : onChange(v);
+              setOpened(false);
+            },
+            onCancel: () => setOpened(false),
+            onReturnClick: () => setCustomMode(false)
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          !disableAbsoluteRanges && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Menu.Item,
+              {
+                rightSection: /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronRight, { size: 16 }),
+                closeMenuOnClick: false,
+                onClick: () => setCustomMode(true),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body-lg", children: "Custom" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Divider, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: quickRanges.map((seconds) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Menu.Item,
+            {
+              sx: (theme) => ({
+                background: seconds === selectedRelativeItem ? theme.colors.gray[2] : ""
+              }),
+              onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds }),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { children: [
+                "Past ",
+                formatDuration(seconds)
+              ] })
+            },
+            seconds
+          )) })
+        ] }) })
+      ]
+    }
+  );
+};
+const DurationBadge = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      display: "inline-block",
+      w: 35,
+      py: 3,
+      bg: "gray.4",
+      c: "gray.7",
+      fz: 10,
+      lh: "14px",
+      ta: "center",
+      sx: { borderRadius: 8 },
+      children
+    }
+  );
+};
+export {
+  TimeRangePicker
+};

package/dist/biz/index.cjs

@@ -10,6 +10,7 @@ const index$7 = require("./Tree/index.cjs");
 const index$8 = require("./TransferTree/index.cjs");
 const index$9 = require("./PropertyCard/index.cjs");
 const index$a = require("./PageShell/index.cjs");
+const index$b = require("./TimeRangePicker/index.cjs");
 const helper = require("./PhoneInput/helper.cjs");
 const BasicTable = require("./Table/BasicTable/BasicTable.cjs");
 const mantineReactTable_esm = require("../node_modules/.pnpm/mantine-react-table@0.9.5_@emotion_react@11.11.0_@mantine_core@5.10.4_@mantine_dates@5.10.4_@_wgj3awrrave5mmlv3z2e7ky62q/node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.cjs");
@@ -44,6 +45,7 @@ exports.TransferTree = index$8.TransferTree;
 exports.PropertyCard = index$9.PropertyCard;
 exports.PageHeader = index$a.PageHeader;
 exports.PageShell = index$a.PageShell;
+exports.TimeRangePicker = index$b.TimeRangePicker;
 exports.validPhoneNumber = helper.validPhoneNumber;
 exports.BasicTable = BasicTable.BasicTable;
 exports.TableNoticeRow = BasicTable.TableNoticeRow;

package/dist/biz/index.d.cts

@@ -10,3 +10,4 @@ export * from './Tree/index.js';
 export * from './TransferTree/index.js';
 export * from './PropertyCard/index.js';
 export * from './PageShell/index.js';
+export * from './TimeRangePicker/index.js';

package/dist/biz/index.d.ts

@@ -10,3 +10,4 @@ export * from './Tree/index.js';
 export * from './TransferTree/index.js';
 export * from './PropertyCard/index.js';
 export * from './PageShell/index.js';
+export * from './TimeRangePicker/index.js';

package/dist/biz/index.js

@@ -8,6 +8,7 @@ import { Tree } from "./Tree/index.js";
 import { TransferTree } from "./TransferTree/index.js";
 import { PropertyCard } from "./PropertyCard/index.js";
 import { PageHeader, PageShell } from "./PageShell/index.js";
+import { TimeRangePicker } from "./TimeRangePicker/index.js";
 import { validPhoneNumber } from "./PhoneInput/helper.js";
 import { BasicTable, TableNoticeRow } from "./Table/BasicTable/BasicTable.js";
 import { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_FilterFns, MRT_FilterOptionMenu, MRT_GlobalFilterTextInput, MRT_ProgressBar, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MantineReactTable } from "../node_modules/.pnpm/mantine-react-table@0.9.5_@emotion_react@11.11.0_@mantine_core@5.10.4_@mantine_dates@5.10.4_@_wgj3awrrave5mmlv3z2e7ky62q/node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js";
@@ -84,6 +85,7 @@ export {
   PropertyCard,
   SearchArea,
   TableNoticeRow,
+  TimeRangePicker,
   TransferTree,
   Tree,
   renderExpandCell,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",
@@ -61,6 +61,7 @@
     "google-libphonenumber": "^3.2.30",
     "lodash-es": "^4.17.21",
     "mantine-react-table": "0.9.5",
+    "pretty-ms": "^9.1.0",
     "rc-tree": "^5.8.2",
     "react-hook-form": "^7.51.5",
     "react-phone-input-2": "^2.15.1",