TailwindCSS v4

CONTRIBUTING.md

@@ -3,11 +3,11 @@
 Thanks for your interest in contributing to `react-tailwindcss-datepicker`! Please take a moment to
 review this document **before submitting a pull request**.
 
--   [Pull requests](#pull-requests)
--   [Installation](#installation)
--   [Coding standards](#coding-standards)
--   [Running playground](#running-playgrounds)
--   [Before you make a Pull Request](#before-you-make-a-pull-request)
+- [Pull requests](#pull-requests)
+- [Installation](#installation)
+- [Coding standards](#coding-standards)
+- [Running playground](#running-playgrounds)
+- [Before you make a Pull Request](#before-you-make-a-pull-request)
 
 ## Pull requests
 

eslint.config.mjs

@@ -0,0 +1,103 @@
+import eslint from "@eslint/js";
+import tseslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import importPlugin from "eslint-plugin-import";
+import prettierPlugin from "eslint-plugin-prettier";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactRefreshPlugin from "eslint-plugin-react-refresh";
+
+export default [
+    {
+        ignores: [
+            "dist/**",
+            "assets/**",
+            "styles/**",
+            "README.md",
+            ".next/**/*",
+            "build/**/*",
+            "node_modules/**/*",
+            ".rollup.cache/**/*",
+            "coverage/**/*"
+        ]
+    },
+    eslint.configs.recommended,
+    {
+        files: ["**/*.{js,jsx,ts,tsx}"],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                ecmaVersion: "latest",
+                ecmaFeatures: {
+                    jsx: true
+                },
+                sourceType: "module"
+            },
+            globals: {
+                window: "readonly",
+                setTimeout: "readonly",
+                clearTimeout: "readonly",
+                setInterval: "readonly",
+                clearInterval: "readonly",
+                console: "readonly",
+                document: "readonly",
+                HTMLDivElement: "readonly",
+                HTMLInputElement: "readonly",
+                HTMLButtonElement: "readonly",
+                Event: "readonly",
+                MouseEvent: "readonly",
+                TouchEvent: "readonly",
+                Node: "readonly"
+            }
+        },
+        plugins: {
+            "@typescript-eslint": tseslint,
+            react: reactPlugin,
+            "react-hooks": reactHooksPlugin,
+            import: importPlugin,
+            prettier: prettierPlugin,
+            "@next/next": nextPlugin,
+            "react-refresh": reactRefreshPlugin
+        },
+        settings: {
+            react: {
+                version: "detect"
+            }
+        },
+        rules: {
+            indent: "off",
+            "no-console": "warn",
+            quotes: "error",
+            semi: "error",
+            "import/order": [
+                "error",
+                {
+                    alphabetize: {
+                        order: "asc",
+                        caseInsensitive: true
+                    },
+                    "newlines-between": "always"
+                }
+            ],
+            "react/react-in-jsx-scope": "off",
+            "react-refresh/only-export-components": "warn",
+            "react-hooks/rules-of-hooks": "error",
+            "@typescript-eslint/no-var-requires": 0,
+            "prettier/prettier": ["error", { endOfLine: "auto" }, { usePrettierrc: true }],
+            "@typescript-eslint/no-unused-vars": ["error", {
+                "argsIgnorePattern": "^_",
+                "varsIgnorePattern": "^_",
+                "ignoreRestSiblings": true
+            }],
+            "no-unused-vars": "off",
+            "no-undef": "off"
+        }
+    },
+    {
+        files: ["app/page.tsx"],
+        rules: {
+            "no-console": "off"
+        }
+    }
+];

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "react-tailwindcss-datepicker",
-    "version": "2.0.0",
+    "name": "phiture-react-tailwindcss-datepicker",
+    "version": "2.0.1",
     "description": "A modern React Datepicker using Tailwind CSS 3",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
@@ -13,7 +13,7 @@
         "lint": "eslint .",
         "lint:fix": "eslint --fix .",
         "pret:fix": "prettier --write .",
-        "build": "npm run lint && npm run clean && rollup -c rollup.config.js --bundleConfigAsCjs",
+        "build": "npm run lint && npm run clean && rollup -c rollup.config.mjs --bundleConfigAsCjs",
         "pub": "npm run build && np --no-tests",
         "dev": "next dev -p 8888",
         "prepare": "husky"
@@ -23,6 +23,7 @@
         "url": "https://github.com/onesine/react-tailwindcss-datepicker"
     },
     "keywords": [
+        "phiture",
         "react-tailwindcss-datepicker",
         "react-datepicker",
         "tailwind-datepicker",
@@ -39,36 +40,36 @@
         "react": "^17.0.2 || ^18.2.0 || ^19.0.0"
     },
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^28.0.2",
-        "@rollup/plugin-node-resolve": "^16.0.0",
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-node-resolve": "^16.0.1",
         "@rollup/plugin-typescript": "^12.1.2",
-        "@tailwindcss/forms": "^0.5.7",
-        "@types/node": "^22.3.0",
-        "@types/react": "^19.0.8",
-        "@typescript-eslint/eslint-plugin": "^8.22.0",
-        "@typescript-eslint/parser": "^8.22.0",
-        "autoprefixer": "^10.4.20",
-        "dayjs": "^1.11.12",
-        "eslint": "^8.57.0",
-        "eslint-config-next": "^15.1.6",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-prettier": "^5.2.1",
-        "eslint-plugin-react": "^7.35.0",
-        "eslint-plugin-react-hooks": "^5.1.0",
-        "eslint-plugin-react-refresh": "^0.4.18",
-        "husky": "^9.1.4",
-        "lint-staged": "^15.2.9",
-        "next": "^15.1.6",
+        "@tailwindcss/forms": "^0.5.10",
+        "@types/node": "^22.13.10",
+        "@types/react": "^19.0.12",
+        "@typescript-eslint/eslint-plugin": "^8.27.0",
+        "@typescript-eslint/parser": "^8.27.0",
+        "autoprefixer": "^10.4.21",
+        "dayjs": "^1.11.13",
+        "eslint": "^9.22.0",
+        "eslint-config-next": "^15.2.3",
+        "eslint-config-prettier": "^10.1.1",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-prettier": "^5.2.3",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
+        "husky": "^9.1.7",
+        "lint-staged": "^15.5.0",
+        "next": "^15.2.3",
         "pinst": "^3.0.0",
-        "postcss": "^8.4.41",
-        "prettier": "^3.3.3",
+        "postcss": "^8.5.3",
+        "prettier": "^3.5.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "rollup": "^4.34.0",
-        "tailwindcss": "^3.4.10",
+        "rollup": "^4.36.0",
+        "tailwindcss": "^4.0.14",
         "tslib": "^2.8.1",
-        "typescript": "^5.5.4"
+        "typescript": "^5.8.2"
     },
     "lint-staged": {
         "*.{ts,tsx}": [
@@ -81,5 +82,8 @@
     },
     "files": [
         "dist"
-    ]
+    ],
+    "dependencies": {
+        "@tailwindcss/postcss": "^4.0.14"
+    }
 }

postcss.config.mjs

@@ -0,0 +1,6 @@
+const config = {
+    plugins: {
+        "@tailwindcss/postcss": {}
+    }
+};
+export default config;

rollup.config.js → rollup.config.mjs

@@ -2,7 +2,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
 
-module.exports = {
+export default {
     input: "src/index.tsx",
     output: [
         {

src/components/Calendar/Years.tsx

@@ -1,10 +1,9 @@
+import DatepickerContext from "contexts/DatepickerContext";
 import { useContext, useMemo } from "react";
 
 import { generateArrayNumber } from "../../helpers";
 import RoundedButton from "../RoundedButton";
 
-import DatepickerContext from "contexts/DatepickerContext";
-
 interface Props {
     year: number;
     currentYear: number;

src/components/Calendar/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { DateType } from "types";
 
 import { START_WEEK } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
@@ -27,8 +28,6 @@ import Months from "./Months";
 import Week from "./Week";
 import Years from "./Years";
 
-import { DateType } from "types";
-
 const NUMBER_YEARS_SHOW = 12;
 const CALENDAR_SIZE = 42;
 

src/components/Datepicker.tsx

@@ -110,7 +110,7 @@ const Datepicker = (props: DatepickerType) => {
         if (arrow && div && div.classList.contains("block")) {
             div.classList.remove("block");
             div.classList.remove("translate-y-0");
-            div.classList.remove("opacity-1");
+            div.classList.remove("opacity-100");
             div.classList.add("translate-y-4");
             div.classList.add("opacity-0");
             setTimeout(() => {

src/components/Input.tsx

@@ -249,7 +249,7 @@ const Input = () => {
                     div.classList.remove("translate-y-4");
                     div.classList.remove("opacity-0");
                     div.classList.add("translate-y-0");
-                    div.classList.add("opacity-1");
+                    div.classList.add("opacity-100");
                 }, 1);
             }
         }

src/components/Shortcuts.tsx

@@ -74,7 +74,6 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
         <li
             className={getClassName()}
             onClick={() => {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 chosePeriod(props?.item.period);
             }}