@underverse-ui/underverse 0.2.91 → 0.2.92

package/dist/index.d.cts

@@ -840,8 +840,10 @@ declare function TimePicker({ value, defaultValue, onChange, placeholder, disabl
 type SelectMode = "single" | "multiple" | "range";
 type Variant$3 = "default" | "bordered" | "card" | "minimal";
 type DisplayMode = "month" | "week" | "year";
+type CellMode = "compact" | "events";
 interface CalendarEvent {
     date: Date | string;
+    id?: string | number;
     title?: string;
     color?: string;
     badge?: string;
@@ -906,8 +908,19 @@ interface CalendarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "de
     showEventBadges?: boolean;
     /** Highlight weekends */
     highlightWeekends?: boolean;
+    /** Render mode for each day cell (compact dots vs large cell with event list) */
+    cellMode?: CellMode;
+    /** Max events shown per day (events cell mode) */
+    maxEventsPerDay?: number;
+    /** Fired when clicking an event in a day cell (events cell mode) */
+    onEventClick?: (event: CalendarEvent, date: Date) => void;
+    /** Customize event rendering (events cell mode) */
+    renderEvent?: (args: {
+        event: CalendarEvent;
+        date: Date;
+    }) => React$1.ReactNode;
 }
-declare function Calendar({ month, defaultMonth, onMonthChange, value, defaultValue, onSelect, selectMode, weekStartsOn, showWeekdays, showHeader, size, variant, events, renderDay, labels, className, display, months, showToday, showClear, minDate, maxDate, disabledDates, dense, animate, showEventBadges, highlightWeekends, ...rest }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ month, defaultMonth, onMonthChange, value, defaultValue, onSelect, selectMode, weekStartsOn, showWeekdays, showHeader, size, variant, events, renderDay, labels, className, display, months, showToday, showClear, minDate, maxDate, disabledDates, dense, animate, showEventBadges, highlightWeekends, cellMode, maxEventsPerDay, onEventClick, renderEvent, ...rest }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 type CalendarTimelineView = "month" | "week" | "day";
 type CalendarTimelineDateInput = Date | string | number;

package/dist/index.d.ts

@@ -840,8 +840,10 @@ declare function TimePicker({ value, defaultValue, onChange, placeholder, disabl
 type SelectMode = "single" | "multiple" | "range";
 type Variant$3 = "default" | "bordered" | "card" | "minimal";
 type DisplayMode = "month" | "week" | "year";
+type CellMode = "compact" | "events";
 interface CalendarEvent {
     date: Date | string;
+    id?: string | number;
     title?: string;
     color?: string;
     badge?: string;
@@ -906,8 +908,19 @@ interface CalendarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "de
     showEventBadges?: boolean;
     /** Highlight weekends */
     highlightWeekends?: boolean;
+    /** Render mode for each day cell (compact dots vs large cell with event list) */
+    cellMode?: CellMode;
+    /** Max events shown per day (events cell mode) */
+    maxEventsPerDay?: number;
+    /** Fired when clicking an event in a day cell (events cell mode) */
+    onEventClick?: (event: CalendarEvent, date: Date) => void;
+    /** Customize event rendering (events cell mode) */
+    renderEvent?: (args: {
+        event: CalendarEvent;
+        date: Date;
+    }) => React$1.ReactNode;
 }
-declare function Calendar({ month, defaultMonth, onMonthChange, value, defaultValue, onSelect, selectMode, weekStartsOn, showWeekdays, showHeader, size, variant, events, renderDay, labels, className, display, months, showToday, showClear, minDate, maxDate, disabledDates, dense, animate, showEventBadges, highlightWeekends, ...rest }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ month, defaultMonth, onMonthChange, value, defaultValue, onSelect, selectMode, weekStartsOn, showWeekdays, showHeader, size, variant, events, renderDay, labels, className, display, months, showToday, showClear, minDate, maxDate, disabledDates, dense, animate, showEventBadges, highlightWeekends, cellMode, maxEventsPerDay, onEventClick, renderEvent, ...rest }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 type CalendarTimelineView = "month" | "week" | "day";
 type CalendarTimelineDateInput = Date | string | number;

package/dist/index.js

@@ -6421,6 +6421,10 @@ function Calendar2({
   animate = false,
   showEventBadges = false,
   highlightWeekends = false,
+  cellMode = "compact",
+  maxEventsPerDay = 3,
+  onEventClick,
+  renderEvent,
   ...rest
 }) {
   const isControlledMonth = month != null;
@@ -6513,6 +6517,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",
@@ -6536,6 +6547,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__ */ jsx30(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__ */ jsxs25(
+            "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__ */ jsxs25("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx30(
+                    "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__ */ jsx30("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: dayEvents.length })
+                ] }),
+                /* @__PURE__ */ jsxs25("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__ */ jsx30("div", { children: node }, String(key));
+                    return /* @__PURE__ */ jsxs25(
+                      "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__ */ jsx30("span", { className: "h-2 w-2 rounded-full shrink-0", style: { backgroundColor: e.color || "hsl(var(--primary))" } }),
+                          /* @__PURE__ */ jsx30("span", { className: "truncate flex-1", children: e.title ?? "Event" }),
+                          showEventBadges && e.badge && /* @__PURE__ */ jsx30("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__ */ jsxs25("div", { className: "px-2 text-[11px] text-muted-foreground", children: [
+                    "+",
+                    hiddenCount,
+                    " more"
+                  ] })
+                ] })
+              ]
+            },
+            `${monthLabel}-${idx}`
+          );
+        }
         return /* @__PURE__ */ jsxs25(
           "button",
           {
@@ -6546,6 +6635,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"
@@ -6553,7 +6643,14 @@ function Calendar2({
             title: d.toDateString(),
             children: [
               d.getDate(),
-              dayEvents.length > 0 && /* @__PURE__ */ jsx30("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ jsx30("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
+              dayEvents.length > 0 && /* @__PURE__ */ jsx30("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ jsx30(
+                "span",
+                {
+                  className: "h-1.5 w-1.5 rounded-full",
+                  style: { backgroundColor: e.color || "hsl(var(--primary))" }
+                },
+                String(e.id ?? i)
+              )) })
             ]
           },
           `${monthLabel}-${idx}`
@@ -6616,6 +6713,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__ */ jsx30(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__ */ jsxs25(
+            "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__ */ jsxs25("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx30(
+                    "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__ */ jsx30("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: dayEvents.length })
+                ] }),
+                /* @__PURE__ */ jsxs25("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__ */ jsx30("div", { children: node }, String(key));
+                    return /* @__PURE__ */ jsxs25(
+                      "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__ */ jsx30("span", { className: "h-2 w-2 rounded-full shrink-0", style: { backgroundColor: e.color || "hsl(var(--primary))" } }),
+                          /* @__PURE__ */ jsx30("span", { className: "truncate flex-1", children: e.title ?? "Event" }),
+                          showEventBadges && e.badge && /* @__PURE__ */ jsx30("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__ */ jsxs25("div", { className: "px-2 text-[11px] text-muted-foreground", children: [
+                    "+",
+                    hiddenCount,
+                    " more"
+                  ] })
+                ] })
+              ]
+            },
+            `wd-${idx}`
+          );
+        }
         return /* @__PURE__ */ jsxs25(
           "button",
           {
@@ -6625,6 +6798,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"
@@ -6632,7 +6806,7 @@ function Calendar2({
             title: d.toDateString(),
             children: [
               d.getDate(),
-              dayEvents.length > 0 && /* @__PURE__ */ jsx30("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ jsx30("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
+              dayEvents.length > 0 && /* @__PURE__ */ jsx30("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ jsx30("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, String(e.id ?? i))) })
             ]
           },
           `wd-${idx}`