@geomak/ui 6.24.1 → 6.26.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-I2P4JJDB.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React27, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
+import React29, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -11,12 +11,12 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as Popover from '@radix-ui/react-popover';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
@@ -693,7 +693,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-var Button = React27.forwardRef(function Button2({
+var Button = React29.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -801,7 +801,7 @@ function MenuButton({
           "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: items.map((item) => /* @__PURE__ */ jsxs(React27.Fragment, { children: [
+        children: items.map((item) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxs(
             DropdownMenu.Item,
@@ -1900,7 +1900,7 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React27.Fragment, { children: [
+    return /* @__PURE__ */ jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
@@ -1992,7 +1992,7 @@ function FlatCarousel({
   style
 }) {
   const scrollerRef = useRef(null);
-  const slides = React27.Children.toArray(children);
+  const slides = React29.Children.toArray(children);
   const [active, setActive] = useState(0);
   const [atStart, setAtStart] = useState(true);
   const [atEnd, setAtEnd] = useState(false);
@@ -2047,7 +2047,7 @@ function RotatingCarousel({
   className = "",
   style
 }) {
-  const slides = React27.Children.toArray(children);
+  const slides = React29.Children.toArray(children);
   const count = slides.length;
   const [active, setActive] = useState(0);
   const reduced = useReducedMotion();
@@ -2563,7 +2563,7 @@ function Calendar2({
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0.5", role: "grid", children: grid.map((d, i) => {
       const inMonth = d.getMonth() === visible.getMonth();
       const isSelected = value != null && sameDay(d, value);
-      const isToday = sameDay(d, today);
+      const isToday2 = sameDay(d, today);
       const isDisabled = disabled(d);
       const dayEvents = eventsByDay.get(d.toDateString()) ?? [];
       return /* @__PURE__ */ jsxs(
@@ -2572,7 +2572,7 @@ function Calendar2({
           type: "button",
           role: "gridcell",
           "aria-selected": isSelected,
-          "aria-current": isToday ? "date" : void 0,
+          "aria-current": isToday2 ? "date" : void 0,
           disabled: isDisabled,
           onClick: () => onChange?.(startOfDay(d)),
           className: [
@@ -2580,24 +2580,662 @@ function Calendar2({
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
             isSelected ? "bg-accent text-accent-fg font-semibold" : inMonth ? "text-foreground hover:bg-surface-raised" : "text-foreground-muted hover:bg-surface-raised",
             isDisabled ? "opacity-40 cursor-not-allowed hover:bg-transparent" : "",
-            !isSelected && isToday ? "ring-1 ring-inset ring-accent/60" : ""
+            !isSelected && isToday2 ? "ring-1 ring-inset ring-accent/60" : ""
           ].filter(Boolean).join(" "),
           children: [
             /* @__PURE__ */ jsx("span", { className: "leading-none", children: d.getDate() }),
             dayEvents.length > 0 && /* @__PURE__ */ jsx("span", { className: "absolute bottom-1 flex gap-0.5", children: dayEvents.slice(0, 3).map((ev, j) => /* @__PURE__ */ jsx(
               "span",
               {
-                title: ev.label,
-                className: "h-1 w-1 rounded-full",
-                style: { backgroundColor: ev.color ?? (isSelected ? "var(--color-accent-fg)" : "var(--color-accent)") }
+                title: ev.label,
+                className: "h-1 w-1 rounded-full",
+                style: { backgroundColor: ev.color ?? (isSelected ? "var(--color-accent-fg)" : "var(--color-accent)") }
+              },
+              j
+            )) })
+          ]
+        },
+        i
+      );
+    }) })
+  ] });
+}
+var FIELD_SIZE = {
+  sm: { control: "h-control-sm", text: "text-xs", padX: "px-2.5", gap: "gap-1.5" },
+  md: { control: "h-control-md", text: "text-sm", padX: "px-3", gap: "gap-2" },
+  lg: { control: "h-control-lg", text: "text-sm", padX: "px-3.5", gap: "gap-2.5" }
+};
+var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent";
+var FOCUS_ELEMENT = "focus:outline-none focus:border-accent data-[state=open]:border-accent";
+var FOCUS_WITHIN_ERROR = "focus-within:border-status-error";
+var FOCUS_ELEMENT_ERROR = "focus:border-status-error data-[state=open]:border-status-error";
+function fieldShell({
+  size = "md",
+  hasError = false,
+  disabled = false,
+  focusWithin = false,
+  sized = true
+} = {}) {
+  const s = FIELD_SIZE[size];
+  return [
+    "w-full rounded-lg border bg-surface text-foreground",
+    "transition-[color,box-shadow,border-color] duration-150",
+    s.text,
+    sized ? `${s.control} ${s.padX}` : "",
+    // resting border
+    hasError ? "border-status-error" : "border-border",
+    // hover (only when interactive + no error)
+    disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : hasError ? "" : "hover:border-border-strong",
+    // focus
+    focusWithin ? FOCUS_WITHIN : FOCUS_ELEMENT,
+    hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_ELEMENT_ERROR : "",
+    // placeholder colour for native inputs
+    "placeholder:text-foreground-muted"
+  ].filter(Boolean).join(" ");
+}
+function FieldHelpIcon({ text }) {
+  return /* @__PURE__ */ jsx(Tooltip, { title: text, placement: "top", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "More information",
+      className: "inline-flex items-center justify-center rounded-full text-foreground-muted transition-colors hover:text-foreground focus:outline-none focus-visible:text-accent",
+      children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.25" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M8 7.4v3.4" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5.1", r: "0.65", fill: "currentColor", stroke: "none" })
+      ] })
+    }
+  ) });
+}
+function FieldLabel({
+  label,
+  htmlFor,
+  required,
+  helperText,
+  horizontal = false,
+  align = "start",
+  style,
+  width,
+  className = ""
+}) {
+  if (label == null && helperText == null) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { width: horizontal ? width : void 0, ...style },
+      className: [
+        "flex items-center gap-1",
+        horizontal ? "flex-shrink-0 whitespace-nowrap" : "",
+        // Only the 'start' alignment needs the top nudge; 'center' relies
+        // on the row's items-center to line up with a short control.
+        horizontal && align === "start" ? "mt-2" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        label != null && /* @__PURE__ */ jsxs("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-status-error ml-0.5", "aria-hidden": "true", children: "*" })
+        ] }),
+        helperText != null && /* @__PURE__ */ jsx(FieldHelpIcon, { text: helperText })
+      ]
+    }
+  );
+}
+function Field({
+  label,
+  htmlFor,
+  errorId,
+  errorMessage,
+  layout = "vertical",
+  required,
+  helperText,
+  labelAlign = "start",
+  labelStyle,
+  labelWidth,
+  className = "",
+  children
+}) {
+  const hasError = errorMessage != null;
+  const horizontal = layout === "horizontal";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "flex",
+        horizontal ? `flex-row gap-3 ${labelAlign === "center" ? "items-center" : "items-start"}` : "flex-col gap-1.5",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            label,
+            htmlFor,
+            required,
+            helperText,
+            horizontal,
+            align: labelAlign,
+            style: labelStyle,
+            width: labelWidth
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+          children,
+          hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
+        ] })
+      ]
+    }
+  );
+}
+var SIZE5 = {
+  sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
+  md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
+  lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
+};
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  fullWidth = false,
+  disabled,
+  label,
+  layout = "vertical",
+  helperText,
+  className,
+  name,
+  required,
+  errorMessage,
+  "aria-label": ariaLabel
+}) {
+  const sz = SIZE5[size];
+  const groupId = useId();
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const handle = (v) => {
+    if (!v) return;
+    if (!isControlled) setInternal(v);
+    onChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      className,
+      label,
+      htmlFor: groupId,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      helperText,
+      children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup.Root,
+          {
+            id: groupId,
+            type: "single",
+            value: current,
+            onValueChange: handle,
+            disabled,
+            "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            className: [
+              "inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-1",
+              hasError ? "border-status-error" : "border-border",
+              sz.h,
+              fullWidth ? "flex w-full" : "w-fit",
+              disabled ? "opacity-60 cursor-not-allowed" : ""
+            ].filter(Boolean).join(" "),
+            children: options.map((opt) => /* @__PURE__ */ jsxs(
+              ToggleGroup.Item,
+              {
+                value: opt.value,
+                disabled: opt.disabled,
+                className: [
+                  "inline-flex items-center justify-center gap-1.5 rounded-md select-none whitespace-nowrap",
+                  "transition-colors duration-150 h-full",
+                  sz.text,
+                  sz.pad,
+                  fullWidth ? "flex-1" : "",
+                  // Resting: muted text, transparent. Hover lifts the text.
+                  "text-foreground-secondary hover:text-foreground",
+                  // Active: surface-white pill + accent text + subtle shadow.
+                  "data-[state=on]:bg-surface data-[state=on]:text-accent data-[state=on]:shadow-sm",
+                  "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+                  "disabled:opacity-40 disabled:cursor-not-allowed"
+                ].filter(Boolean).join(" "),
+                children: [
+                  opt.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: opt.icon }),
+                  opt.label
+                ]
+              },
+              opt.value
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/core/scheduler.utils.ts
+var MONTHS2 = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "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());
+var addDays = (d, n) => {
+  const x = new Date(d);
+  x.setDate(x.getDate() + n);
+  return x;
+};
+var addMonths2 = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+var sameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var isToday = (d) => sameDay2(d, /* @__PURE__ */ new Date());
+var isSameMonth = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var endOfMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
+var startOfWeek = (d, weekStartsOn) => {
+  const x = startOfDay2(d);
+  const diff = (x.getDay() - weekStartsOn + 7) % 7;
+  return addDays(x, -diff);
+};
+var buildMonthGrid = (cursor, weekStartsOn) => {
+  const start = startOfWeek(startOfMonth(cursor), weekStartsOn);
+  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+};
+var getWeekDays = (cursor, weekStartsOn) => {
+  const start = startOfWeek(cursor, weekStartsOn);
+  return Array.from({ length: 7 }, (_, i) => addDays(start, i));
+};
+var monthRange = (cursor) => ({
+  from: startOfMonth(cursor),
+  to: endOfMonth(cursor)
+});
+var weekRange = (cursor, weekStartsOn) => {
+  const from = startOfWeek(cursor, weekStartsOn);
+  return { from, to: addDays(from, 6) };
+};
+var weekdayLabels = (weekStartsOn) => Array.from({ length: 7 }, (_, i) => WEEKDAYS2[(i + weekStartsOn) % 7]);
+var monthYearLabel = (d) => `${MONTHS2[d.getMonth()]} ${d.getFullYear()}`;
+var weekLabel = (cursor, weekStartsOn) => {
+  const from = startOfWeek(cursor, weekStartsOn);
+  const to = addDays(from, 6);
+  const m = (d) => MONTHS2[d.getMonth()].slice(0, 3);
+  if (from.getMonth() === to.getMonth()) {
+    return `${m(from)} ${from.getDate()} \u2013 ${to.getDate()}, ${to.getFullYear()}`;
+  }
+  const yearPart = from.getFullYear() === to.getFullYear() ? `${to.getFullYear()}` : "";
+  return `${m(from)} ${from.getDate()} \u2013 ${m(to)} ${to.getDate()}${yearPart ? `, ${yearPart}` : `, ${from.getFullYear()}/${to.getFullYear()}`}`;
+};
+var minutesIntoDay = (d) => d.getHours() * 60 + d.getMinutes();
+var hourLabel = (hour) => `${String(hour).padStart(2, "0")}:00`;
+var timeLabel = (d) => `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+var normalize = (e) => {
+  const start = toDate(e.start);
+  const end = e.end ? toDate(e.end) : new Date(start.getTime() + 36e5);
+  return { ...e, start, end };
+};
+var Spinner2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", className: "h-5 w-5 animate-spin text-accent", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z" }) });
+var Plus = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) });
+var Chevron4 = ({ dir }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: dir === "left" ? "M15 19l-7-7 7-7" : "M9 5l7 7-7 7" }) });
+function Scheduler({
+  events: controlledEvents,
+  loadEvents,
+  defaultView = "month",
+  defaultDate,
+  weekStartsOn = 0,
+  dayHours = [0, 24],
+  hourHeight = 48,
+  onSelectSlot,
+  onSelectEvent,
+  onNewEvent,
+  className = "",
+  style
+}) {
+  const reduced = useReducedMotion();
+  const [view, setView] = useState(defaultView);
+  const [cursor, setCursor] = useState(() => defaultDate ?? /* @__PURE__ */ new Date());
+  const [loaded, setLoaded] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [dir, setDir] = useState(0);
+  const loaderRef = useRef(loadEvents);
+  loaderRef.current = loadEvents;
+  const range = useMemo(
+    () => view === "month" ? monthRange(cursor) : weekRange(cursor, weekStartsOn),
+    [view, cursor, weekStartsOn]
+  );
+  const fromKey = range.from.getTime();
+  const toKey = range.to.getTime();
+  useEffect(() => {
+    const loader = loaderRef.current;
+    if (!loader) return;
+    let cancelled = false;
+    setLoading(true);
+    Promise.resolve(loader({ from: new Date(fromKey), to: new Date(toKey) }, view)).then((evts) => {
+      if (!cancelled) setLoaded(evts);
+    }).catch(() => {
+      if (!cancelled) setLoaded([]);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fromKey, toKey, view]);
+  const events = useMemo(
+    () => (controlledEvents ?? loaded).map(normalize),
+    [controlledEvents, loaded]
+  );
+  const go = useCallback((delta) => {
+    setDir(delta);
+    setCursor((c) => view === "month" ? addMonths2(c, delta) : addDays(c, delta * 7));
+  }, [view]);
+  const goToday = useCallback(() => {
+    setDir(0);
+    setCursor(/* @__PURE__ */ new Date());
+  }, []);
+  const title = view === "month" ? monthYearLabel(cursor) : weekLabel(cursor, weekStartsOn);
+  const slide = reduced ? { duration: 0 } : { duration: 0.22, ease: [0.16, 1, 0.3, 1] };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["flex flex-col overflow-hidden rounded-xl border border-border bg-surface", className].filter(Boolean).join(" "),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__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__ */ 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(
+              SegmentedControl,
+              {
+                size: "sm",
+                "aria-label": "Calendar view",
+                value: view,
+                onChange: (v) => setView(v),
+                options: [{ value: "month", label: "Month" }, { value: "week", label: "Week" }]
+              }
+            ),
+            onNewEvent && /* @__PURE__ */ jsx(Button_default, { size: "sm", icon: /* @__PURE__ */ jsx(Plus, {}), content: "New event", onClick: onNewEvent })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, x: reduced ? 0 : dir * 24 },
+            animate: { opacity: 1, x: 0 },
+            transition: slide,
+            className: "h-full",
+            children: view === "month" ? /* @__PURE__ */ jsx(
+              MonthView,
+              {
+                cursor,
+                weekStartsOn,
+                events,
+                onSelectSlot,
+                onSelectEvent
+              }
+            ) : /* @__PURE__ */ jsx(
+              WeekView,
+              {
+                cursor,
+                weekStartsOn,
+                events,
+                dayHours,
+                hourHeight,
+                onSelectSlot,
+                onSelectEvent
+              }
+            )
+          },
+          `${view}-${range.from.getTime()}`
+        ) })
+      ]
+    }
+  );
+}
+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,
+  weekStartsOn,
+  events,
+  onSelectSlot,
+  onSelectEvent
+}) {
+  const grid = useMemo(() => buildMonthGrid(cursor, weekStartsOn), [cursor, weekStartsOn]);
+  const labels = weekdayLabels(weekStartsOn);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 border-b border-border", children: labels.map((l) => /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-center text-[11px] font-medium uppercase tracking-wide text-foreground-muted", children: l }, l)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid flex-1 grid-cols-7 grid-rows-6", children: grid.map((day, i) => {
+      const inMonth = isSameMonth(day, cursor);
+      const dayEvents = events.filter((e) => sameDay2(e.start, day));
+      const today = isToday(day);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelectSlot?.(day),
+          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",
+            // 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(
+              "span",
+              {
+                className: [
+                  "flex h-6 w-6 items-center justify-center self-start rounded-full text-xs tabular-nums",
+                  today ? "bg-accent font-semibold text-accent-fg" : inMonth ? "text-foreground" : "text-foreground-muted"
+                ].join(" "),
+                children: day.getDate()
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              dayEvents.slice(0, MAX_CHIPS).map((e) => /* @__PURE__ */ jsx(EventChip, { event: e, onSelect: onSelectEvent }, e.id)),
+              dayEvents.length > MAX_CHIPS && /* @__PURE__ */ jsxs("span", { className: "px-1 text-[11px] font-medium text-foreground-muted", children: [
+                "+",
+                dayEvents.length - MAX_CHIPS,
+                " more"
+              ] })
+            ] })
+          ]
+        },
+        i
+      );
+    }) })
+  ] });
+}
+function EventChip({ event, onSelect }) {
+  const color = event.color ?? "var(--color-accent)";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect?.(event);
+      },
+      title: `${event.title} \xB7 ${timeLabel(event.start)}`,
+      className: "flex items-center gap-1.5 truncate rounded px-1 py-0.5 text-left text-[11px] font-medium text-foreground hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "h-2 w-2 flex-shrink-0 rounded-full", style: { backgroundColor: color } }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: event.title })
+      ]
+    }
+  );
+}
+function WeekView({
+  cursor,
+  weekStartsOn,
+  events,
+  dayHours,
+  hourHeight,
+  onSelectSlot,
+  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),
+    [startHour, endHour]
+  );
+  const spanMinutes = (endHour - startHour) * 60;
+  const gridHeight = hours.length * hourHeight;
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__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: 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()))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid", style: { gridTemplateColumns: `3.5rem repeat(7, 1fr)`, height: gridHeight }, children: [
+      /* @__PURE__ */ jsx("div", { className: "relative border-r border-border", children: hours.map((h, i) => /* @__PURE__ */ jsx("div", { className: "absolute right-1 -translate-y-1/2 text-[10px] tabular-nums text-foreground-muted", style: { top: i * hourHeight }, children: i === 0 ? "" : hourLabel(h) }, h)) }),
+      days.map((day) => {
+        const dayEvents = events.filter((e) => sameDay2(e.start, day) && !e.allDay);
+        return /* @__PURE__ */ jsxs("div", { className: "relative border-r border-border last:border-r-0", children: [
+          hours.map((h, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "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 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
+          )),
+          dayEvents.map((e) => {
+            const top = (minutesIntoDay(e.start) - startHour * 60) / spanMinutes * gridHeight;
+            const durMin = Math.max(20, (e.end.getTime() - e.start.getTime()) / 6e4);
+            const height = durMin / spanMinutes * gridHeight;
+            const color = e.color ?? "var(--color-accent)";
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (ev) => {
+                  ev.stopPropagation();
+                  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 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", style: { color }, children: timeLabel(e.start) })
+                ]
               },
-              j
-            )) })
-          ]
-        },
-        i
-      );
-    }) })
+              e.id
+            );
+          })
+        ] }, day.getTime());
+      })
+    ] }) })
   ] });
 }
 function DefaultIllustration() {
@@ -3236,134 +3874,6 @@ function useFieldArray(name) {
     replace: (items) => store.setValue(name, items, { validate: false })
   };
 }
-var FIELD_SIZE = {
-  sm: { control: "h-control-sm", text: "text-xs", padX: "px-2.5", gap: "gap-1.5" },
-  md: { control: "h-control-md", text: "text-sm", padX: "px-3", gap: "gap-2" },
-  lg: { control: "h-control-lg", text: "text-sm", padX: "px-3.5", gap: "gap-2.5" }
-};
-var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent";
-var FOCUS_ELEMENT = "focus:outline-none focus:border-accent data-[state=open]:border-accent";
-var FOCUS_WITHIN_ERROR = "focus-within:border-status-error";
-var FOCUS_ELEMENT_ERROR = "focus:border-status-error data-[state=open]:border-status-error";
-function fieldShell({
-  size = "md",
-  hasError = false,
-  disabled = false,
-  focusWithin = false,
-  sized = true
-} = {}) {
-  const s = FIELD_SIZE[size];
-  return [
-    "w-full rounded-lg border bg-surface text-foreground",
-    "transition-[color,box-shadow,border-color] duration-150",
-    s.text,
-    sized ? `${s.control} ${s.padX}` : "",
-    // resting border
-    hasError ? "border-status-error" : "border-border",
-    // hover (only when interactive + no error)
-    disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : hasError ? "" : "hover:border-border-strong",
-    // focus
-    focusWithin ? FOCUS_WITHIN : FOCUS_ELEMENT,
-    hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_ELEMENT_ERROR : "",
-    // placeholder colour for native inputs
-    "placeholder:text-foreground-muted"
-  ].filter(Boolean).join(" ");
-}
-function FieldHelpIcon({ text }) {
-  return /* @__PURE__ */ jsx(Tooltip, { title: text, placement: "top", children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      "aria-label": "More information",
-      className: "inline-flex items-center justify-center rounded-full text-foreground-muted transition-colors hover:text-foreground focus:outline-none focus-visible:text-accent",
-      children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.25" }),
-        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M8 7.4v3.4" }),
-        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5.1", r: "0.65", fill: "currentColor", stroke: "none" })
-      ] })
-    }
-  ) });
-}
-function FieldLabel({
-  label,
-  htmlFor,
-  required,
-  helperText,
-  horizontal = false,
-  align = "start",
-  style,
-  width,
-  className = ""
-}) {
-  if (label == null && helperText == null) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: { width: horizontal ? width : void 0, ...style },
-      className: [
-        "flex items-center gap-1",
-        horizontal ? "flex-shrink-0 whitespace-nowrap" : "",
-        // Only the 'start' alignment needs the top nudge; 'center' relies
-        // on the row's items-center to line up with a short control.
-        horizontal && align === "start" ? "mt-2" : "",
-        className
-      ].filter(Boolean).join(" "),
-      children: [
-        label != null && /* @__PURE__ */ jsxs("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "text-status-error ml-0.5", "aria-hidden": "true", children: "*" })
-        ] }),
-        helperText != null && /* @__PURE__ */ jsx(FieldHelpIcon, { text: helperText })
-      ]
-    }
-  );
-}
-function Field({
-  label,
-  htmlFor,
-  errorId,
-  errorMessage,
-  layout = "vertical",
-  required,
-  helperText,
-  labelAlign = "start",
-  labelStyle,
-  labelWidth,
-  className = "",
-  children
-}) {
-  const hasError = errorMessage != null;
-  const horizontal = layout === "horizontal";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: [
-        "flex",
-        horizontal ? `flex-row gap-3 ${labelAlign === "center" ? "items-center" : "items-start"}` : "flex-col gap-1.5",
-        className
-      ].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ jsx(
-          FieldLabel,
-          {
-            label,
-            htmlFor,
-            required,
-            helperText,
-            horizontal,
-            align: labelAlign,
-            style: labelStyle,
-            width: labelWidth
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
-          children,
-          hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
-        ] })
-      ]
-    }
-  );
-}
 function TextInput({
   value,
   onChange,
@@ -3503,8 +4013,8 @@ function expiryError(value, now = /* @__PURE__ */ new Date()) {
   const mm = Number(m[1]);
   const yy = Number(m[2]);
   if (mm < 1 || mm > 12) return "Invalid month";
-  const endOfMonth = new Date(2e3 + yy, mm, 0, 23, 59, 59, 999);
-  if (endOfMonth < now) return "Card has expired";
+  const endOfMonth2 = new Date(2e3 + yy, mm, 0, 23, 59, 59, 999);
+  if (endOfMonth2 < now) return "Card has expired";
   return void 0;
 }
 function cvvError(value, cardNumber) {
@@ -4654,7 +5164,7 @@ function Wizard({
   ] });
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React27.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React29.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5155,7 +5665,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React27.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React29.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -5699,8 +6209,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: ["min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
 }
-var elementsOfType = (children, type) => React27.Children.toArray(children).filter(
-  (c) => React27.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React29.Children.toArray(children).filter(
+  (c) => React29.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -5737,9 +6247,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React27.Children.toArray(panel.props.children);
+  const nodes = React29.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React27.isValidElement(node)) return null;
+    if (!React29.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -5949,7 +6459,7 @@ function tokenValid(token) {
   return exp * 1e3 > Date.now();
 }
 var has = (have, need, all) => all ? need.every((n) => have?.includes(n)) : need.some((n) => have?.includes(n));
-var Spinner2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", className: "h-6 w-6 animate-spin text-accent", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z" }) });
+var Spinner3 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", className: "h-6 w-6 animate-spin text-accent", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z" }) });
 function SecureLayout({
   children,
   isAuthenticated,
@@ -6025,7 +6535,7 @@ function SecureLayout({
   ]);
   if (state === "checking") {
     if (loadingFallback === null) return null;
-    return /* @__PURE__ */ jsx("div", { className: ["flex min-h-[8rem] items-center justify-center", className].filter(Boolean).join(" "), children: loadingFallback !== void 0 ? loadingFallback : /* @__PURE__ */ jsx(Spinner2, {}) });
+    return /* @__PURE__ */ jsx("div", { className: ["flex min-h-[8rem] items-center justify-center", className].filter(Boolean).join(" "), children: loadingFallback !== void 0 ? loadingFallback : /* @__PURE__ */ jsx(Spinner3, {}) });
   }
   if (state === "denied") {
     if (fallback === null) return null;
@@ -6148,7 +6658,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React27.useId().replace(/:/g, "");
+  const id = React29.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -7259,15 +7769,15 @@ var WEEKDAY_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 function isSameDay(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
-function startOfMonth(d) {
+function startOfMonth2(d) {
   return new Date(d.getFullYear(), d.getMonth(), 1);
 }
-function addDays(d, n) {
+function addDays2(d, n) {
   const c = new Date(d);
   c.setDate(c.getDate() + n);
   return c;
 }
-function addMonths2(d, n) {
+function addMonths3(d, n) {
   const c = new Date(d);
   c.setMonth(c.getMonth() + n);
   return c;
@@ -7279,12 +7789,12 @@ function defaultFormat3(d) {
   return `${y}-${m}-${day}`;
 }
 function buildGrid2(viewMonth, weekStartsOn) {
-  const first = startOfMonth(viewMonth);
+  const first = startOfMonth2(viewMonth);
   const startOffset = (first.getDay() - weekStartsOn + 7) % 7;
-  const gridStart = addDays(first, -startOffset);
+  const gridStart = addDays2(first, -startOffset);
   const cells = [];
   for (let i = 0; i < 42; i++) {
-    const d = addDays(gridStart, i);
+    const d = addDays2(gridStart, i);
     cells.push({ date: d, outside: d.getMonth() !== viewMonth.getMonth() });
   }
   const rows = [];
@@ -7315,14 +7825,14 @@ function DatePicker({
   const errorId = useId();
   const hasError = errorMessage != null;
   const [open, setOpen] = useState(false);
-  const [viewMonth, setViewMonth] = useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
+  const [viewMonth, setViewMonth] = useState(() => startOfMonth2(value ?? /* @__PURE__ */ new Date()));
   const [focusDate, setFocusDate] = useState(() => value ?? /* @__PURE__ */ new Date());
   const [view, setView] = useState("days");
   const gridRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const target = value ?? /* @__PURE__ */ new Date();
-    setViewMonth(startOfMonth(target));
+    setViewMonth(startOfMonth2(target));
     setFocusDate(target);
     setView("days");
   }, [open, value]);
@@ -7348,9 +7858,9 @@ function DatePicker({
   };
   const onKey = (e) => {
     const next = (delta) => {
-      const nd = addDays(focusDate, delta);
+      const nd = addDays2(focusDate, delta);
       setFocusDate(nd);
-      if (nd.getMonth() !== viewMonth.getMonth()) setViewMonth(startOfMonth(nd));
+      if (nd.getMonth() !== viewMonth.getMonth()) setViewMonth(startOfMonth2(nd));
     };
     if (e.key === "ArrowLeft") {
       e.preventDefault();
@@ -7366,22 +7876,22 @@ function DatePicker({
       next(7);
     } else if (e.key === "PageUp") {
       e.preventDefault();
-      const nm = addMonths2(viewMonth, -1);
+      const nm = addMonths3(viewMonth, -1);
       setViewMonth(nm);
-      setFocusDate((d) => addMonths2(d, -1));
+      setFocusDate((d) => addMonths3(d, -1));
     } else if (e.key === "PageDown") {
       e.preventDefault();
-      const nm = addMonths2(viewMonth, 1);
+      const nm = addMonths3(viewMonth, 1);
       setViewMonth(nm);
-      setFocusDate((d) => addMonths2(d, 1));
+      setFocusDate((d) => addMonths3(d, 1));
     } else if (e.key === "Home") {
       e.preventDefault();
       const dow = (focusDate.getDay() - weekStartsOn + 7) % 7;
-      setFocusDate(addDays(focusDate, -dow));
+      setFocusDate(addDays2(focusDate, -dow));
     } else if (e.key === "End") {
       e.preventDefault();
       const dow = (focusDate.getDay() - weekStartsOn + 7) % 7;
-      setFocusDate(addDays(focusDate, 6 - dow));
+      setFocusDate(addDays2(focusDate, 6 - dow));
     } else if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       selectDate(focusDate);
@@ -7438,7 +7948,7 @@ function DatePicker({
                   {
                     type: "button",
                     onClick: () => {
-                      if (view === "days") setViewMonth(addMonths2(viewMonth, -1));
+                      if (view === "days") setViewMonth(addMonths3(viewMonth, -1));
                       else if (view === "months") setViewMonth(new Date(viewMonth.getFullYear() - 1, viewMonth.getMonth(), 1));
                       else setViewMonth(new Date(viewMonth.getFullYear() - 10, viewMonth.getMonth(), 1));
                     },
@@ -7473,7 +7983,7 @@ function DatePicker({
                   {
                     type: "button",
                     onClick: () => {
-                      if (view === "days") setViewMonth(addMonths2(viewMonth, 1));
+                      if (view === "days") setViewMonth(addMonths3(viewMonth, 1));
                       else if (view === "months") setViewMonth(new Date(viewMonth.getFullYear() + 1, viewMonth.getMonth(), 1));
                       else setViewMonth(new Date(viewMonth.getFullYear() + 10, viewMonth.getMonth(), 1));
                     },
@@ -7675,102 +8185,6 @@ function TextArea({
     }
   );
 }
-var SIZE5 = {
-  sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
-  md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
-  lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
-};
-function SegmentedControl({
-  options,
-  value,
-  defaultValue,
-  onChange,
-  size = "md",
-  fullWidth = false,
-  disabled,
-  label,
-  layout = "vertical",
-  helperText,
-  className,
-  name,
-  required,
-  errorMessage,
-  "aria-label": ariaLabel
-}) {
-  const sz = SIZE5[size];
-  const groupId = useId();
-  const errorId = useId();
-  const hasError = errorMessage != null;
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = useState(defaultValue);
-  const current = isControlled ? value : internal;
-  const handle = (v) => {
-    if (!v) return;
-    if (!isControlled) setInternal(v);
-    onChange?.(v);
-  };
-  return /* @__PURE__ */ jsxs(
-    Field,
-    {
-      className,
-      label,
-      htmlFor: groupId,
-      errorId,
-      errorMessage,
-      layout,
-      required,
-      helperText,
-      children: [
-        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }),
-        /* @__PURE__ */ jsx(
-          ToggleGroup.Root,
-          {
-            id: groupId,
-            type: "single",
-            value: current,
-            onValueChange: handle,
-            disabled,
-            "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
-            "aria-invalid": hasError || void 0,
-            "aria-describedby": hasError ? errorId : void 0,
-            className: [
-              "inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-1",
-              hasError ? "border-status-error" : "border-border",
-              sz.h,
-              fullWidth ? "flex w-full" : "w-fit",
-              disabled ? "opacity-60 cursor-not-allowed" : ""
-            ].filter(Boolean).join(" "),
-            children: options.map((opt) => /* @__PURE__ */ jsxs(
-              ToggleGroup.Item,
-              {
-                value: opt.value,
-                disabled: opt.disabled,
-                className: [
-                  "inline-flex items-center justify-center gap-1.5 rounded-md select-none whitespace-nowrap",
-                  "transition-colors duration-150 h-full",
-                  sz.text,
-                  sz.pad,
-                  fullWidth ? "flex-1" : "",
-                  // Resting: muted text, transparent. Hover lifts the text.
-                  "text-foreground-secondary hover:text-foreground",
-                  // Active: surface-white pill + accent text + subtle shadow.
-                  "data-[state=on]:bg-surface data-[state=on]:text-accent data-[state=on]:shadow-sm",
-                  "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
-                  "disabled:opacity-40 disabled:cursor-not-allowed"
-                ].filter(Boolean).join(" "),
-                children: [
-                  opt.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: opt.icon }),
-                  opt.label
-                ]
-              },
-              opt.value
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
 var TRACK_H = { sm: "h-1", md: "h-1.5", lg: "h-2" };
 var THUMB = { sm: "h-3.5 w-3.5", md: "h-4 w-4", lg: "h-5 w-5" };
 var toArray = (v) => v == null ? void 0 : Array.isArray(v) ? v : [v];
@@ -8084,7 +8498,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React27.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -8354,22 +8768,22 @@ function TimePicker({
 }
 var MONTH_NAMES2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 var WEEKDAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-var startOfMonth2 = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
-var addMonths3 = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
-var addDays2 = (d, n) => {
+var startOfMonth3 = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var addMonths4 = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+var addDays3 = (d, n) => {
   const c = new Date(d);
   c.setDate(c.getDate() + n);
   return c;
 };
 var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-var startOfDay2 = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var startOfDay3 = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
 var defaultFmt = (d) => `${d.getFullYear()}-${`${d.getMonth() + 1}`.padStart(2, "0")}-${`${d.getDate()}`.padStart(2, "0")}`;
 function buildGrid3(viewMonth, weekStartsOn) {
-  const first = startOfMonth2(viewMonth);
+  const first = startOfMonth3(viewMonth);
   const offset = (first.getDay() - weekStartsOn + 7) % 7;
-  const gridStart = addDays2(first, -offset);
+  const gridStart = addDays3(first, -offset);
   return Array.from({ length: 42 }, (_, i) => {
-    const d = addDays2(gridStart, i);
+    const d = addDays3(gridStart, i);
     return { date: d, outside: d.getMonth() !== viewMonth.getMonth() };
   });
 }
@@ -8396,20 +8810,20 @@ function DateRangePicker({
   const errorId = useId();
   const hasError = errorMessage != null;
   const [open, setOpen] = useState(false);
-  const [leftMonth, setLeftMonth] = useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
+  const [leftMonth, setLeftMonth] = useState(() => startOfMonth3(value.start ?? /* @__PURE__ */ new Date()));
   const [pendingStart, setPendingStart] = useState(null);
   const [hoverDate, setHoverDate] = useState(null);
   const weekdays = useMemo(
     () => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
     [weekStartsOn]
   );
-  const isDisabled = (d) => min && d < startOfDay2(min) || max && d > startOfDay2(max);
+  const isDisabled = (d) => min && d < startOfDay3(min) || max && d > startOfDay3(max);
   const effective = pendingStart ? { start: pendingStart, end: hoverDate } : value;
   const inRange = (d) => {
     const { start, end } = effective;
     if (!start || !end) return false;
     const [a, b] = start <= end ? [start, end] : [end, start];
-    return d >= startOfDay2(a) && d <= startOfDay2(b);
+    return d >= startOfDay3(a) && d <= startOfDay3(b);
   };
   const onDayClick = (d) => {
     if (isDisabled(d)) return;
@@ -8516,7 +8930,7 @@ function DateRangePicker({
                 "button",
                 {
                   type: "button",
-                  onClick: () => setLeftMonth(addMonths3(leftMonth, -1)),
+                  onClick: () => setLeftMonth(addMonths4(leftMonth, -1)),
                   "aria-label": "Previous month",
                   className: "absolute -top-1 left-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
                   children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
@@ -8529,13 +8943,13 @@ function DateRangePicker({
                 "button",
                 {
                   type: "button",
-                  onClick: () => setLeftMonth(addMonths3(leftMonth, 1)),
+                  onClick: () => setLeftMonth(addMonths4(leftMonth, 1)),
                   "aria-label": "Next month",
                   className: "absolute -top-1 right-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
                   children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
                 }
               ),
-              renderMonth(addMonths3(leftMonth, 1))
+              renderMonth(addMonths4(leftMonth, 1))
             ] })
           ] })
         ]
@@ -8664,6 +9078,6 @@ function ColorPicker({
   ] });
 }
 
-export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Calendar2 as Calendar, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Checkbox, Checkout, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Kbd, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, PopConfirm, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Calendar2 as Calendar, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Checkbox, Checkout, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Kbd, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, PopConfirm, Portal, RadioGroup, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map