jett.admin.npmpackage 1.0.34 → 1.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.css +51 -2
  2. package/dist/index.js +23 -23
  3. package/dist/index.mjs +23 -23
  4. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -25,10 +25,13 @@
25
25
  --color-red-100: oklch(93.6% 0.032 17.717);
26
26
  --color-red-500: oklch(63.7% 0.237 25.331);
27
27
  --color-red-800: oklch(44.4% 0.177 26.899);
28
+ --color-red-900: oklch(39.6% 0.141 25.723);
28
29
  --color-yellow-100: oklch(97.3% 0.071 103.193);
29
30
  --color-yellow-800: oklch(47.6% 0.114 61.907);
31
+ --color-yellow-900: oklch(42.1% 0.095 57.708);
30
32
  --color-green-100: oklch(96.2% 0.044 156.743);
31
33
  --color-green-800: oklch(44.8% 0.119 151.328);
34
+ --color-green-900: oklch(39.3% 0.095 152.535);
32
35
  --color-blue-600: oklch(54.6% 0.245 262.881);
33
36
  --color-gray-50: oklch(98.5% 0.002 247.839);
34
37
  --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -38,6 +41,7 @@
38
41
  --color-gray-500: oklch(55.1% 0.027 264.364);
39
42
  --color-gray-600: oklch(44.6% 0.03 256.802);
40
43
  --color-gray-700: oklch(37.3% 0.034 259.733);
44
+ --color-gray-800: oklch(27.8% 0.033 256.848);
41
45
  --color-black: #000;
42
46
  --color-white: #fff;
43
47
  --spacing: 0.25rem;
@@ -970,21 +974,66 @@
970
974
  background-color: #1d1d20;
971
975
  }
972
976
  }
977
+ .dark\:bg-\[\#27272a\] {
978
+ &:where(.dark, .dark *) {
979
+ background-color: #27272a;
980
+ }
981
+ }
982
+ .dark\:bg-black {
983
+ &:where(.dark, .dark *) {
984
+ background-color: var(--color-black);
985
+ }
986
+ }
987
+ .dark\:bg-gray-800 {
988
+ &:where(.dark, .dark *) {
989
+ background-color: var(--color-gray-800);
990
+ }
991
+ }
992
+ .dark\:bg-green-900 {
993
+ &:where(.dark, .dark *) {
994
+ background-color: var(--color-green-900);
995
+ }
996
+ }
997
+ .dark\:bg-red-900 {
998
+ &:where(.dark, .dark *) {
999
+ background-color: var(--color-red-900);
1000
+ }
1001
+ }
973
1002
  .dark\:bg-transparent {
974
1003
  &:where(.dark, .dark *) {
975
1004
  background-color: transparent;
976
1005
  }
977
1006
  }
1007
+ .dark\:bg-yellow-900 {
1008
+ &:where(.dark, .dark *) {
1009
+ background-color: var(--color-yellow-900);
1010
+ }
1011
+ }
978
1012
  .dark\:text-\[\#f4f4f5cc\] {
979
1013
  &:where(.dark, .dark *) {
980
1014
  color: #f4f4f5cc;
981
1015
  }
982
1016
  }
1017
+ .dark\:text-green-100 {
1018
+ &:where(.dark, .dark *) {
1019
+ color: var(--color-green-100);
1020
+ }
1021
+ }
1022
+ .dark\:text-red-100 {
1023
+ &:where(.dark, .dark *) {
1024
+ color: var(--color-red-100);
1025
+ }
1026
+ }
983
1027
  .dark\:text-white {
984
1028
  &:where(.dark, .dark *) {
985
1029
  color: var(--color-white);
986
1030
  }
987
1031
  }
1032
+ .dark\:text-yellow-100 {
1033
+ &:where(.dark, .dark *) {
1034
+ color: var(--color-yellow-100);
1035
+ }
1036
+ }
988
1037
  .dark\:outline-white {
989
1038
  &:where(.dark, .dark *) {
990
1039
  outline-color: var(--color-white);
@@ -999,11 +1048,11 @@
999
1048
  }
1000
1049
  }
1001
1050
  }
1002
- .dark\:hover\:bg-accent {
1051
+ .dark\:hover\:bg-gray-800 {
1003
1052
  &:where(.dark, .dark *) {
1004
1053
  &:hover {
1005
1054
  @media (hover: hover) {
1006
- background-color: var(--color-accent);
1055
+ background-color: var(--color-gray-800);
1007
1056
  }
1008
1057
  }
1009
1058
  }
package/dist/index.js CHANGED
@@ -56,13 +56,13 @@ function cn(...inputs) {
56
56
  // src/Button.jsx
57
57
  var import_react = __toESM(require("react"));
58
58
  var variantStyles = {
59
- PRIMARY: "bg-white",
60
- SECONDARY: "bg-primary text-white",
61
- DEFAULT: "bg-white text-black hover:bg-gray-100",
62
- DANGER: "bg-[#ef4444] text-white"
59
+ PRIMARY: "bg-white dark:bg-black dark:text-white",
60
+ SECONDARY: "bg-primary text-white dark:text-white",
61
+ DEFAULT: "bg-white text-black dark:text-white",
62
+ DANGER: "bg-[#ef4444] text-white dark:text-white"
63
63
  };
64
64
  var CustomButton = ({
65
- variant,
65
+ variant = "DEFAULT",
66
66
  children,
67
67
  className,
68
68
  onClick,
@@ -122,7 +122,7 @@ var CustomAutocomplete = ({
122
122
  return /* @__PURE__ */ import_react2.default.createElement(
123
123
  "div",
124
124
  {
125
- className: "flex flex-col w-full relative",
125
+ className: "flex flex-col w-full relative dark:bg-black dark:text-white",
126
126
  ref: wrapperRef,
127
127
  tabIndex: disabled ? -1 : 0,
128
128
  onBlur: handleBlur
@@ -143,16 +143,16 @@ var CustomAutocomplete = ({
143
143
  onClick: () => {
144
144
  if (!disabled) setOpen((prev) => !prev);
145
145
  },
146
- className: `flex justify-between items-center flex-wrap gap-1 rounded-md px-3 py-2 text-sm transition border h-auto min-h-10
146
+ className: `flex justify-between items-center flex-wrap gap-1 rounded-md px-3 py-2 text-sm transition border h-auto min-h-10 dark:bg-black dark:text-white
147
147
  ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-400" : "cursor-text"}
148
- ${error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)] hover:border-gray-400"}
148
+ ${error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)] hover:border-gray-400 dark:bg-black dark:text-white"}
149
149
  `
150
150
  },
151
151
  /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex flex-wrap gap-1 flex-1" }, selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ import_react2.default.createElement(
152
152
  "span",
153
153
  {
154
154
  key: opt.value,
155
- className: "bg-gray-100 border border-gray-300 px-2 py-0.5 rounded text-xs flex items-center gap-1"
155
+ 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"
156
156
  },
157
157
  opt.label,
158
158
  /* @__PURE__ */ import_react2.default.createElement(
@@ -162,7 +162,7 @@ var CustomAutocomplete = ({
162
162
  e.stopPropagation();
163
163
  toggleValue(opt.value);
164
164
  },
165
- className: "text-gray-500 hover:text-gray-700"
165
+ className: "text-gray-500 hover:text-gray-700 dark:text-white"
166
166
  },
167
167
  "\u2715"
168
168
  )
@@ -174,7 +174,7 @@ var CustomAutocomplete = ({
174
174
  }
175
175
  )
176
176
  ),
177
- !disabled && open && /* @__PURE__ */ import_react2.default.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ import_react2.default.createElement(
177
+ !disabled && open && /* @__PURE__ */ import_react2.default.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-black dark:text-white" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ import_react2.default.createElement(
178
178
  "input",
179
179
  {
180
180
  type: "text",
@@ -190,7 +190,7 @@ var CustomAutocomplete = ({
190
190
  {
191
191
  key: opt.value,
192
192
  onClick: () => toggleValue(opt.value),
193
- className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 ${selected ? "bg-gray-50 font-medium" : ""}`
193
+ 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" : ""}`
194
194
  },
195
195
  /* @__PURE__ */ import_react2.default.createElement(
196
196
  "span",
@@ -241,10 +241,10 @@ var CustomCheckbox = ({ onChange, checked }) => {
241
241
  // src/inputs/Chip.jsx
242
242
  var import_react4 = __toESM(require("react"));
243
243
  var VARIANTS = {
244
- PRIMARY: "bg-gray-100 text-black",
245
- GREEN: "bg-green-100 text-green-800",
246
- RED: "bg-red-100 text-red-800",
247
- YELLOW: "bg-yellow-100 text-yellow-800"
244
+ PRIMARY: "bg-gray-100 text-black dark:bg-gray-800 dark:text-white",
245
+ GREEN: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100",
246
+ RED: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100",
247
+ YELLOW: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"
248
248
  };
249
249
  var Chip = ({ label, variant }) => {
250
250
  return /* @__PURE__ */ import_react4.default.createElement(
@@ -335,7 +335,7 @@ var CustomSearch = ({
335
335
  onChange,
336
336
  placeholder = "Search Markets..."
337
337
  }) => {
338
- return /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] \r\n rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2" }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react2.Search, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ import_react8.default.createElement(
338
+ return /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] \r\n rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2 dark:text-white" }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react2.Search, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ import_react8.default.createElement(
339
339
  "input",
340
340
  {
341
341
  type: "text",
@@ -652,8 +652,8 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
652
652
  const navItemsLocal = navItems ?? navItemsConstant;
653
653
  const additionalItemsLocal = additionalItems ?? additionalItemsConstant;
654
654
  const sideBarLogoLocal = sideBarLogo ?? sidebarlogo_default;
655
- return /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-[320px] transition-all ease-in-out delay-100 bg-transparent border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 h-full max-h-[100vh]" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "p-2 mb-4" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-[108px] h-[40px] flex items-center \r\n justify-center" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: sideBarLogoLocal, alt: "sidebarLogo", width: 108, height: 40 }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "text-primary" }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.Globe, { width: 20, height: 20 })), /* @__PURE__ */ import_react11.default.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement(CustomAutocomplete, { options: [] }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ import_react11.default.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
656
- return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-accent dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2", onClick: (e) => {
655
+ return /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-[320px] transition-all ease-in-out delay-100 bg-transparent border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 h-full max-h-[100vh] dark:bg-black" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "p-2 mb-4" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-[108px] h-[40px] flex items-center \r\n justify-center dark:bg-black" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: sideBarLogoLocal, alt: "sidebarLogo", width: 108, height: 40 }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "text-primary" }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.Globe, { width: 20, height: 20 })), /* @__PURE__ */ import_react11.default.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement(CustomAutocomplete, { options: [] }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ import_react11.default.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
656
+ return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2", onClick: (e) => {
657
657
  item.onClick && item.onClick(e);
658
658
  handleIconRotate(e, index);
659
659
  } }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "text-primary" }, /* @__PURE__ */ import_react11.default.createElement(item.Icon, { width: 20, height: 20 })), /* @__PURE__ */ import_react11.default.createElement("span", { className: "font-medium dark:text-[#f4f4f5cc]" }, item.label), item.isDropDown && /* @__PURE__ */ import_react11.default.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.ChevronDown, { width: 20, height: 20 }))), item.options && item.options.length > 0 && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ml-[20px] max-h-0 overflow-hidden flex flex-col", id: `dropDownOptions-${index}` }, item.options.map((options, optionsIndex) => {
@@ -686,7 +686,7 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
686
686
  return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer", onClick: () => item.onClick && item.onClick() }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "text-primary" }, /* @__PURE__ */ import_react11.default.createElement(item.Icon, { width: 20, height: 20 })), /* @__PURE__ */ import_react11.default.createElement("span", { className: "font-medium dark:text-[#f4f4f5cc]" }, item.label));
687
687
  }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "mt-auto bg-[#fafafa] dark:bg-transparent sticky bottom-0 pt-2" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center justify-between p-2 rounded-lg hover:bg-accent dark:hover:bg-[#27272a] cursor-pointer", onClick: () => {
688
688
  window.location.href = "/profile";
689
- } }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "relative flex shrink-0 overflow-hidden rounded-full h-10 w-10" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted" }, ((_a = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _a.UserName) ? authData.userInfo.UserName.split("")[0] : "A")), /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("p", { className: "font-semibold" }, ((_b = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _b.UserName) ? authData.userInfo.UserName : "Admin User"), /* @__PURE__ */ import_react11.default.createElement("p", { className: "text-sm dark:text-[#f4f4f5cc]" }, role))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.LogOut, null)))));
689
+ } }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "relative flex shrink-0 overflow-hidden dark:bg-[#27272a] rounded-full h-10 w-10" }, /* @__PURE__ */ import_react11.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_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.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_react11.default.createElement("p", { className: "text-sm dark:text-[#f4f4f5cc]" }, role))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react5.LogOut, null)))));
690
690
  };
691
691
 
692
692
  // src/RightSheet/RightSheet.jsx
@@ -736,7 +736,7 @@ var RightSheet = ({
736
736
  onClick: (e) => e.stopPropagation()
737
737
  },
738
738
  /* @__PURE__ */ import_react12.default.createElement("div", { className: "bg-white min-h-full " }, children),
739
- /* @__PURE__ */ import_react12.default.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t sticky bottom-0 bg-white border-[#e6e6e6]" }, /* @__PURE__ */ import_react12.default.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose() }, "Cancel"), /* @__PURE__ */ import_react12.default.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
739
+ /* @__PURE__ */ import_react12.default.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t sticky bottom-0 bg-white border-[#e6e6e6] dark:border-[#303036] dark:bg-black dark:text-white" }, /* @__PURE__ */ import_react12.default.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose() }, "Cancel"), /* @__PURE__ */ import_react12.default.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
740
740
  )
741
741
  );
742
742
  };
@@ -744,10 +744,10 @@ var RightSheet = ({
744
744
  // src/Table/CustomTable.jsx
745
745
  var import_react13 = __toESM(require("react"));
746
746
  var CustomTable = ({ tableHeader, setIsAllChecked, isAllChecked, children }) => {
747
- return /* @__PURE__ */ import_react13.default.createElement("div", { className: "border border-[#e5e5e5] rounded-lg overflow-x-auto" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "w-full relative overflow-x-auto" }, /* @__PURE__ */ import_react13.default.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white table-fixed border-collapse" }, /* @__PURE__ */ import_react13.default.createElement("thead", { className: "border-b border-[#e5e5e5]" }, /* @__PURE__ */ import_react13.default.createElement("tr", { className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n data-[state=selected]:bg-muted" }, /* @__PURE__ */ import_react13.default.createElement("th", { className: "px-4 py-3 text-left w-[50px]" }, /* @__PURE__ */ import_react13.default.createElement(CustomCheckbox, { checked: isAllChecked, onChange: () => {
747
+ return /* @__PURE__ */ import_react13.default.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "w-full relative overflow-x-auto" }, /* @__PURE__ */ import_react13.default.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-black table-fixed border-collapse" }, /* @__PURE__ */ import_react13.default.createElement("thead", { className: "border-b border-[#e5e5e5] dark:bg-black" }, /* @__PURE__ */ import_react13.default.createElement("tr", { className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n data-[state=selected]:bg-muted" }, /* @__PURE__ */ import_react13.default.createElement("th", { className: "px-4 py-3 text-left w-[50px]" }, /* @__PURE__ */ import_react13.default.createElement(CustomCheckbox, { checked: isAllChecked, onChange: () => {
748
748
  setIsAllChecked(!isAllChecked);
749
749
  } })), tableHeader.map((header, index) => {
750
- return /* @__PURE__ */ import_react13.default.createElement("th", { className: `px-4 py-3 text-sm font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`, key: header + index }, header);
750
+ return /* @__PURE__ */ import_react13.default.createElement("th", { className: `px-4 py-3 text-sm dark:bg-black font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`, key: header + index }, header);
751
751
  }))), /* @__PURE__ */ import_react13.default.createElement("tbody", null, children))));
752
752
  };
753
753
 
package/dist/index.mjs CHANGED
@@ -8,13 +8,13 @@ function cn(...inputs) {
8
8
  // src/Button.jsx
9
9
  import React from "react";
10
10
  var variantStyles = {
11
- PRIMARY: "bg-white",
12
- SECONDARY: "bg-primary text-white",
13
- DEFAULT: "bg-white text-black hover:bg-gray-100",
14
- DANGER: "bg-[#ef4444] text-white"
11
+ PRIMARY: "bg-white dark:bg-black dark:text-white",
12
+ SECONDARY: "bg-primary text-white dark:text-white",
13
+ DEFAULT: "bg-white text-black dark:text-white",
14
+ DANGER: "bg-[#ef4444] text-white dark:text-white"
15
15
  };
16
16
  var CustomButton = ({
17
- variant,
17
+ variant = "DEFAULT",
18
18
  children,
19
19
  className,
20
20
  onClick,
@@ -74,7 +74,7 @@ var CustomAutocomplete = ({
74
74
  return /* @__PURE__ */ React2.createElement(
75
75
  "div",
76
76
  {
77
- className: "flex flex-col w-full relative",
77
+ className: "flex flex-col w-full relative dark:bg-black dark:text-white",
78
78
  ref: wrapperRef,
79
79
  tabIndex: disabled ? -1 : 0,
80
80
  onBlur: handleBlur
@@ -95,16 +95,16 @@ var CustomAutocomplete = ({
95
95
  onClick: () => {
96
96
  if (!disabled) setOpen((prev) => !prev);
97
97
  },
98
- className: `flex justify-between items-center flex-wrap gap-1 rounded-md px-3 py-2 text-sm transition border h-auto min-h-10
98
+ className: `flex justify-between items-center flex-wrap gap-1 rounded-md px-3 py-2 text-sm transition border h-auto min-h-10 dark:bg-black dark:text-white
99
99
  ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-400" : "cursor-text"}
100
- ${error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)] hover:border-gray-400"}
100
+ ${error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)] hover:border-gray-400 dark:bg-black dark:text-white"}
101
101
  `
102
102
  },
103
103
  /* @__PURE__ */ React2.createElement("div", { className: "flex flex-wrap gap-1 flex-1" }, selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ React2.createElement(
104
104
  "span",
105
105
  {
106
106
  key: opt.value,
107
- className: "bg-gray-100 border border-gray-300 px-2 py-0.5 rounded text-xs flex items-center gap-1"
107
+ 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"
108
108
  },
109
109
  opt.label,
110
110
  /* @__PURE__ */ React2.createElement(
@@ -114,7 +114,7 @@ var CustomAutocomplete = ({
114
114
  e.stopPropagation();
115
115
  toggleValue(opt.value);
116
116
  },
117
- className: "text-gray-500 hover:text-gray-700"
117
+ className: "text-gray-500 hover:text-gray-700 dark:text-white"
118
118
  },
119
119
  "\u2715"
120
120
  )
@@ -126,7 +126,7 @@ var CustomAutocomplete = ({
126
126
  }
127
127
  )
128
128
  ),
129
- !disabled && open && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React2.createElement(Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React2.createElement(
129
+ !disabled && open && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-black dark:text-white" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React2.createElement(Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React2.createElement(
130
130
  "input",
131
131
  {
132
132
  type: "text",
@@ -142,7 +142,7 @@ var CustomAutocomplete = ({
142
142
  {
143
143
  key: opt.value,
144
144
  onClick: () => toggleValue(opt.value),
145
- className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 ${selected ? "bg-gray-50 font-medium" : ""}`
145
+ 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" : ""}`
146
146
  },
147
147
  /* @__PURE__ */ React2.createElement(
148
148
  "span",
@@ -193,10 +193,10 @@ var CustomCheckbox = ({ onChange, checked }) => {
193
193
  // src/inputs/Chip.jsx
194
194
  import React4 from "react";
195
195
  var VARIANTS = {
196
- PRIMARY: "bg-gray-100 text-black",
197
- GREEN: "bg-green-100 text-green-800",
198
- RED: "bg-red-100 text-red-800",
199
- YELLOW: "bg-yellow-100 text-yellow-800"
196
+ PRIMARY: "bg-gray-100 text-black dark:bg-gray-800 dark:text-white",
197
+ GREEN: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100",
198
+ RED: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100",
199
+ YELLOW: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"
200
200
  };
201
201
  var Chip = ({ label, variant }) => {
202
202
  return /* @__PURE__ */ React4.createElement(
@@ -287,7 +287,7 @@ var CustomSearch = ({
287
287
  onChange,
288
288
  placeholder = "Search Markets..."
289
289
  }) => {
290
- return /* @__PURE__ */ React8.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] \r\n rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2" }, /* @__PURE__ */ React8.createElement(Search2, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ React8.createElement(
290
+ return /* @__PURE__ */ React8.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] \r\n rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2 dark:text-white" }, /* @__PURE__ */ React8.createElement(Search2, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ React8.createElement(
291
291
  "input",
292
292
  {
293
293
  type: "text",
@@ -604,8 +604,8 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
604
604
  const navItemsLocal = navItems ?? navItemsConstant;
605
605
  const additionalItemsLocal = additionalItems ?? additionalItemsConstant;
606
606
  const sideBarLogoLocal = sideBarLogo ?? sidebarlogo_default;
607
- return /* @__PURE__ */ React11.createElement("div", { className: "w-[320px] transition-all ease-in-out delay-100 bg-transparent border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 h-full max-h-[100vh]" }, /* @__PURE__ */ React11.createElement("div", { className: "p-2 mb-4" }, /* @__PURE__ */ React11.createElement("div", { className: "w-[108px] h-[40px] flex items-center \r\n justify-center" }, /* @__PURE__ */ React11.createElement("img", { src: sideBarLogoLocal, alt: "sidebarLogo", width: 108, height: 40 }))), /* @__PURE__ */ React11.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React11.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React11.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React11.createElement(Globe2, { width: 20, height: 20 })), /* @__PURE__ */ React11.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement(CustomAutocomplete, { options: [] }))), /* @__PURE__ */ React11.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ React11.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
608
- return /* @__PURE__ */ React11.createElement("div", { key: index, className: "" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-accent dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2", onClick: (e) => {
607
+ return /* @__PURE__ */ React11.createElement("div", { className: "w-[320px] transition-all ease-in-out delay-100 bg-transparent border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 h-full max-h-[100vh] dark:bg-black" }, /* @__PURE__ */ React11.createElement("div", { className: "p-2 mb-4" }, /* @__PURE__ */ React11.createElement("div", { className: "w-[108px] h-[40px] flex items-center \r\n justify-center dark:bg-black" }, /* @__PURE__ */ React11.createElement("img", { src: sideBarLogoLocal, alt: "sidebarLogo", width: 108, height: 40 }))), /* @__PURE__ */ React11.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React11.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React11.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React11.createElement(Globe2, { width: 20, height: 20 })), /* @__PURE__ */ React11.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement(CustomAutocomplete, { options: [] }))), /* @__PURE__ */ React11.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ React11.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
608
+ return /* @__PURE__ */ React11.createElement("div", { key: index, className: "" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2", onClick: (e) => {
609
609
  item.onClick && item.onClick(e);
610
610
  handleIconRotate(e, index);
611
611
  } }, /* @__PURE__ */ React11.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React11.createElement(item.Icon, { width: 20, height: 20 })), /* @__PURE__ */ React11.createElement("span", { className: "font-medium dark:text-[#f4f4f5cc]" }, item.label), item.isDropDown && /* @__PURE__ */ React11.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ React11.createElement(ChevronDown2, { width: 20, height: 20 }))), item.options && item.options.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "ml-[20px] max-h-0 overflow-hidden flex flex-col", id: `dropDownOptions-${index}` }, item.options.map((options, optionsIndex) => {
@@ -638,7 +638,7 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
638
638
  return /* @__PURE__ */ React11.createElement("div", { key: index, className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer", onClick: () => item.onClick && item.onClick() }, /* @__PURE__ */ React11.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React11.createElement(item.Icon, { width: 20, height: 20 })), /* @__PURE__ */ React11.createElement("span", { className: "font-medium dark:text-[#f4f4f5cc]" }, item.label));
639
639
  }))), /* @__PURE__ */ React11.createElement("div", { className: "mt-auto bg-[#fafafa] dark:bg-transparent sticky bottom-0 pt-2" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center justify-between p-2 rounded-lg hover:bg-accent dark:hover:bg-[#27272a] cursor-pointer", onClick: () => {
640
640
  window.location.href = "/profile";
641
- } }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React11.createElement("span", { className: "relative flex shrink-0 overflow-hidden rounded-full h-10 w-10" }, /* @__PURE__ */ React11.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted" }, ((_a = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _a.UserName) ? authData.userInfo.UserName.split("")[0] : "A")), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("p", { className: "font-semibold" }, ((_b = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _b.UserName) ? authData.userInfo.UserName : "Admin User"), /* @__PURE__ */ React11.createElement("p", { className: "text-sm dark:text-[#f4f4f5cc]" }, role))), /* @__PURE__ */ React11.createElement("div", { className: "dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React11.createElement(LogOut, null)))));
641
+ } }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React11.createElement("span", { className: "relative flex shrink-0 overflow-hidden dark:bg-[#27272a] rounded-full h-10 w-10" }, /* @__PURE__ */ React11.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__ */ React11.createElement("div", null, /* @__PURE__ */ React11.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__ */ React11.createElement("p", { className: "text-sm dark:text-[#f4f4f5cc]" }, role))), /* @__PURE__ */ React11.createElement("div", { className: "dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React11.createElement(LogOut, null)))));
642
642
  };
643
643
 
644
644
  // src/RightSheet/RightSheet.jsx
@@ -688,7 +688,7 @@ var RightSheet = ({
688
688
  onClick: (e) => e.stopPropagation()
689
689
  },
690
690
  /* @__PURE__ */ React12.createElement("div", { className: "bg-white min-h-full " }, children),
691
- /* @__PURE__ */ React12.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t sticky bottom-0 bg-white border-[#e6e6e6]" }, /* @__PURE__ */ React12.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose() }, "Cancel"), /* @__PURE__ */ React12.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
691
+ /* @__PURE__ */ React12.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t sticky bottom-0 bg-white border-[#e6e6e6] dark:border-[#303036] dark:bg-black dark:text-white" }, /* @__PURE__ */ React12.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose() }, "Cancel"), /* @__PURE__ */ React12.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
692
692
  )
693
693
  );
694
694
  };
@@ -696,10 +696,10 @@ var RightSheet = ({
696
696
  // src/Table/CustomTable.jsx
697
697
  import React13 from "react";
698
698
  var CustomTable = ({ tableHeader, setIsAllChecked, isAllChecked, children }) => {
699
- return /* @__PURE__ */ React13.createElement("div", { className: "border border-[#e5e5e5] rounded-lg overflow-x-auto" }, /* @__PURE__ */ React13.createElement("div", { className: "w-full relative overflow-x-auto" }, /* @__PURE__ */ React13.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white table-fixed border-collapse" }, /* @__PURE__ */ React13.createElement("thead", { className: "border-b border-[#e5e5e5]" }, /* @__PURE__ */ React13.createElement("tr", { className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n data-[state=selected]:bg-muted" }, /* @__PURE__ */ React13.createElement("th", { className: "px-4 py-3 text-left w-[50px]" }, /* @__PURE__ */ React13.createElement(CustomCheckbox, { checked: isAllChecked, onChange: () => {
699
+ return /* @__PURE__ */ React13.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto" }, /* @__PURE__ */ React13.createElement("div", { className: "w-full relative overflow-x-auto" }, /* @__PURE__ */ React13.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-black table-fixed border-collapse" }, /* @__PURE__ */ React13.createElement("thead", { className: "border-b border-[#e5e5e5] dark:bg-black" }, /* @__PURE__ */ React13.createElement("tr", { className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n data-[state=selected]:bg-muted" }, /* @__PURE__ */ React13.createElement("th", { className: "px-4 py-3 text-left w-[50px]" }, /* @__PURE__ */ React13.createElement(CustomCheckbox, { checked: isAllChecked, onChange: () => {
700
700
  setIsAllChecked(!isAllChecked);
701
701
  } })), tableHeader.map((header, index) => {
702
- return /* @__PURE__ */ React13.createElement("th", { className: `px-4 py-3 text-sm font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`, key: header + index }, header);
702
+ return /* @__PURE__ */ React13.createElement("th", { className: `px-4 py-3 text-sm dark:bg-black font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`, key: header + index }, header);
703
703
  }))), /* @__PURE__ */ React13.createElement("tbody", null, children))));
704
704
  };
705
705
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jett.admin.npmpackage",
3
- "version": "1.0.34",
3
+ "version": "1.0.36",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "exports": {