@bikiran/utils 1.18.1 → 2.0.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Kumar Bishojit Paul
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Kumar Bishojit Paul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,102 +1,168 @@
-# 7502NPM-Bikiran-Utils
-
-# Dependencies
-
-**1.clsx**
-**2.tailwind-merge**
-**3.Nextjs**
-
-# IMPORTANT NOTE
-
-This package was specifically developed and tailored for our organization’s projects. It may not be particularly helpful for your needs, but you’re welcome to try it out. Just keep in mind that it could potentially break your project—or it might work exactly as intended.
-
-## 🎨 **Available Components**
-
-```tsx
-<Pagination  />
-<FilterBarWrapper />
-<ServicesPopup />
-<ButtonWrapper />
-<CurrencySelector />
-<CustomSidebar/>
-<PageLoading />
-<LoadingComp  />
-<CookiesAcceptPopup />
-<ProfileManage />
-<TooltipUserInfo />
-<UserInfoComp />
-```
-
-## Pagination
-
-You need to write this code where you will use your pagination .This will Check query Params and create a new url . which is important for this component
-
-```tsx
-const pathname = usePathname();
-const searchParams = useSearchParams();
-const currentPage = Number(searchParams.get("CurrentPage"));
-const queries = new URLSearchParams(searchParams.toString());
-
-// Make URL with existing queries if any
-const mkUrl = (number: number) => {
-  queries.set("CurrentPage", number.toString());
-  return `${pathname}?${queries.toString()}`;
-};
-```
-
-# Props and Usage
-
-## Props
-
-| prop        | type                                           | description                                     | default value           | priority   |
-| ----------- | ---------------------------------------------- | ----------------------------------------------- | ----------------------- | ---------- |
-| data        | TPagination                                    | this is an object                               | {} as TPagination       | ✅Required |
-| disabled    | boolean                                        | determine is that pagination is disabled or not | false                   | ❌Optional |
-| currentPage | number                                         | Which page it is now                            | 0                       | ✅Required |
-| mkUrl       | (page: number) => string                       | add query params                                | (page:number) => string | ✅Required |
-| link        | FC<{ href: string; children: React.ReactNode } | Pass the link tag here                          | null                    | ✅Required |
-
-## Usage
-
-```tsx
-import { usePathname, useSearchParams } from "next/navigation";
-import Link from "next/link";
-import Pagination from "your-pagination-package";
-
-const MyPagination = ({ data }) => {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const currentPage = Number(searchParams.get("CurrentPage")) || 1;
-
-  const makeUrl = (num: number) => {
-    const queries = new URLSearchParams(searchParams.toString());
-    queries.set("CurrentPage", num.toString());
-    return `${pathname}?${queries.toString()}`;
-  };
-
-  return (
-    <Pagination
-      data={data}
-      currentPage={currentPage}
-      makeUrl={makeUrl}
-      LinkComponent={Link}
-    />
-  );
-};
-```
-
-## 🔗 **More Details**
-
-For more details, visit the [GitHub repository](https://github.com/bikirandev/7502NPM-Bikiran-Utils/tree/main/documents).
-
----
-
-## 🔗 **License**
-
-This project is licensed under the MIT License.
-
----
-
-## 👨‍💻 **Author**
-
-Created by [bikiran.com](https://bikiran.com/). Feel free to contribute!
+# 7502NPM-Bikiran-Utils
+
+## Overview
+
+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.
+
+⚠️ **Important Note**: This package was optimized for our specific use cases and may not work as expected in all projects. Use with caution.
+
+## Dependencies
+
+- `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:
+
+---
+
+## Available Components
+
+Each component below links to its own documentation page for detailed usage:
+
+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)
+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
+
+### Installation
+
+Install the package via **npm**:
+
+```bash
+npm install @bikiran/utils
+```
+
+Or via **yarn**:
+
+```bash
+yarn add @bikiran/utils
+```
+
+---
+
+### 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**
+
+No extra configuration is needed—just ensure your `tailwind.config.js` is properly set up.
+
+#### Example:
+
+Your `tailwind.config.js` should define colors using CSS variables like this:
+
+```js
+theme: {
+  extend: {
+    colors: {
+      primary: {
+        DEFAULT: "var(--primary)",
+        50: "var(--primary-50)",
+        100: "var(--primary-100)",
+        200: "var(--primary-200)",
+        300: "var(--primary-300)",
+        500: "var(--primary-500)",
+        700: "var(--primary-700)",
+        900: "var(--primary-900)",
+      },
+      secondary: {
+        DEFAULT: "var(--secondary)",
+        50: "var(--secondary-50)",
+        100: "var(--secondary-100)",
+        300: "var(--secondary-300)",
+        500: "var(--secondary-500)",
+        700: "var(--secondary-700)",
+        900: "var(--secondary-900)",
+      },
+    },
+  },
+}
+```
+
+This setup allows all components—like `<ButtonWrapper>` and `<CurrencySelector>`—to **automatically inherit your color scheme** across different shades.
+
+### Basic Usage
+
+1. **Import Components**
+
+   ```tsx
+   import { ButtonWrapper, PageLoading } from "7502NPM-Bikiran-Utils";
+   ```
+
+2. **Use with Your Theme**
+   ```tsx
+   // Buttons will adopt your project's `primary`/`secondary` colors
+   <ButtonWrapper variant="primary">Click Me</ButtonWrapper>
+   ```
+
+### Customization (Optional)
+
+To override styles:
+
+- Use `className` props (e.g., `<ButtonWrapper className="bg-red-500">`)
+- Extend your Tailwind config (recommended for consistency)
+
+### Requirements
+
+- 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)
+
+Sure! Here's just the **"How to Contribute"** section in Markdown:
+
+## 🤝 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:
+   ```
+   git checkout -b my-feature-name
+   ```
+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:
+   ```
+   git commit -m "feat: add awesome feature"
+   ```
+6. Push to your fork:
+   ```
+   git push origin my-feature-name
+   ```
+7. **Open a Pull Request** with a clear title and description.
+
+### 🧪 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.
+
+Thanks for your contribution! ❤️
+
+## License
+
+MIT License
+
+## Author
+
+Developed by [Bikiran](https://bikiran.com/)
+

package/dist/components/Profile/authTypes.ts

@@ -1,22 +1,22 @@
-export type TAuthInfo = {
-    loading: boolean;
-    currentUser: TAuthUser;
-    error: boolean;
-    message: string;
-    referenceName?: string;
-    provider?: string;
-  };
-
-  export type TAuthUser = {
-    name: string;
-    username: string;
-    sex: string;
-    genderTxt: string;
-    dob: string;
-    dobText: string;
-    phone: string;
-    email: string;
-    photoUrl: string;
-    userUid: string;
-    refreshToken: string;
+export type TAuthInfo = {
+    loading: boolean;
+    currentUser: TAuthUser;
+    error: boolean;
+    message: string;
+    referenceName?: string;
+    provider?: string;
+  };
+
+  export type TAuthUser = {
+    name: string;
+    username: string;
+    sex: string;
+    genderTxt: string;
+    dob: string;
+    dobText: string;
+    phone: string;
+    email: string;
+    photoUrl: string;
+    userUid: string;
+    refreshToken: string;
   };

package/dist/components/Profile/style/LoginBtn.module.css

@@ -1,6 +1,6 @@
-.loginBtn {
-  @apply bg-secondary-100 text-secondary rounded-lg leading-6 text-base font-normal p-2 w-24 hover:text-white hover:bg-secondary transition;
-}
-.userBtn {
-  @apply block size-7 cursor-pointer;
-}
+.loginBtn {
+  @apply bg-secondary-100 text-secondary rounded-lg leading-6 text-base font-normal p-2 w-24 hover:text-white hover:bg-secondary transition;
+}
+.userBtn {
+  @apply block size-7 cursor-pointer;
+}

package/dist/components/Profile/style/ProfileManage.module.css

@@ -1,6 +1,6 @@
-.profileManage {
-  @apply relative z-50;
-}
-.content {
-  @apply flex items-center gap-2;
-}
+.profileManage {
+  @apply relative z-50;
+}
+.content {
+  @apply flex items-center gap-2;
+}

package/dist/components/Profile/style/ProfileMenuList.module.css

@@ -1,50 +1,50 @@
-.optionBillingContainer {
-  @apply flex items-center gap-[10px] px-[15px] py-[11px] bg-white;
-}
-.billingIcon {
-  @apply size-7;
-}
-.billingText {
-  @apply text-primary-900 font-normal text-base;
-}
-.billingSubmenuLinks {
-  @apply text-primary-700 hover:text-secondary-700 font-normal text-[13px] transition-all relative;
-}
-.linkContainer {
-  @apply flex items-center gap-2;
-}
-
-.optionLink {
-  @apply flex items-center gap-2.5 px-[15px] py-[11px] bg-white relative;
-}
-
-.optionIcon {
-  @apply size-7;
-}
-.optionTitle {
-  @apply text-primary-900 font-normal text-base;
-}
-
-.badge {
-  @apply size-6.5 rounded-full flex justify-center items-center bg-[#FF3B30] absolute right-2.5 top-1/2 transform -translate-y-1/2;
-}
-
-.badgeSpan {
-  @apply text-white text-sm font-medium;
-}
-
-.menuSection {
-  @apply flex flex-col gap-0.5;
-}
-
-.firstOption {
-  @apply rounded-[12px_12px_3px_3px];
-}
-
-.secondOption {
-  @apply rounded-[3px];
-}
-
-.lastOption {
-  @apply rounded-[0px_0px_12px_12px];
-}
+.optionBillingContainer {
+  @apply flex items-center gap-[10px] px-[15px] py-[11px] bg-white;
+}
+.billingIcon {
+  @apply size-7;
+}
+.billingText {
+  @apply text-primary-900 font-normal text-base;
+}
+.billingSubmenuLinks {
+  @apply text-primary-700 hover:text-secondary-700 font-normal text-[13px] transition-all relative;
+}
+.linkContainer {
+  @apply flex items-center gap-2;
+}
+
+.optionLink {
+  @apply flex items-center gap-2.5 px-[15px] py-[11px] bg-white relative;
+}
+
+.optionIcon {
+  @apply size-7;
+}
+.optionTitle {
+  @apply text-primary-900 font-normal text-base;
+}
+
+.badge {
+  @apply size-6.5 rounded-full flex justify-center items-center bg-[#FF3B30] absolute right-2.5 top-1/2 transform -translate-y-1/2;
+}
+
+.badgeSpan {
+  @apply text-white text-sm font-medium;
+}
+
+.menuSection {
+  @apply flex flex-col gap-0.5;
+}
+
+.firstOption {
+  @apply rounded-[12px_12px_3px_3px];
+}
+
+.secondOption {
+  @apply rounded-[3px];
+}
+
+.lastOption {
+  @apply rounded-[0px_0px_12px_12px];
+}

package/dist/components/Profile/style/ProfileMenuPopup.module.css

@@ -1,30 +1,30 @@
-.popupContainer {
-  @apply w-full sm:w-100 h-full sm:h-[440px] fixed z-50 sm:absolute right-0 top-0 sm:top-[55px] sm:rounded-30 bg-[#F7F3F8] shadow-[0px_0px_30px_0px_rgba(19,15,64,0.20)];
-}
-
-.closeBtn {
-  @apply absolute -top-12 -right-2 size-8 p-2 border rounded-full transition-colors block sm:hidden;
-}
-.popupContent {
-  @apply size-full p-5;
-}
-.popupTopSection {
-  @apply flex flex-col justify-center gap-5 mt-10 sm:mt-0 relative;
-}
-
-.manageLinkContainer {
-  @apply w-full flex justify-center items-center;
-}
-.manageLink {
-  @apply p-[7px_16px] border border-[#D780DC] rounded-10 text-[#AE00B9] text-center;
-}
-.termsAndCondition {
-  @apply flex items-center justify-center text-xs text-primary mt-3;
-}
-
-.termsAndConditionLinks {
-  @apply hover:bg-primary-100 px-[6px] py-[2px] rounded-5 transition-all;
-}
-.indexSpan {
-  @apply text-primary mx-1;
-}
+.popupContainer {
+  @apply w-full sm:w-100 h-full sm:h-[440px] fixed z-50 sm:absolute right-0 top-0 sm:top-[55px] sm:rounded-30 bg-[#F7F3F8] shadow-[0px_0px_30px_0px_rgba(19,15,64,0.20)];
+}
+
+.closeBtn {
+  @apply absolute -top-12 -right-2 size-8 p-2 border rounded-full transition-colors block sm:hidden;
+}
+.popupContent {
+  @apply size-full p-5;
+}
+.popupTopSection {
+  @apply flex flex-col justify-center gap-5 mt-10 sm:mt-0 relative;
+}
+
+.manageLinkContainer {
+  @apply w-full flex justify-center items-center;
+}
+.manageLink {
+  @apply p-[7px_16px] border border-[#D780DC] rounded-10 text-[#AE00B9] text-center;
+}
+.termsAndCondition {
+  @apply flex items-center justify-center text-xs text-primary mt-3;
+}
+
+.termsAndConditionLinks {
+  @apply hover:bg-primary-100 px-[6px] py-[2px] rounded-5 transition-all;
+}
+.indexSpan {
+  @apply text-primary mx-1;
+}

package/dist/components/Profile/style/ProfileUserInformation.module.css

@@ -1,26 +1,26 @@
-.userInformation {
-  @apply flex justify-between items-center;
-}
-.userInformationContainer {
-  @apply flex items-center gap-[14px];
-}
-.userImageContainer {
-  @apply size-[70px] overflow-hidden;
-}
-.userImage {
-  @apply rounded-full size-full;
-}
-.detailsContainer {
-  @apply flex flex-col;
-}
-.username {
-  @apply text-primary text-xl font-medium;
-}
-
-.userEmail {
-  @apply text-primary-700 text-base font-normal;
-}
-
-.logoutBtn {
-  @apply size-10 p-2 bg-primary-100 sm:bg-transparent sm:hover:bg-primary-100 rounded-full transition-colors;
-}
+.userInformation {
+  @apply flex justify-between items-center;
+}
+.userInformationContainer {
+  @apply flex items-center gap-[14px];
+}
+.userImageContainer {
+  @apply size-[70px] overflow-hidden;
+}
+.userImage {
+  @apply rounded-full size-full;
+}
+.detailsContainer {
+  @apply flex flex-col;
+}
+.username {
+  @apply text-primary text-xl font-medium;
+}
+
+.userEmail {
+  @apply text-primary-700 text-base font-normal;
+}
+
+.logoutBtn {
+  @apply size-10 p-2 bg-primary-100 sm:bg-transparent sm:hover:bg-primary-100 rounded-full transition-colors;
+}

package/dist/components/Profile/style/ProfileView.module.css

@@ -1,12 +1,12 @@
-.profileContainer {
-  @apply w-auto lg:w-full h-8 sm:h-10 flex items-center;
-}
-.imageUserContainer {
-  @apply size-8 sm:size-10 rounded-full border border-[#AE00B9] relative;
-}
-.imageUser {
-  @apply rounded-full size-full;
-}
-.linkBtn {
-  @apply size-10;
-}
+.profileContainer {
+  @apply w-auto lg:w-full h-8 sm:h-10 flex items-center;
+}
+.imageUserContainer {
+  @apply size-8 sm:size-10 rounded-full border border-[#AE00B9] relative;
+}
+.imageUser {
+  @apply rounded-full size-full;
+}
+.linkBtn {
+  @apply size-10;
+}

package/dist/components/button-wrapper/style/style.module.css

@@ -1,18 +1,18 @@
-.btnClass {
-  @apply relative px-3 py-2 flex justify-center items-center !bg-secondary-50 hover:!bg-secondary;
-}
-.blockIcon {
-  @apply size-7  block;
-}
-.hoverIcon {
-  @apply size-7  hidden;
-}
-.btnLoading {
-  @apply absolute top-0 left-0 size-full text-primary;
-}
-.btnLoadingWrapper {
-  @apply size-full bg-primary-50 opacity-50 absolute top-0 left-0;
-}
-.btnContent {
-  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
-}
+.btnClass {
+  @apply relative px-3 py-2 flex justify-center items-center !bg-secondary-50 hover:!bg-secondary;
+}
+.blockIcon {
+  @apply size-7  block;
+}
+.hoverIcon {
+  @apply size-7  hidden;
+}
+.btnLoading {
+  @apply absolute top-0 left-0 size-full text-primary;
+}
+.btnLoadingWrapper {
+  @apply size-full bg-primary-50 opacity-50 absolute top-0 left-0;
+}
+.btnContent {
+  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
+}