@kalyx/react 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @kalyx/react
 
+## 0.4.0
+
+### Minor Changes
+
+- 104bbf2: feat: full `displayTimezone` support across all pickers (v0.4)
+
+  All four pickers (`DatePicker`, `RangePicker`, `TimePicker`, `DateTimePicker`) and their corresponding hooks (`useDatePicker`, `useRangePicker`, `useTimePicker`) now accept a `displayTimezone` prop/option.
+
+  When set, the value stored via `onChange` is the **civil midnight of the selected day in the target timezone** (in UTC-ISO form), eliminating the classic "day off by one" bug that affects picker libraries bound to `new Date()`. Input formatting, calendar highlighting, and the time-of-day controls all follow the display timezone — including DST-aware offsets for zones like `America/New_York` and `Europe/London`.
+
+  `DateFnsAdapter` now honors the `timezone` argument on `format`, `isSameDay`, `startOfDay`, and `today` (previously declared-but-ignored). Core also exposes new helpers:
+
+  - `civilMidnightFromUtcDay(iso, tz)`
+  - `getTimeInTimezone(iso, tz)`
+  - `setTimeInTimezone(iso, partial, tz)`
+
+  No breaking changes — omitting `displayTimezone` keeps the existing UTC semantics.
+
+### Patch Changes
+
+- Updated dependencies [b3a8897]
+- Updated dependencies [104bbf2]
+  - @kalyx/core@0.4.0
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -30,6 +30,7 @@ function DatePickerRoot({
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd",
   locale = "en-US",
+  displayTimezone,
   adapter = core.DateFnsAdapter,
   labels: labelsProp,
   children
@@ -43,10 +44,10 @@ function DatePickerRoot({
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const [isOpen, setIsOpen] = react.useState(false);
   const [viewMonth, setViewMonth] = react.useState(
-    currentValue ?? adapter.today()
+    currentValue ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = react.useState(
-    currentValue ?? adapter.today()
+    currentValue ?? adapter.today(displayTimezone)
   );
   const mergedLabels = react.useMemo(
     () => ({ ...core.DEFAULT_DATEPICKER_LABELS, ...labelsProp }),
@@ -60,21 +61,22 @@ function DatePickerRoot({
   const selectDate = react.useCallback(
     (iso) => {
       if (isDisabled || readOnly) return;
+      const normalized = iso && displayTimezone ? core.civilMidnightFromUtcDay(iso, displayTimezone) : iso;
       if (!isControlled) {
-        setUncontrolledValue(iso);
+        setUncontrolledValue(normalized);
       }
-      onChange?.(iso);
+      onChange?.(normalized);
       setIsOpen(false);
     },
-    [isControlled, isDisabled, readOnly, onChange]
+    [isControlled, isDisabled, readOnly, onChange, displayTimezone]
   );
   const open = react.useCallback(() => {
     if (isDisabled || readOnly) return;
     setIsOpen(true);
-    const target = currentValue ?? adapter.today();
+    const target = currentValue ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
-  }, [isDisabled, readOnly, currentValue, adapter]);
+  }, [isDisabled, readOnly, currentValue, adapter, displayTimezone]);
   const close = react.useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -103,6 +105,7 @@ function DatePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
@@ -122,6 +125,7 @@ function DatePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
       pickerId,
@@ -138,7 +142,7 @@ var DatePickerInput = react.forwardRef(
     let formattedValue = "";
     if (ctx.value) {
       try {
-        formattedValue = ctx.adapter.format(ctx.value, displayFormat);
+        formattedValue = ctx.adapter.format(ctx.value, displayFormat, ctx.displayTimezone);
       } catch {
         formattedValue = ctx.value;
       }
@@ -386,13 +390,14 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
   const ctx = useDatePickerContext("DatePicker.Calendar");
   const gridRef = react.useRef(null);
   const [announcement, setAnnouncement] = react.useState("");
-  const { adapter, viewMonth, focusedDate, weekStartsOn, disabled, locale } = ctx;
+  const { adapter, viewMonth, focusedDate, weekStartsOn, disabled, locale, displayTimezone } = ctx;
   const weekdays = core.getWeekdayNames(locale, weekStartsOn);
   const weeks = core.getCalendarDays(viewMonth, adapter, {
     weekStartsOn,
     selected: ctx.value,
     focusedDate,
-    disabled
+    disabled,
+    timezone: displayTimezone
   });
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
@@ -808,6 +813,7 @@ function RangePickerRoot({
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd",
   locale = "en-US",
+  displayTimezone,
   adapter = core.DateFnsAdapter,
   labels: labelsProp,
   children
@@ -823,10 +829,10 @@ function RangePickerRoot({
   const [selectingTarget, setSelectingTarget] = react.useState("start");
   const [hoverDate, setHoverDate] = react.useState(null);
   const [viewMonth, setViewMonth] = react.useState(
-    currentValue.start ?? adapter.today()
+    currentValue.start ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = react.useState(
-    currentValue.start ?? adapter.today()
+    currentValue.start ?? adapter.today(displayTimezone)
   );
   const mergedLabels = react.useMemo(
     () => ({ ...core.DEFAULT_RANGEPICKER_LABELS, ...labelsProp }),
@@ -850,23 +856,24 @@ function RangePickerRoot({
   const selectDate = react.useCallback(
     (iso) => {
       if (isDisabled || readOnly) return;
+      const normalized = displayTimezone ? core.civilMidnightFromUtcDay(iso, displayTimezone) : iso;
       if (selectingTarget === "start") {
-        const newRange = { start: iso, end: null };
+        const newRange = { start: normalized, end: null };
         setRange(newRange);
         setSelectingTarget("end");
         setHoverDate(null);
       } else {
         const start = currentValue.start;
         if (!start) {
-          setRange({ start: iso, end: null });
+          setRange({ start: normalized, end: null });
           setSelectingTarget("end");
           return;
         }
         let newRange;
-        if (adapter.isBefore(iso, start)) {
-          newRange = { start: iso, end: start };
+        if (adapter.isBefore(normalized, start)) {
+          newRange = { start: normalized, end: start };
         } else {
-          newRange = { start, end: iso };
+          newRange = { start, end: normalized };
         }
         setRange(newRange);
         setSelectingTarget("start");
@@ -874,18 +881,18 @@ function RangePickerRoot({
         setIsOpen(false);
       }
     },
-    [isDisabled, readOnly, selectingTarget, currentValue.start, adapter, setRange]
+    [isDisabled, readOnly, selectingTarget, currentValue.start, adapter, setRange, displayTimezone]
   );
   const open = react.useCallback(() => {
     if (isDisabled || readOnly) return;
     setIsOpen(true);
-    const target = currentValue.start ?? adapter.today();
+    const target = currentValue.start ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
     if (currentValue.start && currentValue.end) {
       setSelectingTarget("start");
     }
-  }, [isDisabled, readOnly, currentValue, adapter]);
+  }, [isDisabled, readOnly, currentValue, adapter, displayTimezone]);
   const close = react.useCallback(() => {
     setIsOpen(false);
     setHoverDate(null);
@@ -916,6 +923,7 @@ function RangePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
@@ -938,6 +946,7 @@ function RangePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
       pickerId,
@@ -954,7 +963,7 @@ var RangePickerInput = react.forwardRef(
     let displayValue = "";
     if (value) {
       try {
-        displayValue = ctx.adapter.format(value, displayFormat);
+        displayValue = ctx.adapter.format(value, displayFormat, ctx.displayTimezone);
       } catch {
         displayValue = value;
       }
@@ -1059,7 +1068,8 @@ function RangePickerCalendar({ classNames, ...props }) {
     disabled,
     value,
     hoverDate,
-    selectingTarget
+    selectingTarget,
+    displayTimezone
   } = ctx;
   const { locale } = ctx;
   const weekdays = core.getWeekdayNames(locale, weekStartsOn);
@@ -1068,7 +1078,8 @@ function RangePickerCalendar({ classNames, ...props }) {
     focusedDate,
     disabled,
     range: value,
-    rangeHover: hoverDate
+    rangeHover: hoverDate,
+    timezone: displayTimezone
   });
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
@@ -1391,6 +1402,7 @@ function TimePickerRoot({
   format = "24h",
   step = 1,
   withSeconds = false,
+  displayTimezone,
   disabled = false,
   readOnly = false,
   labels: labelsProp,
@@ -1407,17 +1419,20 @@ function TimePickerRoot({
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const baseIso = currentValue ?? getDefaultIso();
-  const currentTime = react.useMemo(() => core.getTime(baseIso), [baseIso]);
+  const currentTime = react.useMemo(
+    () => displayTimezone ? core.getTimeInTimezone(baseIso, displayTimezone) : core.getTime(baseIso),
+    [baseIso, displayTimezone]
+  );
   const setTime = react.useCallback(
     (partial) => {
       if (disabled || readOnly) return;
-      const newIso = core.setTime(baseIso, partial);
+      const newIso = displayTimezone ? core.setTimeInTimezone(baseIso, partial, displayTimezone) : core.setTime(baseIso, partial);
       if (!isControlled) {
         setUncontrolledValue(newIso);
       }
       onChange?.(newIso);
     },
-    [disabled, readOnly, baseIso, isControlled, onChange]
+    [disabled, readOnly, baseIso, isControlled, onChange, displayTimezone]
   );
   const contextValue = react.useMemo(
     () => ({
@@ -1426,13 +1441,14 @@ function TimePickerRoot({
       format,
       step,
       withSeconds,
+      displayTimezone,
       isDisabled: disabled,
       isReadOnly: readOnly,
       currentTime,
       pickerId,
       labels: mergedLabels
     }),
-    [currentValue, setTime, format, step, withSeconds, disabled, readOnly, currentTime, pickerId, mergedLabels]
+    [currentValue, setTime, format, step, withSeconds, displayTimezone, disabled, readOnly, currentTime, pickerId, mergedLabels]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TimePickerContext.Provider, { value: contextValue, children });
 }
@@ -1693,6 +1709,7 @@ function DateTimePickerRoot({
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd HH:mm",
   locale = "en-US",
+  displayTimezone,
   adapter = core.DateFnsAdapter,
   labels: labelsProp,
   children
@@ -1714,10 +1731,10 @@ function DateTimePickerRoot({
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const [isOpen, setIsOpen] = react.useState(false);
   const [viewMonth, setViewMonth] = react.useState(
-    currentValue ?? adapter.today()
+    currentValue ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = react.useState(
-    currentValue ?? adapter.today()
+    currentValue ?? adapter.today(displayTimezone)
   );
   const isDisabled = typeof disabled === "boolean" ? disabled : false;
   const disabledRules = react.useMemo(
@@ -1725,7 +1742,10 @@ function DateTimePickerRoot({
     [disabled]
   );
   const baseIso = currentValue ?? getDefaultIso2();
-  const currentTime = react.useMemo(() => core.getTime(baseIso), [baseIso]);
+  const currentTime = react.useMemo(
+    () => displayTimezone ? core.getTimeInTimezone(baseIso, displayTimezone) : core.getTime(baseIso),
+    [baseIso, displayTimezone]
+  );
   const updateValue = react.useCallback(
     (next) => {
       if (isDisabled || readOnly) return;
@@ -1742,27 +1762,28 @@ function DateTimePickerRoot({
         updateValue(null);
         return;
       }
-      const time = currentValue ? core.getTime(currentValue) : currentTime;
-      const merged = core.setTime(newDateIso, time);
+      const normalizedDate = displayTimezone ? core.civilMidnightFromUtcDay(newDateIso, displayTimezone) : newDateIso;
+      const time = currentValue ? displayTimezone ? core.getTimeInTimezone(currentValue, displayTimezone) : core.getTime(currentValue) : currentTime;
+      const merged = displayTimezone ? core.setTimeInTimezone(normalizedDate, time, displayTimezone) : core.setTime(normalizedDate, time);
       updateValue(merged);
     },
-    [currentValue, currentTime, updateValue]
+    [currentValue, currentTime, updateValue, displayTimezone]
   );
   const setTime = react.useCallback(
     (partial) => {
       const base = currentValue ?? getDefaultIso2();
-      const merged = core.setTime(base, partial);
+      const merged = displayTimezone ? core.setTimeInTimezone(base, partial, displayTimezone) : core.setTime(base, partial);
       updateValue(merged);
     },
-    [currentValue, updateValue]
+    [currentValue, updateValue, displayTimezone]
   );
   const open = react.useCallback(() => {
     if (isDisabled || readOnly) return;
     setIsOpen(true);
-    const target = currentValue ?? adapter.today();
+    const target = currentValue ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
-  }, [isDisabled, readOnly, currentValue, adapter]);
+  }, [isDisabled, readOnly, currentValue, adapter, displayTimezone]);
   const close = react.useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -1788,6 +1809,7 @@ function DateTimePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
@@ -1807,6 +1829,7 @@ function DateTimePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
       pickerId,
@@ -1820,13 +1843,14 @@ function DateTimePickerRoot({
       format,
       step,
       withSeconds: false,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       currentTime,
       pickerId,
       labels: mergedTimeLabels
     }),
-    [currentValue, setTime, format, step, isDisabled, readOnly, currentTime, pickerId, mergedTimeLabels]
+    [currentValue, setTime, format, step, displayTimezone, isDisabled, readOnly, currentTime, pickerId, mergedTimeLabels]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DatePickerContext.Provider, { value: dateContext, children: /* @__PURE__ */ jsxRuntime.jsx(TimePickerContext.Provider, { value: timeContext, children }) });
 }
@@ -1836,7 +1860,9 @@ var DateTimePickerInput = react.forwardRef(
     let displayValue = "";
     if (ctx.value) {
       try {
-        displayValue = `${ctx.adapter.format(ctx.value, "yyyy-MM-dd")} ${core.formatTimeString(core.getTime(ctx.value))}`;
+        const datePart = ctx.adapter.format(ctx.value, "yyyy-MM-dd", ctx.displayTimezone);
+        const time = ctx.displayTimezone ? core.getTimeInTimezone(ctx.value, ctx.displayTimezone) : core.getTime(ctx.value);
+        displayValue = `${datePart} ${core.formatTimeString(time)}`;
       } catch {
         displayValue = ctx.value;
       }
@@ -1906,7 +1932,8 @@ function useDatePicker(options = {}) {
     onChange,
     disabled = [],
     weekStartsOn = 0,
-    adapter = core.DateFnsAdapter
+    adapter = core.DateFnsAdapter,
+    displayTimezone
   } = options;
   const pickerId = react.useId();
   const isControlled = react.useRef(controlledValue !== void 0).current;
@@ -1915,24 +1942,29 @@ function useDatePicker(options = {}) {
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const [isOpen, setIsOpen] = react.useState(false);
-  const [viewMonth, setViewMonth] = react.useState(currentValue ?? adapter.today());
-  const [focusedDate, setFocusedDate] = react.useState(currentValue ?? adapter.today());
+  const [viewMonth, setViewMonth] = react.useState(
+    currentValue ?? adapter.today(displayTimezone)
+  );
+  const [focusedDate, setFocusedDate] = react.useState(
+    currentValue ?? adapter.today(displayTimezone)
+  );
   const selectDate = react.useCallback(
     (iso) => {
+      const normalized = iso && displayTimezone ? core.civilMidnightFromUtcDay(iso, displayTimezone) : iso;
       if (!isControlled) {
-        setUncontrolledValue(iso);
+        setUncontrolledValue(normalized);
       }
-      onChange?.(iso);
+      onChange?.(normalized);
       setIsOpen(false);
     },
-    [isControlled, onChange]
+    [isControlled, onChange, displayTimezone]
   );
   const open = react.useCallback(() => {
     setIsOpen(true);
-    const target = currentValue ?? adapter.today();
+    const target = currentValue ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
-  }, [currentValue, adapter]);
+  }, [currentValue, adapter, displayTimezone]);
   const close = react.useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -1954,7 +1986,8 @@ function useDatePicker(options = {}) {
     weekStartsOn,
     selected: currentValue,
     focusedDate,
-    disabled
+    disabled,
+    timezone: displayTimezone
   });
   return {
     value: currentValue,
@@ -1982,7 +2015,8 @@ function useRangePicker(options = {}) {
     onChange,
     disabled = [],
     weekStartsOn = 0,
-    adapter = core.DateFnsAdapter
+    adapter = core.DateFnsAdapter,
+    displayTimezone
   } = options;
   const pickerId = react.useId();
   const isControlled = react.useRef(controlledValue !== void 0).current;
@@ -1994,10 +2028,10 @@ function useRangePicker(options = {}) {
   const [selectingTarget, setSelectingTarget] = react.useState("start");
   const [hoverDate, setHoverDate] = react.useState(null);
   const [viewMonth, setViewMonth] = react.useState(
-    currentValue.start ?? adapter.today()
+    currentValue.start ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = react.useState(
-    currentValue.start ?? adapter.today()
+    currentValue.start ?? adapter.today(displayTimezone)
   );
   const setRange = react.useCallback(
     (range) => {
@@ -2010,35 +2044,36 @@ function useRangePicker(options = {}) {
   );
   const selectDate = react.useCallback(
     (iso) => {
+      const normalized = displayTimezone ? core.civilMidnightFromUtcDay(iso, displayTimezone) : iso;
       if (selectingTarget === "start") {
-        setRange({ start: iso, end: null });
+        setRange({ start: normalized, end: null });
         setSelectingTarget("end");
         setHoverDate(null);
       } else {
         const start = currentValue.start;
         if (!start) {
-          setRange({ start: iso, end: null });
+          setRange({ start: normalized, end: null });
           setSelectingTarget("end");
           return;
         }
-        const newRange = adapter.isBefore(iso, start) ? { start: iso, end: start } : { start, end: iso };
+        const newRange = adapter.isBefore(normalized, start) ? { start: normalized, end: start } : { start, end: normalized };
         setRange(newRange);
         setSelectingTarget("start");
         setHoverDate(null);
         setIsOpen(false);
       }
     },
-    [selectingTarget, currentValue.start, adapter, setRange]
+    [selectingTarget, currentValue.start, adapter, setRange, displayTimezone]
   );
   const open = react.useCallback(() => {
     setIsOpen(true);
-    const target = currentValue.start ?? adapter.today();
+    const target = currentValue.start ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
     if (currentValue.start && currentValue.end) {
       setSelectingTarget("start");
     }
-  }, [currentValue, adapter]);
+  }, [currentValue, adapter, displayTimezone]);
   const close = react.useCallback(() => {
     setIsOpen(false);
     setHoverDate(null);
@@ -2062,7 +2097,8 @@ function useRangePicker(options = {}) {
     focusedDate,
     disabled,
     range: currentValue,
-    rangeHover: hoverDate
+    rangeHover: hoverDate,
+    timezone: displayTimezone
   });
   return {
     value: currentValue,
@@ -2095,7 +2131,8 @@ function useTimePicker(options = {}) {
     defaultValue,
     onChange,
     format = "24h",
-    step = 1
+    step = 1,
+    displayTimezone
   } = options;
   const pickerId = react.useId();
   const isControlled = react.useRef(controlledValue !== void 0).current;
@@ -2104,16 +2141,19 @@ function useTimePicker(options = {}) {
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const baseIso = currentValue ?? getDefaultIso3();
-  const currentTime = react.useMemo(() => core.getTime(baseIso), [baseIso]);
+  const currentTime = react.useMemo(
+    () => displayTimezone ? core.getTimeInTimezone(baseIso, displayTimezone) : core.getTime(baseIso),
+    [baseIso, displayTimezone]
+  );
   const setTime = react.useCallback(
     (partial) => {
-      const newIso = core.setTime(baseIso, partial);
+      const newIso = displayTimezone ? core.setTimeInTimezone(baseIso, partial, displayTimezone) : core.setTime(baseIso, partial);
       if (!isControlled) {
         setUncontrolledValue(newIso);
       }
       onChange?.(newIso);
     },
-    [baseIso, isControlled, onChange]
+    [baseIso, isControlled, onChange, displayTimezone]
   );
   const period = format === "12h" ? core.to12Hour(currentTime.hours).period : null;
   const displayHour = format === "12h" ? core.to12Hour(currentTime.hours).hours12 : currentTime.hours;