@deepnoid/ui 0.1.156 → 0.1.158

package/dist/components/picker/datePicker.js

@@ -459,8 +459,8 @@ var template = {
           {
             fillRule: "evenodd",
             clipRule: "evenodd",
-            fill: "currentColor",
-            d: "M8.26603 3.51086C8.53733 2.82971 9.46267 2.82971 9.73397 3.51086L10.9948 6.67687L14.2674 6.95135C14.9723 7.01017 15.2582 7.92848 14.721 8.40913L12.2278 10.6398L12.989 13.9746C13.1531 14.6931 12.4052 15.2604 11.8021 14.8759L9 13.0886L6.19794 14.8759C5.59478 15.2604 4.84687 14.6925 5.01099 13.9746L5.77221 10.6398L3.27901 8.40913C2.74185 7.92848 3.02769 7.01017 3.73259 6.95135L7.00519 6.67687L8.26603 3.51086Z"
+            d: "M8.26603 3.51086C8.53733 2.82971 9.46267 2.82971 9.73397 3.51086L10.9948 6.67687L14.2674 6.95135C14.9723 7.01017 15.2582 7.92848 14.721 8.40913L12.2278 10.6398L12.989 13.9746C13.1531 14.6931 12.4052 15.2604 11.8021 14.8759L9 13.0886L6.19794 14.8759C5.59478 15.2604 4.84687 14.6925 5.01099 13.9746L5.77221 10.6398L3.27901 8.40913C2.74185 7.92848 3.02769 7.01017 3.73259 6.95135L7.00519 6.67687L8.26603 3.51086Z",
+            fill: "currentColor"
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
@@ -474,6 +474,41 @@ var template = {
       }
     );
   },
+  halfStar: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: "half-clip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "0", y: "0", width: "9", height: "18" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              fill: "currentColor",
+              d: "M8.26603 3.51086C8.53733 2.82971 9.46267 2.82971 9.73397 3.51086L10.9948 6.67687L14.2674 6.95135C14.9723 7.01017 15.2582 7.92848 14.721 8.40913L12.2278 10.6398L12.989 13.9746C13.1531 14.6931 12.4052 15.2604 11.8021 14.8759L9 13.0886L6.19794 14.8759C5.59478 15.2604 4.84687 14.6925 5.01099 13.9746L5.77221 10.6398L3.27901 8.40913C2.74185 7.92848 3.02769 7.01017 3.73259 6.95135L7.00519 6.67687L8.26603 3.51086Z",
+              clipPath: "url(#half-clip)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M8.65925 3.23957C8.68697 3.16871 8.73417 3.1081 8.79484 3.06544C8.85552 3.02278 8.92693 3 9 3C9.07306 3 9.14448 3.02278 9.20515 3.06544C9.26583 3.1081 9.31303 3.16871 9.34074 3.23957L10.7332 6.74977C10.7593 6.81546 10.8021 6.87233 10.857 6.91413C10.912 6.95594 10.9768 6.98105 11.0445 6.98672L14.6603 7.29028C14.9873 7.31775 15.1196 7.74563 14.8706 7.96883L12.1158 10.4427C12.0644 10.4888 12.026 10.5489 12.005 10.6164C11.984 10.6839 11.981 10.7561 11.9966 10.8252L12.8386 14.5236C12.8555 14.5978 12.8511 14.6756 12.8259 14.7471C12.8006 14.8187 12.7557 14.8808 12.6968 14.9257C12.6379 14.9705 12.5677 14.996 12.495 14.999C12.4222 15.002 12.3503 14.9824 12.2882 14.9425L9.19199 12.9611C9.13418 12.9241 9.06775 12.9045 9 12.9045C8.93225 12.9045 8.86581 12.9241 8.808 12.9611L5.71181 14.9432C5.64973 14.9831 5.57778 15.0027 5.50504 14.9997C5.43231 14.9967 5.36206 14.9712 5.30316 14.9263C5.24426 14.8815 5.19936 14.8194 5.17412 14.7478C5.14889 14.6763 5.14445 14.5985 5.16138 14.5243L6.00341 10.8252C6.01903 10.7561 6.01616 10.6838 5.99511 10.6164C5.97407 10.5489 5.93568 10.4888 5.88415 10.4427L3.12936 7.96883C3.07389 7.91927 3.03369 7.85357 3.01387 7.78005C2.99405 7.70652 2.9955 7.62849 3.01802 7.55583C3.04055 7.48317 3.08314 7.41915 3.1404 7.37188C3.19767 7.3246 3.26703 7.29621 3.33971 7.29028L6.95553 6.98672C7.02319 6.98105 7.08804 6.95594 7.14296 6.91413C7.19787 6.87233 7.24072 6.81546 7.26679 6.74977L8.65925 3.23957Z",
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ]
+      }
+    );
+  },
   avatar: ({ className }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "svg",
@@ -1899,6 +1934,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 +6708,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 +6743,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 +6785,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 +6810,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)(() => {
+    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)(() => {
-    setSelectedDate(value || "");
-    setTempSelectedDate(value || "");
-    if (value) setCurrentDate(new Date(value));
-  }, [value]);
-  const slots = (0, import_react7.useMemo)(() => datePickerStyle({ ...variantProps }), [variantProps]);
+    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 +6972,7 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
         ref,
         label,
         value: displayValue,
-        placeholder,
+        placeholder: getPlaceholderText(),
         errorMessage,
         helperMessage,
         size,
@@ -6810,22 +7005,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 +7056,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 +7072,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-7YMXOYES.mjs";
 import "../../chunk-4DESGO3D.mjs";
 import "../../chunk-FWFEKWWD.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-47MQPUEY.mjs";
+import "../../chunk-SFGFRMWL.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-Q364C3FI.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-UIRHCS6B.mjs";
-import "../../chunk-7RG7CQQM.mjs";
+import "../../chunk-YQYO5RLZ.mjs";
+import "../../chunk-JKYLYL3A.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
-import "../../chunk-Q2YLULZH.mjs";
+import "../../chunk-R7KUEH3N.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-WHU5VP5G.mjs";
+import "../../chunk-DDFJMHBC.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";

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

@@ -1,10 +1,10 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { SlotsToClasses } from '../../utils/types.mjs';
 
-interface DayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof dayStyle> {
+interface DayProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof dayStyle> {
     classNames?: SlotsToClasses<DaySlots>;
     children: ReactNode | string;
 }

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

@@ -1,10 +1,10 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { SlotsToClasses } from '../../utils/types.js';
 
-interface DayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof dayStyle> {
+interface DayProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof dayStyle> {
     classNames?: SlotsToClasses<DaySlots>;
     children: ReactNode | string;
 }

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';