@deepnoid/ui 0.1.124 → 0.1.126

package/dist/components/timePicker/calendar.mjs

@@ -0,0 +1,300 @@
+"use client";
+import {
+  formatDateToString,
+  formatStringToDate
+} from "../../chunk-FWFEKWWD.mjs";
+import "../../chunk-ZYIIXWVY.mjs";
+import {
+  Icon_default
+} from "../../chunk-XX2PHROM.mjs";
+import {
+  mapPropsVariants
+} from "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-GQFNYXJZ.mjs";
+import {
+  tv
+} from "../../chunk-76QIZILI.mjs";
+import "../../chunk-AC6TWLRT.mjs";
+
+// src/components/timePicker/calendar.tsx
+import React, {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+  useImperativeHandle,
+  useEffect
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Calendar = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, calendarStyle.variantKeys);
+  const {
+    selectedDate,
+    startDate,
+    endDate,
+    range = false,
+    classNames,
+    highlightWeekend = true,
+    onChangeDate,
+    onChangeDateRange,
+    ...inputProps
+  } = props;
+  const [currentDate, setCurrentDate] = useState(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
+  const [tempStartDate, setTempStartDate] = useState(startDate);
+  const [tempEndDate, setTempEndDate] = useState(endDate);
+  const [isSelectingRange, setIsSelectingRange] = useState(false);
+  const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
+  useEffect(() => {
+    if (selectedDate) {
+      setCurrentDate(new Date(selectedDate));
+    }
+  }, [selectedDate]);
+  useEffect(() => {
+    if (range) {
+      setTempStartDate(startDate);
+      setTempEndDate(endDate);
+    }
+  }, [startDate, endDate, range]);
+  const getCalendarDates = useCallback(() => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const firstDayOfMonth = new Date(year, month, 1).getDay();
+    const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
+    const lastDateOfPrevMonth = new Date(year, month, 0).getDate();
+    let dates = [];
+    for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+      dates.push({
+        date: lastDateOfPrevMonth - i,
+        currentMonth: false
+      });
+    }
+    for (let date = 1; date <= lastDateOfMonth; date++) {
+      dates.push({
+        date,
+        currentMonth: true
+      });
+    }
+    const remainingDays = 42 - dates.length;
+    for (let i = 1; i <= remainingDays; i++) {
+      dates.push({
+        date: i,
+        currentMonth: false
+      });
+    }
+    const weeks = [];
+    for (let i = 0; i < dates.length; i += 7) {
+      weeks.push(dates.slice(i, i + 7));
+    }
+    return weeks;
+  }, [currentDate]);
+  const handlePrevMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
+  };
+  const handleNextMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1));
+  };
+  const handleDateSelect = (date, isCurrentMonth) => {
+    if (!isCurrentMonth) return;
+    const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
+    const formatted = formatDateToString(selected);
+    if (range) {
+      if (!tempStartDate || tempStartDate && tempEndDate) {
+        setTempStartDate(formatted);
+        setTempEndDate(void 0);
+        setIsSelectingRange(true);
+      } else if (tempStartDate && !tempEndDate) {
+        const startDateObj = new Date(tempStartDate);
+        const endDateObj = selected;
+        if (endDateObj >= startDateObj) {
+          setTempEndDate(formatted);
+          onChangeDateRange == null ? void 0 : onChangeDateRange(tempStartDate, formatted);
+        } else {
+          setTempStartDate(formatted);
+          setTempEndDate(tempStartDate);
+          onChangeDateRange == null ? void 0 : onChangeDateRange(formatted, tempStartDate);
+        }
+        setIsSelectingRange(false);
+      }
+    } else {
+      onChangeDate == null ? void 0 : onChangeDate(formatted);
+    }
+  };
+  const isDateInRange = (date, isCurrentMonth) => {
+    if (!range || !tempStartDate || !isCurrentMonth) return false;
+    const currentDateObj = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
+    const startDateObj = new Date(tempStartDate);
+    const endDateObj = tempEndDate ? new Date(tempEndDate) : null;
+    if (endDateObj) {
+      return currentDateObj >= startDateObj && currentDateObj <= endDateObj;
+    }
+    return false;
+  };
+  const isDateRangeStart = (date, isCurrentMonth) => {
+    if (!range || !tempStartDate || !isCurrentMonth) return false;
+    const currentDateObj = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
+    const startDateObj = new Date(tempStartDate);
+    return currentDateObj.getTime() === startDateObj.getTime();
+  };
+  const isDateRangeEnd = (date, isCurrentMonth) => {
+    if (!range || !tempEndDate || !isCurrentMonth) return false;
+    const currentDateObj = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
+    const endDateObj = new Date(tempEndDate);
+    return currentDateObj.getTime() === endDateObj.getTime();
+  };
+  useImperativeHandle(ref, () => ({
+    getSelectedDate: () => selectedDate,
+    getStartDate: () => tempStartDate,
+    getEndDate: () => tempEndDate
+  }));
+  const slots = useMemo(() => calendarStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = useCallback(
+    () => ({
+      className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
+    }),
+    [slots, classNames]
+  );
+  const getDateTitleProps = useCallback(
+    (index) => {
+      return {
+        className: `${slots.dateTitle({
+          class: classNames == null ? void 0 : classNames.dateTitle
+        })}`,
+        "data-saturday": highlightWeekend && index === 6,
+        "data-sunday": highlightWeekend && index === 0
+      };
+    },
+    [slots, classNames, highlightWeekend]
+  );
+  const getDateProps = useCallback(
+    (dateObj) => {
+      const today = /* @__PURE__ */ new Date();
+      const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
+      const formatted = selectedDate ? formatStringToDate(selectedDate) : "";
+      const isSelected = !range && formatted ? formatted.getDate() === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear() : false;
+      const inRange = isDateInRange(dateObj.date, dateObj.currentMonth);
+      const rangeStart = isDateRangeStart(dateObj.date, dateObj.currentMonth);
+      const rangeEnd = isDateRangeEnd(dateObj.date, dateObj.currentMonth);
+      const dayOfWeek = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date).getDay();
+      return {
+        className: `${slots.date({
+          class: classNames == null ? void 0 : classNames.date
+        })}`,
+        "data-today": dateObj.currentMonth && isToday,
+        "data-selected": dateObj.currentMonth && isSelected,
+        "data-range-start": dateObj.currentMonth && rangeStart,
+        "data-range-end": dateObj.currentMonth && rangeEnd,
+        "data-in-range": dateObj.currentMonth && inRange,
+        "data-disabled": !dateObj.currentMonth,
+        "data-saturday": highlightWeekend && dayOfWeek === 6,
+        "data-sunday": highlightWeekend && dayOfWeek === 0,
+        onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth)
+      };
+    },
+    [slots, classNames, selectedDate, currentDate, highlightWeekend, range, tempStartDate, tempEndDate]
+  );
+  const calendarDates = getCalendarDates();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "calendar-header mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
+      /* @__PURE__ */ jsx("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
+      /* @__PURE__ */ jsx(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-7 gap-[5px] text-center", children: calendarDates.map((week, weekIndex) => {
+      const hasCurrentMonthDates = week.some((dateObj) => dateObj.currentMonth);
+      if (!hasCurrentMonthDates) return null;
+      return /* @__PURE__ */ jsx(React.Fragment, { children: week.map((dateObj, index) => {
+        return /* @__PURE__ */ jsx("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
+      }) }, weekIndex);
+    }) })
+  ] }) });
+});
+Calendar.displayName = "Calendar";
+var calendar_default = Calendar;
+var calendarStyle = tv({
+  slots: {
+    base: [
+      "flex",
+      "flex-col",
+      "w-[240px]",
+      "border",
+      "border-neutral-main",
+      "bg-background",
+      "rounded-md",
+      "p-4",
+      "shadow-lg",
+      "select-none"
+    ],
+    dateTitle: ["text-sm", "font-[500]", "data-[saturday=true]:text-[#1E7EEE]", "data-[sunday=true]:text-[#FF4684]"],
+    date: [
+      "flex",
+      "justify-center",
+      "items-center",
+      "h-[25px]",
+      "text-sm",
+      "rounded-full",
+      "cursor-pointer",
+      "hover:bg-neutral-soft",
+      "data-[today=true]:border",
+      "data-[today=true]:border-foreground",
+      "data-[saturday=true]:text-[#1E7EEE]",
+      "data-[saturday=true]:!border-[#1E7EEE]",
+      "data-[sunday=true]:text-[#FF4684]",
+      "data-[sunday=true]:!border-[#FF4684]",
+      "data-[selected=true]:!text-white",
+      "data-[selected=true]:border-none",
+      "data-[range-start=true]:!text-white",
+      "data-[range-start=true]:border-none",
+      "data-[range-end=true]:!text-white",
+      "data-[range-end=true]:border-none",
+      "data-[in-range=true]:!bg-opacity-20",
+      "data-[disabled=true]:!text-neutral-main",
+      "data-[disabled=true]:cursor-default",
+      "data-[disabled=true]:hover:bg-transparent"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: {}
+    },
+    color: {
+      primary: {
+        date: [
+          "data-[selected=true]:!border-primary-main",
+          "data-[selected=true]:bg-primary-main",
+          "data-[range-start=true]:!border-primary-main",
+          "data-[range-start=true]:bg-primary-main",
+          "data-[range-end=true]:!border-primary-main",
+          "data-[range-end=true]:bg-primary-main",
+          "data-[in-range=true]:!bg-primary-main"
+        ]
+      },
+      secondary: {
+        date: [
+          "data-[selected=true]:!border-secondary-main",
+          "data-[selected=true]:bg-secondary-main",
+          "data-[range-start=true]:!border-secondary-main",
+          "data-[range-start=true]:bg-secondary-main",
+          "data-[range-end=true]:!border-secondary-main",
+          "data-[range-end=true]:bg-secondary-main",
+          "data-[in-range=true]:!bg-secondary-main"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "primary"
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      isRequired: true,
+      class: {}
+    }
+  ]
+});
+export {
+  calendarStyle,
+  calendar_default as default
+};

package/dist/components/timePicker/useDateTimePicker.d.mts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+
+interface DatePickerHookProps {
+    initialDate?: Date;
+    initialTime?: string;
+    range?: boolean;
+    onChange?: (date: Date) => void;
+}
+type TargetRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+declare const useDatePicker: ({ initialDate, initialTime, range }: DatePickerHookProps) => {
+    selectedDate: string | undefined;
+    selectedTime: string | undefined;
+    startDate: string | undefined;
+    endDate: string | undefined;
+    targetRect: TargetRect | null;
+    popupHeight: number;
+    isFocusInput: boolean;
+    dateInputRef: react.RefObject<HTMLInputElement | null>;
+    datePickerWrapperRef: react.RefObject<HTMLDivElement | null>;
+    datePickerRef: react.RefObject<HTMLDivElement | null>;
+    handleToggleDatePicker: () => void;
+    handleChangeDate: (date: string) => void;
+    handleChangeTime: (time: string) => void;
+    handleChangeDateRange: (start: string, end: string) => void;
+    handleFocusInput: () => void;
+    handleBlurInput: () => void;
+    calculatePositionWithScroll: (targetRect: TargetRect) => {
+        top: number;
+        left: number;
+    } | undefined;
+};
+
+export { useDatePicker };

package/dist/components/timePicker/useDateTimePicker.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+
+interface DatePickerHookProps {
+    initialDate?: Date;
+    initialTime?: string;
+    range?: boolean;
+    onChange?: (date: Date) => void;
+}
+type TargetRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+declare const useDatePicker: ({ initialDate, initialTime, range }: DatePickerHookProps) => {
+    selectedDate: string | undefined;
+    selectedTime: string | undefined;
+    startDate: string | undefined;
+    endDate: string | undefined;
+    targetRect: TargetRect | null;
+    popupHeight: number;
+    isFocusInput: boolean;
+    dateInputRef: react.RefObject<HTMLInputElement | null>;
+    datePickerWrapperRef: react.RefObject<HTMLDivElement | null>;
+    datePickerRef: react.RefObject<HTMLDivElement | null>;
+    handleToggleDatePicker: () => void;
+    handleChangeDate: (date: string) => void;
+    handleChangeTime: (time: string) => void;
+    handleChangeDateRange: (start: string, end: string) => void;
+    handleFocusInput: () => void;
+    handleBlurInput: () => void;
+    calculatePositionWithScroll: (targetRect: TargetRect) => {
+        top: number;
+        left: number;
+    } | undefined;
+};
+
+export { useDatePicker };

package/dist/components/timePicker/useDateTimePicker.js

@@ -0,0 +1,126 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/timePicker/useDateTimePicker.tsx
+var useDateTimePicker_exports = {};
+__export(useDateTimePicker_exports, {
+  useDatePicker: () => useDatePicker
+});
+module.exports = __toCommonJS(useDateTimePicker_exports);
+var import_react = require("react");
+
+// src/components/picker/utils.ts
+var formatDateToString = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+// src/components/timePicker/useDateTimePicker.tsx
+var useDatePicker = ({ initialDate, initialTime, range = false }) => {
+  const [selectedDate, setSelectedDate] = (0, import_react.useState)(
+    initialDate ? formatDateToString(initialDate) : ""
+  );
+  const [selectedTime, setSelectedTime] = (0, import_react.useState)(initialTime ? initialTime : "");
+  const [startDate, setStartDate] = (0, import_react.useState)("");
+  const [endDate, setEndDate] = (0, import_react.useState)("");
+  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
+  const [popupWidth, setPopupWidth] = (0, import_react.useState)(0);
+  const [popupHeight, setPopupHeight] = (0, import_react.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react.useState)(false);
+  const dateInputRef = (0, import_react.useRef)(null);
+  const datePickerWrapperRef = (0, import_react.useRef)(null);
+  const datePickerRef = (0, import_react.useRef)(null);
+  const DATE_PICKER_GAP = 4;
+  const calculatePositionWithScroll = (targetRect2) => {
+    if (targetRect2 && popupWidth && popupHeight) {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+      const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
+      const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
+      const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
+      const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
+      return {
+        top: top + scrollTop,
+        left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
+      };
+    }
+  };
+  const handleToggleDatePicker = () => {
+    if (datePickerRef.current) {
+      const rect = datePickerRef.current.getBoundingClientRect();
+      setTargetRect((prevRect) => prevRect ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height });
+    }
+  };
+  const handleChangeDate = (date) => {
+    setSelectedDate(date);
+  };
+  const handleChangeTime = (time) => {
+    setSelectedTime(time);
+  };
+  const handleChangeDateRange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+  const handleFocusInput = () => {
+    setIsFocusInput(true);
+  };
+  const handleBlurInput = () => {
+    setIsFocusInput(false);
+  };
+  (0, import_react.useEffect)(() => {
+    const onClickOutside = (e) => {
+      if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
+        setTargetRect(null);
+      }
+    };
+    window.addEventListener("mousedown", onClickOutside);
+    return () => window.removeEventListener("mousedown", onClickOutside);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (datePickerWrapperRef.current) {
+      setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
+      setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
+    }
+  }, [targetRect]);
+  return {
+    selectedDate,
+    selectedTime,
+    startDate,
+    endDate,
+    targetRect,
+    popupHeight,
+    isFocusInput,
+    dateInputRef,
+    datePickerWrapperRef,
+    datePickerRef,
+    handleToggleDatePicker,
+    handleChangeDate,
+    handleChangeTime,
+    handleChangeDateRange,
+    handleFocusInput,
+    handleBlurInput,
+    calculatePositionWithScroll
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDatePicker
+});

package/dist/components/timePicker/useDateTimePicker.mjs

@@ -0,0 +1,96 @@
+"use client";
+import {
+  formatDateToString
+} from "../../chunk-FWFEKWWD.mjs";
+import "../../chunk-AC6TWLRT.mjs";
+
+// src/components/timePicker/useDateTimePicker.tsx
+import { useState, useEffect, useRef } from "react";
+var useDatePicker = ({ initialDate, initialTime, range = false }) => {
+  const [selectedDate, setSelectedDate] = useState(
+    initialDate ? formatDateToString(initialDate) : ""
+  );
+  const [selectedTime, setSelectedTime] = useState(initialTime ? initialTime : "");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [targetRect, setTargetRect] = useState(null);
+  const [popupWidth, setPopupWidth] = useState(0);
+  const [popupHeight, setPopupHeight] = useState(0);
+  const [isFocusInput, setIsFocusInput] = useState(false);
+  const dateInputRef = useRef(null);
+  const datePickerWrapperRef = useRef(null);
+  const datePickerRef = useRef(null);
+  const DATE_PICKER_GAP = 4;
+  const calculatePositionWithScroll = (targetRect2) => {
+    if (targetRect2 && popupWidth && popupHeight) {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+      const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
+      const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
+      const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
+      const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
+      return {
+        top: top + scrollTop,
+        left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
+      };
+    }
+  };
+  const handleToggleDatePicker = () => {
+    if (datePickerRef.current) {
+      const rect = datePickerRef.current.getBoundingClientRect();
+      setTargetRect((prevRect) => prevRect ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height });
+    }
+  };
+  const handleChangeDate = (date) => {
+    setSelectedDate(date);
+  };
+  const handleChangeTime = (time) => {
+    setSelectedTime(time);
+  };
+  const handleChangeDateRange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+  const handleFocusInput = () => {
+    setIsFocusInput(true);
+  };
+  const handleBlurInput = () => {
+    setIsFocusInput(false);
+  };
+  useEffect(() => {
+    const onClickOutside = (e) => {
+      if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
+        setTargetRect(null);
+      }
+    };
+    window.addEventListener("mousedown", onClickOutside);
+    return () => window.removeEventListener("mousedown", onClickOutside);
+  }, []);
+  useEffect(() => {
+    if (datePickerWrapperRef.current) {
+      setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
+      setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
+    }
+  }, [targetRect]);
+  return {
+    selectedDate,
+    selectedTime,
+    startDate,
+    endDate,
+    targetRect,
+    popupHeight,
+    isFocusInput,
+    dateInputRef,
+    datePickerWrapperRef,
+    datePickerRef,
+    handleToggleDatePicker,
+    handleChangeDate,
+    handleChangeTime,
+    handleChangeDateRange,
+    handleFocusInput,
+    handleBlurInput,
+    calculatePositionWithScroll
+  };
+};
+export {
+  useDatePicker
+};