@bikiran/utils 2.2.5 → 2.2.7

package/README.md

@@ -1,173 +1,582 @@
-[![npm Version](https://img.shields.io/npm/v/@bikiran/utils.svg?style=flat-square)](https://www.npmjs.com/package/@bikiran/utils)
-[![npm Downloads](https://img.shields.io/npm/dt/@bikiran/utils.svg?style=flat-square)](https://www.npmjs.com/package/@bikiran/utils)
-[![GitHub License](https://img.shields.io/github/license/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/blob/main/LICENSE)
-[![GitHub Issues](https://img.shields.io/github/issues/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/issues)
-[![GitHub Stars](https://img.shields.io/github/stars/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/stargazers)
-[![GitHub Last Commit](https://img.shields.io/github/last-commit/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/commits/main)
+[![npm Version](https://img.shields.io/npm/v/@bikiran/utils.svg?style=flat-square)](https://www.npmjs.com/package/@bikiran/utils)[![npm Version](https://img.shields.io/npm/v/@bikiran/utils.svg?style=flat-square)](https://www.npmjs.com/package/@bikiran/utils)
 
-## Overview
+[![npm Downloads](https://img.shields.io/npm/dt/@bikiran/utils.svg?style=flat-square)](https://www.npmjs.com/package/@bikiran/utils)[![npm Downloads](https://img.shields.io/npm/dt/@bikiran/utils.svg?style=flat-square)](https://www.npmjs.com/package/@bikiran/utils)
 
-A collection of utility components specifically developed for our organization's internal projects. While primarily tailored to our needs, others may find some components useful.
+[![GitHub License](https://img.shields.io/github/license/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/blob/main/LICENSE)[![GitHub License](https://img.shields.io/github/license/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/blob/main/LICENSE)
 
-⚠️ **Important Note**: This package was optimized for our specific use cases and may not work as expected in all projects. Use with caution.
+[![GitHub Issues](https://img.shields.io/github/issues/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/issues)[![GitHub Issues](https://img.shields.io/github/issues/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/issues)
 
-## Dependencies
+[![GitHub Stars](https://img.shields.io/github/stars/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/stargazers)[![GitHub Stars](https://img.shields.io/github/stars/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/stargazers)
+
+[![GitHub Last Commit](https://img.shields.io/github/last-commit/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/commits/main)[![GitHub Last Commit](https://img.shields.io/github/last-commit/bikirandev/bikiran-utils.svg?style=flat-square)](https://github.com/bikirandev/bikiran-utils/commits/main)
+
+
+
+# @bikiran/utils## Overview
+
+
+
+A comprehensive collection of **React components** and **utility functions** specifically developed for modern web applications. This package provides a robust set of UI components, helper functions, and utilities designed to accelerate development while maintaining consistency and performance.A collection of utility components specifically developed for our organization's internal projects. While primarily tailored to our needs, others may find some components useful.
+
+
+
+## 🌟 Overview⚠️ **Important Note**: This package was optimized for our specific use cases and may not work as expected in all projects. Use with caution.
+
+
+
+A collection of utility components specifically developed for our organization's internal projects. While primarily tailored to our needs, others may find some components useful.## Dependencies
+
+
+
+⚠️ **Important Note**: This package was optimized for our specific use cases and may not work as expected in all projects. Use with caution.- `clsx`
 
-- `clsx`
 - `tailwind-merge`
-- `Next.js`
 
-Perfect! Here's how you can update the **"Available Components"** section so that each component is a clickable item linking to its dedicated documentation page in your GitHub wiki:
+## ✨ Key Features- `Next.js`
 
----
+
+
+- **🎨 UI Components**: Pre-built React components with consistent styling## Peer Dependencies
+
+- **🛠️ Utility Functions**: Helper functions for common operations
+
+- **📱 Responsive Design**: Mobile-first, responsive componentsThe following packages are required to be installed in your project:
+
+- **🎯 Theme Integration**: Seamlessly inherits your Tailwind CSS theme
+
+- **⚡ Performance Optimized**: Lightweight and efficient components- `react` (^19.1.0)
+
+- **📦 TypeScript Support**: Full TypeScript definitions included- `react-dom` (^19.1.0)
+
+- **🔧 Configurable**: Highly customizable with sensible defaults- `dayjs` (^1.11.0) - Used for date/time utilities
+
+
+
+## 📦 What's IncludedMake sure to install these peer dependencies in your project:
+
+
+
+### 🧩 UI Components (15)```bash
+
+- **Navigation & Layout**: Custom Sidebar, Header components, Project Selectornpm install react react-dom dayjs
+
+- **User Interface**: Profile Management, User Info, Tooltip components  ```
+
+- **Interactive Elements**: Button Wrapper, Currency Selector, Filter Wrapper
+
+- **Feedback Components**: Loading states, Page Loading, Cookies popupPerfect! Here's how you can update the **"Available Components"** section so that each component is a clickable item linking to its dedicated documentation page in your GitHub wiki:
+
+- **Service Integration**: Services Popup with app listings
+
+- **Data Display**: Pagination, Information Tooltip---
+
+- **Utility Widgets**: Copy Wrapper for easy content copying
 
 ## Available Components
 
-Each component below links to its own documentation page for detailed usage:
+### ⚙️ Utility Functions (11+)
+
+- **Date & Time**: Date formatting, time calculations with dayjs integrationEach component below links to its own documentation page for detailed usage:
+
+- **Text Processing**: String capitalization, copy-to-clipboard functionality
+
+- **Data Structures**: Hash generation, mathematical operations1. [Pagination](https://github.com/bikirandev/bikiran-utils/wiki/02.-Pagination)
+
+- **Environment**: URL generation, domain management2. [FilterBarWrapper](https://github.com/bikirandev/bikiran-utils/wiki/03.-FilterBarWrapper)
+
+- **Styling**: Class name merging with Tailwind CSS3. [ServicesPopup](https://github.com/bikirandev/bikiran-utils/wiki/05.-ServicePopup)
+
+- **State Management**: Cookie handling, local storage utilities4. [ButtonWrapper](https://github.com/bikirandev/bikiran-utils/wiki/04.-ButtonWrapper)
+
+- **Type Safety**: TypeScript definitions and type guards5. [CurrencySelector](https://github.com/bikirandev/bikiran-utils/wiki/06.-CurrencySelector)
 
-1. [Pagination](https://github.com/bikirandev/bikiran-utils/wiki/02.-Pagination)
-2. [FilterBarWrapper](https://github.com/bikirandev/bikiran-utils/wiki/03.-FilterBarWrapper)
-3. [ServicesPopup](https://github.com/bikirandev/bikiran-utils/wiki/05.-ServicePopup)
-4. [ButtonWrapper](https://github.com/bikirandev/bikiran-utils/wiki/04.-ButtonWrapper)
-5. [CurrencySelector](https://github.com/bikirandev/bikiran-utils/wiki/06.-CurrencySelector)
 6. [CustomSidebar](https://github.com/bikirandev/bikiran-utils/wiki/07.-CustomSidebar)
-7. [PageLoading](https://github.com/bikirandev/bikiran-utils/wiki/08.-PageLoading)
+
+## 🏗️ Dependencies7. [PageLoading](https://github.com/bikirandev/bikiran-utils/wiki/08.-PageLoading)
+
 8. [LoadingComp](https://github.com/bikirandev/bikiran-utils/wiki/09.-LoadingComp)
-9. [CookiesAcceptPopup](https://github.com/bikirandev/bikiran-utils/wiki/10.-CookiesAcceptPopup)
-10. [ProfileManage](https://github.com/bikirandev/bikiran-utils/wiki/11.-ProfileManage)
-11. [TooltipUserInfo](https://github.com/bikirandev/bikiran-utils/wiki/12.-TooltipUserInfo)
-12. [UserInfoComp](https://github.com/bikirandev/bikiran-utils/wiki/13.-UserInfoComp)
 
-## Getting Started
+### Core Dependencies9. [CookiesAcceptPopup](https://github.com/bikirandev/bikiran-utils/wiki/10.-CookiesAcceptPopup)
+
+- `clsx` - Conditional class name utility10. [ProfileManage](https://github.com/bikirandev/bikiran-utils/wiki/11.-ProfileManage)
+
+- `tailwind-merge` - Tailwind CSS class merging11. [TooltipUserInfo](https://github.com/bikirandev/bikiran-utils/wiki/12.-TooltipUserInfo)
+
+- `Next.js` - React framework (recommended)12. [UserInfoComp](https://github.com/bikirandev/bikiran-utils/wiki/13.-UserInfoComp)
+
+
+
+### Peer Dependencies## Getting Started
+
 
-### Installation
 
-Install the package via **npm**:
+The following packages are required to be installed in your project:### Installation
+
+
+
+- `react` (^19.1.0) - React libraryInstall the package via **npm**:
+
+- `react-dom` (^19.1.0) - React DOM rendering
+
+- `dayjs` (^1.11.0) - Date/time manipulation and formatting```bash
 
-```bash
 npm install @bikiran/utils
-```
 
-Or via **yarn**:
+**Install peer dependencies:**```
+
+
+
+```bashOr via **yarn**:
+
+npm install react react-dom dayjs
+
+``````bash
 
-```bash
 yarn add @bikiran/utils
-```
 
----
+## 🚀 Available Components```
 
-### How It Works
 
-This package is designed to **seamlessly inherit your project’s Tailwind CSS theme**. It automatically uses your existing:
 
-- **Primary/secondary colors**
-- **Font families**
-- **Spacing scale**
-- **Other design tokens**
+Each component below links to its own documentation page for detailed usage:---
 
-No extra configuration is needed—just ensure your `tailwind.config.js` is properly set up.
 
-#### Example:
+
+### 📋 **Navigation & Layout**### How It Works
+
+1. [CustomSidebar](https://github.com/bikirandev/bikiran-utils/wiki/07.-CustomSidebar) - Responsive sidebar with navigation
+
+2. [ProjectSelector](https://github.com/bikirandev/bikiran-utils/wiki/ProjectSelector) - Project selection dropdownThis package is designed to **seamlessly inherit your project’s Tailwind CSS theme**. It automatically uses your existing:
+
+
+
+### 👤 **User & Profile**  - **Primary/secondary colors**
+
+3. [ProfileManage](https://github.com/bikirandev/bikiran-utils/wiki/11.-ProfileManage) - Complete profile management system- **Font families**
+
+4. [UserInfoComp](https://github.com/bikirandev/bikiran-utils/wiki/13.-UserInfoComp) - User information display- **Spacing scale**
+
+5. [TooltipUserInfo](https://github.com/bikirandev/bikiran-utils/wiki/12.-TooltipUserInfo) - User info in tooltip format- **Other design tokens**
+
+
+
+### 🎛️ **Interactive Controls**No extra configuration is needed—just ensure your `tailwind.config.js` is properly set up.
+
+6. [ButtonWrapper](https://github.com/bikirandev/bikiran-utils/wiki/04.-ButtonWrapper) - Enhanced button component
+
+7. [CurrencySelector](https://github.com/bikirandev/bikiran-utils/wiki/06.-CurrencySelector) - Currency selection dropdown#### Example:
+
+8. [FilterBarWrapper](https://github.com/bikirandev/bikiran-utils/wiki/03.-FilterBarWrapper) - Advanced filtering interface
 
 Your `tailwind.config.js` should define colors using CSS variables like this:
 
-```js
-theme: {
-  extend: {
+### 📄 **Data & Display**
+
+9. [Pagination](https://github.com/bikirandev/bikiran-utils/wiki/02.-Pagination) - Pagination controls```js
+
+10. [InformationTooltip](https://github.com/bikirandev/bikiran-utils/wiki/InformationTooltip) - Information tooltipstheme: {
+
+11. [CopyWrapper](https://github.com/bikirandev/bikiran-utils/wiki/CopyWrapper) - Copy-to-clipboard functionality  extend: {
+
     colors: {
-      primary: {
-        DEFAULT: "var(--primary)",
-        50: "var(--primary-50)",
-        100: "var(--primary-100)",
+
+### ⏳ **Loading & Feedback**      primary: {
+
+12. [PageLoading](https://github.com/bikirandev/bikiran-utils/wiki/08.-PageLoading) - Full-page loading state        DEFAULT: "var(--primary)",
+
+13. [LoadingComp](https://github.com/bikirandev/bikiran-utils/wiki/09.-LoadingComp) - Inline loading component        50: "var(--primary-50)",
+
+14. [CookiesAcceptPopup](https://github.com/bikirandev/bikiran-utils/wiki/10.-CookiesAcceptPopup) - GDPR cookie consent        100: "var(--primary-100)",
+
         200: "var(--primary-200)",
-        300: "var(--primary-300)",
-        500: "var(--primary-500)",
+
+### 🔗 **Integration & Services**        300: "var(--primary-300)",
+
+15. [ServicesPopup](https://github.com/bikirandev/bikiran-utils/wiki/05.-ServicePopup) - Service app launcher        500: "var(--primary-500)",
+
         700: "var(--primary-700)",
-        900: "var(--primary-900)",
+
+## 📚 Getting Started        900: "var(--primary-900)",
+
       },
-      secondary: {
+
+### Installation      secondary: {
+
         DEFAULT: "var(--secondary)",
-        50: "var(--secondary-50)",
+
+Install the package via **npm**:        50: "var(--secondary-50)",
+
         100: "var(--secondary-100)",
-        300: "var(--secondary-300)",
-        500: "var(--secondary-500)",
-        700: "var(--secondary-700)",
+
+```bash        300: "var(--secondary-300)",
+
+npm install @bikiran/utils        500: "var(--secondary-500)",
+
+```        700: "var(--secondary-700)",
+
         900: "var(--secondary-900)",
-      },
+
+Or via **yarn**:      },
+
     },
-  },
-}
-```
 
-This setup allows all components—like `<ButtonWrapper>` and `<CurrencySelector>`—to **automatically inherit your color scheme** across different shades.
+```bash  },
 
-### Basic Usage
+yarn add @bikiran/utils}
 
-1. **Import Components**
+``````
+
+
+
+Or via **pnpm**:This setup allows all components—like `<ButtonWrapper>` and `<CurrencySelector>`—to **automatically inherit your color scheme** across different shades.
+
+
+
+```bash### Basic Usage
+
+pnpm add @bikiran/utils
+
+```1. **Import Components**
+
+
+
+---   ```tsx
 
-   ```tsx
    import { ButtonWrapper, PageLoading } from "7502NPM-Bikiran-Utils";
-   ```
 
-2. **Use with Your Theme**
+### 🎨 How It Works   ```
+
+
+
+This package is designed to **seamlessly inherit your project's Tailwind CSS theme**. It automatically uses your existing:2. **Use with Your Theme**
+
    ```tsx
-   // Buttons will adopt your project's `primary`/`secondary` colors
-   <ButtonWrapper variant="primary">Click Me</ButtonWrapper>
-   ```
+
+- **Primary/secondary colors**   // Buttons will adopt your project's `primary`/`secondary` colors
+
+- **Font families**     <ButtonWrapper variant="primary">Click Me</ButtonWrapper>
+
+- **Spacing scale**   ```
+
+- **Other design tokens**
 
 ### Customization (Optional)
 
+No extra configuration is needed—just ensure your `tailwind.config.js` is properly set up.
+
 To override styles:
 
+#### Example Configuration:
+
 - Use `className` props (e.g., `<ButtonWrapper className="bg-red-500">`)
-- Extend your Tailwind config (recommended for consistency)
 
-### Requirements
+Your `tailwind.config.js` should define colors using CSS variables like this:- Extend your Tailwind config (recommended for consistency)
 
-- Next.js 14+
-- Tailwind CSS v3+ (**must** have `primary`/`secondary` colors defined)
 
-## Documentation
 
-For complete documentation and usage examples, please see:
-[Components Documentation](https://github.com/bikirandev/bikiran-utils/wiki/Home)
+```js### Requirements
 
-Sure! Here's just the **"How to Contribute"** section in Markdown:
+module.exports = {
 
-## 🤝 How to Contribute
+  theme: {- Next.js 14+
 
-We welcome contributions! To contribute to the package :
+    extend: {- Tailwind CSS v3+ (**must** have `primary`/`secondary` colors defined)
+
+      colors: {
+
+        primary: {## Documentation
+
+          DEFAULT: "var(--primary)",
+
+          50: "var(--primary-50)",For complete documentation and usage examples, please see:
+
+          100: "var(--primary-100)",[Components Documentation](https://github.com/bikirandev/bikiran-utils/wiki/Home)
+
+          200: "var(--primary-200)",
+
+          300: "var(--primary-300)",Sure! Here's just the **"How to Contribute"** section in Markdown:
+
+          500: "var(--primary-500)",
+
+          700: "var(--primary-700)",## 🤝 How to Contribute
+
+          900: "var(--primary-900)",
+
+        },We welcome contributions! To contribute to the package :
+
+        secondary: {
+
+          DEFAULT: "var(--secondary)",1. **Fork the repository** and clone your fork locally.
+
+          50: "var(--secondary-50)",2. **Create a new branch** for your feature or bugfix:
+
+          100: "var(--secondary-100)",   ```
+
+          300: "var(--secondary-300)",   git checkout -b my-feature-name
+
+          500: "var(--secondary-500)",   ```
+
+          700: "var(--secondary-700)",3. Make your changes in supporting files.
+
+          900: "var(--secondary-900)",4. If you’re adding a feature or behavior, consider updating the docs or usage example.
+
+        },5. Commit your changes:
+
+      },   ```
+
+    },   git commit -m "feat: add awesome feature"
+
+  },   ```
+
+  plugins: [],6. Push to your fork:
+
+}   ```
+
+```   git push origin my-feature-name
 
-1. **Fork the repository** and clone your fork locally.
-2. **Create a new branch** for your feature or bugfix:
    ```
-   git checkout -b my-feature-name
+
+This setup allows all components—like `<ButtonWrapper>` and `<CurrencySelector>`—to **automatically inherit your color scheme** across different shades.7. **Open a Pull Request** with a clear title and description.
+
+
+
+### 🔧 Basic Usage### 🧪 Before submitting:
+
+
+
+1. **Import Components**- Run and test the component in your app.
+
+- Check for console errors or style breakages.
+
+   ```tsx- Use consistent naming and follow the existing code style.
+
+   import { 
+
+     ButtonWrapper, Thanks for your contribution! ❤️
+
+     PageLoading, 
+
+     UserInfoComp,## License
+
+     CopyWrapper,
+
+     Pagination MIT License
+
+   } from "@bikiran/utils";
+
+   ```## Author
+
+
+
+2. **Import Utility Functions**Developed by [Bikiran](https://bikiran.com/)
+
+
+
+   ```tsx
+   import { 
+     GetDate, 
+     GetTime, 
+     timeAgo,
+     capitalizeFirstLetter 
+   } from "@bikiran/utils";
    ```
-3. Make your changes in supporting files.
-4. If you’re adding a feature or behavior, consider updating the docs or usage example.
-5. Commit your changes:
+
+3. **Use with Your Theme**
+   ```tsx
+   // Components automatically adopt your project's colors
+   <ButtonWrapper variant="primary">Click Me</ButtonWrapper>
+   
+   // Utility functions work independently  
+   const formattedDate = GetDate(Date.now() / 1000, "DD MMM YYYY");
    ```
-   git commit -m "feat: add awesome feature"
+
+### 🎛️ Customization (Optional)
+
+To override default styles:
+
+- **Use `className` props**: `<ButtonWrapper className="bg-red-500 hover:bg-red-600">`
+- **Extend your Tailwind config**: Recommended for maintaining consistency
+- **CSS custom properties**: Override CSS variables in your global styles
+
+### 📋 Requirements
+
+- **React** 19.1.0+
+- **Next.js** 14+ (recommended)
+- **Tailwind CSS** v3+ with `primary`/`secondary` colors defined
+- **dayjs** 1.11.0+ for date utilities
+
+## 🔧 Component Examples
+
+### Quick Examples
+
+```tsx
+// Profile with user information
+<UserInfoComp 
+  name="John Doe" 
+  email="john@example.com"
+  photoUrl="https://example.com/photo.jpg"
+  ImageComponent={Image}
+/>
+
+// Copy functionality
+<CopyWrapper content="Copy this text">
+  Click to copy
+</CopyWrapper>
+
+// Loading states  
+{loading && <PageLoading />}
+{processing && <LoadingComp />}
+
+// Navigation
+<Pagination 
+  currentPage={1}
+  totalPages={10}
+  onPageChange={(page) => setCurrentPage(page)}
+/>
+```
+
+### Advanced Usage
+
+```tsx
+// Complete profile management
+<ProfileManage
+  LinkComponent={Link}
+  ImageComponent={Image}
+  AuthCompWrapper={AuthWrapper}
+  authFn={() => ({
+    authInfo: user,
+    logOut: handleLogout,
+    loginUrl: "/login"
+  })}
+/>
+
+// Service popup with apps
+<ServicesPopup
+  staticAppLogo="/logo.png"
+  appsData={serviceApps}
+  LinkComponent={Link}
+  ImageComponent={Image}
+/>
+```
+
+## 🛠️ Utility Functions
+
+### Date & Time Utilities
+
+```tsx
+import { GetDate, GetTime, timeAgo, timeRemaining } from "@bikiran/utils";
+
+// Format dates
+const formatted = GetDate(timestamp, "DD MMM YYYY"); // "07 Oct 2025"
+const time = GetTime(timestamp, "HH:mm A"); // "02:30 PM"
+
+// Relative time
+const relative = timeAgo(timestamp); // "2 hours ago"
+const remaining = timeRemaining(futureTimestamp); // "3 days remaining"
+```
+
+### Text & Data Utilities
+
+```tsx
+import { capitalizeFirstLetter, Copy } from "@bikiran/utils";
+
+// Text processing
+const capitalized = capitalizeFirstLetter("hello world"); // "Hello world"
+
+// Copy functionality (React hook)
+const MyCopyComponent = () => {
+  const { copy, isCopied } = Copy();
+  
+  return (
+    <button onClick={() => copy("Text to copy")}>
+      {isCopied ? "Copied!" : "Copy Text"}
+    </button>
+  );
+};
+```
+
+### CSS & Styling
+
+```tsx
+import { cn } from "@bikiran/utils";
+
+// Merge Tailwind classes efficiently
+const buttonClasses = cn(
+  "px-4 py-2 rounded",
+  isActive && "bg-blue-500",
+  isDisabled && "opacity-50 cursor-not-allowed"
+);
+```
+
+## 📖 Documentation
+
+For complete documentation and usage examples, please see:
+[**📚 Components Documentation**](https://github.com/bikirandev/bikiran-utils/wiki/Home)
+
+### 🔗 Quick Links
+- [Installation Guide](https://github.com/bikirandev/bikiran-utils/wiki/Installation)
+- [Component API Reference](https://github.com/bikirandev/bikiran-utils/wiki/Components)
+- [Utility Functions](https://github.com/bikirandev/bikiran-utils/wiki/Utilities)
+- [Examples & Demos](https://github.com/bikirandev/bikiran-utils/wiki/Examples)
+
+## 🤝 How to Contribute
+
+We welcome contributions! To contribute to the package:
+
+1. **Fork the repository** and clone your fork locally
+2. **Create a new branch** for your feature or bugfix:
+   ```bash
+   git checkout -b feature/my-awesome-feature
    ```
-6. Push to your fork:
+3. **Make your changes** in supporting files
+4. **Add tests** and update documentation if needed
+5. **Test your changes** thoroughly
+6. **Commit your changes** with descriptive messages:
+   ```bash
+   git commit -m "feat: add awesome new feature"
    ```
-   git push origin my-feature-name
+7. **Push to your fork** and create a Pull Request:
+   ```bash
+   git push origin feature/my-awesome-feature
    ```
-7. **Open a Pull Request** with a clear title and description.
 
-### 🧪 Before submitting:
+### 🧪 Before Submitting
 
-- Run and test the component in your app.
-- Check for console errors or style breakages.
-- Use consistent naming and follow the existing code style.
+- ✅ Run tests and ensure all pass
+- ✅ Test components in a real application  
+- ✅ Check for console errors or style conflicts
+- ✅ Follow existing code style and naming conventions
+- ✅ Update documentation for new features
+- ✅ Add TypeScript definitions for new exports
+
+### 📝 Contribution Guidelines
+
+- **Bug Reports**: Use GitHub Issues with detailed reproduction steps
+- **Feature Requests**: Discuss in Issues before implementing
+- **Code Style**: Follow existing patterns and use TypeScript
+- **Testing**: Add tests for new functionality
+- **Documentation**: Update README and wiki documentation
 
 Thanks for your contribution! ❤️
 
-## License
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 👨‍💻 Author
+
+**Developed by [Kumar Bishojit Paul](https://bikiran.com/)**
+
+- 🌐 Website: [bikiran.com](https://bikiran.com/)
+- 📧 Email: [Contact](https://bikiran.com/contact)
+- 🐙 GitHub: [@bikirandev](https://github.com/bikirandev)
+
+---
 
-MIT License
+<div align="center">
 
-## Author
+**Made with ❤️ for the React community**
 
-Developed by [Bikiran](https://bikiran.com/)
+[⭐ Star this repo](https://github.com/bikirandev/bikiran-utils) • [🐛 Report Bug](https://github.com/bikirandev/bikiran-utils/issues) • [💡 Request Feature](https://github.com/bikirandev/bikiran-utils/issues/new)
 
+</div>

package/dist/index.d.ts

@@ -13,3 +13,15 @@ export { default as UserInfoComp } from "./components/user-info/UserInfoComp";
 export { default as ProjectSelector } from "./components/project-selector/ProjectSelector";
 export { default as InformationTooltip } from "./components/information-tooltip/InformationTooltip";
 export { default as CopyWrapper } from "./components/copy-wrapper/CopyWrapper";
+export { GetDate, GetTime, timeAgo, timeRemaining, getTimestamp, } from "./lib/utils/date";
+export { default as capitalizeFirstLetter } from "./lib/utils/capitalizeFirstLetter";
+export { cn } from "./lib/utils/cn";
+export { default as Copy } from "./lib/utils/Copy";
+export { default as Cookie } from "./lib/utils/Cookie";
+export { evaluate } from "./lib/utils/math";
+export { md5 } from "./lib/utils/hash";
+export { convertToYears } from "./lib/utils/convertToYears";
+export { showCurrencySign, showInt } from "./lib/utils/show";
+export { addOption, addOption2 } from "./lib/utils/option";
+export { getBikiranUrl, getAccountUrl, getApiUrl, getApi2Url, getApi3Url, getBaseDomain, isDev, getMode, } from "./lib/utils/Env";
+export type { TInputChangeEvent, TTextAreaChangeEvent, TMouseEvent, TFormEvent, TKeyboardEvent, TFocusEvent, TDragEvent, TState, } from "./lib/types/GlobalType";

package/dist/index.js

@@ -13,3 +13,14 @@ export { default as UserInfoComp } from "./components/user-info/UserInfoComp";
 export { default as ProjectSelector } from "./components/project-selector/ProjectSelector";
 export { default as InformationTooltip } from "./components/information-tooltip/InformationTooltip";
 export { default as CopyWrapper } from "./components/copy-wrapper/CopyWrapper";
+export { GetDate, GetTime, timeAgo, timeRemaining, getTimestamp, } from "./lib/utils/date";
+export { default as capitalizeFirstLetter } from "./lib/utils/capitalizeFirstLetter";
+export { cn } from "./lib/utils/cn";
+export { default as Copy } from "./lib/utils/Copy";
+export { default as Cookie } from "./lib/utils/Cookie";
+export { evaluate } from "./lib/utils/math";
+export { md5 } from "./lib/utils/hash";
+export { convertToYears } from "./lib/utils/convertToYears";
+export { showCurrencySign, showInt } from "./lib/utils/show";
+export { addOption, addOption2 } from "./lib/utils/option";
+export { getBikiranUrl, getAccountUrl, getApiUrl, getApi2Url, getApi3Url, getBaseDomain, isDev, getMode, } from "./lib/utils/Env";

package/dist/index.ts

@@ -13,3 +13,39 @@ export { default as UserInfoComp } from "./components/user-info/UserInfoComp";
 export { default as ProjectSelector } from "./components/project-selector/ProjectSelector";
 export { default as InformationTooltip } from "./components/information-tooltip/InformationTooltip";
 export { default as CopyWrapper } from "./components/copy-wrapper/CopyWrapper";
+export {
+  GetDate,
+  GetTime,
+  timeAgo,
+  timeRemaining,
+  getTimestamp,
+} from "./lib/utils/date";
+export { default as capitalizeFirstLetter } from "./lib/utils/capitalizeFirstLetter";
+export { cn } from "./lib/utils/cn";
+export { default as Copy } from "./lib/utils/Copy";
+export { default as Cookie } from "./lib/utils/Cookie";
+export { evaluate } from "./lib/utils/math";
+export { md5 } from "./lib/utils/hash";
+export { convertToYears } from "./lib/utils/convertToYears";
+export { showCurrencySign, showInt } from "./lib/utils/show";
+export { addOption, addOption2 } from "./lib/utils/option";
+export {
+  getBikiranUrl,
+  getAccountUrl,
+  getApiUrl,
+  getApi2Url,
+  getApi3Url,
+  getBaseDomain,
+  isDev,
+  getMode,
+} from "./lib/utils/Env";
+export type {
+  TInputChangeEvent,
+  TTextAreaChangeEvent,
+  TMouseEvent,
+  TFormEvent,
+  TKeyboardEvent,
+  TFocusEvent,
+  TDragEvent,
+  TState,
+} from "./lib/types/GlobalType";

package/dist/lib/utils/convertToYears.d.ts

@@ -0,0 +1 @@
+export declare function convertToYears(quantity: number, unit?: string): string;

package/dist/lib/utils/convertToYears.js

@@ -0,0 +1,42 @@
+export function convertToYears(quantity, unit) {
+    // Default to "months" if no unit provided
+    const normalizedUnit = (unit === null || unit === void 0 ? void 0 : unit.toLowerCase()) || "months";
+    // Calculate years based on unit
+    let years;
+    switch (normalizedUnit) {
+        case "day":
+        case "days":
+            years = quantity / 365;
+            // If less than a year, return the original quantity with unit
+            if (years < 1)
+                return `${quantity} D`;
+            break;
+        case "week":
+        case "weeks":
+            years = quantity / 52;
+            // If less than a year, return the original quantity with unit
+            if (years < 1)
+                return `${quantity} W`;
+            break;
+        case "month":
+        case "months":
+            years = quantity / 12;
+            // If less than a year, return the original quantity with unit
+            if (years < 1)
+                return `${quantity} M`;
+            break;
+        case "year":
+        case "years":
+            years = quantity;
+            break;
+        default:
+            years = quantity / 12; // Default to months if unknown unit
+            // If less than a year, return the original quantity with unit
+            if (years < 1)
+                return `${quantity} M`;
+    }
+    // Format the result with up to 2 decimal places, removing trailing zeros
+    const formattedYears = years % 1 === 0 ? years.toString() : years.toFixed(2).replace(/\.?0+$/, "");
+    // Return the formatted result
+    return `${formattedYears}y`;
+}

package/dist/lib/utils/convertToYears.ts

@@ -0,0 +1,42 @@
+export function convertToYears(quantity: number, unit?: string): string {
+  // Default to "months" if no unit provided
+  const normalizedUnit = unit?.toLowerCase() || "months";
+
+  // Calculate years based on unit
+  let years: number;
+  switch (normalizedUnit) {
+    case "day":
+    case "days":
+      years = quantity / 365;
+      // If less than a year, return the original quantity with unit
+      if (years < 1) return `${quantity} D`;
+      break;
+    case "week":
+    case "weeks":
+      years = quantity / 52;
+      // If less than a year, return the original quantity with unit
+      if (years < 1) return `${quantity} W`;
+      break;
+    case "month":
+    case "months":
+      years = quantity / 12;
+      // If less than a year, return the original quantity with unit
+      if (years < 1) return `${quantity} M`;
+      break;
+    case "year":
+    case "years":
+      years = quantity;
+      break;
+    default:
+      years = quantity / 12; // Default to months if unknown unit
+      // If less than a year, return the original quantity with unit
+      if (years < 1) return `${quantity} M`;
+  }
+
+  // Format the result with up to 2 decimal places, removing trailing zeros
+  const formattedYears =
+    years % 1 === 0 ? years.toString() : years.toFixed(2).replace(/\.?0+$/, "");
+
+  // Return the formatted result
+  return `${formattedYears}y`;
+}

package/dist/lib/utils/date.d.ts

@@ -0,0 +1,5 @@
+export declare function GetDate(timeStamp: number | null | undefined, format?: string): string | null;
+export declare function GetTime(timeStamp: number | null | undefined, format?: string): string | null;
+export declare const timeAgo: (timestamp: number) => string;
+export declare const timeRemaining: (timestamp: number) => string;
+export declare const getTimestamp: () => number;

package/dist/lib/utils/date.js

@@ -0,0 +1,65 @@
+import dayjs from "dayjs";
+export function GetDate(timeStamp, format) {
+    if (!timeStamp) {
+        return null;
+    }
+    const dateFormat = dayjs(timeStamp * 1000).format(format || `DD ${`MMMM`.slice(0, 3)} YYYY`);
+    return dateFormat.toString() !== "Invalid Date" ? dateFormat : "--";
+}
+export function GetTime(timeStamp, format = "h:mm:ss A") {
+    if (!timeStamp) {
+        return null;
+    }
+    const dateFormat = dayjs(timeStamp * 1000).format(format);
+    return dateFormat.toString() || null;
+}
+export const timeAgo = (timestamp) => {
+    const now = new Date();
+    const date = new Date(timestamp * 1000); // Convert seconds to milliseconds
+    const seconds = Math.floor((now - date) / 1000);
+    let interval = Math.floor(seconds / 31536000); // 1 year in seconds
+    if (interval > 1)
+        return `${interval} years ago`;
+    interval = Math.floor(seconds / 2592000); // 1 month in seconds
+    if (interval > 1)
+        return `${interval} months ago`;
+    interval = Math.floor(seconds / 86400); // 1 day in seconds
+    if (interval > 1)
+        return `${interval} days ago`;
+    interval = Math.floor(seconds / 3600); // 1 hour in seconds
+    if (interval > 1)
+        return `${interval} hours ago`;
+    interval = Math.floor(seconds / 60); // 1 minute in seconds
+    if (interval > 1)
+        return `${interval} minutes ago`;
+    return `${seconds} seconds ago`;
+};
+export const timeRemaining = (timestamp) => {
+    const now = new Date();
+    const date = new Date(timestamp * 1000); // Convert seconds to milliseconds
+    const seconds = Math.floor((date.getTime() - now.getTime()) / 1000); // Remaining seconds
+    if (seconds < 0) {
+        return "Time has already passed"; // Handle past timestamp
+    }
+    let interval = Math.floor(seconds / 31536000); // 1 year in seconds
+    if (interval > 1)
+        return `${interval} years remaining`;
+    interval = Math.floor(seconds / 2592000); // 1 month in seconds
+    if (interval > 1)
+        return `${interval} months remaining`;
+    interval = Math.floor(seconds / 86400); // 1 day in seconds
+    if (interval > 1)
+        return `${interval} days remaining`;
+    interval = Math.floor(seconds / 3600); // 1 hour in seconds
+    if (interval > 1)
+        return `${interval} hours remaining`;
+    interval = Math.floor(seconds / 60); // 1 minute in seconds
+    if (interval > 1)
+        return `${interval} minutes remaining`;
+    return `${seconds} seconds remaining`;
+};
+export const getTimestamp = () => {
+    let timeStamp = new Date().getTime();
+    timeStamp = Math.floor(timeStamp / 1000);
+    return timeStamp;
+};

package/dist/lib/utils/date.ts

@@ -0,0 +1,74 @@
+import dayjs from "dayjs";
+
+export function GetDate(
+  timeStamp: number | null | undefined,
+  format?: string
+): string | null {
+  if (!timeStamp) {
+    return null;
+  }
+  const dateFormat = dayjs(timeStamp * 1000).format(
+    format || `DD ${`MMMM`.slice(0, 3)} YYYY`
+  );
+  return dateFormat.toString() !== "Invalid Date" ? dateFormat : "--";
+}
+
+export function GetTime(
+  timeStamp: number | null | undefined,
+  format: string = "h:mm:ss A"
+): string | null {
+  if (!timeStamp) {
+    return null;
+  }
+  const dateFormat = dayjs(timeStamp * 1000).format(format);
+  return dateFormat.toString() || null;
+}
+
+export const timeAgo = (timestamp: number) => {
+  const now: any = new Date();
+  const date: any = new Date(timestamp * 1000); // Convert seconds to milliseconds
+  const seconds = Math.floor((now - date) / 1000);
+
+  let interval = Math.floor(seconds / 31536000); // 1 year in seconds
+
+  if (interval > 1) return `${interval} years ago`;
+  interval = Math.floor(seconds / 2592000); // 1 month in seconds
+  if (interval > 1) return `${interval} months ago`;
+  interval = Math.floor(seconds / 86400); // 1 day in seconds
+  if (interval > 1) return `${interval} days ago`;
+  interval = Math.floor(seconds / 3600); // 1 hour in seconds
+  if (interval > 1) return `${interval} hours ago`;
+  interval = Math.floor(seconds / 60); // 1 minute in seconds
+  if (interval > 1) return `${interval} minutes ago`;
+  return `${seconds} seconds ago`;
+};
+
+export const timeRemaining = (timestamp: number) => {
+  const now: Date = new Date();
+  const date: Date = new Date(timestamp * 1000); // Convert seconds to milliseconds
+  const seconds = Math.floor((date.getTime() - now.getTime()) / 1000); // Remaining seconds
+
+  if (seconds < 0) {
+    return "Time has already passed"; // Handle past timestamp
+  }
+
+  let interval = Math.floor(seconds / 31536000); // 1 year in seconds
+
+  if (interval > 1) return `${interval} years remaining`;
+  interval = Math.floor(seconds / 2592000); // 1 month in seconds
+  if (interval > 1) return `${interval} months remaining`;
+  interval = Math.floor(seconds / 86400); // 1 day in seconds
+  if (interval > 1) return `${interval} days remaining`;
+  interval = Math.floor(seconds / 3600); // 1 hour in seconds
+  if (interval > 1) return `${interval} hours remaining`;
+  interval = Math.floor(seconds / 60); // 1 minute in seconds
+  if (interval > 1) return `${interval} minutes remaining`;
+
+  return `${seconds} seconds remaining`;
+};
+
+export const getTimestamp = (): number => {
+  let timeStamp = new Date().getTime();
+  timeStamp = Math.floor(timeStamp / 1000);
+  return timeStamp;
+};

package/dist/lib/utils/hash.d.ts

@@ -0,0 +1 @@
+export declare const md5: (input: string) => string;

package/dist/lib/utils/hash.js

@@ -0,0 +1,4 @@
+import { createHash } from "crypto";
+export const md5 = (input) => {
+    return createHash("md5").update(input).digest("hex");
+};

package/dist/lib/utils/hash.ts

@@ -0,0 +1,5 @@
+import { createHash } from "crypto";
+
+export const md5 = (input: string): string => {
+  return createHash("md5").update(input).digest("hex");
+};

package/dist/lib/utils/math.d.ts

@@ -0,0 +1,4 @@
+export declare const evaluate: (val: any) => any;
+export declare const round: (value: number, decimals?: number) => number;
+declare const _default: null;
+export default _default;

package/dist/lib/utils/math.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-eval */
+export const evaluate = (val) => {
+    let output = val;
+    const isValOperatorOrNumber = /^[\d.*/+=-]*$/.test(val);
+    if (output.substring(output.length - 1, output.length) === "=") {
+        if (isValOperatorOrNumber) {
+            try {
+                output = eval(output.substring(0, output.length - 1));
+            }
+            catch (error) {
+                output = 0;
+            }
+        }
+        else {
+            output = 0;
+        }
+    }
+    return output;
+};
+export const round = (value, decimals = 4) => {
+    return Number(Math.round(Number(value + "e" + decimals)) + "e-" + decimals);
+};
+export default null;

package/dist/lib/utils/math.ts

@@ -0,0 +1,26 @@
+/* eslint-disable no-eval */
+
+export const evaluate = (val: any) => {
+  let output = val;
+
+  const isValOperatorOrNumber = /^[\d.*/+=-]*$/.test(val);
+
+  if (output.substring(output.length - 1, output.length) === "=") {
+    if (isValOperatorOrNumber) {
+      try {
+        output = eval(output.substring(0, output.length - 1));
+      } catch (error) {
+        output = 0;
+      }
+    } else {
+      output = 0;
+    }
+  }
+  return output;
+};
+
+export const round = (value: number, decimals: number = 4) => {
+  return Number(Math.round(Number(value + "e" + decimals)) + "e-" + decimals);
+};
+
+export default null;

package/dist/lib/utils/show.d.ts

@@ -0,0 +1,2 @@
+export declare const showCurrencySign: (currency?: string) => "$" | "৳" | "₹";
+export declare const showInt: (value: number, fixedCount?: number) => string;

package/dist/lib/utils/show.js

@@ -0,0 +1,34 @@
+import Cookie from "./Cookie";
+import { getBaseDomain } from "./Env";
+export const showCurrencySign = (currency) => {
+    const localeData = typeof window !== "undefined" ? new Cookie("locale", getBaseDomain()).getCookie() : null;
+    const value = currency === null || currency === void 0 ? void 0 : currency.toLowerCase();
+    const localeCurrency = localeData ? JSON.parse(localeData).currency : "";
+    if (currency !== undefined && (currency === null || currency === void 0 ? void 0 : currency.length) > 0) {
+        return value === "usd" ? "$" : value === "bdt" ? "৳" : "₹";
+    }
+    return (localeCurrency === null || localeCurrency === void 0 ? void 0 : localeCurrency.toLowerCase()) === "usd" ? "$" : (localeCurrency === null || localeCurrency === void 0 ? void 0 : localeCurrency.toLowerCase()) === "bdt" ? "৳" : "₹";
+};
+export const showInt = (value, fixedCount = 2) => {
+    var _a;
+    // Handle string input if needed
+    if (typeof value === "string") {
+        value = parseFloat(value || "0");
+    }
+    let formattedInt = (_a = value === null || value === void 0 ? void 0 : value.toFixed(fixedCount)) !== null && _a !== void 0 ? _a : "0.00";
+    const [integerPart, decimalPart] = formattedInt === null || formattedInt === void 0 ? void 0 : formattedInt.split(".");
+    const formattedInteger = formatNumber(integerPart);
+    formattedInt = decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;
+    return formattedInt;
+};
+function formatNumber(numStr) {
+    const num = parseFloat(numStr);
+    if (isNaN(num))
+        return numStr; // handle invalid numbers
+    // Use international formatting (3-digit grouping)
+    return new Intl.NumberFormat("en-US").format(num);
+    // Or alternatively, without Intl.NumberFormat:
+    // const parts = numStr.split('.');
+    // parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    // return parts.join('.');
+}

package/dist/lib/utils/show.ts

@@ -0,0 +1,40 @@
+import Cookie from "./Cookie";
+import { getBaseDomain } from "./Env";
+
+export const showCurrencySign = (currency?: string) => {
+  const localeData = typeof window !== "undefined" ? new Cookie("locale", getBaseDomain()).getCookie() : null;
+  const value = currency?.toLowerCase();
+  const localeCurrency = localeData ? JSON.parse(localeData).currency : "";
+
+  if (currency !== undefined && currency?.length > 0) {
+    return value === "usd" ? "$" : value === "bdt" ? "৳" : "₹";
+  }
+  return localeCurrency?.toLowerCase() === "usd" ? "$" : localeCurrency?.toLowerCase() === "bdt" ? "৳" : "₹";
+};
+
+export const showInt = (value: number, fixedCount: number = 2) => {
+  // Handle string input if needed
+  if (typeof value === "string") {
+    value = parseFloat(value || "0");
+  }
+
+  let formattedInt = value?.toFixed(fixedCount) ?? "0.00";
+  const [integerPart, decimalPart] = formattedInt?.split(".");
+  const formattedInteger = formatNumber(integerPart);
+  formattedInt = decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;
+
+  return formattedInt;
+};
+
+function formatNumber(numStr: string): string {
+  const num = parseFloat(numStr);
+  if (isNaN(num)) return numStr; // handle invalid numbers
+
+  // Use international formatting (3-digit grouping)
+  return new Intl.NumberFormat("en-US").format(num);
+
+  // Or alternatively, without Intl.NumberFormat:
+  // const parts = numStr.split('.');
+  // parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  // return parts.join('.');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bikiran/utils",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -41,7 +41,8 @@
   },
   "peerDependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "dayjs": "^1.11.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -50,6 +51,7 @@
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
     "copyfiles": "^2.4.1",
+    "dayjs": "^1.11.13",
     "jsdom": "^26.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",