@deepnoid/ui 0.1.156 → 0.1.157

package/dist/components/picker/datePicker.js

@@ -1899,6 +1899,26 @@ var template = {
       }
     );
   },
+  question: ({ className = "text-white" }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M17 2.42969H7C4 2.42969 2 4.42969 2 7.42969V13.4297C2 16.4297 4 18.4297 7 18.4297V20.5597C7 21.3597 7.89 21.8397 8.55 21.3897L13 18.4297H17C20 18.4297 22 16.4297 22 13.4297V7.42969C22 4.42969 20 2.42969 17 2.42969ZM12 14.5997C11.58 14.5997 11.25 14.2597 11.25 13.8497C11.25 13.4397 11.58 13.0997 12 13.0997C12.42 13.0997 12.75 13.4397 12.75 13.8497C12.75 14.2597 12.42 14.5997 12 14.5997ZM13.26 10.4497C12.87 10.7097 12.75 10.8797 12.75 11.1597V11.3697C12.75 11.7797 12.41 12.1197 12 12.1197C11.59 12.1197 11.25 11.7797 11.25 11.3697V11.1597C11.25 9.99969 12.1 9.42969 12.42 9.20969C12.79 8.95969 12.91 8.78969 12.91 8.52969C12.91 8.02969 12.5 7.61969 12 7.61969C11.5 7.61969 11.09 8.02969 11.09 8.52969C11.09 8.93969 10.75 9.27969 10.34 9.27969C9.93 9.27969 9.59 8.93969 9.59 8.52969C9.59 7.19969 10.67 6.11969 12 6.11969C13.33 6.11969 14.41 7.19969 14.41 8.52969C14.41 9.66969 13.57 10.2397 13.26 10.4497Z",
+            fill: "currentColor"
+          }
+        )
+      }
+    );
+  },
   // ----------------------------------- old ---------------------------------
   // ** Status **
   "plus-circle": ({ className, fill }) => {
@@ -6653,12 +6673,25 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
     todayTitle,
     cancelTitle,
     confirmTitle,
+    range = false,
+    dualCalendar = false,
     ...inputProps
   } = { ...props, ...variantProps };
-  const [selectedDate, setSelectedDate] = (0, import_react7.useState)(value || "");
-  const [tempSelectedDate, setTempSelectedDate] = (0, import_react7.useState)(value || "");
+  const [selectedDate, setSelectedDate] = (0, import_react7.useState)(range ? "" : typeof value === "string" ? value || "" : "");
+  const [selectedRange, setSelectedRange] = (0, import_react7.useState)({
+    startDate: range && typeof value === "object" ? (value == null ? void 0 : value.startDate) || "" : "",
+    endDate: range && typeof value === "object" ? (value == null ? void 0 : value.endDate) || "" : ""
+  });
+  const [tempSelectedDate, setTempSelectedDate] = (0, import_react7.useState)(selectedDate);
+  const [tempSelectedRange, setTempSelectedRange] = (0, import_react7.useState)(selectedRange);
+  const [rangeSelection, setRangeSelection] = (0, import_react7.useState)("start");
   const [isPanelOpen, setIsPanelOpen] = (0, import_react7.useState)(false);
-  const [currentDate, setCurrentDate] = (0, import_react7.useState)(tempSelectedDate ? new Date(tempSelectedDate) : /* @__PURE__ */ new Date());
+  const [leftCurrentDate, setLeftCurrentDate] = (0, import_react7.useState)(
+    range && tempSelectedRange.startDate ? new Date(tempSelectedRange.startDate) : tempSelectedDate ? new Date(tempSelectedDate) : /* @__PURE__ */ new Date()
+  );
+  const [rightCurrentDate, setRightCurrentDate] = (0, import_react7.useState)(
+    dualCalendar ? new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1) : /* @__PURE__ */ new Date()
+  );
   const inputWrapperRef = (0, import_react7.useRef)(null);
   const calendarWrapperRef = (0, import_react7.useRef)(null);
   const [panelPos, setPanelPos] = (0, import_react7.useState)({ top: -9999, left: -9999 });
@@ -6675,7 +6708,16 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
         return dateString;
     }
   };
-  const displayValue = (0, import_react7.useMemo)(() => formatDate(selectedDate), [selectedDate, format]);
+  const displayValue = (0, import_react7.useMemo)(() => {
+    if (range) {
+      const start = formatDate(selectedRange.startDate);
+      const end = formatDate(selectedRange.endDate);
+      if (start && end) return `${start} ~ ${end}`;
+      if (start) return start;
+      return "";
+    }
+    return formatDate(selectedDate);
+  }, [selectedDate, selectedRange, format, range]);
   const calculatePosition = (0, import_react7.useCallback)(() => {
     if (inputWrapperRef.current) {
       const rect = inputWrapperRef.current.getBoundingClientRect();
@@ -6708,13 +6750,18 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
   };
   const handleClearDate = (e) => {
     e.preventDefault();
-    setTempSelectedDate("");
+    if (range) {
+      setTempSelectedRange({ startDate: "", endDate: "" });
+      setRangeSelection("start");
+    } else {
+      setTempSelectedDate("");
+    }
   };
   const handleCalendarMouseDown = (e) => {
     e.preventDefault();
     if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
   };
-  const getCalendarDates = (0, import_react7.useCallback)(() => {
+  const getCalendarDates = (0, import_react7.useCallback)((currentDate) => {
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
     const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -6728,47 +6775,160 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
     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) => {
+  }, []);
+  const handleLeftPrevMonth = () => {
+    const newLeftDate = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
+    setLeftCurrentDate(newLeftDate);
+    if (dualCalendar) {
+      setRightCurrentDate(new Date(newLeftDate.getFullYear(), newLeftDate.getMonth() + 1));
+    }
+  };
+  const handleLeftNextMonth = () => {
+    const newLeftDate = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1);
+    setLeftCurrentDate(newLeftDate);
+    if (dualCalendar) {
+      setRightCurrentDate(new Date(newLeftDate.getFullYear(), newLeftDate.getMonth() + 1));
+    }
+  };
+  const handleRightNextMonth = () => {
+    if (!dualCalendar) return;
+    const newRightDate = new Date(rightCurrentDate.getFullYear(), rightCurrentDate.getMonth() + 1);
+    setRightCurrentDate(newRightDate);
+    setLeftCurrentDate(new Date(newRightDate.getFullYear(), newRightDate.getMonth() - 1));
+  };
+  const handleDateSelect = (date, isCurrentMonth, currentDate) => {
     if (!isCurrentMonth) return;
     const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
     const formatted = formatDateToString(selected);
-    setTempSelectedDate(formatted);
+    if (range) {
+      if (rangeSelection === "start") {
+        setTempSelectedRange({ startDate: formatted, endDate: "" });
+        setRangeSelection("end");
+      } else {
+        const startDate = new Date(tempSelectedRange.startDate);
+        if (selected >= startDate) {
+          setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
+        } else {
+          setTempSelectedRange({ startDate: formatted, endDate: tempSelectedRange.startDate });
+        }
+      }
+    } else {
+      setTempSelectedDate(formatted);
+    }
   };
   const handleSetToday = () => {
     const today = /* @__PURE__ */ new Date();
     const formatted = formatDateToString(today);
-    setCurrentDate(today);
-    setTempSelectedDate(formatted);
+    if (range) {
+      if (rangeSelection === "start") {
+        setTempSelectedRange({ startDate: formatted, endDate: "" });
+        setRangeSelection("end");
+      } else {
+        const startDate = new Date(tempSelectedRange.startDate);
+        if (today >= startDate) {
+          setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
+        } else {
+          setTempSelectedRange({ startDate: formatted, endDate: tempSelectedRange.startDate });
+        }
+      }
+    } else {
+      setLeftCurrentDate(today);
+      if (dualCalendar) setRightCurrentDate(new Date(today.getFullYear(), today.getMonth() + 1));
+      setTempSelectedDate(formatted);
+    }
   };
   const handleConfirmDate = () => {
-    setSelectedDate(tempSelectedDate);
-    onChange == null ? void 0 : onChange(tempSelectedDate);
+    if (range) {
+      setSelectedRange(tempSelectedRange);
+      onChange == null ? void 0 : onChange(tempSelectedRange);
+    } else {
+      setSelectedDate(tempSelectedDate);
+      onChange == null ? void 0 : onChange(tempSelectedDate);
+    }
     setIsPanelOpen(false);
   };
   const handleResetDate = () => {
-    setTempSelectedDate(selectedDate);
+    if (range) {
+      setTempSelectedRange(selectedRange);
+      setRangeSelection("start");
+    } else {
+      setTempSelectedDate(selectedDate);
+    }
     setIsPanelOpen(false);
   };
   const getDayProps = (0, import_react7.useCallback)(
-    (dateObj) => {
+    (dateObj, currentDate) => {
       const today = /* @__PURE__ */ new Date();
       const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
-      const formatted = tempSelectedDate ? formatStringToDate(tempSelectedDate) : null;
-      const isSelected = (formatted == null ? void 0 : formatted.getDate()) === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear();
-      return dateObj.currentMonth && isSelected ? "selected" : dateObj.currentMonth && isToday ? "today" : !dateObj.currentMonth ? "disabled" : "default";
+      if (range) {
+        const startFormatted = tempSelectedRange.startDate ? formatStringToDate(tempSelectedRange.startDate) : null;
+        const endFormatted = tempSelectedRange.endDate ? formatStringToDate(tempSelectedRange.endDate) : null;
+        const currentFormatted = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date);
+        const isStartSelected = startFormatted && startFormatted.getDate() === dateObj.date && startFormatted.getMonth() === currentDate.getMonth() && startFormatted.getFullYear() === currentDate.getFullYear();
+        const isEndSelected = endFormatted && endFormatted.getDate() === dateObj.date && endFormatted.getMonth() === currentDate.getMonth() && endFormatted.getFullYear() === currentDate.getFullYear();
+        const isInRange = startFormatted && endFormatted && currentFormatted > startFormatted && currentFormatted < endFormatted;
+        if (dateObj.currentMonth && (isStartSelected || isEndSelected)) return "selected";
+        if (dateObj.currentMonth && isInRange) return "period";
+        if (dateObj.currentMonth && isToday) return "today";
+        if (!dateObj.currentMonth) return "disabled";
+        return "default";
+      } else {
+        const formatted = tempSelectedDate ? formatStringToDate(tempSelectedDate) : null;
+        const isSelected = (formatted == null ? void 0 : formatted.getDate()) === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear();
+        return dateObj.currentMonth && isSelected ? "selected" : dateObj.currentMonth && isToday ? "today" : !dateObj.currentMonth ? "disabled" : "default";
+      }
     },
-    [tempSelectedDate, currentDate]
+    [tempSelectedDate, tempSelectedRange, range]
   );
+  const getPlaceholderText = () => {
+    return placeholder;
+  };
   (0, import_react7.useEffect)(() => {
-    setSelectedDate(value || "");
-    setTempSelectedDate(value || "");
-    if (value) setCurrentDate(new Date(value));
-  }, [value]);
-  const slots = (0, import_react7.useMemo)(() => datePickerStyle({ ...variantProps }), [variantProps]);
+    if (range && typeof value === "object") {
+      setSelectedRange(value || { startDate: "", endDate: "" });
+      setTempSelectedRange(value || { startDate: "", endDate: "" });
+      if (value == null ? void 0 : value.startDate) setLeftCurrentDate(new Date(value.startDate));
+    } else if (!range && typeof value === "string") {
+      setSelectedDate(value || "");
+      setTempSelectedDate(value || "");
+      if (value) setLeftCurrentDate(new Date(value));
+    }
+  }, [value, range]);
+  (0, import_react7.useEffect)(() => {
+    if (dualCalendar) {
+      setRightCurrentDate(new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1));
+    }
+  }, [leftCurrentDate, dualCalendar]);
+  const slots = (0, import_react7.useMemo)(() => datePickerStyle({ ...variantProps, dualCalendar }), [variantProps, dualCalendar]);
   const endContent = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
+  const renderCalendar = (currentDate, isLeft) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-[5px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: dualCalendar ? isLeft ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handleLeftPrevMonth }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-8" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleRightNextMonth })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handleLeftPrevMonth }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleLeftNextMonth })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid grid-cols-7 gap-y-[5px] text-center", children: getCalendarDates(currentDate).map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.Fragment, { children: week.map((dateObj, index) => {
+      const dayVariant = getDayProps(dateObj, currentDate);
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        day_default,
+        {
+          variant: dayVariant,
+          onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth, currentDate),
+          children: dateObj.date
+        },
+        index
+      );
+    }) }, weekIndex)) })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: inputWrapperRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onClick: handleFocusInput, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       input_default,
@@ -6777,7 +6937,7 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
         ref,
         label,
         value: displayValue,
-        placeholder,
+        placeholder: getPlaceholderText(),
         errorMessage,
         helperMessage,
         size,
@@ -6810,22 +6970,12 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
           style: { position: "absolute", top: panelPos.top, left: panelPos.left, zIndex: 1e3 },
           onMouseDown: handleCalendarMouseDown,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handlePrevMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleNextMonth })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: dualCalendar ? "flex gap-[10px]" : "flex", children: [
+              renderCalendar(leftCurrentDate, true),
+              dualCalendar && range && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bg-neutral-soft w-px self-stretch" }),
+              dualCalendar && renderCalendar(rightCurrentDate, false)
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center", children: getCalendarDates().map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.Fragment, { children: week.map((dateObj, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              day_default,
-              {
-                variant: getDayProps(dateObj),
-                onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth),
-                children: dateObj.date
-              },
-              index
-            )) }, weekIndex)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between px-[10px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex h-[30px] justify-between px-[10px]", children: [
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 text_button_default,
                 {
@@ -6871,13 +7021,11 @@ var datePickerStyle = tv({
       "rounded-xl",
       "bg-body-background",
       "shadow-drop-xl",
-      "gap-[5px]",
       "overflow-auto",
-      "w-[300px]",
       "select-none",
       "p-[10px]"
     ],
-    calendarHead: ["calendar-header", "flex", "items-center", "justify-between", "h-[40px]"],
+    calendarHead: ["calendar-header", "flex", "items-center", "justify-between", "h-[40px]", "w-[280px]"],
     inputBase: [],
     inputWrapper: [],
     input: [],
@@ -6889,13 +7037,19 @@ var datePickerStyle = tv({
     color: { primary: {}, secondary: {} },
     size: { sm: {}, md: {}, lg: {}, xl: {} },
     full: { true: { base: ["w-full"] } },
-    disabled: { true: { base: ["pointer-events-none"] } }
+    disabled: { true: { base: ["pointer-events-none"] } },
+    dualCalendar: {
+      true: { calendarWrapper: ["w-fit", "gap-[10px]"] },
+      false: { calendarWrapper: ["w-[300px]", "gap-[5px]"] }
+    }
   },
   defaultVariants: {
     color: "primary",
     size: "md",
     full: false,
-    disabled: false
+    disabled: false,
+    range: false,
+    dualCalendar: false
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/picker/datePicker.mjs

@@ -2,23 +2,23 @@
 import {
   datePickerStyle,
   datePicker_default
-} from "../../chunk-TCURFCQ2.mjs";
+} from "../../chunk-T7IJB3N4.mjs";
 import "../../chunk-4DESGO3D.mjs";
 import "../../chunk-FWFEKWWD.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-47MQPUEY.mjs";
+import "../../chunk-BFC4VP3B.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-Q364C3FI.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-UIRHCS6B.mjs";
-import "../../chunk-7RG7CQQM.mjs";
+import "../../chunk-73NBUI4Y.mjs";
+import "../../chunk-DSEF7GGB.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
-import "../../chunk-Q2YLULZH.mjs";
+import "../../chunk-LBJN5TAP.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-WHU5VP5G.mjs";
+import "../../chunk-VUMESK5D.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";

package/dist/components/picker/index.d.mts

@@ -1,5 +1,5 @@
 export { default as Day } from './day.mjs';
-export { default as DatePicker, DatePickerProps } from './datePicker.mjs';
+export { default as DatePicker, DatePickerProps, DateRangeValue, DateValue } from './datePicker.mjs';
 export { default as TimePicker, TimePickerProps } from './timePicker.mjs';
 import 'tailwind-variants';
 import 'react';

package/dist/components/picker/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Day } from './day.js';
-export { default as DatePicker, DatePickerProps } from './datePicker.js';
+export { default as DatePicker, DatePickerProps, DateRangeValue, DateValue } from './datePicker.js';
 export { default as TimePicker, TimePickerProps } from './timePicker.js';
 import 'tailwind-variants';
 import 'react';