@bikiran/utils 1.18.0

package/dist/components/header/sidebar/SidebarMenuRow.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import SidebarSubMenu from "./SidebarSubMenu";
+import { sidebarIcons } from "./SidebarIcons";
+import { cn } from "../../../lib/utils/cn";
+const SidebarMenuRow = ({ listArr, closeMenu, ImageComponent, routerFn, }) => {
+    const [openL1, setOpenL1] = useState(0);
+    const router = routerFn();
+    const onMenuClick = (menu) => {
+        var _a;
+        if (((_a = menu === null || menu === void 0 ? void 0 : menu.subMenu) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            if (openL1 === (menu === null || menu === void 0 ? void 0 : menu.id)) {
+                setOpenL1(0);
+                return;
+            }
+            setOpenL1(menu === null || menu === void 0 ? void 0 : menu.id);
+            return;
+        }
+        router.push(menu === null || menu === void 0 ? void 0 : menu.path);
+        closeMenu();
+    };
+    return (_jsx("ul", { className: "p-4 pr-8 space-y-4", children: listArr === null || listArr === void 0 ? void 0 : listArr.map((menu) => {
+            var _a, _b;
+            return (_jsxs("li", { children: [_jsxs("button", { type: "button", className: "flex items-center justify-between w-full", onClick: () => onMenuClick(menu), children: [_jsxs("div", { className: "flex items-center gap-3.5", children: [_jsx("div", { className: "w-9", children: _jsx(ImageComponent, { src: menu === null || menu === void 0 ? void 0 : menu.icon, alt: "menu", width: 0, height: 0, sizes: "100vw", className: "w-full h-auto" }) }), _jsx("div", { className: "text-base font-normal", children: menu === null || menu === void 0 ? void 0 : menu.title })] }), ((_a = menu === null || menu === void 0 ? void 0 : menu.subMenu) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (_jsx("div", { className: cn("w-2 transition-all duration-200", {
+                                    "opacity-0": true,
+                                    "rotate-90": (menu === null || menu === void 0 ? void 0 : menu.id) === openL1,
+                                    "opacity-100": ((_b = menu === null || menu === void 0 ? void 0 : menu.subMenu) === null || _b === void 0 ? void 0 : _b.length) > 0,
+                                }), children: _jsx(ImageComponent, { src: sidebarIcons.iconArrowRight, alt: "arrow", width: 0, height: 0, sizes: "100vw", className: "w-full h-auto" }) })) : null] }), _jsx(SidebarSubMenu, { show: openL1 === (menu === null || menu === void 0 ? void 0 : menu.id), ImageComponent: ImageComponent, subMenu: menu === null || menu === void 0 ? void 0 : menu.subMenu, closeMenu: closeMenu, routerFn: routerFn })] }, menu === null || menu === void 0 ? void 0 : menu.id));
+        }) }));
+};
+export default SidebarMenuRow;

package/dist/components/header/sidebar/SidebarSubMenu.d.ts

@@ -0,0 +1,9 @@
+type TProps = {
+    show: any;
+    subMenu: any;
+    closeMenu: any;
+    ImageComponent: any;
+    routerFn: () => any;
+};
+declare const SidebarSubMenu: React.FC<TProps>;
+export default SidebarSubMenu;

package/dist/components/header/sidebar/SidebarSubMenu.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils/cn";
+const SidebarSubMenu = ({ show, subMenu, closeMenu, ImageComponent, routerFn, }) => {
+    const router = routerFn();
+    const onSubMenuClick = (menu) => {
+        router.push(menu === null || menu === void 0 ? void 0 : menu.path);
+        closeMenu();
+    };
+    return (_jsx("ul", { className: cn("sidebar_menu_submenu", {
+            active: show,
+        }), children: subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((menu) => (_jsx("li", { children: _jsx("button", { type: "button", className: "flex items-center justify-between w-full", onClick: () => onSubMenuClick(menu), children: _jsxs("div", { className: "flex items-center gap-3.5", children: [_jsx("div", { className: "w-[24px]", children: _jsx(ImageComponent, { src: menu === null || menu === void 0 ? void 0 : menu.icon, alt: "menu", width: 0, height: 0, sizes: "100vw", className: "w-full h-auto" }) }), _jsx("div", { className: "text-sm font-normal", children: menu === null || menu === void 0 ? void 0 : menu.title })] }) }) }, menu === null || menu === void 0 ? void 0 : menu.id))) }));
+};
+export default SidebarSubMenu;

package/dist/components/header/sidebar/SidebarTopRow.js

@@ -0,0 +1,100 @@
+"use strict";
+// "use client";
+// import Image from "next/image";
+// import { icons } from "@/bikiran/lib/icons";
+// import { basic } from "@/bikiran/utils/Images";
+// import { cn } from "@/bik-lib/utils/cn";
+// import { useAuth2 } from "@/bik-lib/context/auth/Auth2Provider";
+// import React from "react";
+// type TButtonPrimary = {
+//   title: string;
+//   className: string;
+//   onClick: any;
+//   variant: string;
+// };
+// const ButtonPrimary: React.FC<TButtonPrimary> = ({
+//   title,
+//   className,
+//   onClick,
+//   variant = "outline",
+// }) => {
+//   return (
+//     <button
+//       type="button"
+//       className={cn(
+//         "rounded-[7px] py-2.5 px-7 text-base font-medium",
+//         className,
+//         {
+//           "bg-secondary text-white": variant === "fill",
+//           "bg-secondary-100 text-secondary": variant === "outline",
+//         }
+//       )}
+//       onClick={onClick}
+//     >
+//       <span>{title}</span>
+//     </button>
+//   );
+// };
+// function Body() {
+//   const { authInfo: currentUser } = useAuth2();
+//   // if (!currentUser?.loginStatus) {
+//   //   return (
+//   //     <div className="flex justify-center items-end">
+//   //       <ButtonPrimary
+//   //         variant=""
+//   //         title="Login"
+//   //         // onClick={() => makeAction('sign-in')}
+//   //         onClick={null}
+//   //         className="py-2 px-14"
+//   //       />
+//   //     </div>
+//   //   );
+//   // }
+//   return (
+//     <div className="sidebar_user_info">
+//       <div className="size-10">
+//         <Image
+//           src={basic.imgAvatar}
+//           alt="Avatar"
+//           width={0}
+//           height={0}
+//           sizes="100vw"
+//           className="size-full rounded-full"
+//         />
+//       </div>
+//       {/* <div>
+//         <h3 className="user_name">
+//           {currentUser?.displayName || <span>[Not Set]</span>}
+//         </h3>
+//         <p className="user_email">
+//           {currentUser?.email || <span>[Not Set]</span>}
+//         </p>
+//       </div> */}
+//     </div>
+//   );
+// }
+// type TSidebarTopRow = {
+//   closeMenu: any;
+// };
+// const SidebarTopRow: React.FC<TSidebarTopRow> = ({ closeMenu }) => {
+//   return (
+//     <div className="relative pl-5 pt-18 pb-4 border-b border-primary-100">
+//       <button
+//         type="button"
+//         className="block w-8 absolute top-4 left-4"
+//         onClick={closeMenu}
+//       >
+//         <Image
+//           src={icons.iconBack}
+//           alt="arrow"
+//           width={0}
+//           height={0}
+//           sizes="100vw"
+//           className="w-full h-auto"
+//         />
+//       </button>
+//       <Body />
+//     </div>
+//   );
+// };
+// export default SidebarTopRow;

package/dist/components/header/sidebar/sidebarStyle.css

@@ -0,0 +1,32 @@
+.sidebar_menu_wrapper {
+  @apply fixed top-0 -left-full z-[60] size-full bg-[#20202082] transition-all duration-300;
+}
+
+.sidebar_menu_wrapper.active {
+  @apply left-0;
+}
+
+.sidebar_menu {
+  @apply w-[300px] h-full bg-white relative;
+}
+ul.sidebar_menu_submenu {
+  @apply pl-12 overflow-hidden transition-all duration-200;
+}
+ul.sidebar_menu_submenu li {
+  @apply flex items-center h-[42px] max-h-0 opacity-0 overflow-hidden transition-all duration-200;
+}
+ul.sidebar_menu_submenu.active li {
+  @apply max-h-[42px] opacity-100 overflow-hidden transition-all duration-200;
+}
+
+.sidebar_user_info {
+  @apply flex items-center gap-4;
+}
+
+.sidebar_user_info .user_name {
+  @apply text-primary text-base font-bold;
+}
+
+.sidebar_user_info .user_email {
+  @apply text-primary-300 text-xs font-medium;
+}

package/dist/components/information-tooltip/InformationTooltip.d.ts

@@ -0,0 +1,11 @@
+import React, { FC } from "react";
+type TProps = {
+    content: string;
+    className?: string;
+    children?: React.ReactNode;
+    align?: "left" | "right" | "top" | "bottom";
+    fillColor?: string;
+    borderColor?: string;
+};
+declare const InformationTooltip: FC<TProps>;
+export default InformationTooltip;

package/dist/components/information-tooltip/InformationTooltip.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconArrow, IconInfo } from "./icons";
+import styles from "./style/InfoTooltip.module.css";
+import { cn } from "../../lib/utils/cn";
+const InformationTooltip = ({ children, content, className, align = "right", fillColor = "#FFF9DB", borderColor = "#FFE6BA", }) => {
+    const tooltipClass = cn(styles.tooltipContent, align === "top"
+        ? styles.topAlign
+        : align === "bottom"
+            ? styles.bottomAlign
+            : align === "left"
+                ? styles.leftAlign
+                : styles.rightAlign, className);
+    const arrowClass = cn(styles.arrow, align === "top"
+        ? styles.arrowTop
+        : align === "bottom"
+            ? styles.arrowBottom
+            : align === "left"
+                ? styles.arrowLeft
+                : styles.arrowRight);
+    return (_jsxs("div", { className: styles.wrapper, children: [children ? children : _jsx(IconInfo, {}), _jsx("div", { className: tooltipClass, style: {
+                    backgroundColor: fillColor,
+                    borderColor: borderColor,
+                    borderWidth: "1px",
+                    color: "var(--color-primary)", // if you have text-primary color in css vars
+                }, children: _jsx("span", { children: content }) }), _jsx("div", { className: arrowClass, children: _jsx(IconArrow, { fillColor: fillColor, borderColor: borderColor }) })] }));
+};
+export default InformationTooltip;

package/dist/components/information-tooltip/icons.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+export declare const IconArrow: FC<{
+    fillColor: string;
+    borderColor: string;
+}>;
+export declare const IconInfo: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/information-tooltip/icons.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const IconArrow = ({ fillColor, borderColor, }) => {
+    return (_jsxs("svg", { version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 27.001 10.473", style: { enableBackground: "new 0 0 27.001 10.473" }, children: [_jsx("style", { type: "text/css", children: `
+          .st0 { fill: ${fillColor}; }
+          .st1 { fill: ${borderColor}; }
+        ` }), _jsx("path", { className: "st0", d: "M27,0v1h-1.04c-1.18,0-2.49,0.45-3.71,1.21C21.03,2.97,19.96,4,19.24,5.06l-1.1,1.63\n        c-0.74,1.08-1.35,1.98-1.91,2.6C15.98,9.56,15.7,9.81,15.4,10c-0.4,0.27-0.86,0.44-1.4,0.44s-1-0.17-1.4-0.44\n        c-0.3-0.19-0.58-0.44-0.83-0.71c-0.56-0.62-1.17-1.52-1.91-2.6l-1.1-1.63C8.04,4,6.97,2.97,5.75,2.21C4.53,1.45,3.22,1,2.04,1H0V0\n        H27z" }), _jsx("path", { className: "st1", d: "M27,0v1h-1.04c-1.18,0-2.49,0.45-3.71,1.21C21.03,2.97,19.96,4,19.24,5.06l-1.1,1.63\n        c-0.74,1.08-1.35,1.98-1.91,2.6C15.98,9.56,15.7,9.81,15.4,10c-0.4,0.27-0.86,0.44-1.4,0.44s-1-0.17-1.4-0.44\n        c-0.3-0.19-0.58-0.44-0.83-0.71c-0.56-0.62-1.17-1.52-1.91-2.6l-1.1-1.63C8.04,4,6.97,2.97,5.75,2.21C4.53,1.45,3.22,1,2.04,1H0V0\n        h2.04c1.03,0,2.11,0.29,3.13,0.76C6.94,1.59,8.56,3,9.58,4.5h0.01l1.1,1.63c1.5,2.21,2.25,3.31,3.31,3.31\n        c0.53,0,0.98-0.28,1.49-0.83s1.07-1.37,1.82-2.48l1.11-1.63c1.02-1.5,2.64-2.91,4.41-3.74C23.85,0.29,24.93,0,25.96,0H27z" })] }));
+};
+export const IconInfo = () => {
+    return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 50 50", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M20.278 23.8507C20.3772 23.4536 20.4568 23.1005 20.5583 22.7535C20.581 22.677 20.6689 22.5914 20.7462 22.5641C22.1608 22.061 23.5504 21.4693 25.109 21.5632C26.4365 21.6428 27.6555 22.4368 27.864 23.6211C27.9934 24.3606 27.9466 25.1781 27.7768 25.9138C27.3926 27.577 26.8691 29.2083 26.4319 30.86C26.3084 31.3282 26.2531 31.8215 26.2273 32.3063C26.1902 33.0049 26.4917 33.3633 27.1858 33.4945C27.9087 33.631 28.6147 33.5384 29.3028 33.2847C29.3491 33.2673 29.3998 33.2626 29.5126 33.2376C29.4148 33.6181 29.337 33.9575 29.2355 34.2893C29.2134 34.3622 29.1179 34.4371 29.0406 34.4636C28.1846 34.76 27.3411 35.1252 26.4615 35.3189C25.2097 35.5948 23.9535 35.5903 22.8253 34.812C22.004 34.2454 21.6509 33.4611 21.7039 32.4746C21.7994 30.7009 22.5086 29.0771 22.9291 27.3822C23.1375 26.5427 23.3504 25.6941 23.4383 24.8364C23.536 23.8847 23.0344 23.4423 22.0555 23.4764C21.7592 23.487 21.4622 23.5347 21.1713 23.5953C20.8864 23.6559 20.6091 23.7544 20.278 23.8507Z", fill: "#130F40" }), _jsx("path", { d: "M26.0834 14.56C27.5344 14.5562 28.6209 15.6594 28.5951 17.074C28.5762 18.1098 27.8639 19.0076 26.8161 19.3175C25.6629 19.6577 24.3741 19.0902 23.8748 18.0226C23.1701 16.5148 24.1589 14.7592 25.8167 14.5766C25.916 14.5668 26.0168 14.5645 26.0834 14.56Z", fill: "#130F40" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M25.0003 3.57153C13.1846 3.57153 3.57178 13.1844 3.57178 25.0001C3.57178 36.8167 13.1846 46.4287 25.0003 46.4287C36.8169 46.4287 46.4289 36.8167 46.4289 25.0001C46.4289 13.1844 36.8169 3.57153 25.0003 3.57153ZM12.1159 12.1156C15.5576 8.67323 20.1322 6.77885 25.0003 6.77885C29.8685 6.77885 34.4422 8.67392 37.8847 12.1157C41.3273 15.5574 43.2215 20.1327 43.2215 25.0001C43.2215 29.8674 41.3266 34.442 37.8846 37.8844C34.4431 41.327 29.8678 43.2212 25.0003 43.2212C20.133 43.2212 15.5584 41.3263 12.1159 37.8844C8.67348 34.4428 6.7791 29.8683 6.7791 25.0001C6.7791 20.132 8.67421 15.5573 12.1159 12.1156Z", fill: "#130F40" })] }));
+};

package/dist/components/information-tooltip/style/InfoTooltip.module.css

@@ -0,0 +1,62 @@
+/* InformationTooltip.module.css */
+
+.wrapper {
+  @apply relative inline-flex items-center cursor-pointer;
+}
+
+.tooltipContent {
+  @apply absolute rounded-[15px] text-sm w-56 px-4 py-3 shadow-md hidden z-10 transition-all duration-300 ease-in-out;
+}
+
+.wrapper:hover .tooltipContent {
+  @apply block;
+}
+
+.arrow {
+  @apply absolute size-full hidden z-10;
+}
+
+.wrapper:hover .arrow {
+  @apply block;
+}
+
+/* Alignment positions for tooltipContent */
+.rightAlign {
+  left: calc(100% + 24%);
+  @apply top-1/2 transform -translate-y-1/2;
+}
+
+.leftAlign {
+  right: calc(100% + 24%);
+  @apply top-1/2 transform -translate-y-1/2;
+}
+
+.topAlign {
+  bottom: calc(100% + 19%);
+  @apply left-1/2 transform -translate-x-1/2;
+}
+
+.bottomAlign {
+  top: calc(100% + 20%);
+  @apply left-1/2 transform -translate-x-1/2;
+}
+
+/* Arrow positions */
+.arrowRight {
+  left: calc(100% - 26px);
+  @apply top-1/2 transform rotate-90 -translate-x-[100%];
+}
+
+.arrowLeft {
+  right: calc(100% - 27px);
+
+  @apply top-1/2 transform rotate-90 translate-x-[100%];
+}
+
+.arrowTop {
+  @apply left-4 bottom-2 transform rotate-0 -translate-x-1/2;
+}
+
+.arrowBottom {
+  @apply left-4 top-2 transform rotate-180 -translate-x-1/2;
+}

package/dist/components/loading-comp/LoadingComp.d.ts

@@ -0,0 +1,2 @@
+declare const LoadingComp: () => import("react/jsx-runtime").JSX.Element;
+export default LoadingComp;

package/dist/components/loading-comp/LoadingComp.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils/cn";
+import style from "./style/LoadingComp.module.css";
+const LoadingComp = () => {
+    return (_jsx("div", { className: cn(style.parentDiv, "parentDiv"), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: { margin: "auto", display: "block" }, width: "120px", height: "120px", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", children: [_jsx("circle", { cx: "21.5", cy: "50", r: "10", fill: "#ae00b9", children: _jsx("animate", { attributeName: "cy", values: "42;58;42", dur: "0.5882352941176471s", calcMode: "spline", keySplines: "0.5 0 0.5 1;0.5 0 0.5 1", begin: "0s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "49.5", cy: "56.92820323027551", r: "10", fill: "#f50303", children: _jsx("animate", { attributeName: "cy", values: "42;58;42", dur: "0.5882352941176471s", calcMode: "spline", keySplines: "0.5 0 0.5 1;0.5 0 0.5 1", begin: "-0.19607843137254904s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "77.5", cy: "43.07179676972449", r: "10", fill: "#ffe600", children: _jsx("animate", { attributeName: "cy", values: "42;58;42", dur: "0.5882352941176471s", calcMode: "spline", keySplines: "0.5 0 0.5 1;0.5 0 0.5 1", begin: "-0.3921568627450981s", repeatCount: "indefinite" }) })] }) }));
+};
+export default LoadingComp;

package/dist/components/loading-comp/style/LoadingComp.module.css

@@ -0,0 +1,3 @@
+.parentDiv {
+  @apply flex items-center justify-center fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#2929292d] size-full z-[9999999999999999];
+}

package/dist/components/pageLoading/PageLoading.d.ts

@@ -0,0 +1,2 @@
+declare const PageLoading: () => import("react/jsx-runtime").JSX.Element;
+export default PageLoading;

package/dist/components/pageLoading/PageLoading.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import style from "./style/PageLoading.module.css";
+const PageLoading = () => {
+    return (_jsx("div", { className: style.container, children: _jsx("div", { className: style.content, children: _jsx("svg", { style: { margin: "auto", background: "#fff", display: "block" }, width: "200px", height: "200px", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", children: _jsxs("g", { children: [_jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 50 50;120 50 50", keyTimes: "0;1", dur: "1s", repeatCount: "indefinite" }), _jsx("circle", { cx: "50", cy: "50", r: "29", stroke: "#ffe600", fill: "none", strokeDasharray: "30.368728984701335 182.212373908208", strokeLinecap: "round", strokeWidth: "5", transform: "rotate(0 50 50)", children: _jsx("animate", { attributeName: "stroke", values: "#ffe600;#f50303", keyTimes: "0;1", dur: "1s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "50", cy: "50", r: "29", stroke: "#f50303", fill: "none", strokeDasharray: "30.368728984701335 182.212373908208", strokeLinecap: "round", strokeWidth: "5", transform: "rotate(120 50 50)", children: _jsx("animate", { attributeName: "stroke", values: "#f50303;#ae00b9", keyTimes: "0;1", dur: "1s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "50", cy: "50", r: "29", stroke: "#ae00b9", fill: "none", strokeDasharray: "30.368728984701335 182.212373908208", strokeLinecap: "round", strokeWidth: "5", transform: "rotate(240 50 50)", children: _jsx("animate", { attributeName: "stroke", values: "#ae00b9;#ffe600", keyTimes: "0;1", dur: "1s", repeatCount: "indefinite" }) })] }) }) }) }));
+};
+export default PageLoading;

package/dist/components/pageLoading/style/PageLoading.module.css

@@ -0,0 +1,7 @@
+.container {
+  @apply fixed top-0 left-0 size-full z-50 bg-white;
+}
+
+.content {
+  @apply flex items-center justify-center size-full;
+}

package/dist/components/pagination2/Pagination.d.ts

@@ -0,0 +1,18 @@
+import { FC } from "react";
+type TPagination = {
+    currentPage: number;
+    contentPerPage: number;
+    totalContent: number;
+    numberOfPages: number;
+    showingFrom: number;
+    showingTo: number;
+    pages: number[];
+};
+declare const Pagination: FC<{
+    data: TPagination;
+    LinkComp: any;
+    pathNameFn: any;
+    searchParamsFn: any;
+    disabled?: boolean;
+}>;
+export default Pagination;

package/dist/components/pagination2/Pagination.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import style from "./style/Pagination.module.css";
+import { cn } from "../../lib/utils/cn";
+const Tab = ({ path, title, isDisabled, LinkComp }) => {
+    return (_jsx(LinkComp, { href: path, className: cn(style.tab, "tab", isDisabled ? style.tabDisabled : "tabDisabled"), children: title }));
+};
+const Pages = ({ pages, total, disabled, pathNameFn, searchParamsFn, LinkComp }) => {
+    // const [show, setShow] = useState<boolean>(false);
+    const pathname = pathNameFn();
+    const searchParams = searchParamsFn();
+    const currentPage = Number(searchParams.get("CurrentPage")) || 1;
+    const queries = new URLSearchParams(searchParams.toString());
+    const nextPage = (pages === null || pages === void 0 ? void 0 : pages.length)
+        ? Math.min(currentPage + 1, pages[pages.length - 1])
+        : currentPage;
+    // Make URL with existing queries if any
+    const mkUrl = (number) => {
+        queries.set("CurrentPage", number.toString());
+        return `${pathname}?${queries.toString()}`;
+    };
+    return (_jsxs("div", { className: cn(style.pagesComp, " pagesComp"), children: [_jsx(Tab, { title: "<", path: mkUrl(currentPage - 1), isDisabled: currentPage === 1 || !currentPage || disabled, LinkComp: LinkComp }), pages === null || pages === void 0 ? void 0 : pages.map((number) => {
+                if (number === -100 || number === -101) {
+                    return (_jsx("div", { className: cn(style.dots, "dots"), children: "...." }, number));
+                }
+                return (_jsx(LinkComp, { href: mkUrl(number), className: cn(style.linkComp, "linkComp", disabled ? style.linkCompDisabled : "linkCompDisabled", !disabled && (currentPage || 1) === number
+                        ? style.linkActive
+                        : "linkActive"), children: number }, number));
+            }), _jsx(Tab, { title: ">", path: mkUrl(nextPage), isDisabled: currentPage === total || disabled, LinkComp: LinkComp })] }));
+};
+// todo: Create a Pagination data validation
+const Pagination = ({ data, disabled = false, LinkComp, pathNameFn, searchParamsFn }) => {
+    // Hide pagination if no data
+    if (data == null) {
+        return null;
+    }
+    // Hide pagination if only one page
+    return (_jsxs("div", { className: cn(style.paginationContainer, "paginationContainer"), children: [_jsxs("div", { className: cn(style.showingText, "showingText"), children: ["Showing ", data.showingFrom, " to ", data.showingTo, " of ", data.totalContent, "\u00A0 entries"] }), _jsx(Pages, { pages: data === null || data === void 0 ? void 0 : data.pages, total: data === null || data === void 0 ? void 0 : data.numberOfPages, disabled: disabled, LinkComp: LinkComp, pathNameFn: pathNameFn, searchParamsFn: searchParamsFn })] }));
+};
+export default Pagination;

package/dist/components/pagination2/style/Pagination.module.css

@@ -0,0 +1,27 @@
+.tab {
+  @apply px-2.5 min-h-8 text-sm flex justify-center items-center py-1 bg-secondary-100 hover:bg-secondary text-secondary hover:text-white transition-colors rounded-5;
+}
+.tabDisabled {
+  @apply grayscale pointer-events-none;
+}
+.linkComp {
+  @apply w-10 min-h-8 flex justify-center items-center py-1 bg-secondary-100 hover:bg-secondary text-secondary hover:text-white transition-colors rounded-5;
+}
+.linkCompDisabled {
+  @apply !bg-primary-100 !text-primary-300 pointer-events-none;
+}
+.linkActive {
+  @apply !bg-secondary text-white;
+}
+.dots {
+  @apply text-secondary;
+}
+.pagesComp {
+  @apply flex justify-center items-end gap-3 py-3 relative;
+}
+.paginationContainer {
+  @apply w-full flex justify-between items-center;
+}
+.showingText {
+  @apply text-primary;
+}

package/dist/components/project-selector/ProjectListBody.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { TProject } from "./projectTypes";
+declare const ProjectListBody: FC<{
+    projectData: TProject[];
+    activeProject: TProject;
+    selectProject: (project: TProject) => void;
+    ImageComponent: any;
+}>;
+export default ProjectListBody;

package/dist/components/project-selector/ProjectListBody.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { selectorIcons } from "./selector-icons/selectorIcons";
+import ProjectServices from "./ProjectServices";
+const ProjectListItem = ({ data, selectProject, activeProject, ImageComponent }) => {
+    return (_jsx("li", { className: `w-full hover:bg-primary-50 p-2.5 rounded-10 ${activeProject.id === data.id ? "!bg-primary-50" : ""}`, children: _jsxs("button", { type: "button", className: "size-full flex gap-2.5 mb-2.5", onClick: () => selectProject(data), children: [_jsx("div", { className: "w-8 rounded-full ", children: _jsx(ImageComponent, { src: selectorIcons.iconDefaultApp, alt: "default-app", width: 0, height: 0, sizes: "100vw", className: "w-full h-auto rounded-full" }) }), _jsxs("div", { className: "flex-1 overflow-hidden text-left", children: [_jsx("h3", { className: "text-primary text-base font-medium whitespace-nowrap overflow-hidden text-ellipsis", children: data.title }), _jsxs("p", { className: "text-primary-200 text-sm font-normal", children: ["#", data.id] })] })] }) }));
+};
+const ProjectListBody = ({ projectData, activeProject, selectProject, ImageComponent }) => {
+    return (_jsxs("div", { className: "size-full flex-grow flex items-stretch gap.10 px-2.5 py-1.5 h-[calc(100%_-_96px)] md:h-[calc(100%_-_50px)] divide-x-2 divide-primary-200", children: [_jsx("div", { className: "w-[185px] pr-2.5 h-full", children: _jsx("ul", { className: "overflow-auto h-full flex flex-col gap-1", children: projectData === null || projectData === void 0 ? void 0 : projectData.map((item) => (_jsx(ProjectListItem, { data: item, selectProject: selectProject, activeProject: activeProject, ImageComponent: ImageComponent }, item.id))) }) }), _jsx("div", { className: "flex-1 px-2.5", children: _jsx(ProjectServices, {}) })] }));
+};
+export default ProjectListBody;

package/dist/components/project-selector/ProjectListPopup.d.ts

@@ -0,0 +1,12 @@
+import { Dispatch, FC, SetStateAction } from "react";
+import { TProject } from "./projectTypes";
+declare const ProjectListPopup: FC<{
+    setShow: Dispatch<SetStateAction<boolean>>;
+    show: boolean;
+    top: number;
+    projectData: TProject[];
+    selectProject: (project: TProject) => void;
+    activeProject: TProject;
+    ImageComponent: any;
+}>;
+export default ProjectListPopup;

package/dist/components/project-selector/ProjectListPopup.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+import { useEffect, useState } from "react";
+import ProjectListBody from "./ProjectListBody";
+const CloseButton = ({ setShow, }) => {
+    return (_jsx("button", { type: "button", onClick: () => setShow(false), className: "absolute right-2.5 top-2.5 rounded-full border border-error bg-red-50 p-[3px] text-error opacity-90 block md:hidden", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-x", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) }));
+};
+const ListHeader = () => {
+    return (_jsxs("div", { className: "flex items-end md:items-center justify-between gap-10 h-24 md:h-[50px] px-5 pb-4 md:pb-2.5 md:pt-2.5 border-b border-primary-200 rounded-tr-20 rounded-tl-20", children: [_jsx("h3", { className: "text-primary text-lg font-medium whitespace-nowrap", children: "List of Projects" }), _jsx("input", { type: "text", name: "search", placeholder: "Search Project", className: "px-2.5 w-full h-7 rounded-5 bg-primary-50 focus:outline-none" })] }));
+};
+const ProjectListPopup = ({ setShow, show, top, projectData, activeProject, selectProject, ImageComponent, }) => {
+    const [windowWidth, setWindowWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 0);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const updateSize = () => {
+            setWindowWidth(window.innerWidth);
+        };
+        window.addEventListener("resize", updateSize);
+        return () => {
+            window.removeEventListener("resize", updateSize);
+        };
+    }, []);
+    if (!show)
+        return null;
+    return (_jsxs("div", { className: "fixed md:absolute left-0 z-[99999] size-full md:size-auto bg-white border md:rounded-10 md:max-h-[400px] min-h-[300px] md:flex flex-col overflow-auto", style: {
+            // Ensure correct top position based on window width
+            top: windowWidth > 768 ? top : 0,
+        }, children: [_jsx(CloseButton, { setShow: setShow }), _jsx(ListHeader, {}), _jsx(ProjectListBody, { projectData: projectData, selectProject: selectProject, activeProject: activeProject, ImageComponent: ImageComponent })] }));
+};
+export default ProjectListPopup;

package/dist/components/project-selector/ProjectSelector.d.ts

@@ -0,0 +1,11 @@
+import { TProject } from "./projectTypes";
+import { FC } from "react";
+type TProps = {
+    projectData: TProject[];
+    activeProject: TProject;
+    selectProject: (project: TProject) => void;
+    loading: boolean;
+    ImageComponent: any;
+};
+declare const ProjectSelector: FC<TProps>;
+export default ProjectSelector;

package/dist/components/project-selector/ProjectSelector.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-unused-vars */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import SelectorMainComp from "./SelectorMainComp";
+import ProjectListPopup from "./ProjectListPopup";
+import ProjectSelectorSkeleton from "./ProjectSelectorSkeleton";
+const ProjectSelector = ({ projectData, activeProject, selectProject, loading, ImageComponent, }) => {
+    const [show, setShow] = useState(false);
+    const [currentHeight, setCurrentHeight] = useState(0);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            setCurrentHeight(ref.current.getBoundingClientRect().height);
+        }
+    }, [show]); // Update height when popup visibility changes
+    // Calculate the top position of the popup
+    const top = currentHeight + 10;
+    const handleClickOutside = (event) => {
+        // Check if the clicked target is outside the referenced element
+        if (ref.current && !ref.current.contains(event.target)) {
+            setShow(false);
+        }
+    };
+    useEffect(() => {
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            // Unbind the event listener on cleanup
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    if (loading) {
+        return _jsx(ProjectSelectorSkeleton, {});
+    }
+    return (_jsxs("div", { ref: ref, className: "relative flex justify-center ", children: [_jsx(SelectorMainComp, { setShow: setShow, activeProject: activeProject, ImageComponent: ImageComponent }), _jsx(ProjectListPopup, { setShow: setShow, show: show, top: top, projectData: projectData, activeProject: activeProject, selectProject: selectProject, ImageComponent: ImageComponent })] }));
+};
+export default ProjectSelector;

package/dist/components/project-selector/ProjectSelectorSkeleton.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const ProjectSelectorSkeleton: FC;
+export default ProjectSelectorSkeleton;

package/dist/components/project-selector/ProjectSelectorSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "../../lib/Skeleton";
+const ProjectSelectorSkeleton = () => {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "w-9 h-9" }), _jsx(Skeleton, { className: "w-full h-9" })] }));
+};
+export default ProjectSelectorSkeleton;

package/dist/components/project-selector/ProjectServiceTabs.js

@@ -0,0 +1,28 @@
+"use strict";
+// /* eslint-disable no-unused-vars */
+// import { FC } from "react";
+// import { projectServices } from "./projectConstants";
+// import { TProjectService } from "./projectTypes";
+// const ProjectServiceTabs: FC<{
+//   selectService: (id: number) => void;
+//   selectedService: number;
+// }> = ({ selectService, selectedService }) => {
+//   return (
+//     <div className="flex justify-between items-center border-b border-primary-200 mb-2.5">
+//       {projectServices.map((service: TProjectService) => (
+//         <button
+//           key={service.id}
+//           className={`text-base p-2.5 ${
+//             selectedService === service.id
+//               ? "text-primary font-medium"
+//               : "text-primary-500 font-normal"
+//           }`}
+//           onClick={() => selectService(service.id)}
+//         >
+//           {service.title}
+//         </button>
+//       ))}
+//     </div>
+//   );
+// };
+// export default ProjectServiceTabs;

package/dist/components/project-selector/ProjectServices.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const ProjectServices: FC;
+export default ProjectServices;