@voyantjs/ui 0.28.1 → 0.28.3

package/dist/components/big-calendar/helpers.js

@@ -0,0 +1,217 @@
+import { addDays, addMonths, addWeeks, addYears, differenceInDays, differenceInMinutes, eachDayOfInterval, endOfMonth, endOfWeek, endOfYear, format, isSameDay, isSameMonth, isSameWeek, isSameYear, isWithinInterval, parseISO, startOfDay, startOfMonth, startOfWeek, startOfYear, subDays, subMonths, subWeeks, subYears, } from "date-fns";
+// ================ Header helpers ================ //
+export function rangeText(view, date) {
+    const formatString = "MMM d, yyyy";
+    let start;
+    let end;
+    switch (view) {
+        case "agenda":
+            start = startOfMonth(date);
+            end = endOfMonth(date);
+            break;
+        case "year":
+            start = startOfYear(date);
+            end = endOfYear(date);
+            break;
+        case "month":
+            start = startOfMonth(date);
+            end = endOfMonth(date);
+            break;
+        case "week":
+            start = startOfWeek(date);
+            end = endOfWeek(date);
+            break;
+        case "day":
+            return format(date, formatString);
+        default:
+            return "";
+    }
+    return `${format(start, formatString)} - ${format(end, formatString)}`;
+}
+export function navigateDate(date, view, direction) {
+    const operations = {
+        agenda: direction === "next" ? addMonths : subMonths,
+        year: direction === "next" ? addYears : subYears,
+        month: direction === "next" ? addMonths : subMonths,
+        week: direction === "next" ? addWeeks : subWeeks,
+        day: direction === "next" ? addDays : subDays,
+    };
+    return operations[view](date, 1);
+}
+export function getEventsCount(events, date, view) {
+    const compareFns = {
+        agenda: isSameMonth,
+        year: isSameYear,
+        day: isSameDay,
+        week: isSameWeek,
+        month: isSameMonth,
+    };
+    return events.filter((event) => compareFns[view](new Date(event.startDate), date)).length;
+}
+// ================ Week and day view helpers ================ //
+export function getCurrentEvents(events) {
+    const now = new Date();
+    return (events.filter((event) => isWithinInterval(now, {
+        start: parseISO(event.startDate),
+        end: parseISO(event.endDate),
+    })) || null);
+}
+export function groupEvents(dayEvents) {
+    const sortedEvents = [...dayEvents].sort((a, b) => parseISO(a.startDate).getTime() - parseISO(b.startDate).getTime());
+    const groups = [];
+    for (const event of sortedEvents) {
+        const eventStart = parseISO(event.startDate);
+        let placed = false;
+        for (const group of groups) {
+            const lastEventInGroup = group[group.length - 1];
+            if (!lastEventInGroup)
+                continue;
+            const lastEventEnd = parseISO(lastEventInGroup.endDate);
+            if (eventStart >= lastEventEnd) {
+                group.push(event);
+                placed = true;
+                break;
+            }
+        }
+        if (!placed)
+            groups.push([event]);
+    }
+    return groups;
+}
+export function getEventBlockStyle(event, day, groupIndex, groupSize, visibleHoursRange) {
+    const startDate = parseISO(event.startDate);
+    const dayStart = new Date(day).setHours(0, 0, 0, 0);
+    const dayStartDate = new Date(dayStart);
+    const eventStart = startDate < dayStartDate ? dayStartDate : startDate;
+    const startMinutes = differenceInMinutes(eventStart, dayStartDate);
+    let top;
+    if (visibleHoursRange) {
+        const visibleStartMinutes = visibleHoursRange.from * 60;
+        const visibleEndMinutes = visibleHoursRange.to * 60;
+        const visibleRangeMinutes = visibleEndMinutes - visibleStartMinutes;
+        top = ((startMinutes - visibleStartMinutes) / visibleRangeMinutes) * 100;
+    }
+    else {
+        top = (startMinutes / 1440) * 100;
+    }
+    const width = 100 / groupSize;
+    const left = groupIndex * width;
+    return { top: `${top}%`, width: `${width}%`, left: `${left}%` };
+}
+export function isWorkingHour(day, hour, workingHours) {
+    const dayIndex = day.getDay();
+    const dayHours = workingHours[dayIndex];
+    if (!dayHours)
+        return false;
+    return hour >= dayHours.from && hour < dayHours.to;
+}
+export function getVisibleHours(visibleHours, singleDayEvents) {
+    let earliestEventHour = visibleHours.from;
+    let latestEventHour = visibleHours.to;
+    singleDayEvents.forEach((event) => {
+        const startHour = parseISO(event.startDate).getHours();
+        const endTime = parseISO(event.endDate);
+        const endHour = endTime.getHours() + (endTime.getMinutes() > 0 ? 1 : 0);
+        if (startHour < earliestEventHour)
+            earliestEventHour = startHour;
+        if (endHour > latestEventHour)
+            latestEventHour = endHour;
+    });
+    latestEventHour = Math.min(latestEventHour, 24);
+    const hours = Array.from({ length: latestEventHour - earliestEventHour }, (_, i) => i + earliestEventHour);
+    return { hours, earliestEventHour, latestEventHour };
+}
+// ================ Month view helpers ================ //
+export function getCalendarCells(selectedDate) {
+    const currentYear = selectedDate.getFullYear();
+    const currentMonth = selectedDate.getMonth();
+    const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+    const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
+    const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+    const firstDayOfMonth = getFirstDayOfMonth(currentYear, currentMonth);
+    const daysInPrevMonth = getDaysInMonth(currentYear, currentMonth - 1);
+    const totalDays = firstDayOfMonth + daysInMonth;
+    const prevMonthCells = Array.from({ length: firstDayOfMonth }, (_, i) => ({
+        day: daysInPrevMonth - firstDayOfMonth + i + 1,
+        currentMonth: false,
+        date: new Date(currentYear, currentMonth - 1, daysInPrevMonth - firstDayOfMonth + i + 1),
+    }));
+    const currentMonthCells = Array.from({ length: daysInMonth }, (_, i) => ({
+        day: i + 1,
+        currentMonth: true,
+        date: new Date(currentYear, currentMonth, i + 1),
+    }));
+    const nextMonthCells = Array.from({ length: (7 - (totalDays % 7)) % 7 }, (_, i) => ({
+        day: i + 1,
+        currentMonth: false,
+        date: new Date(currentYear, currentMonth + 1, i + 1),
+    }));
+    return [...prevMonthCells, ...currentMonthCells, ...nextMonthCells];
+}
+export function calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate) {
+    const monthStart = startOfMonth(selectedDate);
+    const monthEnd = endOfMonth(selectedDate);
+    const eventPositions = {};
+    const occupiedPositions = {};
+    eachDayOfInterval({ start: monthStart, end: monthEnd }).forEach((day) => {
+        occupiedPositions[day.toISOString()] = [false, false, false];
+    });
+    const sortedEvents = [
+        ...[...multiDayEvents].sort((a, b) => {
+            const aDuration = differenceInDays(parseISO(a.endDate), parseISO(a.startDate));
+            const bDuration = differenceInDays(parseISO(b.endDate), parseISO(b.startDate));
+            return (bDuration - aDuration || parseISO(a.startDate).getTime() - parseISO(b.startDate).getTime());
+        }),
+        ...[...singleDayEvents].sort((a, b) => parseISO(a.startDate).getTime() - parseISO(b.startDate).getTime()),
+    ];
+    sortedEvents.forEach((event) => {
+        const eventStart = parseISO(event.startDate);
+        const eventEnd = parseISO(event.endDate);
+        const eventDays = eachDayOfInterval({
+            start: eventStart < monthStart ? monthStart : eventStart,
+            end: eventEnd > monthEnd ? monthEnd : eventEnd,
+        });
+        let position = -1;
+        for (let i = 0; i < 3; i++) {
+            if (eventDays.every((day) => {
+                const dayPositions = occupiedPositions[startOfDay(day).toISOString()];
+                return dayPositions && !dayPositions[i];
+            })) {
+                position = i;
+                break;
+            }
+        }
+        if (position !== -1) {
+            eventDays.forEach((day) => {
+                const dayKey = startOfDay(day).toISOString();
+                const slot = occupiedPositions[dayKey];
+                if (slot)
+                    slot[position] = true;
+            });
+            eventPositions[event.id] = position;
+        }
+    });
+    return eventPositions;
+}
+export function getMonthCellEvents(date, events, eventPositions) {
+    const eventsForDate = events.filter((event) => {
+        const eventStart = parseISO(event.startDate);
+        const eventEnd = parseISO(event.endDate);
+        return ((date >= eventStart && date <= eventEnd) ||
+            isSameDay(date, eventStart) ||
+            isSameDay(date, eventEnd));
+    });
+    return eventsForDate
+        .map((event) => ({
+        ...event,
+        position: eventPositions[event.id] ?? -1,
+        isMultiDay: event.startDate !== event.endDate,
+    }))
+        .sort((a, b) => {
+        if (a.isMultiDay && !b.isMultiDay)
+            return -1;
+        if (!a.isMultiDay && b.isMultiDay)
+            return 1;
+        return a.position - b.position;
+    });
+}

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

@@ -0,0 +1,20 @@
+export { CalendarView } from "./calendar-view.js";
+export { ChangeBadgeVariantInput } from "./change-badge-variant-input.js";
+export { CalendarProvider, useCalendar } from "./context.js";
+export { CalendarHeader } from "./header/calendar-header.js";
+export { DateNavigator } from "./header/date-navigator.js";
+export { TodayButton } from "./header/today-button.js";
+export { UserSelect } from "./header/user-select.js";
+export type { ICalendarCell, IEvent, IUser } from "./interfaces.js";
+export { CalendarMonthView } from "./month-view/calendar-month-view.js";
+export { DayCell } from "./month-view/day-cell.js";
+export { EventBullet } from "./month-view/event-bullet.js";
+export { MonthEventBadge } from "./month-view/month-event-badge.js";
+export type { TBadgeVariant, TCalendarView, TEventColor, TVisibleHours, TWorkingHours, } from "./types.js";
+export { CalendarDayView } from "./week-and-day-view/calendar-day-view.js";
+export { CalendarTimeline } from "./week-and-day-view/calendar-time-line.js";
+export { CalendarWeekView } from "./week-and-day-view/calendar-week-view.js";
+export { DayViewMultiDayEventsRow } from "./week-and-day-view/day-view-multi-day-events-row.js";
+export { EventBlock } from "./week-and-day-view/event-block.js";
+export { WeekViewMultiDayEventsRow } from "./week-and-day-view/week-view-multi-day-events-row.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/big-calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AACnE,YAAY,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,GACd,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAA;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAA;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAA;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,sDAAsD,CAAA;AAC/F,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAA;AAC/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,uDAAuD,CAAA"}

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

@@ -0,0 +1,17 @@
+export { CalendarView } from "./calendar-view.js";
+export { ChangeBadgeVariantInput } from "./change-badge-variant-input.js";
+export { CalendarProvider, useCalendar } from "./context.js";
+export { CalendarHeader } from "./header/calendar-header.js";
+export { DateNavigator } from "./header/date-navigator.js";
+export { TodayButton } from "./header/today-button.js";
+export { UserSelect } from "./header/user-select.js";
+export { CalendarMonthView } from "./month-view/calendar-month-view.js";
+export { DayCell } from "./month-view/day-cell.js";
+export { EventBullet } from "./month-view/event-bullet.js";
+export { MonthEventBadge } from "./month-view/month-event-badge.js";
+export { CalendarDayView } from "./week-and-day-view/calendar-day-view.js";
+export { CalendarTimeline } from "./week-and-day-view/calendar-time-line.js";
+export { CalendarWeekView } from "./week-and-day-view/calendar-week-view.js";
+export { DayViewMultiDayEventsRow } from "./week-and-day-view/day-view-multi-day-events-row.js";
+export { EventBlock } from "./week-and-day-view/event-block.js";
+export { WeekViewMultiDayEventsRow } from "./week-and-day-view/week-view-multi-day-events-row.js";

package/dist/components/big-calendar/interfaces.d.ts

@@ -0,0 +1,21 @@
+import type { TEventColor } from "./types.js";
+export interface IUser {
+    id: string;
+    name: string;
+    picturePath?: string | null;
+}
+export interface IEvent {
+    id: string;
+    startDate: string;
+    endDate: string;
+    title: string;
+    description?: string;
+    color: TEventColor;
+    user?: IUser;
+}
+export interface ICalendarCell {
+    day: number;
+    currentMonth: boolean;
+    date: Date;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/components/big-calendar/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/components/big-calendar/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,IAAI,CAAA;CACX"}

package/dist/components/big-calendar/interfaces.js

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

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

@@ -0,0 +1,10 @@
+import type { IEvent } from "../interfaces.js";
+interface IProps {
+    singleDayEvents: IEvent[];
+    multiDayEvents: IEvent[];
+    /** Optional callback when a day cell number is clicked. */
+    onDayClick?: (date: Date) => void;
+}
+export declare function CalendarMonthView({ singleDayEvents, multiDayEvents, onDayClick }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=calendar-month-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month-view.d.ts","sourceRoot":"","sources":["../../../../src/components/big-calendar/month-view/calendar-month-view.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAG9C,UAAU,MAAM;IACd,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CAClC;AAID,wBAAgB,iBAAiB,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,MAAM,2CAmCxF"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useCalendar } from "../context.js";
+import { calculateMonthEventPositions, getCalendarCells } from "../helpers.js";
+import { DayCell } from "./day-cell.js";
+const WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+export function CalendarMonthView({ singleDayEvents, multiDayEvents, onDayClick }) {
+    const { selectedDate } = useCalendar();
+    const allEvents = [...multiDayEvents, ...singleDayEvents];
+    const cells = React.useMemo(() => getCalendarCells(selectedDate), [selectedDate]);
+    const eventPositions = React.useMemo(() => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate), [multiDayEvents, singleDayEvents, selectedDate]);
+    return (_jsxs("div", { children: [_jsx("div", { className: "grid grid-cols-7 divide-x", children: WEEK_DAYS.map((day) => (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx("span", { className: "text-xs font-medium text-muted-foreground", children: day }) }, day))) }), _jsx("div", { className: "grid grid-cols-7 overflow-hidden", children: cells.map((cell) => (_jsx(DayCell, { cell: cell, events: allEvents, eventPositions: eventPositions, onDayClick: onDayClick }, cell.date.toISOString()))) })] }));
+}

package/dist/components/big-calendar/month-view/day-cell.d.ts

@@ -0,0 +1,11 @@
+import type { ICalendarCell, IEvent } from "../interfaces.js";
+interface IProps {
+    cell: ICalendarCell;
+    events: IEvent[];
+    eventPositions: Record<string, number>;
+    /** Optional override; defaults to selecting the date and switching to day view if onJumpToDay supplied. */
+    onDayClick?: (date: Date) => void;
+}
+export declare function DayCell({ cell, events, eventPositions, onDayClick }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=day-cell.d.ts.map

package/dist/components/big-calendar/month-view/day-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/big-calendar/month-view/day-cell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAI7D,UAAU,MAAM;IACd,IAAI,EAAE,aAAa,CAAA;IACnB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC,2GAA2G;IAC3G,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CAClC;AAID,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,MAAM,2CA8E3E"}

package/dist/components/big-calendar/month-view/day-cell.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isToday, startOfDay } from "date-fns";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+import { useCalendar } from "../context.js";
+import { getMonthCellEvents } from "../helpers.js";
+import { EventBullet } from "./event-bullet.js";
+import { MonthEventBadge } from "./month-event-badge.js";
+const MAX_VISIBLE_EVENTS = 3;
+export function DayCell({ cell, events, eventPositions, onDayClick }) {
+    const { setSelectedDate } = useCalendar();
+    const { day, currentMonth, date } = cell;
+    const cellEvents = React.useMemo(() => getMonthCellEvents(date, events, eventPositions), [date, events, eventPositions]);
+    const isSunday = date.getDay() === 0;
+    const handleClick = () => {
+        setSelectedDate(date);
+        onDayClick?.(date);
+    };
+    return (_jsxs("div", { className: cn("flex h-full flex-col gap-1 border-l border-t py-1.5 lg:pb-2 lg:pt-1", isSunday && "border-l-0"), children: [_jsx("button", { type: "button", onClick: handleClick, className: cn("flex size-6 translate-x-1 items-center justify-center rounded-full text-xs font-semibold hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring lg:px-2", !currentMonth && "opacity-20", isToday(date) && "bg-primary font-bold text-primary-foreground hover:bg-primary"), children: day }), _jsx("div", { className: cn("flex h-6 gap-1 px-2 lg:h-[94px] lg:flex-col lg:gap-2 lg:px-0", !currentMonth && "opacity-50"), children: [0, 1, 2].map((position) => {
+                    const event = cellEvents.find((e) => e.position === position);
+                    const eventKey = event ? `event-${event.id}-${position}` : `empty-${position}`;
+                    return (_jsx("div", { className: "lg:flex-1", children: event ? (_jsxs(_Fragment, { children: [_jsx(EventBullet, { className: "lg:hidden", color: event.color }), _jsx(MonthEventBadge, { className: "hidden lg:flex", event: event, cellDate: startOfDay(date) })] })) : null }, eventKey));
+                }) }), cellEvents.length > MAX_VISIBLE_EVENTS ? (_jsxs("p", { className: cn("h-4.5 px-1.5 text-xs font-semibold text-muted-foreground", !currentMonth && "opacity-50"), children: [_jsxs("span", { className: "sm:hidden", children: ["+", cellEvents.length - MAX_VISIBLE_EVENTS] }), _jsxs("span", { className: "hidden sm:inline", children: [" ", cellEvents.length - MAX_VISIBLE_EVENTS, " more..."] })] })) : null] }));
+}

package/dist/components/big-calendar/month-view/event-bullet.d.ts

@@ -0,0 +1,6 @@
+import type { TEventColor } from "../types.js";
+export declare function EventBullet({ color, className }: {
+    color: TEventColor;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=event-bullet.d.ts.map

package/dist/components/big-calendar/month-view/event-bullet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-bullet.d.ts","sourceRoot":"","sources":["../../../../src/components/big-calendar/month-view/event-bullet.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAmB9C,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAE3F"}

package/dist/components/big-calendar/month-view/event-bullet.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+const eventBulletVariants = cva("size-2 rounded-full", {
+    variants: {
+        color: {
+            blue: "bg-blue-600 dark:bg-blue-500",
+            green: "bg-green-600 dark:bg-green-500",
+            red: "bg-red-600 dark:bg-red-500",
+            yellow: "bg-yellow-600 dark:bg-yellow-500",
+            purple: "bg-purple-600 dark:bg-purple-500",
+            gray: "bg-neutral-600 dark:bg-neutral-500",
+            orange: "bg-orange-600 dark:bg-orange-500",
+        },
+    },
+    defaultVariants: {
+        color: "blue",
+    },
+});
+export function EventBullet({ color, className }) {
+    return _jsx("div", { className: cn(eventBulletVariants({ color, className })) });
+}

package/dist/components/big-calendar/month-view/month-event-badge.d.ts

@@ -0,0 +1,12 @@
+import type { IEvent } from "../interfaces.js";
+interface IProps {
+    event: IEvent;
+    cellDate: Date;
+    eventCurrentDay?: number;
+    eventTotalDays?: number;
+    className?: string;
+    position?: "first" | "middle" | "last" | "none";
+}
+export declare function MonthEventBadge({ event, cellDate, eventCurrentDay, eventTotalDays, className, position: propPosition, }: IProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=month-event-badge.d.ts.map

package/dist/components/big-calendar/month-view/month-event-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-event-badge.d.ts","sourceRoot":"","sources":["../../../../src/components/big-calendar/month-view/month-event-badge.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAuC9C,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,IAAI,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;CAChD;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,cAAc,EACd,SAAS,EACT,QAAQ,EAAE,YAAY,GACvB,EAAE,MAAM,kDA8DR"}

package/dist/components/big-calendar/month-view/month-event-badge.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { endOfDay, format, isSameDay, parseISO, startOfDay } from "date-fns";
+import { cn } from "../../../lib/utils.js";
+import { useCalendar } from "../context.js";
+const eventBadgeVariants = cva("mx-1 flex size-auto h-6.5 select-none items-center justify-between gap-1.5 truncate whitespace-nowrap rounded-md border px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", {
+    variants: {
+        color: {
+            blue: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300 [&_.event-dot]:fill-blue-600",
+            green: "border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950 dark:text-green-300 [&_.event-dot]:fill-green-600",
+            red: "border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300 [&_.event-dot]:fill-red-600",
+            yellow: "border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300 [&_.event-dot]:fill-yellow-600",
+            purple: "border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300 [&_.event-dot]:fill-purple-600",
+            orange: "border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300 [&_.event-dot]:fill-orange-600",
+            gray: "border-neutral-200 bg-neutral-50 text-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 [&_.event-dot]:fill-neutral-600",
+            "blue-dot": "bg-neutral-50 dark:bg-neutral-900 [&_.event-dot]:fill-blue-600",
+            "green-dot": "bg-neutral-50 dark:bg-neutral-900 [&_.event-dot]:fill-green-600",
+            "red-dot": "bg-neutral-50 dark:bg-neutral-900 [&_.event-dot]:fill-red-600",
+            "yellow-dot": "bg-neutral-50 dark:bg-neutral-900 [&_.event-dot]:fill-yellow-600",
+            "purple-dot": "bg-neutral-50 dark:bg-neutral-900 [&_.event-dot]:fill-purple-600",
+            "orange-dot": "bg-neutral-50 dark:bg-neutral-900 [&_.event-dot]:fill-orange-600",
+            "gray-dot": "bg-neutral-50 dark:bg-neutral-900 [&_.event-dot]:fill-neutral-600",
+        },
+        multiDayPosition: {
+            first: "relative z-10 mr-0 w-[calc(100%_-_3px)] rounded-r-none border-r-0 [&>span]:mr-2.5",
+            middle: "relative z-10 mx-0 w-[calc(100%_+_1px)] rounded-none border-x-0",
+            last: "ml-0 rounded-l-none border-l-0",
+            none: "",
+        },
+    },
+    defaultVariants: {
+        color: "blue-dot",
+    },
+});
+export function MonthEventBadge({ event, cellDate, eventCurrentDay, eventTotalDays, className, position: propPosition, }) {
+    const { badgeVariant, onEventClick } = useCalendar();
+    const itemStart = startOfDay(parseISO(event.startDate));
+    const itemEnd = endOfDay(parseISO(event.endDate));
+    if (cellDate < itemStart || cellDate > itemEnd)
+        return null;
+    let position;
+    if (propPosition) {
+        position = propPosition;
+    }
+    else if (eventCurrentDay && eventTotalDays) {
+        position = "none";
+    }
+    else if (isSameDay(itemStart, itemEnd)) {
+        position = "none";
+    }
+    else if (isSameDay(cellDate, itemStart)) {
+        position = "first";
+    }
+    else if (isSameDay(cellDate, itemEnd)) {
+        position = "last";
+    }
+    else {
+        position = "middle";
+    }
+    const renderBadgeText = ["first", "none"].includes(position);
+    const color = (badgeVariant === "dot" ? `${event.color}-dot` : event.color);
+    const eventBadgeClasses = cn(eventBadgeVariants({ color, multiDayPosition: position, className }));
+    return (_jsxs("button", { type: "button", className: eventBadgeClasses, onClick: () => onEventClick?.(event), children: [_jsxs("div", { className: "flex items-center gap-1.5 truncate", children: [!["middle", "last"].includes(position) && ["mixed", "dot"].includes(badgeVariant) ? (_jsx("svg", { "aria-hidden": "true", width: "8", height: "8", viewBox: "0 0 8 8", className: "event-dot shrink-0", children: _jsx("circle", { cx: "4", cy: "4", r: "4" }) })) : null, renderBadgeText ? (_jsxs("p", { className: "flex-1 truncate font-semibold", children: [eventCurrentDay ? (_jsxs("span", { className: "text-xs", children: ["Day ", eventCurrentDay, " of ", eventTotalDays, " \u2022", " "] })) : null, event.title] })) : null] }), renderBadgeText ? _jsx("span", { children: format(parseISO(event.startDate), "h:mm a") }) : null] }));
+}

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

@@ -0,0 +1,14 @@
+export type TCalendarView = "day" | "week" | "month" | "year" | "agenda";
+export type TEventColor = "blue" | "green" | "red" | "yellow" | "purple" | "orange" | "gray";
+export type TBadgeVariant = "dot" | "colored" | "mixed";
+export type TWorkingHours = {
+    [key: number]: {
+        from: number;
+        to: number;
+    };
+};
+export type TVisibleHours = {
+    from: number;
+    to: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/big-calendar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AACxE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AAC5F,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAA;AACvD,MAAM,MAAM,aAAa,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAA;AAC3E,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA"}

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

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

package/dist/components/big-calendar/week-and-day-view/calendar-day-view.d.ts

@@ -0,0 +1,8 @@
+import type { IEvent } from "../interfaces.js";
+interface IProps {
+    singleDayEvents: IEvent[];
+    multiDayEvents: IEvent[];
+}
+export declare function CalendarDayView({ singleDayEvents, multiDayEvents }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=calendar-day-view.d.ts.map

package/dist/components/big-calendar/week-and-day-view/calendar-day-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-day-view.d.ts","sourceRoot":"","sources":["../../../../src/components/big-calendar/week-and-day-view/calendar-day-view.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAK9C,UAAU,MAAM;IACd,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB;AAED,wBAAgB,eAAe,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,MAAM,2CAkN1E"}

package/dist/components/big-calendar/week-and-day-view/calendar-day-view.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { areIntervalsOverlapping, format, parseISO } from "date-fns";
+import { Calendar as CalendarIcon, Clock, Plus, User } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../button.js";
+import { ScrollArea } from "../../scroll-area.js";
+import { useCalendar } from "../context.js";
+import { getCurrentEvents, getEventBlockStyle, getVisibleHours, groupEvents, isWorkingHour, } from "../helpers.js";
+import { CalendarTimeline } from "./calendar-time-line.js";
+import { DayViewMultiDayEventsRow } from "./day-view-multi-day-events-row.js";
+import { EventBlock } from "./event-block.js";
+export function CalendarDayView({ singleDayEvents, multiDayEvents }) {
+    const { selectedDate, users, visibleHours, workingHours, onAddEvent } = useCalendar();
+    const { hours, earliestEventHour, latestEventHour } = getVisibleHours(visibleHours, singleDayEvents);
+    const currentEvents = getCurrentEvents(singleDayEvents);
+    const dayEvents = singleDayEvents.filter((event) => {
+        const eventDate = parseISO(event.startDate);
+        return (eventDate.getDate() === selectedDate.getDate() &&
+            eventDate.getMonth() === selectedDate.getMonth() &&
+            eventDate.getFullYear() === selectedDate.getFullYear());
+    });
+    const groupedEvents = groupEvents(dayEvents);
+    return (_jsxs("div", { className: "flex", children: [_jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { children: [_jsx(DayViewMultiDayEventsRow, { selectedDate: selectedDate, multiDayEvents: multiDayEvents }), _jsxs("div", { className: "relative z-20 flex border-b", children: [_jsx("div", { className: "w-18" }), _jsxs("span", { className: "flex-1 border-l py-2 text-center text-xs font-medium text-muted-foreground", children: [format(selectedDate, "EE"), " ", _jsx("span", { className: "font-semibold text-foreground", children: format(selectedDate, "d") })] })] })] }), _jsx(ScrollArea, { className: "h-[800px]", children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "relative w-18", children: hours.map((hour, index) => (_jsx("div", { className: "relative", style: { height: "96px" }, children: _jsx("div", { className: "absolute -top-3 right-2 flex h-6 items-center", children: index !== 0 ? (_jsx("span", { className: "text-xs text-muted-foreground", children: format(new Date().setHours(hour, 0, 0, 0), "hh a") })) : null }) }, hour))) }), _jsxs("div", { className: "relative flex-1 border-l", children: [_jsxs("div", { className: "relative", children: [hours.map((hour, index) => {
+                                                    const isDisabled = !isWorkingHour(selectedDate, hour, workingHours);
+                                                    return (_jsxs("div", { className: cn("relative", isDisabled && "bg-calendar-disabled-hour"), style: { height: "96px" }, children: [index !== 0 ? (_jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 border-b" })) : null, [0, 15, 30, 45].map((minute, slot) => (_jsx("button", { type: "button", onClick: () => onAddEvent?.({
+                                                                    date: selectedDate,
+                                                                    hour,
+                                                                    minute,
+                                                                }), disabled: !onAddEvent, className: cn("absolute inset-x-0 h-[24px] cursor-pointer transition-colors hover:bg-accent disabled:cursor-default disabled:hover:bg-transparent"), style: { top: slot * 24 }, "aria-label": `Add event at ${hour}:${String(minute).padStart(2, "0")}` }, minute))), _jsx("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 border-b border-dashed" })] }, hour));
+                                                }), groupedEvents.map((group, groupIndex) => group.map((event) => {
+                                                    let style = getEventBlockStyle(event, selectedDate, groupIndex, groupedEvents.length, { from: earliestEventHour, to: latestEventHour });
+                                                    const hasOverlap = groupedEvents.some((otherGroup, otherIndex) => otherIndex !== groupIndex &&
+                                                        otherGroup.some((otherEvent) => areIntervalsOverlapping({
+                                                            start: parseISO(event.startDate),
+                                                            end: parseISO(event.endDate),
+                                                        }, {
+                                                            start: parseISO(otherEvent.startDate),
+                                                            end: parseISO(otherEvent.endDate),
+                                                        })));
+                                                    if (!hasOverlap)
+                                                        style = { ...style, width: "100%", left: "0%" };
+                                                    return (_jsx("div", { className: "absolute p-1", style: style, children: _jsx(EventBlock, { event: event }) }, event.id));
+                                                }))] }), _jsx(CalendarTimeline, { firstVisibleHour: earliestEventHour, lastVisibleHour: latestEventHour })] })] }) })] }), _jsxs("div", { className: "hidden w-64 divide-y border-l md:block", children: [_jsx("div", { className: "p-4", children: onAddEvent ? (_jsxs(Button, { variant: "outline", size: "sm", className: "w-full", onClick: () => onAddEvent({ date: selectedDate }), children: [_jsx(Plus, {}), "Add event"] })) : null }), _jsxs("div", { className: "flex-1 space-y-3", children: [currentEvents.length > 0 ? (_jsxs("div", { className: "flex items-start gap-2 px-4 pt-4", children: [_jsxs("span", { className: "relative mt-[5px] flex size-2.5", children: [_jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75" }), _jsx("span", { className: "relative inline-flex size-2.5 rounded-full bg-green-600" })] }), _jsx("p", { className: "text-sm font-semibold text-foreground", children: "Happening now" })] })) : (_jsx("p", { className: "p-4 text-center text-sm italic text-muted-foreground", children: "No events at the moment" })), currentEvents.length > 0 ? (_jsx(ScrollArea, { className: "h-[422px] px-4", children: _jsx("div", { className: "space-y-6 pb-4", children: currentEvents.map((event) => {
+                                        const eventUser = event.user
+                                            ? users.find((user) => user.id === event.user?.id)
+                                            : undefined;
+                                        return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "line-clamp-2 text-sm font-semibold", children: event.title }), eventUser ? (_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx(User, { className: "size-3.5" }), _jsx("span", { className: "text-sm", children: eventUser.name })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx(CalendarIcon, { className: "size-3.5" }), _jsx("span", { className: "text-sm", children: format(new Date(), "MMM d, yyyy") })] }), _jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx(Clock, { className: "size-3.5" }), _jsxs("span", { className: "text-sm", children: [format(parseISO(event.startDate), "h:mm a"), " -", " ", format(parseISO(event.endDate), "h:mm a")] })] })] }, event.id));
+                                    }) }) })) : null] })] })] }));
+}

package/dist/components/big-calendar/week-and-day-view/calendar-time-line.d.ts

@@ -0,0 +1,7 @@
+interface IProps {
+    firstVisibleHour: number;
+    lastVisibleHour: number;
+}
+export declare function CalendarTimeline({ firstVisibleHour, lastVisibleHour }: IProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=calendar-time-line.d.ts.map

package/dist/components/big-calendar/week-and-day-view/calendar-time-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-time-line.d.ts","sourceRoot":"","sources":["../../../../src/components/big-calendar/week-and-day-view/calendar-time-line.tsx"],"names":[],"mappings":"AAGA,UAAU,MAAM;IACd,gBAAgB,EAAE,MAAM,CAAA;IACxB,eAAe,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,eAAe,EAAE,EAAE,MAAM,kDA+B7E"}

package/dist/components/big-calendar/week-and-day-view/calendar-time-line.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import * as React from "react";
+export function CalendarTimeline({ firstVisibleHour, lastVisibleHour }) {
+    const [currentTime, setCurrentTime] = React.useState(() => new Date());
+    React.useEffect(() => {
+        const timer = setInterval(() => setCurrentTime(new Date()), 60 * 1000);
+        return () => clearInterval(timer);
+    }, []);
+    const getCurrentTimePosition = () => {
+        const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
+        const visibleStartMinutes = firstVisibleHour * 60;
+        const visibleEndMinutes = lastVisibleHour * 60;
+        const visibleRangeMinutes = visibleEndMinutes - visibleStartMinutes;
+        return ((minutes - visibleStartMinutes) / visibleRangeMinutes) * 100;
+    };
+    const currentHour = currentTime.getHours();
+    if (currentHour < firstVisibleHour || currentHour >= lastVisibleHour)
+        return null;
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-x-0 z-50 border-t border-primary", style: { top: `${getCurrentTimePosition()}%` }, children: [_jsx("div", { className: "absolute left-0 top-0 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary" }), _jsx("div", { className: "absolute -left-18 flex w-16 -translate-y-1/2 justify-end bg-background pr-1 text-xs font-medium text-primary", children: format(currentTime, "h:mm a") })] }));
+}

package/dist/components/big-calendar/week-and-day-view/calendar-week-view.d.ts

@@ -0,0 +1,8 @@
+import type { IEvent } from "../interfaces.js";
+interface IProps {
+    singleDayEvents: IEvent[];
+    multiDayEvents: IEvent[];
+}
+export declare function CalendarWeekView({ singleDayEvents, multiDayEvents }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=calendar-week-view.d.ts.map

package/dist/components/big-calendar/week-and-day-view/calendar-week-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-week-view.d.ts","sourceRoot":"","sources":["../../../../src/components/big-calendar/week-and-day-view/calendar-week-view.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAK9C,UAAU,MAAM;IACd,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,MAAM,2CAqJ3E"}