@react-fabric/date 1.0.0-beta.8 → 1.0.1

package/src/components/DateCell.tsx

@@ -21,16 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isArray } from "@react-fabric/utilities";
-import classNames from "classnames";
-import {
-  isAfter,
-  isBefore,
-  isSameDay,
-  isSameMonth,
-  isSameYear,
-  startOfDecade,
-} from "date-fns";
+import { cn, isArray } from "@react-fabric/utilities";
+import { isAfter, isBefore, isSameDay, isSameMonth, isSameYear, startOfDecade } from "date-fns";
 import i18next from "i18next";
 import { useMemo } from "react";
 import { PageType } from "../types";
@@ -50,28 +42,11 @@ export interface DateCellProps {
   dateDisabled?: (date: Date) => boolean;
 }
 
-export const DateCell = ({
-  date = new Date(),
-  isMuted = false,
-  ...props
-}: DateCellProps) => {
-  const {
-    page,
-    selected,
-    hilight,
-    isHijri,
-    className,
-    selectDate,
-    changePageDate,
-    mouseOver,
-    dateDisabled,
-  } = props;
+export function DateCell({ date, isMuted = false, ...props }: DateCellProps) {
+  const { page, selected, hilight, isHijri, className, selectDate, changePageDate, mouseOver, dateDisabled } = props;
 
   const isToday = useMemo(() => isSameDay(date, new Date()), [date]);
-  const isSelected = useMemo(
-    () => selected && !isArray(selected) && isSameDay(date, selected),
-    [date, page, selected],
-  );
+  const isSelected = useMemo(() => selected && !isArray(selected) && isSameDay(date, selected), [date, selected]);
 
   const isMarked = useMemo(() => {
     switch (page) {
@@ -80,11 +55,7 @@ export const DateCell = ({
       case PageType.YEAR:
         return selected && !isArray(selected) && isSameYear(date, selected);
       case PageType.DECADE:
-        return (
-          selected &&
-          !isArray(selected) &&
-          isSameYear(startOfDecade(date), startOfDecade(selected))
-        );
+        return selected && !isArray(selected) && isSameYear(startOfDecade(date), startOfDecade(selected));
     }
   }, [date, page, selected]);
 
@@ -95,8 +66,7 @@ export const DateCell = ({
       } else if (Array.isArray(selected)) {
         const [start, end] = selected;
         let hilight: string | false = false;
-        if (isSameDay(date, start) && isSameDay(date, end))
-          hilight = "startend";
+        if (isSameDay(date, start) && isSameDay(date, end)) hilight = "startend";
         else if (isSameDay(date, start)) hilight = "start";
         else if (isSameDay(date, end)) hilight = "end";
         return hilight;
@@ -109,68 +79,43 @@ export const DateCell = ({
       if (hilight) {
         const [start, end] = hilight;
         if (isBefore(start, end)) {
-          return (
-            isAfter(date, start) &&
-            isBefore(date, DateUtil.addDays(end, 1, isHijri))
-          );
+          return isAfter(date, start) && isBefore(date, DateUtil.addDays(end, 1, isHijri));
         } else {
-          return (
-            isBefore(date, start) &&
-            isAfter(date, DateUtil.addDays(end, -1, isHijri))
-          );
+          return isBefore(date, start) && isAfter(date, DateUtil.addDays(end, -1, isHijri));
         }
       } else if (Array.isArray(selected)) {
         const [start, end] = selected;
-        return (
-          isAfter(date, DateUtil.startOfDay(start, isHijri)) &&
-          isBefore(date, DateUtil.startOfDay(end, isHijri))
-        );
+        return isAfter(date, DateUtil.startOfDay(start, isHijri)) && isBefore(date, DateUtil.startOfDay(end, isHijri));
       }
     }
   }, [isMuted, hilight, selected, date, isHijri]);
 
-  const isDisabled = useMemo(
-    () => !!isSelected || dateDisabled?.(date),
-    [date, dateDisabled, isSelected],
-  );
+  const isDisabled = useMemo(() => !!isSelected || dateDisabled?.(date), [date, dateDisabled, isSelected]);
 
   return (
     <div
       role="none"
-      className={classNames(
+      className={cn(
         "p-1 m-px text-sm text-center rounded",
         className,
         !isDisabled && isMuted && "text-tint-500",
-        (isToday || isMarked) &&
-          "underline underline-offset-4 text-primary-700",
+        (isToday || isMarked) && "underline underline-offset-4 text-primary-700",
         (!!isSelected || isHilightEdge) && "bg-primary-400 text-white",
         isHilightEdge === "start" && "rounded-e-none",
         isHilightEdge === "end" && "rounded-s-none",
         isHilight && "bg-primary-50 rounded-none",
-        !isDisabled &&
-          "cursor-pointer hover:bg-primary-100 hover:text-primary-700",
+        !isDisabled && "cursor-pointer hover:bg-primary-100 hover:text-primary-700",
         isDisabled && "text-tint-100 cursor-not-allowed",
       )}
       onFocus={() => hilight && page === PageType.DATE && mouseOver?.(date)}
       onMouseOver={() => hilight && page === PageType.DATE && mouseOver?.(date)}
-      onClick={() =>
-        !isDisabled &&
-        (page === PageType.DATE ? selectDate?.(date) : changePageDate?.(date))
-      }
+      onClick={() => !isDisabled && (page === PageType.DATE ? selectDate?.(date) : changePageDate?.(date))}
     >
-      {page === PageType.DATE &&
-        DateUtil.format(date, "d", i18next.language, isHijri)}
-      {page === PageType.MONTH &&
-        DateUtil.format(date, "MMM", i18next.language, isHijri)}
-      {page === PageType.YEAR &&
-        DateUtil.format(date, "yyyy", i18next.language, isHijri)}
+      {page === PageType.DATE && DateUtil.format(date, "d", i18next.language, isHijri)}
+      {page === PageType.MONTH && DateUtil.format(date, "MMM", i18next.language, isHijri)}
+      {page === PageType.YEAR && DateUtil.format(date, "yyyy", i18next.language, isHijri)}
       {page === PageType.DECADE &&
-        `${DateUtil.format(
-          DateUtil.startOfDecade(date, isHijri),
-          "yyyy",
-          i18next.language,
-          isHijri,
-        )}-${DateUtil.format(
+        `${DateUtil.format(DateUtil.startOfDecade(date, isHijri), "yyyy", i18next.language, isHijri)}-${DateUtil.format(
           DateUtil.endOfDecade(date, isHijri),
           "yy",
           i18next.language,
@@ -178,4 +123,4 @@ export const DateCell = ({
         )}`}
     </div>
   );
-};
+}

package/src/components/DateHeader.tsx

@@ -21,8 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, CoreIcons } from "@react-fabric/core";
-import classNames from "classnames";
+import { Button } from "@react-fabric/core";
+import { cn } from "@react-fabric/utilities";
 import { addDays, isAfter, isBefore } from "date-fns";
 import i18next from "i18next";
 import { useMemo } from "react";
@@ -41,18 +41,8 @@ interface Props {
   changePageDate: (date: Date) => void;
 }
 
-export const DateHeader = (props: Props) => {
-  const {
-    page,
-    pageDate = new Date(),
-    changePage,
-    changePageDate,
-    hideNext,
-    hidePrevious,
-    min,
-    max,
-    isHijri = false,
-  } = props;
+export function DateHeader(props: Props) {
+  const { page, pageDate, changePage, changePageDate, hideNext, hidePrevious, min, max, isHijri = false } = props;
 
   const headLabel = useMemo(() => {
     switch (page) {
@@ -66,57 +56,35 @@ export const DateHeader = (props: Props) => {
           "yyyy",
           i18next.language,
           isHijri,
-        )} - ${DateUtil.format(
-          DateUtil.endOfDecade(pageDate, isHijri),
-          "yyyy",
-          i18next.language,
-          isHijri,
-        )}`;
+        )} - ${DateUtil.format(DateUtil.endOfDecade(pageDate, isHijri), "yyyy", i18next.language, isHijri)}`;
       case PageType.DECADE:
         return `${DateUtil.format(
           DateUtil.startOfCentury(pageDate, isHijri),
           "yyyy",
           i18next.language,
           isHijri,
-        )} - ${DateUtil.format(
-          DateUtil.endOfCentury(pageDate, isHijri),
-          "yyyy",
-          i18next.language,
-          isHijri,
-        )}`;
+        )} - ${DateUtil.format(DateUtil.endOfCentury(pageDate, isHijri), "yyyy", i18next.language, isHijri)}`;
     }
-  }, [i18next.language, isHijri, page, pageDate]);
+  }, [isHijri, page, pageDate]);
 
   const [startPage, endPage] = useMemo(() => {
     if (page === PageType.DATE) {
       const dateBefore = addDays(DateUtil.startOfYear(pageDate, isHijri), -1);
       const dateAfter = addDays(DateUtil.endOfYear(pageDate, isHijri), 1);
 
-      return [
-        min && isBefore(dateBefore, min) ? null : dateBefore,
-        max && isAfter(dateAfter, max) ? null : dateAfter,
-      ];
+      return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
     }
     if (page === PageType.MONTH) {
       const dateBefore = addDays(DateUtil.startOfDecade(pageDate, isHijri), -1);
       const dateAfter = addDays(DateUtil.endOfDecade(pageDate, isHijri), 1);
 
-      return [
-        min && isBefore(dateBefore, min) ? null : dateBefore,
-        max && isAfter(dateAfter, max) ? null : dateAfter,
-      ];
+      return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
     }
     if (page === PageType.YEAR) {
-      const dateBefore = addDays(
-        DateUtil.startOfCentury(pageDate, isHijri),
-        -1,
-      );
+      const dateBefore = addDays(DateUtil.startOfCentury(pageDate, isHijri), -1);
       const dateAfter = addDays(DateUtil.endOfCentury(pageDate, isHijri), 1);
 
-      return [
-        min && isBefore(dateBefore, min) ? null : dateBefore,
-        max && isAfter(dateAfter, max) ? null : dateAfter,
-      ];
+      return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
     }
     return [];
   }, [page, min, max, pageDate, isHijri]);
@@ -125,71 +93,54 @@ export const DateHeader = (props: Props) => {
     if (page === PageType.DATE) {
       const dateBefore = addDays(DateUtil.startOfMonth(pageDate, isHijri), -1);
       const dateAfter = addDays(DateUtil.endOfMonth(pageDate, isHijri), 1);
-      return [
-        min && isBefore(dateBefore, min) ? null : dateBefore,
-        max && isAfter(dateAfter, max) ? null : dateAfter,
-      ];
+      return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
     }
     if (page === PageType.MONTH) {
       const dateBefore = addDays(DateUtil.startOfYear(pageDate, isHijri), -1);
       const dateAfter = addDays(DateUtil.endOfYear(pageDate, isHijri), 1);
-      return [
-        min && isBefore(dateBefore, min) ? null : dateBefore,
-        max && isAfter(dateAfter, max) ? null : dateAfter,
-      ];
+      return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
     }
     if (page === PageType.YEAR) {
       const dateBefore = addDays(DateUtil.startOfDecade(pageDate, isHijri), -1);
       const dateAfter = addDays(DateUtil.endOfDecade(pageDate, isHijri), 1);
 
-      return [
-        min && isBefore(dateBefore, min) ? null : dateBefore,
-        max && isAfter(dateAfter, max) ? null : dateAfter,
-      ];
+      return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
     }
     if (page === PageType.DECADE) {
-      const dateBefore = addDays(
-        DateUtil.startOfCentury(pageDate, isHijri),
-        -1,
-      );
+      const dateBefore = addDays(DateUtil.startOfCentury(pageDate, isHijri), -1);
       const dateAfter = addDays(DateUtil.endOfCentury(pageDate, isHijri), 1);
 
-      return [
-        min && isBefore(dateBefore, min) ? null : dateBefore,
-        max && isAfter(dateAfter, max) ? null : dateAfter,
-      ];
+      return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
     }
     return [];
   }, [page, min, max, pageDate, isHijri]);
 
   return (
-    <div className="flex flex-nowrap items-center area-head" data-page={page}>
+    <div className="flex flex-nowrap items-center area-header" data-page={page}>
       {startPage !== undefined && (
         <Button
-          icon={CoreIcons.chevronsLeft}
-          rtlFlip
+          icon={{ icon: "icon-[mdi--chevron-double-left]", rtlFlip: true }}
           size="sm"
           variant="link"
           aria-label="start"
           disabled={!startPage}
-          className={classNames(hidePrevious && "invisible")}
+          className={cn(hidePrevious && "invisible")}
           onClick={() => startPage && changePageDate?.(startPage)}
         />
       )}
       <Button
-        icon={CoreIcons.chevronLeft}
-        rtlFlip
+        icon={{ icon: "icon-[mdi--chevron-left]", rtlFlip: true }}
         size="sm"
         variant="link"
         aria-label="prev"
         disabled={!previousPage}
-        className={classNames(hidePrevious && "invisible")}
+        className={cn(hidePrevious && "invisible")}
         onClick={() => previousPage && changePageDate?.(previousPage)}
       />
       <div
         role="none"
         onClick={() => changePage(page + 1)}
-        className={classNames(
+        className={cn(
           "flex-1 px-2 py-1 text-primary-600 text-center text-sm font-medium truncate",
           page === PageType.DECADE ? "pointer-events-none" : "cursor-pointer",
         )}
@@ -197,27 +148,25 @@ export const DateHeader = (props: Props) => {
         {headLabel}
       </div>
       <Button
-        icon={CoreIcons.chevronRight}
-        rtlFlip
+        icon={{ icon: "icon-[mdi--chevron-right]", rtlFlip: true }}
         size="sm"
         variant="link"
         aria-label="next"
         disabled={!nextPage}
-        className={classNames(hideNext && "invisible")}
+        className={cn(hideNext && "invisible")}
         onClick={() => nextPage && changePageDate?.(nextPage)}
       />
       {endPage !== undefined && (
         <Button
-          icon={CoreIcons.chevronsRight}
-          rtlFlip
+          icon={{ icon: "icon-[mdi--chevron-double-right]", rtlFlip: true }}
           size="sm"
           variant="link"
           aria-label="end"
           disabled={!endPage}
-          className={classNames(hideNext && "invisible")}
+          className={cn(hideNext && "invisible")}
           onClick={() => endPage && changePageDate?.(endPage)}
         />
       )}
     </div>
   );
-};
+}

package/src/components/DatePage.tsx

@@ -21,14 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cn } from "@react-fabric/utilities";
 import { getDay } from "date-fns";
 import i18next from "i18next";
 import { Fragment, useMemo } from "react";
+import { PageType } from "../types";
 import { DateUtil } from "../utils/dateUtil";
 import { DateCell, type DateCellProps } from "./DateCell";
-import classNames from "classnames";
-import { PageType } from "../types";
-import classes from "./Date.module.css";
 
 const rows = [0, 1, 2, 3, 4, 5];
 const cols = [0, 1, 2, 3, 4, 5, 6];
@@ -37,39 +36,22 @@ interface Props extends Omit<DateCellProps, "date"> {
   pageDate: Date;
 }
 
-export const DatePage = ({ pageDate, isHijri, ...props }: Props) => {
+export function DatePage({ pageDate, isHijri, ...props }: Props) {
   const startDate = useMemo(() => {
     const first = DateUtil.startOfMonth(pageDate, isHijri);
     const current = getDay(first);
-    return DateUtil.addDays(
-      first,
-      (current < 3 ? -7 : 0) + current * -1,
-      isHijri,
-    );
+    return DateUtil.addDays(first, (current < 3 ? -7 : 0) + current * -1, isHijri);
   }, [isHijri, pageDate]);
 
   return (
-    <div
-      className={classNames(
-        "grid grid-cols-8 area-content",
-        props.page !== PageType.DATE && "invisible",
-      )}
-    >
-      <div
-        className={classNames(
-          classes.dateHeader,
-          "px-1 text-center bg-tint-50 h-7",
-        )}
-      ></div>
+    <div className={cn("grid grid-cols-8 area-content", props.page !== PageType.DATE && "invisible")}>
+      <div className={cn("fabric-dateHeader", "px-1 text-center bg-tint-50 h-7")}></div>
       {cols.map((col) => {
         const dt = DateUtil.addDays(startDate, col, isHijri);
         return (
           <div
             key={dt.toISOString()}
-            className={classNames(
-              classes.dateHeader,
-              "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7",
-            )}
+            className={cn("fabric-dateHeader", "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7")}
           >
             {DateUtil.format(dt, "eeeeee", i18next.language, isHijri)}
           </div>
@@ -77,25 +59,18 @@ export const DatePage = ({ pageDate, isHijri, ...props }: Props) => {
       })}
       {rows.map((row) => (
         <Fragment key={row}>
-          <div
-            key={row}
-            className="px-1 py-1.5 m-px text-xs text-center text-tint-300"
-          >
-            {DateUtil.getWeek(
-              DateUtil.addDays(startDate, row * 7, isHijri),
-              i18next.language,
-              isHijri,
-            )}
+          <div key={row} className="px-1 py-1.5 m-px text-xs text-center text-tint-300">
+            {DateUtil.getWeek(DateUtil.addDays(startDate, row * 7, isHijri), i18next.language, isHijri)}
           </div>
           {cols.map((col) => {
             const dt = DateUtil.addDays(startDate, row * 7 + col, isHijri);
             return (
               <DateCell
+                key={dt.toISOString()}
                 {...props}
                 date={dt}
                 page={PageType.DATE}
                 isHijri={isHijri}
-                key={dt.toISOString()}
                 isMuted={!DateUtil.isSameMonth(dt, pageDate, isHijri)}
               />
             );
@@ -104,4 +79,4 @@ export const DatePage = ({ pageDate, isHijri, ...props }: Props) => {
       ))}
     </div>
   );
-};
+}

package/src/components/DecadePage.tsx

@@ -31,7 +31,7 @@ interface Props extends Omit<DateCellProps, "date"> {
   pageDate: Date;
 }
 
-export const DecadePage = ({ pageDate, isHijri, ...props }: Props) => {
+export function DecadePage({ pageDate, isHijri, ...props }: Props) {
   const startDate = useMemo(() => {
     return DateUtil.startOfCentury(pageDate, isHijri);
   }, [isHijri, pageDate]);
@@ -50,4 +50,4 @@ export const DecadePage = ({ pageDate, isHijri, ...props }: Props) => {
       ))}
     </div>
   );
-};
+}

package/src/components/MonthPage.tsx

@@ -31,7 +31,7 @@ interface Props extends Omit<DateCellProps, "date"> {
   pageDate: Date;
 }
 
-export const MonthPage = ({ pageDate, isHijri, ...props }: Props) => {
+export function MonthPage({ pageDate, isHijri, ...props }: Props) {
   const startDate = useMemo(() => {
     return DateUtil.startOfYear(pageDate, isHijri);
   }, [isHijri, pageDate]);
@@ -49,4 +49,4 @@ export const MonthPage = ({ pageDate, isHijri, ...props }: Props) => {
       ))}
     </div>
   );
-};
+}

package/src/components/TimeSliders.tsx

@@ -21,10 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useDebounce } from "@react-fabric/core";
-import classNames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
-import classes from "./Date.module.css";
+import { useDebounce, usePropState } from "@react-fabric/core";
+import { cn } from "@react-fabric/utilities";
+import { useCallback, useRef } from "react";
 
 interface Props {
   hour: number;
@@ -32,35 +31,20 @@ interface Props {
   onTimeChange: (time: { hour: number; minute: number }) => void;
 }
 
-export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
+export function TimeSlider({ hour = 0, minute = 0, onTimeChange }: Props) {
   const hourRef = useRef<HTMLDivElement>(null);
   const minuteRef = useRef<HTMLDivElement>(null);
 
-  const [h, setH] = useState(hour);
-  const [m, setM] = useState(minute);
-
-  useEffect(() => {
-    setH(hour);
-    hourRef.current?.children
-      .item(hour + 1)
-      ?.scrollIntoView({ block: "center" });
-  }, [hour]);
-  useEffect(() => {
-    setM(minute);
-    minuteRef.current?.children
-      .item(minute + 1)
-      ?.scrollIntoView({ block: "center" });
-  }, [minute]);
+  const [h, setH] = usePropState(hour, (hr) => hourRef.current?.children.item(hr + 1)?.scrollIntoView({ block: "center" }));
+  const [m, setM] = usePropState(minute, (mn) => minuteRef.current?.children.item(mn + 1)?.scrollIntoView({ block: "center" }));
 
   const fireChange = useDebounce(onTimeChange, [onTimeChange]);
 
   const calculateTime = useCallback(() => {
     const hourTop = hourRef.current?.scrollTop ?? 0;
-    const hourHeight =
-      (hourRef.current?.children.item(1) as HTMLElement)?.offsetHeight ?? 0;
+    const hourHeight = (hourRef.current?.children.item(1) as HTMLElement)?.offsetHeight ?? 0;
     const minuteTop = minuteRef.current?.scrollTop ?? 0;
-    const minuteHeight =
-      (minuteRef.current?.children.item(1) as HTMLElement)?.offsetHeight ?? 0;
+    const minuteHeight = (minuteRef.current?.children.item(1) as HTMLElement)?.offsetHeight ?? 0;
 
     const hour = Math.round(hourTop / hourHeight);
     const minute = Math.round(minuteTop / minuteHeight);
@@ -69,38 +53,21 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
     setM(minute);
 
     fireChange({ hour, minute });
-  }, [onTimeChange]);
+  }, [fireChange, setH, setM]);
 
   return (
-    <div
-      className={classNames(
-        "area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-base",
-      )}
-    >
+    <div className={cn("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-default")}>
       <div className="flex">
-        <div
-          className={classNames(
-            classes.dateHeader,
-            "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50",
-          )}
-        >
+        <div className={cn("fabric-dateHeader", "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50")}>
           H
         </div>
-        <div
-          className={classNames(
-            classes.dateHeader,
-            "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50",
-          )}
-        >
+        <div className={cn("fabric-dateHeader", "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50")}>
           M
         </div>
       </div>
-      <div className="flex flex-1 flex-nowrap overflow-hidden relative">
+      <div className="flex flex-1 flex-nowrap items-stretch overflow-hidden relative">
         <div
-          className={classNames(
-            "flex-1 overflow-auto scroll-hide snap-y snap-mandatory",
-            classes.timeSlider,
-          )}
+          className={cn("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", "fabric-date-timeSlider")}
           onScroll={calculateTime}
           ref={hourRef}
         >
@@ -110,10 +77,8 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
             .map((_, i) => (
               <div
                 role="none"
-                className={classNames(
-                  "ps-2 pe-1 snap-center outline outline-muted",
-                  i === h && "font-medium text-primary-600",
-                )}
+                className={cn("ps-2 pe-1 snap-center outline outline-muted", i === h && "font-medium text-primary-600")}
+                // eslint-disable-next-line @eslint-react/no-array-index-key
                 key={i}
                 data-skew={
                   i === h - 5 || i === h + 5
@@ -142,10 +107,7 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
           <div className="w-full" />
         </div>
         <div
-          className={classNames(
-            "flex-1 overflow-auto scroll-hide snap-y snap-mandatory",
-            classes.timeSlider,
-          )}
+          className={cn("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", "fabric-date-timeSlider")}
           onScroll={calculateTime}
           ref={minuteRef}
         >
@@ -155,10 +117,8 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
             .map((_, i) => (
               <div
                 role="none"
-                className={classNames(
-                  "ps-1 pe-2 snap-center outline outline-muted",
-                  i === m && "font-medium text-primary-600",
-                )}
+                className={cn("ps-1 pe-2 snap-center outline outline-muted", i === m && "font-medium text-primary-600")}
+                // eslint-disable-next-line @eslint-react/no-array-index-key
                 key={i}
                 data-skew={
                   i === m - 5 || i === m + 5
@@ -193,4 +153,4 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
       </div>
     </div>
   );
-};
+}

package/src/components/YearPage.tsx

@@ -31,7 +31,7 @@ interface Props extends Omit<DateCellProps, "date"> {
   pageDate: Date;
 }
 
-export const YearPage = ({ pageDate, isHijri, ...props }: Props) => {
+export function YearPage({ pageDate, isHijri, ...props }: Props) {
   const startDate = useMemo(() => {
     return DateUtil.startOfDecade(pageDate, isHijri);
   }, [isHijri, pageDate]);
@@ -50,4 +50,4 @@ export const YearPage = ({ pageDate, isHijri, ...props }: Props) => {
       ))}
     </div>
   );
-};
+}