@spacesync/client 0.1.0 → 0.1.1

package/dist/booking-schedule-calendars.js

@@ -1,11 +1,19 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { AnalogClockPicker } from './chunk-YAVEMXXV.js';
+import { formatTimeForDisplay } from './chunk-4A6RCBB5.js';
+import './chunk-RV5PMZYZ.js';
+import './chunk-L65F4EMK.js';
+import './chunk-PBNBLCC2.js';
+import './chunk-VVXGQKN7.js';
+import './chunk-7YCAAP43.js';
+import './chunk-LUB7QWGU.js';
+import './chunk-VHINHHZQ.js';
+import './chunk-FCY5FYJB.js';
+import './chunk-OWNUMPUC.js';
+import { cn } from './chunk-DMPSQ22Q.js';
+import { useState, useEffect } 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() {
@@ -65,403 +73,6 @@ function addDays(date, days) {
   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",