@g4rcez/components 5.0.2 → 5.0.3

package/dist/components/form/switch.jsx

@@ -2,8 +2,11 @@
 import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
 import { useStableRef } from "../../hooks/use-stable-ref";
 import { css } from "../../lib/dom";
-export const Switch = forwardRef(({ children, loading, container, error, ...props }, ref) => {
+export const Switch = forwardRef(({ children, loading, container, error, onKeyDown, onCheck: onCheckProp, ...props }, ref) => {
     const id = useId();
+    const errorId = error ? `${props.id || id}-error` : undefined;
+    const describedBy = [props["aria-describedby"], errorId].filter(Boolean).join(" ") || undefined;
+    const ariaInvalid = error ? true : props["aria-invalid"];
     const [innerChecked, setInnerChecked] = useState(props.checked ?? false);
     const checked = innerChecked;
     const innerRef = useRef(null);
@@ -25,22 +28,32 @@ export const Switch = forwardRef(({ children, loading, container, error, ...prop
     const onCheck = () => {
         const checked = !innerRef.current?.checked;
         setInnerChecked(checked);
-        props?.onCheck?.(checked);
+        onCheckProp?.(checked);
         if (innerRef.current !== null) {
             innerRef.current.checked = checked;
             innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
         }
     };
     return (<fieldset className={css("flex flex-col flex-wrap justify-center", container)} data-component="switch" disabled={props.disabled || loading}>
-            <span className="flex flex-row flex-wrap items-center">
-                <input {...props} hidden ref={innerRef} type="checkbox" checked={checked} id={props.id || id} data-trigger="change" data-checked={checked} disabled={props.disabled || loading} onChange={(e) => setInnerChecked(e.target.checked)}/>
-                <button role="switch" type="button" onClick={onCheck} aria-checked={checked} data-checked={checked} aria-labelledby={`${id}-label`} disabled={props.disabled || loading} className="relative inline-flex h-switch-track-h w-switch-track-w flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary">
-                    <span aria-hidden="true" data-checked={checked} className="inline-block aspect-square size-switch-thumb-size transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch"/>
-                </button>
-                <label htmlFor={props.id || id} className="ml-switch-gap inline-block text-switch-label-text" id={`${id}-label`}>
-                    <span className="font-medium text-foreground">{children}</span>
-                </label>
-            </span>
-            <span className="mt-switch-hint-mt flex-1 whitespace-nowrap text-switch-hint-text text-danger empty:mt-0 empty:hidden">{error}</span>
-        </fieldset>);
+                <span className="flex flex-row flex-wrap items-center">
+                    <input {...props} hidden ref={innerRef} type="checkbox" checked={checked} id={props.id || id} data-trigger="change" data-checked={checked} disabled={props.disabled || loading} onChange={(e) => setInnerChecked(e.target.checked)}/>
+                    <button role="switch" type="button" onClick={onCheck} onKeyDown={(event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (event.key === " " || event.key === "Space" || event.code === "Space" || event.key === "Enter") {
+                event.preventDefault();
+                onCheck();
+            }
+        }} aria-checked={checked} aria-invalid={ariaInvalid} aria-describedby={describedBy} data-checked={checked} aria-labelledby={`${id}-label`} disabled={props.disabled || loading} className="relative inline-flex h-switch-track-h w-switch-track-w flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary">
+                        <span aria-hidden="true" data-checked={checked} className="inline-block aspect-square size-switch-thumb-size transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch"/>
+                    </button>
+                    <label htmlFor={props.id || id} className="ml-switch-gap inline-block text-switch-label-text" id={`${id}-label`}>
+                        <span className="font-medium text-foreground">{children}</span>
+                    </label>
+                </span>
+                <span id={errorId} className="mt-switch-hint-mt flex-1 whitespace-nowrap text-switch-hint-text text-danger empty:mt-0 empty:hidden">
+                    {error}
+                </span>
+            </fieldset>);
 });

package/dist/components/form/textarea.js

@@ -0,0 +1,19 @@
+"use client";
+import { createFreeText as e } from "./free-text.js";
+//#region src/components/form/textarea.tsx
+var t = e("textarea", "textarea", { container: "w-full" }, (e) => {
+	let t = e.hasAttribute("rows"), n = (() => {
+		if (!t) return e.offsetHeight;
+		let n = window.getComputedStyle(e);
+		return e.rows * parseFloat(n.lineHeight) + parseFloat(n.paddingTop) + parseFloat(n.paddingBottom) + parseFloat(n.borderTopWidth) + parseFloat(n.borderBottomWidth);
+	})(), r = () => {
+		e.style.height = "0px", e.style.height = `${Math.max(e.scrollHeight, n)}px`;
+	};
+	return r(), e.addEventListener("input", r), () => {
+		e.removeEventListener("input", r), e.style.height = "";
+	};
+});
+//#endregion
+export { t as Textarea };
+
+//# sourceMappingURL=textarea.js.map

package/dist/components/form/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/form/textarea.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { Any } from \"../../types\";\nimport { createFreeText, FreeTextProps } from \"./free-text\";\n\nexport type TextareaProps = FreeTextProps<\"textarea\", React.ComponentProps<\"textarea\">>;\n\nexport const Textarea: React.FC<TextareaProps> = createFreeText<\"textarea\", HTMLTextAreaElement, Any>(\n    \"textarea\",\n    \"textarea\",\n    { container: \"w-full\" },\n    (textarea: HTMLTextAreaElement) => {\n        const hasRows = textarea.hasAttribute(\"rows\");\n        const computeMinHeight = (): number => {\n            if (!hasRows) return textarea.offsetHeight;\n            const s = window.getComputedStyle(textarea);\n            return (\n                textarea.rows * parseFloat(s.lineHeight) +\n                parseFloat(s.paddingTop) +\n                parseFloat(s.paddingBottom) +\n                parseFloat(s.borderTopWidth) +\n                parseFloat(s.borderBottomWidth)\n            );\n        };\n        const minHeight = computeMinHeight();\n        const adjustHeight = () => {\n            textarea.style.height = \"0px\";\n            textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight)}px`;\n        };\n        adjustHeight();\n        textarea.addEventListener(\"input\", adjustHeight);\n        return () => {\n            textarea.removeEventListener(\"input\", adjustHeight);\n            textarea.style.height = \"\";\n        };\n    }\n);\n"],"mappings":";;;AAOA,IAAa,IAAoC,EAC7C,YACA,YACA,EAAE,WAAW,SAAS,IACrB,MAAkC;CAC/B,IAAM,IAAU,EAAS,aAAa,MAAM,GAYtC,WAXiC;EACnC,IAAI,CAAC,GAAS,OAAO,EAAS;EAC9B,IAAM,IAAI,OAAO,iBAAiB,CAAQ;EAC1C,OACI,EAAS,OAAO,WAAW,EAAE,UAAU,IACvC,WAAW,EAAE,UAAU,IACvB,WAAW,EAAE,aAAa,IAC1B,WAAW,EAAE,cAAc,IAC3B,WAAW,EAAE,iBAAiB;CAEtC,GACmC,GAC7B,UAAqB;EAEvB,AADA,EAAS,MAAM,SAAS,OACxB,EAAS,MAAM,SAAS,GAAG,KAAK,IAAI,EAAS,cAAc,CAAS,EAAE;CAC1E;CAGA,OAFA,EAAa,GACb,EAAS,iBAAiB,SAAS,CAAY,SAClC;EAET,AADA,EAAS,oBAAoB,SAAS,CAAY,GAClD,EAAS,MAAM,SAAS;CAC5B;AACJ,CACJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"calendar-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/calendar-header.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,KAAK,mBAAmB,GAAG;IACvB,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACnC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC3B,WAAW,EACX,WAAW,EACX,OAAO,EACP,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,UAAU,GACb,EAAE,mBAAmB,+BAuHrB"}
+{"version":3,"file":"calendar-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/calendar-header.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,KAAK,mBAAmB,GAAG;IACvB,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACnC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC3B,WAAW,EACX,WAAW,EACX,OAAO,EACP,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,UAAU,GACb,EAAE,mBAAmB,+BA0HrB"}

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

@@ -0,0 +1,2 @@
+import { t as e } from "../../calendar-header-Dfr-CwkY.js";
+export { e as CalendarHeader };

package/dist/components/page-calendar/calendar-header.jsx

@@ -37,7 +37,7 @@ export function CalendarHeader({ currentDate, currentView, filters, filterArea,
     return (<header className="flex flex-col gap-page-calendar-header-gap">
             <div className="flex items-center justify-between gap-page-calendar-header-gap">
                 <div className="flex items-center gap-page-calendar-date-gap">
-                    <div aria-hidden="true" className={`rounded-page-calendar-badge-radius flex size-page-calendar-badge-size flex-col items-center justify-center overflow-hidden text-page-calendar-week-label-text ${isDateToday ? "bg-primary text-primary-foreground" : "bg-card text-foreground"}`}>
+                    <div aria-hidden="true" className={`flex size-page-calendar-badge-size flex-col items-center justify-center overflow-hidden rounded-page-calendar-badge-radius text-page-calendar-week-label-text ${isDateToday ? "bg-primary text-primary-foreground" : "bg-card text-foreground"}`}>
                         <span className="font-light uppercase leading-none">{formatMonthShort(currentDate, locale)}</span>
                         <span className="text-page-calendar-title-text font-medium leading-none">{formatDay(currentDate, locale)}</span>
                     </div>
@@ -60,8 +60,8 @@ export function CalendarHeader({ currentDate, currentView, filters, filterArea,
                             <CaretRightIcon size={16}/>
                         </Button>
                     </div>
-                    <div className="rounded-page-calendar-view-switch-radius flex">
-                        {VIEWS.map((v) => (<Button size="small" key={v.value} onClick={() => setCurrentView(v.value)} theme={currentView === v.value ? "primary" : "muted"} aria-pressed={currentView === v.value} className="first:rounded-l-button last:rounded-r-button rounded-button-radius-squared">
+                    <div className="flex rounded-page-calendar-view-switch-radius">
+                        {VIEWS.map((v) => (<Button size="small" key={v.value} rounded="squared" onClick={() => setCurrentView(v.value)} theme={currentView === v.value ? "primary" : "muted"} aria-pressed={currentView === v.value} className="first:rounded-l-button-radius last:rounded-r-button-radius">
                                 {v.label}
                             </Button>))}
                     </div>
@@ -73,7 +73,9 @@ export function CalendarHeader({ currentDate, currentView, filters, filterArea,
             </div>
             {filterArea ??
             (filters.length > 0 && (<div role="group" aria-label={t.pageCalendarFilter} className="flex flex-wrap items-center gap-page-calendar-filter-gap">
-                        <CalendarIcon size={14} className="text-muted-foreground" aria-hidden="true"/>
+                        <span className="text-muted-foreground">
+                            <CalendarIcon size={14} aria-hidden="true"/>
+                        </span>
                         <span className="mr-page-calendar-nav-mr text-page-calendar-filter-text text-muted-foreground">{t.pageCalendarFilter}</span>
                         {filters.map((filter) => (<Tag as="button" size="small" type="button" key={filter.id} theme={filter.theme} indicator={filter.enabled ? filter.theme : undefined} aria-pressed={filter.enabled} aria-label={`${filter.label}, ${filter.enabled ? t.pageCalendarFilterEnabled : t.pageCalendarFilterDisabled}`} onClick={() => onToggleFilter(filter.id)}>
                                 {filter.label}

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/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/month-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"month-view.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/month-view.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAK3D,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,+BAkEtG"}
+{"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

@@ -1,46 +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 { useMemo } from "react";
+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">
-            <ul role="row" aria-hidden="true" className="grid grid-cols-7 border-b border-border">
-                {WEEKDAY_LABELS.map((date) => {
+            <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 (<li key={day} className="py-page-calendar-weekday-py text-center text-page-calendar-weekday-text font-medium text-muted-foreground">
-                            {day}
-                        </li>);
-        })}
-            </ul>
-            <div role="grid" aria-label={t.pageCalendarMonthGrid} className="grid flex-1 auto-rows-fr grid-cols-7">
-                {days.map((day, idx) => {
-            const key = toDateKey(day);
-            const events = eventsByDate.get(key) || [];
-            const isCurrentMonth = isSameMonth(day, currentDate);
-            const isCurrentDay = isToday(day);
-            return (<button key={idx} type="button" onClick={() => onDayClick(day)} aria-label={`${formatFullDate(day, locale)}${events.length > 0 ? `, ${t.pageCalendarEventCount(events.length)}` : ""}`} className={`group flex min-h-page-calendar-cell-min-h cursor-pointer 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" : ""}`}>
-                            <div className="flex items-center justify-between">
-                                <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>
-                            </div>
-                            <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={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
-                                            <EventPill compact event={event} onClick={() => onEventClick(event)}/>
-                                        </div>))}
-                                </div>
-                            </div>
-                        </button>);
+            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.map

@@ -1 +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,+BAyEtB"}
+{"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"}