@deepnoid/ui 0.1.155 → 0.1.157

package/dist/components/pagination/pagination.mjs

@@ -1,14 +1,14 @@
 "use client";
 import {
   pagination_default
-} from "../../chunk-67A5TV7C.mjs";
+} from "../../chunk-MGGBCCZL.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-WWSQIDWW.mjs";
+import "../../chunk-BFC4VP3B.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
-import "../../chunk-Q6BXFXQM.mjs";
+import "../../chunk-LBJN5TAP.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-NX4FTFY3.mjs";
+import "../../chunk-VUMESK5D.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";

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

@@ -4,11 +4,16 @@ import * as react from 'react';
 import { ComponentProps } from 'react';
 import { SlotsToClasses } from '../../utils/types.mjs';
 
-interface DatePickerProps extends Omit<ComponentProps<"input">, "size" | "color" | "onChange">, VariantProps<typeof datePickerStyle> {
+type DateRangeValue = {
+    startDate: string;
+    endDate: string;
+};
+type DateValue = string | DateRangeValue;
+interface DatePickerProps extends Omit<ComponentProps<"input">, "size" | "color" | "onChange" | "value">, VariantProps<typeof datePickerStyle> {
     label?: string;
     errorMessage?: string;
-    onChange?: (date: string) => void;
-    value?: string;
+    onChange?: (date: DateValue) => void;
+    value?: DateValue;
     classNames?: SlotsToClasses<DatePickerSlots>;
     placeholder?: string;
     format?: "YYYY-MM-DD" | "MM/DD/YYYY" | "DD/MM/YYYY";
@@ -23,6 +28,8 @@ interface DatePickerProps extends Omit<ComponentProps<"input">, "size" | "color"
     todayTitle: string;
     cancelTitle: string;
     confirmTitle: string;
+    range?: boolean;
+    dualCalendar?: boolean;
 }
 declare const DatePicker: react.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
@@ -47,6 +54,14 @@ declare const datePickerStyle: tailwind_variants.TVReturnType<{
             base: string[];
         };
     };
+    dualCalendar: {
+        true: {
+            calendarWrapper: string[];
+        };
+        false: {
+            calendarWrapper: string[];
+        };
+    };
 }, {
     base: string[];
     calendarWrapper: string[];
@@ -78,6 +93,14 @@ declare const datePickerStyle: tailwind_variants.TVReturnType<{
             base: string[];
         };
     };
+    dualCalendar: {
+        true: {
+            calendarWrapper: string[];
+        };
+        false: {
+            calendarWrapper: string[];
+        };
+    };
 }, {
     base: string[];
     calendarWrapper: string[];
@@ -109,6 +132,14 @@ declare const datePickerStyle: tailwind_variants.TVReturnType<{
             base: string[];
         };
     };
+    dualCalendar: {
+        true: {
+            calendarWrapper: string[];
+        };
+        false: {
+            calendarWrapper: string[];
+        };
+    };
 }, {
     base: string[];
     calendarWrapper: string[];
@@ -122,4 +153,4 @@ declare const datePickerStyle: tailwind_variants.TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 type DatePickerSlots = keyof ReturnType<typeof datePickerStyle>;
 
-export { type DatePickerProps, type DatePickerSlots, datePickerStyle, DatePicker as default };
+export { type DatePickerProps, type DatePickerSlots, type DateRangeValue, type DateValue, datePickerStyle, DatePicker as default };

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

@@ -4,11 +4,16 @@ import * as react from 'react';
 import { ComponentProps } from 'react';
 import { SlotsToClasses } from '../../utils/types.js';
 
-interface DatePickerProps extends Omit<ComponentProps<"input">, "size" | "color" | "onChange">, VariantProps<typeof datePickerStyle> {
+type DateRangeValue = {
+    startDate: string;
+    endDate: string;
+};
+type DateValue = string | DateRangeValue;
+interface DatePickerProps extends Omit<ComponentProps<"input">, "size" | "color" | "onChange" | "value">, VariantProps<typeof datePickerStyle> {
     label?: string;
     errorMessage?: string;
-    onChange?: (date: string) => void;
-    value?: string;
+    onChange?: (date: DateValue) => void;
+    value?: DateValue;
     classNames?: SlotsToClasses<DatePickerSlots>;
     placeholder?: string;
     format?: "YYYY-MM-DD" | "MM/DD/YYYY" | "DD/MM/YYYY";
@@ -23,6 +28,8 @@ interface DatePickerProps extends Omit<ComponentProps<"input">, "size" | "color"
     todayTitle: string;
     cancelTitle: string;
     confirmTitle: string;
+    range?: boolean;
+    dualCalendar?: boolean;
 }
 declare const DatePicker: react.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
@@ -47,6 +54,14 @@ declare const datePickerStyle: tailwind_variants.TVReturnType<{
             base: string[];
         };
     };
+    dualCalendar: {
+        true: {
+            calendarWrapper: string[];
+        };
+        false: {
+            calendarWrapper: string[];
+        };
+    };
 }, {
     base: string[];
     calendarWrapper: string[];
@@ -78,6 +93,14 @@ declare const datePickerStyle: tailwind_variants.TVReturnType<{
             base: string[];
         };
     };
+    dualCalendar: {
+        true: {
+            calendarWrapper: string[];
+        };
+        false: {
+            calendarWrapper: string[];
+        };
+    };
 }, {
     base: string[];
     calendarWrapper: string[];
@@ -109,6 +132,14 @@ declare const datePickerStyle: tailwind_variants.TVReturnType<{
             base: string[];
         };
     };
+    dualCalendar: {
+        true: {
+            calendarWrapper: string[];
+        };
+        false: {
+            calendarWrapper: string[];
+        };
+    };
 }, {
     base: string[];
     calendarWrapper: string[];
@@ -122,4 +153,4 @@ declare const datePickerStyle: tailwind_variants.TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 type DatePickerSlots = keyof ReturnType<typeof datePickerStyle>;
 
-export { type DatePickerProps, type DatePickerSlots, datePickerStyle, DatePicker as default };
+export { type DatePickerProps, type DatePickerSlots, type DateRangeValue, type DateValue, datePickerStyle, DatePicker as default };

package/dist/components/picker/datePicker.js

@@ -792,6 +792,29 @@ var template = {
       }
     );
   },
+  ["home-outline"]: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        width: "21",
+        height: "21",
+        viewBox: "0 0 21 21",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M1.96875 10.4997L9.8035 2.66407C10.1885 2.27995 10.8115 2.27995 11.1956 2.66407L19.0312 10.4997M3.9375 8.53094V17.3903C3.9375 17.9337 4.3785 18.3747 4.92188 18.3747H8.53125V14.1091C8.53125 13.5657 8.97225 13.1247 9.51562 13.1247H11.4844C12.0277 13.1247 12.4688 13.5657 12.4688 14.1091V18.3747H16.0781C16.6215 18.3747 17.0625 17.9337 17.0625 17.3903V8.53094M7.21875 18.3747H14.4375",
+            stroke: "#5B5E62",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
   exclamation: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
@@ -1637,6 +1660,29 @@ var template = {
       }
     );
   },
+  ["chat-outline"]: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        width: "21",
+        height: "21",
+        viewBox: "0 0 21 21",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M7.54688 10.5C7.54688 10.587 7.51231 10.6705 7.45077 10.732C7.38923 10.7936 7.30577 10.8281 7.21875 10.8281C7.13173 10.8281 7.04827 10.7936 6.98673 10.732C6.9252 10.6705 6.89062 10.587 6.89062 10.5C6.89062 10.413 6.9252 10.3295 6.98673 10.268C7.04827 10.2064 7.13173 10.1719 7.21875 10.1719C7.30577 10.1719 7.38923 10.2064 7.45077 10.268C7.51231 10.3295 7.54688 10.413 7.54688 10.5ZM7.54688 10.5H7.21875M10.8281 10.5C10.8281 10.587 10.7936 10.6705 10.732 10.732C10.6705 10.7936 10.587 10.8281 10.5 10.8281C10.413 10.8281 10.3295 10.7936 10.268 10.732C10.2064 10.6705 10.1719 10.587 10.1719 10.5C10.1719 10.413 10.2064 10.3295 10.268 10.268C10.3295 10.2064 10.413 10.1719 10.5 10.1719C10.587 10.1719 10.6705 10.2064 10.732 10.268C10.7936 10.3295 10.8281 10.413 10.8281 10.5ZM10.8281 10.5H10.5M14.1094 10.5C14.1094 10.587 14.0748 10.6705 14.0133 10.732C13.9517 10.7936 13.8683 10.8281 13.7812 10.8281C13.6942 10.8281 13.6108 10.7936 13.5492 10.732C13.4877 10.6705 13.4531 10.587 13.4531 10.5C13.4531 10.413 13.4877 10.3295 13.5492 10.268C13.6108 10.2064 13.6942 10.1719 13.7812 10.1719C13.8683 10.1719 13.9517 10.2064 14.0133 10.268C14.0748 10.3295 14.1094 10.413 14.1094 10.5ZM14.1094 10.5H13.7812M18.375 10.5C18.375 14.4865 14.8487 17.7188 10.5 17.7188C9.74504 17.7197 8.99328 17.6205 8.26437 17.4239C7.23692 18.1465 5.98353 18.4748 4.73375 18.3487C4.5948 18.3353 4.45643 18.3164 4.319 18.2919C4.75026 17.7836 5.04479 17.1738 5.17475 16.52C5.2535 16.1201 5.05838 15.7316 4.76613 15.4472C3.43875 14.1557 2.625 12.4154 2.625 10.5C2.625 6.5135 6.15125 3.28125 10.5 3.28125C14.8487 3.28125 18.375 6.5135 18.375 10.5Z",
+            stroke: "#5B5E62",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
   calendar: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
@@ -1853,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 }) => {
@@ -6607,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 });
@@ -6629,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();
@@ -6662,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();
@@ -6682,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)(() => {
+    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,
@@ -6731,7 +6937,7 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
         ref,
         label,
         value: displayValue,
-        placeholder,
+        placeholder: getPlaceholderText(),
         errorMessage,
         helperMessage,
         size,
@@ -6764,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,
                 {
@@ -6825,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: [],
@@ -6843,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-5MQZ7SDK.mjs";
+} from "../../chunk-T7IJB3N4.mjs";
 import "../../chunk-4DESGO3D.mjs";
 import "../../chunk-FWFEKWWD.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-WWSQIDWW.mjs";
+import "../../chunk-BFC4VP3B.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-Q364C3FI.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-6F4GD2PP.mjs";
-import "../../chunk-WYEUAXY7.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-Q6BXFXQM.mjs";
+import "../../chunk-LBJN5TAP.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-NX4FTFY3.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';