@deepnoid/ui 0.1.202 → 0.1.204

package/dist/{chunk-2EUKWA4W.mjs → chunk-AUGYJPCS.mjs}

@@ -66,6 +66,8 @@ var DatePicker = forwardRef((originalProps, ref) => {
     confirmTitle,
     range = false,
     dualCalendar = false,
+    disabledDates,
+    enabledDates,
     ...inputProps
   } = { ...props, ...variantProps };
   const [selectedDate, setSelectedDate] = useState(range ? "" : typeof value === "string" ? value || "" : "");
@@ -187,29 +189,18 @@ var DatePicker = forwardRef((originalProps, ref) => {
     for (let i = 0; i < dates.length; i += 7) weeks.push(dates.slice(i, i + 7));
     return weeks;
   }, []);
-  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 isDateDisabled = useCallback(
+    (date) => {
+      if (enabledDates) return !enabledDates(date);
+      if (disabledDates) return disabledDates(date);
+      return false;
+    },
+    [disabledDates, enabledDates]
+  );
   const handleDateSelect = (date, isCurrentMonth, currentDate) => {
     if (!isCurrentMonth) return;
     const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
+    if (isDateDisabled(selected)) return;
     const formatted = formatDateToString(selected);
     if (range) {
       if (rangeSelection === "start") {
@@ -220,7 +211,10 @@ var DatePicker = forwardRef((originalProps, ref) => {
         if (selected >= startDate) {
           setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
         } else {
-          setTempSelectedRange({ startDate: formatted, endDate: tempSelectedRange.startDate });
+          setTempSelectedRange({
+            startDate: formatted,
+            endDate: tempSelectedRange.startDate
+          });
         }
       }
     } else {
@@ -229,6 +223,7 @@ var DatePicker = forwardRef((originalProps, ref) => {
   };
   const handleSetToday = () => {
     const today = /* @__PURE__ */ new Date();
+    if (isDateDisabled(today)) return;
     const formatted = formatDateToString(today);
     if (range) {
       if (rangeSelection === "start") {
@@ -239,7 +234,10 @@ var DatePicker = forwardRef((originalProps, ref) => {
         if (today >= startDate) {
           setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
         } else {
-          setTempSelectedRange({ startDate: formatted, endDate: tempSelectedRange.startDate });
+          setTempSelectedRange({
+            startDate: formatted,
+            endDate: tempSelectedRange.startDate
+          });
         }
       }
     } else {
@@ -251,11 +249,11 @@ var DatePicker = forwardRef((originalProps, ref) => {
   const handleConfirmDate = () => {
     if (isConfirmDisabled) return;
     if (range) {
-      setSelectedRange(tempSelectedRange);
       onChange == null ? void 0 : onChange(tempSelectedRange);
+      setSelectedRange(tempSelectedRange);
     } else {
-      setSelectedDate(tempSelectedDate);
       onChange == null ? void 0 : onChange(tempSelectedDate);
+      setSelectedDate(tempSelectedDate);
     }
     setIsPanelOpen(false);
   };
@@ -270,31 +268,29 @@ var DatePicker = forwardRef((originalProps, ref) => {
   };
   const getDayProps = useCallback(
     (dateObj, currentDate) => {
+      const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date);
+      if (isDateDisabled(date)) return "disabled";
       const today = /* @__PURE__ */ new Date();
       const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
       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";
+        const start = tempSelectedRange.startDate ? formatStringToDate(tempSelectedRange.startDate) : null;
+        const end = tempSelectedRange.endDate ? formatStringToDate(tempSelectedRange.endDate) : null;
+        const current = date;
+        const isStart = start && start.getFullYear() === current.getFullYear() && start.getMonth() === current.getMonth() && start.getDate() === current.getDate();
+        const isEnd = end && end.getFullYear() === current.getFullYear() && end.getMonth() === current.getMonth() && end.getDate() === current.getDate();
+        const isInRange = start && end && current > start && current < end;
+        if (isStart || isEnd) return "selected";
+        if (isInRange) return "period";
+        if (isToday) return "today";
+        return dateObj.currentMonth ? "default" : "disabled";
       }
+      const selected = tempSelectedDate ? formatStringToDate(tempSelectedDate) : null;
+      const isSelected = selected && selected.getFullYear() === date.getFullYear() && selected.getMonth() === date.getMonth() && selected.getDate() === date.getDate();
+      return isSelected ? "selected" : isToday ? "today" : dateObj.currentMonth ? "default" : "disabled";
     },
-    [tempSelectedDate, tempSelectedRange, range]
+    [tempSelectedDate, tempSelectedRange, range, isDateDisabled]
   );
-  const getPlaceholderText = () => {
-    return placeholder;
-  };
+  const getPlaceholderText = () => placeholder;
   useEffect(() => {
     if (range && typeof value === "object") {
       setSelectedRange(value || { startDate: "", endDate: "" });
@@ -315,17 +311,63 @@ var DatePicker = forwardRef((originalProps, ref) => {
   const endContent = /* @__PURE__ */ jsx(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
   const renderCalendar = (currentDate, isLeft) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[5px]", children: [
     /* @__PURE__ */ jsx("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: dualCalendar ? isLeft ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handleLeftPrevMonth }),
+      /* @__PURE__ */ jsx(
+        icon_button_default,
+        {
+          name: "left",
+          variant: "soft",
+          color: "neutral",
+          onClick: () => {
+            const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
+            setLeftCurrentDate(newLeft);
+            setRightCurrentDate(new Date(newLeft.getFullYear(), newLeft.getMonth() + 1));
+          }
+        }
+      ),
       /* @__PURE__ */ jsx("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
       /* @__PURE__ */ jsx("div", { className: "w-8" })
     ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
       /* @__PURE__ */ jsx("div", { className: "w-8" }),
       /* @__PURE__ */ jsx("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
-      /* @__PURE__ */ jsx(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleRightNextMonth })
+      /* @__PURE__ */ jsx(
+        icon_button_default,
+        {
+          name: "right",
+          variant: "soft",
+          color: "neutral",
+          onClick: () => {
+            const newRight = new Date(rightCurrentDate.getFullYear(), rightCurrentDate.getMonth() + 1);
+            setRightCurrentDate(newRight);
+            setLeftCurrentDate(new Date(newRight.getFullYear(), newRight.getMonth() - 1));
+          }
+        }
+      )
     ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handleLeftPrevMonth }),
+      /* @__PURE__ */ jsx(
+        icon_button_default,
+        {
+          name: "left",
+          variant: "soft",
+          color: "neutral",
+          onClick: () => {
+            const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
+            setLeftCurrentDate(newLeft);
+          }
+        }
+      ),
       /* @__PURE__ */ jsx("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
-      /* @__PURE__ */ jsx(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleLeftNextMonth })
+      /* @__PURE__ */ jsx(
+        icon_button_default,
+        {
+          name: "right",
+          variant: "soft",
+          color: "neutral",
+          onClick: () => {
+            const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1);
+            setLeftCurrentDate(newLeft);
+          }
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-y-[5px] text-center", children: getCalendarDates(currentDate).map((week, weekIndex) => /* @__PURE__ */ jsx(Fragment, { children: week.map((dateObj, index) => {

package/dist/{chunk-KYWCJIXI.mjs → chunk-W3V4SZV5.mjs}

@@ -16,12 +16,12 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 
 // src/components/table/table-head.tsx
-import { isValidElement, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/components/table/table.tsx
 import {
   forwardRef,
-  useEffect as useEffect2,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useState as useState2
@@ -29,7 +29,7 @@ import {
 import { tv } from "tailwind-variants";
 
 // src/components/table/table-body.tsx
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function TableCell({
   row,
@@ -41,53 +41,31 @@ function TableCell({
 }) {
   var _a, _b;
   const value = row[column.field];
-  const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+  const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
   const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
+  const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
   const tdRef = useRef(null);
   const [showTitle, setShowTitle] = useState(false);
-  const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
-  const checkOverflow = (el) => {
-    if (el.scrollWidth > el.clientWidth) {
-      return true;
-    }
-    const children = Array.from(el.children);
-    for (const child of children) {
-      if (child.scrollWidth > child.clientWidth) {
-        return true;
-      }
-    }
-    return false;
-  };
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (tdRef.current && isTextContent) {
-      setTimeout(() => {
-        if (tdRef.current) {
-          setShowTitle(checkOverflow(tdRef.current));
-        }
-      }, 0);
+      const el = tdRef.current;
+      setShowTitle(el.scrollWidth > el.clientWidth);
     }
   }, [content, isTextContent]);
   return /* @__PURE__ */ jsx(
     "td",
     {
       ref: tdRef,
-      className: clsx(
-        slots.td(),
-        classNames == null ? void 0 : classNames.td,
-        column.className,
-        isTextContent && "truncate",
-        isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
-      ),
+      className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
       style: {
         ...getCellStyle(column),
         maxWidth: column.width || "150px",
         textAlign: column.align || "center",
-        ...!isTextContent && {
-          overflow: "visible",
-          whiteSpace: "normal"
-        }
+        whiteSpace: isTextContent ? "nowrap" : "normal",
+        overflow: isTextContent ? "hidden" : "visible",
+        textOverflow: isTextContent ? "ellipsis" : void 0
       },
-      title: showTitle ? String(((_b = value == null ? void 0 : value.props) == null ? void 0 : _b.children) || content || "") : void 0,
+      title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
       children: content
     },
     `${row.id}-${column.field}-${colIdx}-${rowIndex}`
@@ -194,10 +172,10 @@ var Table = forwardRef((originalProps, ref) => {
     const checkboxWidth = rowCheckbox ? 40 : 0;
     return columnsWidth + checkboxWidth;
   }, [columns, rowCheckbox]);
-  useEffect2(() => {
+  useEffect(() => {
     onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
   }, [checkedRowIds]);
-  useEffect2(() => {
+  useEffect(() => {
     const currentRowIds = new Set(rows.map((row) => row.id));
     const ids = Array.from(checkedRowIds);
     const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
@@ -561,37 +539,13 @@ function TableHeaderCell({
 }) {
   const thRef = useRef2(null);
   const [showTitle, setShowTitle] = useState3(false);
-  const checkOverflow = (el) => {
-    if (el.scrollWidth > el.clientWidth) {
-      return true;
-    }
-    const children = Array.from(el.children);
-    for (const child of children) {
-      if (child.scrollWidth > child.clientWidth) {
-        return true;
-      }
-    }
-    return false;
-  };
-  const extractTextFromContent = (node) => {
-    if (typeof node === "string" || typeof node === "number") {
-      return String(node);
-    }
-    if (isValidElement(node)) {
-      return String(node.props.children || "");
-    }
-    return "";
-  };
-  useEffect3(() => {
-    if (thRef.current && !isCheckbox) {
-      setTimeout(() => {
-        if (thRef.current) {
-          setShowTitle(checkOverflow(thRef.current));
-        }
-      }, 0);
+  useLayoutEffect2(() => {
+    if (!isCheckbox && thRef.current) {
+      const el = thRef.current;
+      setShowTitle(el.scrollWidth > el.clientWidth);
     }
   }, [content, isCheckbox]);
-  const titleText = !isCheckbox && showTitle ? extractTextFromContent(content) : void 0;
+  const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
   return /* @__PURE__ */ jsx3(
     "th",
     {
@@ -604,7 +558,10 @@ function TableHeaderCell({
         flexShrink: 0,
         flexGrow: 0,
         boxSizing: "border-box"
-      } : column ? { ...getCellStyle(column), textAlign: "center" } : void 0,
+      } : column ? {
+        ...getCellStyle(column),
+        textAlign: "center"
+      } : void 0,
       title: titleText,
       children: content
     }
@@ -613,7 +570,6 @@ function TableHeaderCell({
 var TableHead = ({
   slots,
   columns,
-  color,
   size,
   rowCheckbox = false,
   hasCheckedRows,

package/dist/components/list/index.mjs

@@ -1,11 +1,11 @@
 "use client";
 import "../../chunk-7MVEAQ7Z.mjs";
-import {
-  listItem_default
-} from "../../chunk-K3M3QEEV.mjs";
 import {
   list_default
 } from "../../chunk-NGRGAY42.mjs";
+import {
+  listItem_default
+} from "../../chunk-K3M3QEEV.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-E3G5QXSH.mjs";

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

@@ -31,6 +31,8 @@ interface DatePickerProps extends Omit<ComponentProps<"input">, "size" | "color"
     confirmTitle: string;
     range?: boolean;
     dualCalendar?: boolean;
+    disabledDates?: (date: Date) => boolean;
+    enabledDates?: (date: Date) => boolean;
 }
 declare const DatePicker: react.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 

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

@@ -31,6 +31,8 @@ interface DatePickerProps extends Omit<ComponentProps<"input">, "size" | "color"
     confirmTitle: string;
     range?: boolean;
     dualCalendar?: boolean;
+    disabledDates?: (date: Date) => boolean;
+    enabledDates?: (date: Date) => boolean;
 }
 declare const DatePicker: react.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 

package/dist/components/picker/datePicker.js

@@ -6711,6 +6711,8 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
     confirmTitle,
     range = false,
     dualCalendar = false,
+    disabledDates,
+    enabledDates,
     ...inputProps
   } = { ...props, ...variantProps };
   const [selectedDate, setSelectedDate] = (0, import_react7.useState)(range ? "" : typeof value === "string" ? value || "" : "");
@@ -6832,29 +6834,18 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
     for (let i = 0; i < dates.length; i += 7) weeks.push(dates.slice(i, i + 7));
     return weeks;
   }, []);
-  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 isDateDisabled = (0, import_react7.useCallback)(
+    (date) => {
+      if (enabledDates) return !enabledDates(date);
+      if (disabledDates) return disabledDates(date);
+      return false;
+    },
+    [disabledDates, enabledDates]
+  );
   const handleDateSelect = (date, isCurrentMonth, currentDate) => {
     if (!isCurrentMonth) return;
     const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
+    if (isDateDisabled(selected)) return;
     const formatted = formatDateToString(selected);
     if (range) {
       if (rangeSelection === "start") {
@@ -6865,7 +6856,10 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
         if (selected >= startDate) {
           setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
         } else {
-          setTempSelectedRange({ startDate: formatted, endDate: tempSelectedRange.startDate });
+          setTempSelectedRange({
+            startDate: formatted,
+            endDate: tempSelectedRange.startDate
+          });
         }
       }
     } else {
@@ -6874,6 +6868,7 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
   };
   const handleSetToday = () => {
     const today = /* @__PURE__ */ new Date();
+    if (isDateDisabled(today)) return;
     const formatted = formatDateToString(today);
     if (range) {
       if (rangeSelection === "start") {
@@ -6884,7 +6879,10 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
         if (today >= startDate) {
           setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
         } else {
-          setTempSelectedRange({ startDate: formatted, endDate: tempSelectedRange.startDate });
+          setTempSelectedRange({
+            startDate: formatted,
+            endDate: tempSelectedRange.startDate
+          });
         }
       }
     } else {
@@ -6896,11 +6894,11 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
   const handleConfirmDate = () => {
     if (isConfirmDisabled) return;
     if (range) {
-      setSelectedRange(tempSelectedRange);
       onChange == null ? void 0 : onChange(tempSelectedRange);
+      setSelectedRange(tempSelectedRange);
     } else {
-      setSelectedDate(tempSelectedDate);
       onChange == null ? void 0 : onChange(tempSelectedDate);
+      setSelectedDate(tempSelectedDate);
     }
     setIsPanelOpen(false);
   };
@@ -6915,31 +6913,29 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
   };
   const getDayProps = (0, import_react7.useCallback)(
     (dateObj, currentDate) => {
+      const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date);
+      if (isDateDisabled(date)) return "disabled";
       const today = /* @__PURE__ */ new Date();
       const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
       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";
-      }
+        const start = tempSelectedRange.startDate ? formatStringToDate(tempSelectedRange.startDate) : null;
+        const end = tempSelectedRange.endDate ? formatStringToDate(tempSelectedRange.endDate) : null;
+        const current = date;
+        const isStart = start && start.getFullYear() === current.getFullYear() && start.getMonth() === current.getMonth() && start.getDate() === current.getDate();
+        const isEnd = end && end.getFullYear() === current.getFullYear() && end.getMonth() === current.getMonth() && end.getDate() === current.getDate();
+        const isInRange = start && end && current > start && current < end;
+        if (isStart || isEnd) return "selected";
+        if (isInRange) return "period";
+        if (isToday) return "today";
+        return dateObj.currentMonth ? "default" : "disabled";
+      }
+      const selected = tempSelectedDate ? formatStringToDate(tempSelectedDate) : null;
+      const isSelected = selected && selected.getFullYear() === date.getFullYear() && selected.getMonth() === date.getMonth() && selected.getDate() === date.getDate();
+      return isSelected ? "selected" : isToday ? "today" : dateObj.currentMonth ? "default" : "disabled";
     },
-    [tempSelectedDate, tempSelectedRange, range]
+    [tempSelectedDate, tempSelectedRange, range, isDateDisabled]
   );
-  const getPlaceholderText = () => {
-    return placeholder;
-  };
+  const getPlaceholderText = () => placeholder;
   (0, import_react7.useEffect)(() => {
     if (range && typeof value === "object") {
       setSelectedRange(value || { startDate: "", endDate: "" });
@@ -6960,17 +6956,63 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
   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)(
+        icon_button_default,
+        {
+          name: "left",
+          variant: "soft",
+          color: "neutral",
+          onClick: () => {
+            const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
+            setLeftCurrentDate(newLeft);
+            setRightCurrentDate(new Date(newLeft.getFullYear(), newLeft.getMonth() + 1));
+          }
+        }
+      ),
       /* @__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.jsx)(
+        icon_button_default,
+        {
+          name: "right",
+          variant: "soft",
+          color: "neutral",
+          onClick: () => {
+            const newRight = new Date(rightCurrentDate.getFullYear(), rightCurrentDate.getMonth() + 1);
+            setRightCurrentDate(newRight);
+            setLeftCurrentDate(new Date(newRight.getFullYear(), newRight.getMonth() - 1));
+          }
+        }
+      )
     ] }) : /* @__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)(
+        icon_button_default,
+        {
+          name: "left",
+          variant: "soft",
+          color: "neutral",
+          onClick: () => {
+            const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
+            setLeftCurrentDate(newLeft);
+          }
+        }
+      ),
       /* @__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)(
+        icon_button_default,
+        {
+          name: "right",
+          variant: "soft",
+          color: "neutral",
+          onClick: () => {
+            const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1);
+            setLeftCurrentDate(newLeft);
+          }
+        }
+      )
     ] }) }),
     /* @__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) => {

package/dist/components/picker/datePicker.mjs

@@ -2,7 +2,7 @@
 import {
   datePickerStyle,
   datePicker_default
-} from "../../chunk-2EUKWA4W.mjs";
+} from "../../chunk-AUGYJPCS.mjs";
 import "../../chunk-FWFEKWWD.mjs";
 import "../../chunk-XZYQFBCT.mjs";
 import "../../chunk-2GCSFWHD.mjs";