@lotics/ui 1.9.0 → 1.11.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@lotics/ui",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
     "./colors": "./src/colors.ts",
     "./mime": "./src/mime.ts",
+    "./download": "./src/download.ts",
     "./file_badge": "./src/file_badge.tsx",
     "./file_thumbnail": "./src/file_thumbnail.tsx",
     "./file_gallery_modal": "./src/file_gallery_modal.tsx",
@@ -18,6 +19,10 @@
     "./trend_chip": "./src/trend_chip.tsx",
     "./section_card": "./src/section_card.tsx",
     "./kpi_card": "./src/kpi_card.tsx",
+    "./kanban": "./src/kanban/index.ts",
+    "./calendar": "./src/calendar/index.ts",
+    "./gantt": "./src/gantt/index.ts",
+    "./ring_gauge": "./src/ring_gauge.tsx",
     "./alert_row": "./src/alert_row.tsx",
     "./stacked_progress_bar": "./src/stacked_progress_bar.tsx",
     "./legend_item": "./src/legend_item.tsx",

package/src/calendar/calendar_view.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import { Text } from "../text";
+import { colors } from "../colors";
+import { MonthView } from "./month_view";
+import { TimeGridView } from "./time_grid_view";
+import { addDays, addMonths, viewTitle } from "./dates";
+import type { CalendarEvent, CalendarViewMode, Weekday } from "./types";
+
+const VIEW_LABELS: Record<CalendarViewMode, string> = { month: "Tháng", week: "Tuần", day: "Ngày" };
+const VIEW_ORDER: CalendarViewMode[] = ["month", "week", "day"];
+
+export interface CalendarViewProps<T = unknown> {
+  events: CalendarEvent<T>[];
+  defaultView?: CalendarViewMode;
+  defaultDate?: Date;
+  weekStartsOn?: Weekday;
+  locale?: string;
+  onEventPress?: (event: CalendarEvent<T>) => void;
+  onDayPress?: (day: Date) => void;
+}
+
+/**
+ * Full calendar: a toolbar (prev / today / next + month·week·day switch) over
+ * the month grid or the week/day time grid. Date + view are owned here so the
+ * primitive is drop-in; the consumer only supplies events + callbacks.
+ */
+export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
+  const { events, defaultView = "month", defaultDate, weekStartsOn = 1, locale, onEventPress, onDayPress } = props;
+  const [view, setView] = useState<CalendarViewMode>(defaultView);
+  const [date, setDate] = useState<Date>(defaultDate ?? new Date());
+
+  const step = (dir: number) =>
+    setDate((d) => (view === "month" ? addMonths(d, dir) : addDays(d, dir * (view === "week" ? 7 : 1))));
+
+  // Drilling into a day (month "+N more" or a day cell) opens the day grid.
+  const drillToDay = (day: Date) => {
+    setDate(day);
+    setView("day");
+    onDayPress?.(day);
+  };
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.toolbar}>
+        <View style={styles.navGroup}>
+          <Pressable onPress={() => step(-1)} accessibilityRole="button" accessibilityLabel="Trước" style={styles.iconBtn}>
+            <Text size="lg" color="muted">‹</Text>
+          </Pressable>
+          <Pressable onPress={() => setDate(new Date())} accessibilityRole="button" style={styles.todayBtn}>
+            <Text size="sm" weight="medium">Hôm nay</Text>
+          </Pressable>
+          <Pressable onPress={() => step(1)} accessibilityRole="button" accessibilityLabel="Sau" style={styles.iconBtn}>
+            <Text size="lg" color="muted">›</Text>
+          </Pressable>
+        </View>
+
+        <Text size="lg" weight="semibold" style={styles.title} numberOfLines={1}>
+          {viewTitle(view, date, weekStartsOn, locale)}
+        </Text>
+
+        <View style={styles.viewSwitch}>
+          {VIEW_ORDER.map((v) => (
+            <Pressable
+              key={v}
+              onPress={() => setView(v)}
+              accessibilityRole="button"
+              style={[styles.viewBtn, view === v && styles.viewBtnActive]}
+            >
+              <Text size="sm" weight={view === v ? "medium" : "regular"} color={view === v ? "default" : "muted"}>
+                {VIEW_LABELS[v]}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+
+      <View style={{ flex: 1 }}>
+        {view === "month" ? (
+          <MonthView
+            date={date}
+            events={events}
+            weekStartsOn={weekStartsOn}
+            locale={locale}
+            onEventPress={onEventPress}
+            onDayPress={drillToDay}
+          />
+        ) : (
+          <TimeGridView
+            mode={view}
+            date={date}
+            events={events}
+            weekStartsOn={weekStartsOn}
+            locale={locale}
+            onEventPress={onEventPress}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.white },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    gap: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+  navGroup: { flexDirection: "row", alignItems: "center", gap: 4 },
+  iconBtn: { width: 30, height: 30, borderRadius: 6, alignItems: "center", justifyContent: "center" },
+  todayBtn: { paddingHorizontal: 12, height: 30, borderRadius: 6, borderWidth: 1, borderColor: colors.border, alignItems: "center", justifyContent: "center" },
+  title: { flex: 1, textAlign: "center" },
+  viewSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 8, padding: 2 },
+  viewBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 6 },
+  viewBtnActive: { backgroundColor: colors.white },
+});

package/src/calendar/dates.ts

@@ -0,0 +1,102 @@
+import type { CalendarViewMode, Weekday } from "./types";
+
+/**
+ * Self-contained date helpers (native `Date` + `Intl`) — no date library, so the
+ * calendar primitive adds no peer dependency to apps. All math is local-time, as
+ * a calendar displays; we never cross into UTC arithmetic.
+ */
+
+export const MS_PER_DAY = 86_400_000;
+
+export function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+export function addDays(d: Date, n: number): Date {
+  // Construct via Y/M/D so DST day-boundary shifts can't drift the calendar day.
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+}
+
+export function startOfWeek(d: Date, weekStartsOn: Weekday = 1): Date {
+  const day = d.getDay();
+  const diff = (day - weekStartsOn + 7) % 7;
+  return addDays(startOfDay(d), -diff);
+}
+
+export function startOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+
+export function endOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth() + 1, 0);
+}
+
+export function addMonths(d: Date, n: number): Date {
+  return new Date(d.getFullYear(), d.getMonth() + n, d.getDate());
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function isToday(d: Date, now: Date = new Date()): boolean {
+  return isSameDay(d, now);
+}
+
+export function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+/** Whole calendar days from `a`'s day to `b`'s day (b - a), DST-safe. */
+export function dayDiff(a: Date, b: Date): number {
+  return Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / MS_PER_DAY);
+}
+
+export function minutesSinceMidnight(d: Date): number {
+  return d.getHours() * 60 + d.getMinutes();
+}
+
+/** The day columns a view spans: 7 for week, 1 for day, the 6-week grid for month. */
+export function daysInView(mode: CalendarViewMode, date: Date, weekStartsOn: Weekday = 1): Date[] {
+  if (mode === "day") return [startOfDay(date)];
+  if (mode === "week") {
+    const start = startOfWeek(date, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => addDays(start, i));
+  }
+  // month: full weeks covering the month → always 6 rows for a stable grid height.
+  const gridStart = startOfWeek(startOfMonth(date), weekStartsOn);
+  return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+}
+
+// ─── Localized labels (Intl, browser/workspace locale) ──────────────────────
+
+export function weekdayShort(d: Date, locale?: string): string {
+  return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d);
+}
+
+export function formatTime(d: Date, locale?: string): string {
+  return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(d);
+}
+
+/** "0:00".."23:00" rail labels — 24-hour, unambiguous across locales. */
+export function hourLabel(hour: number): string {
+  return `${String(hour).padStart(2, "0")}:00`;
+}
+
+/** Header title: "March 2026" (month) or the week/day range. */
+export function viewTitle(mode: CalendarViewMode, date: Date, weekStartsOn: Weekday, locale?: string): string {
+  if (mode === "month") {
+    return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+  }
+  if (mode === "day") {
+    return new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(date);
+  }
+  const start = startOfWeek(date, weekStartsOn);
+  const end = addDays(start, 6);
+  const md = (x: Date) => new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" }).format(x);
+  return `${md(start)} – ${md(end)}, ${end.getFullYear()}`;
+}

package/src/calendar/index.ts

@@ -0,0 +1,19 @@
+export { CalendarView } from "./calendar_view";
+export type { CalendarViewProps } from "./calendar_view";
+export { TimeGridView } from "./time_grid_view";
+export type { TimeGridViewProps } from "./time_grid_view";
+export { MonthView } from "./month_view";
+export type { MonthViewProps } from "./month_view";
+export { layoutDayColumns, packEventLanes } from "./layout";
+export type { LaneBar } from "./layout";
+export type { CalendarEvent, CalendarViewMode, Weekday, EventColumn } from "./types";
+export {
+  addDays,
+  addMonths,
+  startOfWeek,
+  startOfMonth,
+  daysInView,
+  isSameDay,
+  isToday,
+  viewTitle,
+} from "./dates";

package/src/calendar/layout.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from "vitest";
+import { layoutDayColumns, packEventLanes } from "./layout";
+import type { CalendarEvent } from "./types";
+
+const DAY = new Date(2026, 0, 15);
+const at = (h: number, m = 0) => new Date(2026, 0, 15, h, m);
+const ev = (id: string, sh: number, sm: number, eh: number, em: number): CalendarEvent => ({
+  id,
+  title: id,
+  start: at(sh, sm),
+  end: at(eh, em),
+});
+
+/** column/columns keyed by event id, for order-independent assertions. */
+function geom(events: CalendarEvent[]) {
+  return Object.fromEntries(
+    layoutDayColumns(DAY, events).map((c) => [c.event.id, { column: c.column, columns: c.columns }]),
+  );
+}
+
+describe("layoutDayColumns", () => {
+  it("returns nothing for an empty day", () => {
+    expect(layoutDayColumns(DAY, [])).toEqual([]);
+  });
+
+  it("stacks non-overlapping events in a single column", () => {
+    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 11, 0, 12, 0)]);
+    expect(g.a).toEqual({ column: 0, columns: 1 });
+    expect(g.b).toEqual({ column: 0, columns: 1 });
+  });
+
+  it("splits two fully overlapping events into two columns", () => {
+    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 9, 0, 10, 0)]);
+    expect(g.a.columns).toBe(2);
+    expect(g.b.columns).toBe(2);
+    expect(new Set([g.a.column, g.b.column])).toEqual(new Set([0, 1]));
+  });
+
+  it("gives three concurrent events three columns", () => {
+    const g = geom([ev("a", 9, 0, 12, 0), ev("b", 9, 0, 12, 0), ev("c", 9, 0, 12, 0)]);
+    expect(new Set([g.a.column, g.b.column, g.c.column])).toEqual(new Set([0, 1, 2]));
+    for (const k of ["a", "b", "c"]) expect(g[k].columns).toBe(3);
+  });
+
+  it("reuses a freed column within a transitive cluster (A→B→C chain)", () => {
+    // A 9-10, B 9:30-11 (overlaps A), C 10:30-12 (overlaps B, not A).
+    // One cluster via B; 2 columns; C reuses A's column once A ends.
+    const g = geom([ev("a", 9, 0, 10, 0), ev("b", 9, 30, 11, 0), ev("c", 10, 30, 12, 0)]);
+    expect(g.a.columns).toBe(2);
+    expect(g.a.column).toBe(0);
+    expect(g.b.column).toBe(1);
+    expect(g.c.column).toBe(0); // freed by A
+  });
+
+  it("treats time-separated events as independent clusters", () => {
+    const g = geom([ev("morn1", 9, 0, 10, 0), ev("morn2", 9, 0, 10, 0), ev("aft", 14, 0, 15, 0)]);
+    expect(g.morn1.columns).toBe(2);
+    expect(g.morn2.columns).toBe(2);
+    expect(g.aft).toEqual({ column: 0, columns: 1 }); // own cluster
+  });
+
+  it("positions and floors height; clamps to the day window", () => {
+    const [c] = layoutDayColumns(DAY, [ev("x", 9, 0, 9, 5)]);
+    expect(c.topMinutes).toBe(540); // 9:00
+    expect(c.heightMinutes).toBeGreaterThanOrEqual(20); // 5-min event floored
+    const spill = layoutDayColumns(DAY, [
+      { id: "y", title: "y", start: at(23, 0), end: new Date(2026, 0, 16, 2, 0) },
+    ])[0];
+    expect(spill.topMinutes).toBe(1380); // 23:00
+    expect(spill.topMinutes + spill.heightMinutes).toBeLessThanOrEqual(1440); // clamped
+  });
+});
+
+describe("packEventLanes", () => {
+  const WEEK = new Date(2026, 0, 12); // Mon
+  const allDay = (id: string, startDay: number, endDay: number): CalendarEvent => ({
+    id,
+    title: id,
+    start: new Date(2026, 0, 12 + startDay),
+    end: new Date(2026, 0, 12 + endDay),
+    allDay: true,
+  });
+
+  it("places non-overlapping spans in one lane", () => {
+    const { bars, lanes } = packEventLanes([allDay("a", 0, 1), allDay("b", 3, 4)], WEEK, 7);
+    expect(lanes).toBe(1);
+    expect(bars.find((b) => b.event.id === "a")).toMatchObject({ startCol: 0, span: 2, lane: 0 });
+    expect(bars.find((b) => b.event.id === "b")).toMatchObject({ startCol: 3, span: 2, lane: 0 });
+  });
+
+  it("stacks overlapping multi-day spans into separate lanes", () => {
+    const { lanes } = packEventLanes([allDay("a", 0, 3), allDay("b", 2, 5)], WEEK, 7);
+    expect(lanes).toBe(2);
+  });
+
+  it("clamps a span that starts before the window and filters out-of-range", () => {
+    const before: CalendarEvent = { id: "x", title: "x", start: new Date(2026, 0, 9), end: new Date(2026, 0, 13), allDay: true };
+    const after = allDay("y", 9, 10); // entirely after a 7-day window
+    const { bars } = packEventLanes([before, after], WEEK, 7);
+    expect(bars).toHaveLength(1);
+    expect(bars[0]).toMatchObject({ event: { id: "x" }, startCol: 0, span: 2 }); // clamped to days 0..1
+  });
+});

package/src/calendar/layout.ts

@@ -0,0 +1,142 @@
+import { dayDiff } from "./dates";
+import type { CalendarEvent, EventColumn } from "./types";
+
+/** A horizontal banner placement: which day column it starts on, how many days
+ *  it spans, and which lane (row) it sits in. Used by the month grid and the
+ *  week's all-day row. */
+export interface LaneBar<T = unknown> {
+  event: CalendarEvent<T>;
+  startCol: number;
+  span: number;
+  lane: number;
+}
+
+/**
+ * Pack day-spanning events into horizontal lanes across a `numDays` window
+ * starting at `rangeStart`. Greedy first-fit: an event takes the topmost lane
+ * whose last bar ends before this event starts, else a new lane. Multi-day
+ * events become wide bars; single-day events are span-1 bars. Deterministic.
+ */
+export function packEventLanes<T>(
+  events: CalendarEvent<T>[],
+  rangeStart: Date,
+  numDays: number,
+): { bars: LaneBar<T>[]; lanes: number } {
+  const items = events
+    .map((event) => ({
+      event,
+      startCol: Math.max(0, dayDiff(rangeStart, event.start)),
+      endCol: Math.min(numDays - 1, dayDiff(rangeStart, event.end ?? event.start)),
+    }))
+    .filter((it) => it.endCol >= 0 && it.startCol <= numDays - 1 && it.endCol >= it.startCol)
+    .sort((a, b) => a.startCol - b.startCol || b.endCol - a.endCol);
+
+  const laneEnds: number[] = [];
+  const bars = items.map((it) => {
+    let lane = laneEnds.findIndex((end) => end < it.startCol);
+    if (lane === -1) {
+      lane = laneEnds.length;
+      laneEnds.push(it.endCol);
+    } else {
+      laneEnds[lane] = it.endCol;
+    }
+    return { event: it.event, startCol: it.startCol, span: it.endCol - it.startCol + 1, lane };
+  });
+  return { bars, lanes: laneEnds.length };
+}
+
+const MINUTES_PER_DAY = 1440;
+/** Short events still need a tappable height; floor the rendered span. */
+const MIN_EVENT_MINUTES = 20;
+
+function minutesInto(day: Date, t: Date): number {
+  const ms = t.getTime() - day.getTime();
+  return ms / 60000;
+}
+
+/**
+ * Position timed events for a single grid day into side-by-side columns.
+ *
+ * The defining piece of a real calendar: when events overlap in time they must
+ * share the day's width rather than stack on top of each other. We
+ *   1. clamp each event to the [0, 1440] minute window of `day`,
+ *   2. split events into overlap *clusters* (a maximal run where each event
+ *      overlaps at least one earlier event in the run — transitive),
+ *   3. greedily first-fit each cluster's events into columns (a column is free
+ *      once its last event ends at/before the next one starts),
+ *   4. give every event in a cluster the same `columns` count (the cluster's
+ *      column total) so widths line up: width = 1/columns, left = column/columns.
+ *
+ * Pure and deterministic — input order doesn't matter (we sort). All-day events
+ * are the caller's concern (the all-day row); pass only timed events here.
+ */
+export function layoutDayColumns<T>(
+  day: Date,
+  events: CalendarEvent<T>[],
+): EventColumn<T>[] {
+  const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+
+  const placed = events
+    .map((event) => {
+      const rawTop = minutesInto(dayStart, event.start);
+      const rawEnd = event.end ? minutesInto(dayStart, event.end) : rawTop + MIN_EVENT_MINUTES;
+      const topMinutes = Math.max(0, Math.min(MINUTES_PER_DAY, rawTop));
+      const endMinutes = Math.max(topMinutes, Math.min(MINUTES_PER_DAY, rawEnd));
+      return {
+        event,
+        topMinutes,
+        endMinutes,
+        heightMinutes: Math.max(MIN_EVENT_MINUTES, endMinutes - topMinutes),
+      };
+    })
+    // Earliest first; on a tie the longer event leads so it anchors column 0.
+    .sort((a, b) => a.topMinutes - b.topMinutes || b.heightMinutes - a.heightMinutes);
+
+  const result: EventColumn<T>[] = [];
+  let cluster: typeof placed = [];
+  let clusterEnd = -1;
+
+  const flush = () => {
+    if (cluster.length === 0) return;
+    // First-fit column assignment within the cluster.
+    const columnEnds: number[] = []; // running end-minute per column
+    const assigned = cluster.map((item) => {
+      // The visual span (incl. the min-height floor) is what must not collide,
+      // otherwise a short event floored to 20min could overlap the next chip.
+      const itemVisualEnd = item.topMinutes + item.heightMinutes;
+      let col = columnEnds.findIndex((end) => end <= item.topMinutes);
+      if (col === -1) {
+        col = columnEnds.length;
+        columnEnds.push(itemVisualEnd);
+      } else {
+        columnEnds[col] = itemVisualEnd;
+      }
+      return { item, col };
+    });
+    const columns = columnEnds.length;
+    for (const { item, col } of assigned) {
+      result.push({
+        event: item.event,
+        topMinutes: item.topMinutes,
+        heightMinutes: item.heightMinutes,
+        column: col,
+        columns,
+      });
+    }
+    cluster = [];
+    clusterEnd = -1;
+  };
+
+  for (const item of placed) {
+    const visualEnd = item.topMinutes + item.heightMinutes;
+    if (cluster.length > 0 && item.topMinutes >= clusterEnd) {
+      // No overlap with anything still open → previous cluster is closed.
+      flush();
+    }
+    cluster.push(item);
+    clusterEnd = Math.max(clusterEnd, visualEnd);
+  }
+  flush();
+
+  return result;
+}

package/src/calendar/month_view.tsx

@@ -0,0 +1,157 @@
+import { useMemo } from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import { Text } from "../text";
+import { colors } from "../colors";
+import { packEventLanes } from "./layout";
+import { daysInView, isSameMonth, isToday, weekdayShort } from "./dates";
+import type { CalendarEvent, Weekday } from "./types";
+
+const LANE_H = 19;
+const LANE_GAP = 2;
+const MAX_LANES = 3; // visible event lanes per week before "+N more"
+
+export interface MonthViewProps<T = unknown> {
+  date: Date;
+  events: CalendarEvent<T>[];
+  weekStartsOn?: Weekday;
+  locale?: string;
+  onEventPress?: (event: CalendarEvent<T>) => void;
+  onDayPress?: (day: Date) => void;
+}
+
+export function MonthView<T = unknown>(props: MonthViewProps<T>) {
+  const { date, events, weekStartsOn = 1, locale, onEventPress, onDayPress } = props;
+  const days = useMemo(() => daysInView("month", date, weekStartsOn), [date, weekStartsOn]);
+  const weeks = useMemo(() => Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)), [days]);
+  const weekdayLabels = useMemo(() => days.slice(0, 7).map((d) => weekdayShort(d, locale)), [days, locale]);
+  const now = new Date();
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.weekdayHeader}>
+        {weekdayLabels.map((label, i) => (
+          <View key={i} style={styles.weekdayCell}>
+            <Text size="xs" color="muted">{label.toUpperCase()}</Text>
+          </View>
+        ))}
+      </View>
+
+      {weeks.map((weekDays, w) => {
+        const { bars } = packEventLanes(events, weekDays[0], 7);
+        const visible = bars.filter((b) => b.lane < MAX_LANES);
+        const overflow = Array.from({ length: 7 }, () => 0);
+        for (const b of bars) {
+          if (b.lane >= MAX_LANES) {
+            for (let c = b.startCol; c < b.startCol + b.span && c < 7; c++) overflow[c]++;
+          }
+        }
+
+        return (
+          <View key={w} style={styles.weekRow}>
+            {/* Date numbers */}
+            <View style={styles.dateRow}>
+              {weekDays.map((day) => {
+                const inMonth = isSameMonth(day, date);
+                const today = isToday(day, now);
+                return (
+                  <Pressable
+                    key={day.toISOString()}
+                    onPress={onDayPress ? () => onDayPress(day) : undefined}
+                    accessibilityRole={onDayPress ? "button" : undefined}
+                    style={styles.dateCell}
+                  >
+                    <View style={[styles.dateBadge, today && { backgroundColor: colors.teal[600] }]}>
+                      <Text
+                        size="xs"
+                        weight={today ? "semibold" : "regular"}
+                        style={{ color: today ? colors.white : inMonth ? colors.zinc[800] : colors.zinc[400] }}
+                      >
+                        {day.getDate()}
+                      </Text>
+                    </View>
+                  </Pressable>
+                );
+              })}
+            </View>
+
+            {/* Event lanes */}
+            <View style={styles.laneArea}>
+              {weekDays.map((_, i) =>
+                i === 0 ? null : (
+                  <View
+                    key={i}
+                    style={{ position: "absolute", left: `${(i / 7) * 100}%`, top: -2, bottom: 0, borderLeftWidth: 1, borderLeftColor: colors.zinc[100] }}
+                  />
+                ),
+              )}
+              {visible.map((bar) => {
+                const accent = bar.event.color || colors.teal[600];
+                const banner = bar.span > 1 || !!bar.event.allDay;
+                return (
+                  <Pressable
+                    key={bar.event.id}
+                    onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
+                    accessibilityRole={onEventPress ? "button" : undefined}
+                    accessibilityLabel={bar.event.title}
+                    style={{
+                      position: "absolute",
+                      top: bar.lane * (LANE_H + LANE_GAP),
+                      height: LANE_H,
+                      left: `${(bar.startCol / 7) * 100}%`,
+                      width: `${(bar.span / 7) * 100}%`,
+                      paddingHorizontal: 2,
+                    }}
+                  >
+                    <View
+                      style={{
+                        flex: 1,
+                        borderRadius: 4,
+                        backgroundColor: banner ? accent : "transparent",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        paddingHorizontal: 5,
+                        gap: 5,
+                      }}
+                    >
+                      {!banner ? <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: accent }} /> : null}
+                      <Text
+                        size="xs"
+                        weight={banner ? "medium" : "regular"}
+                        numberOfLines={1}
+                        style={{ color: banner ? colors.white : colors.zinc[700], flex: 1 }}
+                      >
+                        {bar.event.title}
+                      </Text>
+                    </View>
+                  </Pressable>
+                );
+              })}
+              {weekDays.map((day, col) =>
+                overflow[col] > 0 ? (
+                  <Pressable
+                    key={`o${col}`}
+                    onPress={onDayPress ? () => onDayPress(day) : undefined}
+                    style={{ position: "absolute", top: MAX_LANES * (LANE_H + LANE_GAP), left: `${(col / 7) * 100}%`, width: `${100 / 7}%`, paddingHorizontal: 6 }}
+                  >
+                    <Text size="xs" color="muted">+{overflow[col]} nữa</Text>
+                  </Pressable>
+                ) : null,
+              )}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.white },
+  weekdayHeader: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 6 },
+  weekdayCell: { flex: 1, alignItems: "center" },
+  weekRow: { flex: 1, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] },
+  dateRow: { flexDirection: "row", paddingTop: 4 },
+  dateCell: { flex: 1, alignItems: "center" },
+  dateBadge: { minWidth: 22, height: 22, borderRadius: 11, alignItems: "center", justifyContent: "center", paddingHorizontal: 4 },
+  laneArea: { flex: 1, position: "relative", marginTop: 2 },
+});