@tidbcloud/uikit 2.0.0-beta.45 → 2.0.0-beta.46

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.46
+
+### Minor Changes
+
+- Add DateTimePicker and update Calendar styles
+
 ## 2.0.0-beta.45
 
 ### Minor Changes

package/dist/biz/DateTimePicker/constant.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CellHeight = 32;
+const CellStyle = {
+  height: CellHeight,
+  width: CellHeight,
+  lineHeight: `${CellHeight}px`,
+  borderRadius: 8
+};
+exports.CellHeight = CellHeight;
+exports.CellStyle = CellStyle;

package/dist/biz/DateTimePicker/constant.d.cts

@@ -0,0 +1,7 @@
+export declare const CellHeight = 32;
+export declare const CellStyle: {
+    height: number;
+    width: number;
+    lineHeight: string;
+    borderRadius: number;
+};

package/dist/biz/DateTimePicker/constant.d.ts

@@ -0,0 +1,7 @@
+export declare const CellHeight = 32;
+export declare const CellStyle: {
+    height: number;
+    width: number;
+    lineHeight: string;
+    borderRadius: number;
+};

package/dist/biz/DateTimePicker/constant.js

@@ -0,0 +1,11 @@
+const CellHeight = 32;
+const CellStyle = {
+  height: CellHeight,
+  width: CellHeight,
+  lineHeight: `${CellHeight}px`,
+  borderRadius: 8
+};
+export {
+  CellHeight,
+  CellStyle
+};

package/dist/biz/DateTimePicker/index.cjs

@@ -0,0 +1,219 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.cjs");
+const ahooks = require("ahooks");
+const React = require("react");
+const index = require("../../icons/index.cjs");
+const index$1 = require("../../primitive/Typography/index.cjs");
+const dayjs = require("dayjs");
+const helpers = require("../TimeRangePicker/helpers.cjs");
+const usePickerScroll = require("./usePickerScroll.cjs");
+const useDisclosure = require("../../node_modules/.pnpm/@mantine_hooks@5.10.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.cjs");
+const Popover = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Popover/Popover.cjs");
+const TextInput = require("../../primitive/TextInput/TextInput.cjs");
+const Calendar = require("../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.12_react@18.3.1/node_modules/@mantine/dates/esm/components/Calendar/Calendar.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.12_react@18.3.1/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
+const Loader = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Loader/Loader.cjs");
+const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
+const Stack = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Stack/Stack.cjs");
+const Group = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.cjs");
+const Divider = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Divider/Divider.cjs");
+const Flex = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Flex/Flex.cjs");
+const DateTimePicker = ({
+  placeholder = "Select time",
+  format = helpers.DEFAULT_TIME_FORMAT,
+  defaultValue,
+  value,
+  startDate = dayjs().subtract(10, "year").toDate(),
+  endDate = dayjs().add(10, "year").toDate(),
+  onChange,
+  disable = false,
+  utcOffset = dayjs().utcOffset(),
+  withinPortal = true,
+  sx,
+  loading = false,
+  size
+}) => {
+  const [opened, { close, open }] = useDisclosure.useDisclosure(false);
+  const [currentValue, setCurrentValue] = React.useState(
+    defaultValue ? dayjs(defaultValue) : value ? dayjs(value) : dayjs()
+  );
+  const updateCurrentValue = ahooks.useMemoizedFn((val) => {
+    setCurrentValue(val);
+    onChange == null ? void 0 : onChange(val.toDate());
+  });
+  const inputStr = currentValue.format(format);
+  const utcStr = React.useMemo(() => {
+    const h = Math.floor(utcOffset / 60);
+    const m = utcOffset % 60;
+    return `UTC${h >= 0 ? "+" : "-"}${Math.abs(h)}:${m < 10 ? "0" : ""}${m}`;
+  }, [utcOffset]);
+  const scroll = usePickerScroll.useTimePickerScroll(currentValue, opened, startDate, endDate, utcOffset);
+  const calendarChange = ahooks.useMemoizedFn((v) => {
+    let next = currentValue;
+    next = next.utcOffset(utcOffset).year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
+    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  });
+  const timeInputChange = ahooks.useMemoizedFn((v) => {
+    let next = currentValue;
+    next = next.utcOffset(utcOffset).hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
+    if (startDate && next.valueOf() < startDate.valueOf()) {
+      updateCurrentValue(dayjs(startDate));
+    } else if (endDate && next.valueOf() > endDate.valueOf()) {
+      updateCurrentValue(dayjs(endDate));
+    } else if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  });
+  ahooks.useUpdateEffect(() => {
+    let next = currentValue;
+    const [h, m, s] = scroll.value;
+    next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
+    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  }, [scroll.value]);
+  ahooks.useUpdateEffect(() => {
+    if (value && dayjs(value).unix() !== currentValue.unix()) {
+      updateCurrentValue(dayjs(value));
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Popover.Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      TextInput.TextInput,
+      {
+        readOnly: true,
+        disabled: disable,
+        placeholder,
+        value: inputStr,
+        rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Loader.Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { component: index.IconClock, size: 18, c: "carbon.6" }),
+        onClick: open,
+        sx,
+        size
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Stack.Stack, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { align: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          Calendar.Calendar,
+          {
+            minDate: startDate,
+            maxDate: endDate,
+            value: currentValue.toDate(),
+            onChange: calendarChange,
+            size: "sm",
+            styles: () => ({
+              calendarHeaderLevel: {
+                height: 32
+              },
+              calendarHeaderControl: {
+                height: 32,
+                width: 32
+              },
+              weekdayCell: {
+                height: 32,
+                width: 32,
+                lineHeight: "32px"
+              },
+              month: {
+                "& thead tr": {
+                  display: "flex",
+                  gap: 8
+                },
+                "& tbody tr": {
+                  display: "flex",
+                  gap: 8
+                }
+              },
+              day: {
+                height: 32,
+                width: 32,
+                lineHeight: "32px"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Stack.Stack, { justify: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            TimeInput.TimeInput,
+            {
+              w: 112,
+              withSeconds: true,
+              value: currentValue.toDate(),
+              onChange: timeInputChange,
+              size: "sm",
+              styles: {
+                controls: {
+                  height: 30
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+            Box.Box,
+            {
+              pos: "relative",
+              fz: 14,
+              fw: 400,
+              h: 224,
+              sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { mah: "100%", gap: 8, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                    Box.Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 0,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                    Box.Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 40,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                    Box.Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 80,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { mah: "100%", gap: 8, children: scroll.content })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Divider.Divider, { mx: -16 }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Group.Group, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(index$1.Typography, { size: "sm", children: [
+        "Use",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.Typography, { fw: 600, component: "span", children: utcStr }),
+        " ",
+        "from your local time zone"
+      ] }) })
+    ] }) })
+  ] });
+};
+exports.DateTimePicker = DateTimePicker;

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

@@ -0,0 +1,18 @@
+import { Sx, MantineSize } from '../../primitive/index.js';
+
+export interface DateTimePickerProps {
+    placeholder?: string;
+    format?: string;
+    utcOffset?: number;
+    defaultValue?: Date;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+    onChange?: (val: Date) => void;
+    disable?: boolean;
+    withinPortal?: boolean;
+    sx?: Sx;
+    loading?: boolean;
+    size?: MantineSize;
+}
+export declare const DateTimePicker: React.FC<React.PropsWithChildren<DateTimePickerProps>>;

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

@@ -0,0 +1,18 @@
+import { Sx, MantineSize } from '../../primitive/index.js';
+
+export interface DateTimePickerProps {
+    placeholder?: string;
+    format?: string;
+    utcOffset?: number;
+    defaultValue?: Date;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+    onChange?: (val: Date) => void;
+    disable?: boolean;
+    withinPortal?: boolean;
+    sx?: Sx;
+    loading?: boolean;
+    size?: MantineSize;
+}
+export declare const DateTimePicker: React.FC<React.PropsWithChildren<DateTimePickerProps>>;

package/dist/biz/DateTimePicker/index.js

@@ -0,0 +1,219 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useMemoizedFn, useUpdateEffect } from "ahooks";
+import { useState, useMemo } from "react";
+import { IconClock } from "../../icons/index.js";
+import { Typography } from "../../primitive/Typography/index.js";
+import dayjs from "dayjs";
+import { DEFAULT_TIME_FORMAT } from "../TimeRangePicker/helpers.js";
+import { useTimePickerScroll } from "./usePickerScroll.js";
+import { useDisclosure } from "../../node_modules/.pnpm/@mantine_hooks@5.10.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.js";
+import { Popover } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Popover/Popover.js";
+import { TextInput } from "../../primitive/TextInput/TextInput.js";
+import { Calendar } from "../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.12_react@18.3.1/node_modules/@mantine/dates/esm/components/Calendar/Calendar.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.12_react@18.3.1/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.js";
+import { Loader } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Loader/Loader.js";
+import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
+import { Stack } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Stack/Stack.js";
+import { Group } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.js";
+import { Divider } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Divider/Divider.js";
+import { Flex } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Flex/Flex.js";
+const DateTimePicker = ({
+  placeholder = "Select time",
+  format = DEFAULT_TIME_FORMAT,
+  defaultValue,
+  value,
+  startDate = dayjs().subtract(10, "year").toDate(),
+  endDate = dayjs().add(10, "year").toDate(),
+  onChange,
+  disable = false,
+  utcOffset = dayjs().utcOffset(),
+  withinPortal = true,
+  sx,
+  loading = false,
+  size
+}) => {
+  const [opened, { close, open }] = useDisclosure(false);
+  const [currentValue, setCurrentValue] = useState(
+    defaultValue ? dayjs(defaultValue) : value ? dayjs(value) : dayjs()
+  );
+  const updateCurrentValue = useMemoizedFn((val) => {
+    setCurrentValue(val);
+    onChange == null ? void 0 : onChange(val.toDate());
+  });
+  const inputStr = currentValue.format(format);
+  const utcStr = useMemo(() => {
+    const h = Math.floor(utcOffset / 60);
+    const m = utcOffset % 60;
+    return `UTC${h >= 0 ? "+" : "-"}${Math.abs(h)}:${m < 10 ? "0" : ""}${m}`;
+  }, [utcOffset]);
+  const scroll = useTimePickerScroll(currentValue, opened, startDate, endDate, utcOffset);
+  const calendarChange = useMemoizedFn((v) => {
+    let next = currentValue;
+    next = next.utcOffset(utcOffset).year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
+    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  });
+  const timeInputChange = useMemoizedFn((v) => {
+    let next = currentValue;
+    next = next.utcOffset(utcOffset).hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
+    if (startDate && next.valueOf() < startDate.valueOf()) {
+      updateCurrentValue(dayjs(startDate));
+    } else if (endDate && next.valueOf() > endDate.valueOf()) {
+      updateCurrentValue(dayjs(endDate));
+    } else if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  });
+  useUpdateEffect(() => {
+    let next = currentValue;
+    const [h, m, s] = scroll.value;
+    next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
+    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  }, [scroll.value]);
+  useUpdateEffect(() => {
+    if (value && dayjs(value).unix() !== currentValue.unix()) {
+      updateCurrentValue(dayjs(value));
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TextInput,
+      {
+        readOnly: true,
+        disabled: disable,
+        placeholder,
+        value: inputStr,
+        rightSection: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: IconClock, size: 18, c: "carbon.6" }),
+        onClick: open,
+        sx,
+        size
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { align: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Calendar,
+          {
+            minDate: startDate,
+            maxDate: endDate,
+            value: currentValue.toDate(),
+            onChange: calendarChange,
+            size: "sm",
+            styles: () => ({
+              calendarHeaderLevel: {
+                height: 32
+              },
+              calendarHeaderControl: {
+                height: 32,
+                width: 32
+              },
+              weekdayCell: {
+                height: 32,
+                width: 32,
+                lineHeight: "32px"
+              },
+              month: {
+                "& thead tr": {
+                  display: "flex",
+                  gap: 8
+                },
+                "& tbody tr": {
+                  display: "flex",
+                  gap: 8
+                }
+              },
+              day: {
+                height: 32,
+                width: 32,
+                lineHeight: "32px"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { justify: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TimeInput,
+            {
+              w: 112,
+              withSeconds: true,
+              value: currentValue.toDate(),
+              onChange: timeInputChange,
+              size: "sm",
+              styles: {
+                controls: {
+                  height: 30
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Box,
+            {
+              pos: "relative",
+              fz: 14,
+              fw: 400,
+              h: 224,
+              sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { mah: "100%", gap: 8, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 0,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 40,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 80,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { mah: "100%", gap: 8, children: scroll.content })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { mx: -16 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { size: "sm", children: [
+        "Use",
+        " ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { fw: 600, component: "span", children: utcStr }),
+        " ",
+        "from your local time zone"
+      ] }) })
+    ] }) })
+  ] });
+};
+export {
+  DateTimePicker
+};

package/dist/biz/DateTimePicker/usePickerScroll.cjs

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.cjs");
+const ahooks = require("ahooks");
+const lodashEs = require("lodash-es");
+const React = require("react");
+const dayjs = require("dayjs");
+const constant = require("./constant.cjs");
+const ScrollArea = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/ScrollArea/ScrollArea.cjs");
+const clsx_m = require("../../node_modules/.pnpm/clsx@1.1.1/node_modules/clsx/dist/clsx.m.cjs");
+const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
+const createStyles = require("../../node_modules/.pnpm/@mantine_styles@5.10.4_patch_hash_gj5o633amdkv7b52vinsxkrrr4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/tss/create-styles.cjs");
+const useStyles = createStyles.createStyles(() => ({
+  bold: {
+    fontWeight: 600
+  },
+  cell: {
+    textAlign: "center",
+    cursor: "pointer",
+    scrollSnapAlign: "start",
+    userSelect: "none"
+  },
+  cellPlaceholder: {
+    visibility: "hidden"
+  }
+}));
+const getTimeRange = ({
+  curr,
+  type,
+  start,
+  end,
+  utcOffset = dayjs().utcOffset()
+}) => {
+  const map = {
+    year: {
+      min: dayjs().year(),
+      max: dayjs().year() + 100
+    },
+    month: {
+      min: 1,
+      max: 12
+    },
+    day: {
+      min: 1,
+      max: curr.daysInMonth()
+    },
+    hour: {
+      min: 0,
+      max: 23
+    },
+    minute: {
+      min: 0,
+      max: 59
+    },
+    second: {
+      min: 0,
+      max: 59
+    }
+  };
+  let { min, max } = map[type];
+  const s1 = start ? dayjs(start).utcOffset(utcOffset) : null;
+  const s2 = end ? dayjs(end).utcOffset(utcOffset) : null;
+  switch (type) {
+    case "year": {
+      if (s1) {
+        min = s1.year();
+      }
+      if (s2) {
+        max = s2.year();
+      }
+      break;
+    }
+    case "month": {
+      if (s1 && curr.isSame(s1, "year")) {
+        min = s1.month() + 1;
+      }
+      if (s2 && curr.isSame(s2, "year")) {
+        max = s2.month() + 1;
+      }
+      break;
+    }
+    case "day": {
+      if (s1 && curr.isSame(s1, "month")) {
+        min = s1.date();
+      }
+      if (s2 && curr.isSame(s2, "month")) {
+        max = s2.date();
+      }
+      break;
+    }
+    case "hour": {
+      if (s1 && curr.isSame(s1, "day")) {
+        min = s1.hour();
+      }
+      if (s2 && curr.isSame(s2, "day")) {
+        max = s2.hour();
+      }
+      break;
+    }
+    case "minute": {
+      if (s1 && curr.isSame(s1, "hour")) {
+        min = s1.minute();
+      }
+      if (s2 && curr.isSame(s2, "hour")) {
+        max = s2.minute();
+      }
+      break;
+    }
+    case "second": {
+      if (s1 && curr.isSame(s1, "minute")) {
+        min = s1.second();
+      }
+      if (s2 && curr.isSame(s2, "minute")) {
+        max = s2.second();
+      }
+      break;
+    }
+    default: {
+      const exhaustiveCheck = "should not reach here";
+      throw new Error(exhaustiveCheck);
+    }
+  }
+  return { min, max };
+};
+const usePickerScrollColumn = ({ min, max, curr, open, render }) => {
+  const { classes } = useStyles();
+  const ref = React.useRef(null);
+  const timeoutRef = React.useRef();
+  const [val, setVal] = React.useState(curr);
+  const handleClickCell = ahooks.useMemoizedFn((e, i) => {
+    var _a;
+    e.stopPropagation();
+    e.preventDefault();
+    (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * constant.CellHeight, behavior: "smooth" });
+  });
+  const onScroll = ahooks.useMemoizedFn((position) => {
+    clearTimeout(timeoutRef.current);
+    const i = position.y / constant.CellHeight;
+    if (i === Math.floor(i)) {
+      const val2 = i >= numbers.length ? numbers.at(-1) : numbers[i];
+      if (typeof val2 !== "undefined") {
+        setVal(val2);
+      }
+    } else {
+      timeoutRef.current = window.setTimeout(() => {
+        const k = Math.round(i);
+        const val2 = k >= numbers.length ? numbers.at(-1) : numbers[k];
+        if (typeof val2 !== "undefined") {
+          setVal(val2);
+        }
+      }, 300);
+    }
+  });
+  const numbers = React.useMemo(() => lodashEs.range(min, max + 1), [min, max]);
+  const content = React.useMemo(() => {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+      ScrollArea.ScrollArea,
+      {
+        viewportRef: ref,
+        type: "never",
+        styles: {
+          viewport: {
+            scrollSnapPointsY: `repeat(${constant.CellHeight}px)`,
+            scrollSnapType: "y mandatory"
+          }
+        },
+        onScrollPositionChange: onScroll,
+        children: [
+          numbers.map((i, index) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: clsx_m(classes.cell, i === curr && classes.bold),
+              onClick: (e) => handleClickCell(e, index),
+              style: constant.CellStyle,
+              children: render ? render(i) : i
+            },
+            i
+          )),
+          lodashEs.range(6).map((i) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { className: clsx_m(classes.cell, classes.cellPlaceholder), style: constant.CellStyle }, i))
+        ]
+      }
+    );
+  }, [numbers, handleClickCell, onScroll, curr, render, classes]);
+  const adjustScrollTop = ahooks.useMemoizedFn(() => {
+    const i = numbers.findIndex((i2) => i2 === val);
+    if (i !== -1 && open && ref.current) {
+      const s = i * constant.CellHeight;
+      ref.current.scrollTo({ top: s, behavior: "auto" });
+    }
+  });
+  React.useEffect(() => {
+    requestAnimationFrame(() => {
+      adjustScrollTop();
+    });
+  }, [open, val, adjustScrollTop]);
+  React.useEffect(() => {
+    if (numbers.findIndex((i) => i === curr) > -1) {
+      setVal(curr);
+    }
+  }, [curr, numbers]);
+  return {
+    value: val,
+    content
+  };
+};
+const default2DigitRender = (val) => lodashEs.padStart(String(val), 2, "0");
+const useTimePickerScroll = (currentValue, open, start, end, utcOffset) => {
+  const options = React.useMemo(
+    () => ({
+      hour: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "hour" }),
+      minute: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "minute" }),
+      second: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "second" })
+    }),
+    [currentValue, start, end, utcOffset]
+  );
+  const hour = usePickerScrollColumn({
+    ...options.hour,
+    curr: typeof utcOffset !== "undefined" ? currentValue.utcOffset(utcOffset ?? currentValue.utcOffset()).hour() : currentValue.hour(),
+    open,
+    render: default2DigitRender,
+    title: "hour"
+  });
+  const minute = usePickerScrollColumn({
+    ...options.minute,
+    curr: currentValue.minute(),
+    open,
+    render: default2DigitRender,
+    title: "minute"
+  });
+  const second = usePickerScrollColumn({
+    ...options.second,
+    curr: currentValue.second(),
+    open,
+    render: default2DigitRender,
+    title: "second"
+  });
+  const content = React.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+      hour.content,
+      minute.content,
+      second.content
+    ] }),
+    [hour.content, minute.content, second.content]
+  );
+  const value = React.useMemo(
+    () => [hour.value, minute.value, second.value],
+    [hour.value, minute.value, second.value]
+  );
+  return {
+    content,
+    value
+  };
+};
+exports.getTimeRange = getTimeRange;
+exports.useTimePickerScroll = useTimePickerScroll;

package/dist/biz/DateTimePicker/usePickerScroll.d.cts

@@ -0,0 +1,30 @@
+import { Dayjs } from 'dayjs';
+
+export declare const getTimeRange: ({ curr, type, start, end, utcOffset }: {
+    curr: Dayjs;
+    type: "year" | "month" | "day" | "hour" | "minute" | "second";
+    start?: Date;
+    end?: Date;
+    utcOffset?: number;
+}) => Range;
+interface Options {
+    max: number;
+    min: number;
+    /**
+     * always use real value, not 0-indexed value
+     */
+    curr: number;
+    open: boolean;
+    render?: (val: number) => any;
+    title?: string;
+}
+type Range = Pick<Options, 'max' | 'min'>;
+export declare const useDatePickerScroll: (currentValue: Dayjs, open: boolean, start?: Date, end?: Date, utcOffset?: number) => {
+    content: import("react/jsx-runtime.js").JSX.Element;
+    value: readonly [number, number, number];
+};
+export declare const useTimePickerScroll: (currentValue: Dayjs, open: boolean, start?: Date, end?: Date, utcOffset?: number) => {
+    content: import("react/jsx-runtime.js").JSX.Element;
+    value: readonly [number, number, number];
+};
+export {};

package/dist/biz/DateTimePicker/usePickerScroll.d.ts

@@ -0,0 +1,30 @@
+import { Dayjs } from 'dayjs';
+
+export declare const getTimeRange: ({ curr, type, start, end, utcOffset }: {
+    curr: Dayjs;
+    type: "year" | "month" | "day" | "hour" | "minute" | "second";
+    start?: Date;
+    end?: Date;
+    utcOffset?: number;
+}) => Range;
+interface Options {
+    max: number;
+    min: number;
+    /**
+     * always use real value, not 0-indexed value
+     */
+    curr: number;
+    open: boolean;
+    render?: (val: number) => any;
+    title?: string;
+}
+type Range = Pick<Options, 'max' | 'min'>;
+export declare const useDatePickerScroll: (currentValue: Dayjs, open: boolean, start?: Date, end?: Date, utcOffset?: number) => {
+    content: import("react/jsx-runtime.js").JSX.Element;
+    value: readonly [number, number, number];
+};
+export declare const useTimePickerScroll: (currentValue: Dayjs, open: boolean, start?: Date, end?: Date, utcOffset?: number) => {
+    content: import("react/jsx-runtime.js").JSX.Element;
+    value: readonly [number, number, number];
+};
+export {};

package/dist/biz/DateTimePicker/usePickerScroll.js

@@ -0,0 +1,255 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useMemoizedFn } from "ahooks";
+import { range, padStart } from "lodash-es";
+import { useMemo, useRef, useState, useEffect } from "react";
+import dayjs from "dayjs";
+import { CellHeight, CellStyle } from "./constant.js";
+import { ScrollArea } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/ScrollArea/ScrollArea.js";
+import clsx from "../../node_modules/.pnpm/clsx@1.1.1/node_modules/clsx/dist/clsx.m.js";
+import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
+import { createStyles } from "../../node_modules/.pnpm/@mantine_styles@5.10.4_patch_hash_gj5o633amdkv7b52vinsxkrrr4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/tss/create-styles.js";
+const useStyles = createStyles(() => ({
+  bold: {
+    fontWeight: 600
+  },
+  cell: {
+    textAlign: "center",
+    cursor: "pointer",
+    scrollSnapAlign: "start",
+    userSelect: "none"
+  },
+  cellPlaceholder: {
+    visibility: "hidden"
+  }
+}));
+const getTimeRange = ({
+  curr,
+  type,
+  start,
+  end,
+  utcOffset = dayjs().utcOffset()
+}) => {
+  const map = {
+    year: {
+      min: dayjs().year(),
+      max: dayjs().year() + 100
+    },
+    month: {
+      min: 1,
+      max: 12
+    },
+    day: {
+      min: 1,
+      max: curr.daysInMonth()
+    },
+    hour: {
+      min: 0,
+      max: 23
+    },
+    minute: {
+      min: 0,
+      max: 59
+    },
+    second: {
+      min: 0,
+      max: 59
+    }
+  };
+  let { min, max } = map[type];
+  const s1 = start ? dayjs(start).utcOffset(utcOffset) : null;
+  const s2 = end ? dayjs(end).utcOffset(utcOffset) : null;
+  switch (type) {
+    case "year": {
+      if (s1) {
+        min = s1.year();
+      }
+      if (s2) {
+        max = s2.year();
+      }
+      break;
+    }
+    case "month": {
+      if (s1 && curr.isSame(s1, "year")) {
+        min = s1.month() + 1;
+      }
+      if (s2 && curr.isSame(s2, "year")) {
+        max = s2.month() + 1;
+      }
+      break;
+    }
+    case "day": {
+      if (s1 && curr.isSame(s1, "month")) {
+        min = s1.date();
+      }
+      if (s2 && curr.isSame(s2, "month")) {
+        max = s2.date();
+      }
+      break;
+    }
+    case "hour": {
+      if (s1 && curr.isSame(s1, "day")) {
+        min = s1.hour();
+      }
+      if (s2 && curr.isSame(s2, "day")) {
+        max = s2.hour();
+      }
+      break;
+    }
+    case "minute": {
+      if (s1 && curr.isSame(s1, "hour")) {
+        min = s1.minute();
+      }
+      if (s2 && curr.isSame(s2, "hour")) {
+        max = s2.minute();
+      }
+      break;
+    }
+    case "second": {
+      if (s1 && curr.isSame(s1, "minute")) {
+        min = s1.second();
+      }
+      if (s2 && curr.isSame(s2, "minute")) {
+        max = s2.second();
+      }
+      break;
+    }
+    default: {
+      const exhaustiveCheck = "should not reach here";
+      throw new Error(exhaustiveCheck);
+    }
+  }
+  return { min, max };
+};
+const usePickerScrollColumn = ({ min, max, curr, open, render }) => {
+  const { classes } = useStyles();
+  const ref = useRef(null);
+  const timeoutRef = useRef();
+  const [val, setVal] = useState(curr);
+  const handleClickCell = useMemoizedFn((e, i) => {
+    var _a;
+    e.stopPropagation();
+    e.preventDefault();
+    (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * CellHeight, behavior: "smooth" });
+  });
+  const onScroll = useMemoizedFn((position) => {
+    clearTimeout(timeoutRef.current);
+    const i = position.y / CellHeight;
+    if (i === Math.floor(i)) {
+      const val2 = i >= numbers.length ? numbers.at(-1) : numbers[i];
+      if (typeof val2 !== "undefined") {
+        setVal(val2);
+      }
+    } else {
+      timeoutRef.current = window.setTimeout(() => {
+        const k = Math.round(i);
+        const val2 = k >= numbers.length ? numbers.at(-1) : numbers[k];
+        if (typeof val2 !== "undefined") {
+          setVal(val2);
+        }
+      }, 300);
+    }
+  });
+  const numbers = useMemo(() => range(min, max + 1), [min, max]);
+  const content = useMemo(() => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      ScrollArea,
+      {
+        viewportRef: ref,
+        type: "never",
+        styles: {
+          viewport: {
+            scrollSnapPointsY: `repeat(${CellHeight}px)`,
+            scrollSnapType: "y mandatory"
+          }
+        },
+        onScrollPositionChange: onScroll,
+        children: [
+          numbers.map((i, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: clsx(classes.cell, i === curr && classes.bold),
+              onClick: (e) => handleClickCell(e, index),
+              style: CellStyle,
+              children: render ? render(i) : i
+            },
+            i
+          )),
+          range(6).map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: clsx(classes.cell, classes.cellPlaceholder), style: CellStyle }, i))
+        ]
+      }
+    );
+  }, [numbers, handleClickCell, onScroll, curr, render, classes]);
+  const adjustScrollTop = useMemoizedFn(() => {
+    const i = numbers.findIndex((i2) => i2 === val);
+    if (i !== -1 && open && ref.current) {
+      const s = i * CellHeight;
+      ref.current.scrollTo({ top: s, behavior: "auto" });
+    }
+  });
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      adjustScrollTop();
+    });
+  }, [open, val, adjustScrollTop]);
+  useEffect(() => {
+    if (numbers.findIndex((i) => i === curr) > -1) {
+      setVal(curr);
+    }
+  }, [curr, numbers]);
+  return {
+    value: val,
+    content
+  };
+};
+const default2DigitRender = (val) => padStart(String(val), 2, "0");
+const useTimePickerScroll = (currentValue, open, start, end, utcOffset) => {
+  const options = useMemo(
+    () => ({
+      hour: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "hour" }),
+      minute: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "minute" }),
+      second: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "second" })
+    }),
+    [currentValue, start, end, utcOffset]
+  );
+  const hour = usePickerScrollColumn({
+    ...options.hour,
+    curr: typeof utcOffset !== "undefined" ? currentValue.utcOffset(utcOffset ?? currentValue.utcOffset()).hour() : currentValue.hour(),
+    open,
+    render: default2DigitRender,
+    title: "hour"
+  });
+  const minute = usePickerScrollColumn({
+    ...options.minute,
+    curr: currentValue.minute(),
+    open,
+    render: default2DigitRender,
+    title: "minute"
+  });
+  const second = usePickerScrollColumn({
+    ...options.second,
+    curr: currentValue.second(),
+    open,
+    render: default2DigitRender,
+    title: "second"
+  });
+  const content = useMemo(
+    () => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      hour.content,
+      minute.content,
+      second.content
+    ] }),
+    [hour.content, minute.content, second.content]
+  );
+  const value = useMemo(
+    () => [hour.value, minute.value, second.value],
+    [hour.value, minute.value, second.value]
+  );
+  return {
+    content,
+    value
+  };
+};
+export {
+  getTimeRange,
+  useTimePickerScroll
+};

package/dist/biz/index.cjs

@@ -11,6 +11,7 @@ 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 index$c = require("./DateTimePicker/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.13.0_@mantine_core@5.10.4_@mantine_dates@5.10.4_@_yfjqnbb4mknmwrezmpabys5oru/node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.cjs");
@@ -47,6 +48,7 @@ exports.PropertyCard = index$9.PropertyCard;
 exports.PageHeader = index$a.PageHeader;
 exports.PageShell = index$a.PageShell;
 exports.TimeRangePicker = index$b.TimeRangePicker;
+exports.DateTimePicker = index$c.DateTimePicker;
 exports.validPhoneNumber = helper.validPhoneNumber;
 exports.BasicTable = BasicTable.BasicTable;
 exports.TableNoticeRow = BasicTable.TableNoticeRow;

package/dist/biz/index.d.cts

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

package/dist/biz/index.d.ts

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

package/dist/biz/index.js

@@ -9,6 +9,7 @@ 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 { DateTimePicker } from "./DateTimePicker/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.13.0_@mantine_core@5.10.4_@mantine_dates@5.10.4_@_yfjqnbb4mknmwrezmpabys5oru/node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js";
@@ -40,6 +41,7 @@ export {
   DEFAULT_TIME_FORMAT,
   DEFAULT_TIME_FORMAT_WITH_TIMEZONE,
   DEFAULT_TIME_RANGE,
+  DateTimePicker,
   Dot,
   DotBadge,
   Form,

package/dist/theme/theme.cjs

@@ -1036,6 +1036,54 @@ const theme = {
           }
         };
       }
+    },
+    Calendar: {
+      styles: (theme2) => {
+        const color = theme2.primaryColor;
+        return {
+          calendarHeaderLevel: {
+            color: theme2.fn.themeColor(color, 7)
+          },
+          calendarHeaderLevelIcon: {
+            color: `${theme2.fn.themeColor(color, 7)} !important`
+          },
+          calendarHeaderControl: {
+            color: `${theme2.fn.themeColor(color, 7)} !important`
+          },
+          yearPickerControlActive: {
+            backgroundColor: theme2.fn.themeColor(color, 9)
+          },
+          monthPickerControlActive: {
+            backgroundColor: theme2.fn.themeColor(color, 9)
+          },
+          weekday: {
+            color: theme2.fn.themeColor(color, 7)
+          },
+          day: {
+            color: theme2.fn.themeColor(color, 8),
+            borderRadius: 8,
+            "&[data-selected]": {
+              backgroundColor: theme2.fn.themeColor(color, 9),
+              color: theme2.white
+            },
+            "&[data-weekend]": {
+              color: theme2.fn.themeColor(color, 8),
+              "&[data-selected]": {
+                color: theme2.white
+              },
+              "&[data-disabled], &:disabled": {
+                color: `${theme2.fn.themeColor(color, 5)} !important`
+              }
+            },
+            "&[data-disabled], &:disabled": {
+              color: `${theme2.fn.themeColor(color, 5)} !important`
+            },
+            "&[data-outside]": {
+              color: theme2.fn.themeColor(color, 6)
+            }
+          }
+        };
+      }
     }
   }
 };

package/dist/theme/theme.js

@@ -1034,6 +1034,54 @@ const theme = {
           }
         };
       }
+    },
+    Calendar: {
+      styles: (theme2) => {
+        const color = theme2.primaryColor;
+        return {
+          calendarHeaderLevel: {
+            color: theme2.fn.themeColor(color, 7)
+          },
+          calendarHeaderLevelIcon: {
+            color: `${theme2.fn.themeColor(color, 7)} !important`
+          },
+          calendarHeaderControl: {
+            color: `${theme2.fn.themeColor(color, 7)} !important`
+          },
+          yearPickerControlActive: {
+            backgroundColor: theme2.fn.themeColor(color, 9)
+          },
+          monthPickerControlActive: {
+            backgroundColor: theme2.fn.themeColor(color, 9)
+          },
+          weekday: {
+            color: theme2.fn.themeColor(color, 7)
+          },
+          day: {
+            color: theme2.fn.themeColor(color, 8),
+            borderRadius: 8,
+            "&[data-selected]": {
+              backgroundColor: theme2.fn.themeColor(color, 9),
+              color: theme2.white
+            },
+            "&[data-weekend]": {
+              color: theme2.fn.themeColor(color, 8),
+              "&[data-selected]": {
+                color: theme2.white
+              },
+              "&[data-disabled], &:disabled": {
+                color: `${theme2.fn.themeColor(color, 5)} !important`
+              }
+            },
+            "&[data-disabled], &:disabled": {
+              color: `${theme2.fn.themeColor(color, 5)} !important`
+            },
+            "&[data-outside]": {
+              color: theme2.fn.themeColor(color, 6)
+            }
+          }
+        };
+      }
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.45",
+  "version": "2.0.0-beta.46",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",