@medalsocial/meda 2.0.0 → 2.1.0

package/dist/calendar/calendar-toolbar.d.ts

@@ -0,0 +1,2 @@
+import { type CalendarToolbarProps } from './types.js';
+export declare function CalendarToolbar({ date, view, onPrev, onNext, onToday, onViewChange, periodLabel, showViewSwitcher, locale, labels: labelOverrides, className, }: CalendarToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/calendar/calendar-toolbar.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+import { formatMonthYear } from './internal/date.js';
+import { DEFAULT_CALENDAR_LABELS } from './types.js';
+const VIEW_ORDER = ['day', 'week', 'month'];
+export function CalendarToolbar({ date, view, onPrev, onNext, onToday, onViewChange, periodLabel, showViewSwitcher = true, locale = 'en-US', labels: labelOverrides, className, }) {
+    const labels = { ...DEFAULT_CALENDAR_LABELS, ...labelOverrides };
+    const title = periodLabel ?? formatMonthYear(date, locale);
+    const viewLabel = {
+        day: labels.dayView,
+        week: labels.weekView,
+        month: labels.monthView,
+    };
+    return (_jsxs("div", { "data-slot": "calendar-toolbar", className: cn('flex flex-wrap items-center gap-2 border-border/70 border-b pb-2 text-left', className), children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: onToday, className: cn('inline-flex h-9 min-h-[44px] min-w-[44px] items-center justify-center rounded-md border border-border bg-background px-3 font-medium text-xs', 'hover:bg-accent hover:text-accent-foreground'), children: labels.today }), _jsxs("div", { className: "inline-flex items-center rounded-md border border-border/70", children: [_jsx("button", { type: "button", onClick: onPrev, "aria-label": labels.previous, className: cn('inline-flex size-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-l-md', 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'), children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx("button", { type: "button", onClick: onNext, "aria-label": labels.next, className: cn('inline-flex size-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-r-md border-border border-l', 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'), children: _jsx(ChevronRight, { className: "size-4" }) })] }), _jsx("div", { className: "min-w-0", children: _jsx("p", { className: "truncate font-semibold text-foreground text-sm leading-tight @md/calendar:text-base", children: title }) })] }), showViewSwitcher && onViewChange && (_jsx("div", { className: "inline-flex rounded-md border border-border/70", children: VIEW_ORDER.map((v) => {
+                    const isActive = v === view;
+                    return (_jsx("button", { type: "button", "aria-pressed": isActive, onClick: () => onViewChange(v), className: cn('inline-flex h-9 min-h-[44px] min-w-[44px] items-center justify-center px-3 font-medium text-xs', 'first:rounded-l-md last:rounded-r-md not-last:border-border not-last:border-r', isActive
+                            ? 'bg-primary text-primary-foreground'
+                            : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'), children: viewLabel[v] }, v));
+                }) }))] }));
+}

package/dist/calendar/calendar.d.ts

@@ -0,0 +1,2 @@
+import { type CalendarProps } from './types.js';
+export declare function Calendar({ view, date, events, onDateChange, onViewChange, onEventClick, onSlotClick, weekStartsOn, locale, labels: labelOverrides, className, renderEvent, }: CalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/calendar/calendar.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { cn } from '../lib/utils.js';
+import { CalendarToolbar } from './calendar-toolbar.js';
+import { DayView } from './day-view.js';
+import { addDays, addMonths } from './internal/date.js';
+import { MonthView } from './month-view.js';
+import { DEFAULT_CALENDAR_LABELS } from './types.js';
+import { WeekView } from './week-view.js';
+export function Calendar({ view = 'month', date, events, onDateChange, onViewChange, onEventClick, onSlotClick, weekStartsOn = 0, locale = 'en-US', labels: labelOverrides, className, renderEvent, }) {
+    const labels = { ...DEFAULT_CALENDAR_LABELS, ...labelOverrides };
+    const handlePrev = useCallback(() => {
+        if (!onDateChange)
+            return;
+        if (view === 'month') {
+            onDateChange(addMonths(date, -1));
+        }
+        else if (view === 'week') {
+            onDateChange(addDays(date, -7));
+        }
+        else {
+            onDateChange(addDays(date, -1));
+        }
+    }, [view, date, onDateChange]);
+    const handleNext = useCallback(() => {
+        if (!onDateChange)
+            return;
+        if (view === 'month') {
+            onDateChange(addMonths(date, 1));
+        }
+        else if (view === 'week') {
+            onDateChange(addDays(date, 7));
+        }
+        else {
+            onDateChange(addDays(date, 1));
+        }
+    }, [view, date, onDateChange]);
+    const handleToday = useCallback(() => {
+        onDateChange?.(new Date());
+    }, [onDateChange]);
+    const handleViewChange = useCallback((next) => {
+        onViewChange?.(next);
+    }, [onViewChange]);
+    const sharedProps = {
+        date,
+        events,
+        onEventClick,
+        onSlotClick,
+        locale,
+        labels,
+        renderEvent,
+    };
+    return (_jsxs("div", { "data-slot": "calendar", className: cn('@container/calendar flex flex-col gap-3', className), children: [_jsx(CalendarToolbar, { date: date, view: view, onPrev: handlePrev, onNext: handleNext, onToday: handleToday, onViewChange: onViewChange ? handleViewChange : undefined, locale: locale, labels: labels }), view === 'month' && (_jsx(MonthView, { ...sharedProps, weekStartsOn: weekStartsOn, onDateClick: onDateChange ? (d) => onDateChange(d) : undefined })), view === 'week' && (_jsx(WeekView, { ...sharedProps, weekStartsOn: weekStartsOn, onDateClick: onDateChange ? (d) => onDateChange(d) : undefined })), view === 'day' && _jsx(DayView, { ...sharedProps })] }));
+}

package/dist/calendar/day-view.d.ts

@@ -0,0 +1,2 @@
+import { type DayViewProps } from './types.js';
+export declare function DayView({ date, events, onEventClick, onSlotClick, locale, labels: labelOverrides, className, renderEvent, }: DayViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/calendar/day-view.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { cn } from '../lib/utils.js';
+import { formatDate, formatHour, getDateKey, getHoursOfDay, isToday } from './internal/date.js';
+import { TimeSlot } from './internal/time-slot.js';
+import { DEFAULT_CALENDAR_LABELS } from './types.js';
+export function DayView({ date, events, onEventClick, onSlotClick, locale = 'en-US', labels: labelOverrides, className, renderEvent, }) {
+    const labels = { ...DEFAULT_CALENDAR_LABELS, ...labelOverrides };
+    const hours = useMemo(() => getHoursOfDay(), []);
+    const isTodayDate = isToday(date);
+    const eventsByHour = useMemo(() => {
+        const map = new Map();
+        const dateKey = getDateKey(date);
+        for (const event of events) {
+            if (event.allDay)
+                continue;
+            if (getDateKey(event.start) !== dateKey)
+                continue;
+            const hour = event.start.getHours();
+            const existing = map.get(hour) ?? [];
+            existing.push(event);
+            map.set(hour, existing);
+        }
+        for (const [hour, items] of map.entries()) {
+            items.sort((a, b) => a.start.getTime() - b.start.getTime());
+            map.set(hour, items);
+        }
+        return map;
+    }, [events, date]);
+    const totalEvents = useMemo(() => {
+        let count = 0;
+        for (const list of eventsByHour.values())
+            count += list.length;
+        return count;
+    }, [eventsByHour]);
+    return (_jsxs("section", { "data-slot": "calendar-day-view", "aria-label": labels.dayView, className: cn('@container/calendar overflow-hidden rounded-lg border border-border bg-background', className), children: [_jsx("div", { className: cn('border-border border-b bg-muted/50 px-4 py-3', isTodayDate && 'bg-primary/5'), children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h3", { className: cn('font-semibold text-lg', isTodayDate ? 'text-primary' : 'text-foreground'), children: formatDate(date, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }, locale) }), isTodayDate && (_jsx("span", { className: "font-medium text-primary text-xs", children: labels.today }))] }), _jsx("div", { className: "text-muted-foreground text-sm", children: labels.eventCountLabel(totalEvents) })] }) }), _jsx("div", { 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region needs keyboard focus per WCAG (axe scrollable-region-focusable)
+                tabIndex: 0, className: "max-h-[36rem] overflow-y-auto focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", children: hours.map((hour) => (_jsxs("div", { className: "grid grid-cols-[80px_1fr]", children: [_jsx("div", { className: "border-border border-r border-b px-3 py-3 text-right text-muted-foreground text-xs", children: formatHour(hour, locale) }), _jsx(TimeSlot, { date: date, hour: hour, events: eventsByHour.get(hour) ?? [], onSlotClick: onSlotClick, onEventClick: onEventClick, renderEvent: renderEvent, variant: "day" })] }, `row-${hour}`))) })] }));
+}

package/dist/calendar/index.d.ts

@@ -0,0 +1,6 @@
+export { Calendar } from './calendar.js';
+export { CalendarToolbar } from './calendar-toolbar.js';
+export { DayView } from './day-view.js';
+export { MonthView } from './month-view.js';
+export { type CalendarEvent, type CalendarLabels, type CalendarProps, type CalendarToolbarProps, type CalendarView, type DayViewProps, DEFAULT_CALENDAR_LABELS, type MonthViewProps, type WeekViewProps, } from './types.js';
+export { WeekView } from './week-view.js';

package/dist/calendar/index.js

@@ -0,0 +1,7 @@
+// Subpath barrel for @medalsocial/meda/calendar.
+export { Calendar } from './calendar.js';
+export { CalendarToolbar } from './calendar-toolbar.js';
+export { DayView } from './day-view.js';
+export { MonthView } from './month-view.js';
+export { DEFAULT_CALENDAR_LABELS, } from './types.js';
+export { WeekView } from './week-view.js';

package/dist/calendar/internal/date.d.ts

@@ -0,0 +1,26 @@
+export type ResolvedWeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare function startOfDay(date: Date): Date;
+export declare function endOfDay(date: Date): Date;
+export declare function addDays(date: Date, amount: number): Date;
+export declare function addMonths(date: Date, amount: number): Date;
+export declare function startOfWeek(date: Date, weekStartsOn?: ResolvedWeekStartsOn): Date;
+export declare function startOfMonth(date: Date): Date;
+export declare function endOfMonth(date: Date): Date;
+export declare function isSameDay(a: Date, b: Date): boolean;
+export declare function isSameMonth(a: Date, b: Date): boolean;
+export declare function isToday(date: Date, now?: Date): boolean;
+export declare function isPast(date: Date, now?: Date): boolean;
+export declare function setHours(date: Date, hour: number): Date;
+export declare function getDateKey(input: Date | number): string;
+export declare function getHoursOfDay(): number[];
+export declare function getWeekDays(date: Date, weekStartsOn?: ResolvedWeekStartsOn): Date[];
+/**
+ * Returns the 6-week (42 day) grid of dates for a month-view calendar.
+ * Always includes the trailing days of the previous month and leading days
+ * of the next month so the grid is always 7×6.
+ */
+export declare function getMonthCalendarDays(date: Date, weekStartsOn?: ResolvedWeekStartsOn): Date[];
+export declare function formatHour(hour: number, locale?: string): string;
+export declare function formatDayOfWeek(date: Date, locale?: string, variant?: 'narrow' | 'short' | 'long'): string;
+export declare function formatMonthYear(date: Date, locale?: string): string;
+export declare function formatDate(date: Date, options: Intl.DateTimeFormatOptions, locale?: string): string;

package/dist/calendar/internal/date.js

@@ -0,0 +1,107 @@
+// Small set of timezone-naive date helpers used by the calendar surface.
+// These intentionally operate on local-time semantics (consumer-facing
+// calendars are local-time by default). Add tz-awareness later if needed.
+export function startOfDay(date) {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    return d;
+}
+export function endOfDay(date) {
+    const d = new Date(date);
+    d.setHours(23, 59, 59, 999);
+    return d;
+}
+export function addDays(date, amount) {
+    const d = new Date(date);
+    d.setDate(d.getDate() + amount);
+    return d;
+}
+export function addMonths(date, amount) {
+    const d = new Date(date);
+    const day = d.getDate();
+    d.setDate(1);
+    d.setMonth(d.getMonth() + amount);
+    // Clamp to end-of-month if original day overflows
+    const lastDay = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
+    d.setDate(Math.min(day, lastDay));
+    return d;
+}
+export function startOfWeek(date, weekStartsOn = 0) {
+    const d = startOfDay(date);
+    const diff = (d.getDay() - weekStartsOn + 7) % 7;
+    d.setDate(d.getDate() - diff);
+    return d;
+}
+export function startOfMonth(date) {
+    const d = startOfDay(date);
+    d.setDate(1);
+    return d;
+}
+export function endOfMonth(date) {
+    const d = startOfDay(date);
+    d.setMonth(d.getMonth() + 1);
+    d.setDate(0);
+    d.setHours(23, 59, 59, 999);
+    return d;
+}
+export function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+export function isSameMonth(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+export function isToday(date, now = new Date()) {
+    return isSameDay(date, now);
+}
+export function isPast(date, now = new Date()) {
+    return date.getTime() < startOfDay(now).getTime();
+}
+export function setHours(date, hour) {
+    const d = new Date(date);
+    d.setHours(hour, 0, 0, 0);
+    return d;
+}
+export function getDateKey(input) {
+    const d = input instanceof Date ? input : new Date(input);
+    // YYYY-MM-DD in local time
+    const y = d.getFullYear();
+    const m = `${d.getMonth() + 1}`.padStart(2, '0');
+    const day = `${d.getDate()}`.padStart(2, '0');
+    return `${y}-${m}-${day}`;
+}
+export function getHoursOfDay() {
+    return Array.from({ length: 24 }, (_, i) => i);
+}
+export function getWeekDays(date, weekStartsOn = 0) {
+    const start = startOfWeek(date, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => addDays(start, i));
+}
+/**
+ * Returns the 6-week (42 day) grid of dates for a month-view calendar.
+ * Always includes the trailing days of the previous month and leading days
+ * of the next month so the grid is always 7×6.
+ */
+export function getMonthCalendarDays(date, weekStartsOn = 0) {
+    const monthStart = startOfMonth(date);
+    const gridStart = startOfWeek(monthStart, weekStartsOn);
+    return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+}
+export function formatHour(hour, locale = 'en-US') {
+    const d = new Date();
+    d.setHours(hour, 0, 0, 0);
+    return new Intl.DateTimeFormat(locale, {
+        hour: 'numeric',
+        hour12: true,
+    }).format(d);
+}
+export function formatDayOfWeek(date, locale = 'en-US', variant = 'short') {
+    return new Intl.DateTimeFormat(locale, { weekday: variant }).format(date);
+}
+export function formatMonthYear(date, locale = 'en-US') {
+    return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(date);
+}
+export function formatDate(date, options, locale = 'en-US') {
+    return new Intl.DateTimeFormat(locale, options).format(date);
+}

package/dist/calendar/internal/day-cell.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { CalendarEvent, CalendarLabels } from '../types.js';
+interface DayCellProps {
+    date: Date;
+    currentMonth: Date;
+    events: CalendarEvent[];
+    onCellClick?: (date: Date) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    onMoreClick?: (date: Date, anchorEl?: HTMLElement) => void;
+    labels: CalendarLabels;
+    renderEvent?: (event: CalendarEvent) => ReactNode;
+}
+declare function DayCellBase({ date, currentMonth, events, onCellClick, onEventClick, onMoreClick, labels, renderEvent, }: DayCellProps): import("react/jsx-runtime").JSX.Element;
+export declare const DayCell: import("react").MemoExoticComponent<typeof DayCellBase>;
+export {};

package/dist/calendar/internal/day-cell.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { cn } from '../../lib/utils.js';
+import { isPast, isSameMonth, isToday } from './date.js';
+import { EventPill } from './event-pill.js';
+const MAX_VISIBLE_ITEMS = 3;
+function DayCellBase({ date, currentMonth, events, onCellClick, onEventClick, onMoreClick, labels, renderEvent, }) {
+    const isCurrentMonth = isSameMonth(date, currentMonth);
+    const isTodayDate = isToday(date);
+    const isPastDate = isPast(date);
+    const dayNumber = date.getDate();
+    const visibleEvents = events.slice(0, MAX_VISIBLE_ITEMS);
+    const hiddenCount = events.length - MAX_VISIBLE_ITEMS;
+    const isCellInteractive = typeof onCellClick === 'function';
+    let dayNumberClass;
+    if (isTodayDate) {
+        dayNumberClass = 'border border-primary/40 bg-primary/15 text-primary';
+    }
+    else if (isCurrentMonth) {
+        dayNumberClass = 'text-foreground';
+    }
+    else {
+        dayNumberClass = 'text-muted-foreground';
+    }
+    return (_jsxs("div", { "data-slot": "calendar-day-cell", "data-today": isTodayDate ? 'true' : undefined, onClick: isCellInteractive
+            ? (event) => {
+                const target = event.target;
+                if (target.closest('[data-calendar-item="true"]'))
+                    return;
+                onCellClick(date);
+            }
+            : undefined, className: cn('group relative flex min-h-[5.5rem] flex-col gap-1 border-border border-r border-b p-1.5 transition-colors', '@md/calendar:min-h-[6.75rem]', isCurrentMonth ? 'bg-background' : 'bg-muted/30', isPastDate && isCurrentMonth && 'bg-muted/20', isTodayDate && 'border-primary/30 bg-primary/5', 'hover:bg-accent/30', isCellInteractive && 'cursor-pointer'), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("span", { className: cn('inline-flex size-6 items-center justify-center rounded-full font-medium text-xs', dayNumberClass), children: dayNumber }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [visibleEvents.map((event) => (_jsx("div", { children: renderEvent ? renderEvent(event) : _jsx(EventPill, { event: event, onClick: onEventClick }) }, event.id))), hiddenCount > 0 && (_jsx("button", { type: "button", onClick: (event) => {
+                            event.stopPropagation();
+                            onMoreClick?.(date, event.currentTarget);
+                        }, className: cn('min-h-[24px] w-full rounded px-1 py-0.5 text-left font-medium text-[11px]', 'text-primary transition-colors hover:bg-primary/10'), children: labels.moreCount(hiddenCount) }))] })] }));
+}
+export const DayCell = memo(DayCellBase);

package/dist/calendar/internal/event-pill.d.ts

@@ -0,0 +1,13 @@
+import type { CalendarEvent } from '../types.js';
+interface EventPillProps {
+    event: CalendarEvent;
+    onClick?: (event: CalendarEvent) => void;
+    variant?: 'compact' | 'full';
+    className?: string;
+}
+/**
+ * Default compact event pill used inside calendar cells/slots when the
+ * consumer does not pass a custom `renderEvent` callback.
+ */
+export declare function EventPill({ event, onClick, variant, className }: EventPillProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/calendar/internal/event-pill.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * Default compact event pill used inside calendar cells/slots when the
+ * consumer does not pass a custom `renderEvent` callback.
+ */
+export function EventPill({ event, onClick, variant = 'compact', className }) {
+    const isInteractive = typeof onClick === 'function';
+    // Apply consumer color as the left-border accent only — using it as a
+    // background risks color-contrast failures with the default foreground
+    // text. Consumers wanting full color fills should pass a custom renderEvent.
+    const style = event.color ? { borderLeftColor: event.color } : undefined;
+    const content = variant === 'compact' ? (_jsx("span", { className: "block truncate font-medium text-[11px] leading-tight", children: event.title })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "block truncate font-medium text-xs leading-tight", children: event.title }), event.allDay ? null : (_jsx("span", { className: "block text-[10px] text-muted-foreground tabular-nums", children: formatRange(event) }))] }));
+    if (isInteractive) {
+        return (_jsx("button", { type: "button", "data-slot": "calendar-event", "data-calendar-item": "true", onClick: (e) => {
+                e.stopPropagation();
+                onClick(event);
+            }, style: style, className: cn('block w-full min-h-[24px] rounded border-l-2 bg-accent px-1.5 py-0.5 text-left', 'border-primary text-accent-foreground transition-colors', 'hover:bg-accent/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', className), children: content }));
+    }
+    return (_jsx("div", { "data-slot": "calendar-event", "data-calendar-item": "true", style: style, className: cn('block w-full min-h-[24px] rounded border-l-2 bg-accent px-1.5 py-0.5', 'border-primary text-accent-foreground', className), children: content }));
+}
+function formatRange(event) {
+    const start = event.start;
+    const end = event.end;
+    const fmt = (d) => new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).format(d);
+    if (!end)
+        return fmt(start);
+    return `${fmt(start)} – ${fmt(end)}`;
+}

package/dist/calendar/internal/time-slot.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { CalendarEvent } from '../types.js';
+interface TimeSlotProps {
+    date: Date;
+    hour: number;
+    events: CalendarEvent[];
+    onSlotClick?: (slot: {
+        start: Date;
+        end: Date;
+    }) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    renderEvent?: (event: CalendarEvent) => ReactNode;
+    variant?: 'week' | 'day';
+}
+declare function TimeSlotBase({ date, hour, events, onSlotClick, onEventClick, renderEvent, variant, }: TimeSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare const TimeSlot: import("react").MemoExoticComponent<typeof TimeSlotBase>;
+export {};

package/dist/calendar/internal/time-slot.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { cn } from '../../lib/utils.js';
+import { isPast, isToday, setHours } from './date.js';
+import { EventPill } from './event-pill.js';
+function TimeSlotBase({ date, hour, events, onSlotClick, onEventClick, renderEvent, variant = 'week', }) {
+    const slotStart = setHours(date, hour);
+    const slotEnd = setHours(date, hour + 1);
+    const isPastSlot = isPast(slotStart) || (isToday(date) && hour < new Date().getHours());
+    const isTodayDate = isToday(date);
+    const isCurrentHour = isTodayDate && hour === new Date().getHours();
+    const isInteractive = typeof onSlotClick === 'function';
+    return (_jsxs("div", { "data-slot": "calendar-time-slot", "data-current-hour": isCurrentHour ? 'true' : undefined, onClick: isInteractive
+            ? (event) => {
+                const target = event.target;
+                if (target.closest('[data-calendar-item="true"]'))
+                    return;
+                onSlotClick({ start: slotStart, end: slotEnd });
+            }
+            : undefined, className: cn('group relative border-border border-b p-1 transition-colors', variant === 'week' ? 'min-h-[44px] border-r last:border-r-0' : 'min-h-[60px]', isPastSlot ? 'bg-muted/20' : 'bg-background', isCurrentHour && 'bg-primary/5', !isPastSlot && 'hover:bg-accent/30', isInteractive && 'cursor-pointer'), children: [isCurrentHour && (_jsx("div", { className: "pointer-events-none absolute top-1/2 right-0 left-0 z-10 -translate-y-1/2", children: _jsx("div", { className: "relative h-0.5 bg-primary", children: _jsx("div", { className: "absolute -top-1 -left-1 size-2.5 rounded-full bg-primary" }) }) })), _jsx("div", { className: "flex flex-col gap-1", children: events.map((event) => (_jsx("div", { children: renderEvent ? renderEvent(event) : _jsx(EventPill, { event: event, onClick: onEventClick }) }, event.id))) })] }));
+}
+export const TimeSlot = memo(TimeSlotBase);

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

@@ -0,0 +1,2 @@
+import { type MonthViewProps } from './types.js';
+export declare function MonthView({ date, events, onEventClick, onDateClick, onSlotClick, weekStartsOn, locale, labels: labelOverrides, className, renderEvent, }: MonthViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/calendar/month-view.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { cn } from '../lib/utils.js';
+import { addDays, formatDayOfWeek, getDateKey, getMonthCalendarDays, startOfWeek, } from './internal/date.js';
+import { DayCell } from './internal/day-cell.js';
+import { DEFAULT_CALENDAR_LABELS } from './types.js';
+export function MonthView({ date, events, onEventClick, onDateClick, onSlotClick, weekStartsOn = 0, locale = 'en-US', labels: labelOverrides, className, renderEvent, }) {
+    const labels = { ...DEFAULT_CALENDAR_LABELS, ...labelOverrides };
+    const calendarDays = useMemo(() => getMonthCalendarDays(date, weekStartsOn), [date, weekStartsOn]);
+    const eventsByDate = useMemo(() => {
+        const map = new Map();
+        for (const event of events) {
+            const key = getDateKey(event.start);
+            const existing = map.get(key) ?? [];
+            existing.push(event);
+            map.set(key, existing);
+        }
+        for (const [key, dayEvents] of map.entries()) {
+            dayEvents.sort((a, b) => a.start.getTime() - b.start.getTime());
+            map.set(key, dayEvents);
+        }
+        return map;
+    }, [events]);
+    const weekDays = useMemo(() => {
+        const baseDate = startOfWeek(new Date(2024, 0, 7), weekStartsOn);
+        return Array.from({ length: 7 }, (_, i) => formatDayOfWeek(addDays(baseDate, i), locale, 'short'));
+    }, [locale, weekStartsOn]);
+    let cellClick;
+    if (onDateClick) {
+        cellClick = (d) => onDateClick(d);
+    }
+    else if (onSlotClick) {
+        cellClick = (d) => {
+            const start = new Date(d);
+            start.setHours(0, 0, 0, 0);
+            const end = new Date(d);
+            end.setHours(23, 59, 59, 999);
+            onSlotClick({ start, end });
+        };
+    }
+    else {
+        cellClick = undefined;
+    }
+    return (_jsxs("div", { "data-slot": "calendar-month-view", className: cn('@container/calendar overflow-hidden rounded-md border border-border bg-background', className), children: [_jsx("div", { className: "grid grid-cols-7 border-border border-b bg-muted/40", children: weekDays.map((day) => (_jsx("div", { className: "border-border border-r px-1 py-1.5 text-center font-medium text-muted-foreground text-[11px] uppercase tracking-wide last:border-r-0", children: day }, `header-${day}`))) }), _jsx("div", { className: "grid grid-cols-7", children: calendarDays.map((d) => (_jsx(DayCell, { date: d, currentMonth: date, events: eventsByDate.get(getDateKey(d)) ?? [], onCellClick: cellClick, onEventClick: onEventClick, onMoreClick: onDateClick, labels: labels, renderEvent: renderEvent }, `day-${getDateKey(d)}`))) })] }));
+}

package/dist/calendar/public.d.ts

@@ -0,0 +1,6 @@
+export { Calendar } from './calendar.js';
+export { CalendarToolbar } from './calendar-toolbar.js';
+export { DayView } from './day-view.js';
+export { MonthView } from './month-view.js';
+export { type CalendarEvent, type CalendarLabels, type CalendarProps, type CalendarToolbarProps, type CalendarView, type DayViewProps, DEFAULT_CALENDAR_LABELS, type MonthViewProps, type WeekViewProps, } from './types.js';
+export { WeekView } from './week-view.js';

package/dist/calendar/public.js

@@ -0,0 +1,8 @@
+// Root re-export for @medalsocial/meda — keeps the calendar surface accessible
+// from the package root in addition to the @medalsocial/meda/calendar subpath.
+export { Calendar } from './calendar.js';
+export { CalendarToolbar } from './calendar-toolbar.js';
+export { DayView } from './day-view.js';
+export { MonthView } from './month-view.js';
+export { DEFAULT_CALENDAR_LABELS, } from './types.js';
+export { WeekView } from './week-view.js';

package/dist/calendar/types.d.ts

@@ -0,0 +1,113 @@
+import type { ReactNode } from 'react';
+import type { ResolvedWeekStartsOn } from './internal/date.js';
+export type CalendarView = 'month' | 'week' | 'day';
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    /** Event start time. */
+    start: Date;
+    /** Event end time. Optional; defaults to start + 1h when used. */
+    end?: Date;
+    /** Optional brand color, any CSS color string (hex, rgb, var()). */
+    color?: string;
+    /** Render as an all-day event (skips hour bucketing in week/day views). */
+    allDay?: boolean;
+    /** Consumer-defined extra payload — passed back via callbacks. */
+    data?: unknown;
+}
+export interface CalendarLabels {
+    today: string;
+    previous: string;
+    next: string;
+    monthView: string;
+    weekView: string;
+    dayView: string;
+    noEvents: string;
+    /** Called as `moreCount(n)` to render "+N more" labels. */
+    moreCount: (count: number) => string;
+    /** Called as `eventCountLabel(n)` to render "N events" descriptions. */
+    eventCountLabel: (count: number) => string;
+    addEvent: string;
+    viewDay: string;
+    close: string;
+}
+export declare const DEFAULT_CALENDAR_LABELS: CalendarLabels;
+export interface CalendarProps {
+    view?: CalendarView;
+    /** Currently focused date. */
+    date: Date;
+    events: CalendarEvent[];
+    onDateChange?: (date: Date) => void;
+    onViewChange?: (view: CalendarView) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Fires when the user clicks a free time slot (week/day view) or a date cell (month view). */
+    onSlotClick?: (slot: {
+        start: Date;
+        end: Date;
+    }) => void;
+    /** First day of the week. 0 = Sunday, 1 = Monday. Default 0. */
+    weekStartsOn?: ResolvedWeekStartsOn;
+    /** BCP-47 locale for header formatting. Default 'en-US'. */
+    locale?: string;
+    labels?: Partial<CalendarLabels>;
+    className?: string;
+    /** Optional custom event renderer. */
+    renderEvent?: (event: CalendarEvent) => ReactNode;
+}
+export interface MonthViewProps {
+    date: Date;
+    events: CalendarEvent[];
+    onEventClick?: (event: CalendarEvent) => void;
+    onDateClick?: (date: Date) => void;
+    onSlotClick?: (slot: {
+        start: Date;
+        end: Date;
+    }) => void;
+    weekStartsOn?: ResolvedWeekStartsOn;
+    locale?: string;
+    labels?: Partial<CalendarLabels>;
+    className?: string;
+    renderEvent?: (event: CalendarEvent) => ReactNode;
+}
+export interface WeekViewProps {
+    date: Date;
+    events: CalendarEvent[];
+    onEventClick?: (event: CalendarEvent) => void;
+    onSlotClick?: (slot: {
+        start: Date;
+        end: Date;
+    }) => void;
+    onDateClick?: (date: Date) => void;
+    weekStartsOn?: ResolvedWeekStartsOn;
+    locale?: string;
+    labels?: Partial<CalendarLabels>;
+    className?: string;
+    renderEvent?: (event: CalendarEvent) => ReactNode;
+}
+export interface DayViewProps {
+    date: Date;
+    events: CalendarEvent[];
+    onEventClick?: (event: CalendarEvent) => void;
+    onSlotClick?: (slot: {
+        start: Date;
+        end: Date;
+    }) => void;
+    locale?: string;
+    labels?: Partial<CalendarLabels>;
+    className?: string;
+    renderEvent?: (event: CalendarEvent) => ReactNode;
+}
+export interface CalendarToolbarProps {
+    date: Date;
+    view: CalendarView;
+    onPrev: () => void;
+    onNext: () => void;
+    onToday: () => void;
+    onViewChange?: (view: CalendarView) => void;
+    /** Override the auto-formatted period title (e.g. "April 2026"). */
+    periodLabel?: string;
+    showViewSwitcher?: boolean;
+    locale?: string;
+    labels?: Partial<CalendarLabels>;
+    className?: string;
+}

package/dist/calendar/types.js

@@ -0,0 +1,15 @@
+// Public types for the @medalsocial/meda/calendar surface.
+export const DEFAULT_CALENDAR_LABELS = {
+    today: 'Today',
+    previous: 'Previous',
+    next: 'Next',
+    monthView: 'Month',
+    weekView: 'Week',
+    dayView: 'Day',
+    noEvents: 'No events',
+    moreCount: (count) => `+${count} more`,
+    eventCountLabel: (count) => `${count} ${count === 1 ? 'event' : 'events'}`,
+    addEvent: 'Add event',
+    viewDay: 'View day',
+    close: 'Close',
+};

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

@@ -0,0 +1,2 @@
+import { type WeekViewProps } from './types.js';
+export declare function WeekView({ date, events, onEventClick, onSlotClick, onDateClick, weekStartsOn, locale, labels: labelOverrides, className, renderEvent, }: WeekViewProps): import("react/jsx-runtime").JSX.Element;