@calchemy/date-react 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,1719 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Calchemy: () => Calchemy,
+  useCalchemy: () => useCalchemy,
+  useCalchemyCalendar: () => useCalchemyCalendar,
+  useCalchemyContext: () => useCalchemyContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/calendar/context.ts
+var import_react = require("react");
+var CalchemyContext = (0, import_react.createContext)(null);
+var CalendarContext = (0, import_react.createContext)(null);
+var CalendarPeriodContext = (0, import_react.createContext)(null);
+var CalendarScrollContext = (0, import_react.createContext)(null);
+function useCalchemyContext() {
+  const state = (0, import_react.useContext)(CalchemyContext);
+  if (!state) {
+    throw new Error("Calchemy components must be rendered inside Calchemy.Root.");
+  }
+  return state;
+}
+function useCalchemyCalendar() {
+  const state = (0, import_react.useContext)(CalendarContext);
+  if (!state) {
+    throw new Error("Calchemy calendar components must be rendered inside Calchemy.Calendar.");
+  }
+  return state;
+}
+function useCalendarPeriod() {
+  return (0, import_react.useContext)(CalendarPeriodContext);
+}
+
+// src/hooks/useCalchemy.ts
+var import_react3 = require("react");
+var import_date_core = require("@calchemy/date-core");
+
+// src/inline-completion.ts
+function composeInlineCompletion(inputValue, completion) {
+  return `${inputValue}${completion.suffix}`;
+}
+function formatInlineCompletionDescription(inputValue, completion) {
+  return `Suggestion: ${composeInlineCompletion(inputValue, completion)}. Press Tab to accept.`;
+}
+
+// src/hooks/useDebouncedValue.ts
+var import_react2 = require("react");
+var PARSE_QUERY_DEBOUNCE_MS = 150;
+function useDebouncedValue(value, delayMs = PARSE_QUERY_DEBOUNCE_MS) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react2.useState)(value);
+  (0, import_react2.useEffect)(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delayMs);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [value, delayMs]);
+  return debouncedValue;
+}
+
+// src/hooks/useCalchemy.ts
+function useCalchemy(options) {
+  const [uncontrolledInputValue, setUncontrolledInputValue] = (0, import_react3.useState)(options.defaultInputValue ?? "");
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react3.useState)(options.defaultValue ?? null);
+  const [uncontrolledInputMode, setUncontrolledInputMode] = (0, import_react3.useState)(
+    options.defaultInputMode ?? "field"
+  );
+  const inputValue = options.inputValue ?? uncontrolledInputValue;
+  const value = options.value ?? uncontrolledValue;
+  const inputMode = options.inputMode ?? uncontrolledInputMode;
+  const fieldInputActive = inputMode === "field";
+  const queryValue = useDebouncedValue(inputValue);
+  const queryPending = inputValue !== queryValue;
+  const result = (0, import_react3.useMemo)(
+    () => options.calchemy.parseDate(queryValue, options.parseContext),
+    [queryValue, options.calchemy, options.parseContext]
+  );
+  const expectedValue = options.expectedValue;
+  const expectedOptions = {
+    ...options.multipleRangeExpansionLimit === void 0 ? {} : { multipleRangeExpansionLimit: options.multipleRangeExpansionLimit }
+  };
+  const expectedResult = (0, import_date_core.resolveExpectedDateValue)(result, expectedValue, expectedOptions);
+  const valueKindMismatch = expectedResult.status === "invalid" && result.status === "valid";
+  const settledInlineCompletion = (0, import_react3.useMemo)(
+    () => options.calchemy.getInlineCompletion(queryValue, options.parseContext),
+    [queryValue, options.calchemy, options.parseContext]
+  );
+  const inlineCompletion = queryPending ? null : settledInlineCompletion;
+  function updateValue(nextValue, nextResult = result) {
+    if (options.value === void 0) {
+      setUncontrolledValue(nextValue);
+    }
+    options.onValueChange?.(nextValue, nextResult);
+  }
+  (0, import_react3.useEffect)(() => {
+    const nextResult = options.calchemy.parseDate(queryValue, options.parseContext);
+    const nextExpectedResult = (0, import_date_core.resolveExpectedDateValue)(
+      nextResult,
+      expectedValue,
+      expectedOptions
+    );
+    if (nextExpectedResult.status === "valid") {
+      if (options.value === void 0) {
+        setUncontrolledValue(nextExpectedResult.value);
+      }
+      options.onValueChange?.(nextExpectedResult.value, nextExpectedResult);
+    }
+  }, [
+    queryValue,
+    expectedValue,
+    expectedOptions.multipleRangeExpansionLimit,
+    options.calchemy,
+    options.parseContext
+  ]);
+  function updateInputValue(nextValue) {
+    if (options.inputValue === void 0) {
+      setUncontrolledInputValue(nextValue);
+    }
+    options.onInputValueChange?.(nextValue);
+  }
+  function getActiveInlineCompletion() {
+    if (!fieldInputActive || queryPending) {
+      return null;
+    }
+    return settledInlineCompletion;
+  }
+  function setInputMode(nextMode) {
+    if (options.inputMode === void 0) {
+      setUncontrolledInputMode(nextMode);
+    }
+    options.onInputModeChange?.(nextMode);
+  }
+  function acceptCompletion() {
+    const activeCompletion = getActiveInlineCompletion();
+    if (!activeCompletion) {
+      return;
+    }
+    updateInputValue(composeInlineCompletion(inputValue, activeCompletion));
+  }
+  function selectCandidate(candidateId) {
+    if (!fieldInputActive || result.status !== "ambiguous") {
+      return;
+    }
+    const candidate = result.candidates.find((item) => item.id === candidateId);
+    if (!candidate) {
+      return;
+    }
+    const candidateResult = {
+      status: "valid",
+      input: inputValue,
+      value: candidate.value,
+      candidates: [candidate],
+      corrections: result.corrections,
+      warnings: result.warnings
+    };
+    const resolvedCandidateResult = (0, import_date_core.resolveExpectedDateValue)(candidateResult, expectedValue, expectedOptions);
+    if (resolvedCandidateResult.status !== "valid") {
+      return;
+    }
+    updateValue(resolvedCandidateResult.value, resolvedCandidateResult);
+  }
+  function selectDate(nextValue) {
+    const nextResult = {
+      status: "valid",
+      input: inputValue,
+      value: nextValue,
+      candidates: [],
+      corrections: [],
+      warnings: []
+    };
+    const resolvedResult = (0, import_date_core.resolveExpectedDateValue)(nextResult, expectedValue, expectedOptions);
+    if (resolvedResult.status !== "valid") {
+      return;
+    }
+    updateValue(resolvedResult.value, resolvedResult);
+    if (resolvedResult.value.kind === "single") {
+      updateInputValue(resolvedResult.value.date.toString());
+    }
+  }
+  return {
+    calchemy: options.calchemy,
+    parseContext: options.parseContext,
+    inputValue,
+    value,
+    result: expectedResult,
+    expectedValue,
+    inputMode,
+    valueKindMismatch,
+    inlineCompletion,
+    setInputValue: updateInputValue,
+    setInputMode,
+    acceptCompletion,
+    selectCandidate,
+    selectDate,
+    getInputProps() {
+      const activeCompletion = getActiveInlineCompletion();
+      return {
+        value: inputValue,
+        readOnly: !fieldInputActive,
+        onChange(event) {
+          if (!fieldInputActive) {
+            return;
+          }
+          updateInputValue(event.currentTarget.value);
+        },
+        onKeyDown(event) {
+          if (!fieldInputActive) {
+            return;
+          }
+          if (event.key === "Tab" && activeCompletion) {
+            event.preventDefault();
+            acceptCompletion();
+          }
+        },
+        "aria-invalid": expectedResult.status === "invalid",
+        ...fieldInputActive && inlineCompletion ? {
+          "aria-description": formatInlineCompletionDescription(
+            inputValue,
+            inlineCompletion
+          )
+        } : {},
+        "calchemy-status": valueKindMismatch ? "kind-mismatch" : expectedResult.status,
+        "calchemy-expected-value": expectedValue,
+        "calchemy-value-kind": expectedResult.status === "valid" ? expectedResult.value.kind : void 0
+      };
+    }
+  };
+}
+
+// src/components/calendar/Calendar.tsx
+var import_react6 = require("react");
+
+// src/components/calendar/CalendarGrid.tsx
+var import_react5 = require("react");
+
+// src/components/calendar/calendar-period-drag.tsx
+var import_react4 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CalendarPeriodDragContext = (0, import_react4.createContext)(null);
+var multipleDragSurfaceStyle = {
+  position: "relative",
+  userSelect: "none",
+  WebkitUserSelect: "none",
+  touchAction: "none"
+};
+var multiplePeriodListDragSurfaceStyle = {
+  ...multipleDragSurfaceStyle,
+  position: "relative",
+  background: "transparent"
+};
+function useOptionalCalendarPeriodDrag() {
+  return (0, import_react4.useContext)(CalendarPeriodDragContext);
+}
+function useCalendarPeriodDragSurface(dragSelection = true, surfaceElementRef) {
+  const calendar = useCalchemyCalendar();
+  const multipleSelection = dragSelection && calendar.calchemy.expectedValue === "multiple";
+  const surfaceRef = (0, import_react4.useRef)(null);
+  const dayCells = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const suppressClickRef = (0, import_react4.useRef)(false);
+  const dragStateRef = (0, import_react4.useRef)(null);
+  const dragPreviewFrameRef = (0, import_react4.useRef)(null);
+  const dragGestureCleanupRef = (0, import_react4.useRef)(null);
+  const [dragState, setDragState] = (0, import_react4.useState)(null);
+  const [dragRectangle, setDragRectangle] = (0, import_react4.useState)(null);
+  const previewSelectedKeys = (0, import_react4.useMemo)(
+    () => new Set(dragState?.previewKeys ?? []),
+    [dragState]
+  );
+  const acquireDragGestureLock = (0, import_react4.useCallback)(() => {
+    if (dragGestureCleanupRef.current || typeof document === "undefined") {
+      return;
+    }
+    const preventGestureDefault = (event) => {
+      event.preventDefault();
+    };
+    const clearDocumentSelection = () => {
+      document.getSelection()?.removeAllRanges();
+    };
+    const previousBodyUserSelect = document.body.style.userSelect;
+    const previousDocumentUserSelect = document.documentElement.style.userSelect;
+    document.body.style.userSelect = "none";
+    document.documentElement.style.userSelect = "none";
+    document.addEventListener("pointermove", preventGestureDefault, { capture: true, passive: false });
+    document.addEventListener("touchmove", preventGestureDefault, { capture: true, passive: false });
+    document.addEventListener("wheel", preventGestureDefault, { capture: true, passive: false });
+    document.addEventListener("selectstart", preventGestureDefault, { capture: true });
+    document.addEventListener("dragstart", preventGestureDefault, { capture: true });
+    clearDocumentSelection();
+    dragGestureCleanupRef.current = () => {
+      document.removeEventListener("pointermove", preventGestureDefault, { capture: true });
+      document.removeEventListener("touchmove", preventGestureDefault, { capture: true });
+      document.removeEventListener("wheel", preventGestureDefault, { capture: true });
+      document.removeEventListener("selectstart", preventGestureDefault, { capture: true });
+      document.removeEventListener("dragstart", preventGestureDefault, { capture: true });
+      document.body.style.userSelect = previousBodyUserSelect;
+      document.documentElement.style.userSelect = previousDocumentUserSelect;
+      clearDocumentSelection();
+      dragGestureCleanupRef.current = null;
+    };
+  }, []);
+  const releaseDragGestureLock = (0, import_react4.useCallback)(() => {
+    dragGestureCleanupRef.current?.();
+    if (dragPreviewFrameRef.current !== null) {
+      cancelAnimationFrame(dragPreviewFrameRef.current);
+      dragPreviewFrameRef.current = null;
+    }
+  }, []);
+  const scheduleDragPreviewUpdate = (0, import_react4.useCallback)((nextDragState) => {
+    dragStateRef.current = nextDragState;
+    if (dragPreviewFrameRef.current !== null) {
+      return;
+    }
+    dragPreviewFrameRef.current = requestAnimationFrame(() => {
+      setDragState(dragStateRef.current);
+      dragPreviewFrameRef.current = null;
+    });
+  }, []);
+  const registerDay = (0, import_react4.useCallback)((element, date, disabled) => {
+    const key = date.toString();
+    if (element) {
+      dayCells.current.set(key, { date, disabled, element });
+      return;
+    }
+    dayCells.current.delete(key);
+  }, []);
+  const getDayCellFromTarget = (0, import_react4.useCallback)((target) => {
+    if (!(target instanceof Element)) {
+      return null;
+    }
+    const button = target.closest("[calchemy-date]");
+    if (!(button instanceof HTMLButtonElement)) {
+      return null;
+    }
+    for (const cell of dayCells.current.values()) {
+      if (cell.element === button) {
+        return cell;
+      }
+    }
+    return null;
+  }, []);
+  const commitMultipleSelection = (0, import_react4.useCallback)(
+    (keys, fallbackDates = []) => {
+      const dates = resolveDateKeys(keys, dayCells.current, fallbackDates);
+      calendar.selectValue({
+        kind: "multiple",
+        dates
+      });
+    },
+    [calendar]
+  );
+  const endDragGesture = (0, import_react4.useCallback)(
+    (pointerId) => {
+      if (pointerId !== void 0) {
+        surfaceRef.current?.releasePointerCapture?.(pointerId);
+      }
+      releaseDragGestureLock();
+      dragStateRef.current = null;
+      setDragState(null);
+      setDragRectangle(null);
+    },
+    [releaseDragGestureLock]
+  );
+  const handlePointerMove = (0, import_react4.useCallback)(
+    (event) => {
+      const activeDrag = dragStateRef.current;
+      if (!multipleSelection || !activeDrag || event.pointerId !== activeDrag.pointerId) {
+        return;
+      }
+      event.preventDefault();
+      const current = getPointerPoint(event);
+      setDragRectangle({ start: activeDrag.start, current });
+      const dragRect = getDragRect(activeDrag.start, current);
+      const clipRect = getDragClipRect(surfaceRef.current);
+      const gestureKeys = getIntersectingDateKeys(
+        dayCells.current,
+        dragRect,
+        activeDrag.cellBounds,
+        clipRect
+      );
+      const baseKeys = activeDrag.baseDates.map((date) => date.toString());
+      const previewKeys = toggleDateKeys(baseKeys, gestureKeys);
+      const hasMoved = activeDrag.hasMoved || hasPointerMoved(activeDrag.start, current);
+      scheduleDragPreviewUpdate({
+        ...activeDrag,
+        current,
+        previewKeys,
+        hasMoved
+      });
+    },
+    [multipleSelection, scheduleDragPreviewUpdate]
+  );
+  const handlePointerDownCapture = (0, import_react4.useCallback)(
+    (event) => {
+      if (!multipleSelection || event.button !== 0 || !event.isPrimary) {
+        return;
+      }
+      const baseDates = getMultipleDates(calendar.selected);
+      event.preventDefault();
+      if (typeof document !== "undefined") {
+        document.getSelection()?.removeAllRanges();
+      }
+      surfaceRef.current = surfaceElementRef?.current ?? event.currentTarget;
+      surfaceRef.current?.setPointerCapture?.(event.pointerId);
+      acquireDragGestureLock();
+      const nextDragState = {
+        pointerId: event.pointerId,
+        start: getPointerPoint(event),
+        current: getPointerPoint(event),
+        baseDates,
+        previewKeys: baseDates.map((selectedDate) => selectedDate.toString()),
+        hasMoved: false,
+        startDayCell: getDayCellFromTarget(event.target),
+        cellBounds: snapshotCellBounds(dayCells.current)
+      };
+      dragStateRef.current = nextDragState;
+      setDragState(nextDragState);
+      setDragRectangle({
+        start: nextDragState.start,
+        current: nextDragState.current
+      });
+    },
+    [acquireDragGestureLock, calendar.selected, getDayCellFromTarget, multipleSelection, surfaceElementRef]
+  );
+  const handlePointerUp = (0, import_react4.useCallback)(
+    (event) => {
+      const activeDrag = dragStateRef.current;
+      if (!multipleSelection || !activeDrag || event.pointerId !== activeDrag.pointerId) {
+        return;
+      }
+      if (dragPreviewFrameRef.current !== null) {
+        cancelAnimationFrame(dragPreviewFrameRef.current);
+        dragPreviewFrameRef.current = null;
+        setDragState(activeDrag);
+      }
+      event.preventDefault();
+      suppressClickRef.current = true;
+      setTimeout(() => {
+        suppressClickRef.current = false;
+      }, 0);
+      if (activeDrag.hasMoved) {
+        commitMultipleSelection(activeDrag.previewKeys, activeDrag.baseDates);
+      } else {
+        const dayCell = activeDrag.startDayCell;
+        if (dayCell && !dayCell.disabled) {
+          const selectedDates = getMultipleDates(calendar.selected);
+          const nextKeys = toggleDateKeys(
+            selectedDates.map((selectedDate) => selectedDate.toString()),
+            [dayCell.date.toString()]
+          );
+          commitMultipleSelection(nextKeys, selectedDates.concat(dayCell.date));
+        }
+      }
+      endDragGesture(event.pointerId);
+      const focused = document.activeElement;
+      if (focused instanceof HTMLElement && event.currentTarget.contains(focused)) {
+        focused.blur();
+      }
+    },
+    [calendar.selected, commitMultipleSelection, endDragGesture, getDayCellFromTarget, multipleSelection]
+  );
+  const handlePointerCancel = (0, import_react4.useCallback)(
+    (event) => {
+      const activeDrag = dragStateRef.current;
+      if (!activeDrag || event.pointerId !== activeDrag.pointerId) {
+        return;
+      }
+      endDragGesture(event.pointerId);
+    },
+    [endDragGesture]
+  );
+  return (0, import_react4.useMemo)(() => {
+    if (!multipleSelection) {
+      return null;
+    }
+    return {
+      multipleSelection,
+      dragState,
+      dragRectangle,
+      previewSelectedKeys,
+      suppressClickRef,
+      surfaceRef,
+      registerDay,
+      handlePointerDownCapture,
+      handlePointerMove,
+      handlePointerUp,
+      handlePointerCancel
+    };
+  }, [
+    dragRectangle,
+    dragState,
+    handlePointerCancel,
+    handlePointerDownCapture,
+    handlePointerMove,
+    handlePointerUp,
+    multipleSelection,
+    previewSelectedKeys,
+    registerDay
+  ]);
+}
+function CalendarDragRectangleOverlay({
+  dragRectangle: dragRectangleProp,
+  surfaceRef: surfaceRefProp
+} = {}) {
+  const drag = useOptionalCalendarPeriodDrag();
+  const dragRectangle = dragRectangleProp ?? drag?.dragRectangle ?? null;
+  const surfaceRef = surfaceRefProp ?? drag?.surfaceRef;
+  if (!dragRectangle) {
+    return null;
+  }
+  const surface = surfaceRef?.current;
+  if (!surface) {
+    return null;
+  }
+  const surfaceRect = surface.getBoundingClientRect();
+  const left = Math.min(dragRectangle.start.x, dragRectangle.current.x) - surfaceRect.left;
+  const top = Math.min(dragRectangle.start.y, dragRectangle.current.y) - surfaceRect.top;
+  const width = Math.abs(dragRectangle.current.x - dragRectangle.start.x);
+  const height = Math.abs(dragRectangle.current.y - dragRectangle.start.y);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      "calchemy-drag-rect": "",
+      style: {
+        position: "absolute",
+        left,
+        top,
+        width,
+        height,
+        pointerEvents: "none",
+        boxSizing: "border-box"
+      }
+    }
+  );
+}
+function CalendarPeriodDragProvider({ value, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarPeriodDragContext.Provider, { value, children });
+}
+function getMultipleDates(value) {
+  return value?.kind === "multiple" ? value.dates : [];
+}
+function getSelectedDateKeys(value) {
+  return getMultipleDates(value).map((date) => date.toString());
+}
+function toggleDateKeys(baseKeys, toggledKeys) {
+  const next = new Set(baseKeys);
+  for (const key of toggledKeys) {
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+  }
+  return Array.from(next).sort();
+}
+function getPointerPoint(event) {
+  return { x: event.clientX, y: event.clientY };
+}
+function hasPointerMoved(start, current) {
+  return Math.abs(start.x - current.x) > 2 || Math.abs(start.y - current.y) > 2;
+}
+function getDragRect(start, current) {
+  const left = Math.min(start.x, current.x);
+  const right = Math.max(start.x, current.x);
+  const top = Math.min(start.y, current.y);
+  const bottom = Math.max(start.y, current.y);
+  return {
+    left,
+    right,
+    top,
+    bottom,
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top,
+    toJSON: () => ({})
+  };
+}
+function snapshotCellBounds(cells) {
+  const bounds = /* @__PURE__ */ new Map();
+  for (const [key, cell] of cells) {
+    const rect = cell.element.getBoundingClientRect();
+    bounds.set(key, {
+      left: rect.left,
+      right: rect.right,
+      top: rect.top,
+      bottom: rect.bottom
+    });
+  }
+  return bounds;
+}
+function getDragClipRect(surface) {
+  if (!surface) {
+    return null;
+  }
+  const scrollContainer = surface.closest("[calchemy-scroll]");
+  if (!(scrollContainer instanceof HTMLElement)) {
+    return null;
+  }
+  const rect = scrollContainer.getBoundingClientRect();
+  return {
+    left: rect.left,
+    right: rect.right,
+    top: rect.top,
+    bottom: rect.bottom
+  };
+}
+function clipBoundsToRect(bounds, clip) {
+  const left = Math.max(bounds.left, clip.left);
+  const right = Math.min(bounds.right, clip.right);
+  const top = Math.max(bounds.top, clip.top);
+  const bottom = Math.min(bounds.bottom, clip.bottom);
+  if (left > right || top > bottom) {
+    return null;
+  }
+  return { left, right, top, bottom };
+}
+function getIntersectingDateKeys(cells, dragRect, cellBounds, clipRect = null) {
+  const clippedDragRect = clipRect ? clipBoundsToRect(dragRect, clipRect) : dragRect;
+  if (!clippedDragRect) {
+    return [];
+  }
+  return Array.from(cells.entries()).filter(([key, cell]) => {
+    const bounds = cellBounds.get(key);
+    if (!bounds || cell.disabled) {
+      return false;
+    }
+    const visibleBounds = clipRect ? clipBoundsToRect(bounds, clipRect) : bounds;
+    return visibleBounds && rectsIntersect(clippedDragRect, visibleBounds);
+  }).map(([key]) => key);
+}
+function rectsIntersect(left, right) {
+  return left.left <= right.right && left.right >= right.left && left.top <= right.bottom && left.bottom >= right.top;
+}
+function resolveDateKeys(keys, cells, fallbackDates) {
+  const fallbackByKey = new Map(fallbackDates.map((date) => [date.toString(), date]));
+  return Array.from(keys).sort().flatMap((key) => {
+    const date = cells.get(key)?.date ?? fallbackByKey.get(key);
+    return date ? [date] : [];
+  });
+}
+
+// src/components/calendar/date-model.ts
+var defaultDateOrderPreference = ["DMY", "MDY", "YMD"];
+function getFirstVisibleCalendarPeriod(calendar) {
+  const period = calendar.visiblePeriods[0];
+  if (!period) {
+    throw new Error("Calchemy.Calendar requires at least one visible generated period.");
+  }
+  return period;
+}
+function getCalendarDayState(calendar, period, date) {
+  const bounded = isDateWithinBounds(date, calendar.bounds);
+  const namedDates = getNamedDatesForDate(calendar, date);
+  const disabled = !bounded || (calendar.isDateDisabled?.(date, calendar) ?? false);
+  return {
+    outside: isBefore(date, period.start) || isAfter(date, period.end),
+    selected: isSelectedDate(calendar.selected, date),
+    today: calendar.today.equals(date),
+    weekend: isWeekend(date),
+    firstOfPeriod: date.equals(period.start),
+    lastOfPeriod: date.equals(period.end),
+    bounded,
+    disabled,
+    namedDates
+  };
+}
+function parseCalendarDuration(value, propName) {
+  const hasMonths = "months" in value;
+  const hasWeeks = "weeks" in value;
+  if (hasMonths === hasWeeks) {
+    throw new Error(`Calchemy.Calendar ${propName} must include exactly one of months or weeks.`);
+  }
+  const count = hasMonths ? value.months : value.weeks;
+  if (!Number.isInteger(count) || count < 1) {
+    throw new Error(`Calchemy.Calendar ${propName} must be a positive integer duration.`);
+  }
+  return {
+    unit: hasMonths ? "month" : "week",
+    count
+  };
+}
+function validateCalendarBounds(bounds) {
+  if (bounds?.start && bounds.end && isAfter(bounds.start, bounds.end)) {
+    throw new Error("Calchemy.Calendar bounds.start must be on or before bounds.end.");
+  }
+}
+function clampDateToBounds(date, bounds) {
+  if (bounds?.start && isBefore(date, bounds.start)) {
+    return bounds.start;
+  }
+  if (bounds?.end && isAfter(date, bounds.end)) {
+    return bounds.end;
+  }
+  return date;
+}
+function isDateWithinBounds(date, bounds) {
+  return (!bounds?.start || !isBefore(date, bounds.start)) && (!bounds?.end || !isAfter(date, bounds.end));
+}
+function periodIntersectsBounds(period, bounds) {
+  return (!bounds?.start || !isBefore(period.end, bounds.start)) && (!bounds?.end || !isAfter(period.start, bounds.end));
+}
+function getCalendarPeriodAtOffset(anchor, period, weekStartsOn, locale, offset) {
+  const firstStart = period.unit === "month" ? startOfMonth(anchor) : startOfWeek(anchor, weekStartsOn);
+  const start = addCalendarPeriod(firstStart, period.unit, offset);
+  const end = period.unit === "month" ? endOfMonth(start) : start.add({ days: 6 });
+  return {
+    id: `${period.unit}-${start.toString()}`,
+    unit: period.unit,
+    index: offset,
+    start,
+    end,
+    label: formatPeriodLabel(start, end, period.unit, locale)
+  };
+}
+function getInitialPeriodExtensions(period) {
+  return {
+    before: period.count * 6,
+    after: period.count * 3
+  };
+}
+function getSelectedValue(state) {
+  const resultValue = getResultValue(state);
+  return state.value ?? resultValue;
+}
+function getDateValueAnchor(value) {
+  if (!value) {
+    return null;
+  }
+  switch (value.kind) {
+    case "single":
+      return value.date;
+    case "range":
+      return value.start;
+    case "multiple":
+      return value.dates[0] ?? null;
+  }
+}
+function getDateValueKey(value) {
+  if (!value) {
+    return "";
+  }
+  switch (value.kind) {
+    case "single":
+      return `single:${value.date.toString()}`;
+    case "range":
+      return `range:${value.start.toString()}:${value.end.toString()}`;
+    case "multiple":
+      return `multiple:${value.dates.map((date) => date.toString()).join(",")}`;
+  }
+}
+function isDateInCalendarViewport(date, periods, visiblePeriodIndex, windowCount) {
+  return periods.filter(
+    (period) => period.index >= visiblePeriodIndex && period.index < visiblePeriodIndex + windowCount
+  ).some((period) => !isBefore(date, period.start) && !isAfter(date, period.end));
+}
+function getResultValue(state) {
+  return state.result.status === "valid" ? state.result.value : null;
+}
+function getToday(state) {
+  if (state.parseContext?.referenceDate) {
+    return state.parseContext.referenceDate;
+  }
+  const todayResult = state.calchemy.parseDate("today", state.parseContext);
+  if (todayResult.status === "valid" && todayResult.value.kind === "single") {
+    return todayResult.value.date;
+  }
+  return state.calchemy.Temporal.Now.plainDateISO(state.parseContext?.timeZone);
+}
+function buildCalendarPeriods(anchor, period, weekStartsOn, locale, extensions, bounds) {
+  const total = extensions.before + period.count + extensions.after;
+  return Array.from({ length: total }, (_, index) => {
+    const offset = index - extensions.before;
+    return getCalendarPeriodAtOffset(anchor, period, weekStartsOn, locale, offset);
+  }).filter((item) => periodIntersectsBounds(item, bounds));
+}
+function buildCalendarWeeks(period, weekStartsOn) {
+  const start = startOfWeek(period.start, weekStartsOn);
+  const end = endOfWeek(period.end, weekStartsOn);
+  const weeks = [];
+  let cursor = start;
+  while (!isAfter(cursor, end)) {
+    const week = Array.from({ length: 7 }, (_, index) => cursor.add({ days: index }));
+    weeks.push(week);
+    cursor = cursor.add({ days: 7 });
+  }
+  return weeks;
+}
+function buildWeekdays(calendar, weekdayFormat = "short") {
+  const sunday = startOfWeek(calendar.today, 0);
+  const first = startOfWeek(calendar.today, calendar.weekStartsOn);
+  return Array.from({ length: 7 }, (_, index) => {
+    const date = first.add({ days: index });
+    const weekdayIndex = sunday.until(date).days % 7;
+    return {
+      index: weekdayIndex,
+      label: date.toLocaleString(calendar.locale, { weekday: weekdayFormat }),
+      weekend: isWeekend(date)
+    };
+  });
+}
+function addCalendarPeriod(date, unit, count) {
+  return unit === "month" ? date.add({ months: count }) : date.add({ weeks: count });
+}
+function formatCalendarWindowLabel(periods, locale) {
+  const first = periods[0];
+  const last = periods.at(-1);
+  if (!first || !last) {
+    return "";
+  }
+  if (first.start.equals(last.start) && first.end.equals(last.end)) {
+    return first.label;
+  }
+  return `${formatDateLabel(first.start, locale)} - ${formatDateLabel(last.end, locale)}`;
+}
+function formatMonthLabel(date, locale) {
+  return date.toLocaleString(locale, { month: "long" });
+}
+function startOfMonth(date) {
+  return date.with({ day: 1 });
+}
+function endOfMonth(date) {
+  return startOfMonth(date).add({ months: 1 }).subtract({ days: 1 });
+}
+function startOfWeek(date, weekStartsOn) {
+  const temporalWeekday = weekStartsOn === 0 ? 7 : weekStartsOn;
+  let cursor = date;
+  while (cursor.dayOfWeek !== temporalWeekday) {
+    cursor = cursor.subtract({ days: 1 });
+  }
+  return cursor;
+}
+function endOfWeek(date, weekStartsOn) {
+  return startOfWeek(date, weekStartsOn).add({ days: 6 });
+}
+function isBefore(left, right) {
+  return left.toString() < right.toString();
+}
+function isAfter(left, right) {
+  return left.toString() > right.toString();
+}
+function isSelectedDate(value, date) {
+  if (!value) {
+    return false;
+  }
+  switch (value.kind) {
+    case "single":
+      return value.date.equals(date);
+    case "range":
+      return !isBefore(date, value.start) && !isAfter(date, value.end);
+    case "multiple":
+      return value.dates.some((selectedDate) => selectedDate.equals(date));
+  }
+}
+function isWeekend(date) {
+  return date.dayOfWeek === 6 || date.dayOfWeek === 7;
+}
+function getNamedDatesForDate(calendar, date) {
+  if (!calendar.namedDates) {
+    return [];
+  }
+  const context = getResolvedNamedDateContext(calendar);
+  return calendar.calchemy.calchemy.namedDatesVocabulary.filter((entry) => {
+    if (calendar.namedDates === "holidays" && !entry.isHoliday) {
+      return false;
+    }
+    return entry.resolveDate({ year: date.year, context })?.equals(date) ?? false;
+  });
+}
+function getResolvedNamedDateContext(calendar) {
+  const context = calendar.calchemy.parseContext;
+  return {
+    referenceDate: context?.referenceDate ?? calendar.calchemy.calchemy.Temporal.Now.plainDateISO(context?.timeZone),
+    locale: context?.locale ?? "en-US",
+    weekStartsOn: context?.weekStartsOn ?? 0,
+    dateOrderPreference: normalizeDateOrderPreference(context?.dateOrderPreference),
+    lastNDaysIncludesToday: context?.lastNDaysIncludesToday ?? true
+  };
+}
+function normalizeDateOrderPreference(value) {
+  if (!value || value.length === 0) {
+    return defaultDateOrderPreference;
+  }
+  return Array.from(new Set(value));
+}
+function formatPeriodLabel(start, end, unit, locale) {
+  if (unit === "month") {
+    return formatDateLabel(start, locale);
+  }
+  return `${start.toLocaleString(locale, { month: "short", day: "numeric" })} - ${end.toLocaleString(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  })}`;
+}
+function formatDateLabel(date, locale) {
+  return date.toLocaleString(locale, { month: "long", year: "numeric" });
+}
+
+// src/components/calendar/CalendarGrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultCalendarWeekdayFormat = "short";
+function CalendarWeekdays({
+  weekdayFormat = defaultCalendarWeekdayFormat,
+  ...props
+}) {
+  const calendar = useCalchemyCalendar();
+  const weekdays = buildWeekdays(calendar, weekdayFormat);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ...props, "calchemy-days": "", children: weekdays.map((weekday) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "calchemy-weekday": "",
+      "calchemy-weekend": weekday.weekend ? "" : void 0,
+      children: weekday.label
+    },
+    weekday.index
+  )) });
+}
+function CalendarGrid({
+  showBookends = false,
+  dragSelection = true,
+  style,
+  onPointerDownCapture,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  onDragStart,
+  ...props
+}) {
+  const calendar = useCalchemyCalendar();
+  const period = useCalendarPeriod() ?? getFirstVisibleCalendarPeriod(calendar);
+  const weeks = buildCalendarWeeks(period, calendar.weekStartsOn);
+  const parentDrag = useOptionalCalendarPeriodDrag();
+  const localDrag = useCalendarPeriodDragSurface(
+    calendar.editable && dragSelection && parentDrag === null
+  );
+  const drag = parentDrag ?? localDrag;
+  const multipleSelection = Boolean(drag?.multipleSelection);
+  const useLocalDragHandlers = Boolean(drag && parentDrag === null);
+  const committedSelectedKeys = (0, import_react5.useMemo)(() => new Set(getSelectedDateKeys(calendar.selected)), [calendar.selected]);
+  const previewSelectedKeys = drag?.previewSelectedKeys ?? /* @__PURE__ */ new Set();
+  const dragState = drag?.dragState ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ...props,
+      "calchemy-grid": "",
+      "calchemy-multiple-drag": useLocalDragHandlers ? "" : void 0,
+      "calchemy-dragging": useLocalDragHandlers && dragState ? "" : void 0,
+      style: useLocalDragHandlers ? { ...multipleDragSurfaceStyle, ...style } : style,
+      onPointerDownCapture: useLocalDragHandlers ? (event) => {
+        drag?.handlePointerDownCapture(event);
+        onPointerDownCapture?.(event);
+      } : onPointerDownCapture,
+      onPointerMove: useLocalDragHandlers ? (event) => {
+        drag?.handlePointerMove(event);
+        onPointerMove?.(event);
+      } : onPointerMove,
+      onPointerUp: useLocalDragHandlers ? (event) => {
+        drag?.handlePointerUp(event);
+        onPointerUp?.(event);
+      } : onPointerUp,
+      onPointerCancel: useLocalDragHandlers ? (event) => {
+        drag?.handlePointerCancel(event);
+        onPointerCancel?.(event);
+      } : onPointerCancel,
+      onDragStart: useLocalDragHandlers ? (event) => {
+        event.preventDefault();
+        onDragStart?.(event);
+      } : onDragStart,
+      children: [
+        useLocalDragHandlers && drag?.dragRectangle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CalendarDragRectangleOverlay, { dragRectangle: drag.dragRectangle, surfaceRef: drag.surfaceRef }) : null,
+        weeks.map((week) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "calchemy-week": "", children: week.map((date) => {
+          const dayState = getCalendarDayState(calendar, period, date);
+          const namedDateLabels = dayState.namedDates.map((item) => item.value).join(", ");
+          const dateKey = date.toString();
+          const selected = multipleSelection ? dragState ? previewSelectedKeys.has(dateKey) : committedSelectedKeys.has(dateKey) : dayState.selected;
+          const dragPreview = Boolean(dragState && selected !== dayState.selected);
+          if (dayState.outside && !showBookends) {
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                "aria-hidden": "true",
+                "calchemy-cell": "",
+                "calchemy-blank": ""
+              },
+              date.toString()
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              ref: (element) => drag?.registerDay(element, date, dayState.disabled || !calendar.editable),
+              "calchemy-date": "",
+              "calchemy-selected": selected ? "" : void 0,
+              "calchemy-drag-preview": dragPreview ? "" : void 0,
+              "calchemy-drag-preview-selected": dragPreview && selected ? "" : void 0,
+              "calchemy-drag-preview-deselected": dragPreview && !selected ? "" : void 0,
+              "calchemy-today": dayState.today ? "" : void 0,
+              "calchemy-weekend": dayState.weekend ? "" : void 0,
+              "calchemy-outside": dayState.outside ? "" : void 0,
+              "calchemy-first-of-period": dayState.firstOfPeriod ? "" : void 0,
+              "calchemy-last-of-period": dayState.lastOfPeriod ? "" : void 0,
+              "calchemy-disabled": dayState.disabled ? "" : void 0,
+              "calchemy-out-of-bounds": !dayState.bounded ? "" : void 0,
+              "calchemy-named-date": dayState.namedDates.length > 0 ? "" : void 0,
+              "calchemy-holiday": dayState.namedDates.some((item) => item.isHoliday) ? "" : void 0,
+              "calchemy-named-date-labels": namedDateLabels || void 0,
+              "aria-disabled": !calendar.editable && !dayState.disabled ? true : void 0,
+              disabled: dayState.disabled,
+              onClick: () => {
+                if (!calendar.editable) {
+                  return;
+                }
+                if (drag?.suppressClickRef.current) {
+                  drag.suppressClickRef.current = false;
+                  return;
+                }
+                if (!dayState.disabled) {
+                  if (multipleSelection) {
+                    const selectedDates = getMultipleDates(calendar.selected);
+                    const nextKeys = toggleDateKeys(
+                      selectedDates.map((selectedDate) => selectedDate.toString()),
+                      [dateKey]
+                    );
+                    const nextDates = nextKeys.flatMap((key) => {
+                      if (key === dateKey) {
+                        return [date];
+                      }
+                      const existing = selectedDates.find((selectedDate) => selectedDate.toString() === key);
+                      return existing ? [existing] : [];
+                    });
+                    calendar.selectValue({
+                      kind: "multiple",
+                      dates: nextDates
+                    });
+                  } else {
+                    calendar.selectDate(date);
+                  }
+                }
+              },
+              children: date.day
+            },
+            date.toString()
+          );
+        }) }, week[0]?.toString()))
+      ]
+    }
+  );
+}
+
+// src/components/calendar/Calendar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultCalendarPeriod = { months: 1 };
+function Calendar({
+  period = defaultCalendarPeriod,
+  bounds,
+  isDateDisabled,
+  namedDates,
+  children,
+  ...divProps
+}) {
+  const state = useCalchemyContext();
+  const editable = state.inputMode === "calendar";
+  validateCalendarBounds(bounds);
+  const parsedPeriod = (0, import_react6.useMemo)(() => parseCalendarDuration(period, "period"), [period]);
+  const selected = getSelectedValue(state);
+  const today = getToday(state);
+  const [periodAnchor, setPeriodAnchor] = (0, import_react6.useState)(
+    () => clampDateToBounds(getDateValueAnchor(selected) ?? today, bounds)
+  );
+  const [navigationAnchor, setNavigationAnchor] = (0, import_react6.useState)(null);
+  const [periodExtensions, setPeriodExtensions] = (0, import_react6.useState)(() => getInitialPeriodExtensions(parsedPeriod));
+  const [visiblePeriodIndex, setScrolledVisiblePeriodIndex] = (0, import_react6.useState)(null);
+  const prevInputValueRef = (0, import_react6.useRef)(state.inputValue);
+  const prevSelectedKeyRef = (0, import_react6.useRef)(getDateValueKey(selected));
+  const prevExpectedValueRef = (0, import_react6.useRef)(state.expectedValue);
+  (0, import_react6.useEffect)(() => {
+    if (prevExpectedValueRef.current === state.expectedValue) {
+      return;
+    }
+    prevExpectedValueRef.current = state.expectedValue;
+    setScrolledVisiblePeriodIndex(null);
+    setNavigationAnchor(null);
+    setPeriodAnchor(clampDateToBounds(getDateValueAnchor(selected) ?? today, bounds));
+    prevInputValueRef.current = state.inputValue;
+    prevSelectedKeyRef.current = getDateValueKey(selected);
+  }, [bounds, selected, state.expectedValue, state.inputValue, today]);
+  const periodAnchorKey = periodAnchor.toString();
+  const activeVisiblePeriodIndex = visiblePeriodIndex?.anchor === periodAnchorKey && visiblePeriodIndex.inputValue === state.inputValue ? visiblePeriodIndex.index : 0;
+  const weekStartsOn = state.parseContext?.weekStartsOn ?? 0;
+  const locale = state.parseContext?.locale ?? "en-US";
+  const periods = (0, import_react6.useMemo)(
+    () => buildCalendarPeriods(periodAnchor, parsedPeriod, weekStartsOn, locale, periodExtensions, bounds),
+    [periodAnchor, parsedPeriod.count, parsedPeriod.unit, weekStartsOn, locale, periodExtensions, bounds]
+  );
+  const visiblePeriods = (0, import_react6.useMemo)(
+    () => {
+      const visible = periods.filter(
+        (item) => item.index >= activeVisiblePeriodIndex && item.index < activeVisiblePeriodIndex + parsedPeriod.count
+      );
+      return visible.length > 0 ? visible : periods.slice(0, parsedPeriod.count);
+    },
+    [periods, activeVisiblePeriodIndex, parsedPeriod.count]
+  );
+  const visiblePeriodAnchor = visiblePeriods[0]?.start ?? periodAnchor;
+  (0, import_react6.useLayoutEffect)(() => {
+    const inputChanged = prevInputValueRef.current !== state.inputValue;
+    prevInputValueRef.current = state.inputValue;
+    const selectedKey = getDateValueKey(selected);
+    const selectionChanged = prevSelectedKeyRef.current !== selectedKey;
+    prevSelectedKeyRef.current = selectedKey;
+    if (!inputChanged && !selectionChanged) {
+      return;
+    }
+    if (selectionChanged && editable) {
+      return;
+    }
+    const selectionAnchor = clampDateToBounds(getDateValueAnchor(selected) ?? today, bounds);
+    const inputReflectsCalendarSelection = state.inputValue === selectionAnchor.toString();
+    const shouldRevealSelection = inputChanged && !inputReflectsCalendarSelection;
+    if (!shouldRevealSelection && isDateInCalendarViewport(
+      selectionAnchor,
+      periods,
+      activeVisiblePeriodIndex,
+      parsedPeriod.count
+    )) {
+      return;
+    }
+    setPeriodAnchor((current) => current.equals(selectionAnchor) ? current : selectionAnchor);
+    setScrolledVisiblePeriodIndex(null);
+  }, [
+    activeVisiblePeriodIndex,
+    bounds,
+    editable,
+    parsedPeriod.count,
+    periods,
+    selected,
+    state.inputValue,
+    today
+  ]);
+  function setCalendarPeriodAnchor(date) {
+    const clamped = clampDateToBounds(date, bounds);
+    setPeriodAnchor(clamped);
+    setNavigationAnchor({ date: clamped, inputValue: state.inputValue });
+    setPeriodExtensions(getInitialPeriodExtensions(parsedPeriod));
+    setScrolledVisiblePeriodIndex(null);
+  }
+  function canMoveCalendar(unit, count) {
+    const target = addCalendarPeriod(visiblePeriodAnchor, unit, count);
+    return target.equals(clampDateToBounds(target, bounds));
+  }
+  function canExtendCalendarPeriods(direction, windows = 1) {
+    if (!bounds) {
+      return true;
+    }
+    const extendCount = parsedPeriod.count * windows;
+    const firstIndex = periods[0]?.index ?? 0;
+    const lastIndex = periods.at(-1)?.index ?? parsedPeriod.count - 1;
+    const targetIndex = direction === "before" ? firstIndex - extendCount : lastIndex + 1;
+    const targetPeriod = getCalendarPeriodAtOffset(periodAnchor, parsedPeriod, weekStartsOn, locale, targetIndex);
+    return periodIntersectsBounds(targetPeriod, bounds);
+  }
+  const calendarState = (0, import_react6.useMemo)(
+    () => ({
+      calchemy: state,
+      period: parsedPeriod,
+      periodAnchor,
+      visiblePeriodAnchor,
+      today,
+      selected,
+      periods,
+      visiblePeriods,
+      weekStartsOn,
+      locale,
+      bounds,
+      namedDates,
+      editable,
+      isDateDisabled,
+      setPeriodAnchor: setCalendarPeriodAnchor,
+      setVisiblePeriodIndex(index) {
+        setScrolledVisiblePeriodIndex((current) => {
+          if (current?.anchor === periodAnchorKey && current.inputValue === state.inputValue && current.index === index) {
+            return current;
+          }
+          return { anchor: periodAnchorKey, inputValue: state.inputValue, index };
+        });
+      },
+      canMove: canMoveCalendar,
+      move(unit, count) {
+        if (!canMoveCalendar(unit, count)) {
+          return;
+        }
+        const clamped = clampDateToBounds(addCalendarPeriod(visiblePeriodAnchor, unit, count), bounds);
+        setPeriodAnchor(clamped);
+        setNavigationAnchor({
+          date: clamped,
+          inputValue: state.inputValue
+        });
+        setPeriodExtensions(getInitialPeriodExtensions(parsedPeriod));
+        setScrolledVisiblePeriodIndex(null);
+      },
+      canExtendPeriods: canExtendCalendarPeriods,
+      extendPeriods(direction, windows = 1) {
+        if (!canExtendCalendarPeriods(direction, windows)) {
+          return;
+        }
+        setPeriodExtensions((current) => ({
+          ...current,
+          [direction]: current[direction] + parsedPeriod.count * windows
+        }));
+      },
+      selectDate(date) {
+        if (!editable) {
+          return;
+        }
+        if (state.expectedValue === "range") {
+          const current = selected;
+          if (current?.kind === "range" && current.start.equals(current.end)) {
+            const start = isBefore(current.start, date) ? current.start : date;
+            const end = isBefore(current.start, date) ? date : current.start;
+            state.selectDate({ kind: "range", start, end });
+            return;
+          }
+          state.selectDate({ kind: "range", start: date, end: date });
+          return;
+        }
+        state.selectDate({ kind: "single", date });
+      },
+      selectValue(value) {
+        if (!editable) {
+          return;
+        }
+        state.selectDate(value);
+      }
+    }),
+    [
+      state,
+      parsedPeriod,
+      periodAnchor,
+      periodAnchorKey,
+      visiblePeriodAnchor,
+      today,
+      selected,
+      periods,
+      visiblePeriods,
+      weekStartsOn,
+      locale,
+      bounds,
+      namedDates,
+      editable,
+      isDateDisabled
+    ]
+  );
+  const content = children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(CalendarHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CalendarPrevious, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CalendarHeading, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CalendarNext, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CalendarWeekdays, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CalendarGrid, {})
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CalendarContext.Provider, { value: calendarState, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ...divProps,
+      "calchemy-calendar": "",
+      "calchemy-editable": editable ? "" : void 0,
+      style: {
+        ...divProps.style,
+        "--calchemy-calendar-period-count": parsedPeriod.count
+      },
+      children: content
+    }
+  ) });
+}
+function CalendarHeader(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...props, "calchemy-header": "" });
+}
+function CalendarHeading(props) {
+  const calendar = useCalchemyCalendar();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { ...props, "calchemy-heading": "", children: props.children ?? formatCalendarWindowLabel(calendar.visiblePeriods, calendar.locale) });
+}
+function CalendarPrevious({
+  onClick,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    CalendarNavigationButton,
+    {
+      ...props,
+      direction: -1,
+      "calchemy-previous": "",
+      onClick,
+      children: children ?? "Previous"
+    }
+  );
+}
+function CalendarNext({
+  onClick,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    CalendarNavigationButton,
+    {
+      ...props,
+      direction: 1,
+      "calchemy-next": "",
+      onClick,
+      children: children ?? "Next"
+    }
+  );
+}
+function CalendarNavigationButton({
+  direction,
+  onClick,
+  type = "button",
+  ...props
+}) {
+  const calendar = useCalchemyCalendar();
+  const disabled = props.disabled ?? !calendar.canMove(calendar.period.unit, calendar.period.count * direction);
+  function handleClick(event) {
+    onClick?.(event);
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+    calendar.move(calendar.period.unit, calendar.period.count * direction);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { ...props, type, disabled, onClick: handleClick });
+}
+
+// src/components/calendar/CalendarPeriodHeading.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CalendarPeriodHeading(props) {
+  const calendar = useCalchemyCalendar();
+  const period = useCalendarPeriod() ?? getFirstVisibleCalendarPeriod(calendar);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { ...props, "calchemy-period-heading": "", children: props.children ?? period.label });
+}
+
+// src/components/calendar/CalendarPeriod.tsx
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function CalendarPeriod({
+  dragSelection = true,
+  style,
+  children,
+  onPointerDownCapture,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  onDragStart,
+  ...props
+}) {
+  const period = (0, import_react7.useContext)(CalendarPeriodContext);
+  const calendar = useCalchemyCalendar();
+  const parentDrag = useOptionalCalendarPeriodDrag();
+  const drag = useCalendarPeriodDragSurface(
+    calendar.editable && dragSelection && parentDrag === null
+  );
+  const content = drag ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CalendarPeriodDragProvider, { value: drag, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CalendarDragRectangleOverlay, {}),
+    children
+  ] }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "section",
+    {
+      ...props,
+      "calchemy-period": "",
+      "calchemy-period-id": period?.id,
+      "calchemy-period-index": period?.index,
+      "calchemy-multiple-drag": drag ? "" : void 0,
+      "calchemy-dragging": drag?.dragState ? "" : void 0,
+      style: drag ? { ...multipleDragSurfaceStyle, ...style } : parentDrag ? { touchAction: "none", ...style } : style,
+      onPointerDownCapture: drag ? (event) => {
+        drag.handlePointerDownCapture(event);
+        onPointerDownCapture?.(event);
+      } : onPointerDownCapture,
+      onPointerMove: drag ? (event) => {
+        drag.handlePointerMove(event);
+        onPointerMove?.(event);
+      } : onPointerMove,
+      onPointerUp: drag ? (event) => {
+        drag.handlePointerUp(event);
+        onPointerUp?.(event);
+      } : onPointerUp,
+      onPointerCancel: drag ? (event) => {
+        drag.handlePointerCancel(event);
+        onPointerCancel?.(event);
+      } : onPointerCancel,
+      onDragStart: drag ? (event) => {
+        event.preventDefault();
+        onDragStart?.(event);
+      } : onDragStart,
+      children: content
+    }
+  );
+}
+
+// src/components/calendar/CalendarPeriodList.tsx
+var import_react8 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CalendarPeriodList({
+  children,
+  dragSelection = true,
+  style,
+  onPointerDownCapture,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  onDragStart,
+  ...props
+}) {
+  const calendar = useCalchemyCalendar();
+  const scrollContext = (0, import_react8.useContext)(CalendarScrollContext);
+  const parentDrag = useOptionalCalendarPeriodDrag();
+  const surfaceRef = (0, import_react8.useRef)(null);
+  const hitCaptureRef = (0, import_react8.useRef)(null);
+  const drag = useCalendarPeriodDragSurface(
+    calendar.editable && dragSelection && parentDrag === null,
+    surfaceRef
+  );
+  const periods = scrollContext ? calendar.periods : calendar.visiblePeriods;
+  (0, import_react8.useLayoutEffect)(() => {
+    if (!drag) {
+      return;
+    }
+    const surface = surfaceRef.current;
+    const hitCapture = hitCaptureRef.current;
+    if (!surface || !hitCapture) {
+      return;
+    }
+    const updateDragHitBounds = () => {
+      const periodElements = surface.querySelectorAll("[calchemy-period]");
+      if (periodElements.length === 0) {
+        hitCapture.style.removeProperty("inline-size");
+        hitCapture.style.removeProperty("block-size");
+        return;
+      }
+      let maxInlineEnd = 0;
+      let maxBlockEnd = 0;
+      for (const periodElement of periodElements) {
+        maxInlineEnd = Math.max(maxInlineEnd, periodElement.offsetLeft + periodElement.offsetWidth);
+        maxBlockEnd = Math.max(maxBlockEnd, periodElement.offsetTop + periodElement.offsetHeight);
+      }
+      hitCapture.style.inlineSize = `${maxInlineEnd}px`;
+      hitCapture.style.blockSize = `${maxBlockEnd}px`;
+    };
+    updateDragHitBounds();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(updateDragHitBounds);
+    resizeObserver.observe(surface);
+    for (const periodElement of surface.querySelectorAll("[calchemy-period]")) {
+      resizeObserver.observe(periodElement);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [drag, periods]);
+  const spacerStyle = scrollContext?.direction === "horizontal" ? { gridColumn: `span ${scrollContext.leadingSpacerPeriodCount}` } : { blockSize: `${scrollContext?.leadingSpacerPixelSize ?? 0}px` };
+  const periodContent = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    scrollContext && scrollContext.leadingSpacerPeriodCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        "calchemy-scroll-spacer": "",
+        style: spacerStyle
+      }
+    ) : null,
+    periods.map((period) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarPeriodContext.Provider, { value: period, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CalendarPeriod, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarPeriodHeading, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarWeekdays, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarGrid, {})
+    ] }) }, period.id))
+  ] });
+  const content = drag ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CalendarPeriodDragProvider, { value: drag, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        ref: hitCaptureRef,
+        "aria-hidden": "true",
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: 0,
+          pointerEvents: "auto",
+          touchAction: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarDragRectangleOverlay, {}),
+    periodContent
+  ] }) : periodContent;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      ...props,
+      ref: surfaceRef,
+      "calchemy-period-list": "",
+      "calchemy-multiple-drag": drag ? "" : void 0,
+      "calchemy-dragging": drag?.dragState ? "" : void 0,
+      style: drag ? { ...multiplePeriodListDragSurfaceStyle, ...style } : style,
+      onPointerDownCapture: drag ? (event) => {
+        drag.handlePointerDownCapture(event);
+        onPointerDownCapture?.(event);
+      } : onPointerDownCapture,
+      onPointerMove: drag ? (event) => {
+        drag.handlePointerMove(event);
+        onPointerMove?.(event);
+      } : onPointerMove,
+      onPointerUp: drag ? (event) => {
+        drag.handlePointerUp(event);
+        onPointerUp?.(event);
+      } : onPointerUp,
+      onPointerCancel: drag ? (event) => {
+        drag.handlePointerCancel(event);
+        onPointerCancel?.(event);
+      } : onPointerCancel,
+      onDragStart: drag ? (event) => {
+        event.preventDefault();
+        onDragStart?.(event);
+      } : onDragStart,
+      children: content
+    }
+  );
+}
+
+// src/components/calendar/CalendarSelects.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CalendarMonthSelect({ onChange, ...props }) {
+  const calendar = useCalchemyCalendar();
+  const months = Array.from({ length: 12 }, (_, index) => index + 1).filter(
+    (month) => isMonthWithinBounds(calendar.visiblePeriodAnchor.with({ month, day: 1 }), calendar)
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "select",
+    {
+      ...props,
+      "calchemy-month-select": "",
+      value: String(calendar.visiblePeriodAnchor.month),
+      onChange: (event) => handleCalendarSelectChange(
+        event,
+        onChange,
+        (value) => calendar.setPeriodAnchor(calendar.visiblePeriodAnchor.with({ month: value, day: 1 }))
+      ),
+      children: months.map((month) => {
+        const date = calendar.visiblePeriodAnchor.with({ month, day: 1 });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: String(month), children: formatMonthLabel(date, calendar.locale) }, month);
+      })
+    }
+  );
+}
+function CalendarYearSelect({ startYear, endYear, onChange, ...props }) {
+  const calendar = useCalchemyCalendar();
+  const visibleYear = calendar.visiblePeriodAnchor.year;
+  const firstYear = Math.min(calendar.bounds?.start?.year ?? startYear ?? visibleYear - 100, visibleYear);
+  const lastYear = Math.max(calendar.bounds?.end?.year ?? endYear ?? visibleYear + 100, visibleYear);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "select",
+    {
+      ...props,
+      "calchemy-year-select": "",
+      value: String(visibleYear),
+      onChange: (event) => handleCalendarSelectChange(
+        event,
+        onChange,
+        (value) => calendar.setPeriodAnchor(calendar.visiblePeriodAnchor.with({ year: value, day: 1 }))
+      ),
+      children: Array.from({ length: lastYear - firstYear + 1 }, (_, index) => firstYear + index).map((year) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: String(year), children: year }, year))
+    }
+  );
+}
+function handleCalendarSelectChange(event, onChange, updatePeriodAnchor) {
+  onChange?.(event);
+  if (event.defaultPrevented) {
+    return;
+  }
+  updatePeriodAnchor(Number(event.currentTarget.value));
+}
+function isMonthWithinBounds(monthStart, calendar) {
+  const monthEnd = monthStart.add({ months: 1 }).subtract({ days: 1 });
+  return (!calendar.bounds?.start || !isBefore(monthEnd, calendar.bounds.start)) && (!calendar.bounds?.end || !isAfter(monthStart, calendar.bounds.end));
+}
+
+// src/components/Calchemy.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Root(props) {
+  const { children, ...options } = props;
+  const state = useCalchemy(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalchemyContext.Provider, { value: state, children });
+}
+function Field({
+  renderInlineCompletion = true,
+  readOnly,
+  ...props
+}) {
+  const state = useCalchemyContext();
+  const inputProps = state.getInputProps();
+  const completion = state.inputMode === "field" ? state.inlineCompletion : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "span",
+    {
+      "calchemy-field": "",
+      "calchemy-input-mode": state.inputMode,
+      "calchemy-has-completion": completion ? "" : void 0,
+      children: [
+        renderInlineCompletion && completion ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "calchemy-field-backdrop": "", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "calchemy-field-typed": "", children: state.inputValue }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "calchemy-completions": "", children: completion.suffix })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ...props, ...inputProps, readOnly: readOnly ?? inputProps.readOnly })
+      ]
+    }
+  );
+}
+function InputMode({
+  fieldLabel = "Type",
+  calendarLabel = "Pick",
+  ...props
+}) {
+  const state = useCalchemyContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ...props, "calchemy-mode": "", "calchemy-active": state.inputMode, role: "group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        "calchemy-value": "field",
+        "aria-pressed": state.inputMode === "field",
+        onClick: () => state.setInputMode("field"),
+        children: fieldLabel
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        "calchemy-value": "calendar",
+        "aria-pressed": state.inputMode === "calendar",
+        onClick: () => state.setInputMode("calendar"),
+        children: calendarLabel
+      }
+    )
+  ] });
+}
+function Candidates(props) {
+  const state = useCalchemyContext();
+  if (state.inputMode !== "field" || state.result.status !== "ambiguous") {
+    return null;
+  }
+  const candidates = state.expectedValue && state.expectedValue !== "multiple" ? state.result.candidates.filter(
+    (candidate) => candidate.value.kind === state.expectedValue
+  ) : state.result.candidates;
+  if (candidates.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...props, "calchemy-candidates": "", children: candidates.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "button",
+    {
+      type: "button",
+      "calchemy-candidate": "",
+      onClick: () => state.selectCandidate(candidate.id),
+      children: candidate.label
+    },
+    candidate.id
+  )) });
+}
+var Calchemy = {
+  Root,
+  Field,
+  InputMode,
+  Candidates,
+  Calendar,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarPrevious,
+  CalendarNext,
+  CalendarPeriodList,
+  CalendarPeriod,
+  CalendarPeriodHeading,
+  CalendarWeekdays,
+  CalendarGrid,
+  CalendarMonthSelect,
+  CalendarYearSelect
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Calchemy,
+  useCalchemy,
+  useCalchemyCalendar,
+  useCalchemyContext
+});
+//# sourceMappingURL=index.cjs.map