jett.admin.npmpackage 1.0.72 → 1.0.74

package/dist/index.css

@@ -258,6 +258,17 @@
   .visible {
     visibility: visible;
   }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
   .absolute {
     position: absolute;
   }
@@ -276,6 +287,12 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-5 {
+    top: calc(var(--spacing) * 5);
+  }
+  .top-\[-15px\] {
+    top: -15px;
+  }
   .top-full {
     top: 100%;
   }
@@ -288,6 +305,12 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
+  .left-5 {
+    left: calc(var(--spacing) * 5);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -321,6 +344,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-\[2px\] {
+    margin-left: 2px;
+  }
   .ml-\[8px\] {
     margin-left: 8px;
   }
@@ -354,6 +380,12 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-9 {
     height: calc(var(--spacing) * 9);
   }
@@ -396,6 +428,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
   .w-9 {
     width: calc(var(--spacing) * 9);
   }
@@ -405,6 +440,9 @@
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -438,6 +476,10 @@
   .border-collapse {
     border-collapse: collapse;
   }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-full {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -454,6 +496,10 @@
     --tw-translate-x: calc(var(--spacing) * 6);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-8 {
+    --tw-translate-x: calc(var(--spacing) * 8);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[100\%\] {
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -592,6 +638,9 @@
   .border-red-500 {
     border-color: var(--color-red-500);
   }
+  .bg-\[\#F7FAFC\] {
+    background-color: #F7FAFC;
+  }
   .bg-\[\#ef4444\] {
     background-color: #ef4444;
   }
@@ -739,6 +788,9 @@
   .text-\[\#3f3f46cc\] {
     color: #3f3f46cc;
   }
+  .text-\[\#6B7280\] {
+    color: #6B7280;
+  }
   .text-\[\#737373\] {
     color: #737373;
   }
@@ -775,6 +827,9 @@
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -784,6 +839,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .shadow-inner {
+    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -847,6 +911,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-transform {
     transition-property:
       transform,
@@ -878,6 +947,13 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .group-hover\:opacity-80 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 80%;
+      }
+    }
+  }
   .peer-checked\:border-primary {
     &:is(:where(.peer):checked ~ *) {
       border-color: var(--color-primary);
@@ -911,6 +987,13 @@
       }
     }
   }
+  .hover\:bg-\[\#F7FAFC\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #F7FAFC;
+      }
+    }
+  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -1062,6 +1145,11 @@
       background-color: #1d1d20;
     }
   }
+  .dark\:bg-\[\#4B5563\] {
+    &:where(.dark, .dark *) {
+      background-color: #4B5563;
+    }
+  }
   .dark\:bg-\[\#18181b\] {
     &:where(.dark, .dark *) {
       background-color: #18181b;
@@ -1072,6 +1160,11 @@
       background-color: #27272a;
     }
   }
+  .dark\:bg-\[\#303036\] {
+    &:where(.dark, .dark *) {
+      background-color: #303036;
+    }
+  }
   .dark\:bg-gray-800 {
     &:where(.dark, .dark *) {
       background-color: var(--color-gray-800);
@@ -1146,11 +1239,20 @@
       }
     }
   }
-  .dark\:hover\:bg-gray-800 {
+  .dark\:hover\:bg-\[\#303036\] {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: #303036;
+        }
+      }
+    }
+  }
+  .dark\:hover\:text-white {
     &:where(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-gray-800);
+          color: var(--color-white);
         }
       }
     }

package/dist/index.js

@@ -152,7 +152,7 @@ var CustomAutocomplete = ({
         "span",
         {
           key: opt.value,
-          className: "bg-gray-100 border border-gray-300 px-2 dark:bg-gray-800 dark:text-white py-0.5 rounded text-xs flex items-center gap-1"
+          className: "bg-[#F7FAFC] dark:bg-[#303036] border border-gray-300 px-2 dark:text-white py-0.5 rounded text-xs flex items-center gap-1"
         },
         opt.label,
         /* @__PURE__ */ import_react2.default.createElement(
@@ -162,7 +162,7 @@ var CustomAutocomplete = ({
               e.stopPropagation();
               toggleValue(opt.value);
             },
-            className: "text-gray-500 hover:text-gray-700 dark:text-white"
+            className: "text-gray-500 hover:text-gray-700 dark:text-white cursor-pointer dark:hover:text-white"
           },
           "\u2715"
         )
@@ -190,7 +190,7 @@ var CustomAutocomplete = ({
         {
           key: opt.value,
           onClick: () => toggleValue(opt.value),
-          className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 ${selected ? "bg-gray-50 font-medium" : ""}`
+          className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-[#F7FAFC] dark:hover:bg-[#303036] ${selected ? "bg-[#F7FAFC] dark:bg-[#303036] font-medium" : ""}`
         },
         /* @__PURE__ */ import_react2.default.createElement(
           "span",
@@ -734,6 +734,23 @@ var AppSideBar = ({
   const [authData, setAuthData] = (0, import_react12.useState)(null);
   const [selectedCountry, setSelectedCountry] = (0, import_react12.useState)("dubai");
   const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, import_react12.useState)(false);
+  const [currAppearance, setCurrAppearance] = (0, import_react12.useState)("light");
+  (0, import_react12.useEffect)(() => {
+    const savedTheme = localStorage.getItem("themeMode") || "light";
+    setCurrAppearance(savedTheme);
+  }, []);
+  const handleCurrAppearance = (appearance) => {
+    setCurrAppearance(appearance);
+    localStorage.setItem("themeMode", appearance);
+  };
+  (0, import_react12.useEffect)(() => {
+    const root = document.documentElement;
+    if (currAppearance === "light") {
+      root.classList.remove("dark");
+    } else {
+      root.classList.add("dark");
+    }
+  }, [currAppearance]);
   const countryOptions = [
     { label: "India", value: "india" },
     { label: "Dubai", value: "dubai" },
@@ -909,7 +926,24 @@ var AppSideBar = ({
       },
       /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "relative flex shrink-0 overflow-hidden dark:bg-[#27272a] rounded-full h-10 w-10" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted dark:text-white" }, ((_a = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _a.UserName) ? authData.userInfo.UserName.split("")[0] : "A")), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("p", { className: "font-semibold dark:text-white" }, ((_b = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _b.UserName) ? authData.userInfo.UserName : "Admin User"), /* @__PURE__ */ import_react12.default.createElement("p", { className: "text-sm  dark:text-[#f4f4f5cc]" }, role))),
       /* @__PURE__ */ import_react12.default.createElement("div", { className: "dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.LogOut, null))
-    ))
+    )),
+    /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center gap-4 absolute top-5 left-5 group" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "inline-flex items-center cursor-pointer relative" }, /* @__PURE__ */ import_react12.default.createElement(
+      "input",
+      {
+        type: "checkbox",
+        className: "sr-only",
+        checked: currAppearance === "dark",
+        onChange: () => handleCurrAppearance(
+          currAppearance === "light" ? "dark" : "light"
+        )
+      }
+    ), /* @__PURE__ */ import_react12.default.createElement("div", { className: "w-16 h-8 bg-gray-200 dark:bg-[#4B5563] rounded-full shadow-inner" }), /* @__PURE__ */ import_react12.default.createElement(
+      "div",
+      {
+        className: `dot ml-[2px] absolute w-7 h-7 bg-white rounded-full transition-transform duration-200 ease-in-out flex items-center justify-center ${currAppearance === "dark" ? "translate-x-8" : "translate-x-0"}`
+      },
+      currAppearance === "light" ? /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.Sun, { width: 18, height: 18 }) : /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.Moon, { width: 18, height: 18, className: "text-black" })
+    ), /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute top-[-15px] left-1/2 -translate-x-1/2 font-medium text-[#6B7280]] dark:text-[#f4f4f5cc] text-xs opacity-0 group-hover:opacity-80 transition-opacity" }, "Theme")))
   ));
 };
 

package/dist/index.mjs

@@ -103,7 +103,7 @@ var CustomAutocomplete = ({
         "span",
         {
           key: opt.value,
-          className: "bg-gray-100 border border-gray-300 px-2 dark:bg-gray-800 dark:text-white py-0.5 rounded text-xs flex items-center gap-1"
+          className: "bg-[#F7FAFC] dark:bg-[#303036] border border-gray-300 px-2 dark:text-white py-0.5 rounded text-xs flex items-center gap-1"
         },
         opt.label,
         /* @__PURE__ */ React2.createElement(
@@ -113,7 +113,7 @@ var CustomAutocomplete = ({
               e.stopPropagation();
               toggleValue(opt.value);
             },
-            className: "text-gray-500 hover:text-gray-700 dark:text-white"
+            className: "text-gray-500 hover:text-gray-700 dark:text-white cursor-pointer dark:hover:text-white"
           },
           "\u2715"
         )
@@ -141,7 +141,7 @@ var CustomAutocomplete = ({
         {
           key: opt.value,
           onClick: () => toggleValue(opt.value),
-          className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 ${selected ? "bg-gray-50 font-medium" : ""}`
+          className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-[#F7FAFC] dark:hover:bg-[#303036] ${selected ? "bg-[#F7FAFC] dark:bg-[#303036] font-medium" : ""}`
         },
         /* @__PURE__ */ React2.createElement(
           "span",
@@ -391,7 +391,7 @@ var CustomUpload = ({
 };
 
 // src/sideBar/SideBar.jsx
-import { ChevronDown as ChevronDown3, Globe as Globe2, LogOut, Menu, X } from "lucide-react";
+import { ChevronDown as ChevronDown3, Globe as Globe2, LogOut, Menu, Moon, Sun, X } from "lucide-react";
 import React12, { useEffect, useState as useState3 } from "react";
 
 // ConstantUI.js
@@ -699,6 +699,23 @@ var AppSideBar = ({
   const [authData, setAuthData] = useState3(null);
   const [selectedCountry, setSelectedCountry] = useState3("dubai");
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState3(false);
+  const [currAppearance, setCurrAppearance] = useState3("light");
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("themeMode") || "light";
+    setCurrAppearance(savedTheme);
+  }, []);
+  const handleCurrAppearance = (appearance) => {
+    setCurrAppearance(appearance);
+    localStorage.setItem("themeMode", appearance);
+  };
+  useEffect(() => {
+    const root = document.documentElement;
+    if (currAppearance === "light") {
+      root.classList.remove("dark");
+    } else {
+      root.classList.add("dark");
+    }
+  }, [currAppearance]);
   const countryOptions = [
     { label: "India", value: "india" },
     { label: "Dubai", value: "dubai" },
@@ -874,7 +891,24 @@ var AppSideBar = ({
       },
       /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React12.createElement("span", { className: "relative flex shrink-0 overflow-hidden dark:bg-[#27272a] rounded-full h-10 w-10" }, /* @__PURE__ */ React12.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted dark:text-white" }, ((_a = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _a.UserName) ? authData.userInfo.UserName.split("")[0] : "A")), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", { className: "font-semibold dark:text-white" }, ((_b = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _b.UserName) ? authData.userInfo.UserName : "Admin User"), /* @__PURE__ */ React12.createElement("p", { className: "text-sm  dark:text-[#f4f4f5cc]" }, role))),
       /* @__PURE__ */ React12.createElement("div", { className: "dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React12.createElement(LogOut, null))
-    ))
+    )),
+    /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-4 absolute top-5 left-5 group" }, /* @__PURE__ */ React12.createElement("label", { className: "inline-flex items-center cursor-pointer relative" }, /* @__PURE__ */ React12.createElement(
+      "input",
+      {
+        type: "checkbox",
+        className: "sr-only",
+        checked: currAppearance === "dark",
+        onChange: () => handleCurrAppearance(
+          currAppearance === "light" ? "dark" : "light"
+        )
+      }
+    ), /* @__PURE__ */ React12.createElement("div", { className: "w-16 h-8 bg-gray-200 dark:bg-[#4B5563] rounded-full shadow-inner" }), /* @__PURE__ */ React12.createElement(
+      "div",
+      {
+        className: `dot ml-[2px] absolute w-7 h-7 bg-white rounded-full transition-transform duration-200 ease-in-out flex items-center justify-center ${currAppearance === "dark" ? "translate-x-8" : "translate-x-0"}`
+      },
+      currAppearance === "light" ? /* @__PURE__ */ React12.createElement(Sun, { width: 18, height: 18 }) : /* @__PURE__ */ React12.createElement(Moon, { width: 18, height: 18, className: "text-black" })
+    ), /* @__PURE__ */ React12.createElement("span", { className: "absolute top-[-15px] left-1/2 -translate-x-1/2 font-medium text-[#6B7280]] dark:text-[#f4f4f5cc] text-xs opacity-0 group-hover:opacity-80 transition-opacity" }, "Theme")))
   ));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jett.admin.npmpackage",
-  "version": "1.0.72",
+  "version": "1.0.74",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "exports": {