jett.admin.npmpackage 1.0.73 → 1.0.77

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,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-\[-15px\] {
+    top: -15px;
+  }
   .top-full {
     top: 100%;
   }
@@ -288,6 +302,9 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -306,6 +323,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mr-\[8px\] {
+    margin-right: 8px;
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -321,9 +341,15 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-\[2px\] {
+    margin-left: 2px;
+  }
   .ml-\[8px\] {
     margin-left: 8px;
   }
+  .ml-\[16px\] {
+    margin-left: 16px;
+  }
   .ml-\[20px\] {
     margin-left: 20px;
   }
@@ -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);
@@ -491,6 +537,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -685,9 +734,18 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pt-20 {
     padding-top: calc(var(--spacing) * 20);
   }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .text-center {
     text-align: center;
   }
@@ -715,6 +773,9 @@
   .text-\[14px\] {
     font-size: 14px;
   }
+  .text-\[16px\] {
+    font-size: 16px;
+  }
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -739,9 +800,15 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .text-\[\#3f3f46cc\] {
     color: #3f3f46cc;
   }
+  .text-\[\#6B7280\] {
+    color: #6B7280;
+  }
   .text-\[\#737373\] {
     color: #737373;
   }
@@ -778,6 +845,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:
@@ -787,6 +857,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:
@@ -850,6 +929,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,
@@ -881,6 +965,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);
@@ -1072,6 +1163,11 @@
       background-color: #1d1d20;
     }
   }
+  .dark\:bg-\[\#4B5563\] {
+    &:where(.dark, .dark *) {
+      background-color: #4B5563;
+    }
+  }
   .dark\:bg-\[\#18181b\] {
     &:where(.dark, .dark *) {
       background-color: #18181b;

package/dist/index.js

@@ -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" },
@@ -816,7 +833,7 @@ var AppSideBar = ({
         className: "object-contain"
       }
     ))),
-    /* @__PURE__ */ import_react12.default.createElement("div", { className: "mb-4" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-primary" }, /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.Globe, { width: 20, height: 20 })), /* @__PURE__ */ import_react12.default.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement("div", { className: "mb-4" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-primary" }, /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.Globe, { width: 20, height: 20 })), /* @__PURE__ */ import_react12.default.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "mr-[8px] ml-[16px]" }, /* @__PURE__ */ import_react12.default.createElement(
       CustomSelect,
       {
         heading: "",
@@ -907,9 +924,25 @@ var AppSideBar = ({
           window.location.href = "/profile";
         }
       },
-      /* @__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-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: "flex w-full justify-space-between items-center gap-4 group pl-4 pb-4 pt-5" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex text-[16px] font-medium dark:text-[#f4f4f5cc] gap-2" }, /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.SunMoon, { className: "mr-10px" }), /* @__PURE__ */ import_react12.default.createElement("span", null, "Appearance ")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex w-full justify-end" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "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 whitespace-nowrap 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" }, "Choose your app\u2019s style."))))
   ));
 };
 

package/dist/index.mjs

@@ -391,7 +391,16 @@ 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,
+  SunMoon,
+  X
+} from "lucide-react";
 import React12, { useEffect, useState as useState3 } from "react";
 
 // ConstantUI.js
@@ -699,6 +708,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" },
@@ -781,7 +807,7 @@ var AppSideBar = ({
         className: "object-contain"
       }
     ))),
-    /* @__PURE__ */ React12.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React12.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React12.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React12.createElement(Globe2, { width: 20, height: 20 })), /* @__PURE__ */ React12.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React12.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React12.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React12.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React12.createElement(Globe2, { width: 20, height: 20 })), /* @__PURE__ */ React12.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ React12.createElement("div", { className: "mr-[8px] ml-[16px]" }, /* @__PURE__ */ React12.createElement(
       CustomSelect,
       {
         heading: "",
@@ -872,9 +898,25 @@ var AppSideBar = ({
           window.location.href = "/profile";
         }
       },
-      /* @__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-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: "flex w-full justify-space-between items-center gap-4 group pl-4 pb-4 pt-5" }, /* @__PURE__ */ React12.createElement("div", { className: "flex text-[16px] font-medium dark:text-[#f4f4f5cc] gap-2" }, /* @__PURE__ */ React12.createElement(SunMoon, { className: "mr-10px" }), /* @__PURE__ */ React12.createElement("span", null, "Appearance ")), /* @__PURE__ */ React12.createElement("div", { className: "flex w-full justify-end" }, /* @__PURE__ */ React12.createElement("label", { className: "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 whitespace-nowrap 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" }, "Choose your app\u2019s style."))))
   ));
 };
 

package/package.json

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