@kalyx/react 1.0.0-rc.0 → 1.0.0-rc.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @kalyx/react
 
+## 1.0.0-rc.1
+
+### Patch Changes
+
+- 3afb15b: Fix popover styling regression that broke documentation live previews.
+  - `DatePicker.Popover` and `RangePicker.Popover` now merge user-provided `style` props _under_ Floating UI's positioning instead of being overwritten by it. Previously, passing `style={{...}}` to a Popover stripped away `position: absolute`, `top`, `left`, and `transform`, causing the popover to render as a static block at full container width.
+  - The popover is now hidden until Floating UI computes its position, eliminating an unpositioned first-frame flash on every open.
+  - The shared `usePopover` hook also wires the floating element's reference synchronously in the ref callback, so positioning is resolved before paint in most cases.
+
 ## 1.0.0-rc.0
 
 ### Major Changes
@@ -9,14 +18,12 @@
   Kalyx v1.0 declares the public API stable. This is a milestone release bundling the v0.5 surface additions (MonthPicker, YearPicker, WeekPicker, DatePicker.Presets, `onOpenChange`/`onCalendarNavigate` event callbacks) with an explicit commitment to semantic versioning going forward.
 
   ### What v1.0 commits to
-
   - **Public API surface** — exports from `@kalyx/react` and `@kalyx/core` listed in their `index.ts` files. Any breaking change requires a major bump.
   - **Compositional structure** — Root + subcomponent names (`DatePicker.Input`, `DatePicker.Calendar`, …) are stable. Removal or renaming requires a major bump.
   - **Value semantics** — ISO 8601 UTC strings for single dates, `DateRange` `{start, end}` for ranges. `displayTimezone` behavior (civil-midnight-in-tz for date selection) is stable.
   - **Accessibility contracts** — role/aria-\* attributes emitted by each component are stable.
 
   ### What v1.0 does NOT freeze
-
   - Internal implementation details (non-exported functions, component file layout).
   - CSS class name strings on elements — no classes are applied by default; only when a consumer passes them via `classNames` props.
   - Error message text.
@@ -39,9 +46,7 @@
       <DatePicker.Presets>
         <DatePicker.Preset value="today">Today</DatePicker.Preset>
         <DatePicker.Preset value="tomorrow">Tomorrow</DatePicker.Preset>
-        <DatePicker.Preset date="2026-12-25T00:00:00.000Z">
-          Christmas
-        </DatePicker.Preset>
+        <DatePicker.Preset date="2026-12-25T00:00:00.000Z">Christmas</DatePicker.Preset>
       </DatePicker.Presets>
       <DatePicker.Calendar />
     </DatePicker.Popover>
@@ -53,7 +58,6 @@
   - `displayTimezone` is honored when resolving "today"-relative presets.
 
 - 56e1ce9: feat: add `onOpenChange` and `onCalendarNavigate` callbacks on `DatePicker`, `RangePicker`, and `DateTimePicker` Root components.
-
   - `onOpenChange(isOpen: boolean)` fires whenever the popover opens or closes (regardless of trigger — click, keyboard, outside click, selection).
   - `onCalendarNavigate(viewMonth: ISODateString)` fires when the calendar view moves to a different month. The emitted value is the first day of the newly-visible month in UTC.
 
@@ -139,7 +143,6 @@
   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)`
@@ -157,7 +160,6 @@
 ### Minor Changes
 
 - 669391b: Improve code quality, performance, and stability
-
   - Enforce UTC timezone suffix in ISO regex
   - Extract shared usePopover and useListboxNavigation hooks
   - Add Intl.DateTimeFormat caching for locale/timezone utilities
@@ -196,7 +198,6 @@
 - e9bb9e8: Initial release of Kalyx — headless, SSR-safe React DatePicker library.
 
   Features:
-
   - DatePicker: single date selection with Calendar, Input, Trigger, Popover
   - RangePicker: date range selection with auto-swap and hover preview
   - TimePicker: 12h/24h mode, minute step, HourList/MinuteList/AmPmToggle

package/README.md

@@ -3,7 +3,7 @@
 > The headless React DatePicker, finally complete. Zero CSS · SSR-safe · under 12 KB gzip.
 
 [![npm](https://img.shields.io/npm/v/@kalyx/react?color=5b4fe1)](https://www.npmjs.com/package/@kalyx/react)
-[![Bundle](https://img.shields.io/badge/gzip-9.2KB-brightgreen)](https://kalyx-docs.vercel.app/docs/api/react#bundle-size)
+[![Bundle](https://img.shields.io/badge/gzip-11.36KB-brightgreen)](https://kalyx-docs.vercel.app/docs/api/react#bundle-size)
 [![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue)](https://www.typescriptlang.org/)
 [![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/jiji-hoon96/kalyx/blob/main/LICENSE)
 
@@ -51,6 +51,9 @@ import {
   RangePicker,       // date range + presets
   TimePicker,        // hour + minute (+ seconds)
   DateTimePicker,    // date + time combined
+  MonthPicker,       // month-only selection
+  YearPicker,        // year-only selection
+  WeekPicker,        // full-week range selection
   useDatePicker,     // hook for custom UIs
   useRangePicker,
   useTimePicker,
@@ -90,6 +93,8 @@ Full recipes: [Tailwind](https://kalyx-docs.vercel.app/docs/recipes/tailwind), [
 - [Quick Start](https://kalyx-docs.vercel.app/docs/getting-started/quick-start)
 - [Components](https://kalyx-docs.vercel.app/docs/components/datepicker)
 - [Hooks](https://kalyx-docs.vercel.app/docs/hooks/use-date-picker)
+- [Testing](https://kalyx-docs.vercel.app/docs/recipes/testing)
+- [Troubleshooting](https://kalyx-docs.vercel.app/docs/troubleshooting)
 - [Migration from react-datepicker / react-day-picker / React Aria](https://kalyx-docs.vercel.app/docs/migration)
 
 ## License

package/dist/index.cjs

@@ -302,10 +302,15 @@ var DatePickerTrigger = react.forwardRef(
     );
   }
 );
-function usePopover({ isOpen, close, referenceRef, placement = "bottom-start" }) {
+function usePopover({
+  isOpen,
+  close,
+  referenceRef,
+  placement = "bottom-start"
+}) {
   const floatingRef = react.useRef(null);
   const previousFocusRef = react.useRef(null);
-  const { refs, floatingStyles } = react$1.useFloating({
+  const { refs, floatingStyles, isPositioned } = react$1.useFloating({
     open: isOpen,
     placement,
     middleware: [react$1.offset(4), react$1.flip(), react$1.shift({ padding: 8 })],
@@ -355,21 +360,28 @@ function usePopover({ isOpen, close, referenceRef, placement = "bottom-start" })
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, close]);
-  const setFloatingRef = (node) => {
-    floatingRef.current = node;
-    refs.setFloating(node);
-  };
-  return { floatingStyles, setFloatingRef };
+  const setFloatingRef = react.useCallback(
+    (node) => {
+      floatingRef.current = node;
+      refs.setFloating(node);
+      if (node && referenceRef.current) {
+        refs.setReference(referenceRef.current);
+      }
+    },
+    [refs, referenceRef]
+  );
+  return { floatingStyles, setFloatingRef, isPositioned };
 }
 function DatePickerPopover({ children, ...props }) {
   const ctx = useDatePickerContext("DatePicker.Popover");
   const calendarId = `${ctx.pickerId}-calendar`;
-  const { floatingStyles, setFloatingRef } = usePopover({
+  const { floatingStyles, setFloatingRef, isPositioned } = usePopover({
     isOpen: ctx.isOpen,
     close: ctx.close,
     referenceRef: ctx.referenceRef
   });
   if (!ctx.isOpen) return null;
+  const { style: userStyle, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -378,8 +390,12 @@ function DatePickerPopover({ children, ...props }) {
       role: "dialog",
       "aria-label": ctx.labels.popoverLabel,
       "aria-modal": "false",
-      style: floatingStyles,
-      ...props,
+      ...rest,
+      style: {
+        ...userStyle,
+        ...floatingStyles,
+        visibility: isPositioned ? void 0 : "hidden"
+      },
       children
     }
   );
@@ -402,7 +418,11 @@ var srOnly = {
   whiteSpace: "nowrap",
   border: 0
 };
-function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
+function DatePickerCalendar({
+  classNames,
+  onTitleClick,
+  ...props
+}) {
   const ctx = useDatePickerContext("DatePicker.Calendar");
   const gridRef = react.useRef(null);
   const [announcement, setAnnouncement] = react.useState("");
@@ -420,9 +440,7 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
   const title = core.formatMonthYear(year, month, locale);
   react.useEffect(() => {
     if (!ctx.isOpen || !gridRef.current) return;
-    const focusedButton = gridRef.current.querySelector(
-      '[data-focused="true"]'
-    );
+    const focusedButton = gridRef.current.querySelector('[data-focused="true"]');
     focusedButton?.focus({ preventScroll: true });
   }, [focusedDate, ctx.isOpen]);
   const navigateMonth = react.useCallback(
@@ -645,15 +663,7 @@ function DatePickerMonthGrid({
           children: "<"
         }
       ),
-      onTitleClick ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: classNames?.title,
-          onClick: onTitleClick,
-          children: currentYear
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.title, children: currentYear }),
+      onTitleClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: classNames?.title, onClick: onTitleClick, children: currentYear }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.title, children: currentYear }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -698,11 +708,7 @@ function DatePickerMonthGrid({
     )
   ] });
 }
-function DatePickerYearGrid({
-  classNames,
-  onSelect,
-  ...props
-}) {
+function DatePickerYearGrid({ classNames, onSelect, ...props }) {
   const ctx = useDatePickerContext("DatePicker.YearGrid");
   const { adapter, viewMonth } = ctx;
   const currentYear = adapter.getYear(viewMonth);
@@ -796,16 +802,7 @@ function DatePickerYearGrid({
 }
 function DatePickerPresets({ classNames, children, ...props }) {
   const ctx = useDatePickerContext("DatePicker.Presets");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "group",
-      "aria-label": ctx.labels.popoverLabel,
-      className: classNames?.root,
-      ...props,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", "aria-label": ctx.labels.popoverLabel, className: classNames?.root, ...props, children });
 }
 function resolveDatePreset(key, today, adapter) {
   switch (key) {
@@ -859,11 +856,7 @@ function DatePickerPreset({
     if (directDate) {
       target = directDate;
     } else if (presetKey) {
-      target = resolveDatePreset(
-        presetKey,
-        ctx.adapter.today(ctx.displayTimezone),
-        ctx.adapter
-      );
+      target = resolveDatePreset(presetKey, ctx.adapter.today(ctx.displayTimezone), ctx.adapter);
     } else {
       return false;
     }
@@ -1130,12 +1123,13 @@ var RangePickerInput = react.forwardRef(
 function RangePickerPopover({ children, ...props }) {
   const ctx = useRangePickerContext("RangePicker.Popover");
   const calendarId = `${ctx.pickerId}-calendar`;
-  const { floatingStyles, setFloatingRef } = usePopover({
+  const { floatingStyles, setFloatingRef, isPositioned } = usePopover({
     isOpen: ctx.isOpen,
     close: ctx.close,
     referenceRef: ctx.referenceRef
   });
   if (!ctx.isOpen) return null;
+  const { style: userStyle, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1144,8 +1138,12 @@ function RangePickerPopover({ children, ...props }) {
       role: "dialog",
       "aria-label": ctx.labels.popoverLabel,
       "aria-modal": "false",
-      style: floatingStyles,
-      ...props,
+      ...rest,
+      style: {
+        ...userStyle,
+        ...floatingStyles,
+        visibility: isPositioned ? void 0 : "hidden"
+      },
       children
     }
   );
@@ -1202,9 +1200,7 @@ function RangePickerCalendar({
   const title = core.formatMonthYear(year, month, locale);
   react.useEffect(() => {
     if (!ctx.isOpen || !gridRef.current) return;
-    const focusedButton = gridRef.current.querySelector(
-      '[data-focused="true"]'
-    );
+    const focusedButton = gridRef.current.querySelector('[data-focused="true"]');
     focusedButton?.focus({ preventScroll: true });
   }, [focusedDate, ctx.isOpen]);
   const navigateMonth = react.useCallback(
@@ -1307,7 +1303,18 @@ function RangePickerCalendar({
         }
       }
     },
-    [adapter, focusedDate, viewMonth, weekStartsOn, disabled, ctx, selectionMode, selectingTarget, value.start, commitDay]
+    [
+      adapter,
+      focusedDate,
+      viewMonth,
+      weekStartsOn,
+      disabled,
+      ctx,
+      selectionMode,
+      selectingTarget,
+      value.start,
+      commitDay
+    ]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.root, ...props, onMouseLeave: handleMouseLeave, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.header, children: [
@@ -1444,9 +1451,7 @@ function resolvePreset(key, today, adapter) {
     }
     case "thisYear": {
       const currentMonth = new Date(today).getUTCMonth();
-      const yearStart = adapter.startOfMonth(
-        adapter.addMonths(today, -currentMonth)
-      );
+      const yearStart = adapter.startOfMonth(adapter.addMonths(today, -currentMonth));
       return { start: yearStart, end: today };
     }
   }
@@ -1582,7 +1587,19 @@ function TimePickerRoot({
       pickerId,
       labels: mergedLabels
     }),
-    [currentValue, setTime, format, step, withSeconds, displayTimezone, 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 });
 }
@@ -1599,12 +1616,9 @@ var TimePickerInput = react.forwardRef(
       }
       setInputText(null);
     }, [inputText, ctx]);
-    const handleChange = react.useCallback(
-      (e) => {
-        setInputText(e.target.value);
-      },
-      []
-    );
+    const handleChange = react.useCallback((e) => {
+      setInputText(e.target.value);
+    }, []);
     const handleBlur = react.useCallback(
       (e) => {
         commitInput();
@@ -1677,9 +1691,7 @@ function useListboxNavigation({
         onSelect(target);
         cancelAnimationFrame(rafIdRef.current);
         rafIdRef.current = requestAnimationFrame(() => {
-          const next = listRef.current?.querySelector(
-            '[data-selected="true"]'
-          );
+          const next = listRef.current?.querySelector('[data-selected="true"]');
           next?.focus();
         });
       }
@@ -1816,10 +1828,19 @@ function TimePickerAmPmToggle({ classNames, ...props }) {
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "radiogroup", "aria-label": ctx.labels.amPmToggle, className: classNames?.root, ...props, children: [
-    renderButton("AM"),
-    renderButton("PM")
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ctx.labels.amPmToggle,
+      className: classNames?.root,
+      ...props,
+      children: [
+        renderButton("AM"),
+        renderButton("PM")
+      ]
+    }
+  );
 }
 
 // src/components/TimePicker/index.ts
@@ -1989,7 +2010,18 @@ function DateTimePickerRoot({
       pickerId,
       labels: mergedTimeLabels
     }),
-    [currentValue, setTime, format, step, displayTimezone, 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 }) });
 }
@@ -2068,10 +2100,7 @@ function MonthPickerRoot(props) {
   const displayFormat = props.displayFormat ?? "yyyy-MM";
   return /* @__PURE__ */ jsxRuntime.jsx(DatePickerRoot, { ...props, displayFormat });
 }
-function MonthPickerGrid({
-  classNames,
-  ...props
-}) {
+function MonthPickerGrid({ classNames, ...props }) {
   const ctx = useDatePickerContext("MonthPicker.Grid");
   const { adapter, viewMonth, locale, value, displayTimezone, labels } = ctx;
   const currentYear = adapter.getYear(viewMonth);
@@ -2095,9 +2124,7 @@ function MonthPickerGrid({
   );
   const handleMonthSelect = react.useCallback(
     (monthIndex) => {
-      const target = new Date(
-        Date.UTC(currentYear, monthIndex, 1)
-      ).toISOString();
+      const target = new Date(Date.UTC(currentYear, monthIndex, 1)).toISOString();
       ctx.selectDate(target);
     },
     [currentYear, ctx]
@@ -2132,45 +2159,37 @@ function MonthPickerGrid({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-label": `${currentYear} months`, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        role: "grid",
-        "aria-label": `${currentYear} months`,
-        className: classNames?.grid,
-        children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "row",
-            className: classNames?.gridRow,
-            style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
-            children: months.slice(rowIndex * 3, rowIndex * 3 + 3).map((m) => {
-              const monthClass = [
-                classNames?.month,
-                m.isSelected && classNames?.monthSelected,
-                m.isCurrent && classNames?.monthCurrent
-              ].filter(Boolean).join(" ") || void 0;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  role: "gridcell",
-                  "aria-selected": m.isSelected || void 0,
-                  "aria-current": m.isCurrent ? "date" : void 0,
-                  "data-selected": m.isSelected || void 0,
-                  "data-current": m.isCurrent || void 0,
-                  className: monthClass,
-                  onClick: () => handleMonthSelect(m.index),
-                  children: m.name
-                },
-                m.index
-              );
-            })
-          },
-          rowIndex
-        ))
-      }
-    )
+        role: "row",
+        className: classNames?.gridRow,
+        style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
+        children: months.slice(rowIndex * 3, rowIndex * 3 + 3).map((m) => {
+          const monthClass = [
+            classNames?.month,
+            m.isSelected && classNames?.monthSelected,
+            m.isCurrent && classNames?.monthCurrent
+          ].filter(Boolean).join(" ") || void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-selected": m.isSelected || void 0,
+              "aria-current": m.isCurrent ? "date" : void 0,
+              "data-selected": m.isSelected || void 0,
+              "data-current": m.isCurrent || void 0,
+              className: monthClass,
+              onClick: () => handleMonthSelect(m.index),
+              children: m.name
+            },
+            m.index
+          );
+        })
+      },
+      rowIndex
+    )) })
   ] });
 }
 
@@ -2245,45 +2264,37 @@ function YearPickerGrid({ classNames, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-label": rangeLabel, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        role: "grid",
-        "aria-label": rangeLabel,
-        className: classNames?.grid,
-        children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "row",
-            className: classNames?.gridRow,
-            style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
-            children: years.slice(rowIndex * 3, rowIndex * 3 + 3).map((y) => {
-              const yearClass = [
-                classNames?.year,
-                y.isSelected && classNames?.yearSelected,
-                y.isCurrent && classNames?.yearCurrent
-              ].filter(Boolean).join(" ") || void 0;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  role: "gridcell",
-                  "aria-selected": y.isSelected || void 0,
-                  "aria-current": y.isCurrent ? "date" : void 0,
-                  "data-selected": y.isSelected || void 0,
-                  "data-current": y.isCurrent || void 0,
-                  className: yearClass,
-                  onClick: () => handleYearSelect(y.value),
-                  children: y.value
-                },
-                y.value
-              );
-            })
-          },
-          rowIndex
-        ))
-      }
-    )
+        role: "row",
+        className: classNames?.gridRow,
+        style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
+        children: years.slice(rowIndex * 3, rowIndex * 3 + 3).map((y) => {
+          const yearClass = [
+            classNames?.year,
+            y.isSelected && classNames?.yearSelected,
+            y.isCurrent && classNames?.yearCurrent
+          ].filter(Boolean).join(" ") || void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-selected": y.isSelected || void 0,
+              "aria-current": y.isCurrent ? "date" : void 0,
+              "data-selected": y.isSelected || void 0,
+              "data-current": y.isCurrent || void 0,
+              className: yearClass,
+              onClick: () => handleYearSelect(y.value),
+              children: y.value
+            },
+            y.value
+          );
+        })
+      },
+      rowIndex
+    )) })
   ] });
 }
 
@@ -2546,14 +2557,8 @@ function useTimePicker(options = {}) {
     },
     [format, period, setTime]
   );
-  const setMinute = react.useCallback(
-    (minute) => setTime({ minutes: minute }),
-    [setTime]
-  );
-  const setSecond = react.useCallback(
-    (second) => setTime({ seconds: second }),
-    [setTime]
-  );
+  const setMinute = react.useCallback((minute) => setTime({ minutes: minute }), [setTime]);
+  const setSecond = react.useCallback((second) => setTime({ seconds: second }), [setTime]);
   const setPeriod = react.useCallback(
     (newPeriod) => {
       if (format !== "12h") return;