@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/calendar/event-block/event-block.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const TONE = {
+  accent: "bg-accent-soft border-accent-line",
+  neutral: "bg-surface-2 border-line-strong",
+  success: "bg-success-soft border-success/35",
+  danger: "bg-danger-soft border-danger/40",
+  warning: "bg-warning-soft border-warning/40"
+};
+function EventBlock({ event, variant = "detailed", onOpen, className }) {
+  const tone = TONE[event.tone ?? "accent"];
+  const range = event.end ? `${event.start}\u2013${event.end}` : event.start;
+  const srLabel = event.srLabel ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+    event.srLabel,
+    " "
+  ] }) : null;
+  const handleClick = onOpen ? () => onOpen(event.id) : void 0;
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        className: cn(
+          "block w-full truncate rounded-xs border px-1.5 py-0.5 text-left text-chip-text text-ink",
+          tone,
+          className
+        ),
+        children: [
+          srLabel,
+          event.start,
+          " ",
+          event.title
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cn(
+        "@container/event block w-full min-w-0 overflow-hidden rounded-event border px-2.5 py-2 text-left",
+        tone,
+        className
+      ),
+      children: [
+        srLabel,
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "grid h-full grid-cols-[96px_minmax(0,1fr)_auto] items-center gap-x-2.5",
+              "@max-[28rem]/event:grid-cols-[70px_minmax(0,1fr)]",
+              "@max-[9rem]/event:grid-cols-[minmax(0,1fr)] @max-[9rem]/event:gap-y-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap font-mono text-meta text-ink-2", children: range }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-row-title text-ink", children: event.title }),
+                event.subtitle ? /* @__PURE__ */ jsx("span", { className: "block truncate text-meta text-ink-3", children: event.subtitle }) : null
+              ] }),
+              event.trailing ? /* @__PURE__ */ jsx("span", { className: "@max-[28rem]/event:hidden", children: event.trailing }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EventBlock
+};

package/dist/calendar/event-block/index.d.ts

@@ -0,0 +1,2 @@
+export type { CalendarEvent, CalendarTone } from "../internal/types.js";
+export { EventBlock, type EventBlockProps } from "./event-block.js";

package/dist/calendar/event-block/index.js

@@ -0,0 +1,4 @@
+import { EventBlock } from "./event-block.js";
+export {
+  EventBlock
+};

package/dist/calendar/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./day-chip/index.js";
+export * from "./event-block/index.js";
+export * from "./month-view/index.js";
+export * from "./timeline-view/index.js";
+export * from "./week-view/index.js";

package/dist/calendar/index.js

@@ -0,0 +1,5 @@
+export * from "./day-chip/index.js";
+export * from "./event-block/index.js";
+export * from "./month-view/index.js";
+export * from "./timeline-view/index.js";
+export * from "./week-view/index.js";

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

@@ -0,0 +1,18 @@
+/** Calendar-date helpers. Dates are "YYYY-MM-DD" strings handled in UTC so they never shift by time zone. */
+export type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare function parseDate(value: string): Date;
+export declare function formatDate(date: Date): string;
+export declare function addDays(value: string, amount: number): string;
+/** First day of the week containing `value`; `weekStartsOn` is 0 (Sunday) to 6 (Saturday). */
+export declare function startOfWeek(value: string, weekStartsOn?: WeekStart): string;
+/** Full weeks (7 columns) covering the month that contains `value`. */
+export declare function monthGrid(value: string, weekStartsOn?: WeekStart): string[];
+export declare function minutesSinceMidnight(time: string): number;
+/** Localized short weekday name, e.g. "Mon". */
+export declare function formatWeekday(value: string, locale?: string): string;
+/** Localized short weekday followed by the day number, e.g. "Mon 12". */
+export declare function formatWeekdayAndDay(value: string, locale?: string): string;
+/** Localized short month name, e.g. "Jan". */
+export declare function formatMonthShort(value: string, locale?: string): string;
+/** Localized hour label for an hour of the day (0-23). */
+export declare function formatHour(hour: number, locale?: string): string;

package/dist/calendar/internal/date-utils.js

@@ -0,0 +1,66 @@
+function parseDate(value) {
+  const [year, month, day] = value.split("-").map(Number);
+  return new Date(Date.UTC(year ?? 1970, (month ?? 1) - 1, day ?? 1));
+}
+function formatDate(date) {
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function addDays(value, amount) {
+  const date = parseDate(value);
+  return formatDate(
+    new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + amount))
+  );
+}
+function startOfWeek(value, weekStartsOn = 1) {
+  const offset = (parseDate(value).getUTCDay() - weekStartsOn + 7) % 7;
+  return addDays(value, -offset);
+}
+function monthGrid(value, weekStartsOn = 1) {
+  const target = parseDate(value);
+  const month = target.getUTCMonth();
+  const first = formatDate(new Date(Date.UTC(target.getUTCFullYear(), month, 1)));
+  const last = formatDate(new Date(Date.UTC(target.getUTCFullYear(), month + 1, 0)));
+  const start = startOfWeek(first, weekStartsOn);
+  const end = addDays(startOfWeek(last, weekStartsOn), 6);
+  const days = [];
+  for (let day = start; day <= end; day = addDays(day, 1)) days.push(day);
+  return days;
+}
+function minutesSinceMidnight(time) {
+  const [hours, minutes] = time.split(":").map(Number);
+  return (hours ?? 0) * 60 + (minutes ?? 0);
+}
+function format(value, locale, options) {
+  return new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" }).format(parseDate(value));
+}
+function formatWeekday(value, locale) {
+  return format(value, locale, { weekday: "short" });
+}
+function formatWeekdayAndDay(value, locale) {
+  return `${formatWeekday(value, locale)} ${parseDate(value).getUTCDate()}`;
+}
+function formatMonthShort(value, locale) {
+  return format(value, locale, { month: "short" });
+}
+function formatHour(hour, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "UTC"
+  }).format(new Date(Date.UTC(1970, 0, 1, hour)));
+}
+export {
+  addDays,
+  formatDate,
+  formatHour,
+  formatMonthShort,
+  formatWeekday,
+  formatWeekdayAndDay,
+  minutesSinceMidnight,
+  monthGrid,
+  parseDate,
+  startOfWeek
+};

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

@@ -0,0 +1,3 @@
+export * from "./date-utils.js";
+export * from "./layout.js";
+export * from "./types.js";

package/dist/calendar/internal/index.js

@@ -0,0 +1,3 @@
+export * from "./date-utils.js";
+export * from "./layout.js";
+export * from "./types.js";

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

@@ -0,0 +1,14 @@
+import type { CalendarEvent } from "./types.js";
+export interface TimedEvent {
+    event: CalendarEvent;
+    start: number;
+    end: number;
+}
+export interface PositionedEvent extends TimedEvent {
+    /** 0-based column inside its group of overlapping events. */
+    column: number;
+    /** Number of columns in the group, used to split the width. */
+    columns: number;
+}
+/** Greedy column assignment for overlapping events of one day. */
+export declare function layoutDayEvents(events: CalendarEvent[]): PositionedEvent[];

package/dist/calendar/internal/layout.js

@@ -0,0 +1,42 @@
+import { minutesSinceMidnight } from "./date-utils.js";
+const MIN_DURATION = 30;
+function toMinutes(events) {
+  return events.map((event) => {
+    const start = minutesSinceMidnight(event.start);
+    const end = event.end ? minutesSinceMidnight(event.end) : start + MIN_DURATION;
+    return { event, start, end: Math.max(end, start + 1) };
+  });
+}
+function layoutDayEvents(events) {
+  const sorted = toMinutes(events).sort((a, b) => a.start - b.start || a.end - b.end);
+  const positioned = [];
+  let group = [];
+  let groupEnd = Number.NEGATIVE_INFINITY;
+  const closeGroup = () => {
+    const columns = group.reduce((max, item) => Math.max(max, item.column + 1), 0);
+    for (const item of group) {
+      item.columns = columns;
+      positioned.push(item);
+    }
+    group = [];
+  };
+  for (const item of sorted) {
+    if (group.length > 0 && item.start >= groupEnd) {
+      closeGroup();
+      groupEnd = Number.NEGATIVE_INFINITY;
+    }
+    const columnEnds = [];
+    for (const previous of group) {
+      columnEnds[previous.column] = Math.max(columnEnds[previous.column] ?? 0, previous.end);
+    }
+    let column = columnEnds.findIndex((end) => end <= item.start);
+    if (column === -1) column = columnEnds.length;
+    group.push({ ...item, column, columns: 0 });
+    groupEnd = Math.max(groupEnd, item.end);
+  }
+  closeGroup();
+  return positioned;
+}
+export {
+  layoutDayEvents
+};

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

@@ -0,0 +1,2 @@
+/** Diagonal hatch used to shade non-working days. */
+export declare const SHADED_DAY_CLASS = "bg-[repeating-linear-gradient(135deg,var(--hatch)_0_3px,transparent_3px_7px)]";

package/dist/calendar/internal/styles.js

@@ -0,0 +1,4 @@
+const SHADED_DAY_CLASS = "bg-[repeating-linear-gradient(135deg,var(--hatch)_0_3px,transparent_3px_7px)]";
+export {
+  SHADED_DAY_CLASS
+};

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+/** Visual tone shared by events and markers. */
+export type CalendarTone = "accent" | "neutral" | "success" | "danger" | "warning";
+/** A calendar event. Dates are ISO calendar dates ("YYYY-MM-DD"), times are "HH:mm". */
+export interface CalendarEvent {
+    id: string;
+    date: string;
+    start: string;
+    end?: string;
+    title: string;
+    subtitle?: string;
+    tone?: CalendarTone;
+    /** Screen-reader-only text announced before the title (e.g. the event kind). */
+    srLabel?: string;
+    /** All-day events render in the week view's top row instead of the hour grid. */
+    allDay?: boolean;
+    /** Optional node rendered at the end of the detailed block (e.g. an avatar). */
+    trailing?: ReactNode;
+}
+/** A single-day marker rendered as a chip (deadline, reminder, holiday...). */
+export interface CalendarMarker {
+    id: string;
+    date: string;
+    title: string;
+    subtitle?: string;
+    tone?: "danger" | "accent";
+    /** Screen-reader-only text announced before the title. */
+    srLabel?: string;
+}

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

@@ -0,0 +1 @@
+export { MonthView, type MonthViewProps } from "./month-view.js";

package/dist/calendar/month-view/index.js

@@ -0,0 +1,4 @@
+import { MonthView } from "./month-view.js";
+export {
+  MonthView
+};

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

@@ -0,0 +1,24 @@
+import { type WeekStart } from "../internal/date-utils.js";
+import type { CalendarEvent, CalendarMarker } from "../internal/types.js";
+export interface MonthViewProps {
+    /** Any "YYYY-MM-DD" date inside the month to show. */
+    month: string;
+    /** "YYYY-MM-DD" date highlighted as today; the view never computes it. */
+    today: string;
+    events: CalendarEvent[];
+    markers?: CalendarMarker[];
+    /** Dates ("YYYY-MM-DD") rendered with a hatch pattern (non-working days). */
+    shadedDates?: string[];
+    /** BCP 47 locale for weekday labels. Defaults to the runtime locale. */
+    locale?: string;
+    /** First day of the week, 0 (Sunday) to 6 (Saturday). Defaults to 1 (Monday). */
+    weekStartsOn?: WeekStart;
+    /** Label for the overflow button, e.g. `(n) => \`+${n} more\``. */
+    formatMore: (count: number) => string;
+    onOpenEvent?: (id: string) => void;
+    onOpenMarker?: (id: string) => void;
+    /** Called with the day's date when the overflow button is clicked. */
+    onSelectDate?: (date: string) => void;
+    className?: string;
+}
+export declare function MonthView({ month, today, events, markers, shadedDates, locale, weekStartsOn, formatMore, onOpenEvent, onOpenMarker, onSelectDate, className, }: MonthViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { DayChip } from "../day-chip/index.js";
+import { EventBlock } from "../event-block/index.js";
+import { formatWeekday, monthGrid, parseDate } from "../internal/date-utils.js";
+import { SHADED_DAY_CLASS } from "../internal/styles.js";
+const MAX_VISIBLE_ITEMS = 3;
+const DOT_TONE = {
+  accent: "bg-accent",
+  neutral: "bg-ink-3",
+  success: "bg-success",
+  danger: "bg-danger",
+  warning: "bg-warning"
+};
+function MonthView({
+  month,
+  today,
+  events,
+  markers = [],
+  shadedDates = [],
+  locale,
+  weekStartsOn = 1,
+  formatMore,
+  onOpenEvent,
+  onOpenMarker,
+  onSelectDate,
+  className
+}) {
+  const monthIndex = parseDate(month).getUTCMonth();
+  const days = monthGrid(month, weekStartsOn);
+  const shaded = new Set(shadedDates);
+  return /* @__PURE__ */ jsxs("div", { className: cn("@container/month grid min-w-0 grid-cols-7", className), children: [
+    days.slice(0, 7).map((date) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "min-w-0 truncate border-b-divider px-2.5 py-2 text-overline text-ink-3 @max-[40rem]/month:px-0.5 @max-[40rem]/month:text-center",
+        children: formatWeekday(date, locale)
+      },
+      date
+    )),
+    days.map((date) => {
+      const parsed = parseDate(date);
+      const outside = parsed.getUTCMonth() !== monthIndex;
+      const isToday = date === today;
+      const items = [
+        ...markers.filter((marker) => marker.date === date).map((item) => ({ kind: "marker", item })),
+        ...events.filter((event) => event.date === date).map((item) => ({ kind: "event", item }))
+      ];
+      const visible = items.slice(0, MAX_VISIBLE_ITEMS);
+      const hidden = items.length - visible.length;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-date": date,
+          "data-today": isToday || void 0,
+          "data-outside-month": outside || void 0,
+          "data-shaded": shaded.has(date) || void 0,
+          className: cn(
+            "flex min-h-30 min-w-0 flex-col gap-0.75 border-b-divider border-l-divider p-1.5 @max-[40rem]/month:min-h-16 @max-[40rem]/month:items-center @max-[40rem]/month:p-0.5",
+            shaded.has(date) && SHADED_DAY_CLASS,
+            outside && "opacity-45"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "grid h-5.5 min-w-6 place-items-center self-start rounded-xs font-mono text-chip-text text-ink-2",
+                  isToday && "bg-accent text-on-accent"
+                ),
+                children: parsed.getUTCDate()
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.75 @max-[40rem]/month:hidden", children: [
+              visible.map(
+                ({ kind, item }) => kind === "marker" ? /* @__PURE__ */ jsx(DayChip, { marker: item, onOpen: onOpenMarker }, item.id) : /* @__PURE__ */ jsx(EventBlock, { event: item, variant: "compact", onOpen: onOpenEvent }, item.id)
+              ),
+              hidden > 0 ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onSelectDate ? () => onSelectDate(date) : void 0,
+                  className: "px-1.5 text-left text-chip-text text-ink-3",
+                  children: formatMore(hidden)
+                }
+              ) : null
+            ] }),
+            items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "hidden flex-wrap justify-center gap-0.5 @max-[40rem]/month:flex", children: items.map(({ kind, item }) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": item.title,
+                onClick: kind === "marker" ? onOpenMarker ? () => onOpenMarker(item.id) : void 0 : onOpenEvent ? () => onOpenEvent(item.id) : void 0,
+                className: cn(
+                  "size-2 rounded-avatar p-0",
+                  kind === "marker" ? item.tone === "danger" ? DOT_TONE.danger : DOT_TONE.accent : DOT_TONE[item.tone ?? "accent"]
+                )
+              },
+              item.id
+            )) }) : null
+          ]
+        },
+        date
+      );
+    })
+  ] });
+}
+export {
+  MonthView
+};

package/dist/calendar/timeline-view/index.d.ts

@@ -0,0 +1 @@
+export { TimelineView, type TimelineViewProps } from "./timeline-view.js";

package/dist/calendar/timeline-view/index.js

@@ -0,0 +1,4 @@
+import { TimelineView } from "./timeline-view.js";
+export {
+  TimelineView
+};

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

@@ -0,0 +1,19 @@
+import type { CalendarEvent, CalendarMarker } from "../internal/types.js";
+export interface TimelineViewProps {
+    /** "YYYY-MM-DD" date highlighted as today; the view never computes it. */
+    today: string;
+    events: CalendarEvent[];
+    markers?: CalendarMarker[];
+    /** Dates ("YYYY-MM-DD") hidden from the timeline unless they are today. */
+    hiddenDates?: string[];
+    /** BCP 47 locale for date labels. Defaults to the runtime locale. */
+    locale?: string;
+    /** Suffix marking today's group, e.g. "today". */
+    todayLabel: string;
+    /** Text shown for a day without events or markers. */
+    emptyLabel: string;
+    onOpenEvent?: (id: string) => void;
+    onOpenMarker?: (id: string) => void;
+    className?: string;
+}
+export declare function TimelineView({ today, events, markers, hiddenDates, locale, todayLabel, emptyLabel, onOpenEvent, onOpenMarker, className, }: TimelineViewProps): import("react").JSX.Element;

package/dist/calendar/timeline-view/timeline-view.js

@@ -0,0 +1,64 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { DayChip } from "../day-chip/index.js";
+import { EventBlock } from "../event-block/index.js";
+import { formatMonthShort, formatWeekdayAndDay } from "../internal/date-utils.js";
+function visibleDates(today, events, markers, hiddenDates) {
+  const hidden = new Set(hiddenDates);
+  const dates = /* @__PURE__ */ new Set([
+    today,
+    ...events.map((event) => event.date),
+    ...markers.map((marker) => marker.date)
+  ]);
+  return [...dates].filter((date) => date === today || !hidden.has(date)).sort();
+}
+function TimelineView({
+  today,
+  events,
+  markers = [],
+  hiddenDates = [],
+  locale,
+  todayLabel,
+  emptyLabel,
+  onOpenEvent,
+  onOpenMarker,
+  className
+}) {
+  const dates = visibleDates(today, events, markers, hiddenDates);
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/timeline flex min-w-0 flex-col", className), children: dates.map((date) => {
+    const isToday = date === today;
+    const dayMarkers = markers.filter((marker) => marker.date === date);
+    const dayEvents = events.filter((event) => event.date === date).sort((a, b) => a.start.localeCompare(b.start));
+    const label = formatWeekdayAndDay(date, locale);
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: the group describes a whole day, not a page-level region.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "group",
+          "aria-label": isToday ? `${label} \xB7 ${todayLabel}` : label,
+          "data-date": date,
+          "data-today": isToday || void 0,
+          className: "grid grid-cols-[8rem_minmax(0,1fr)] gap-3.5 border-t-divider px-4 py-3.5 first:border-t-0 @max-[34rem]/timeline:grid-cols-[minmax(0,1fr)] @max-[34rem]/timeline:gap-y-2",
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("b", { className: cn("block text-row-title", isToday && "text-accent-ink"), children: label }),
+              /* @__PURE__ */ jsxs("span", { className: "text-meta text-ink-3", children: [
+                formatMonthShort(date, locale),
+                isToday ? ` \xB7 ${todayLabel}` : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-1.5", children: dayMarkers.length === 0 && dayEvents.length === 0 ? /* @__PURE__ */ jsx("span", { className: "py-2 text-meta text-ink-3", children: emptyLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              dayMarkers.map((marker) => /* @__PURE__ */ jsx(DayChip, { marker, onOpen: onOpenMarker }, marker.id)),
+              dayEvents.map((event) => /* @__PURE__ */ jsx(EventBlock, { event, onOpen: onOpenEvent }, event.id))
+            ] }) })
+          ]
+        },
+        date
+      )
+    );
+  }) });
+}
+export {
+  TimelineView
+};

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

@@ -0,0 +1 @@
+export { WeekView, type WeekViewProps } from "./week-view.js";

package/dist/calendar/week-view/index.js

@@ -0,0 +1,4 @@
+import { WeekView } from "./week-view.js";
+export {
+  WeekView
+};

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

@@ -0,0 +1,26 @@
+import { type WeekStart } from "../internal/date-utils.js";
+import type { CalendarEvent, CalendarMarker } from "../internal/types.js";
+export interface WeekViewProps {
+    /** Any "YYYY-MM-DD" date inside the week to show. */
+    week: string;
+    /** "YYYY-MM-DD" date highlighted as today; the view never computes it. */
+    today: string;
+    /** Current time "HH:mm" for the "now" line; without it no line is drawn. */
+    currentTime?: string;
+    events: CalendarEvent[];
+    /** Markers render in the all-day row. */
+    markers?: CalendarMarker[];
+    /** Dates ("YYYY-MM-DD") rendered with a hatch pattern (non-working days). */
+    shadedDates?: string[];
+    /** Highlighted band of working hours, [start, end) in hours. */
+    workingHours?: readonly [number, number];
+    locale?: string;
+    /** First day of the week, 0 (Sunday) to 6 (Saturday). Defaults to 1 (Monday). */
+    weekStartsOn?: WeekStart;
+    /** Label of the all-day row. */
+    allDayLabel: string;
+    onOpenEvent?: (id: string) => void;
+    onOpenMarker?: (id: string) => void;
+    className?: string;
+}
+export declare function WeekView({ week, today, currentTime, events, markers, shadedDates, workingHours, locale, weekStartsOn, allDayLabel, onOpenEvent, onOpenMarker, className, }: WeekViewProps): import("react").JSX.Element;