@geomak/ui 6.25.0 → 6.26.0

package/dist/index.js

@@ -2840,6 +2840,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
+var MONTHS_SHORT = MONTHS2.map((m) => m.slice(0, 3));
 var WEEKDAYS2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var toDate = (d) => d instanceof Date ? d : new Date(d);
 var startOfDay2 = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
@@ -2967,10 +2968,18 @@ function Scheduler({
             /* @__PURE__ */ jsx(IconButton, { type: "bordered", size: "sm", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "left" }), title: "Previous", onClick: () => go(-1) }),
             /* @__PURE__ */ jsx(IconButton, { type: "bordered", size: "sm", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "right" }), title: "Next", onClick: () => go(1) }),
             /* @__PURE__ */ jsx(Button_default, { variant: "ghost", size: "sm", content: "Today", onClick: goToday }),
-            /* @__PURE__ */ jsxs("h2", { className: "ml-1 min-w-[9rem] text-base font-semibold tracking-tight text-foreground", children: [
-              title,
-              loading && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-flex translate-y-0.5", children: /* @__PURE__ */ jsx(Spinner2, {}) })
-            ] })
+            /* @__PURE__ */ jsx(
+              MonthYearPicker,
+              {
+                label: title,
+                cursor,
+                onPick: (d) => {
+                  setDir(0);
+                  setCursor(d);
+                }
+              }
+            ),
+            loading && /* @__PURE__ */ jsx(Spinner2, {})
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
@@ -3021,6 +3030,64 @@ function Scheduler({
     }
   );
 }
+function MonthYearPicker({ label, cursor, onPick }) {
+  const [open, setOpen] = useState(false);
+  const [viewYear, setViewYear] = useState(cursor.getFullYear());
+  useEffect(() => {
+    if (open) setViewYear(cursor.getFullYear());
+  }, [open, cursor]);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "group ml-1 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-lg font-semibold tracking-tight text-foreground transition-colors hover:bg-background focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        children: [
+          label,
+          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-4 w-4 text-foreground-muted transition-transform duration-150 group-data-[state=open]:rotate-180", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 8,
+        className: [
+          "z-[400] w-64 rounded-lg border border-border bg-surface p-3 shadow-lg",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "bordered", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "left" }), title: "Previous year", onClick: () => setViewYear((y) => y - 1) }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-foreground", children: viewYear }),
+            /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "bordered", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "right" }), title: "Next year", onClick: () => setViewYear((y) => y + 1) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: MONTHS_SHORT.map((m, i) => {
+            const current = i === cursor.getMonth() && viewYear === cursor.getFullYear();
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onPick(new Date(viewYear, i, 1));
+                  setOpen(false);
+                },
+                className: [
+                  "rounded-md px-2 py-1.5 text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  current ? "bg-accent font-semibold text-accent-fg" : "text-foreground hover:bg-background"
+                ].join(" "),
+                children: m
+              },
+              m
+            );
+          }) })
+        ]
+      }
+    ) })
+  ] });
+}
 var MAX_CHIPS = 3;
 function MonthView({
   cursor,
@@ -3045,7 +3112,9 @@ function MonthView({
           className: [
             "group flex min-h-[5rem] flex-col gap-1 border-b border-r border-border p-1.5 text-left transition-colors",
             "[&:nth-child(7n)]:border-r-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent",
-            inMonth ? "bg-surface hover:bg-surface-raised" : "bg-background/40"
+            // surface===surface-raised in light mode, so hover lifts toward the
+            // cool chart-mist background instead (a visible, on-brand tint).
+            inMonth ? "bg-surface hover:bg-background" : "bg-background hover:bg-surface"
           ].join(" "),
           children: [
             /* @__PURE__ */ jsx(
@@ -3102,6 +3171,8 @@ function WeekView({
   onSelectEvent
 }) {
   const days = useMemo(() => getWeekDays(cursor, weekStartsOn), [cursor, weekStartsOn]);
+  const labels = useMemo(() => weekdayLabels(weekStartsOn), [weekStartsOn]);
+  const dow = (d) => labels[(d.getDay() - weekStartsOn + 7) % 7];
   const [startHour, endHour] = dayHours;
   const hours = useMemo(
     () => Array.from({ length: endHour - startHour }, (_, i) => startHour + i),
@@ -3113,7 +3184,7 @@ function WeekView({
     /* @__PURE__ */ jsxs("div", { className: "grid border-b border-border", style: { gridTemplateColumns: `3.5rem repeat(7, 1fr)` }, children: [
       /* @__PURE__ */ jsx("div", { className: "border-r border-border" }),
       days.map((d) => /* @__PURE__ */ jsxs("div", { className: "border-r border-border px-1 py-1.5 text-center last:border-r-0", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-wide text-foreground-muted", children: weekdayLabels(weekStartsOn)[(d.getDay() - weekStartsOn + 7) % 7] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-wide text-foreground-muted", children: dow(d) }),
         /* @__PURE__ */ jsx("div", { className: ["mx-auto mt-0.5 flex h-6 w-6 items-center justify-center rounded-full text-xs tabular-nums", isToday(d) ? "bg-accent font-semibold text-accent-fg" : "text-foreground"].join(" "), children: d.getDate() })
       ] }, d.getTime()))
     ] }),
@@ -3126,9 +3197,9 @@ function WeekView({
             "button",
             {
               type: "button",
-              "aria-label": `${weekdayLabels(weekStartsOn)[(day.getDay() - weekStartsOn + 7) % 7]} ${day.getDate()} ${hourLabel(h)}`,
+              "aria-label": `${dow(day)} ${day.getDate()} ${hourLabel(h)}`,
               onClick: () => onSelectSlot?.(new Date(day.getFullYear(), day.getMonth(), day.getDate(), h)),
-              className: "absolute left-0 right-0 border-b border-border/60 hover:bg-surface-raised/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent",
+              className: "absolute left-0 right-0 border-b border-border hover:bg-background focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent",
               style: { top: i * hourHeight, height: hourHeight }
             },
             h
@@ -3147,11 +3218,16 @@ function WeekView({
                   onSelectEvent?.(e);
                 },
                 title: `${e.title} \xB7 ${timeLabel(e.start)}\u2013${timeLabel(e.end)}`,
-                className: "absolute left-0.5 right-0.5 overflow-hidden rounded-md border-l-2 px-1.5 py-0.5 text-left text-[11px] leading-tight text-foreground shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                style: { top: Math.max(0, top), height, borderLeftColor: color, backgroundColor: `color-mix(in oklab, ${color} 16%, var(--color-surface))` },
+                className: "absolute left-0.5 right-0.5 overflow-hidden rounded-md border px-1.5 py-0.5 text-left text-[11px] leading-tight text-foreground shadow-sm transition-shadow hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                style: {
+                  top: Math.max(0, top),
+                  height,
+                  backgroundColor: `color-mix(in oklab, ${color} 14%, var(--color-surface))`,
+                  borderColor: `color-mix(in oklab, ${color} 40%, var(--color-surface))`
+                },
                 children: [
                   /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: e.title }),
-                  /* @__PURE__ */ jsx("div", { className: "truncate text-foreground-muted", children: timeLabel(e.start) })
+                  /* @__PURE__ */ jsx("div", { className: "truncate", style: { color }, children: timeLabel(e.start) })
                 ]
               },
               e.id