@underverse-ui/underverse 0.2.90 → 0.2.92

package/dist/index.cjs

@@ -5789,7 +5789,9 @@ var DatePicker = ({
   todayLabel,
   clearLabel,
   weekdayLabels,
-  disablePastDates = false
+  disablePastDates = false,
+  minDate,
+  maxDate
 }) => {
   const t = useTranslations("DatePicker");
   const locale = useLocale();
@@ -5799,6 +5801,27 @@ var DatePicker = ({
   const triggerRef = React23.useRef(null);
   const wheelContainerRef = React23.useRef(null);
   const wheelDeltaRef = React23.useRef(0);
+  const normalizeToLocalDay = React23.useCallback((date) => {
+    if (!date) return null;
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }, []);
+  const minDay = React23.useMemo(() => normalizeToLocalDay(minDate), [minDate, normalizeToLocalDay]);
+  const maxDay = React23.useMemo(() => normalizeToLocalDay(maxDate), [maxDate, normalizeToLocalDay]);
+  const isDateDisabled = React23.useCallback(
+    (date) => {
+      const day = normalizeToLocalDay(date);
+      if (!day) return false;
+      if (disablePastDates) {
+        const today = /* @__PURE__ */ new Date();
+        today.setHours(0, 0, 0, 0);
+        if (day < today) return true;
+      }
+      if (minDay && day < minDay) return true;
+      if (maxDay && day > maxDay) return true;
+      return false;
+    },
+    [disablePastDates, maxDay, minDay, normalizeToLocalDay]
+  );
   useShadCNAnimations();
   React23.useEffect(() => {
     if (value) {
@@ -5883,21 +5906,19 @@ var DatePicker = ({
     for (let i = 0; i < firstDayOfMonth; i++) {
       days.push(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: size === "sm" ? "w-7 h-7" : "w-8 h-8" }, `empty-${i}`));
     }
-    const today = /* @__PURE__ */ new Date();
-    today.setHours(0, 0, 0, 0);
     for (let day = 1; day <= daysInMonth; day++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
       const isSelected = value && date.getDate() === value.getDate() && date.getMonth() === value.getMonth() && date.getFullYear() === value.getFullYear();
       const isToday2 = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
-      const isPastDate = disablePastDates && date < today;
+      const isDisabled = isDateDisabled(date);
       const totalDaysFromStart = firstDayOfMonth + day - 1;
       const rowIndex = Math.floor(totalDaysFromStart / 7);
       days.push(
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "button",
           {
-            onClick: () => !isPastDate && handleDateSelect(date),
-            disabled: isPastDate,
+            onClick: () => !isDisabled && handleDateSelect(date),
+            disabled: isDisabled,
             style: {
               animationDelay: isOpen ? `${rowIndex * 40}ms` : "0ms"
             },
@@ -5905,8 +5926,8 @@ var DatePicker = ({
               size === "sm" ? "w-7 h-7 text-[12px]" : "w-8 h-8 text-sm",
               "datepicker-day rounded-lg focus:outline-none relative cursor-pointer",
               "transition-all duration-200 font-medium",
-              isPastDate && "opacity-30 cursor-not-allowed text-muted-foreground",
-              isSelected ? "bg-linear-to-br from-primary to-primary/80 text-primary-foreground font-bold shadow-lg shadow-primary/30 scale-110 z-10 hover:from-primary hover:to-primary/70" : !isPastDate && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 focus:bg-accent focus:text-accent-foreground",
+              isDisabled && "opacity-30 cursor-not-allowed text-muted-foreground",
+              isSelected ? "bg-linear-to-br from-primary to-primary/80 text-primary-foreground font-bold shadow-lg shadow-primary/30 scale-110 z-10 hover:from-primary hover:to-primary/70" : !isDisabled && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 focus:bg-accent focus:text-accent-foreground",
               isToday2 && !isSelected && "bg-primary/15 text-primary font-bold ring-2 ring-primary/30"
             ),
             children: [
@@ -6054,15 +6075,18 @@ var DatePicker = ({
           type: "button",
           onClick: () => {
             const today = /* @__PURE__ */ new Date();
+            if (isDateDisabled(today)) return;
             handleDateSelect(today);
           },
+          disabled: isDateDisabled(/* @__PURE__ */ new Date()),
           className: cn(
             "flex-1 font-semibold rounded-xl",
             "bg-linear-to-r from-primary/10 to-primary/5 border border-primary/30",
             "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
             "transition-all duration-300 flex items-center justify-center",
             "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10",
-            size === "sm" ? "px-2 py-1 text-[10px] gap-1" : "px-3 py-2 text-xs gap-2"
+            size === "sm" ? "px-2 py-1 text-[10px] gap-1" : "px-3 py-2 text-xs gap-2",
+            isDateDisabled(/* @__PURE__ */ new Date()) && "opacity-50 cursor-not-allowed hover:scale-100 active:scale-100"
           ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Sparkles, { className: size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5" }),
@@ -6221,7 +6245,7 @@ var DatePicker = ({
     )
   ] });
 };
-var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false, size = "md" }) => {
+var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false, minDate, maxDate, size = "md" }) => {
   const locale = useLocale();
   const t = useTranslations("DatePicker");
   const [isOpen, setIsOpen] = React23.useState(false);
@@ -6231,6 +6255,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     if (!date) return null;
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
   };
+  const minDay = React23.useMemo(() => normalizeToLocal(minDate), [minDate]);
+  const maxDay = React23.useMemo(() => normalizeToLocal(maxDate), [maxDate]);
   const [viewDate, setViewDate] = React23.useState(startDate || /* @__PURE__ */ new Date());
   const [tempStart, setTempStart] = React23.useState(normalizeToLocal(startDate));
   const [tempEnd, setTempEnd] = React23.useState(normalizeToLocal(endDate));
@@ -6310,6 +6336,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     for (let d = 1; d <= daysInMonth; d++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
       const isPastDate = disablePastDates && date < today;
+      const isOutOfRange = !!minDay && date < minDay || !!maxDay && date > maxDay;
+      const isDisabled = isPastDate || isOutOfRange;
       const isSelectedStart = isSameDay2(date, tempStart);
       const isSelectedEnd = isSameDay2(date, tempEnd);
       const isHovering = hoveredDate && tempStart && !tempEnd;
@@ -6335,17 +6363,17 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
-            onClick: () => !isPastDate && handleSelect(date),
-            disabled: isPastDate,
-            onMouseEnter: () => !isPastDate && tempStart && !tempEnd && setHoveredDate(date),
+            onClick: () => !isDisabled && handleSelect(date),
+            disabled: isDisabled,
+            onMouseEnter: () => !isDisabled && tempStart && !tempEnd && setHoveredDate(date),
             onMouseLeave: () => tempStart && !tempEnd && setHoveredDate(null),
             className: cn(
               "transition-all duration-200 focus:outline-none relative font-medium cursor-pointer",
               size === "sm" ? "w-6 h-6 text-xs" : "w-8 h-8 text-sm",
               // Disabled/past date state
-              isPastDate && "opacity-30 cursor-not-allowed text-muted-foreground",
+              isDisabled && "opacity-30 cursor-not-allowed text-muted-foreground",
               // Default state
-              !isPastDate && !isInRange && !isRangeStart && !isRangeEnd && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 rounded-lg",
+              !isDisabled && !isInRange && !isRangeStart && !isRangeEnd && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 rounded-lg",
               // Range selection styling - smooth continuous background with gradient
               isInRange && "bg-primary/15 text-foreground",
               (isRangeStart || isRangeEnd) && "bg-linear-to-br from-primary to-primary/80 text-primary-foreground hover:from-primary hover:to-primary/70 shadow-lg shadow-primary/25",
@@ -6355,8 +6383,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
               isRangeStart && isRangeEnd && "rounded-lg",
               // Single day selection
               // Hover effects for range
-              isInRange && !isPastDate && "hover:bg-primary/25",
-              !isPastDate && "focus:bg-accent focus:text-accent-foreground focus:z-10 focus:shadow-md"
+              isInRange && !isDisabled && "hover:bg-primary/25",
+              !isDisabled && "focus:bg-accent focus:text-accent-foreground focus:z-10 focus:shadow-md"
             ),
             children: d
           },
@@ -6568,6 +6596,10 @@ function Calendar2({
   animate = false,
   showEventBadges = false,
   highlightWeekends = false,
+  cellMode = "compact",
+  maxEventsPerDay = 3,
+  onEventClick,
+  renderEvent,
   ...rest
 }) {
   const isControlledMonth = month != null;
@@ -6660,6 +6692,13 @@ function Calendar2({
     xl: { day: "w-14 h-14 text-lg", grid: dense ? "gap-2" : "gap-2.5", head: "text-base", header: "text-lg" }
   };
   const sz = SIZE_STYLES3[size];
+  const CELL_EVENT_STYLES = {
+    sm: { cell: dense ? "min-h-20 p-1.5" : "min-h-24 p-2", day: "text-[12px]" },
+    md: { cell: dense ? "min-h-28 p-2" : "min-h-32 p-2.5", day: "text-sm" },
+    lg: { cell: dense ? "min-h-36 p-2.5" : "min-h-40 p-3", day: "text-base" },
+    xl: { cell: dense ? "min-h-44 p-3" : "min-h-52 p-3.5", day: "text-lg" }
+  };
+  const cellSz = CELL_EVENT_STYLES[size];
   const VARIANT_STYLES2 = {
     default: "border border-border rounded-2xl bg-card",
     bordered: "border-2 border-border rounded-2xl bg-card shadow-sm",
@@ -6683,6 +6722,84 @@ function Calendar2({
         const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
         const dayEvents = byDay.get(k) || [];
         const disabled = isDateDisabled(d);
+        const isWeekend = d.getDay() === 0 || d.getDay() === 6;
+        const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
+        if (customDay) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: customDay }, `${monthLabel}-${idx}`);
+        if (cellMode === "events") {
+          const limit = Math.max(0, maxEventsPerDay);
+          const visibleEvents = dayEvents.slice(0, limit);
+          const hiddenCount = Math.max(0, dayEvents.length - visibleEvents.length);
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            "div",
+            {
+              className: cn(
+                "rounded-xl border border-border/50 bg-background/40 overflow-hidden",
+                "transition-colors duration-150",
+                animate && "will-change-transform",
+                cellSz.cell,
+                !inMonth && "opacity-60",
+                disabled && "opacity-40",
+                highlightWeekends && isWeekend && "bg-accent/10",
+                isToday2 && !selectedDay && "ring-1 ring-primary/40",
+                selectedDay && "border-primary/50 bg-primary/10"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => !disabled && handleClickDay(d),
+                      disabled,
+                      className: cn(
+                        "inline-flex items-center justify-center rounded-lg px-2 py-1",
+                        "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                        cellSz.day,
+                        selectedDay ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                        disabled && "cursor-not-allowed hover:bg-transparent"
+                      ),
+                      title: d.toDateString(),
+                      children: d.getDate()
+                    }
+                  ),
+                  dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: dayEvents.length })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("mt-2 space-y-1", dense ? "mt-1.5" : "mt-2"), children: [
+                  visibleEvents.map((e, i) => {
+                    const key = e.id ?? `${k}-${i}`;
+                    const node = renderEvent?.({ event: e, date: d });
+                    if (node) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: node }, String(key));
+                    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => onEventClick?.(e, d),
+                        className: cn(
+                          "w-full text-left rounded-lg px-2 py-1",
+                          "transition-colors duration-150 hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                          "text-xs flex items-center gap-2"
+                        ),
+                        title: e.title,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-2 w-2 rounded-full shrink-0", style: { backgroundColor: e.color || "hsl(var(--primary))" } }),
+                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "truncate flex-1", children: e.title ?? "Event" }),
+                          showEventBadges && e.badge && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground", children: e.badge })
+                        ]
+                      },
+                      String(key)
+                    );
+                  }),
+                  hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "px-2 text-[11px] text-muted-foreground", children: [
+                    "+",
+                    hiddenCount,
+                    " more"
+                  ] })
+                ] })
+              ]
+            },
+            `${monthLabel}-${idx}`
+          );
+        }
         return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
@@ -6693,6 +6810,7 @@ function Calendar2({
               sz.day,
               !inMonth && "text-muted-foreground/60",
               disabled && "opacity-40 cursor-not-allowed",
+              highlightWeekends && isWeekend && "bg-accent/10",
               isToday2 && !selectedDay && "ring-1 ring-primary/50",
               selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
               !selectedDay && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
@@ -6700,7 +6818,14 @@ function Calendar2({
             title: d.toDateString(),
             children: [
               d.getDate(),
-              dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
+              dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                "span",
+                {
+                  className: "h-1.5 w-1.5 rounded-full",
+                  style: { backgroundColor: e.color || "hsl(var(--primary))" }
+                },
+                String(e.id ?? i)
+              )) })
             ]
           },
           `${monthLabel}-${idx}`
@@ -6763,6 +6888,82 @@ function Calendar2({
         const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
         const dayEvents = byDay.get(k) || [];
         const disabled = isDateDisabled(d);
+        const isWeekend = d.getDay() === 0 || d.getDay() === 6;
+        const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
+        if (customDay) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: customDay }, `wd-${idx}`);
+        if (cellMode === "events") {
+          const limit = Math.max(0, maxEventsPerDay);
+          const visibleEvents = dayEvents.slice(0, limit);
+          const hiddenCount = Math.max(0, dayEvents.length - visibleEvents.length);
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            "div",
+            {
+              className: cn(
+                "rounded-xl border border-border/50 bg-background/40 overflow-hidden",
+                "transition-colors duration-150",
+                cellSz.cell,
+                disabled && "opacity-40",
+                highlightWeekends && isWeekend && "bg-accent/10",
+                isToday2 && !selectedDay && "ring-1 ring-primary/40",
+                selectedDay && "border-primary/50 bg-primary/10"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => !disabled && handleClickDay(d),
+                      disabled,
+                      className: cn(
+                        "inline-flex items-center justify-center rounded-lg px-2 py-1",
+                        "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                        cellSz.day,
+                        selectedDay ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                        disabled && "cursor-not-allowed hover:bg-transparent"
+                      ),
+                      title: d.toDateString(),
+                      children: d.getDate()
+                    }
+                  ),
+                  dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: dayEvents.length })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("mt-2 space-y-1", dense ? "mt-1.5" : "mt-2"), children: [
+                  visibleEvents.map((e, i) => {
+                    const key = e.id ?? `${k}-${i}`;
+                    const node = renderEvent?.({ event: e, date: d });
+                    if (node) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: node }, String(key));
+                    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => onEventClick?.(e, d),
+                        className: cn(
+                          "w-full text-left rounded-lg px-2 py-1",
+                          "transition-colors duration-150 hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                          "text-xs flex items-center gap-2"
+                        ),
+                        title: e.title,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-2 w-2 rounded-full shrink-0", style: { backgroundColor: e.color || "hsl(var(--primary))" } }),
+                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "truncate flex-1", children: e.title ?? "Event" }),
+                          showEventBadges && e.badge && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground", children: e.badge })
+                        ]
+                      },
+                      String(key)
+                    );
+                  }),
+                  hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "px-2 text-[11px] text-muted-foreground", children: [
+                    "+",
+                    hiddenCount,
+                    " more"
+                  ] })
+                ] })
+              ]
+            },
+            `wd-${idx}`
+          );
+        }
         return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
@@ -6772,6 +6973,7 @@ function Calendar2({
               "rounded-lg flex items-center justify-center relative cursor-pointer",
               sz.day,
               disabled && "opacity-40 cursor-not-allowed",
+              highlightWeekends && isWeekend && "bg-accent/10",
               isToday2 && !selectedDay && "ring-1 ring-primary/50",
               selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
               !selectedDay && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
@@ -6779,7 +6981,7 @@ function Calendar2({
             title: d.toDateString(),
             children: [
               d.getDate(),
-              dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
+              dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, String(e.id ?? i))) })
             ]
           },
           `wd-${idx}`