@spacesync/client 0.1.0

package/dist/booking-schedule-calendars.js

@@ -0,0 +1,1343 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { Info, ChevronLeft, ChevronRight } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/booking/booking-schedule-calendars.tsx
+
+// src/lib/booking-schedule.ts
+var PRICING_TODAY = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+function computeMinMonth() {
+  const d = /* @__PURE__ */ new Date();
+  if (d.getDate() === 1) {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+  }
+  const n = new Date(d.getFullYear(), d.getMonth() + 1, 1);
+  return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, "0")}`;
+}
+function computeMinWeekStart() {
+  const d = /* @__PURE__ */ new Date();
+  const day = d.getDay();
+  if (day === 1) return d.toISOString().split("T")[0];
+  const skip = day === 0 ? 1 : 8 - day;
+  d.setDate(d.getDate() + skip);
+  return d.toISOString().split("T")[0];
+}
+var MIN_MONTH = computeMinMonth() || `${(/* @__PURE__ */ new Date()).getFullYear()}-${String((/* @__PURE__ */ new Date()).getMonth() + 2).padStart(2, "0")}`;
+var MIN_WEEK_START = computeMinWeekStart() || PRICING_TODAY;
+var IS_PARTIAL_MONTH = (/* @__PURE__ */ new Date()).getDate() !== 1;
+function monthLabel(ym) {
+  const [y, m] = ym.split("-").map(Number);
+  return new Date(y, m - 1, 1).toLocaleDateString("en-US", { month: "long", year: "numeric" });
+}
+function monthCount(from, to) {
+  if (!from || !to || !from.includes("-") || !to.includes("-")) return 0;
+  const [fy, fm] = from.split("-").map(Number);
+  const [ty, tm] = to.split("-").map(Number);
+  return (ty - fy) * 12 + (tm - fm) + 1;
+}
+function weekRangeLabel(weekFrom, weekCount) {
+  if (!weekFrom || isNaN(new Date(weekFrom).getTime())) return "\u2014";
+  const end = new Date(weekFrom);
+  end.setDate(end.getDate() + weekCount * 7 - 1);
+  const s = new Date(weekFrom).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  const e = end.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  return `${s} \u2013 ${e}`;
+}
+function parseDateOnly(date) {
+  const [y, m, d] = date.split("-").map(Number);
+  return new Date(y, m - 1, d);
+}
+function formatDateOnly(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function diffDays(a, b) {
+  const da = parseDateOnly(a);
+  const db = parseDateOnly(b);
+  return Math.max(0, Math.round((db.getTime() - da.getTime()) / 864e5));
+}
+function addDays(date, days) {
+  const d = parseDateOnly(date);
+  d.setDate(d.getDate() + days);
+  return formatDateOnly(d);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function parseHm(value) {
+  const m = /^([01]\d|2[0-3]):([0-5]\d)$/.exec(value.trim());
+  if (!m) return void 0;
+  const h = Number(m[1]);
+  const min = Number(m[2]);
+  if (h > 23 || min > 59) return void 0;
+  return { h, m: min };
+}
+function toTimeStr(h, m) {
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+function formatTimeForDisplay(value, timeFormat) {
+  const p = parseHm(value);
+  if (!p) return value.trim() || "\u2014";
+  if (timeFormat === "24h") return toTimeStr(p.h, p.m);
+  const ap = p.h >= 12 ? "pm" : "am";
+  const h12 = p.h % 12 || 12;
+  return `${String(h12).padStart(2, "0")}:${String(p.m).padStart(2, "0")} ${ap}`;
+}
+Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
+Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
+Array.from({ length: 12 }, (_, i) => String(i + 1));
+var SIZE = 248;
+var CX = SIZE / 2;
+var CY = SIZE / 2;
+var FACE_R = 98;
+var HOUR_LABEL_R = 72;
+var MINUTE_TICK_R = 84;
+function pointToAngleDeg(x, y) {
+  const dx = x - CX;
+  const dy = y - CY;
+  let deg = Math.atan2(dy, dx) * 180 / Math.PI + 90;
+  if (deg < 0) deg += 360;
+  return deg;
+}
+function angleToHour12(deg) {
+  const h = Math.round(deg / 30) % 12;
+  return h === 0 ? 12 : h;
+}
+function angleToHour24(deg) {
+  return Math.round(deg / 15) % 24;
+}
+function angleToMinute(deg) {
+  return Math.round(deg / 6) % 60;
+}
+function hour12To24(h12, ap) {
+  if (ap === "am") return h12 === 12 ? 0 : h12;
+  return h12 === 12 ? 12 : h12 + 12;
+}
+function hour24To12(h24) {
+  return { h12: h24 % 12 || 12, ap: h24 >= 12 ? "pm" : "am" };
+}
+function handEnd(deg, length) {
+  const rad = (deg - 90) * Math.PI / 180;
+  return { x: CX + Math.cos(rad) * length, y: CY + Math.sin(rad) * length };
+}
+function hourCenterDeg(h, timeFormat) {
+  if (timeFormat === "24h") return h * 15;
+  return h % 12 * 30;
+}
+function sectorPath(centerDeg, spread, radius) {
+  const start = handEnd(centerDeg - spread, radius);
+  const end = handEnd(centerDeg + spread, radius);
+  return `M ${CX} ${CY} L ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y} Z`;
+}
+function pointerTarget(clientX, clientY, svg, phase, timeFormat) {
+  const rect = svg.getBoundingClientRect();
+  const scale = SIZE / rect.width;
+  const x = (clientX - rect.left) * scale;
+  const y = (clientY - rect.top) * scale;
+  const dist = Math.hypot(x - CX, y - CY);
+  if (dist < 24 || dist > FACE_R + 8) return null;
+  const deg = pointToAngleDeg(x, y);
+  if (phase === "hour") {
+    return timeFormat === "24h" ? angleToHour24(deg) : angleToHour12(deg);
+  }
+  return angleToMinute(deg);
+}
+function AnalogClockPicker({
+  value,
+  onChange,
+  timeFormat = "24h",
+  className
+}) {
+  const svgRef = useRef(null);
+  const parsed = parseHm(value);
+  const editor = parsed ?? { h: 9, m: 0 };
+  const { h12, ap } = hour24To12(editor.h);
+  const [phase, setPhase] = useState("hour");
+  const [hoverTarget, setHoverTarget] = useState(null);
+  const setTime = useCallback(
+    (h, m) => {
+      onChange(toTimeStr(h, m));
+    },
+    [onChange]
+  );
+  const handlePointer = useCallback(
+    (clientX, clientY) => {
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const scale = SIZE / rect.width;
+      const x = (clientX - rect.left) * scale;
+      const y = (clientY - rect.top) * scale;
+      const deg = pointToAngleDeg(x, y);
+      if (phase === "hour") {
+        if (timeFormat === "24h") {
+          const h24 = angleToHour24(deg);
+          setTime(h24, editor.m);
+        } else {
+          const h = angleToHour12(deg);
+          setTime(hour12To24(h, ap), editor.m);
+        }
+        setPhase("minute");
+      } else {
+        const m = angleToMinute(deg);
+        setTime(editor.h, m);
+      }
+    },
+    [phase, timeFormat, ap, editor.h, editor.m, setTime]
+  );
+  const updateHover = useCallback(
+    (clientX, clientY) => {
+      const svg = svgRef.current;
+      if (!svg) return;
+      setHoverTarget(pointerTarget(clientX, clientY, svg, phase, timeFormat));
+    },
+    [phase, timeFormat]
+  );
+  const previewHour = phase === "hour" && hoverTarget != null ? timeFormat === "24h" ? hoverTarget : hour12To24(hoverTarget, ap) : editor.h;
+  const previewMinute = phase === "minute" && hoverTarget != null ? hoverTarget : editor.m;
+  const hourHandDeg = previewHour % 12 * 30 + previewMinute * 0.5;
+  const minuteHandDeg = previewMinute * 6;
+  const hourEnd = handEnd(hourHandDeg, 46);
+  const minuteEnd = handEnd(minuteHandDeg, 64);
+  const selectedHourKey = timeFormat === "24h" ? editor.h : h12;
+  const hoveredHourKey = phase === "hour" ? hoverTarget : null;
+  const hourMarkers = useMemo(() => {
+    if (timeFormat === "24h") {
+      return Array.from({ length: 24 }, (_, h) => {
+        const deg = h * 15;
+        const rad = (deg - 90) * Math.PI / 180;
+        const showLabel = h % 3 === 0;
+        const r = showLabel ? HOUR_LABEL_R - 6 : HOUR_LABEL_R + 4;
+        return {
+          key: h,
+          label: showLabel ? String(h).padStart(2, "0") : null,
+          x: CX + Math.cos(rad) * r,
+          y: CY + Math.sin(rad) * r,
+          deg,
+          h
+        };
+      });
+    }
+    return Array.from({ length: 12 }, (_, i) => {
+      const h = i === 0 ? 12 : i;
+      const deg = h * 30;
+      const rad = (deg - 90) * Math.PI / 180;
+      return {
+        key: h,
+        label: String(h),
+        x: CX + Math.cos(rad) * HOUR_LABEL_R,
+        y: CY + Math.sin(rad) * HOUR_LABEL_R,
+        deg,
+        h
+      };
+    });
+  }, [timeFormat]);
+  const minuteMarkers = useMemo(
+    () => Array.from({ length: 12 }, (_, i) => {
+      const m = i * 5;
+      const deg = m * 6;
+      const rad = (deg - 90) * Math.PI / 180;
+      const selected = editor.m === m;
+      const hovered = hoverTarget != null && Math.round(hoverTarget / 5) * 5 === m;
+      return {
+        m,
+        x: CX + Math.cos(rad) * MINUTE_TICK_R,
+        y: CY + Math.sin(rad) * MINUTE_TICK_R,
+        selected,
+        hovered
+      };
+    }),
+    [editor.m, hoverTarget]
+  );
+  const displayTime = formatTimeForDisplay(value || toTimeStr(editor.h, editor.m), timeFormat);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-2xl border border-border bg-muted/60 px-4 py-2.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPhase("hour"),
+          className: cn(
+            "rounded-lg px-3 py-1 text-2xl font-semibold tabular-nums transition-colors",
+            phase === "hour" ? "bg-blue-500 text-white shadow-sm" : "text-foreground hover:bg-accent"
+          ),
+          children: timeFormat === "24h" ? String(editor.h).padStart(2, "0") : String(h12).padStart(2, "0")
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-muted-foreground", children: ":" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPhase("minute"),
+          className: cn(
+            "rounded-lg px-3 py-1 text-2xl font-semibold tabular-nums transition-colors",
+            phase === "minute" ? "bg-blue-500 text-white shadow-sm" : "text-foreground hover:bg-accent"
+          ),
+          children: String(editor.m).padStart(2, "0")
+        }
+      ),
+      timeFormat === "12h" ? /* @__PURE__ */ jsx("div", { className: "ml-2 flex flex-col gap-0.5", children: ["am", "pm"].map((p) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTime(hour12To24(h12, p), editor.m),
+          className: cn(
+            "rounded-md px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide transition-colors",
+            ap === p ? "bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300" : "text-muted-foreground hover:bg-accent"
+          ),
+          children: p
+        },
+        p
+      )) }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        width: SIZE,
+        height: SIZE,
+        viewBox: `0 0 ${SIZE} ${SIZE}`,
+        className: "cursor-pointer touch-none select-none",
+        onClick: (e) => handlePointer(e.clientX, e.clientY),
+        onPointerMove: (e) => updateHover(e.clientX, e.clientY),
+        onPointerLeave: () => setHoverTarget(null),
+        onPointerDown: (e) => {
+          e.preventDefault();
+          handlePointer(e.clientX, e.clientY);
+        },
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: FACE_R, className: "fill-blue-50/80 dark:fill-blue-950/30" }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: CX,
+              cy: CY,
+              r: FACE_R,
+              className: "fill-none stroke-border",
+              strokeWidth: 1.5
+            }
+          ),
+          phase === "hour" && hoverTarget != null ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: sectorPath(
+                hourCenterDeg(hoverTarget, timeFormat),
+                timeFormat === "24h" ? 7.5 : 15,
+                FACE_R - 2
+              ),
+              className: "fill-blue-200/70 transition-opacity dark:fill-blue-500/25"
+            }
+          ) : null,
+          phase === "minute" && hoverTarget != null ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: sectorPath(hoverTarget * 6, 3, FACE_R - 2),
+              className: "fill-blue-200/70 transition-opacity dark:fill-blue-500/25"
+            }
+          ) : null,
+          phase === "hour" ? hourMarkers.map((m) => {
+            const isSelected = m.h === selectedHourKey || timeFormat === "12h" && m.h === h12;
+            const isHovered = m.h === hoveredHourKey;
+            const active = isHovered || isSelected && hoveredHourKey == null;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              active ? /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: m.x,
+                  cy: m.y,
+                  r: isHovered ? 18 : 16,
+                  className: cn(
+                    "transition-all duration-100",
+                    isHovered ? "fill-blue-500 shadow-sm" : "fill-blue-400/90"
+                  )
+                }
+              ) : null,
+              m.label ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: m.x,
+                  y: m.y,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  className: cn(
+                    "pointer-events-none text-[11px] font-semibold transition-colors duration-100",
+                    active ? "fill-white" : "fill-muted-foreground",
+                    isHovered && "text-[12px] font-bold"
+                  ),
+                  children: m.label
+                }
+              ) : /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: m.x,
+                  cy: m.y,
+                  r: isHovered ? 5 : 2,
+                  className: cn(
+                    "pointer-events-none transition-all duration-100",
+                    isHovered ? "fill-white" : "fill-muted-foreground/40"
+                  )
+                }
+              )
+            ] }, m.key);
+          }) : minuteMarkers.map((m) => {
+            const active = m.selected || m.hovered;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: m.x,
+                  cy: m.y,
+                  r: m.hovered ? 16 : m.selected ? 14 : 4,
+                  className: cn(
+                    "transition-all duration-100",
+                    m.hovered ? "fill-blue-400" : m.selected ? "fill-blue-500" : "fill-blue-200/80 dark:fill-blue-800/60"
+                  )
+                }
+              ),
+              active || m.m % 15 === 0 ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: m.x,
+                  y: m.y,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  className: cn(
+                    "pointer-events-none text-[10px] font-semibold transition-colors duration-100",
+                    active ? "fill-white" : "fill-blue-700 dark:fill-blue-300"
+                  ),
+                  children: String(m.m).padStart(2, "0")
+                }
+              ) : null
+            ] }, m.m);
+          }),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: CX,
+              y1: CY,
+              x2: hourEnd.x,
+              y2: hourEnd.y,
+              className: cn(
+                "stroke-blue-600 transition-all duration-100 dark:stroke-blue-400",
+                phase === "hour" && hoverTarget != null && "stroke-blue-500 opacity-90"
+              ),
+              strokeWidth: 3.5,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: CX,
+              y1: CY,
+              x2: minuteEnd.x,
+              y2: minuteEnd.y,
+              className: cn(
+                "stroke-blue-500 transition-all duration-100 dark:stroke-blue-300",
+                phase === "minute" && hoverTarget != null && "stroke-blue-400 opacity-90"
+              ),
+              strokeWidth: 2.5,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: 5, className: "fill-blue-600 dark:fill-blue-400" }),
+          /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: 2.5, className: "fill-white" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-center text-[11px] text-muted-foreground", children: [
+      phase === "hour" ? "Hover or tap an hour" : "Hover or tap minutes \xB7 ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: hoverTarget != null && phase === "hour" ? formatTimeForDisplay(
+        toTimeStr(
+          timeFormat === "24h" ? hoverTarget : hour12To24(hoverTarget, ap),
+          editor.m
+        ),
+        timeFormat
+      ) : hoverTarget != null && phase === "minute" ? formatTimeForDisplay(toTimeStr(editor.h, hoverTarget), timeFormat) : displayTime })
+    ] })
+  ] });
+}
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function dayStr(d) {
+  return d.toISOString().split("T")[0];
+}
+function getCalendarGrid(year, month) {
+  const firstDay = new Date(year, month, 1);
+  const dow = firstDay.getDay();
+  const startOffset = dow === 0 ? -6 : 1 - dow;
+  const days = [];
+  for (let i = 0; i < 35; i++) {
+    days.push(new Date(year, month, 1 + startOffset + i));
+  }
+  if (days[days.length - 1] < new Date(year, month + 1, 0)) {
+    for (let i = 35; i < 42; i++) {
+      days.push(new Date(year, month, 1 + startOffset + i));
+    }
+  }
+  return days;
+}
+function ScheduleFieldLabel({ children }) {
+  return /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children });
+}
+function ScheduleInfoBanner({ children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-blue-100 bg-blue-50 px-3 py-2.5 dark:border-blue-900/50 dark:bg-blue-950/40", children: [
+    /* @__PURE__ */ jsx(Info, { size: 13, className: "mt-0.5 shrink-0 text-blue-400" }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-blue-700 dark:text-blue-400", children })
+  ] });
+}
+function ScheduleStepper({
+  value,
+  min = 1,
+  max = 100,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-32 items-center overflow-hidden rounded-xl border border-border bg-card", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(Math.max(min, value - 1)),
+        className: "flex h-9 w-9 shrink-0 items-center justify-center border-r border-border text-sm text-muted-foreground hover:bg-accent",
+        children: "\u2212"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 text-center text-sm font-medium text-foreground", children: value }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(Math.min(max, value + 1)),
+        className: "flex h-9 w-9 shrink-0 items-center justify-center border-l border-border text-sm text-muted-foreground hover:bg-accent",
+        children: "+"
+      }
+    )
+  ] });
+}
+function WeekCalendarPicker({
+  weekFrom,
+  onChange,
+  flat = false
+}) {
+  const initDate = /* @__PURE__ */ new Date((weekFrom || MIN_WEEK_START) + "T00:00:00");
+  const [calYear, setCalYear] = useState(initDate.getFullYear());
+  const [calMonth, setCalMonth] = useState(initDate.getMonth());
+  const [hoverMon, setHoverMon] = useState(null);
+  const days = getCalendarGrid(calYear, calMonth);
+  const minDate = /* @__PURE__ */ new Date((MIN_WEEK_START || PRICING_TODAY) + "T00:00:00");
+  const selectedMonStr = weekFrom || null;
+  const hoverMonStr = hoverMon;
+  const prevMonth = () => {
+    if (calMonth === 0) {
+      setCalYear((y) => y - 1);
+      setCalMonth(11);
+    } else setCalMonth((m) => m - 1);
+  };
+  const nextMonth = () => {
+    if (calMonth === 11) {
+      setCalYear((y) => y + 1);
+      setCalMonth(0);
+    } else setCalMonth((m) => m + 1);
+  };
+  const weeks = [];
+  for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex select-none flex-col",
+        flat ? "gap-3" : "gap-1 rounded-2xl border border-border bg-card p-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: prevMonth,
+              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
+            MONTH_NAMES[calMonth],
+            " ",
+            calYear
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: nextMonth,
+              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mb-0.5 grid grid-cols-7", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: "py-0.5 text-center text-[10px] font-medium text-muted-foreground", children: d }, d)) }),
+        weeks.map((week, wi) => {
+          const mondayDate = week[0];
+          const monStr = dayStr(mondayDate);
+          const isSelectable = mondayDate >= minDate;
+          const isSelected = monStr === selectedMonStr;
+          const isHovered = monStr === hoverMonStr && isSelectable && !isSelected;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `flex cursor-pointer overflow-hidden rounded-xl transition-colors
+              ${isSelected ? "bg-blue-100" : isHovered ? "bg-blue-50" : isSelectable ? "hover:bg-accent" : "cursor-not-allowed"}`,
+              onMouseEnter: () => isSelectable && setHoverMon(monStr),
+              onMouseLeave: () => setHoverMon(null),
+              onClick: () => isSelectable && onChange(monStr),
+              children: week.map((d, di) => {
+                const isCurrentMonth = d.getMonth() === calMonth;
+                const isMon = di === 0;
+                const isSelectedMon = isSelected && isMon;
+                return /* @__PURE__ */ jsx("div", { className: "flex h-8 flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `
+                    flex h-7 w-7 items-center justify-center rounded-full text-[11px] transition-colors
+                    ${isSelectedMon ? "bg-blue-500 font-semibold text-white" : ""}
+                    ${!isSelectedMon && isSelected ? "text-blue-700 dark:text-blue-400" : ""}
+                    ${!isSelected && isSelectable && isCurrentMonth ? "text-muted-foreground" : ""}
+                    ${!isSelectable && isCurrentMonth ? "text-muted-foreground/60" : ""}
+                    ${!isCurrentMonth ? "text-muted-foreground/60" : ""}
+                  `,
+                    children: d.getDate()
+                  }
+                ) }, di);
+              })
+            },
+            wi
+          );
+        }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-center text-[10px] text-muted-foreground", children: "Click any row to select that week" })
+      ]
+    }
+  );
+}
+function MonthRangeCalendar({
+  monthFrom,
+  monthTo,
+  onChange,
+  flat = false
+}) {
+  const initYear = monthFrom ? parseInt(monthFrom.split("-")[0], 10) : (/* @__PURE__ */ new Date()).getFullYear();
+  const [calYear, setCalYear] = useState(initYear);
+  const [phase, setPhase] = useState("from");
+  const [hoverYm, setHoverYm] = useState(null);
+  const ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const toYm = (y, m) => `${y}-${String(m + 1).padStart(2, "0")}`;
+  const minYm = MIN_MONTH || `${(/* @__PURE__ */ new Date()).getFullYear()}-01`;
+  const [dispFrom, dispTo] = (() => {
+    if (phase === "to" && hoverYm) {
+      if (hoverYm >= monthFrom) return [monthFrom, hoverYm];
+      return [hoverYm, hoverYm];
+    }
+    return [monthFrom, monthTo];
+  })();
+  const isSingle = dispFrom === dispTo;
+  const handleClick = (ymStr) => {
+    if (ymStr < minYm) return;
+    if (phase === "from") {
+      onChange(ymStr, ymStr);
+      setPhase("to");
+    } else if (ymStr >= monthFrom) {
+      onChange(monthFrom, ymStr);
+      setPhase("from");
+    } else {
+      onChange(ymStr, ymStr);
+    }
+  };
+  const actualCount = monthCount(monthFrom, monthTo);
+  const previewCount = monthCount(dispFrom, dispTo);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "select-none",
+        flat ? "flex flex-col gap-5" : "overflow-hidden rounded-2xl border border-border bg-card"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", flat ? "px-1" : "px-4 pb-2 pt-4"), children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setCalYear((y) => y - 1),
+              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: calYear }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setCalYear((y) => y + 1),
+              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 text-[11px] font-medium transition-colors",
+              flat ? phase === "to" ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground" : cn(
+                "px-4 py-2 text-[10px]",
+                phase === "to" ? "bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-400" : "bg-transparent text-muted-foreground"
+              )
+            ),
+            children: phase === "from" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50" }),
+              "Click a month to set the start"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-blue-500" }),
+              "Now click to set the end month",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onChange(monthFrom, monthFrom);
+                    setPhase("to");
+                  },
+                  className: "ml-auto text-[10px] text-blue-400 underline underline-offset-2 hover:text-blue-600 dark:text-blue-400",
+                  children: "Reset"
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("grid grid-cols-4", flat ? "gap-2 py-1" : "px-2 pb-3 pt-1"),
+            style: flat ? void 0 : { gap: 0 },
+            children: ABBR.map((label, i) => {
+              const ymStr = toYm(calYear, i);
+              const disabled = ymStr < minYm;
+              const inRange = !disabled && ymStr >= dispFrom && ymStr <= dispTo;
+              const isFrom = ymStr === dispFrom;
+              const isTo = ymStr === dispTo;
+              const showStrip = inRange && !isSingle;
+              const sLeft = isFrom ? "left-1/2" : "left-0";
+              const sRight = isTo ? "right-1/2" : "right-0";
+              const filled = (isFrom || isTo) && !disabled;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative",
+                    flat ? "h-14" : "h-12",
+                    disabled ? "cursor-not-allowed" : "cursor-pointer"
+                  ),
+                  onMouseEnter: () => !disabled && setHoverYm(ymStr),
+                  onMouseLeave: () => setHoverYm(null),
+                  onClick: () => handleClick(ymStr),
+                  children: [
+                    showStrip ? /* @__PURE__ */ jsx("div", { className: `absolute bottom-1.5 top-1.5 bg-blue-100 ${sLeft} ${sRight}` }) : null,
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "relative z-10 flex w-full items-center justify-center",
+                          flat ? "h-14" : "h-12"
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `flex h-9 w-9 items-center justify-center rounded-full text-xs font-medium transition-all duration-100
+                  ${filled ? "bg-blue-500 text-white shadow-md shadow-blue-200" : inRange ? "text-blue-700 dark:text-blue-400" : !disabled ? "text-muted-foreground hover:bg-accent" : "text-muted-foreground/60"}`,
+                            children: label
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between transition-colors",
+              flat ? "border-t border-border/70 pt-4 text-xs" : cn(
+                "border-t px-4 py-2.5",
+                phase === "from" && actualCount > 0 ? "border-border bg-muted" : "border-transparent"
+              )
+            ),
+            children: phase === "from" && actualCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+                monthLabel(monthFrom),
+                " \u2192 ",
+                monthLabel(monthTo)
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-semibold text-blue-600 dark:bg-blue-950/40 dark:text-blue-400", children: [
+                actualCount,
+                " month",
+                actualCount !== 1 ? "s" : ""
+              ] })
+            ] }) : phase === "to" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: hoverYm && hoverYm >= monthFrom ? `${monthLabel(monthFrom)} \u2192 ${monthLabel(hoverYm)}` : `Start: ${monthLabel(monthFrom)}` }),
+              hoverYm && hoverYm >= monthFrom && previewCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-medium text-blue-400", children: [
+                previewCount,
+                " month",
+                previewCount !== 1 ? "s" : ""
+              ] }) : null
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/60", children: "No months selected" })
+          }
+        )
+      ]
+    }
+  );
+}
+function MonthPeriodPicker({
+  booking,
+  onChange,
+  flat = true
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", flat ? "gap-5" : "gap-3"), children: [
+    IS_PARTIAL_MONTH ? /* @__PURE__ */ jsxs(ScheduleInfoBanner, { children: [
+      "Today is ",
+      new Date(PRICING_TODAY).toLocaleDateString("en-US", { month: "long", day: "numeric" }),
+      ". Current month is partially elapsed \u2014 earliest bookable month is",
+      " ",
+      /* @__PURE__ */ jsx("strong", { children: monthLabel(MIN_MONTH) }),
+      "."
+    ] }) : null,
+    /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Select month range" }),
+    /* @__PURE__ */ jsx(
+      MonthRangeCalendar,
+      {
+        flat,
+        monthFrom: booking.monthFrom,
+        monthTo: booking.monthTo,
+        onChange: (from, to) => onChange({ monthFrom: from, monthTo: to })
+      }
+    )
+  ] });
+}
+function WeekPeriodPicker({
+  booking,
+  onChange,
+  flat = true
+}) {
+  const rangeStr = weekRangeLabel(booking.weekFrom, booking.weekCount);
+  const isCurrentWeekPartial = new Date(PRICING_TODAY).getDay() !== 1;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", flat ? "gap-5" : "gap-3"), children: [
+    isCurrentWeekPartial ? /* @__PURE__ */ jsxs(ScheduleInfoBanner, { children: [
+      "This week started on a ",
+      new Date(PRICING_TODAY).toLocaleDateString("en-US", { weekday: "long" }),
+      " \u2014 earliest full week begins",
+      " ",
+      /* @__PURE__ */ jsx("strong", { children: new Date(MIN_WEEK_START).toLocaleDateString("en-US", {
+        month: "long",
+        day: "numeric"
+      }) }),
+      "."
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Starting week" }),
+      /* @__PURE__ */ jsx(
+        WeekCalendarPicker,
+        {
+          flat,
+          weekFrom: booking.weekFrom,
+          onChange: (v) => onChange({ weekFrom: v })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Number of weeks" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          ScheduleStepper,
+          {
+            value: booking.weekCount,
+            max: 52,
+            onChange: (v) => onChange({ weekCount: v })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          booking.weekCount,
+          " week",
+          booking.weekCount !== 1 ? "s" : ""
+        ] })
+      ] })
+    ] }),
+    booking.weekFrom && booking.weekCount > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Period" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: rangeStr })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "rounded-lg bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600 dark:bg-blue-950/40 dark:text-blue-400", children: [
+        booking.weekCount,
+        " week",
+        booking.weekCount !== 1 ? "s" : ""
+      ] })
+    ] }) : null
+  ] });
+}
+function formatDateLabel(iso) {
+  if (!iso) return "\u2014";
+  return (/* @__PURE__ */ new Date(iso + "T00:00:00")).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function isBillableDay(day, start, end) {
+  return Boolean(start && end && day >= start && day < end);
+}
+function DayCalendarPicker({
+  selectedDate,
+  onChange,
+  minDate = PRICING_TODAY,
+  flat = false
+}) {
+  const initDate = /* @__PURE__ */ new Date((selectedDate || minDate) + "T00:00:00");
+  const [calYear, setCalYear] = useState(initDate.getFullYear());
+  const [calMonth, setCalMonth] = useState(initDate.getMonth());
+  const days = getCalendarGrid(calYear, calMonth);
+  const prevMonth = () => {
+    if (calMonth === 0) {
+      setCalYear((y) => y - 1);
+      setCalMonth(11);
+    } else setCalMonth((m) => m - 1);
+  };
+  const nextMonth = () => {
+    if (calMonth === 11) {
+      setCalYear((y) => y + 1);
+      setCalMonth(0);
+    } else setCalMonth((m) => m + 1);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex select-none flex-col",
+        flat ? "gap-3" : "gap-1 rounded-2xl border border-border bg-card p-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: prevMonth,
+              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
+            MONTH_NAMES[calMonth],
+            " ",
+            calYear
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: nextMonth,
+              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mb-0.5 grid grid-cols-7", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: "py-0.5 text-center text-[10px] font-medium text-muted-foreground", children: d }, d)) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: days.map((d) => {
+          const ds = dayStr(d);
+          const isCurrentMonth = d.getMonth() === calMonth;
+          const isSelectable = ds >= minDate;
+          const isSelected = ds === selectedDate;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !isSelectable,
+              onClick: () => isSelectable && onChange(ds),
+              className: cn(
+                "flex h-9 items-center justify-center",
+                !isSelectable && "cursor-not-allowed"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex h-8 w-8 items-center justify-center rounded-full text-[11px] transition-colors",
+                    isSelected && "bg-blue-500 font-semibold text-white shadow-sm",
+                    !isSelected && isSelectable && isCurrentMonth && "text-foreground hover:bg-accent",
+                    !isSelected && isSelectable && !isCurrentMonth && "text-muted-foreground hover:bg-accent",
+                    !isSelectable && isCurrentMonth && "text-muted-foreground/40",
+                    !isSelectable && !isCurrentMonth && "text-muted-foreground/30"
+                  ),
+                  children: d.getDate()
+                }
+              )
+            },
+            ds
+          );
+        }) }),
+        selectedDate ? /* @__PURE__ */ jsxs("p", { className: "mt-1 text-center text-[10px] text-muted-foreground", children: [
+          "Selected ",
+          formatDateLabel(selectedDate)
+        ] }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-center text-[10px] text-muted-foreground", children: "Click a day to book" })
+      ]
+    }
+  );
+}
+function DayRangeCalendar({
+  startDate,
+  endDate,
+  onChange,
+  minDate = PRICING_TODAY,
+  flat = false
+}) {
+  const initDate = /* @__PURE__ */ new Date((startDate || minDate) + "T00:00:00");
+  const [calYear, setCalYear] = useState(initDate.getFullYear());
+  const [calMonth, setCalMonth] = useState(initDate.getMonth());
+  const [phase, setPhase] = useState("from");
+  const [hoverDay, setHoverDay] = useState(null);
+  const days = getCalendarGrid(calYear, calMonth);
+  const lastBillableDay = endDate ? addDays(endDate, -1) : "";
+  const [dispStart, dispEnd] = (() => {
+    if (phase === "to" && hoverDay && startDate) {
+      if (hoverDay >= startDate) return [startDate, addDays(hoverDay, 1)];
+      return [hoverDay, addDays(hoverDay, 1)];
+    }
+    return [startDate, endDate];
+  })();
+  const dayCount = startDate && endDate ? diffDays(startDate, endDate) : 0;
+  const handleClick = (ds) => {
+    if (ds < minDate) return;
+    if (phase === "from") {
+      onChange(ds, addDays(ds, 1));
+      setPhase("to");
+      return;
+    }
+    if (ds < startDate) {
+      onChange(ds, addDays(ds, 1));
+      setPhase("to");
+      return;
+    }
+    onChange(startDate, addDays(ds, 1));
+    setPhase("from");
+  };
+  const prevMonth = () => {
+    if (calMonth === 0) {
+      setCalYear((y) => y - 1);
+      setCalMonth(11);
+    } else setCalMonth((m) => m - 1);
+  };
+  const nextMonth = () => {
+    if (calMonth === 11) {
+      setCalYear((y) => y + 1);
+      setCalMonth(0);
+    } else setCalMonth((m) => m + 1);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex select-none flex-col",
+        flat ? "gap-3" : "gap-1 rounded-2xl border border-border bg-card p-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: prevMonth,
+              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
+            MONTH_NAMES[calMonth],
+            " ",
+            calYear
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: nextMonth,
+              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 px-1 text-[11px] font-medium",
+              phase === "to" ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground"
+            ),
+            children: phase === "from" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50" }),
+              "Click the first day"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-blue-500" }),
+              "Click the last day",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onChange(startDate, addDays(startDate, 1));
+                    setPhase("to");
+                  },
+                  className: "ml-auto text-[10px] text-blue-400 underline underline-offset-2 hover:text-blue-600 dark:text-blue-400",
+                  children: "Reset"
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mb-0.5 grid grid-cols-7", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: "py-0.5 text-center text-[10px] font-medium text-muted-foreground", children: d }, d)) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: days.map((d) => {
+          const ds = dayStr(d);
+          const isCurrentMonth = d.getMonth() === calMonth;
+          const isSelectable = ds >= minDate;
+          const inRange = isBillableDay(ds, dispStart, dispEnd);
+          const isStart = ds === dispStart;
+          const isEnd = ds === lastBillableDay && dispEnd && diffDays(dispStart, dispEnd) > 1;
+          const isSingle = dispStart && dispEnd && diffDays(dispStart, dispEnd) === 1 && ds === dispStart;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: !isSelectable,
+              onMouseEnter: () => isSelectable && setHoverDay(ds),
+              onMouseLeave: () => setHoverDay(null),
+              onClick: () => isSelectable && handleClick(ds),
+              className: cn(
+                "relative flex h-9 items-center justify-center",
+                !isSelectable && "cursor-not-allowed"
+              ),
+              children: [
+                inRange && !isSingle ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute inset-y-1.5 bg-blue-100",
+                      isStart ? "left-1/2 right-0 rounded-l-full" : isEnd ? "left-0 right-1/2 rounded-r-full" : "inset-x-0"
+                    )
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[11px] transition-colors",
+                      (isStart || isEnd || isSingle) && "bg-blue-500 font-semibold text-white shadow-sm",
+                      !isStart && !isEnd && !isSingle && inRange && "font-medium text-blue-700 dark:text-blue-400",
+                      !inRange && isSelectable && isCurrentMonth && "text-foreground hover:bg-accent",
+                      !inRange && isSelectable && !isCurrentMonth && "text-muted-foreground hover:bg-accent",
+                      !isSelectable && isCurrentMonth && "text-muted-foreground/40",
+                      !isSelectable && !isCurrentMonth && "text-muted-foreground/30"
+                    ),
+                    children: d.getDate()
+                  }
+                )
+              ]
+            },
+            ds
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-t border-border/70 pt-3 text-xs", children: dayCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+            formatDateLabel(startDate),
+            dayCount > 1 ? ` \u2192 ${formatDateLabel(lastBillableDay)}` : ""
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-semibold text-blue-600 dark:bg-blue-950/40 dark:text-blue-400", children: [
+            dayCount,
+            " day",
+            dayCount !== 1 ? "s" : ""
+          ] })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/60", children: "Select a date range" }) })
+      ]
+    }
+  );
+}
+function DayPeriodPicker({
+  booking,
+  onChange,
+  flat = true
+}) {
+  const oneDay = booking.oneDayBooking ?? true;
+  const dayCount = oneDay ? 1 : diffDays(booking.startDate, booking.endDate);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", flat ? "gap-5" : "gap-3"), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+      { key: true, label: "Single day" },
+      { key: false, label: "Multiple days" }
+    ].map(({ key, label }) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          const start = booking.startDate || PRICING_TODAY;
+          if (key) {
+            onChange({ oneDayBooking: true, startDate: start, endDate: addDays(start, 1) });
+          } else {
+            const end = booking.endDate && booking.endDate > start && diffDays(start, booking.endDate) > 1 ? booking.endDate : addDays(start, 7);
+            onChange({ oneDayBooking: false, startDate: start, endDate: end });
+          }
+        },
+        className: cn(
+          "flex h-9 flex-1 items-center justify-center rounded-xl border text-sm font-medium transition-colors",
+          oneDay === key ? "border-blue-400 bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-400" : "border-border bg-card text-muted-foreground hover:bg-accent"
+        ),
+        children: label
+      },
+      String(key)
+    )) }),
+    oneDay ? /* @__PURE__ */ jsx(
+      DayCalendarPicker,
+      {
+        flat,
+        selectedDate: booking.startDate,
+        onChange: (v) => onChange({ startDate: v, endDate: addDays(v, 1) })
+      }
+    ) : /* @__PURE__ */ jsx(
+      DayRangeCalendar,
+      {
+        flat,
+        startDate: booking.startDate,
+        endDate: booking.endDate,
+        onChange: (start, end) => onChange({ startDate: start, endDate: end })
+      }
+    ),
+    dayCount > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Period" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: oneDay ? formatDateLabel(booking.startDate) : `${formatDateLabel(booking.startDate)} \u2192 ${formatDateLabel(addDays(booking.endDate, -1))}` })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "rounded-lg bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600 dark:bg-blue-950/40 dark:text-blue-400", children: [
+        dayCount,
+        " day",
+        dayCount !== 1 ? "s" : ""
+      ] })
+    ] }) : null
+  ] });
+}
+function HourlySchedulePicker({
+  scheduleDate,
+  scheduleTime,
+  onChange,
+  timeFormat = "24h",
+  flat = true
+}) {
+  const [step, setStep] = useState(() => scheduleDate ? "time" : "date");
+  useEffect(() => {
+    if (!scheduleDate) setStep("date");
+  }, [scheduleDate]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", flat ? "" : "rounded-2xl border border-border bg-card p-4"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            step === "date" && "font-semibold text-blue-600 dark:text-blue-400",
+            scheduleDate && step !== "date" && "text-foreground"
+          ),
+          children: "Date"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            step === "time" && "font-semibold text-blue-600 dark:text-blue-400",
+            !scheduleDate && "text-muted-foreground/60"
+          ),
+          children: "Time"
+        }
+      )
+    ] }),
+    step === "date" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Pick a day" }),
+      /* @__PURE__ */ jsx(
+        DayCalendarPicker,
+        {
+          flat,
+          selectedDate: scheduleDate,
+          minDate: PRICING_TODAY,
+          onChange: (v) => {
+            onChange({ scheduleDate: v });
+            setStep("time");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-center text-[11px] text-muted-foreground", children: "Select a day to set the time" })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setStep("date"),
+          className: "inline-flex w-fit items-center gap-2 rounded-xl border border-border bg-muted/60 px-3 py-2 text-left transition-colors hover:bg-muted",
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { size: 14, className: "shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Date" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: formatDateLabel(scheduleDate) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 text-[11px] font-medium text-blue-600 dark:text-blue-400", children: "Change" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Pick a time" }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center rounded-2xl border border-border bg-card py-6", children: /* @__PURE__ */ jsx(
+          AnalogClockPicker,
+          {
+            value: scheduleTime,
+            onChange: (v) => onChange({ scheduleTime: v }),
+            timeFormat
+          }
+        ) })
+      ] }),
+      scheduleDate && scheduleTime ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Scheduled for" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          formatDateLabel(scheduleDate),
+          " \xB7 ",
+          formatTimeForDisplay(scheduleTime, timeFormat)
+        ] })
+      ] }) }) : null
+    ] })
+  ] });
+}
+
+export { DayCalendarPicker, DayPeriodPicker, DayRangeCalendar, HourlySchedulePicker, MonthPeriodPicker, MonthRangeCalendar, ScheduleFieldLabel, ScheduleInfoBanner, ScheduleStepper, WeekCalendarPicker, WeekPeriodPicker };
+//# sourceMappingURL=booking-schedule-calendars.js.map
+//# sourceMappingURL=booking-schedule-calendars.js.map