@g4rcez/components 5.0.1 → 5.0.3

package/dist/components/page-calendar/day-view.js

@@ -0,0 +1,124 @@
+import { Tag as e } from "../core/tag.js";
+import { t } from "../../use-locale-DPM_sg4s.js";
+import { t as n } from "../../calendar-DEPkz8sw.js";
+import { t as r } from "../../isToday-COXfxFui.js";
+import { _ as i, a, c as o, f as s, i as c, n as l, s as u, t as d, u as f } from "../../page-calendar.utils-Bd0PHktL.js";
+import { EventPill as p } from "./event-pill.js";
+import { useEffect as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/page-calendar/day-view.tsx
+var b = 48;
+function x(e) {
+	let t = e.date.getHours(), n = e.date.getMinutes();
+	return t * b + n / 60 * b;
+}
+function S({ currentDate: S, onSlotClick: C, renderEvent: w, eventsByDate: T, onDateChange: E, onEventClick: D }) {
+	let O = t(), k = h(null), A = h(null), j = s(), [M, N] = g(null);
+	m(() => {
+		if (A.current && k.current) {
+			let e = k.current.offsetTop;
+			A.current.scrollTop = e - A.current.clientHeight / 2;
+		}
+	}, []);
+	let P = i(S), F = T.get(P) || [], I = ({ date: e }) => {
+		let t = i(e), n = (T.get(t) || []).length > 0, r = i(e) === i(S);
+		return !n || r ? null : /* @__PURE__ */ v("span", { className: "absolute bottom-page-calendar-dot-bottom left-1/2 size-page-calendar-dot-size -translate-x-1/2 rounded-full bg-primary" });
+	}, L = (e) => {
+		N(e), D(e);
+	};
+	return /* @__PURE__ */ y("div", {
+		className: "flex min-w-full flex-1",
+		children: [/* @__PURE__ */ y("div", {
+			className: "flex w-full flex-1 flex-col",
+			children: [/* @__PURE__ */ y("div", {
+				"aria-label": c(S, O),
+				className: "flex flex-shrink-0 items-center gap-page-calendar-day-header-gap border-b border-border px-page-calendar-day-header-px py-page-calendar-day-header-py",
+				children: [/* @__PURE__ */ v("span", {
+					className: `inline-flex size-page-calendar-day-badge-size items-center justify-center rounded-full font-bold ${r(S) ? "bg-primary text-primary-foreground" : "text-foreground"}`,
+					children: l(S, O)
+				}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
+					className: "font-semibold",
+					children: f(S, O)
+				}), /* @__PURE__ */ v("div", {
+					className: "text-typography-xs text-muted-foreground",
+					children: u(S, O)
+				})] })]
+			}), /* @__PURE__ */ y("div", {
+				ref: A,
+				className: "flex flex-1 items-start overflow-y-auto",
+				children: [/* @__PURE__ */ v("div", {
+					className: "w-page-calendar-gutter-w flex-shrink-0",
+					children: j.map((e) => /* @__PURE__ */ y("div", {
+						className: "relative",
+						style: { height: b },
+						children: [/* @__PURE__ */ v("span", {
+							className: "absolute -top-2.5 right-2 text-page-calendar-hour-text text-muted-foreground",
+							children: e === 0 ? "" : a(e, O)
+						}), e === (/* @__PURE__ */ new Date()).getHours() && /* @__PURE__ */ v("div", { ref: k })]
+					}, e))
+				}), /* @__PURE__ */ y("div", {
+					className: "relative flex-1 border-l border-card-border",
+					children: [j.map((e) => {
+						let t = new Date(S);
+						return t.setHours(e, 0, 0, 0), /* @__PURE__ */ v("button", {
+							type: "button",
+							"aria-label": a(e, O),
+							className: "w-full cursor-pointer border-b border-border/50 hover:bg-muted/20",
+							style: { height: b },
+							onClick: () => C?.(t)
+						}, e);
+					}), d(F).map(({ event: e, columnIndex: t, columnCount: n }) => /* @__PURE__ */ v("div", {
+						role: "presentation",
+						className: "absolute",
+						style: {
+							top: x(e),
+							height: b,
+							left: `calc(${t / n * 100}% + 2px)`,
+							width: `calc(${100 / n}% - 4px)`
+						},
+						onClick: (e) => e.stopPropagation(),
+						onKeyDown: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ v(p, {
+							event: e,
+							onClick: () => L(e)
+						})
+					}, e.id))]
+				})]
+			})]
+		}), /* @__PURE__ */ y("div", {
+			className: "flex flex-col overflow-y-auto border-l border-card-border px-page-calendar-side-px",
+			children: [/* @__PURE__ */ v(n, {
+				date: S,
+				markToday: !0,
+				changeOnlyOnClick: !0,
+				RenderOnDay: I,
+				onChange: (e) => e && E(e)
+			}), M && /* @__PURE__ */ v("div", {
+				className: "flex flex-col gap-page-calendar-detail-gap border-t p-page-calendar-detail-p",
+				children: w ? w(M) : /* @__PURE__ */ y(_, { children: [
+					/* @__PURE__ */ v("div", {
+						className: "text-typography-sm truncate font-semibold",
+						children: M.title
+					}),
+					/* @__PURE__ */ v("div", {
+						className: "text-typography-xs text-muted-foreground",
+						children: c(M.date, O)
+					}),
+					/* @__PURE__ */ v("div", {
+						className: "text-typography-xs text-muted-foreground",
+						children: o(M.date, O)
+					}),
+					/* @__PURE__ */ v(e, {
+						theme: M.className ? "custom" : "primary",
+						size: "small",
+						className: `self-start${M.className ? ` ${M.className}` : ""}`
+					})
+				] })
+			})]
+		})]
+	});
+}
+//#endregion
+export { S as DayView };
+
+//# sourceMappingURL=day-view.js.map

package/dist/components/page-calendar/day-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-view.js","names":[],"sources":["../../../src/components/page-calendar/day-view.tsx"],"sourcesContent":["import { isToday } from \"date-fns\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Tag } from \"../core/tag\";\nimport { useLocale } from \"../../hooks/use-locale\";\nimport type { CalendarEvent, CalendarEventBase } from \"./page-calendar.types\";\nimport { EventPill } from \"./event-pill\";\nimport { Calendar } from \"../display/calendar\";\nimport {\n    getHourSlots,\n    toDateKey,\n    formatDay,\n    formatWeekdayLong,\n    formatMonthYear,\n    formatHourLabel,\n    formatFullDate,\n    formatTime,\n    computeEventColumns,\n} from \"./page-calendar.utils\";\n\nconst HOUR_HEIGHT = 48;\n\nfunction getTopOffset(event: CalendarEvent): number {\n    const hour = event.date.getHours();\n    const minutes = event.date.getMinutes();\n    return hour * HOUR_HEIGHT + (minutes / 60) * HOUR_HEIGHT;\n}\n\ntype DayViewProps<T extends CalendarEventBase> = {\n    currentDate: Date;\n    onDateChange: (date: Date) => void;\n    onSlotClick?: (date: Date) => void;\n    eventsByDate: Map<string, CalendarEvent<T>[]>;\n    onEventClick: (event: CalendarEvent<T>) => void;\n    renderEvent?: (event: CalendarEvent<T>) => React.ReactNode;\n};\n\nexport function DayView<T extends CalendarEventBase>({\n    currentDate,\n    onSlotClick,\n    renderEvent,\n    eventsByDate,\n    onDateChange,\n    onEventClick,\n}: DayViewProps<T>) {\n    const locale = useLocale();\n    const currentHourRef = useRef<HTMLDivElement>(null);\n    const scrollBodyRef = useRef<HTMLDivElement>(null);\n    const hours = getHourSlots();\n    const [selectedEvent, setSelectedEvent] = useState<CalendarEvent<T> | null>(null);\n\n    useEffect(() => {\n        if (scrollBodyRef.current && currentHourRef.current) {\n            const top = currentHourRef.current.offsetTop;\n            scrollBodyRef.current.scrollTop = top - scrollBodyRef.current.clientHeight / 2;\n        }\n    }, []);\n\n    const dayKey = toDateKey(currentDate);\n    const events = eventsByDate.get(dayKey) || [];\n\n    const RenderOnDay = ({ date }: { date: Date }) => {\n        const key = toDateKey(date);\n        const hasEvents = (eventsByDate.get(key) || []).length > 0;\n        const isSelected = toDateKey(date) === toDateKey(currentDate);\n        if (!hasEvents || isSelected) return null;\n        return (\n            <span className=\"absolute bottom-page-calendar-dot-bottom left-1/2 size-page-calendar-dot-size -translate-x-1/2 rounded-full bg-primary\" />\n        );\n    };\n\n    const handleEventClick = (event: CalendarEvent<T>) => {\n        setSelectedEvent(event);\n        onEventClick(event);\n    };\n\n    return (\n        <div className=\"flex min-w-full flex-1\">\n            <div className=\"flex w-full flex-1 flex-col\">\n                <div\n                    aria-label={formatFullDate(currentDate, locale)}\n                    className=\"flex flex-shrink-0 items-center gap-page-calendar-day-header-gap border-b border-border px-page-calendar-day-header-px py-page-calendar-day-header-py\"\n                >\n                    <span\n                        className={`inline-flex size-page-calendar-day-badge-size items-center justify-center rounded-full font-bold ${isToday(currentDate) ? \"bg-primary text-primary-foreground\" : \"text-foreground\"}`}\n                    >\n                        {formatDay(currentDate, locale)}\n                    </span>\n                    <div>\n                        <div className=\"font-semibold\">{formatWeekdayLong(currentDate, locale)}</div>\n                        <div className=\"text-typography-xs text-muted-foreground\">{formatMonthYear(currentDate, locale)}</div>\n                    </div>\n                </div>\n                <div ref={scrollBodyRef} className=\"flex flex-1 items-start overflow-y-auto\">\n                    <div className=\"w-page-calendar-gutter-w flex-shrink-0\">\n                        {hours.map((hour) => (\n                            <div key={hour} className=\"relative\" style={{ height: HOUR_HEIGHT }}>\n                                <span className=\"absolute -top-2.5 right-2 text-page-calendar-hour-text text-muted-foreground\">\n                                    {hour === 0 ? \"\" : formatHourLabel(hour, locale)}\n                                </span>\n                                {hour === new Date().getHours() && <div ref={currentHourRef} />}\n                            </div>\n                        ))}\n                    </div>\n                    <div className=\"relative flex-1 border-l border-card-border\">\n                        {hours.map((hour) => {\n                            const slotDate = new Date(currentDate);\n                            slotDate.setHours(hour, 0, 0, 0);\n                            return (\n                                <button\n                                    key={hour}\n                                    type=\"button\"\n                                    aria-label={formatHourLabel(hour, locale)}\n                                    className=\"w-full cursor-pointer border-b border-border/50 hover:bg-muted/20\"\n                                    style={{ height: HOUR_HEIGHT }}\n                                    onClick={() => onSlotClick?.(slotDate)}\n                                />\n                            );\n                        })}\n                        {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (\n                            <div\n                                key={event.id}\n                                role=\"presentation\"\n                                className=\"absolute\"\n                                style={{\n                                    top: getTopOffset(event),\n                                    height: HOUR_HEIGHT,\n                                    left: `calc(${(columnIndex / columnCount) * 100}% + 2px)`,\n                                    width: `calc(${100 / columnCount}% - 4px)`,\n                                }}\n                                onClick={(e) => e.stopPropagation()}\n                                onKeyDown={(e) => e.stopPropagation()}\n                            >\n                                <EventPill event={event} onClick={() => handleEventClick(event)} />\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            </div>\n            <div className=\"flex flex-col overflow-y-auto border-l border-card-border px-page-calendar-side-px\">\n                <Calendar\n                    date={currentDate}\n                    markToday\n                    changeOnlyOnClick\n                    RenderOnDay={RenderOnDay}\n                    onChange={(d: Date | undefined) => d && onDateChange(d)}\n                />\n                {selectedEvent && (\n                    <div className=\"flex flex-col gap-page-calendar-detail-gap border-t p-page-calendar-detail-p\">\n                        {renderEvent ? (\n                            renderEvent(selectedEvent)\n                        ) : (\n                            <>\n                                <div className=\"text-typography-sm truncate font-semibold\">{selectedEvent.title}</div>\n                                <div className=\"text-typography-xs text-muted-foreground\">{formatFullDate(selectedEvent.date, locale)}</div>\n                                <div className=\"text-typography-xs text-muted-foreground\">{formatTime(selectedEvent.date, locale)}</div>\n                                <Tag\n                                    theme={selectedEvent.className ? \"custom\" : \"primary\"}\n                                    size=\"small\"\n                                    className={`self-start${selectedEvent.className ? ` ${selectedEvent.className}` : \"\"}`}\n                                />\n                            </>\n                        )}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/page-calendar/day-view.jsx

@@ -0,0 +1,89 @@
+import { isToday } from "date-fns";
+import { useEffect, useRef, useState } from "react";
+import { Tag } from "../core/tag";
+import { useLocale } from "../../hooks/use-locale";
+import { EventPill } from "./event-pill";
+import { Calendar } from "../display/calendar";
+import { getHourSlots, toDateKey, formatDay, formatWeekdayLong, formatMonthYear, formatHourLabel, formatFullDate, formatTime, computeEventColumns, } from "./page-calendar.utils";
+const HOUR_HEIGHT = 48;
+function getTopOffset(event) {
+    const hour = event.date.getHours();
+    const minutes = event.date.getMinutes();
+    return hour * HOUR_HEIGHT + (minutes / 60) * HOUR_HEIGHT;
+}
+export function DayView({ currentDate, onSlotClick, renderEvent, eventsByDate, onDateChange, onEventClick, }) {
+    const locale = useLocale();
+    const currentHourRef = useRef(null);
+    const scrollBodyRef = useRef(null);
+    const hours = getHourSlots();
+    const [selectedEvent, setSelectedEvent] = useState(null);
+    useEffect(() => {
+        if (scrollBodyRef.current && currentHourRef.current) {
+            const top = currentHourRef.current.offsetTop;
+            scrollBodyRef.current.scrollTop = top - scrollBodyRef.current.clientHeight / 2;
+        }
+    }, []);
+    const dayKey = toDateKey(currentDate);
+    const events = eventsByDate.get(dayKey) || [];
+    const RenderOnDay = ({ date }) => {
+        const key = toDateKey(date);
+        const hasEvents = (eventsByDate.get(key) || []).length > 0;
+        const isSelected = toDateKey(date) === toDateKey(currentDate);
+        if (!hasEvents || isSelected)
+            return null;
+        return (<span className="absolute bottom-page-calendar-dot-bottom left-1/2 size-page-calendar-dot-size -translate-x-1/2 rounded-full bg-primary"/>);
+    };
+    const handleEventClick = (event) => {
+        setSelectedEvent(event);
+        onEventClick(event);
+    };
+    return (<div className="flex min-w-full flex-1">
+            <div className="flex w-full flex-1 flex-col">
+                <div aria-label={formatFullDate(currentDate, locale)} className="flex flex-shrink-0 items-center gap-page-calendar-day-header-gap border-b border-border px-page-calendar-day-header-px py-page-calendar-day-header-py">
+                    <span className={`inline-flex size-page-calendar-day-badge-size items-center justify-center rounded-full font-bold ${isToday(currentDate) ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                        {formatDay(currentDate, locale)}
+                    </span>
+                    <div>
+                        <div className="font-semibold">{formatWeekdayLong(currentDate, locale)}</div>
+                        <div className="text-typography-xs text-muted-foreground">{formatMonthYear(currentDate, locale)}</div>
+                    </div>
+                </div>
+                <div ref={scrollBodyRef} className="flex flex-1 items-start overflow-y-auto">
+                    <div className="w-page-calendar-gutter-w flex-shrink-0">
+                        {hours.map((hour) => (<div key={hour} className="relative" style={{ height: HOUR_HEIGHT }}>
+                                <span className="absolute -top-2.5 right-2 text-page-calendar-hour-text text-muted-foreground">
+                                    {hour === 0 ? "" : formatHourLabel(hour, locale)}
+                                </span>
+                                {hour === new Date().getHours() && <div ref={currentHourRef}/>}
+                            </div>))}
+                    </div>
+                    <div className="relative flex-1 border-l border-card-border">
+                        {hours.map((hour) => {
+            const slotDate = new Date(currentDate);
+            slotDate.setHours(hour, 0, 0, 0);
+            return (<button key={hour} type="button" aria-label={formatHourLabel(hour, locale)} className="w-full cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)}/>);
+        })}
+                        {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (<div key={event.id} role="presentation" className="absolute" style={{
+                top: getTopOffset(event),
+                height: HOUR_HEIGHT,
+                left: `calc(${(columnIndex / columnCount) * 100}% + 2px)`,
+                width: `calc(${100 / columnCount}% - 4px)`,
+            }} onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
+                                <EventPill event={event} onClick={() => handleEventClick(event)}/>
+                            </div>))}
+                    </div>
+                </div>
+            </div>
+            <div className="flex flex-col overflow-y-auto border-l border-card-border px-page-calendar-side-px">
+                <Calendar date={currentDate} markToday changeOnlyOnClick RenderOnDay={RenderOnDay} onChange={(d) => d && onDateChange(d)}/>
+                {selectedEvent && (<div className="flex flex-col gap-page-calendar-detail-gap border-t p-page-calendar-detail-p">
+                        {renderEvent ? (renderEvent(selectedEvent)) : (<>
+                                <div className="text-typography-sm truncate font-semibold">{selectedEvent.title}</div>
+                                <div className="text-typography-xs text-muted-foreground">{formatFullDate(selectedEvent.date, locale)}</div>
+                                <div className="text-typography-xs text-muted-foreground">{formatTime(selectedEvent.date, locale)}</div>
+                                <Tag theme={selectedEvent.className ? "custom" : "primary"} size="small" className={`self-start${selectedEvent.className ? ` ${selectedEvent.className}` : ""}`}/>
+                            </>)}
+                    </div>)}
+            </div>
+        </div>);
+}

package/dist/components/page-calendar/event-pill.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarEvent } from "./page-calendar.types";
+type EventPillProps = {
+    compact?: boolean;
+    onClick: () => void;
+    event: CalendarEvent;
+};
+export declare function EventPill({ event, onClick, compact }: EventPillProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=event-pill.d.ts.map

package/dist/components/page-calendar/event-pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-pill.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/event-pill.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAI3D,KAAK,cAAc,GAAG;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAe,EAAE,EAAE,cAAc,+BA0C5E"}

package/dist/components/page-calendar/event-pill.js

@@ -0,0 +1,44 @@
+import { t as e } from "../../dom-Bn4wY_Zx.js";
+import { t } from "../../use-translations-BE4PuhLm.js";
+import { Button as n } from "../core/button.js";
+import { r } from "../../page-calendar.utils-Bd0PHktL.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/page-calendar/event-pill.tsx
+function o({ event: o, onClick: s, compact: c = !1 }) {
+	let l = t(), u = {
+		style: {
+			border: "0",
+			padding: "0 0.5rem",
+			height: "1.25rem",
+			borderRadius: "0.25rem"
+		},
+		className: e("w-full border-0 justify-start rounded-page-calendar-pill-radius text-page-calendar-pill-text truncate text-ellipsis overflow-hidden border leading-tight", o.className)
+	};
+	return c ? /* @__PURE__ */ i(n, {
+		...u,
+		size: "small",
+		onClick: s,
+		title: o.title,
+		"aria-label": l.pageCalendarEventAt(o.title, r(o.date)),
+		theme: o.className ? "raw" : "primary",
+		children: o.title
+	}) : /* @__PURE__ */ a(n, {
+		...u,
+		size: "small",
+		onClick: s,
+		title: o.title,
+		"aria-label": l.pageCalendarEventAt(o.title, r(o.date)),
+		theme: o.className ? "raw" : "primary",
+		children: [/* @__PURE__ */ i("div", {
+			className: "truncate font-medium",
+			children: o.title
+		}), /* @__PURE__ */ i("div", {
+			className: "text-page-calendar-pill-text opacity-60",
+			children: r(o.date)
+		})]
+	});
+}
+//#endregion
+export { o as EventPill };
+
+//# sourceMappingURL=event-pill.js.map

package/dist/components/page-calendar/event-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-pill.js","names":[],"sources":["../../../src/components/page-calendar/event-pill.tsx"],"sourcesContent":["import { Button } from \"../core/button\";\nimport { css } from \"../../lib/dom\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport type { CalendarEvent } from \"./page-calendar.types\";\nimport { formatEventTime } from \"./page-calendar.utils\";\nimport type { CSSProperties } from \"react\";\n\ntype EventPillProps = {\n    compact?: boolean;\n    onClick: () => void;\n    event: CalendarEvent;\n};\n\nexport function EventPill({ event, onClick, compact = false }: EventPillProps) {\n    const t = useTranslations();\n    const props = {\n        style: {\n            border: \"0\",\n            padding: \"0 0.5rem\",\n            height: \"1.25rem\",\n            borderRadius: \"0.25rem\",\n        } as CSSProperties,\n        className: css(\n            \"w-full border-0 justify-start rounded-page-calendar-pill-radius text-page-calendar-pill-text truncate text-ellipsis overflow-hidden border leading-tight\",\n            event.className\n        ),\n    };\n    if (compact) {\n        return (\n            <Button\n                {...props}\n                size=\"small\"\n                onClick={onClick}\n                title={event.title}\n                aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))}\n                theme={event.className ? \"raw\" : \"primary\"}\n            >\n                {event.title}\n            </Button>\n        );\n    }\n\n    return (\n        <Button\n            {...props}\n            size=\"small\"\n            onClick={onClick}\n            title={event.title}\n            aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))}\n            theme={event.className ? \"raw\" : \"primary\"}\n        >\n            <div className=\"truncate font-medium\">{event.title}</div>\n            <div className=\"text-page-calendar-pill-text opacity-60\">{formatEventTime(event.date)}</div>\n        </Button>\n    );\n}\n"],"mappings":";;;;;;AAaA,SAAgB,EAAU,EAAE,UAAO,YAAS,aAAU,MAAyB;CAC3E,IAAM,IAAI,EAAgB,GACpB,IAAQ;EACV,OAAO;GACH,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,cAAc;EAClB;EACA,WAAW,EACP,4JACA,EAAM,SACV;CACJ;CAgBA,OAfI,IAEI,kBAAC,GAAD;EACI,GAAI;EACJ,MAAK;EACI;EACT,OAAO,EAAM;EACb,cAAY,EAAE,oBAAoB,EAAM,OAAO,EAAgB,EAAM,IAAI,CAAC;EAC1E,OAAO,EAAM,YAAY,QAAQ;YAEhC,EAAM;CACH,CAAA,IAKZ,kBAAC,GAAD;EACI,GAAI;EACJ,MAAK;EACI;EACT,OAAO,EAAM;EACb,cAAY,EAAE,oBAAoB,EAAM,OAAO,EAAgB,EAAM,IAAI,CAAC;EAC1E,OAAO,EAAM,YAAY,QAAQ;YANrC,CAQI,kBAAC,OAAD;GAAK,WAAU;aAAwB,EAAM;EAAW,CAAA,GACxD,kBAAC,OAAD;GAAK,WAAU;aAA2C,EAAgB,EAAM,IAAI;EAAO,CAAA,CACvF;;AAEhB"}

package/dist/components/page-calendar/event-pill.jsx

@@ -0,0 +1,25 @@
+import { Button } from "../core/button";
+import { css } from "../../lib/dom";
+import { useTranslations } from "../../hooks/use-translations";
+import { formatEventTime } from "./page-calendar.utils";
+export function EventPill({ event, onClick, compact = false }) {
+    const t = useTranslations();
+    const props = {
+        style: {
+            border: "0",
+            padding: "0 0.5rem",
+            height: "1.25rem",
+            borderRadius: "0.25rem",
+        },
+        className: css("w-full border-0 justify-start rounded-page-calendar-pill-radius text-page-calendar-pill-text truncate text-ellipsis overflow-hidden border leading-tight", event.className),
+    };
+    if (compact) {
+        return (<Button {...props} size="small" onClick={onClick} title={event.title} aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))} theme={event.className ? "raw" : "primary"}>
+                {event.title}
+            </Button>);
+    }
+    return (<Button {...props} size="small" onClick={onClick} title={event.title} aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))} theme={event.className ? "raw" : "primary"}>
+            <div className="truncate font-medium">{event.title}</div>
+            <div className="text-page-calendar-pill-text opacity-60">{formatEventTime(event.date)}</div>
+        </Button>);
+}

package/dist/components/page-calendar/index.d.ts

@@ -0,0 +1,4 @@
+export { PageCalendar } from "./page-calendar";
+export type { CalendarEvent, CalendarFilter, ViewMode } from "./page-calendar.types";
+export { toDateKey, groupEventsByDate, getMonthDays, getWeekDays, getHourSlots, formatEventTime, formatDay, formatWeekdayLong, formatWeekdayShort, formatMonthYear, formatMonthShort, formatHourLabel, formatFullDate, formatTime, getWeekNumber, } from "./page-calendar.utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/page-calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EACH,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,UAAU,EACV,aAAa,GAChB,MAAM,uBAAuB,CAAC"}

package/dist/components/page-calendar/index.js

@@ -0,0 +1,2 @@
+export { PageCalendar } from "./page-calendar";
+export { toDateKey, groupEventsByDate, getMonthDays, getWeekDays, getHourSlots, formatEventTime, formatDay, formatWeekdayLong, formatWeekdayShort, formatMonthYear, formatMonthShort, formatHourLabel, formatFullDate, formatTime, getWeekNumber, } from "./page-calendar.utils";

package/dist/components/page-calendar/month-view.d.ts

@@ -0,0 +1,11 @@
+import type { CalendarEvent } from "./page-calendar.types";
+type MonthViewProps = {
+    days: Date[];
+    currentDate: Date;
+    onDayClick: (date: Date) => void;
+    eventsByDate: Map<string, CalendarEvent[]>;
+    onEventClick: (event: CalendarEvent) => void;
+};
+export declare function MonthView({ days, eventsByDate, currentDate, onEventClick, onDayClick }: MonthViewProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=month-view.d.ts.map

package/dist/components/page-calendar/month-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-view.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/month-view.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAO3D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,WAAW,EAAE,IAAI,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;IAC3C,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,cAAc,+BAiItG"}

package/dist/components/page-calendar/month-view.js

@@ -0,0 +1,109 @@
+import { t as e } from "../../dom-Bn4wY_Zx.js";
+import { t } from "../../use-translations-BE4PuhLm.js";
+import { t as n } from "../../use-locale-DPM_sg4s.js";
+import { t as r } from "../../isToday-COXfxFui.js";
+import { t as i } from "../../isSameMonth-C3lsSwcg.js";
+import { _ as a, i as o, l as s, m as c, n as l } from "../../page-calendar.utils-Bd0PHktL.js";
+import { EventPill as u } from "./event-pill.js";
+import { useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/page-calendar/month-view.tsx
+var _ = 7;
+function v({ days: v, eventsByDate: y, currentDate: b, onEventClick: x, onDayClick: S }) {
+	let C = n(), w = t(), T = f(() => c(/* @__PURE__ */ new Date()), []), E = a(b), D = f(() => {
+		let e = v.findIndex((e) => a(e) === E);
+		return e >= 0 ? e : 0;
+	}, [v, E]), [O, k] = m(D), A = p([]), j = f(() => {
+		let e = [];
+		for (let t = 0; t < v.length; t += _) e.push(v.slice(t, t + _));
+		return e;
+	}, [v]);
+	d(() => {
+		k(D);
+	}, [D]);
+	let M = (e) => {
+		let t = Math.min(Math.max(e, 0), v.length - 1);
+		k(t), A.current[t]?.focus();
+	}, N = (e, t) => {
+		let n = Math.floor(t / _) * _, r = Math.min(n + _ - 1, v.length - 1), i = {
+			ArrowRight: t + 1,
+			ArrowLeft: t - 1,
+			ArrowDown: t + _,
+			ArrowUp: t - _,
+			Home: n,
+			End: r
+		}[e.key];
+		i !== void 0 && (e.preventDefault(), M(i));
+	};
+	return /* @__PURE__ */ h("div", {
+		className: "flex h-full flex-1 flex-col",
+		children: /* @__PURE__ */ g("div", {
+			role: "grid",
+			"aria-label": w.pageCalendarMonthGrid,
+			className: "flex flex-1 flex-col",
+			children: [/* @__PURE__ */ h("div", {
+				role: "row",
+				className: "grid grid-cols-7 border-b border-border",
+				children: T.map((e) => {
+					let t = s(e, C);
+					return /* @__PURE__ */ h("div", {
+						role: "columnheader",
+						className: "py-page-calendar-weekday-py text-center text-page-calendar-weekday-text font-medium text-muted-foreground",
+						children: t
+					}, t);
+				})
+			}), j.map((t, n) => /* @__PURE__ */ h("div", {
+				role: "row",
+				className: "grid flex-1 grid-cols-7",
+				children: t.map((t, s) => {
+					let c = n * _ + s, d = a(t), f = y.get(d) || [], p = i(t, b), m = r(t);
+					return /* @__PURE__ */ g("div", {
+						role: "gridcell",
+						"aria-selected": d === E ? !0 : void 0,
+						className: e("group flex min-h-page-calendar-cell-min-h flex-col gap-page-calendar-cell-gap border-b border-r border-border p-page-calendar-cell-p transition-colors hover:bg-muted hover:bg-opacity-20", !p && "opacity-50"),
+						children: [/* @__PURE__ */ g("button", {
+							type: "button",
+							ref: (e) => {
+								A.current[c] = e;
+							},
+							tabIndex: O === c ? 0 : -1,
+							onFocus: () => k(c),
+							onKeyDown: (e) => N(e, c),
+							onClick: () => S(t),
+							"aria-current": m ? "date" : void 0,
+							"aria-label": `${o(t, C)}${f.length > 0 ? `, ${w.pageCalendarEventCount(f.length)}` : ""}`,
+							className: "flex w-full cursor-pointer items-center justify-between text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary",
+							children: [/* @__PURE__ */ h("span", {
+								className: `flex size-page-calendar-month-badge-size items-center justify-center rounded-full text-page-calendar-month-badge-text font-medium ${m ? "bg-primary text-primary-foreground" : "text-foreground"}`,
+								children: l(t, C)
+							}), /* @__PURE__ */ h("span", {
+								"aria-hidden": "true",
+								className: "text-page-calendar-overflow-text leading-none text-muted-foreground opacity-0 transition-opacity group-hover:opacity-40",
+								children: "+"
+							})]
+						}), /* @__PURE__ */ h("div", {
+							className: "min-h-0 flex-1 overflow-y-auto",
+							children: /* @__PURE__ */ h("div", {
+								className: "flex flex-col gap-page-calendar-cell-gap-tight",
+								children: f.map((e) => /* @__PURE__ */ h("div", {
+									role: "presentation",
+									onClick: (e) => e.stopPropagation(),
+									onKeyDown: (e) => e.stopPropagation(),
+									children: /* @__PURE__ */ h(u, {
+										compact: !0,
+										event: e,
+										onClick: () => x(e)
+									})
+								}, e.id))
+							})
+						})]
+					}, d);
+				})
+			}, a(t[0])))]
+		})
+	});
+}
+//#endregion
+export { v as MonthView };
+
+//# sourceMappingURL=month-view.js.map

package/dist/components/page-calendar/month-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-view.js","names":[],"sources":["../../../src/components/page-calendar/month-view.tsx"],"sourcesContent":["import { isSameMonth, isToday } from \"date-fns\";\nimport { useLocale } from \"../../hooks/use-locale\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css } from \"../../lib/dom\";\nimport type { CalendarEvent } from \"./page-calendar.types\";\nimport { EventPill } from \"./event-pill\";\nimport { toDateKey, formatDay, getWeekDays, formatWeekDay, formatFullDate } from \"./page-calendar.utils\";\nimport { useEffect, useMemo, useRef, useState, type KeyboardEvent } from \"react\";\n\nconst daysInWeek = 7;\n\ntype MonthViewProps = {\n    days: Date[];\n    currentDate: Date;\n    onDayClick: (date: Date) => void;\n    eventsByDate: Map<string, CalendarEvent[]>;\n    onEventClick: (event: CalendarEvent) => void;\n};\n\nexport function MonthView({ days, eventsByDate, currentDate, onEventClick, onDayClick }: MonthViewProps) {\n    const locale = useLocale();\n    const t = useTranslations();\n    const WEEKDAY_LABELS = useMemo(() => getWeekDays(new Date()), []);\n    const selectedDateKey = toDateKey(currentDate);\n    const selectedDayIndex = useMemo(() => {\n        const index = days.findIndex((day) => toDateKey(day) === selectedDateKey);\n        return index >= 0 ? index : 0;\n    }, [days, selectedDateKey]);\n    const [focusedDayIndex, setFocusedDayIndex] = useState(selectedDayIndex);\n    const dayButtonRefs = useRef<Array<HTMLButtonElement | null>>([]);\n    const weeks = useMemo(() => {\n        const rows: Date[][] = [];\n        for (let rowStart = 0; rowStart < days.length; rowStart += daysInWeek) {\n            rows.push(days.slice(rowStart, rowStart + daysInWeek));\n        }\n        return rows;\n    }, [days]);\n\n    useEffect(() => {\n        setFocusedDayIndex(selectedDayIndex);\n    }, [selectedDayIndex]);\n\n    const moveFocus = (nextIndex: number) => {\n        const boundedIndex = Math.min(Math.max(nextIndex, 0), days.length - 1);\n        setFocusedDayIndex(boundedIndex);\n        dayButtonRefs.current[boundedIndex]?.focus();\n    };\n\n    const handleDayKeyDown = (event: KeyboardEvent<HTMLButtonElement>, dayIndex: number) => {\n        const weekStart = Math.floor(dayIndex / daysInWeek) * daysInWeek;\n        const weekEnd = Math.min(weekStart + daysInWeek - 1, days.length - 1);\n        const keyMoves: Partial<Record<string, number>> = {\n            ArrowRight: dayIndex + 1,\n            ArrowLeft: dayIndex - 1,\n            ArrowDown: dayIndex + daysInWeek,\n            ArrowUp: dayIndex - daysInWeek,\n            Home: weekStart,\n            End: weekEnd,\n        };\n        const nextIndex = keyMoves[event.key];\n        if (nextIndex === undefined) return;\n        event.preventDefault();\n        moveFocus(nextIndex);\n    };\n\n    return (\n        <div className=\"flex h-full flex-1 flex-col\">\n            <div role=\"grid\" aria-label={t.pageCalendarMonthGrid} className=\"flex flex-1 flex-col\">\n                <div role=\"row\" className=\"grid grid-cols-7 border-b border-border\">\n                    {WEEKDAY_LABELS.map((date) => {\n                        const day = formatWeekDay(date, locale);\n                        return (\n                            <div\n                                role=\"columnheader\"\n                                key={day}\n                                className=\"py-page-calendar-weekday-py text-center text-page-calendar-weekday-text font-medium text-muted-foreground\"\n                            >\n                                {day}\n                            </div>\n                        );\n                    })}\n                </div>\n                {weeks.map((week, weekIndex) => (\n                    <div role=\"row\" key={toDateKey(week[0])} className=\"grid flex-1 grid-cols-7\">\n                        {week.map((day, dayIndexInWeek) => {\n                            const dayIndex = weekIndex * daysInWeek + dayIndexInWeek;\n                            const key = toDateKey(day);\n                            const events = eventsByDate.get(key) || [];\n                            const isCurrentMonth = isSameMonth(day, currentDate);\n                            const isCurrentDay = isToday(day);\n                            const isSelected = key === selectedDateKey;\n                            return (\n                                <div\n                                    key={key}\n                                    role=\"gridcell\"\n                                    aria-selected={isSelected ? true : undefined}\n                                    className={css(\n                                        \"group flex min-h-page-calendar-cell-min-h flex-col gap-page-calendar-cell-gap border-b border-r border-border p-page-calendar-cell-p transition-colors hover:bg-muted hover:bg-opacity-20\",\n                                        !isCurrentMonth && \"opacity-50\"\n                                    )}\n                                >\n                                    <button\n                                        type=\"button\"\n                                        ref={(node) => {\n                                            dayButtonRefs.current[dayIndex] = node;\n                                        }}\n                                        tabIndex={focusedDayIndex === dayIndex ? 0 : -1}\n                                        onFocus={() => setFocusedDayIndex(dayIndex)}\n                                        onKeyDown={(event) => handleDayKeyDown(event, dayIndex)}\n                                        onClick={() => onDayClick(day)}\n                                        aria-current={isCurrentDay ? \"date\" : undefined}\n                                        aria-label={`${formatFullDate(day, locale)}${events.length > 0 ? `, ${t.pageCalendarEventCount(events.length)}` : \"\"}`}\n                                        className=\"flex w-full cursor-pointer items-center justify-between text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary\"\n                                    >\n                                        <span\n                                            className={`flex size-page-calendar-month-badge-size items-center justify-center rounded-full text-page-calendar-month-badge-text font-medium ${isCurrentDay ? \"bg-primary text-primary-foreground\" : \"text-foreground\"}`}\n                                        >\n                                            {formatDay(day, locale)}\n                                        </span>\n                                        <span\n                                            aria-hidden=\"true\"\n                                            className=\"text-page-calendar-overflow-text leading-none text-muted-foreground opacity-0 transition-opacity group-hover:opacity-40\"\n                                        >\n                                            +\n                                        </span>\n                                    </button>\n                                    <div className=\"min-h-0 flex-1 overflow-y-auto\">\n                                        <div className=\"flex flex-col gap-page-calendar-cell-gap-tight\">\n                                            {events.map((event) => (\n                                                <div\n                                                    key={event.id}\n                                                    role=\"presentation\"\n                                                    onClick={(event) => event.stopPropagation()}\n                                                    onKeyDown={(event) => event.stopPropagation()}\n                                                >\n                                                    <EventPill compact event={event} onClick={() => onEventClick(event)} />\n                                                </div>\n                                            ))}\n                                        </div>\n                                    </div>\n                                </div>\n                            );\n                        })}\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/page-calendar/month-view.jsx

@@ -0,0 +1,93 @@
+import { isSameMonth, isToday } from "date-fns";
+import { useLocale } from "../../hooks/use-locale";
+import { useTranslations } from "../../hooks/use-translations";
+import { css } from "../../lib/dom";
+import { EventPill } from "./event-pill";
+import { toDateKey, formatDay, getWeekDays, formatWeekDay, formatFullDate } from "./page-calendar.utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+const daysInWeek = 7;
+export function MonthView({ days, eventsByDate, currentDate, onEventClick, onDayClick }) {
+    const locale = useLocale();
+    const t = useTranslations();
+    const WEEKDAY_LABELS = useMemo(() => getWeekDays(new Date()), []);
+    const selectedDateKey = toDateKey(currentDate);
+    const selectedDayIndex = useMemo(() => {
+        const index = days.findIndex((day) => toDateKey(day) === selectedDateKey);
+        return index >= 0 ? index : 0;
+    }, [days, selectedDateKey]);
+    const [focusedDayIndex, setFocusedDayIndex] = useState(selectedDayIndex);
+    const dayButtonRefs = useRef([]);
+    const weeks = useMemo(() => {
+        const rows = [];
+        for (let rowStart = 0; rowStart < days.length; rowStart += daysInWeek) {
+            rows.push(days.slice(rowStart, rowStart + daysInWeek));
+        }
+        return rows;
+    }, [days]);
+    useEffect(() => {
+        setFocusedDayIndex(selectedDayIndex);
+    }, [selectedDayIndex]);
+    const moveFocus = (nextIndex) => {
+        const boundedIndex = Math.min(Math.max(nextIndex, 0), days.length - 1);
+        setFocusedDayIndex(boundedIndex);
+        dayButtonRefs.current[boundedIndex]?.focus();
+    };
+    const handleDayKeyDown = (event, dayIndex) => {
+        const weekStart = Math.floor(dayIndex / daysInWeek) * daysInWeek;
+        const weekEnd = Math.min(weekStart + daysInWeek - 1, days.length - 1);
+        const keyMoves = {
+            ArrowRight: dayIndex + 1,
+            ArrowLeft: dayIndex - 1,
+            ArrowDown: dayIndex + daysInWeek,
+            ArrowUp: dayIndex - daysInWeek,
+            Home: weekStart,
+            End: weekEnd,
+        };
+        const nextIndex = keyMoves[event.key];
+        if (nextIndex === undefined)
+            return;
+        event.preventDefault();
+        moveFocus(nextIndex);
+    };
+    return (<div className="flex h-full flex-1 flex-col">
+            <div role="grid" aria-label={t.pageCalendarMonthGrid} className="flex flex-1 flex-col">
+                <div role="row" className="grid grid-cols-7 border-b border-border">
+                    {WEEKDAY_LABELS.map((date) => {
+            const day = formatWeekDay(date, locale);
+            return (<div role="columnheader" key={day} className="py-page-calendar-weekday-py text-center text-page-calendar-weekday-text font-medium text-muted-foreground">
+                                {day}
+                            </div>);
+        })}
+                </div>
+                {weeks.map((week, weekIndex) => (<div role="row" key={toDateKey(week[0])} className="grid flex-1 grid-cols-7">
+                        {week.map((day, dayIndexInWeek) => {
+                const dayIndex = weekIndex * daysInWeek + dayIndexInWeek;
+                const key = toDateKey(day);
+                const events = eventsByDate.get(key) || [];
+                const isCurrentMonth = isSameMonth(day, currentDate);
+                const isCurrentDay = isToday(day);
+                const isSelected = key === selectedDateKey;
+                return (<div key={key} role="gridcell" aria-selected={isSelected ? true : undefined} className={css("group flex min-h-page-calendar-cell-min-h flex-col gap-page-calendar-cell-gap border-b border-r border-border p-page-calendar-cell-p transition-colors hover:bg-muted hover:bg-opacity-20", !isCurrentMonth && "opacity-50")}>
+                                    <button type="button" ref={(node) => {
+                        dayButtonRefs.current[dayIndex] = node;
+                    }} tabIndex={focusedDayIndex === dayIndex ? 0 : -1} onFocus={() => setFocusedDayIndex(dayIndex)} onKeyDown={(event) => handleDayKeyDown(event, dayIndex)} onClick={() => onDayClick(day)} aria-current={isCurrentDay ? "date" : undefined} aria-label={`${formatFullDate(day, locale)}${events.length > 0 ? `, ${t.pageCalendarEventCount(events.length)}` : ""}`} className="flex w-full cursor-pointer items-center justify-between text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
+                                        <span className={`flex size-page-calendar-month-badge-size items-center justify-center rounded-full text-page-calendar-month-badge-text font-medium ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                                            {formatDay(day, locale)}
+                                        </span>
+                                        <span aria-hidden="true" className="text-page-calendar-overflow-text leading-none text-muted-foreground opacity-0 transition-opacity group-hover:opacity-40">
+                                            +
+                                        </span>
+                                    </button>
+                                    <div className="min-h-0 flex-1 overflow-y-auto">
+                                        <div className="flex flex-col gap-page-calendar-cell-gap-tight">
+                                            {events.map((event) => (<div key={event.id} role="presentation" onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
+                                                    <EventPill compact event={event} onClick={() => onEventClick(event)}/>
+                                                </div>))}
+                                        </div>
+                                    </div>
+                                </div>);
+            })}
+                    </div>))}
+            </div>
+        </div>);
+}

package/dist/components/page-calendar/page-calendar.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import type { CalendarEvent, CalendarEventBase, CalendarFilter, ViewMode } from "./page-calendar.types";
+type PageCalendarProps<T extends CalendarEventBase> = {
+    defaultDate?: Date;
+    defaultView?: ViewMode;
+    filterArea?: ReactNode;
+    onAddEvent?: () => void;
+    getFilterId?: () => void;
+    events: CalendarEvent<T>[];
+    filters?: CalendarFilter[];
+    onSlotClick?: (date: Date) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    renderEvent?: (event: CalendarEvent<T>) => ReactNode;
+    onChangeFilters?: (filters: CalendarFilter[]) => void;
+};
+export declare function PageCalendar<T extends CalendarEventBase>({ events, filterArea, onAddEvent, defaultDate, onSlotClick, getFilterId, renderEvent, onEventClick, filters, defaultView, onChangeFilters: onActiveFiltersChange, }: PageCalendarProps<T>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=page-calendar.d.ts.map

package/dist/components/page-calendar/page-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-calendar.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/page-calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOxG,KAAK,iBAAiB,CAAC,CAAC,SAAS,iBAAiB,IAAI;IAClD,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACrD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CACzD,CAAC;AAIF,wBAAgB,YAAY,CAAC,CAAC,SAAS,iBAAiB,EAAE,EACtD,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,OAAc,EACd,WAAqB,EACrB,eAAe,EAAE,qBAAqB,GACzC,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BA6EtB"}