feat: modal calendar styles

src/app.tsx

@@ -4,11 +4,9 @@ import "preact/debug";
 import { ru } from "primelocale/js/ru.js";
 import { addLocale, locale, PrimeReactProvider } from "primereact/api";
 import { useMountEffect } from "primereact/hooks";
-import Tailwind from "primereact/passthrough/tailwind";
 import Page404 from "./pages/404";
 import LoginPage from "./pages/login";
 import { AppProvider, useAppContext } from "./providers/AuthProvider";
-import { cn } from "./utils/class-merge";
 
 const HomePage: FunctionComponent = () => {
   const { route } = useLocation();
@@ -28,8 +26,8 @@ export function App() {
       <PrimeReactProvider
         value={{
           unstyled: true,
-          pt: Tailwind,
+          // pt: Tailwind,
-          ptOptions: { mergeProps: true, mergeSections: true, classNameMergeFunction: cn },
+          // ptOptions: { mergeProps: true, mergeSections: true, classNameMergeFunction: cn },
         }}
       >
         <LocationProvider>

src/components/ModalCalendar.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/utils/class-merge";
 import { FunctionComponent } from "preact";
 import { Dispatch, StateUpdater } from "preact/hooks";
 import { Calendar } from "primereact/calendar";
@@ -9,10 +10,155 @@ interface ModalCalendarProps {
   onClose?: () => void;
 }
 
+const TRANSITIONS = {
+  overlay: {
+    timeout: 150,
+    cn: {
+      enter: "opacity-0 scale-75",
+      enterActive: "opacity-100 !scale-100 transition-[transform,opacity] duration-150 ease-in",
+      exit: "opacity-100",
+      exitActive: "!opacity-0 transition-opacity duration-150 ease-linear",
+    },
+  },
+};
+
 const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpen, onClose }) => {
   return (
     <ModalWindow isOpen={isOpen} setIsOpen={setIsOpen} onClose={onClose} className="md:h-[40rem] md:w-[30rem]">
-      <Calendar inline pt={{ "p-calendar": "w-full" }} />
+      <Calendar
+        inline
+        pt={{
+          root: ({ props }) => ({
+            className: cn("inline-flex max-w-full relative", {
+              "opacity-60 select-none pointer-events-none cursor-default": props.disabled,
+            }),
+          }),
+          input: ({ props }) => ({
+            root: {
+              className: cn(
+                "font-sans text-base text-gray-600 bg-white p-3 border border-gray-300  transition-colors duration-200 appearance-none",
+                "hover:border-blue-500",
+                {
+                  "rounded-lg": !props.showIcon,
+                  "border-r-0 rounded-l-lg": props.showIcon,
+                }
+              ),
+            },
+          }),
+          dropdownButton: {
+            root: ({ props }) => ({
+              className: cn({ "rounded-l-none": props.icon }),
+            }),
+          },
+          panel: ({ props }) => ({
+            className: cn("bg-[rgba(251,194,199,0.38)]", "min-w-full", {
+              "shadow-md border-0 absolute": !props.inline,
+              "inline-block overflow-x-auto border border-gray-300  p-2 rounded-lg": props.inline,
+            }),
+          }),
+          header: {
+            className: cn(
+              "flex items-center justify-between",
+              "p-2 text-gray-700  bg-white  font-semibold m-0 border-b border-gray-300  rounded-t-lg"
+            ),
+          },
+          previousButton: {
+            className: cn(
+              "flex items-center justify-center cursor-pointer overflow-hidden relative",
+              "w-8 h-8 text-gray-600  border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
+              "hover:text-gray-700  hover:border-transparent hover:bg-gray-200  "
+            ),
+          },
+          title: { className: "leading-8 mx-auto" },
+          monthTitle: {
+            className: cn("text-gray-700  transition duration-200 font-semibold p-2", "mr-2", "hover:text-blue-500"),
+          },
+          yearTitle: {
+            className: cn("text-gray-700  transition duration-200 font-semibold p-2", "hover:text-blue-500"),
+          },
+          nextButton: {
+            className: cn(
+              "flex items-center justify-center cursor-pointer overflow-hidden relative",
+              "w-8 h-8 text-gray-600  border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
+              "hover:text-gray-700  hover:border-transparent hover:bg-gray-200  "
+            ),
+          },
+          table: {
+            className: cn("border-collapse w-full", "my-2"),
+          },
+          tableHeaderCell: { className: "p-2" },
+          weekDay: { className: "text-gray-600 " },
+          day: { className: "p-2" },
+          dayLabel: ({ context }) => ({
+            className: cn(
+              "w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border",
+              "flex items-center justify-center mx-auto overflow-hidden relative",
+              "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
+              {
+                "opacity-60 cursor-default": context.disabled,
+                "cursor-pointer": !context.disabled,
+              },
+              {
+                "text-gray-600  bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
+                "text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
+              }
+            ),
+          }),
+          monthPicker: { className: "my-2" },
+          month: ({ context }) => ({
+            className: cn(
+              "w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative",
+              "p-2 transition-shadow duration-200 rounded-lg",
+              "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
+              {
+                "text-gray-600  bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
+                "text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
+              }
+            ),
+          }),
+          yearPicker: {
+            className: cn("my-2"),
+          },
+          year: ({ context }) => ({
+            className: cn(
+              "w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative",
+              "p-2 transition-shadow duration-200 rounded-lg",
+              "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
+              {
+                "text-gray-600  bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
+                "text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
+              }
+            ),
+          }),
+          timePicker: {
+            className: cn("flex justify-center items-center", "border-t-1 border-solid border-gray-300 p-2"),
+          },
+          separatorContainer: { className: "flex items-center flex-col px-2" },
+          separator: { className: "text-xl" },
+          hourPicker: { className: "flex items-center flex-col px-2" },
+          minutePicker: { className: "flex items-center flex-col px-2" },
+          ampmPicker: { className: "flex items-center flex-col px-2" },
+          incrementButton: {
+            className: cn(
+              "flex items-center justify-center cursor-pointer overflow-hidden relative",
+              "w-8 h-8 text-gray-600  border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
+              "hover:text-gray-700  hover:border-transparent hover:bg-gray-200  "
+            ),
+          },
+          decrementButton: {
+            className: cn(
+              "flex items-center justify-center cursor-pointer overflow-hidden relative",
+              "w-8 h-8 text-gray-600  border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
+              "hover:text-gray-700  hover:border-transparent hover:bg-gray-200  "
+            ),
+          },
+          groupContainer: { className: "flex" },
+          group: {
+            className: cn("flex-1", "border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0", "first:pl-0 first:border-l-0"),
+          },
+          transition: TRANSITIONS.overlay,
+        }}
+      />
     </ModalWindow>
   );
 };