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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.5
+
+### Minor Changes
+
+- add TimeRangePicker component
+
+## 2.0.0-beta.4
+
+### Patch Changes
+
+- Fix `useURLQueryState` bug
+
 ## 2.0.0-beta.3
 
 ### Patch Changes
@@ -24,6 +36,12 @@
 
 - Upgrade react-hook-form to v7
 
+## 1.18.0
+
+### Minor Changes
+
+- cd2433d: add icon: vector
+
 ## 1.17.1
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (C) 2024 by TiDB Cloud FE Team https://tiui.tidbcloud.com/
+
+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/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
+};