@underverse-ui/underverse 0.2.91 → 0.2.93

package/dist/index.cjs

@@ -6596,6 +6596,17 @@ function Calendar2({
   animate = false,
   showEventBadges = false,
   highlightWeekends = false,
+  cellMode = "compact",
+  maxEventsPerDay = 3,
+  onEventClick,
+  renderEvent,
+  enableEventSheet,
+  eventSheetSize = "md",
+  renderEventSheet,
+  selectedEventId,
+  eventSheetOpen,
+  onEventSheetOpenChange,
+  onSelectedEventIdChange,
   ...rest
 }) {
   const isControlledMonth = month != null;
@@ -6626,6 +6637,60 @@ function Calendar2({
     }
     return map;
   }, [events]);
+  const effectiveEnableEventSheet = enableEventSheet ?? !!renderEventSheet;
+  const isEventSheetOpenControlled = eventSheetOpen !== void 0;
+  const [internalEventSheetOpen, setInternalEventSheetOpen] = React24.useState(false);
+  const activeEventSheetOpen = isEventSheetOpenControlled ? !!eventSheetOpen : internalEventSheetOpen;
+  const isSelectedEventControlled = selectedEventId !== void 0;
+  const [internalSelectedEventRef, setInternalSelectedEventRef] = React24.useState(null);
+  const setEventSheetOpen = React24.useCallback(
+    (open) => {
+      if (!isEventSheetOpenControlled) setInternalEventSheetOpen(open);
+      onEventSheetOpenChange?.(open);
+      if (!open) {
+        if (!isSelectedEventControlled) setInternalSelectedEventRef(null);
+        onSelectedEventIdChange?.(void 0);
+      }
+    },
+    [isEventSheetOpenControlled, isSelectedEventControlled, onEventSheetOpenChange, onSelectedEventIdChange]
+  );
+  const selectedEventRef = React24.useMemo(() => {
+    if (isSelectedEventControlled && selectedEventId != null) {
+      const ev = events.find((e) => e.id === selectedEventId);
+      if (!ev) return null;
+      const d = toDate(ev.date);
+      const dayKey = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+      return { dayKey, eventId: selectedEventId };
+    }
+    return internalSelectedEventRef;
+  }, [events, internalSelectedEventRef, isSelectedEventControlled, selectedEventId]);
+  const selectedEvent = React24.useMemo(() => {
+    if (!selectedEventRef) return null;
+    const list = byDay.get(selectedEventRef.dayKey) || [];
+    if (selectedEventRef.eventId != null) {
+      return list.find((e) => e.id === selectedEventRef.eventId) || null;
+    }
+    const idx = selectedEventRef.index ?? -1;
+    return idx >= 0 && idx < list.length ? list[idx] : null;
+  }, [byDay, selectedEventRef]);
+  const selectedEventDate = React24.useMemo(() => {
+    if (!selectedEventRef) return null;
+    const [y, m, d] = selectedEventRef.dayKey.split("-").map((x) => Number(x));
+    if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null;
+    return new Date(y, m, d);
+  }, [selectedEventRef]);
+  const handleEventActivate = React24.useCallback(
+    (event, date, dayKey, index) => {
+      onEventClick?.(event, date);
+      onSelectedEventIdChange?.(event.id ?? void 0);
+      if (!effectiveEnableEventSheet) return;
+      if (!isSelectedEventControlled) {
+        setInternalSelectedEventRef({ dayKey, eventId: event.id, index });
+      }
+      setEventSheetOpen(true);
+    },
+    [effectiveEnableEventSheet, isSelectedEventControlled, onEventClick, onSelectedEventIdChange, setEventSheetOpen]
+  );
   const isSelected = (d) => {
     if (!selected) return false;
     if (selectMode === "single" && selected instanceof Date) return isSameDay(selected, d);
@@ -6688,6 +6753,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",
@@ -6711,6 +6783,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: () => handleEventActivate(e, d, k, i),
+                        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",
           {
@@ -6721,6 +6871,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"
@@ -6728,7 +6879,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}`
@@ -6791,6 +6949,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: () => handleEventActivate(e, d, k, i),
+                        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",
           {
@@ -6800,6 +7034,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"
@@ -6807,13 +7042,38 @@ 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}`
         );
       }) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) }),
+    effectiveEnableEventSheet && selectedEvent && selectedEventDate ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      Sheet,
+      {
+        open: activeEventSheetOpen,
+        onOpenChange: setEventSheetOpen,
+        side: "right",
+        size: eventSheetSize,
+        title: selectedEvent.title ?? "Event",
+        description: selectedEventDate.toDateString(),
+        children: renderEventSheet ? renderEventSheet({ event: selectedEvent, date: selectedEventDate, close: () => setEventSheetOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-3", children: [
+          selectedEvent.id != null ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-xs text-muted-foreground", children: "ID" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "font-mono text-xs break-all", children: String(selectedEvent.id) })
+          ] }) : null,
+          selectedEvent.badge ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-xs text-muted-foreground", children: "Badge" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-sm", children: selectedEvent.badge })
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-3 w-3 rounded-full", style: { backgroundColor: selectedEvent.color || "hsl(var(--primary))" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm text-muted-foreground", children: "Color" })
+          ] })
+        ] })
+      }
+    ) : null
   ] });
 }