@ttdk-design-system/library-react 0.0.0-stage → 1.0.0

package/src/web/calendar/calendar.tsx

@@ -0,0 +1,1611 @@
+"use client";
+import * as React from "react";
+import { useState, useEffect } from "react";
+
+export type CalendarUiProps = UiProps;
+export interface DateRange {
+  start: string | Date | null;
+  end: string | Date | null;
+}
+export interface DateMarker {
+  date: string;
+  color?: string;
+  tooltip?: string;
+  dot?: boolean;
+}
+export interface CalendarProps {
+  /**
+   * Nilai tanggal terpilih pada mode controlled.
+   * - Single: string ('YYYY-MM-DD') atau Date
+   * - Range: { start: string | Date | null, end: string | Date | null }
+   * - Multiple: string[] atau Date[]
+   */
+  value?: any;
+
+  /**
+   * Nilai awal tanggal terpilih pada mode uncontrolled.
+   */
+  defaultValue?: any;
+
+  /**
+   * Atribut ID unik untuk elemen root kalender.
+   */
+  id?: string;
+
+  /**
+   * Mengaktifkan mode pemilihan rentang tanggal (start date - end date).
+   * @default false
+   */
+  range?: boolean;
+
+  /**
+   * Mengaktifkan mode pemilihan banyak tanggal sekaligus.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Batas tanggal paling awal yang dapat dipilih.
+   */
+  min?: string | Date;
+
+  /**
+   * Alias untuk min (kompatibel Nuxt UI: min-value).
+   */
+  minValue?: string | Date;
+
+  /**
+   * Batas tanggal paling akhir yang dapat dipilih.
+   */
+  max?: string | Date;
+
+  /**
+   * Alias untuk max (kompatibel Nuxt UI: max-value).
+   */
+  maxValue?: string | Date;
+
+  /**
+   * Fungsi untuk menonaktifkan tanggal tertentu secara spesifik (misal: hari libur / akhir pekan).
+   */
+  isDateDisabled?: (date: Date) => boolean;
+
+  /**
+   * Fungsi untuk menandai tanggal tidak tersedia (ditampilkan coret strikethrough).
+   */
+  isDateUnavailable?: (date: Date) => boolean;
+
+  /**
+   * Jumlah bulan yang ditampilkan secara berdampingan.
+   * @default 1
+   */
+  numberOfMonths?: number;
+
+  /**
+   * Hari awal dalam seminggu:
+   * - 0 = Minggu (Sunday)
+   * - 1 = Senin (Monday)
+   * @default 1
+   */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  /**
+   * Kode lokal bahasa kalender (misal: 'id-ID', 'en-US').
+   * @default 'id-ID'
+   */
+  locale?: string;
+
+  /**
+   * Bulan yang sedang ditampilkan (1 - 12) pada mode navigasi controlled.
+   */
+  month?: number;
+
+  /**
+   * Tahun yang sedang ditampilkan (misal: 2026) pada mode navigasi controlled.
+   */
+  year?: number;
+
+  /**
+   * Bulan awal yang sedang ditampilkan (1 - 12).
+   */
+  defaultMonth?: number;
+
+  /**
+   * Tahun awal yang sedang ditampilkan.
+   */
+  defaultYear?: number;
+
+  /**
+   * Menampilkan tombol navigasi lompat tahun (<< dan >>).
+   * @default true
+   */
+  yearControls?: boolean;
+
+  /**
+   * Menampilkan hari-hari redup di luar bulan yang aktif (leading & trailing days).
+   * @default true
+   */
+  showOutsideDays?: boolean;
+
+  /**
+   * Selalu merender 6 baris minggu agar tinggi kalender konsisten stabil antar bulan.
+   * @default true
+   */
+  fixedWeeks?: boolean;
+
+  /**
+   * Daftar penanda agenda / jadwal faskes pada tanggal tertentu.
+   */
+  dateMarkers?: DateMarker[];
+
+  /**
+   * Skala ukuran kalender (sm: kompak 32px, md: standar 38px, lg: besar 44px).
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Radius sudut kelengkungan container kalender.
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+
+  /**
+   * Varian visual tampilan kalender:
+   * - 'default': Bersih dengan background putih/gelap.
+   * - 'bordered': Dengan bingkai border solid luar.
+   * - 'card': Dengan elevasi bayangan halus kartu.
+   * - 'flat': Minimalis tanpa border dan tanpa shadow.
+   * @default 'bordered'
+   */
+  variant?: "default" | "bordered" | "card" | "flat";
+
+  /**
+   * Menonaktifkan seluruh kalender dari interaksi.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Mode hanya-baca (read-only).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Callback event saat nilai tanggal berubah.
+   */
+  onValueChange?: (value: any) => void;
+
+  /**
+   * Callback event native saat nilai berubah.
+   */
+  onChange?: (event: any) => void;
+
+  /**
+   * Callback saat navigasi bulan atau tahun berubah.
+   */
+  onMonthChange?: (month: number, year: number) => void;
+
+  /**
+   * Callback saat tahun tampilan kalender berubah.
+   */
+  onYearChange?: (month: number, year: number) => void;
+
+  /**
+   * Mode tampilan awal kalender ('day', 'month', 'year').
+   * @default 'day'
+   */
+  defaultViewMode?: "day" | "month" | "year";
+
+  /**
+   * Mode tampilan kalender saat ini ('day', 'month', 'year') untuk mode controlled.
+   */
+  viewMode?: "day" | "month" | "year";
+
+  /**
+   * Callback saat mode tampilan kalender berubah ('day', 'month', 'year').
+   */
+  onViewModeChange?: (mode: "day" | "month" | "year") => void;
+
+  /**
+   * Class CSS kustom untuk container utama.
+   */
+  className?: string;
+
+  /**
+   * Inline style CSS kustom untuk container utama.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Class CSS kustom untuk header kalender.
+   */
+  headerClass?: string;
+
+  /**
+   * Inline style kustom untuk header kalender.
+   */
+  headerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol navigasi.
+   */
+  navBtnClass?: string;
+
+  /**
+   * Inline style kustom untuk tombol navigasi.
+   */
+  navBtnStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk cell tanggal.
+   */
+  cellClass?: string;
+
+  /**
+   * Inline style kustom untuk cell tanggal.
+   */
+  cellStyle?: UiProps;
+
+  /**
+   * Kustomisasi visual granular UiProps.
+   */
+  ui?: UiProps;
+}
+
+import { buildUiStyle, buildUiVars, UiProps } from "../../core/types";
+
+function Calendar(props: CalendarProps) {
+  function initialParsed() {
+    const target = props.value !== undefined ? props.value : props.defaultValue;
+    if (!target) return null;
+    if (props.range && typeof target === "object") {
+      const s = target.start;
+      if (s instanceof Date) return isNaN(s.getTime()) ? null : s;
+      if (typeof s === "string" && s.trim()) {
+        const parts = s.split("-");
+        if (parts.length === 3) {
+          const y = parseInt(parts[0], 10);
+          const m = parseInt(parts[1], 10) - 1;
+          const d = parseInt(parts[2], 10);
+          const res = new Date(y, m, d);
+          return isNaN(res.getTime()) ? null : res;
+        }
+        const p = new Date(s);
+        return isNaN(p.getTime()) ? null : p;
+      }
+    } else if (props.multiple && Array.isArray(target) && target.length > 0) {
+      const first = target[0];
+      if (first instanceof Date) return isNaN(first.getTime()) ? null : first;
+      if (typeof first === "string" && first.trim()) {
+        const parts = first.split("-");
+        if (parts.length === 3) {
+          const y = parseInt(parts[0], 10);
+          const m = parseInt(parts[1], 10) - 1;
+          const d = parseInt(parts[2], 10);
+          const res = new Date(y, m, d);
+          return isNaN(res.getTime()) ? null : res;
+        }
+      }
+    } else if (typeof target === "string" && target.trim()) {
+      const parts = target.split("-");
+      if (parts.length === 3) {
+        const y = parseInt(parts[0], 10);
+        const m = parseInt(parts[1], 10) - 1;
+        const d = parseInt(parts[2], 10);
+        const res = new Date(y, m, d);
+        return isNaN(res.getTime()) ? null : res;
+      }
+      const p = new Date(target);
+      return isNaN(p.getTime()) ? null : p;
+    } else if (target instanceof Date && !isNaN(target.getTime())) {
+      return target;
+    }
+    return null;
+  }
+
+  const [viewYear, setViewYear] = useState(() =>
+    (() => {
+      if (props.year) return props.year;
+      if (props.defaultYear) return props.defaultYear;
+      const target =
+        props.value !== undefined ? props.value : props.defaultValue;
+      if (target) {
+        const valStr =
+          props.range && typeof target === "object"
+            ? target.start
+            : props.multiple && Array.isArray(target)
+            ? target[0]
+            : target;
+        if (valStr instanceof Date && !isNaN(valStr.getTime()))
+          return valStr.getFullYear();
+        if (typeof valStr === "string" && valStr.trim()) {
+          const parts = valStr.split("-");
+          if (parts.length === 3) {
+            const y = parseInt(parts[0], 10);
+            if (!isNaN(y)) return y;
+          }
+        }
+      }
+      return new Date().getFullYear();
+    })()
+  );
+
+  const [viewMonth, setViewMonth] = useState(() =>
+    (() => {
+      if (props.month) return props.month;
+      if (props.defaultMonth) return props.defaultMonth;
+      const target =
+        props.value !== undefined ? props.value : props.defaultValue;
+      if (target) {
+        const valStr =
+          props.range && typeof target === "object"
+            ? target.start
+            : props.multiple && Array.isArray(target)
+            ? target[0]
+            : target;
+        if (valStr instanceof Date && !isNaN(valStr.getTime()))
+          return valStr.getMonth() + 1;
+        if (typeof valStr === "string" && valStr.trim()) {
+          const parts = valStr.split("-");
+          if (parts.length === 3) {
+            const m = parseInt(parts[1], 10);
+            if (!isNaN(m)) return m;
+          }
+        }
+      }
+      return new Date().getMonth() + 1;
+    })()
+  );
+
+  const [currentViewMode, setCurrentViewMode] = useState(
+    () => props.viewMode || props.defaultViewMode || "day"
+  );
+
+  const [decadeStart, setDecadeStart] = useState<number | null>(() => null);
+
+  const [selectedSingle, setSelectedSingle] = useState<string | null>(() => null);
+
+  const [rangeStart, setRangeStart] = useState<string | null>(() => null);
+
+  const [rangeEnd, setRangeEnd] = useState<string | null>(() => null);
+
+  const [hoverDate, setHoverDate] = useState<string | null>(() => null);
+
+  const [selectedMultiple, setSelectedMultiple] = useState<string[]>(() => []);
+
+  const [lastParsedKey, setLastParsedKey] = useState(() =>
+    (() => {
+      const target =
+        props.value !== undefined ? props.value : props.defaultValue;
+      if (!target) return "";
+      const valStr =
+        props.range && typeof target === "object"
+          ? target.start
+          : props.multiple && Array.isArray(target)
+          ? target[0]
+          : target;
+      return valStr instanceof Date
+        ? "" + valStr.getTime()
+        : typeof valStr === "string"
+        ? valStr
+        : "";
+    })()
+  );
+
+  function padZero(num: number) {
+    return num < 10 ? "0" + num : "" + num;
+  }
+
+  function toDateString(d: Date) {
+    if (!d || isNaN(d.getTime())) {
+      const now = new Date();
+      return (
+        now.getFullYear() +
+        "-" +
+        padZero(now.getMonth() + 1) +
+        "-" +
+        padZero(now.getDate())
+      );
+    }
+    return (
+      d.getFullYear() +
+      "-" +
+      padZero(d.getMonth() + 1) +
+      "-" +
+      padZero(d.getDate())
+    );
+  }
+
+  function parseDate(val: any) {
+    if (!val) return null;
+    if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
+    if (typeof val === "string") {
+      const parts = val.split("-");
+      if (parts.length === 3) {
+        const y = parseInt(parts[0], 10);
+        const m = parseInt(parts[1], 10) - 1;
+        const d = parseInt(parts[2], 10);
+        const res = new Date(y, m, d);
+        return isNaN(res.getTime()) ? null : res;
+      }
+      const parsed = new Date(val);
+      return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    return null;
+  }
+
+  function getViewYear(monthOffset: number = 0) {
+    const now = new Date();
+    let m = (props.month || viewMonth || now.getMonth() + 1) - 1 + monthOffset;
+    let y = props.year || viewYear || now.getFullYear();
+    if (isNaN(m)) m = now.getMonth() + monthOffset;
+    if (isNaN(y)) y = now.getFullYear();
+    while (m > 11) {
+      m -= 12;
+      y += 1;
+    }
+    while (m < 0) {
+      m += 12;
+      y -= 1;
+    }
+    return y;
+  }
+
+  function getViewMonth(monthOffset: number = 0) {
+    const now = new Date();
+    let m = (props.month || viewMonth || now.getMonth() + 1) - 1 + monthOffset;
+    if (isNaN(m)) m = now.getMonth() + monthOffset;
+    while (m > 11) {
+      m -= 12;
+    }
+    while (m < 0) {
+      m += 12;
+    }
+    return m + 1;
+  }
+
+  function getMonthLabel(year: number, month: number) {
+    const loc = props.locale || "id-ID";
+    const d = new Date(year, month - 1, 1);
+    return d.toLocaleDateString(loc, {
+      month: "long",
+      year: "numeric",
+    });
+  }
+
+  function getMonthOnlyLabel(year: number, month: number) {
+    const loc = props.locale || "id-ID";
+    const d = new Date(year, month - 1, 1);
+    return d.toLocaleDateString(loc, {
+      month: "long",
+    });
+  }
+
+  function getViewMode() {
+    return props.viewMode || currentViewMode || "day";
+  }
+
+  function setViewMode(mode: "day" | "month" | "year") {
+    setCurrentViewMode(mode as any);
+    if (props.onViewModeChange) {
+      props.onViewModeChange(mode);
+    }
+  }
+
+  function openMonthView() {
+    if (props.disabled) return;
+    setViewMode("month");
+  }
+
+  function openYearView() {
+    if (props.disabled) return;
+    setViewMode("year");
+  }
+
+  function getDecadeStart() {
+    if (decadeStart !== null) {
+      return decadeStart;
+    }
+    const y = props.year || viewYear;
+    return Math.floor(y / 10) * 10;
+  }
+
+  function getDecadeLabel() {
+    const start = getDecadeStart();
+    const end = start + 11;
+    return start + " - " + end;
+  }
+
+  function prevDecade() {
+    if (props.disabled) return;
+    setDecadeStart(getDecadeStart() - 12);
+  }
+
+  function nextDecade() {
+    if (props.disabled) return;
+    setDecadeStart(getDecadeStart() + 12);
+  }
+
+  function getYearsList() {
+    const start = getDecadeStart();
+    const currentY = props.year || viewYear;
+    const actualY = new Date().getFullYear();
+    const list: any[] = [];
+    for (let i = 0; i < 12; i++) {
+      const y = start + i;
+      list.push({
+        year: y,
+        label: "" + y,
+        isSelected: y === currentY,
+        isCurrent: y === actualY,
+      });
+    }
+    return list;
+  }
+
+  function selectYear(year: number) {
+    if (props.disabled) return;
+    setViewYear(year);
+    setDecadeStart(null);
+    setViewMode("month");
+    if (props.onYearChange) {
+      props.onYearChange(getViewMonth(), year);
+    }
+    if (props.onMonthChange) {
+      props.onMonthChange(getViewMonth(), year);
+    }
+  }
+
+  function getMonthsList() {
+    const currentY = props.year || viewYear;
+    const currentM = props.month || viewMonth;
+    const actualNow = new Date();
+    const actualY = actualNow.getFullYear();
+    const actualM = actualNow.getMonth() + 1;
+    const loc = props.locale || "id-ID";
+    const list: any[] = [];
+    for (let m = 1; m <= 12; m++) {
+      const d = new Date(currentY, m - 1, 1);
+      const shortName = d.toLocaleDateString(loc, {
+        month: "short",
+      });
+      const fullName = d.toLocaleDateString(loc, {
+        month: "long",
+      });
+      list.push({
+        month: m,
+        label: shortName,
+        fullName: fullName,
+        isSelected: m === currentM,
+        isCurrent: currentY === actualY && m === actualM,
+      });
+    }
+    return list;
+  }
+
+  function selectMonth(month: number) {
+    if (props.disabled) return;
+    setViewMonth(month);
+    setViewMode("day");
+    if (props.onMonthChange) {
+      props.onMonthChange(month, getViewYear());
+    }
+  }
+
+  function getWeekDays() {
+    const startOn = props.weekStartsOn !== undefined ? props.weekStartsOn : 1;
+    const idLabels = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+    const enLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const loc = props.locale || "id-ID";
+    const base = loc.toLowerCase().indexOf("en") === 0 ? enLabels : idLabels;
+    const result: string[] = [];
+    for (let i = 0; i < 7; i++) {
+      const idx = (startOn + i) % 7;
+      result.push(base[idx]);
+    }
+    return result;
+  }
+
+  function prevMonth() {
+    if (props.disabled) return;
+    let nextM = viewMonth - 1;
+    let nextY = viewYear;
+    if (nextM < 1) {
+      nextM = 12;
+      nextY -= 1;
+    }
+    setViewMonth(nextM);
+    setViewYear(nextY);
+    if (props.onMonthChange) {
+      props.onMonthChange(nextM, nextY);
+    }
+  }
+
+  function nextMonth() {
+    if (props.disabled) return;
+    let nextM = viewMonth + 1;
+    let nextY = viewYear;
+    if (nextM > 12) {
+      nextM = 1;
+      nextY += 1;
+    }
+    setViewMonth(nextM);
+    setViewYear(nextY);
+    if (props.onMonthChange) {
+      props.onMonthChange(nextM, nextY);
+    }
+  }
+
+  function prevYear() {
+    if (props.disabled) return;
+    const nextY = viewYear - 1;
+    setViewYear(nextY);
+    if (props.onMonthChange) {
+      props.onMonthChange(viewMonth, nextY);
+    }
+  }
+
+  function nextYear() {
+    if (props.disabled) return;
+    const nextY = viewYear + 1;
+    setViewYear(nextY);
+    if (props.onMonthChange) {
+      props.onMonthChange(viewMonth, nextY);
+    }
+  }
+
+  function goToToday() {
+    if (props.disabled) return;
+    const today = new Date();
+    setViewYear(today.getFullYear());
+    setViewMonth(today.getMonth() + 1);
+    setDecadeStart(null);
+    setViewMode("day");
+    handleSelectDate(toDateString(today));
+    if (props.onMonthChange) {
+      props.onMonthChange(viewMonth, viewYear);
+    }
+  }
+
+  function isToday(dateStr: string) {
+    const todayStr = toDateString(new Date());
+    return dateStr === todayStr;
+  }
+
+  function isDateDisabledCheck(date: Date) {
+    if (props.disabled) return true;
+    const minDate = parseDate(props.min || props.minValue);
+    if (
+      minDate &&
+      date <
+        new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())
+    ) {
+      return true;
+    }
+    const maxDate = parseDate(props.max || props.maxValue);
+    if (
+      maxDate &&
+      date >
+        new Date(
+          maxDate.getFullYear(),
+          maxDate.getMonth(),
+          maxDate.getDate(),
+          23,
+          59,
+          59
+        )
+    ) {
+      return true;
+    }
+    if (props.isDateDisabled) {
+      return props.isDateDisabled(date);
+    }
+    return false;
+  }
+
+  function isDateUnavailableCheck(date: Date) {
+    if (props.isDateUnavailable) {
+      return props.isDateUnavailable(date);
+    }
+    return false;
+  }
+
+  function getDateMarker(dateStr: string) {
+    if (!props.dateMarkers || !props.dateMarkers.length) return null;
+    for (let i = 0; i < props.dateMarkers.length; i++) {
+      if (props.dateMarkers[i].date === dateStr) {
+        return props.dateMarkers[i];
+      }
+    }
+    return null;
+  }
+
+  function isSelected(dateStr: string) {
+    if (props.range) {
+      return isRangeStart(dateStr) || isRangeEnd(dateStr);
+    }
+    if (props.multiple) {
+      const rawList =
+        props.value !== undefined
+          ? Array.isArray(props.value)
+            ? props.value
+            : []
+          : selectedMultiple;
+      const strList = rawList.map((item: any) =>
+        typeof item === "string"
+          ? item
+          : item instanceof Date
+          ? toDateString(item)
+          : ""
+      );
+      return strList.indexOf(dateStr) !== -1;
+    }
+    const current =
+      props.value !== undefined
+        ? typeof props.value === "string"
+          ? props.value
+          : props.value instanceof Date
+          ? toDateString(props.value)
+          : null
+        : selectedSingle;
+    if (!current && props.defaultValue && !selectedSingle) {
+      const def =
+        typeof props.defaultValue === "string"
+          ? props.defaultValue
+          : props.defaultValue instanceof Date
+          ? toDateString(props.defaultValue)
+          : null;
+      return def === dateStr;
+    }
+    return current === dateStr;
+  }
+
+  function isRangeStart(dateStr: string) {
+    if (!props.range) return false;
+    const raw =
+      props.value && props.value.start
+        ? props.value.start
+        : props.defaultValue && props.defaultValue.start
+        ? props.defaultValue.start
+        : rangeStart;
+    const start =
+      typeof raw === "string"
+        ? raw
+        : raw instanceof Date
+        ? toDateString(raw)
+        : null;
+    return start === dateStr;
+  }
+
+  function isRangeEnd(dateStr: string) {
+    if (!props.range) return false;
+    const raw =
+      props.value && props.value.end
+        ? props.value.end
+        : props.defaultValue && props.defaultValue.end
+        ? props.defaultValue.end
+        : rangeEnd;
+    const end =
+      typeof raw === "string"
+        ? raw
+        : raw instanceof Date
+        ? toDateString(raw)
+        : null;
+    return end === dateStr;
+  }
+
+  function isInRange(dateStr: string) {
+    if (!props.range) return false;
+    const rawStart =
+      props.value && props.value.start
+        ? props.value.start
+        : props.defaultValue && props.defaultValue.start
+        ? props.defaultValue.start
+        : rangeStart;
+    let rawEnd =
+      props.value && props.value.end
+        ? props.value.end
+        : props.defaultValue && props.defaultValue.end
+        ? props.defaultValue.end
+        : rangeEnd;
+    const start =
+      typeof rawStart === "string"
+        ? rawStart
+        : rawStart instanceof Date
+        ? toDateString(rawStart)
+        : null;
+    let end =
+      typeof rawEnd === "string"
+        ? rawEnd
+        : rawEnd instanceof Date
+        ? toDateString(rawEnd)
+        : null;
+    if (start && !end && hoverDate) {
+      end = hoverDate;
+    }
+    if (!start || !end) return false;
+    const minD = start < end ? start : end;
+    const maxD = start < end ? end : start;
+    return dateStr > minD && dateStr < maxD;
+  }
+
+  function getCellRangeClass(dateStr: string) {
+    if (!props.range) return "";
+    const isStart = isRangeStart(dateStr);
+    const isEnd = isRangeEnd(dateStr);
+    const inRange = isInRange(dateStr);
+    if (isStart && isEnd) return "ttdk-calendar-cell-range-single";
+    if (isStart) return "ttdk-calendar-cell-range-start";
+    if (isEnd) return "ttdk-calendar-cell-range-end";
+    if (inRange) return "ttdk-calendar-cell-range";
+    return "";
+  }
+
+  function handleDayHover(dateStr: string) {
+    if (!props.range || props.disabled || props.readOnly) return;
+    const rawStart =
+      props.value && props.value.start
+        ? props.value.start
+        : props.defaultValue && props.defaultValue.start
+        ? props.defaultValue.start
+        : rangeStart;
+    const rawEnd =
+      props.value && props.value.end
+        ? props.value.end
+        : props.defaultValue && props.defaultValue.end
+        ? props.defaultValue.end
+        : rangeEnd;
+    const start =
+      typeof rawStart === "string"
+        ? rawStart
+        : rawStart instanceof Date
+        ? toDateString(rawStart)
+        : null;
+    const end =
+      typeof rawEnd === "string"
+        ? rawEnd
+        : rawEnd instanceof Date
+        ? toDateString(rawEnd)
+        : null;
+    if (start && !end) {
+      setHoverDate(dateStr);
+    }
+  }
+
+  function handleDayHoverLeave() {
+    if (hoverDate) {
+      setHoverDate(null);
+    }
+  }
+
+  function handleSelectDate(dateStr: string) {
+    if (props.disabled || props.readOnly) return;
+    const dateObj = parseDate(dateStr);
+    if (!dateObj) return;
+    if (isDateDisabledCheck(dateObj) || isDateUnavailableCheck(dateObj)) {
+      return;
+    }
+    if (props.range) {
+      const rawStart =
+        props.value && props.value.start
+          ? props.value.start
+          : props.defaultValue && props.defaultValue.start
+          ? props.defaultValue.start
+          : rangeStart;
+      const rawEnd =
+        props.value && props.value.end
+          ? props.value.end
+          : props.defaultValue && props.defaultValue.end
+          ? props.defaultValue.end
+          : rangeEnd;
+      const curStart =
+        typeof rawStart === "string"
+          ? rawStart
+          : rawStart instanceof Date
+          ? toDateString(rawStart)
+          : null;
+      const curEnd =
+        typeof rawEnd === "string"
+          ? rawEnd
+          : rawEnd instanceof Date
+          ? toDateString(rawEnd)
+          : null;
+      if (!curStart || (curStart && curEnd)) {
+        setRangeStart(dateStr);
+        setRangeEnd(null);
+        setHoverDate(null);
+        setLastParsedKey(dateStr);
+        if (props.onValueChange) {
+          props.onValueChange({
+            start: dateStr,
+            end: null,
+          });
+        }
+      } else {
+        let startRes = curStart;
+        let endRes = dateStr;
+        if (dateStr < curStart) {
+          startRes = dateStr;
+          endRes = curStart;
+        }
+        setRangeStart(startRes);
+        setRangeEnd(endRes);
+        setHoverDate(null);
+        if (props.onValueChange) {
+          props.onValueChange({
+            start: startRes,
+            end: endRes,
+          });
+        }
+      }
+    } else if (props.multiple) {
+      let currentList =
+        props.value !== undefined
+          ? Array.isArray(props.value)
+            ? [...props.value]
+            : []
+          : [...selectedMultiple];
+      const strList = currentList.map((item: any) =>
+        typeof item === "string" ? item : toDateString(item)
+      );
+      const idx = strList.indexOf(dateStr);
+      if (idx >= 0) {
+        strList.splice(idx, 1);
+      } else {
+        strList.push(dateStr);
+      }
+      setSelectedMultiple(strList);
+      if (props.onValueChange) {
+        props.onValueChange(strList);
+      }
+    } else {
+      setSelectedSingle(dateStr);
+      if (dateObj) {
+        setViewYear(dateObj.getFullYear());
+        setViewMonth(dateObj.getMonth() + 1);
+        setLastParsedKey(dateStr);
+      }
+      if (props.onValueChange) {
+        props.onValueChange(dateStr);
+      }
+    }
+    if (props.onChange) {
+      props.onChange({
+        target: {
+          value: dateStr,
+        },
+        value: dateStr,
+      });
+    }
+  }
+
+  function getMonthWeeks(year: number, month: number) {
+    const startOn = props.weekStartsOn !== undefined ? props.weekStartsOn : 1;
+    const showOutside = props.showOutsideDays !== false;
+    const fixed = props.fixedWeeks !== false;
+    const todayStr = toDateString(new Date());
+
+    // Precompute disabled bounds
+    const minDateObj =
+      props.min || props.minValue
+        ? parseDate(props.min || props.minValue)
+        : null;
+    const maxDateObj =
+      props.max || props.maxValue
+        ? parseDate(props.max || props.maxValue)
+        : null;
+    const minTime = minDateObj
+      ? new Date(
+          minDateObj.getFullYear(),
+          minDateObj.getMonth(),
+          minDateObj.getDate()
+        ).getTime()
+      : null;
+    const maxTime = maxDateObj
+      ? new Date(
+          maxDateObj.getFullYear(),
+          maxDateObj.getMonth(),
+          maxDateObj.getDate(),
+          23,
+          59,
+          59
+        ).getTime()
+      : null;
+
+    // Precompute single selection
+    const selectedSingleStr =
+      !props.range && !props.multiple
+        ? props.value !== undefined
+          ? typeof props.value === "string"
+            ? props.value
+            : props.value instanceof Date
+            ? toDateString(props.value)
+            : null
+          : selectedSingle ||
+            (props.defaultValue
+              ? typeof props.defaultValue === "string"
+                ? props.defaultValue
+                : toDateString(props.defaultValue)
+              : null)
+        : null;
+
+    // Precompute range selection
+    let rStart: string | null = null;
+    let rEnd: string | null = null;
+    if (props.range) {
+      const rawS =
+        props.value && props.value.start
+          ? props.value.start
+          : props.defaultValue && props.defaultValue.start
+          ? props.defaultValue.start
+          : rangeStart;
+      const rawE =
+        props.value && props.value.end
+          ? props.value.end
+          : props.defaultValue && props.defaultValue.end
+          ? props.defaultValue.end
+          : rangeEnd;
+      rStart =
+        typeof rawS === "string"
+          ? rawS
+          : rawS instanceof Date
+          ? toDateString(rawS)
+          : null;
+      rEnd =
+        typeof rawE === "string"
+          ? rawE
+          : rawE instanceof Date
+          ? toDateString(rawE)
+          : null;
+      if (rStart && !rEnd && hoverDate) {
+        rEnd = hoverDate;
+      }
+    }
+    const rangeMin = rStart && rEnd ? (rStart < rEnd ? rStart : rEnd) : null;
+    const rangeMax = rStart && rEnd ? (rStart < rEnd ? rEnd : rStart) : null;
+
+    // Precompute multiple selection Set
+    const multipleSet: any = props.multiple
+      ? new Set(
+          (props.value !== undefined
+            ? Array.isArray(props.value)
+              ? props.value
+              : []
+            : selectedMultiple
+          ).map((item: any) =>
+            typeof item === "string"
+              ? item
+              : item instanceof Date
+              ? toDateString(item)
+              : ""
+          )
+        )
+      : null;
+
+    // Precompute marker map
+    const markerMap: any =
+      props.dateMarkers && props.dateMarkers.length
+        ? new Map(props.dateMarkers.map((m: any) => [m.date, m]))
+        : null;
+    const firstDay = new Date(year, month - 1, 1);
+    const lastDay = new Date(year, month, 0);
+    const totalDays = lastDay.getDate();
+    let firstDayIndex = firstDay.getDay() - startOn;
+    if (firstDayIndex < 0) firstDayIndex += 7;
+    const prevMonthLastDay = new Date(year, month - 1, 0).getDate();
+    const days: any[] = [];
+    const buildCell = (d: number, dDate: Date, isCurMonth: boolean) => {
+      const dateStr = toDateString(dDate);
+      const dTime = dDate.getTime();
+      const isDisabled =
+        props.disabled ||
+        (minTime !== null && dTime < minTime) ||
+        (maxTime !== null && dTime > maxTime) ||
+        (props.isDateDisabled ? props.isDateDisabled(dDate) : false);
+      const isUnavailable = props.isDateUnavailable
+        ? props.isDateUnavailable(dDate)
+        : false;
+      const isRangeS = props.range ? rStart === dateStr : false;
+      const isRangeE = props.range ? rEnd === dateStr : false;
+      const inRange =
+        rangeMin !== null &&
+        rangeMax !== null &&
+        dateStr > rangeMin &&
+        dateStr < rangeMax;
+      const isSel = props.range
+        ? isRangeS || isRangeE
+        : props.multiple
+        ? multipleSet
+          ? multipleSet.has(dateStr)
+          : false
+        : dateStr === selectedSingleStr;
+      const rangeCls = !props.range
+        ? ""
+        : (isRangeS && isRangeE) || (isRangeS && !rEnd)
+        ? "ttdk-calendar-cell-range-single"
+        : isRangeS
+        ? "ttdk-calendar-cell-range-start"
+        : isRangeE
+        ? "ttdk-calendar-cell-range-end"
+        : inRange
+        ? "ttdk-calendar-cell-range"
+        : "";
+      const markerObj = markerMap ? markerMap.get(dateStr) || null : null;
+      return {
+        day: d,
+        dateStr: dateStr,
+        isCurrentMonth: isCurMonth,
+        isOutside: !isCurMonth,
+        date: dDate,
+        disabled: isDisabled,
+        unavailable: isUnavailable,
+        today: dateStr === todayStr,
+        selected: isSel,
+        inRange: inRange,
+        isRangeStart: isRangeS,
+        isRangeEnd: isRangeE,
+        rangeClass: rangeCls,
+        marker: markerObj,
+      };
+    };
+    for (let i = firstDayIndex - 1; i >= 0; i--) {
+      const d = prevMonthLastDay - i;
+      const prevMonthDate = new Date(year, month - 2, d);
+      days.push(buildCell(d, prevMonthDate, false));
+    }
+    for (let i = 1; i <= totalDays; i++) {
+      const curDate = new Date(year, month - 1, i);
+      days.push(buildCell(i, curDate, true));
+    }
+    const targetLength = fixed ? 42 : Math.ceil(days.length / 7) * 7;
+    let nextDayNum = 1;
+    while (days.length < targetLength) {
+      const nextMonthDate = new Date(year, month, nextDayNum);
+      days.push(buildCell(nextDayNum, nextMonthDate, false));
+      nextDayNum++;
+    }
+    const weeks: any[][] = [];
+    for (let i = 0; i < days.length; i += 7) {
+      weeks.push(days.slice(i, i + 7));
+    }
+    return weeks;
+  }
+
+  function getMonths() {
+    const count =
+      props.numberOfMonths && props.numberOfMonths > 1
+        ? props.numberOfMonths
+        : 1;
+    const list: any[] = [];
+    for (let i = 0; i < count; i++) {
+      const y = getViewYear(i);
+      const m = getViewMonth(i);
+      list.push({
+        offset: i,
+        year: y,
+        month: m,
+        label: getMonthLabel(y, m),
+        monthName: getMonthOnlyLabel(y, m),
+        isFirst: i === 0,
+        isLast: i === count - 1,
+        weeks: getMonthWeeks(y, m),
+      });
+    }
+    return list;
+  }
+
+  useEffect(() => {
+    const target = props.value !== undefined ? props.value : props.defaultValue;
+    const valStr = target
+      ? props.range && typeof target === "object"
+        ? target.start
+        : props.multiple && Array.isArray(target)
+        ? target[0]
+        : target
+      : null;
+    const valKey =
+      valStr instanceof Date
+        ? "" + valStr.getTime()
+        : typeof valStr === "string"
+        ? valStr
+        : "";
+    if (valKey !== lastParsedKey) {
+      setLastParsedKey(valKey);
+      if (valStr) {
+        const parsed = parseDate(valStr);
+        if (parsed) {
+          if (!props.year) {
+            setViewYear(parsed.getFullYear());
+          }
+          if (!props.month) {
+            setViewMonth(parsed.getMonth() + 1);
+          }
+        }
+      }
+    }
+  });
+
+  return (
+    <div
+      role="group"
+      aria-label="Kalender"
+      id={props.id}
+      className={`ttdk-calendar ttdk-calendar-${
+        props.variant || "bordered"
+      } ttdk-calendar-${props.size || "md"} ttdk-calendar-rounded-${
+        props.rounded || "md"
+      } ${props.disabled ? "ttdk-calendar-disabled" : ""} ${
+        props.className || ""
+      }`.trim()}
+      style={{
+        ...buildUiVars(props.ui),
+              ...props.style,
+      }}
+    >
+      {getViewMode() === "day" ? (
+        <div className="ttdk-calendar-months">
+          {getMonths()?.map((monthItem) => (
+            <div
+              className="ttdk-calendar-month"
+              key={`${monthItem.year}-${monthItem.month}`}
+            >
+              <div
+                className={`ttdk-calendar-header ${
+                  props.headerClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiStyle(props.headerStyle),
+                }}
+              >
+                <div className="ttdk-calendar-nav-group">
+                  {monthItem.isFirst ? (
+                    <>
+                      {props.yearControls !== false ? (
+                        <button
+                          type="button"
+                          aria-label="Tahun Sebelumnya"
+                          className={`ttdk-calendar-nav-btn ${
+                            props.navBtnClass || ""
+                          }`.trim()}
+                          style={{
+                            ...buildUiStyle(props.navBtnStyle),
+                          }}
+                          disabled={props.disabled}
+                          onClick={(event) => prevYear()}
+                        >
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                          >
+                            <polyline points="11 17 6 12 11 7" />
+                            <polyline points="18 17 13 12 18 7" />
+                          </svg>
+                        </button>
+                      ) : null}
+                      <button
+                        type="button"
+                        aria-label="Bulan Sebelumnya"
+                        className={`ttdk-calendar-nav-btn ${
+                          props.navBtnClass || ""
+                        }`.trim()}
+                        style={{
+                          ...buildUiStyle(props.navBtnStyle),
+                        }}
+                        disabled={props.disabled}
+                        onClick={(event) => prevMonth()}
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                        >
+                          <polyline points="15 18 9 12 15 6" />
+                        </svg>
+                      </button>
+                    </>
+                  ) : null}
+                </div>
+                <div className="ttdk-calendar-title-group">
+                  <button
+                    type="button"
+                    className="ttdk-calendar-title-btn"
+                    aria-label="Pilih Bulan"
+                    disabled={props.disabled}
+                    onClick={(event) => openMonthView()}
+                  >
+                    {monthItem.monthName}
+                  </button>
+                  <button
+                    type="button"
+                    className="ttdk-calendar-title-btn"
+                    aria-label="Pilih Tahun"
+                    disabled={props.disabled}
+                    onClick={(event) => openYearView()}
+                  >
+                    {monthItem.year}
+                  </button>
+                </div>
+                <div className="ttdk-calendar-nav-group">
+                  {monthItem.isLast ? (
+                    <>
+                      <button
+                        type="button"
+                        aria-label="Bulan Berikutnya"
+                        className={`ttdk-calendar-nav-btn ${
+                          props.navBtnClass || ""
+                        }`.trim()}
+                        style={{
+                          ...buildUiStyle(props.navBtnStyle),
+                        }}
+                        disabled={props.disabled}
+                        onClick={(event) => nextMonth()}
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                        >
+                          <polyline points="9 18 15 12 9 6" />
+                        </svg>
+                      </button>
+                      {props.yearControls !== false ? (
+                        <button
+                          type="button"
+                          aria-label="Tahun Berikutnya"
+                          className={`ttdk-calendar-nav-btn ${
+                            props.navBtnClass || ""
+                          }`.trim()}
+                          style={{
+                            ...buildUiStyle(props.navBtnStyle),
+                          }}
+                          disabled={props.disabled}
+                          onClick={(event) => nextYear()}
+                        >
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                          >
+                            <polyline points="13 17 18 12 13 7" />
+                            <polyline points="6 17 11 12 6 7" />
+                          </svg>
+                        </button>
+                      ) : null}
+                    </>
+                  ) : null}
+                </div>
+              </div>
+              <table className="ttdk-calendar-table" role="grid">
+                <thead>
+                  <tr className="ttdk-calendar-thead-row" role="row">
+                    {getWeekDays()?.map((weekday) => (
+                      <th
+                        className="ttdk-calendar-head-cell"
+                        role="columnheader"
+                        key={weekday}
+                        aria-label={weekday}
+                      >
+                        {weekday}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="ttdk-calendar-tbody" role="rowgroup">
+                  {monthItem.weeks?.map((week: any, wIdx: any) => (
+                    <tr className="ttdk-calendar-row" role="row" key={wIdx}>
+                      {week?.map((cell, cIdx) => (
+                        <td
+                          role="gridcell"
+                          key={`${cell.dateStr}-${cIdx}`}
+                          className={`ttdk-calendar-cell ${cell.rangeClass} ${
+                            props.cellClass || ""
+                          }`.trim()}
+                          aria-selected={cell.selected ? "true" : "false"}
+                          aria-disabled={cell.disabled ? "true" : "false"}
+                          style={{
+                            ...buildUiStyle(props.cellStyle),
+                          }}
+                          onMouseEnter={(event) => handleDayHover(cell.dateStr)}
+                          onMouseLeave={(event) => handleDayHoverLeave()}
+                        >
+                          <button
+                            type="button"
+                            className={`ttdk-calendar-day ${
+                              cell.selected ? "ttdk-calendar-day-selected" : ""
+                            } ${cell.today ? "ttdk-calendar-day-today" : ""} ${
+                              cell.inRange ? "ttdk-calendar-day-in-range" : ""
+                            } ${
+                              cell.isRangeStart
+                                ? "ttdk-calendar-day-range-start"
+                                : ""
+                            } ${
+                              cell.isRangeEnd
+                                ? "ttdk-calendar-day-range-end"
+                                : ""
+                            } ${
+                              cell.isOutside ? "ttdk-calendar-day-outside" : ""
+                            } ${
+                              cell.disabled ? "ttdk-calendar-day-disabled" : ""
+                            } ${
+                              cell.unavailable
+                                ? "ttdk-calendar-day-unavailable"
+                                : ""
+                            }`}
+                            disabled={cell.disabled}
+                            tabIndex={cell.selected || cell.today ? 0 : -1}
+                            onClick={(event) => handleSelectDate(cell.dateStr)}
+                          >
+                            <span>{cell.day}</span>
+                            {cell.marker ? (
+                              <span
+                                className="ttdk-calendar-marker-dot"
+                                style={{
+                                  backgroundColor: cell.marker
+                                    ? cell.marker.color
+                                    : undefined,
+                                }}
+                                title={
+                                  cell.marker ? cell.marker.tooltip : undefined
+                                }
+                              />
+                            ) : null}
+                          </button>
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {getViewMode() === "month" ? (
+        <div className="ttdk-calendar-month-picker-view">
+          <div
+            className={`ttdk-calendar-header ${props.headerClass || ""}`.trim()}
+            style={{
+              ...buildUiStyle(props.headerStyle),
+            }}
+          >
+            <div className="ttdk-calendar-nav-group">
+              <button
+                type="button"
+                aria-label="Tahun Sebelumnya"
+                className={`ttdk-calendar-nav-btn ${
+                  props.navBtnClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiStyle(props.navBtnStyle),
+                }}
+                disabled={props.disabled}
+                onClick={(event) => prevYear()}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <polyline points="15 18 9 12 15 6" />
+                </svg>
+              </button>
+            </div>
+            <div className="ttdk-calendar-title-group">
+              <button
+                type="button"
+                className="ttdk-calendar-title-btn"
+                aria-label="Pilih Tahun"
+                disabled={props.disabled}
+                onClick={(event) => openYearView()}
+              >
+                {getViewYear()}
+              </button>
+            </div>
+            <div className="ttdk-calendar-nav-group">
+              <button
+                type="button"
+                aria-label="Tahun Berikutnya"
+                className={`ttdk-calendar-nav-btn ${
+                  props.navBtnClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiStyle(props.navBtnStyle),
+                }}
+                disabled={props.disabled}
+                onClick={(event) => nextYear()}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <polyline points="9 18 15 12 9 6" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div className="ttdk-calendar-grid-picker" role="grid">
+            {getMonthsList()?.map((m: any) => (
+              <button
+                type="button"
+                key={m.month}
+                className={`ttdk-calendar-picker-item ${
+                  m.isSelected ? "ttdk-calendar-picker-item-selected" : ""
+                } ${m.isCurrent ? "ttdk-calendar-picker-item-current" : ""}`}
+                disabled={props.disabled}
+                aria-label={m.fullName}
+                onClick={(event) => selectMonth(m.month)}
+              >
+                {m.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+      {getViewMode() === "year" ? (
+        <div className="ttdk-calendar-year-picker-view">
+          <div
+            className={`ttdk-calendar-header ${props.headerClass || ""}`.trim()}
+            style={{
+              ...buildUiStyle(props.headerStyle),
+            }}
+          >
+            <div className="ttdk-calendar-nav-group">
+              <button
+                type="button"
+                aria-label="Rentang Tahun Sebelumnya"
+                className={`ttdk-calendar-nav-btn ${
+                  props.navBtnClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiStyle(props.navBtnStyle),
+                }}
+                disabled={props.disabled}
+                onClick={(event) => prevDecade()}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <polyline points="15 18 9 12 15 6" />
+                </svg>
+              </button>
+            </div>
+            <div className="ttdk-calendar-title-group">
+              <span className="ttdk-calendar-title">{getDecadeLabel()}</span>
+            </div>
+            <div className="ttdk-calendar-nav-group">
+              <button
+                type="button"
+                aria-label="Rentang Tahun Berikutnya"
+                className={`ttdk-calendar-nav-btn ${
+                  props.navBtnClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiStyle(props.navBtnStyle),
+                }}
+                disabled={props.disabled}
+                onClick={(event) => nextDecade()}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <polyline points="9 18 15 12 9 6" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div className="ttdk-calendar-grid-picker" role="grid">
+            {getYearsList()?.map((y: any) => (
+              <button
+                type="button"
+                key={y.year}
+                className={`ttdk-calendar-picker-item ${
+                  y.isSelected ? "ttdk-calendar-picker-item-selected" : ""
+                } ${y.isCurrent ? "ttdk-calendar-picker-item-current" : ""}`}
+                disabled={props.disabled}
+                aria-label={y.label}
+                onClick={(event) => selectYear(y.year)}
+              >
+                {y.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default Calendar;
+
+export { Calendar };