@underverse-ui/underverse 0.2.91 → 0.2.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +176 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +14 -1
- package/dist/index.d.ts +14 -1
- package/dist/index.js +176 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -6596,6 +6596,10 @@ function Calendar2({
|
|
|
6596
6596
|
animate = false,
|
|
6597
6597
|
showEventBadges = false,
|
|
6598
6598
|
highlightWeekends = false,
|
|
6599
|
+
cellMode = "compact",
|
|
6600
|
+
maxEventsPerDay = 3,
|
|
6601
|
+
onEventClick,
|
|
6602
|
+
renderEvent,
|
|
6599
6603
|
...rest
|
|
6600
6604
|
}) {
|
|
6601
6605
|
const isControlledMonth = month != null;
|
|
@@ -6688,6 +6692,13 @@ function Calendar2({
|
|
|
6688
6692
|
xl: { day: "w-14 h-14 text-lg", grid: dense ? "gap-2" : "gap-2.5", head: "text-base", header: "text-lg" }
|
|
6689
6693
|
};
|
|
6690
6694
|
const sz = SIZE_STYLES3[size];
|
|
6695
|
+
const CELL_EVENT_STYLES = {
|
|
6696
|
+
sm: { cell: dense ? "min-h-20 p-1.5" : "min-h-24 p-2", day: "text-[12px]" },
|
|
6697
|
+
md: { cell: dense ? "min-h-28 p-2" : "min-h-32 p-2.5", day: "text-sm" },
|
|
6698
|
+
lg: { cell: dense ? "min-h-36 p-2.5" : "min-h-40 p-3", day: "text-base" },
|
|
6699
|
+
xl: { cell: dense ? "min-h-44 p-3" : "min-h-52 p-3.5", day: "text-lg" }
|
|
6700
|
+
};
|
|
6701
|
+
const cellSz = CELL_EVENT_STYLES[size];
|
|
6691
6702
|
const VARIANT_STYLES2 = {
|
|
6692
6703
|
default: "border border-border rounded-2xl bg-card",
|
|
6693
6704
|
bordered: "border-2 border-border rounded-2xl bg-card shadow-sm",
|
|
@@ -6711,6 +6722,84 @@ function Calendar2({
|
|
|
6711
6722
|
const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
|
|
6712
6723
|
const dayEvents = byDay.get(k) || [];
|
|
6713
6724
|
const disabled = isDateDisabled(d);
|
|
6725
|
+
const isWeekend = d.getDay() === 0 || d.getDay() === 6;
|
|
6726
|
+
const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
|
|
6727
|
+
if (customDay) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: customDay }, `${monthLabel}-${idx}`);
|
|
6728
|
+
if (cellMode === "events") {
|
|
6729
|
+
const limit = Math.max(0, maxEventsPerDay);
|
|
6730
|
+
const visibleEvents = dayEvents.slice(0, limit);
|
|
6731
|
+
const hiddenCount = Math.max(0, dayEvents.length - visibleEvents.length);
|
|
6732
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
6733
|
+
"div",
|
|
6734
|
+
{
|
|
6735
|
+
className: cn(
|
|
6736
|
+
"rounded-xl border border-border/50 bg-background/40 overflow-hidden",
|
|
6737
|
+
"transition-colors duration-150",
|
|
6738
|
+
animate && "will-change-transform",
|
|
6739
|
+
cellSz.cell,
|
|
6740
|
+
!inMonth && "opacity-60",
|
|
6741
|
+
disabled && "opacity-40",
|
|
6742
|
+
highlightWeekends && isWeekend && "bg-accent/10",
|
|
6743
|
+
isToday2 && !selectedDay && "ring-1 ring-primary/40",
|
|
6744
|
+
selectedDay && "border-primary/50 bg-primary/10"
|
|
6745
|
+
),
|
|
6746
|
+
children: [
|
|
6747
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
6748
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
6749
|
+
"button",
|
|
6750
|
+
{
|
|
6751
|
+
type: "button",
|
|
6752
|
+
onClick: () => !disabled && handleClickDay(d),
|
|
6753
|
+
disabled,
|
|
6754
|
+
className: cn(
|
|
6755
|
+
"inline-flex items-center justify-center rounded-lg px-2 py-1",
|
|
6756
|
+
"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
|
|
6757
|
+
cellSz.day,
|
|
6758
|
+
selectedDay ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground",
|
|
6759
|
+
disabled && "cursor-not-allowed hover:bg-transparent"
|
|
6760
|
+
),
|
|
6761
|
+
title: d.toDateString(),
|
|
6762
|
+
children: d.getDate()
|
|
6763
|
+
}
|
|
6764
|
+
),
|
|
6765
|
+
dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: dayEvents.length })
|
|
6766
|
+
] }),
|
|
6767
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("mt-2 space-y-1", dense ? "mt-1.5" : "mt-2"), children: [
|
|
6768
|
+
visibleEvents.map((e, i) => {
|
|
6769
|
+
const key = e.id ?? `${k}-${i}`;
|
|
6770
|
+
const node = renderEvent?.({ event: e, date: d });
|
|
6771
|
+
if (node) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: node }, String(key));
|
|
6772
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
6773
|
+
"button",
|
|
6774
|
+
{
|
|
6775
|
+
type: "button",
|
|
6776
|
+
onClick: () => onEventClick?.(e, d),
|
|
6777
|
+
className: cn(
|
|
6778
|
+
"w-full text-left rounded-lg px-2 py-1",
|
|
6779
|
+
"transition-colors duration-150 hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
|
|
6780
|
+
"text-xs flex items-center gap-2"
|
|
6781
|
+
),
|
|
6782
|
+
title: e.title,
|
|
6783
|
+
children: [
|
|
6784
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-2 w-2 rounded-full shrink-0", style: { backgroundColor: e.color || "hsl(var(--primary))" } }),
|
|
6785
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "truncate flex-1", children: e.title ?? "Event" }),
|
|
6786
|
+
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 })
|
|
6787
|
+
]
|
|
6788
|
+
},
|
|
6789
|
+
String(key)
|
|
6790
|
+
);
|
|
6791
|
+
}),
|
|
6792
|
+
hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "px-2 text-[11px] text-muted-foreground", children: [
|
|
6793
|
+
"+",
|
|
6794
|
+
hiddenCount,
|
|
6795
|
+
" more"
|
|
6796
|
+
] })
|
|
6797
|
+
] })
|
|
6798
|
+
]
|
|
6799
|
+
},
|
|
6800
|
+
`${monthLabel}-${idx}`
|
|
6801
|
+
);
|
|
6802
|
+
}
|
|
6714
6803
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
6715
6804
|
"button",
|
|
6716
6805
|
{
|
|
@@ -6721,6 +6810,7 @@ function Calendar2({
|
|
|
6721
6810
|
sz.day,
|
|
6722
6811
|
!inMonth && "text-muted-foreground/60",
|
|
6723
6812
|
disabled && "opacity-40 cursor-not-allowed",
|
|
6813
|
+
highlightWeekends && isWeekend && "bg-accent/10",
|
|
6724
6814
|
isToday2 && !selectedDay && "ring-1 ring-primary/50",
|
|
6725
6815
|
selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
6726
6816
|
!selectedDay && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
|
@@ -6728,7 +6818,14 @@ function Calendar2({
|
|
|
6728
6818
|
title: d.toDateString(),
|
|
6729
6819
|
children: [
|
|
6730
6820
|
d.getDate(),
|
|
6731
|
-
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)(
|
|
6821
|
+
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)(
|
|
6822
|
+
"span",
|
|
6823
|
+
{
|
|
6824
|
+
className: "h-1.5 w-1.5 rounded-full",
|
|
6825
|
+
style: { backgroundColor: e.color || "hsl(var(--primary))" }
|
|
6826
|
+
},
|
|
6827
|
+
String(e.id ?? i)
|
|
6828
|
+
)) })
|
|
6732
6829
|
]
|
|
6733
6830
|
},
|
|
6734
6831
|
`${monthLabel}-${idx}`
|
|
@@ -6791,6 +6888,82 @@ function Calendar2({
|
|
|
6791
6888
|
const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
|
|
6792
6889
|
const dayEvents = byDay.get(k) || [];
|
|
6793
6890
|
const disabled = isDateDisabled(d);
|
|
6891
|
+
const isWeekend = d.getDay() === 0 || d.getDay() === 6;
|
|
6892
|
+
const customDay = renderDay?.({ date: d, isCurrentMonth: inMonth, isToday: isToday2, isSelected: selectedDay, events: dayEvents });
|
|
6893
|
+
if (customDay) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(React24.Fragment, { children: customDay }, `wd-${idx}`);
|
|
6894
|
+
if (cellMode === "events") {
|
|
6895
|
+
const limit = Math.max(0, maxEventsPerDay);
|
|
6896
|
+
const visibleEvents = dayEvents.slice(0, limit);
|
|
6897
|
+
const hiddenCount = Math.max(0, dayEvents.length - visibleEvents.length);
|
|
6898
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
6899
|
+
"div",
|
|
6900
|
+
{
|
|
6901
|
+
className: cn(
|
|
6902
|
+
"rounded-xl border border-border/50 bg-background/40 overflow-hidden",
|
|
6903
|
+
"transition-colors duration-150",
|
|
6904
|
+
cellSz.cell,
|
|
6905
|
+
disabled && "opacity-40",
|
|
6906
|
+
highlightWeekends && isWeekend && "bg-accent/10",
|
|
6907
|
+
isToday2 && !selectedDay && "ring-1 ring-primary/40",
|
|
6908
|
+
selectedDay && "border-primary/50 bg-primary/10"
|
|
6909
|
+
),
|
|
6910
|
+
children: [
|
|
6911
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
6912
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
6913
|
+
"button",
|
|
6914
|
+
{
|
|
6915
|
+
type: "button",
|
|
6916
|
+
onClick: () => !disabled && handleClickDay(d),
|
|
6917
|
+
disabled,
|
|
6918
|
+
className: cn(
|
|
6919
|
+
"inline-flex items-center justify-center rounded-lg px-2 py-1",
|
|
6920
|
+
"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
|
|
6921
|
+
cellSz.day,
|
|
6922
|
+
selectedDay ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground",
|
|
6923
|
+
disabled && "cursor-not-allowed hover:bg-transparent"
|
|
6924
|
+
),
|
|
6925
|
+
title: d.toDateString(),
|
|
6926
|
+
children: d.getDate()
|
|
6927
|
+
}
|
|
6928
|
+
),
|
|
6929
|
+
dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: dayEvents.length })
|
|
6930
|
+
] }),
|
|
6931
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("mt-2 space-y-1", dense ? "mt-1.5" : "mt-2"), children: [
|
|
6932
|
+
visibleEvents.map((e, i) => {
|
|
6933
|
+
const key = e.id ?? `${k}-${i}`;
|
|
6934
|
+
const node = renderEvent?.({ event: e, date: d });
|
|
6935
|
+
if (node) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: node }, String(key));
|
|
6936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
6937
|
+
"button",
|
|
6938
|
+
{
|
|
6939
|
+
type: "button",
|
|
6940
|
+
onClick: () => onEventClick?.(e, d),
|
|
6941
|
+
className: cn(
|
|
6942
|
+
"w-full text-left rounded-lg px-2 py-1",
|
|
6943
|
+
"transition-colors duration-150 hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
|
|
6944
|
+
"text-xs flex items-center gap-2"
|
|
6945
|
+
),
|
|
6946
|
+
title: e.title,
|
|
6947
|
+
children: [
|
|
6948
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-2 w-2 rounded-full shrink-0", style: { backgroundColor: e.color || "hsl(var(--primary))" } }),
|
|
6949
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "truncate flex-1", children: e.title ?? "Event" }),
|
|
6950
|
+
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 })
|
|
6951
|
+
]
|
|
6952
|
+
},
|
|
6953
|
+
String(key)
|
|
6954
|
+
);
|
|
6955
|
+
}),
|
|
6956
|
+
hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "px-2 text-[11px] text-muted-foreground", children: [
|
|
6957
|
+
"+",
|
|
6958
|
+
hiddenCount,
|
|
6959
|
+
" more"
|
|
6960
|
+
] })
|
|
6961
|
+
] })
|
|
6962
|
+
]
|
|
6963
|
+
},
|
|
6964
|
+
`wd-${idx}`
|
|
6965
|
+
);
|
|
6966
|
+
}
|
|
6794
6967
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
6795
6968
|
"button",
|
|
6796
6969
|
{
|
|
@@ -6800,6 +6973,7 @@ function Calendar2({
|
|
|
6800
6973
|
"rounded-lg flex items-center justify-center relative cursor-pointer",
|
|
6801
6974
|
sz.day,
|
|
6802
6975
|
disabled && "opacity-40 cursor-not-allowed",
|
|
6976
|
+
highlightWeekends && isWeekend && "bg-accent/10",
|
|
6803
6977
|
isToday2 && !selectedDay && "ring-1 ring-primary/50",
|
|
6804
6978
|
selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
6805
6979
|
!selectedDay && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
|
@@ -6807,7 +6981,7 @@ function Calendar2({
|
|
|
6807
6981
|
title: d.toDateString(),
|
|
6808
6982
|
children: [
|
|
6809
6983
|
d.getDate(),
|
|
6810
|
-
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)) })
|
|
6984
|
+
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))) })
|
|
6811
6985
|
]
|
|
6812
6986
|
},
|
|
6813
6987
|
`wd-${idx}`
|