refactor: add heroicons and improve readme

README.md

@@ -20,7 +20,7 @@
 
 ## Demo
 
-![Date Range Input Demo](https://github.com/user-attachments/assets/49743911-e269-4456-8cf1-5e8932e9d1da)
+![React Date Range Input Demo](https://github.com/user-attachments/assets/0e0f9afe-7684-4f28-8fba-414c7d4e3cc6)
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cameratajs/react-date-range-input",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -29,15 +29,22 @@
     "date-input",
     "date-range-selector"
   ],
-  "author": "",
+  "author": "Daniel Sousa",
   "license": "MIT",
-  "description": "",
+  "description": "A lightweight, customizable React Date Range Input component with popup calendar(s). Built with TypeScript and Pure CSS.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dannielss/react-date-range-input"
+  },
+  "homepage": "https://github.com/dannielss/react-date-range-input",
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-icons": "^5.5.0"
+    "date-fns": "^4.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.4",
@@ -57,6 +64,7 @@
     "jest-transform-stub": "^2.0.0",
     "postcss": "^8.5.3",
     "rollup": "^4.39.0",
+    "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "tailwindcss": "^4.1.1",
     "ts-jest": "^29.3.2",

rollup.config.js

@@ -4,6 +4,7 @@ import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 import { babel } from '@rollup/plugin-babel';
 import terser from '@rollup/plugin-terser';
+import analyze from 'rollup-plugin-analyzer';
 
 export default {
   input: 'index.ts',
@@ -15,12 +16,18 @@ export default {
     resolve(),
     commonjs(),
     typescript({ tsconfig: './tsconfig.json' }),
-    babel({ babelHelpers: 'bundled' }),
+    babel({
+      babelHelpers: 'bundled',
+    }),
     postcss({
+      extract: true,
       inject: true,
       minimize: true,
     }),
     terser(),
+    analyze({
+      summaryOnly: true,
+    }),
   ],
   external: ['react', 'react-dom'],
 };

src/components/DateRangeInput/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { addMonths } from 'date-fns';
-import { FaArrowRight, FaArrowLeft } from 'react-icons/fa';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/solid';
 import { useAnchorPosition } from '../../hooks';
 import clsx from 'clsx';
 import Calendar from '../Calendar';
@@ -130,7 +130,7 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
               onClick={() => setCurrentMonth(addMonths(currentMonth, -1))}
               data-testid="left-arrow"
             >
-              <FaArrowLeft />
+              <ArrowLeftIcon width={20} />
             </button>
 
             {Array.from({ length: calendars }).map((_, index) => (
@@ -153,7 +153,7 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
               onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
               data-testid="right-arrow"
             >
-              <FaArrowRight />
+              <ArrowRightIcon width={20} />
             </button>
           </div>
         </div>

src/components/Input/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IoClose } from 'react-icons/io5';
+import { XMarkIcon } from '@heroicons/react/24/solid';
 import { formatDate } from '../../utils';
 import './style.css';
 
@@ -31,7 +31,7 @@ const Input: React.FC<InputProps> = ({
       <div className="close-container">
         <div className="separator" />
         <div className="close-icon" onClick={handleClear} data-testid="close-icon">
-          <IoClose />
+          <XMarkIcon width={20} />
         </div>
       </div>
     </div>

src/components/Input/style.css

@@ -46,6 +46,7 @@
   .close-icon:hover {
     background: rgba(0, 0, 0, 0.1);
     border-radius: 100%;
+    cursor: pointer;
   }
 }