@g4rcez/components 4.1.1 → 4.1.3

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":"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,+BA0DtG"}

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

@@ -0,0 +1,46 @@
+import { isSameMonth, isToday } from "date-fns";
+import { useLocale } from "../../hooks/use-locale";
+import { useTranslations } from "../../hooks/use-translations";
+import { EventPill } from "./event-pill";
+import { toDateKey, formatDay, getWeekDays, formatWeekDay, formatFullDate } from "./page-calendar.utils";
+import { useMemo } from "react";
+export function MonthView({ days, eventsByDate, currentDate, onEventClick, onDayClick }) {
+    const locale = useLocale();
+    const t = useTranslations();
+    const WEEKDAY_LABELS = useMemo(() => getWeekDays(new Date()), []);
+    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) => {
+            const day = formatWeekDay(date, locale);
+            return (<li key={day} className="py-2 text-center text-xs 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-32 cursor-pointer flex-col gap-1 border-b border-r border-border p-2 transition-colors hover:bg-muted hover:bg-opacity-20 ${!isCurrentMonth ? "opacity-50" : ""}`}>
+                            <div className="flex items-center justify-between">
+                                <span className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                                    {formatDay(day, locale)}
+                                </span>
+                                <span aria-hidden="true" className="text-lg 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-0.5">
+                                    {events.map((event) => (<div key={event.id} onClick={(e) => e.stopPropagation()}>
+                                            <EventPill compact event={event} onClick={() => onEventClick(event)}/>
+                                        </div>))}
+                                </div>
+                            </div>
+                        </button>);
+        })}
+            </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,+BAyEtB"}

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

@@ -0,0 +1,41 @@
+import { useMemo, useState } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { groupEventsByDate, getMonthDays, getWeekDays } from "./page-calendar.utils";
+import { CalendarHeader } from "./calendar-header";
+import { MonthView } from "./month-view";
+import { WeekView } from "./week-view";
+import { DayView } from "./day-view";
+const noop = [];
+export function PageCalendar({ events, filterArea, onAddEvent, defaultDate, onSlotClick, getFilterId, renderEvent, onEventClick, filters = noop, defaultView = "month", onChangeFilters: onActiveFiltersChange, }) {
+    const t = useTranslations();
+    const [currentView, setCurrentView] = useState(defaultView);
+    const [currentDate, setCurrentDate] = useState(() => defaultDate ?? new Date());
+    const [internalFilters, setInternalFilters] = useState(filters);
+    const toggleFilter = (id) => {
+        setInternalFilters((prev) => {
+            const next = prev.map((f) => (f.id === id ? { ...f, enabled: !f.enabled } : f));
+            onActiveFiltersChange?.(next);
+            return next;
+        });
+    };
+    const filteredEvents = useMemo(() => {
+        if (filters.length === 0)
+            return events;
+        const get = getFilterId ?? ((e) => e?.filterId);
+        return events.filter((e) => internalFilters.find((f) => f.id === get(e))?.enabled ?? true);
+    }, [events, internalFilters, filters]);
+    const eventsByDate = useMemo(() => groupEventsByDate(filteredEvents), [filteredEvents]);
+    const monthDays = useMemo(() => getMonthDays(currentDate), [currentDate]);
+    const weekDays = useMemo(() => getWeekDays(currentDate), [currentDate]);
+    const handleEventClick = (event) => onEventClick?.(event);
+    const handleDayClick = (date) => {
+        setCurrentDate(date);
+        setCurrentView("day");
+    };
+    return (<div role="application" aria-label={t.pageCalendarLabel} className="flex h-full w-full flex-grow flex-col gap-4">
+            <CalendarHeader filters={internalFilters} filterArea={filterArea} onAddEvent={onAddEvent} currentDate={currentDate} currentView={currentView} setCurrentDate={setCurrentDate} setCurrentView={setCurrentView} onToggleFilter={toggleFilter}/>
+            {currentView === "month" && (<MonthView days={monthDays} currentDate={currentDate} eventsByDate={eventsByDate} onDayClick={handleDayClick} onEventClick={handleEventClick}/>)}
+            {currentView === "week" && (<WeekView days={weekDays} currentDate={currentDate} onSlotClick={onSlotClick} eventsByDate={eventsByDate} onEventClick={handleEventClick}/>)}
+            {currentView === "day" && (<DayView currentDate={currentDate} onSlotClick={onSlotClick} renderEvent={renderEvent} eventsByDate={eventsByDate} onDateChange={setCurrentDate} onEventClick={handleEventClick}/>)}
+        </div>);
+}

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

@@ -0,0 +1,18 @@
+import type { TagProps } from "../core/tag";
+export type ViewMode = "month" | "week" | "day";
+export type CalendarEventBase = {
+    date: Date;
+    id: string;
+};
+export type CalendarEvent<T extends CalendarEventBase = CalendarEventBase> = T & {
+    title: string;
+    filterId?: string;
+    className?: string;
+};
+export type CalendarFilter = {
+    id: string;
+    label: string;
+    enabled: boolean;
+    theme: TagProps["theme"];
+};
+//# sourceMappingURL=page-calendar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-calendar.types.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/page-calendar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,IAAI,CAAC,GAAG;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC5B,CAAC"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import type { CalendarEvent, CalendarEventBase } from "./page-calendar.types";
+export declare function toDateKey(d: Date): string;
+export declare function groupEventsByDate<T extends CalendarEventBase>(events: CalendarEvent<T>[]): Map<string, CalendarEvent<T>[]>;
+export declare function getMonthDays(date: Date): Date[];
+export declare function getWeekDays(date: Date): Date[];
+export declare function getHourSlots(): number[];
+export declare function formatEventTime(date: Date, locale?: string): string;
+export declare function formatDay(date: Date, locale?: string): string;
+export declare function formatWeekDay(date: Date, locale?: string): string;
+export declare function formatWeekdayLong(date: Date, locale?: string): string;
+export declare function formatWeekdayShort(date: Date, locale?: string): string;
+export declare function formatMonthYear(date: Date, locale?: string): string;
+export declare function formatMonthShort(date: Date, locale?: string): string;
+export declare function formatHourLabel(hour: number, locale?: string): string;
+export declare function formatFullDate(date: Date, locale?: string): string;
+export declare function formatTime(date: Date, locale?: string): string;
+export declare function getWeekNumber(date: Date): number;
+export type EventColumn<T extends CalendarEventBase> = {
+    event: CalendarEvent<T>;
+    columnIndex: number;
+    columnCount: number;
+};
+export declare function computeEventColumns<T extends CalendarEventBase>(events: CalendarEvent<T>[]): EventColumn<T>[];
+//# sourceMappingURL=page-calendar.utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-calendar.utils.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/page-calendar.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAEzC;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,iBAAiB,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAY1H;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,CAQ/C;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,CAO9C;AAED,wBAAgB,YAAY,IAAI,MAAM,EAAE,CAEvC;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEtE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEpE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAElE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAEhD;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,IAAI;IACnD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,iBAAiB,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,CAoB7G"}

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

@@ -0,0 +1,93 @@
+import { addDays, startOfMonth, startOfWeek, getISOWeek } from "date-fns";
+export function toDateKey(d) {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+export function groupEventsByDate(events) {
+    const map = new Map();
+    for (const event of events) {
+        const key = toDateKey(event.date);
+        const existing = map.get(key);
+        if (existing) {
+            existing.push(event);
+        }
+        else {
+            map.set(key, [event]);
+        }
+    }
+    return map;
+}
+export function getMonthDays(date) {
+    const monthStart = startOfMonth(date);
+    const gridStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+    const days = [];
+    for (let i = 0; i < 42; i++) {
+        days.push(addDays(gridStart, i));
+    }
+    return days;
+}
+export function getWeekDays(date) {
+    const weekStart = startOfWeek(date, { weekStartsOn: 1 });
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        days.push(addDays(weekStart, i));
+    }
+    return days;
+}
+export function getHourSlots() {
+    return Array.from({ length: 24 }, (_, i) => i);
+}
+export function formatEventTime(date, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date(date));
+}
+export function formatDay(date, locale) {
+    return new Intl.DateTimeFormat(locale, { day: "numeric" }).format(date);
+}
+export function formatWeekDay(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
+}
+export function formatWeekdayLong(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "long" }).format(date);
+}
+export function formatWeekdayShort(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
+}
+export function formatMonthYear(date, locale) {
+    return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+}
+export function formatMonthShort(date, locale) {
+    return new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
+}
+export function formatHourLabel(hour, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date(0, 0, 0, hour));
+}
+export function formatFullDate(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "long", month: "short", day: "numeric", year: "numeric" }).format(date);
+}
+export function formatTime(date, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
+}
+export function getWeekNumber(date) {
+    return getISOWeek(date);
+}
+export function computeEventColumns(events) {
+    const sorted = [...events].sort((a, b) => a.date.getTime() - b.date.getTime());
+    const hourGroups = new Map();
+    for (const event of sorted) {
+        const hour = event.date.getHours();
+        const group = hourGroups.get(hour);
+        if (group) {
+            group.push(event);
+        }
+        else {
+            hourGroups.set(hour, [event]);
+        }
+    }
+    const result = [];
+    for (const group of hourGroups.values()) {
+        const columnCount = group.length;
+        group.forEach((event, columnIndex) => {
+            result.push({ event, columnIndex, columnCount });
+        });
+    }
+    return result;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"week-view.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/week-view.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3D,KAAK,aAAa,GAAG;IACjB,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;IAC3C,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACtC,CAAC;AAQF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,aAAa,+BA6FxF"}

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

@@ -0,0 +1,71 @@
+import { isToday } from "date-fns";
+import { useEffect, useRef } from "react";
+import { useLocale } from "../../hooks/use-locale";
+import { EventPill } from "./event-pill";
+import { getHourSlots, toDateKey, formatWeekdayShort, formatDay, formatHourLabel, formatFullDate, 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 WeekView({ days, eventsByDate, onEventClick, onSlotClick }) {
+    const locale = useLocale();
+    const currentHourRef = useRef(null);
+    const scrollBodyRef = useRef(null);
+    const hours = getHourSlots();
+    useEffect(() => {
+        if (scrollBodyRef.current && currentHourRef.current) {
+            const top = currentHourRef.current.offsetTop;
+            scrollBodyRef.current.scrollTop = top - scrollBodyRef.current.clientHeight / 2;
+        }
+    }, []);
+    return (<div className="flex flex-1 flex-col overflow-hidden">
+            <div className="flex flex-shrink-0 border-b border-border">
+                <div className="w-[60px] flex-shrink-0"/>
+                {days.map((day, idx) => {
+            const isCurrentDay = isToday(day);
+            return (<div key={idx} aria-label={formatFullDate(day, locale)} className="flex-1 py-2 text-center text-xs font-medium text-muted-foreground">
+                            <span className="block">{formatWeekdayShort(day, locale)}</span>
+                            <span className={`inline-flex h-6 w-6 items-center justify-center rounded-full text-sm font-bold ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                                {formatDay(day, locale)}
+                            </span>
+                        </div>);
+        })}
+            </div>
+            <div ref={scrollBodyRef} className="flex flex-1 items-start overflow-y-auto">
+                <div className="w-[60px] flex-shrink-0">
+                    {hours.map((hour) => (<div key={hour} className="relative" style={{ height: HOUR_HEIGHT }}>
+                            <span className="absolute -top-2.5 right-2 text-[10px] text-muted-foreground">
+                                {hour === 0 ? "" : formatHourLabel(hour, locale)}
+                            </span>
+                            {hour === new Date().getHours() && <div ref={currentHourRef}/>}
+                        </div>))}
+                </div>
+                {days.map((day, dayIdx) => {
+            const key = toDateKey(day);
+            const events = eventsByDate.get(key) || [];
+            return (<div key={dayIdx} className="relative flex-1 border-l border-card-border">
+                            {hours.map((hour) => {
+                    const slotDate = new Date(day);
+                    slotDate.setHours(hour, 0, 0, 0);
+                    return (<div key={hour} role="button" tabIndex={0} aria-label={formatHourLabel(hour, locale)} className="cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)} onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                onSlotClick?.(slotDate);
+                            }
+                        }}/>);
+                })}
+                            {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (<div key={event.id} className="absolute" style={{
+                        top: getTopOffset(event),
+                        height: HOUR_HEIGHT,
+                        left: `calc(${(columnIndex / columnCount) * 100}% + 1px)`,
+                        width: `calc(${100 / columnCount}% - 2px)`,
+                    }} onClick={(e) => e.stopPropagation()}>
+                                    <EventPill event={event} onClick={() => onEventClick(event)}/>
+                                </div>))}
+                        </div>);
+        })}
+            </div>
+        </div>);
+}

package/dist/components/table/filter.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { AllPaths } from "sidekicker";
+import { Any, Label } from "../../types";
+import { OptionProps } from "../form/select";
+import { Col, ColType, TableConfiguration } from "./table-lib";
+type Operators = {
+    value: string;
+    label: string;
+    symbol: string;
+    "data-default"?: string;
+};
+type OperatorTypes = "contains" | "is" | "isNot" | "notContains" | "lessThan" | "greaterThan" | "startsWith" | "endsWith";
+type Operations = Record<OperatorTypes, Operators>;
+type OperationOptions = Partial<Record<ColType, OptionProps[]>>;
+type FilterValue = string | number | string[] | boolean;
+export type FilterConfig<T extends object = object> = {
+    id: string;
+    label: Label;
+    name: AllPaths<T>;
+    type: ColType;
+    operation: Operators;
+    value: FilterValue;
+};
+type Props<T extends object> = TableConfiguration<T, {
+    cols: Col<T>[];
+    filters: FilterConfig<T>[];
+    set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
+}>;
+export declare const createFilterFromCol: <T extends Any>(f: Col<T>, options: OperationOptions, operations: Operations, rest?: Partial<FilterConfig<T>>) => FilterConfig<T>;
+export declare const useOperators: () => {
+    options: Partial<Record<ColType, OptionProps[]>>;
+    operations: Operations;
+};
+export declare const Filter: <T extends object>(props: Props<T>) => React.JSX.Element;
+type ColumnHeaderFilterProps<T extends object> = {
+    filter: FilterConfig<T>;
+    onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
+};
+export declare const ColumnHeaderFilter: <T extends object>({ filter, onDelete, set }: ColumnHeaderFilterProps<T>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=filter.d.ts.map

package/dist/components/table/filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../src/components/table/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,WAAW,EAAU,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAExF,KAAK,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3F,KAAK,aAAa,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1H,KAAK,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAEnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;AAEhE,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CACJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,GAAG,EAC7C,GAAG,GAAG,CAAC,CAAC,CAAC,EACT,SAAS,gBAAgB,EACzB,YAAY,UAAU,EACtB,OAAM,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAM,KACpC,YAAY,CAAC,CAAC,CAOhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CA0CxB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA0GvD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,MAAM,EAAE,2BAA2B,uBAAuB,CAAC,CAAC,CAAC,sBAiDzG,CAAC"}

package/dist/components/table/filter.jsx

@@ -0,0 +1,141 @@
+import { FunnelIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import React, { Fragment, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { uuid } from "../../lib/fns";
+import { Dropdown } from "../floating/dropdown";
+import { Input } from "../form/input";
+import { Select } from "../form/select";
+import { ColType, getLabel, valueFromType } from "./table-lib";
+export const createFilterFromCol = (f, options, operations, rest = {}) => {
+    const name = f.id;
+    const type = f.type ?? ColType.Text;
+    const typeOptions = options[type] ?? [];
+    const operatorId = (typeOptions.find((x) => x["data-default"])?.value ?? typeOptions[0]?.value);
+    const operation = operations[operatorId];
+    return { id: uuid(), operation, label: getLabel(f), name, type, value: "", ...rest };
+};
+export const useOperators = () => {
+    const translation = useTranslations();
+    const operations = useMemo(() => ({
+        contains: {
+            value: "contains",
+            label: translation.tableFilterTypeContains,
+            symbol: "includes",
+            "data-default": "true",
+        },
+        is: { value: "is", label: translation.tableFilterTypeIs, symbol: "is" },
+        isNot: { value: "isNot", label: translation.tableFilterTypeIsNot, symbol: "!==" },
+        notContains: {
+            value: "notContains",
+            label: translation.tableFilterTypeNotContains,
+            symbol: "notIncludes",
+        },
+        lessThan: { value: "lessThan", label: translation.tableFilterTypeLessThan, symbol: "<=" },
+        greaterThan: { value: "greaterThan", label: translation.tableFilterTypeGreaterThan, symbol: ">=" },
+        startsWith: { value: "startsWith", label: translation.tableFilterTypeStartsWith, symbol: "startsWith" },
+        endsWith: { value: "endsWith", label: translation.tableFilterTypeEndsWith, symbol: "endsWith" },
+    }), [translation]);
+    const options = useMemo(() => ({
+        [ColType.Text]: [
+            operations.is,
+            operations.isNot,
+            operations.contains,
+            operations.notContains,
+            operations.startsWith,
+            operations.endsWith,
+        ],
+        [ColType.Boolean]: [operations.is, operations.isNot],
+        [ColType.Number]: [operations.is, operations.isNot, operations.greaterThan, operations.lessThan],
+    }), [operations]);
+    return { options, operations };
+};
+export const Filter = (props) => {
+    const translation = useTranslations();
+    const operators = useOperators();
+    const onAddFilter = () => {
+        const col = props.cols.at(0);
+        props.set((prev) => [...prev, createFilterFromCol(col, operators.options, operators.operations)]);
+    };
+    const onSelectProperty = (e) => {
+        const changedId = e.target.dataset.id || "";
+        const newId = e.target.value;
+        props.set((prev) => prev.map((x) => {
+            if (changedId !== x.id)
+                return x;
+            const col = props.cols.find((x) => newId === x.id);
+            return createFilterFromCol(col, operators.options, operators.operations, { value: "" });
+        }));
+    };
+    const onSelectOperation = (e) => {
+        const id = e.target.dataset.id || "";
+        const operator = e.target.value;
+        props.set((prev) => prev.map((x) => x.id === id
+            ? {
+                ...x,
+                operation: operators.operations[operator],
+            }
+            : x));
+    };
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+    const onChangeValue = (e) => {
+        const id = e.target.dataset.id || "";
+        const value = valueFromType(e.target);
+        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
+    };
+    return (<Fragment>
+            <Dropdown arrow title={translation.tableFilterDropdownTitle} trigger={<span className="flex items-center gap-1 proportional-nums">
+                        <FunnelIcon size={14}/>
+                        {translation.tableFilterLabel} {props.filters.length === 0 ? "" : ` (${props.filters.length})`}
+                    </span>}>
+                <ul className="mt-4 space-y-2">
+                    {props.filters.map((filter) => {
+            const options = operators.options[filter.type];
+            return (<li key={`filter-select-${filter.id}`} className="flex flex-nowrap gap-3">
+                                <Select options={props.options} title={translation.tableFilterColumnTitle} placeholder={translation.tableFilterColumnPlaceholder} value={filter.name} data-id={filter.id} onChange={onSelectProperty}/>
+                                <Select data-id={filter.id} onChange={onSelectOperation} value={filter.operation.value} options={options} title={translation.tableFilterOperatorTitle} placeholder={translation.tableFilterOperatorPlaceholder}/>
+                                <Input optionalText="" data-id={filter.id} onChange={onChangeValue} value={filter.value} type={filter.type} title={translation.tableFilterValueTitle} placeholder={translation.tableFilterValuePlaceholder}/>
+                                <div className="mt-5 flex items-center justify-center">
+                                    <button data-id={filter.id} type="button" onClick={onDelete}>
+                                        <TrashIcon className="text-danger" size={16}/>
+                                    </button>
+                                </div>
+                            </li>);
+        })}
+                    <li>
+                        <button type="button" onClick={onAddFilter} className="flex items-center gap-1 text-primary">
+                            <PlusIcon size={14}/> {translation.tableFilterNewFilter}
+                        </button>
+                    </li>
+                </ul>
+            </Dropdown>
+        </Fragment>);
+};
+export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
+    const translation = useTranslations();
+    const operators = useOperators();
+    const onSelectOperation = (e) => {
+        const operator = e.target.value;
+        const id = e.target.dataset.id || "";
+        set((prev) => prev.map((x) => x.id === id
+            ? {
+                ...x,
+                operation: operators.operations[operator],
+            }
+            : x));
+    };
+    const onChangeValue = (e) => {
+        const id = e.target.dataset.id || "";
+        const value = valueFromType(e.target);
+        set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
+    };
+    return (<div className="flex flex-nowrap items-center gap-4 py-2">
+            <Select data-id={filter.id} onChange={onSelectOperation} value={filter.operation.value} options={operators.options[filter.type]} title={translation.tableFilterColumnTitle} placeholder={translation.tableFilterColumnPlaceholder}/>
+            <Input optionalText=" " data-id={filter.id} onChange={onChangeValue} value={filter.value} type={filter.type} title={translation.tableFilterValueTitle} placeholder={translation.tableFilterValueTitle}/>
+            <button onClick={onDelete} data-id={filter.id} type="button" className="mt-4">
+                <TrashIcon className="text-danger" size={14}/>
+            </button>
+        </div>);
+};

package/dist/components/table/group.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Col, TableConfiguration } from "./table-lib";
+export type GroupItem<T extends object> = Col<T> & {
+    rows: T[];
+    index: number;
+    groupId: string;
+    groupName: string;
+    groupKey: keyof T;
+};
+type Props<T extends object> = TableConfiguration<T, {
+    rows: T[];
+    groups: GroupItem<T>[];
+    setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+}>;
+export declare const Group: <T extends object>(props: Props<T>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=group.d.ts.map

package/dist/components/table/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/components/table/group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,GAAG,EAAoB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CACJ,CAAC;AAqBF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA4EtD,CAAC"}