@underverse-ui/underverse 0.1.21 → 0.1.22

package/dist/index.d.cts

@@ -660,7 +660,7 @@ declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & Re
 interface DatePickerProps {
     id?: string;
     value?: Date;
-    onChange: (date: Date) => void;
+    onChange: (date: Date | undefined) => void;
     placeholder?: string;
     className?: string;
     disabled?: boolean;

package/dist/index.d.ts

@@ -660,7 +660,7 @@ declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & Re
 interface DatePickerProps {
     id?: string;
     value?: Date;
-    onChange: (date: Date) => void;
+    onChange: (date: Date | undefined) => void;
     placeholder?: string;
     className?: string;
     disabled?: boolean;

package/dist/index.js

@@ -4417,7 +4417,7 @@ ScrollArea.displayName = "ScrollArea";
 import * as React21 from "react";
 import { useId as useId3 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3 } from "lucide-react";
+import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, X as XIcon } from "lucide-react";
 import { useTranslations as useTranslations5, useLocale } from "next-intl";
 
 // ../../lib/utils/date.ts
@@ -4621,6 +4621,7 @@ var DatePicker = ({
   const [dropdownPosition, setDropdownPosition] = React21.useState(null);
   const [viewDate, setViewDate] = React21.useState(value || /* @__PURE__ */ new Date());
   const triggerRef = React21.useRef(null);
+  const dropdownRef = React21.useRef(null);
   useShadCNAnimations();
   const calculatePosition = React21.useCallback(() => {
     if (!triggerRef.current) return null;
@@ -4646,15 +4647,24 @@ var DatePicker = ({
       window.removeEventListener("scroll", handler, true);
     };
   }, [isOpen, calculatePosition]);
+  React21.useEffect(() => {
+    if (value) {
+      setViewDate(value);
+    } else {
+      setViewDate(/* @__PURE__ */ new Date());
+    }
+  }, [value]);
   React21.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        const dropdown = document.querySelector("[data-datepicker]");
-        if (dropdown && !dropdown.contains(target)) {
-          setIsOpen(false);
-        }
+      const trigger = triggerRef.current;
+      const dropdown = dropdownRef.current;
+      if (!trigger || !dropdown) return;
+      const clickedOutsideTrigger = !trigger.contains(target);
+      const clickedOutsideDropdown = !dropdown.contains(target);
+      if (clickedOutsideTrigger && clickedOutsideDropdown) {
+        setIsOpen(false);
       }
     };
     const handleEscape = (event) => {
@@ -4670,11 +4680,18 @@ var DatePicker = ({
     };
   }, [isOpen]);
   const handleDateSelect = (date) => {
-    onChange(date);
+    let selectedDate;
+    if (value && (value.getHours() !== 0 || value.getMinutes() !== 0 || value.getSeconds() !== 0)) {
+      selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), value.getHours(), value.getMinutes(), value.getSeconds());
+    } else {
+      const now = /* @__PURE__ */ new Date();
+      selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
+    }
+    onChange(selectedDate);
     setIsOpen(false);
   };
   const formatDateDisplay = (date) => {
-    return locale === "vi" /* VI */ ? formatDate(date) : formatDateShort(date);
+    return formatDate(date);
   };
   const getDaysInMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -4735,7 +4752,8 @@ var DatePicker = ({
         top: dropdownPosition?.top || 0,
         left: dropdownPosition?.left || 0,
         width: size === "sm" ? dropdownPosition?.width || 224 : dropdownPosition?.width || 256,
-        zIndex: 9999
+        zIndex: 9999,
+        pointerEvents: "none"
       },
       "data-state": isOpen ? "open" : "closed",
       className: cn(
@@ -4746,11 +4764,13 @@ var DatePicker = ({
       children: /* @__PURE__ */ jsxs23(
         "div",
         {
+          ref: dropdownRef,
           className: cn(
             "rounded-md border bg-popover text-popover-foreground shadow-md",
             "backdrop-blur-sm bg-popover/95 border-border/60",
             size === "sm" ? "p-3 w-56" : "p-4 w-64"
           ),
+          style: { pointerEvents: "auto" },
           children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between mb-4", children: [
               /* @__PURE__ */ jsx27(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ jsx27(ChevronLeft2, { className: "h-4 w-4" }) }),
@@ -4758,7 +4778,20 @@ var DatePicker = ({
               /* @__PURE__ */ jsx27(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ jsx27(ChevronRight3, { className: "h-4 w-4" }) })
             ] }),
             /* @__PURE__ */ jsx27("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ jsx27("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)) }),
-            /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() })
+            /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
+            /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ jsx27(
+              Button_default,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => {
+                  onChange(void 0);
+                  setIsOpen(false);
+                  setViewDate(/* @__PURE__ */ new Date());
+                },
+                children: clearLabel || t("clear")
+              }
+            ) })
           ]
         }
       )
@@ -4816,6 +4849,31 @@ var DatePicker = ({
         ),
         children: [
           /* @__PURE__ */ jsx27("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? formatDateDisplay(value) : placeholder || t("placeholder") }),
+          value && /* @__PURE__ */ jsx27(
+            "span",
+            {
+              role: "button",
+              "aria-label": clearLabel || t("clear"),
+              tabIndex: 0,
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onChange(void 0);
+                setViewDate(/* @__PURE__ */ new Date());
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onChange(void 0);
+                  setViewDate(/* @__PURE__ */ new Date());
+                }
+              },
+              className: "absolute right-8 inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer",
+              style: { width: 20, height: 20 },
+              children: /* @__PURE__ */ jsx27(XIcon, { className: "h-3.5 w-3.5" })
+            }
+          ),
           /* @__PURE__ */ jsx27(Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
         ]
       }