Split range modes into a separate useTempocalRange hook

packages/core/src/clamp.ts

@@ -1,8 +1,21 @@
 import { Temporal } from "@js-temporal/polyfill";
 
-export function clamp<
-  Value extends Temporal.PlainDate | Temporal.PlainDateTime
->(value: Value, minValue?: Value, maxValue?: Value) {
+export function clamp(
+  value: Temporal.PlainDate,
+  minValue?: Temporal.PlainDate,
+  maxValue?: Temporal.PlainDate
+): Temporal.PlainDate;
+export function clamp(
+  value: Temporal.PlainDateTime,
+  minValue?: Temporal.PlainDateTime,
+  maxValue?: Temporal.PlainDateTime
+): Temporal.PlainDateTime;
+
+export function clamp(
+  value: Temporal.PlainDate | Temporal.PlainDateTime,
+  minValue?: Temporal.PlainDate | Temporal.PlainDateTime,
+  maxValue?: Temporal.PlainDate | Temporal.PlainDateTime
+): Temporal.PlainDate | Temporal.PlainDateTime {
   if (
     minValue &&
     Temporal[

packages/core/src/getMonths.ts

@@ -1,11 +1,13 @@
 import { Temporal } from "@js-temporal/polyfill";
+import { getNow } from "./getNow";
 import { temporalToDate } from "./temporalToDate";
 
+const referenceValue = getNow();
+
 export function getMonths(
-  locale: Parameters<typeof Intl.DateTimeFormat>[0],
-  referenceValue: Temporal.PlainDate,
-  minValue?: Temporal.PlainDate,
-  maxValue?: Temporal.PlainDate
+  locale: Intl.LocalesArgument,
+  minValue?: Temporal.PlainDate | Temporal.PlainDateTime,
+  maxValue?: Temporal.PlainDate | Temporal.PlainDateTime
 ) {
   const longMonthFormatter = new Intl.DateTimeFormat(locale, {
     month: "long",

packages/core/src/getNow.ts

@@ -0,0 +1,5 @@
+import { Temporal } from "@js-temporal/polyfill";
+
+export function getNow(calendar: Temporal.CalendarLike = "iso8601") {
+  return Temporal.Now.plainDateTime(calendar);
+}

packages/core/src/getWeekdays.ts

@@ -1,15 +1,9 @@
-import { Temporal } from "@js-temporal/polyfill";
 import { getFirstDayOfWeek } from "./getFirstDayOfWeek";
+import { getNow } from "./getNow";
 import { temporalToDate } from "./temporalToDate";
 
-export function getWeekdays(
-  locale: Parameters<typeof Intl.DateTimeFormat>[0],
-  startOfWeek: number
-) {
-  const firstDayOfWeek = getFirstDayOfWeek(
-    Temporal.Now.plainDate("iso8601"),
-    startOfWeek
-  );
+export function getWeekdays(locale: Intl.LocalesArgument, startOfWeek: number) {
+  const firstDayOfWeek = getFirstDayOfWeek(getNow(), startOfWeek);
 
   const longWeekdayFormatter = new Intl.DateTimeFormat(locale, {
     weekday: "long",

packages/core/src/getYears.ts

@@ -1,8 +1,8 @@
 import { Temporal } from "@js-temporal/polyfill";
 
 export function getYears(
-  minValue: Temporal.PlainDate,
-  maxValue: Temporal.PlainDate
+  minValue: Temporal.PlainDate | Temporal.PlainDateTime,
+  maxValue: Temporal.PlainDate | Temporal.PlainDateTime
 ) {
   const years: number[] = [];
 

packages/core/tempocal-core.ts

@@ -5,8 +5,9 @@ export * from "./src/getFirstDayOfWeek";
 export * from "./src/getHours";
 export * from "./src/getMinutes";
 export * from "./src/getMonthEndDate";
-export * from "./src/getMonths";
 export * from "./src/getMonthStartDate";
+export * from "./src/getMonths";
+export * from "./src/getNow";
 export * from "./src/getWeekdays";
 export * from "./src/getYears";
 export * from "./src/temporalToDate";

packages/core/test/getNow.test.ts

@@ -0,0 +1,19 @@
+import { Temporal } from "@js-temporal/polyfill";
+import { expect, test } from "vitest";
+import { getNow } from "../src/getNow";
+
+test("getNow (PlainDate, unbounded)", () => {
+  const result = getNow();
+
+  expect(result instanceof Temporal.PlainDate).toBe(true);
+
+  expect(
+    result.equals(
+      Temporal.PlainDate.from({
+        year: new Date().getFullYear(),
+        month: new Date().getMonth() + 1,
+        day: new Date().getDate(),
+      })
+    )
+  ).toBe(true);
+});

packages/react/src/Calendar.tsx

@@ -5,8 +5,7 @@ import {
   getWeekdays,
 } from "@tempocal/core";
 import * as React from "react";
-import { CSSProperties } from "react";
-import { Locale } from "./useTempocal";
+import { Locale } from "./types";
 
 type Value = Temporal.PlainDate | Temporal.PlainDateTime;
 
@@ -260,7 +259,7 @@ function Day({
 }: Pick<MonthProps, "dayProps" | "renderDay"> & {
   date: Temporal.PlainDate;
   disabled: boolean;
-  style: CSSProperties | undefined;
+  style: React.CSSProperties | undefined;
 }) {
   const props = React.useMemo(() => {
     const plainDateLike: Temporal.PlainDateLike = {

packages/react/src/types.ts

@@ -0,0 +1,3 @@
+export type ClampMode = "always" | "value-change" | "never";
+
+export type Locale = Intl.LocalesArgument;

packages/react/src/useCalendarValue.ts

@@ -0,0 +1,61 @@
+import { Temporal } from "@js-temporal/polyfill";
+import { clamp, getNow } from "@tempocal/core";
+import { useCallback } from "react";
+
+export function useCalendarValue({
+  clampCalendarValue,
+  maxValue,
+  minValue,
+  setCalendarValue,
+  calendarValue,
+}: {
+  clampCalendarValue: boolean;
+  maxValue: Temporal.PlainDate | Temporal.PlainDateTime | undefined;
+  minValue: Temporal.PlainDate | Temporal.PlainDateTime | undefined;
+  setCalendarValue: (value: Temporal.PlainDate) => void;
+  calendarValue: Temporal.PlainDate;
+}) {
+  const updateCalendarValue = useCallback(
+    (nextCalendarValue: Temporal.PlainDate) => {
+      if (!clampCalendarValue) {
+        setCalendarValue(nextCalendarValue);
+
+        return nextCalendarValue;
+      }
+
+      const clampedValue = clamp(
+        nextCalendarValue,
+        minValue instanceof Temporal.PlainDate
+          ? minValue
+          : minValue?.toPlainDate(),
+        maxValue instanceof Temporal.PlainDate
+          ? maxValue
+          : maxValue?.toPlainDate()
+      );
+
+      setCalendarValue(clampedValue);
+
+      return clampedValue;
+    },
+    [clampCalendarValue, maxValue, minValue, setCalendarValue]
+  );
+
+  const onChangeCalendarValue = useCallback(
+    (params?: Temporal.PlainDate | Temporal.PlainDateLike) => {
+      if (!params) {
+        return updateCalendarValue(getNow().toPlainDate());
+      }
+
+      if (params instanceof Temporal.PlainDate) {
+        return updateCalendarValue(params);
+      }
+
+      return updateCalendarValue(calendarValue.with(params));
+    },
+    [calendarValue, updateCalendarValue]
+  );
+
+  return {
+    onChangeCalendarValue,
+  };
+}