@kalyx/react 0.2.2 → 0.4.0

package/dist/index.cjs

@@ -30,7 +30,9 @@ function DatePickerRoot({
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd",
   locale = "en-US",
+  displayTimezone,
   adapter = core.DateFnsAdapter,
+  labels: labelsProp,
   children
 }) {
   const pickerId = react.useId();
@@ -42,31 +44,39 @@ 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 }),
+    [labelsProp]
   );
   const isDisabled = typeof disabled === "boolean" ? disabled : false;
-  const disabledRules = Array.isArray(disabled) ? disabled : [];
+  const disabledRules = react.useMemo(
+    () => Array.isArray(disabled) ? disabled : [],
+    [disabled]
+  );
   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);
   }, []);
@@ -95,9 +105,11 @@ function DatePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
-      pickerId
+      pickerId,
+      labels: mergedLabels
     }),
     [
       currentValue,
@@ -113,30 +125,40 @@ function DatePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
-      pickerId
+      pickerId,
+      mergedLabels
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DatePickerContext.Provider, { value: contextValue, children });
 }
 var DatePickerInput = react.forwardRef(
-  function DatePickerInput2({ format: formatProp, onFocus, onBlur, onKeyDown, ...props }, ref) {
+  function DatePickerInput2({ format: formatProp, onClick, onBlur, onKeyDown, ...props }, ref) {
     const ctx = useDatePickerContext("DatePicker.Input");
     const displayFormat = formatProp ?? ctx.displayFormat;
     const [inputText, setInputText] = react.useState(null);
-    const displayValue = inputText !== null ? inputText : ctx.value ? ctx.adapter.format(ctx.value, displayFormat) : "";
-    const handleFocus = react.useCallback(
+    let formattedValue = "";
+    if (ctx.value) {
+      try {
+        formattedValue = ctx.adapter.format(ctx.value, displayFormat, ctx.displayTimezone);
+      } catch {
+        formattedValue = ctx.value;
+      }
+    }
+    const displayValue = inputText !== null ? inputText : formattedValue;
+    const handleClick = react.useCallback(
       (e) => {
-        ctx.open();
-        onFocus?.(e);
+        if (!ctx.isOpen) ctx.open();
+        onClick?.(e);
       },
-      [ctx, onFocus]
+      [ctx, onClick]
     );
     const handleBlur = react.useCallback(
       (e) => {
         if (inputText !== null) {
-          const parsed = core.parseInputValue(inputText, displayFormat, ctx.adapter);
+          const parsed = core.parseInputValue(inputText, ctx.adapter);
           if (parsed) {
             ctx.selectDate(parsed);
           }
@@ -155,7 +177,7 @@ var DatePickerInput = react.forwardRef(
           setInputText(null);
           return;
         }
-        const parsed = core.parseInputValue(text, displayFormat, ctx.adapter);
+        const parsed = core.parseInputValue(text, ctx.adapter);
         if (parsed) {
           ctx.selectDate(parsed);
           setInputText(null);
@@ -169,7 +191,7 @@ var DatePickerInput = react.forwardRef(
           ctx.close();
         } else if (e.key === "Enter") {
           if (inputText !== null) {
-            const parsed = core.parseInputValue(inputText, displayFormat, ctx.adapter);
+            const parsed = core.parseInputValue(inputText, ctx.adapter);
             if (parsed) {
               ctx.selectDate(parsed);
               setInputText(null);
@@ -203,7 +225,7 @@ var DatePickerInput = react.forwardRef(
         disabled: ctx.isDisabled || props.disabled,
         readOnly: ctx.isReadOnly,
         onChange: handleChange,
-        onFocus: handleFocus,
+        onClick: handleClick,
         onBlur: handleBlur,
         onKeyDown: handleKeyDown,
         ...props
@@ -232,7 +254,7 @@ var DatePickerTrigger = react.forwardRef(
         },
         type: "button",
         tabIndex: 0,
-        "aria-label": ctx.isOpen ? "\uCE98\uB9B0\uB354 \uB2EB\uAE30" : "\uCE98\uB9B0\uB354 \uC5F4\uAE30",
+        "aria-label": ctx.isOpen ? ctx.labels.triggerClose : ctx.labels.triggerOpen,
         "aria-expanded": ctx.isOpen,
         "aria-controls": ctx.isOpen ? calendarId : void 0,
         disabled: ctx.isDisabled || props.disabled,
@@ -264,38 +286,39 @@ var DatePickerTrigger = react.forwardRef(
     );
   }
 );
-function DatePickerPopover({ children, ...props }) {
-  const ctx = useDatePickerContext("DatePicker.Popover");
-  const calendarId = `${ctx.pickerId}-calendar`;
+function usePopover({ isOpen, close, referenceRef, placement = "bottom-start" }) {
   const floatingRef = react.useRef(null);
+  const previousFocusRef = react.useRef(null);
   const { refs, floatingStyles } = react$1.useFloating({
-    open: ctx.isOpen,
-    placement: "bottom-start",
+    open: isOpen,
+    placement,
     middleware: [react$1.offset(4), react$1.flip(), react$1.shift({ padding: 8 })],
     whileElementsMounted: react$1.autoUpdate
   });
   react.useEffect(() => {
-    if (ctx.referenceRef.current) {
-      refs.setReference(ctx.referenceRef.current);
+    if (referenceRef.current) {
+      refs.setReference(referenceRef.current);
     }
-  }, [ctx.referenceRef, refs, ctx.isOpen]);
-  const previousFocusRef = react.useRef(null);
+  }, [referenceRef, refs, isOpen]);
   react.useEffect(() => {
-    if (ctx.isOpen) {
+    if (isOpen) {
       previousFocusRef.current = document.activeElement;
     } else if (previousFocusRef.current) {
-      previousFocusRef.current.focus();
+      const el = previousFocusRef.current;
       previousFocusRef.current = null;
+      if (el !== referenceRef.current && typeof el.focus === "function") {
+        el.focus({ preventScroll: true });
+      }
     }
-  }, [ctx.isOpen]);
+  }, [isOpen, referenceRef]);
   react.useEffect(() => {
-    if (!ctx.isOpen) return;
+    if (!isOpen) return;
     function handleClickOutside(e) {
       const floating = floatingRef.current;
-      const reference = ctx.referenceRef.current;
+      const reference = referenceRef.current;
       const target = e.target;
       if (floating && !floating.contains(target) && (!reference || !reference.contains(target))) {
-        ctx.close();
+        close();
       }
     }
     const timer = setTimeout(() => {
@@ -305,28 +328,39 @@ function DatePickerPopover({ children, ...props }) {
       clearTimeout(timer);
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [ctx.isOpen, ctx]);
+  }, [isOpen, close, referenceRef]);
   react.useEffect(() => {
-    if (!ctx.isOpen) return;
+    if (!isOpen) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") {
-        ctx.close();
+        close();
       }
     }
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [ctx.isOpen, ctx]);
+  }, [isOpen, close]);
+  const setFloatingRef = (node) => {
+    floatingRef.current = node;
+    refs.setFloating(node);
+  };
+  return { floatingStyles, setFloatingRef };
+}
+function DatePickerPopover({ children, ...props }) {
+  const ctx = useDatePickerContext("DatePicker.Popover");
+  const calendarId = `${ctx.pickerId}-calendar`;
+  const { floatingStyles, setFloatingRef } = usePopover({
+    isOpen: ctx.isOpen,
+    close: ctx.close,
+    referenceRef: ctx.referenceRef
+  });
   if (!ctx.isOpen) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref: (node) => {
-        floatingRef.current = node;
-        refs.setFloating(node);
-      },
+      ref: setFloatingRef,
       id: calendarId,
       role: "dialog",
-      "aria-label": "\uB0A0\uC9DC \uC120\uD0DD",
+      "aria-label": ctx.labels.popoverLabel,
       "aria-modal": "false",
       style: floatingStyles,
       ...props,
@@ -334,6 +368,13 @@ function DatePickerPopover({ children, ...props }) {
     }
   );
 }
+function safeFormatFullDate(iso, locale) {
+  try {
+    return core.formatFullDate(iso, locale);
+  } catch {
+    return iso;
+  }
+}
 var srOnly = {
   position: "absolute",
   width: "1px",
@@ -349,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);
@@ -365,7 +407,7 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
     const focusedButton = gridRef.current.querySelector(
       '[data-focused="true"]'
     );
-    focusedButton?.focus();
+    focusedButton?.focus({ preventScroll: true });
   }, [focusedDate, ctx.isOpen]);
   const navigateMonth = react.useCallback(
     (direction) => {
@@ -382,7 +424,7 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
     (day) => {
       if (day.isDisabled) return;
       ctx.selectDate(day.isoString);
-      setAnnouncement(core.formatFullDate(day.isoString, locale));
+      setAnnouncement(safeFormatFullDate(day.isoString, locale));
     },
     [ctx, locale]
   );
@@ -454,7 +496,7 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
           type: "button",
           className: classNames?.navButton,
           onClick: () => navigateMonth(-1),
-          "aria-label": "\uC774\uC804 \uB2EC",
+          "aria-label": ctx.labels.prevMonth,
           children: "<"
         }
       ),
@@ -474,7 +516,7 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
           type: "button",
           className: classNames?.navButton,
           onClick: () => navigateMonth(1),
-          "aria-label": "\uB2E4\uC74C \uB2EC",
+          "aria-label": ctx.labels.nextMonth,
           children: ">"
         }
       )
@@ -527,7 +569,7 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
                     "data-outside-month": !day.isCurrentMonth || void 0,
                     className: dayClasses,
                     onClick: () => handleDayClick(day),
-                    "aria-label": core.formatFullDate(day.isoString, locale),
+                    "aria-label": safeFormatFullDate(day.isoString, locale),
                     children: day.dayNumber
                   }
                 )
@@ -583,7 +625,7 @@ function DatePickerMonthGrid({
           type: "button",
           className: classNames?.navButton,
           onClick: () => navigateYear(-1),
-          "aria-label": "\uC774\uC804 \uB144",
+          "aria-label": ctx.labels.prevYear,
           children: "<"
         }
       ),
@@ -602,7 +644,7 @@ function DatePickerMonthGrid({
           type: "button",
           className: classNames?.navButton,
           onClick: () => navigateYear(1),
-          "aria-label": "\uB2E4\uC74C \uB144",
+          "aria-label": ctx.labels.nextYear,
           children: ">"
         }
       )
@@ -687,7 +729,7 @@ function DatePickerYearGrid({
           type: "button",
           className: classNames?.navButton,
           onClick: () => navigateDecade(-1),
-          "aria-label": "\uC774\uC804 12\uB144",
+          "aria-label": ctx.labels.prevDecade,
           children: "<"
         }
       ),
@@ -698,7 +740,7 @@ function DatePickerYearGrid({
           type: "button",
           className: classNames?.navButton,
           onClick: () => navigateDecade(1),
-          "aria-label": "\uB2E4\uC74C 12\uB144",
+          "aria-label": ctx.labels.nextDecade,
           children: ">"
         }
       )
@@ -771,7 +813,9 @@ function RangePickerRoot({
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd",
   locale = "en-US",
+  displayTimezone,
   adapter = core.DateFnsAdapter,
+  labels: labelsProp,
   children
 }) {
   const pickerId = react.useId();
@@ -785,13 +829,20 @@ 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 }),
+    [labelsProp]
   );
   const isDisabled = typeof disabled === "boolean" ? disabled : false;
-  const disabledRules = Array.isArray(disabled) ? disabled : [];
+  const disabledRules = react.useMemo(
+    () => Array.isArray(disabled) ? disabled : [],
+    [disabled]
+  );
   const setRange = react.useCallback(
     (range) => {
       if (isDisabled || readOnly) return;
@@ -805,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");
@@ -829,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);
@@ -871,9 +923,11 @@ function RangePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
-      pickerId
+      pickerId,
+      labels: mergedLabels
     }),
     [
       currentValue,
@@ -892,25 +946,34 @@ function RangePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
-      pickerId
+      pickerId,
+      mergedLabels
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(RangePickerContext.Provider, { value: contextValue, children });
 }
 var RangePickerInput = react.forwardRef(
-  function RangePickerInput2({ part, format: formatProp, onFocus, onKeyDown, ...props }, ref) {
+  function RangePickerInput2({ part, format: formatProp, onClick, onKeyDown, ...props }, ref) {
     const ctx = useRangePickerContext("RangePicker.Input");
     const displayFormat = formatProp ?? ctx.displayFormat;
     const value = ctx.value[part];
-    const displayValue = value ? ctx.adapter.format(value, displayFormat) : "";
-    const handleFocus = react.useCallback(
+    let displayValue = "";
+    if (value) {
+      try {
+        displayValue = ctx.adapter.format(value, displayFormat, ctx.displayTimezone);
+      } catch {
+        displayValue = value;
+      }
+    }
+    const handleClick = react.useCallback(
       (e) => {
-        ctx.open();
-        onFocus?.(e);
+        if (!ctx.isOpen) ctx.open();
+        onClick?.(e);
       },
-      [ctx, onFocus]
+      [ctx, onClick]
     );
     const handleKeyDown = react.useCallback(
       (e) => {
@@ -940,11 +1003,11 @@ var RangePickerInput = react.forwardRef(
         "aria-haspopup": "dialog",
         "aria-controls": ctx.isOpen ? calendarId : void 0,
         "aria-autocomplete": "none",
-        "aria-label": part === "start" ? "\uC2DC\uC791\uC77C" : "\uC885\uB8CC\uC77C",
+        "aria-label": part === "start" ? ctx.labels.startInput : ctx.labels.endInput,
         autoComplete: "off",
         value: displayValue,
         disabled: ctx.isDisabled || props.disabled,
-        onFocus: handleFocus,
+        onClick: handleClick,
         onKeyDown: handleKeyDown,
         "data-part": part,
         ...props
@@ -955,66 +1018,19 @@ var RangePickerInput = react.forwardRef(
 function RangePickerPopover({ children, ...props }) {
   const ctx = useRangePickerContext("RangePicker.Popover");
   const calendarId = `${ctx.pickerId}-calendar`;
-  const floatingRef = react.useRef(null);
-  const { refs, floatingStyles } = react$1.useFloating({
-    open: ctx.isOpen,
-    placement: "bottom-start",
-    middleware: [react$1.offset(4), react$1.flip(), react$1.shift({ padding: 8 })],
-    whileElementsMounted: react$1.autoUpdate
+  const { floatingStyles, setFloatingRef } = usePopover({
+    isOpen: ctx.isOpen,
+    close: ctx.close,
+    referenceRef: ctx.referenceRef
   });
-  react.useEffect(() => {
-    if (ctx.referenceRef.current) {
-      refs.setReference(ctx.referenceRef.current);
-    }
-  }, [ctx.referenceRef, refs, ctx.isOpen]);
-  const previousFocusRef = react.useRef(null);
-  react.useEffect(() => {
-    if (ctx.isOpen) {
-      previousFocusRef.current = document.activeElement;
-    } else if (previousFocusRef.current) {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [ctx.isOpen]);
-  react.useEffect(() => {
-    if (!ctx.isOpen) return;
-    function handleClickOutside(e) {
-      const floating = floatingRef.current;
-      const reference = ctx.referenceRef.current;
-      const target = e.target;
-      if (floating && !floating.contains(target) && (!reference || !reference.contains(target))) {
-        ctx.close();
-      }
-    }
-    const timer = setTimeout(() => {
-      document.addEventListener("mousedown", handleClickOutside);
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [ctx.isOpen, ctx]);
-  react.useEffect(() => {
-    if (!ctx.isOpen) return;
-    function handleKeyDown(e) {
-      if (e.key === "Escape") {
-        ctx.close();
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [ctx.isOpen, ctx]);
   if (!ctx.isOpen) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref: (node) => {
-        floatingRef.current = node;
-        refs.setFloating(node);
-      },
+      ref: setFloatingRef,
       id: calendarId,
       role: "dialog",
-      "aria-label": "\uB0A0\uC9DC \uBC94\uC704 \uC120\uD0DD",
+      "aria-label": ctx.labels.popoverLabel,
       "aria-modal": "false",
       style: floatingStyles,
       ...props,
@@ -1022,6 +1038,13 @@ function RangePickerPopover({ children, ...props }) {
     }
   );
 }
+function safeFormatFullDate2(iso, locale) {
+  try {
+    return core.formatFullDate(iso, locale);
+  } catch {
+    return iso;
+  }
+}
 var srOnly2 = {
   position: "absolute",
   width: "1px",
@@ -1045,7 +1068,8 @@ function RangePickerCalendar({ classNames, ...props }) {
     disabled,
     value,
     hoverDate,
-    selectingTarget
+    selectingTarget,
+    displayTimezone
   } = ctx;
   const { locale } = ctx;
   const weekdays = core.getWeekdayNames(locale, weekStartsOn);
@@ -1054,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);
@@ -1064,7 +1089,7 @@ function RangePickerCalendar({ classNames, ...props }) {
     const focusedButton = gridRef.current.querySelector(
       '[data-focused="true"]'
     );
-    focusedButton?.focus();
+    focusedButton?.focus({ preventScroll: true });
   }, [focusedDate, ctx.isOpen]);
   const navigateMonth = react.useCallback(
     (direction) => {
@@ -1081,7 +1106,7 @@ function RangePickerCalendar({ classNames, ...props }) {
     (day) => {
       if (day.isDisabled) return;
       ctx.selectDate(day.isoString);
-      setAnnouncement(core.formatFullDate(day.isoString, locale));
+      setAnnouncement(safeFormatFullDate2(day.isoString, locale));
     },
     [ctx, locale]
   );
@@ -1158,7 +1183,7 @@ function RangePickerCalendar({ classNames, ...props }) {
           type: "button",
           className: classNames?.navButton,
           onClick: () => navigateMonth(-1),
-          "aria-label": "\uC774\uC804 \uB2EC",
+          "aria-label": ctx.labels.prevMonth,
           children: "<"
         }
       ),
@@ -1169,7 +1194,7 @@ function RangePickerCalendar({ classNames, ...props }) {
           type: "button",
           className: classNames?.navButton,
           onClick: () => navigateMonth(1),
-          "aria-label": "\uB2E4\uC74C \uB2EC",
+          "aria-label": ctx.labels.nextMonth,
           children: ">"
         }
       )
@@ -1229,7 +1254,7 @@ function RangePickerCalendar({ classNames, ...props }) {
                     className: dayClasses,
                     onClick: () => handleDayClick(day),
                     onMouseEnter: () => handleDayMouseEnter(day),
-                    "aria-label": core.formatFullDate(day.isoString, locale),
+                    "aria-label": safeFormatFullDate2(day.isoString, locale),
                     children: day.dayNumber
                   }
                 )
@@ -1244,7 +1269,8 @@ function RangePickerCalendar({ classNames, ...props }) {
   ] });
 }
 function RangePickerPresets({ classNames, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", "aria-label": "\uB0A0\uC9DC \uBC94\uC704 \uD504\uB9AC\uC14B", className: classNames?.root, ...props, children });
+  const ctx = useRangePickerContext("RangePicker.Presets");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", "aria-label": ctx.labels.presetsGroup, className: classNames?.root, ...props, children });
 }
 function resolvePreset(key, today, adapter) {
   switch (key) {
@@ -1283,8 +1309,9 @@ function resolvePreset(key, today, adapter) {
       };
     }
     case "thisYear": {
+      const currentMonth = new Date(today).getUTCMonth();
       const yearStart = adapter.startOfMonth(
-        adapter.addMonths(today, -new Date(today).getUTCMonth())
+        adapter.addMonths(today, -currentMonth)
       );
       return { start: yearStart, end: today };
     }
@@ -1366,10 +1393,7 @@ function useTimePickerContext(componentName) {
   return context;
 }
 function getDefaultIso() {
-  const now = /* @__PURE__ */ new Date();
-  return new Date(
-    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
-  ).toISOString();
+  return core.DateFnsAdapter.today();
 }
 function TimePickerRoot({
   value: controlledValue,
@@ -1378,28 +1402,37 @@ function TimePickerRoot({
   format = "24h",
   step = 1,
   withSeconds = false,
+  displayTimezone,
   disabled = false,
   readOnly = false,
+  labels: labelsProp,
   children
 }) {
   const pickerId = react.useId();
+  const mergedLabels = react.useMemo(
+    () => ({ ...core.DEFAULT_TIMEPICKER_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
   const isControlled = react.useRef(controlledValue !== void 0).current;
   const [uncontrolledValue, setUncontrolledValue] = react.useState(
     defaultValue ?? null
   );
   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(
     () => ({
@@ -1408,12 +1441,14 @@ function TimePickerRoot({
       format,
       step,
       withSeconds,
+      displayTimezone,
       isDisabled: disabled,
       isReadOnly: readOnly,
       currentTime,
-      pickerId
+      pickerId,
+      labels: mergedLabels
     }),
-    [currentValue, setTime, format, step, withSeconds, disabled, readOnly, currentTime, pickerId]
+    [currentValue, setTime, format, step, withSeconds, displayTimezone, disabled, readOnly, currentTime, pickerId, mergedLabels]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TimePickerContext.Provider, { value: contextValue, children });
 }
@@ -1459,7 +1494,7 @@ var TimePickerInput = react.forwardRef(
         type: "text",
         inputMode: "numeric",
         autoComplete: "off",
-        "aria-label": "\uC2DC\uAC04 \uC785\uB825",
+        "aria-label": ctx.labels.timeInput,
         placeholder: ctx.withSeconds ? "HH:MM:SS" : "HH:MM",
         value: displayValue,
         disabled: ctx.isDisabled || props.disabled,
@@ -1472,46 +1507,42 @@ var TimePickerInput = react.forwardRef(
     );
   }
 );
-function TimePickerHourList({ classNames, ...props }) {
-  const ctx = useTimePickerContext("TimePicker.HourList");
-  const { format, currentTime, isDisabled, isReadOnly } = ctx;
+function useListboxNavigation({
+  items,
+  onSelect,
+  disabled = false
+}) {
   const listRef = react.useRef(null);
-  const hours = core.generateHours(format);
-  const selectedHourDisplay = format === "12h" ? core.to12Hour(currentTime.hours).hours12 : currentTime.hours;
-  const currentPeriod = format === "12h" ? core.to12Hour(currentTime.hours).period : null;
-  const handleSelect = react.useCallback(
-    (hourDisplay) => {
-      if (isDisabled || isReadOnly) return;
-      const hours24 = format === "12h" && currentPeriod ? core.to24Hour(hourDisplay, currentPeriod) : hourDisplay;
-      ctx.setTime({ hours: hours24 });
-    },
-    [format, currentPeriod, ctx, isDisabled, isReadOnly]
-  );
+  const rafIdRef = react.useRef(0);
+  react.useEffect(() => {
+    return () => cancelAnimationFrame(rafIdRef.current);
+  }, []);
   const handleKeyDown = react.useCallback(
-    (e, hour) => {
-      if (isDisabled || isReadOnly) return;
-      const currentIndex = hours.indexOf(hour);
+    (e, item) => {
+      if (disabled) return;
+      const currentIndex = items.indexOf(item);
       let newIndex = -1;
       if (e.key === "ArrowDown") {
-        newIndex = Math.min(currentIndex + 1, hours.length - 1);
+        newIndex = Math.min(currentIndex + 1, items.length - 1);
       } else if (e.key === "ArrowUp") {
         newIndex = Math.max(currentIndex - 1, 0);
       } else if (e.key === "Home") {
         newIndex = 0;
       } else if (e.key === "End") {
-        newIndex = hours.length - 1;
+        newIndex = items.length - 1;
       } else if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        handleSelect(hour);
+        onSelect(item);
         return;
       } else {
         return;
       }
       e.preventDefault();
-      const targetHour = hours[newIndex];
-      if (targetHour !== void 0) {
-        handleSelect(targetHour);
-        requestAnimationFrame(() => {
+      const target = items[newIndex];
+      if (target !== void 0) {
+        onSelect(target);
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = requestAnimationFrame(() => {
           const next = listRef.current?.querySelector(
             '[data-selected="true"]'
           );
@@ -1519,14 +1550,35 @@ function TimePickerHourList({ classNames, ...props }) {
         });
       }
     },
-    [hours, handleSelect, isDisabled, isReadOnly]
+    [items, onSelect, disabled]
+  );
+  return { listRef, handleKeyDown };
+}
+function TimePickerHourList({ classNames, ...props }) {
+  const ctx = useTimePickerContext("TimePicker.HourList");
+  const { format, currentTime, isDisabled, isReadOnly } = ctx;
+  const hours = core.generateHours(format);
+  const selectedHourDisplay = format === "12h" ? core.to12Hour(currentTime.hours).hours12 : currentTime.hours;
+  const currentPeriod = format === "12h" ? core.to12Hour(currentTime.hours).period : null;
+  const handleSelect = react.useCallback(
+    (hourDisplay) => {
+      if (isDisabled || isReadOnly) return;
+      const hours24 = format === "12h" && currentPeriod ? core.to24Hour(hourDisplay, currentPeriod) : hourDisplay;
+      ctx.setTime({ hours: hours24 });
+    },
+    [format, currentPeriod, ctx, isDisabled, isReadOnly]
   );
+  const { listRef, handleKeyDown } = useListboxNavigation({
+    items: hours,
+    onSelect: handleSelect,
+    disabled: isDisabled || isReadOnly
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
     {
       ref: listRef,
       role: "listbox",
-      "aria-label": "\uC2DC",
+      "aria-label": ctx.labels.hourList,
       "aria-disabled": isDisabled || void 0,
       className: classNames?.root,
       ...props,
@@ -1539,7 +1591,7 @@ function TimePickerHourList({ classNames, ...props }) {
             role: "option",
             "aria-selected": isSelected,
             "aria-disabled": isDisabled || void 0,
-            "aria-label": `${hour}\uC2DC`,
+            "aria-label": ctx.labels.hourOption(hour),
             "data-selected": isSelected || void 0,
             tabIndex: isSelected ? 0 : -1,
             className: optionClass,
@@ -1556,7 +1608,6 @@ function TimePickerHourList({ classNames, ...props }) {
 function TimePickerMinuteList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.MinuteList");
   const { step, currentTime, isDisabled, isReadOnly } = ctx;
-  const listRef = react.useRef(null);
   const minutes = core.generateMinutes(step);
   const handleSelect = react.useCallback(
     (minute) => {
@@ -1565,46 +1616,17 @@ function TimePickerMinuteList({ classNames, ...props }) {
     },
     [ctx, isDisabled, isReadOnly]
   );
-  const handleKeyDown = react.useCallback(
-    (e, minute) => {
-      if (isDisabled || isReadOnly) return;
-      const currentIndex = minutes.indexOf(minute);
-      let newIndex = -1;
-      if (e.key === "ArrowDown") {
-        newIndex = Math.min(currentIndex + 1, minutes.length - 1);
-      } else if (e.key === "ArrowUp") {
-        newIndex = Math.max(currentIndex - 1, 0);
-      } else if (e.key === "Home") {
-        newIndex = 0;
-      } else if (e.key === "End") {
-        newIndex = minutes.length - 1;
-      } else if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        handleSelect(minute);
-        return;
-      } else {
-        return;
-      }
-      e.preventDefault();
-      const target = minutes[newIndex];
-      if (target !== void 0) {
-        handleSelect(target);
-        requestAnimationFrame(() => {
-          const next = listRef.current?.querySelector(
-            '[data-selected="true"]'
-          );
-          next?.focus();
-        });
-      }
-    },
-    [minutes, handleSelect, isDisabled, isReadOnly]
-  );
+  const { listRef, handleKeyDown } = useListboxNavigation({
+    items: minutes,
+    onSelect: handleSelect,
+    disabled: isDisabled || isReadOnly
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
     {
       ref: listRef,
       role: "listbox",
-      "aria-label": "\uBD84",
+      "aria-label": ctx.labels.minuteList,
       "aria-disabled": isDisabled || void 0,
       className: classNames?.root,
       ...props,
@@ -1617,7 +1639,7 @@ function TimePickerMinuteList({ classNames, ...props }) {
             role: "option",
             "aria-selected": isSelected,
             "aria-disabled": isDisabled || void 0,
-            "aria-label": `${minute}\uBD84`,
+            "aria-label": ctx.labels.minuteOption(minute),
             "data-selected": isSelected || void 0,
             tabIndex: isSelected ? 0 : -1,
             className: optionClass,
@@ -1660,7 +1682,7 @@ function TimePickerAmPmToggle({ classNames, ...props }) {
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "radiogroup", "aria-label": "\uC624\uC804/\uC624\uD6C4", className: classNames?.root, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "radiogroup", "aria-label": ctx.labels.amPmToggle, className: classNames?.root, ...props, children: [
     renderButton("AM"),
     renderButton("PM")
   ] });
@@ -1674,10 +1696,7 @@ var TimePicker = Object.assign(TimePickerRoot, {
   AmPmToggle: TimePickerAmPmToggle
 });
 function getDefaultIso2() {
-  const now = /* @__PURE__ */ new Date();
-  return new Date(
-    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
-  ).toISOString();
+  return core.DateFnsAdapter.today();
 }
 function DateTimePickerRoot({
   value: controlledValue,
@@ -1690,10 +1709,20 @@ function DateTimePickerRoot({
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd HH:mm",
   locale = "en-US",
+  displayTimezone,
   adapter = core.DateFnsAdapter,
+  labels: labelsProp,
   children
 }) {
   const pickerId = react.useId();
+  const mergedDateLabels = react.useMemo(
+    () => ({ ...core.DEFAULT_DATEPICKER_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const mergedTimeLabels = react.useMemo(
+    () => ({ ...core.DEFAULT_TIMEPICKER_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
   const isControlled = react.useRef(controlledValue !== void 0).current;
   const referenceRef = react.useRef(null);
   const [uncontrolledValue, setUncontrolledValue] = react.useState(
@@ -1702,15 +1731,21 @@ 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 = Array.isArray(disabled) ? disabled : [];
+  const disabledRules = react.useMemo(
+    () => Array.isArray(disabled) ? disabled : [],
+    [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;
@@ -1727,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);
   }, []);
@@ -1773,9 +1809,11 @@ function DateTimePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
-      pickerId
+      pickerId,
+      labels: mergedDateLabels
     }),
     [
       currentValue,
@@ -1791,9 +1829,11 @@ function DateTimePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
-      pickerId
+      pickerId,
+      mergedDateLabels
     ]
   );
   const timeContext = react.useMemo(
@@ -1803,25 +1843,36 @@ function DateTimePickerRoot({
       format,
       step,
       withSeconds: false,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       currentTime,
-      pickerId
+      pickerId,
+      labels: mergedTimeLabels
     }),
-    [currentValue, setTime, format, step, isDisabled, readOnly, currentTime, pickerId]
+    [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 }) });
 }
 var DateTimePickerInput = react.forwardRef(
-  function DateTimePickerInput2({ onFocus, onKeyDown, ...props }, ref) {
+  function DateTimePickerInput2({ onClick, onKeyDown, ...props }, ref) {
     const ctx = useDatePickerContext("DateTimePicker.Input");
-    const displayValue = ctx.value ? `${ctx.adapter.format(ctx.value, "yyyy-MM-dd")} ${core.formatTimeString(core.getTime(ctx.value))}` : "";
-    const handleFocus = react.useCallback(
+    let displayValue = "";
+    if (ctx.value) {
+      try {
+        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;
+      }
+    }
+    const handleClick = react.useCallback(
       (e) => {
-        ctx.open();
-        onFocus?.(e);
+        if (!ctx.isOpen) ctx.open();
+        onClick?.(e);
       },
-      [ctx, onFocus]
+      [ctx, onClick]
     );
     const handleKeyDown = react.useCallback(
       (e) => {
@@ -1847,7 +1898,7 @@ var DateTimePickerInput = react.forwardRef(
         type: "text",
         role: "combobox",
         readOnly: true,
-        "aria-label": "\uB0A0\uC9DC \uBC0F \uC2DC\uAC04",
+        "aria-label": ctx.labels.dateTimeInput ?? "Date and time",
         "aria-expanded": ctx.isOpen,
         "aria-haspopup": "dialog",
         "aria-controls": ctx.isOpen ? calendarId : void 0,
@@ -1855,7 +1906,7 @@ var DateTimePickerInput = react.forwardRef(
         autoComplete: "off",
         value: displayValue,
         disabled: ctx.isDisabled || props.disabled,
-        onFocus: handleFocus,
+        onClick: handleClick,
         onKeyDown: handleKeyDown,
         ...props
       }
@@ -1881,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;
@@ -1890,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);
   }, []);
@@ -1929,7 +1986,8 @@ function useDatePicker(options = {}) {
     weekStartsOn,
     selected: currentValue,
     focusedDate,
-    disabled
+    disabled,
+    timezone: displayTimezone
   });
   return {
     value: currentValue,
@@ -1957,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;
@@ -1969,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) => {
@@ -1985,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);
@@ -2037,7 +2097,8 @@ function useRangePicker(options = {}) {
     focusedDate,
     disabled,
     range: currentValue,
-    rangeHover: hoverDate
+    rangeHover: hoverDate,
+    timezone: displayTimezone
   });
   return {
     value: currentValue,
@@ -2062,10 +2123,7 @@ function useRangePicker(options = {}) {
   };
 }
 function getDefaultIso3() {
-  const now = /* @__PURE__ */ new Date();
-  return new Date(
-    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
-  ).toISOString();
+  return core.DateFnsAdapter.today();
 }
 function useTimePicker(options = {}) {
   const {
@@ -2073,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;
@@ -2082,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;