Progress

package.json

@@ -174,7 +174,8 @@
   ],
   "dependencies": {
     "@date-fns/tz": "^1.1.2",
-    "date-fns": "^4.1.0"
+    "date-fns": "^4.1.0",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@jest/types": "^29.6.3",
@@ -187,6 +188,7 @@
     "@types/node": "^22.7.7",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
+    "@types/react-transition-group": "^4.4.11",
     "@typescript-eslint/eslint-plugin": "^8.10.0",
     "@typescript-eslint/parser": "^8.10.0",
     "date-fns-jalali": "^3.6.0-1",

src/components/Weeks.tsx

@@ -1,4 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
+
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+
+import { useDayPicker } from "../useDayPicker.js";
 
 /**
  * Render the weeks in the month grid.
@@ -7,7 +11,31 @@ import React from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export function Weeks(props: JSX.IntrinsicElements["tbody"]) {
-  return <tbody {...props} />;
+  const [direction, setDirection] = useState<"next" | "prev">("next");
+  const [isTransitioning, setIsTransitioning] = useState<boolean>(false);
+  const dayPicker = useDayPicker();
+
+  const key = dayPicker.months[0].date.toISOString();
+
+  console.log(key);
+  return (
+    <TransitionGroup component={null}>
+      <CSSTransition
+        key={key}
+        timeout={250}
+        classNames={
+          direction === "next"
+            ? "animate rdp-slide-next"
+            : "animate rdp-slide-prev"
+        }
+        onEnter={() => setIsTransitioning(true)}
+        onEntered={() => setIsTransitioning(false)}
+      >
+        <tbody {...props}>{props.children}</tbody>
+      </CSSTransition>
+    </TransitionGroup>
+  );
+  // return <tbody {...props} />;
 }
 
 export type WeeksProps = Parameters<typeof Weeks>[0];

src/style.css

@@ -51,6 +51,15 @@
   --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
 
   --rdp-gradient-direction: 90deg;
+
+  --rdp-grid-template-columns: 7;
+
+
+  --rdp-animation-duration: .25s;
+}
+
+.rdp-root[data-week-numbers="true"] {
+  --rdp-grid-template-columns: 8;
 }
 
 .rdp-root[dir="rtl"] {
@@ -198,7 +207,34 @@
 }
 
 .rdp-month_grid {
+  width: 100%;
   border-collapse: collapse;
+  overflow: hidden;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.rdp-month_grid thead,
+.rdp-month_grid .rdp-week {
+  display: contents;
+}
+
+.rdp-month_grid .rdp-weekdays {
+  display: grid;
+  grid-template-columns: repeat(var(--rdp-grid-template-columns), 1fr);
+  height: var(--rdp-nav-height);
+}
+
+.rdp-month_grid .rdp-weeks {
+  display: grid;
+  grid-template-columns: repeat(var(--rdp-grid-template-columns), 1fr);
+}
+
+.rdp-month_grid .rdp-weeks ~ .rdp-weeks {
+  position: absolute;
+  margin-top: var(--rdp-nav-height);
+  /* border: 1px solid red; */
 }
 
 .rdp-nav {
@@ -296,3 +332,35 @@
 .rdp-focusable {
   cursor: pointer;
 }
+
+.rdp-slide-next-enter {
+  transform: translateX(100%);
+}
+.rdp-slide-next-enter-active {
+  transform: translateX(0);
+  opacity: 1;
+  transition: transform var(--rdp-animation-duration) ease-in-out;
+}
+.rdp-slide-next-exit {
+  opacity: 1;
+  transform: translateX(0);
+}
+.rdp-slide-next-exit-active {
+  transform: translateX(-100%);
+  transition: transform var(--rdp-animation-duration) ease-in-out;
+}
+
+.rdp-slide-prev-enter {
+  transform: translateX(-100%);
+}
+.rdp-slide-prev-enter-active {
+  transform: translateX(0);
+  transition: transform var(--rdp-animation-duration) ease-in-out;
+}
+.rdp-slide-prev-exit {
+  transform: translateX(0);
+}
+.rdp-slide-prev-exit-active {
+  transform: translateX(100%);
+  transition: transform var(--rdp-animation-duration) ease-in-out;
+}