tccd-ui 0.0.89 → 0.0.91

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 (7) hide show
  1. package/dist/index.d.mts +14 -9
  2. package/dist/index.d.ts +14 -9
  3. package/dist/index.js +123 -79
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +123 -79
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -96,7 +96,7 @@ interface DropdownMenuProps {
96
96
  className?: string;
97
97
  id?: string;
98
98
  }
99
- declare function DropdownMenu({ label, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
99
+ declare function DropDownMenu({ label, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
100
100
 
101
101
  declare const DropdownPopup: ({ isOpen, onClose, items, position, width, triggerRef, alignToTrigger, }: DropdownMenuProps$1) => react_jsx_runtime.JSX.Element;
102
102
 
@@ -143,15 +143,20 @@ declare const Modal: ({ title, isOpen, onClose, children, className, }: {
143
143
  className?: string;
144
144
  }) => react_jsx_runtime.JSX.Element;
145
145
 
146
- declare function NumberField({ label, value, placeholder, onChange, error, maxLength, id, }: {
146
+ interface NumberFieldProps {
147
147
  label: string;
148
- id: string;
149
- value: string;
150
- placeholder: string;
151
- maxLength?: number;
152
- onChange: (newValue: React$1.ChangeEvent<HTMLInputElement>) => void;
148
+ value: number | string;
149
+ onChange: (value: number | string) => void;
150
+ min?: number;
151
+ max?: number;
152
+ step?: number;
153
+ placeholder?: string;
154
+ disabled?: boolean;
153
155
  error?: string;
154
- }): react_jsx_runtime.JSX.Element;
156
+ className?: string;
157
+ inputClassName?: string;
158
+ }
159
+ declare const NumberField: React$1.FC<NumberFieldProps>;
155
160
 
156
161
  declare function PasswordField({ id, value, label, onChange, error, }: {
157
162
  id: string;
@@ -213,4 +218,4 @@ declare const setDarkModeConfig: (config: {
213
218
  enableDarkMode: boolean;
214
219
  }) => void;
215
220
 
216
- export { Button, ButtonTypes, ButtonWidths, Checkbox, DatePicker, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps$1 as DropdownMenuProps, type DropdownOption, DropdownPopup, ErrorScreen, FullScreenViewer, InfoScreen, type InfoScreenProps, InputField, LazyImageLoader, LoadingPage, type MediaItem, Modal, NumberField, PasswordField, Radiobutton as RadioButton, SearchField, SuccessScreen, TextAreaField, TextDisplayEdit, TimePicker as Timepicker, UnauthorizedPage, setDarkModeConfig };
221
+ export { Button, ButtonTypes, ButtonWidths, Checkbox, DatePicker, DropDownMenu as DropdownMenu, type DropdownMenuItem, type DropdownMenuProps$1 as DropdownMenuProps, type DropdownOption, DropdownPopup, ErrorScreen, FullScreenViewer, InfoScreen, type InfoScreenProps, InputField, LazyImageLoader, LoadingPage, type MediaItem, Modal, NumberField, PasswordField, Radiobutton as RadioButton, SearchField, SuccessScreen, TextAreaField, TextDisplayEdit, TimePicker as Timepicker, UnauthorizedPage, setDarkModeConfig };
package/dist/index.d.ts CHANGED
@@ -96,7 +96,7 @@ interface DropdownMenuProps {
96
96
  className?: string;
97
97
  id?: string;
98
98
  }
99
- declare function DropdownMenu({ label, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
99
+ declare function DropDownMenu({ label, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
100
100
 
101
101
  declare const DropdownPopup: ({ isOpen, onClose, items, position, width, triggerRef, alignToTrigger, }: DropdownMenuProps$1) => react_jsx_runtime.JSX.Element;
102
102
 
@@ -143,15 +143,20 @@ declare const Modal: ({ title, isOpen, onClose, children, className, }: {
143
143
  className?: string;
144
144
  }) => react_jsx_runtime.JSX.Element;
145
145
 
146
- declare function NumberField({ label, value, placeholder, onChange, error, maxLength, id, }: {
146
+ interface NumberFieldProps {
147
147
  label: string;
148
- id: string;
149
- value: string;
150
- placeholder: string;
151
- maxLength?: number;
152
- onChange: (newValue: React$1.ChangeEvent<HTMLInputElement>) => void;
148
+ value: number | string;
149
+ onChange: (value: number | string) => void;
150
+ min?: number;
151
+ max?: number;
152
+ step?: number;
153
+ placeholder?: string;
154
+ disabled?: boolean;
153
155
  error?: string;
154
- }): react_jsx_runtime.JSX.Element;
156
+ className?: string;
157
+ inputClassName?: string;
158
+ }
159
+ declare const NumberField: React$1.FC<NumberFieldProps>;
155
160
 
156
161
  declare function PasswordField({ id, value, label, onChange, error, }: {
157
162
  id: string;
@@ -213,4 +218,4 @@ declare const setDarkModeConfig: (config: {
213
218
  enableDarkMode: boolean;
214
219
  }) => void;
215
220
 
216
- export { Button, ButtonTypes, ButtonWidths, Checkbox, DatePicker, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps$1 as DropdownMenuProps, type DropdownOption, DropdownPopup, ErrorScreen, FullScreenViewer, InfoScreen, type InfoScreenProps, InputField, LazyImageLoader, LoadingPage, type MediaItem, Modal, NumberField, PasswordField, Radiobutton as RadioButton, SearchField, SuccessScreen, TextAreaField, TextDisplayEdit, TimePicker as Timepicker, UnauthorizedPage, setDarkModeConfig };
221
+ export { Button, ButtonTypes, ButtonWidths, Checkbox, DatePicker, DropDownMenu as DropdownMenu, type DropdownMenuItem, type DropdownMenuProps$1 as DropdownMenuProps, type DropdownOption, DropdownPopup, ErrorScreen, FullScreenViewer, InfoScreen, type InfoScreenProps, InputField, LazyImageLoader, LoadingPage, type MediaItem, Modal, NumberField, PasswordField, Radiobutton as RadioButton, SearchField, SuccessScreen, TextAreaField, TextDisplayEdit, TimePicker as Timepicker, UnauthorizedPage, setDarkModeConfig };
package/dist/index.js CHANGED
@@ -24,7 +24,7 @@ __export(index_exports, {
24
24
  ButtonWidths: () => ButtonWidths,
25
25
  Checkbox: () => Checkbox,
26
26
  DatePicker: () => DatePicker,
27
- DropdownMenu: () => DropdownMenu,
27
+ DropdownMenu: () => DropDownMenu,
28
28
  DropdownPopup: () => DropdownPopup_default,
29
29
  ErrorScreen: () => ErrorScreen,
30
30
  FullScreenViewer: () => FullScreenViewer,
@@ -33,7 +33,7 @@ __export(index_exports, {
33
33
  LazyImageLoader: () => LazyImageLoader_default,
34
34
  LoadingPage: () => LoadingPage_default,
35
35
  Modal: () => Modal_default,
36
- NumberField: () => NumberField,
36
+ NumberField: () => NumberField_default,
37
37
  PasswordField: () => PasswordField,
38
38
  RadioButton: () => Radiobutton,
39
39
  SearchField: () => SearchField,
@@ -154,6 +154,7 @@ function Checkbox({
154
154
  checked,
155
155
  onChange
156
156
  }) {
157
+ const dark = config.ENABLE_DARK_MODE;
157
158
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "inline-flex items-center cursor-pointer relative pl-7 select-none", children: [
158
159
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
159
160
  "input",
@@ -167,7 +168,7 @@ function Checkbox({
167
168
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
168
169
  "span",
169
170
  {
170
- className: "\r\n absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 rounded-md\r\n border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900\r\n peer-checked:bg-primary peer-checked:border-primary\r\n flex items-center justify-center\r\n transition-colors\r\n pointer-events-none\r\n ",
171
+ className: `absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 rounded-md border-2 flex items-center justify-center transition-colors pointer-events-none ` + (dark ? "border-gray-600 bg-gray-900" : "border-gray-300 bg-white") + " peer-checked:bg-primary peer-checked:border-primary",
171
172
  children: checked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
172
173
  "svg",
173
174
  {
@@ -188,7 +189,7 @@ function Checkbox({
188
189
  )
189
190
  }
190
191
  ),
191
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm dark:text-gray-200", children: label })
192
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: dark ? "text-sm text-gray-200" : "text-sm", children: label })
192
193
  ] });
193
194
  }
194
195
 
@@ -721,7 +722,7 @@ var import_react2 = require("react");
721
722
  var import_react_dom2 = require("react-dom");
722
723
  var import_io5 = require("react-icons/io5");
723
724
  var import_jsx_runtime4 = require("react/jsx-runtime");
724
- function DropdownMenu({
725
+ function DropDownMenu({
725
726
  label,
726
727
  placeholder = "Select an option",
727
728
  options,
@@ -733,6 +734,7 @@ function DropdownMenu({
733
734
  id
734
735
  }) {
735
736
  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
737
+ const dark = config.ENABLE_DARK_MODE;
736
738
  const dropdownRef = (0, import_react2.useRef)(null);
737
739
  const buttonRef = (0, import_react2.useRef)(null);
738
740
  const [menuStyles, setMenuStyles] = (0, import_react2.useState)({});
@@ -772,7 +774,7 @@ function DropdownMenu({
772
774
  "label",
773
775
  {
774
776
  htmlFor: id,
775
- className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold align-center",
777
+ className: dark ? "text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold align-center" : "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold align-center",
776
778
  children: label
777
779
  }
778
780
  ),
@@ -784,16 +786,20 @@ function DropdownMenu({
784
786
  ref: buttonRef,
785
787
  onClick: () => !disabled && setIsOpen(!isOpen),
786
788
  disabled,
787
- className: `flex items-center justify-between w-full text-left bg-transparent border-gray-400 dark:border-gray-600 px-2 py-1.5 md:px-3 md:py-2 border outline-none
789
+ className: `flex items-center justify-between w-full text-left px-2 py-1.5 md:px-3 md:py-2 border outline-none
788
790
  ${isOpen ? "rounded-t-xl" : "rounded-xl"}
789
- ${error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 dark:border-red-700 dark:focus:border-red-600" : "focus:border-primary dark:focus:border-primary"} transition-all duration-300 ease-in-out text-sm dark:bg-gray-900 dark:text-white ${!selectedOption ? "text-gray-400 dark:text-gray-400" : ""} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
791
+ ${dark ? "border-gray-600 bg-gray-900 text-white" : "border-gray-400 bg-transparent"}
792
+ ${error ? dark ? "border-red-700 focus:border-red-600" : "border-red-300 focus:border-red-500 focus:ring-red-500/30" : dark ? "focus:border-primary" : "focus:border-primary"}
793
+ transition-all duration-300 ease-in-out text-sm
794
+ ${!selectedOption ? dark ? "text-gray-400" : "text-gray-400" : ""}
795
+ ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
790
796
  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate w-full text-center", children: selectedOption ? selectedOption.label : placeholder })
791
797
  }
792
798
  ),
793
799
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
794
800
  import_io5.IoChevronDown,
795
801
  {
796
- className: `absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 dark:text-label text-secondary transition-transform duration-200 pointer-events-none ${isOpen ? "rotate-180" : ""}`
802
+ className: `absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 transition-transform duration-200 pointer-events-none ${isOpen ? "rotate-180" : ""} ${dark ? "text-label" : "text-secondary"}`
797
803
  }
798
804
  )
799
805
  ] }),
@@ -803,8 +809,8 @@ function DropdownMenu({
803
809
  {
804
810
  ref: dropdownRef,
805
811
  style: menuStyles,
806
- className: "bg-background border border-secondary/30 rounded-b-xl shadow-lg max-h-60 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-background [&::-webkit-scrollbar-thumb]:bg-secondary/30 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-secondary/50",
807
- children: options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-3 py-2 text-sm text-text", children: "No options available" }) : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
812
+ className: `border rounded-b-xl shadow-lg max-h-60 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-background [&::-webkit-scrollbar-thumb]:bg-secondary/30 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-secondary/50 ` + (dark ? "bg-gray-900 border-gray-600" : "bg-background border-secondary/30"),
813
+ children: options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: dark ? "px-3 py-2 text-sm text-gray-200" : "px-3 py-2 text-sm text-text", children: "No options available" }) : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
808
814
  "button",
809
815
  {
810
816
  type: "button",
@@ -812,8 +818,8 @@ function DropdownMenu({
812
818
  disabled: option.disabled,
813
819
  className: `
814
820
  w-full px-3 py-2 text-left text-sm transition-colors duration-150
815
- ${option.disabled ? "text-gray-400 cursor-not-allowed" : "text-contrast dark:text-text hover:bg-secondary/10 hover:dark:bg-surface-glass-bg hover:text-secondary hover:dark:text-text cursor-pointer"}
816
- ${value === option.value ? "bg-secondary/20 text-secondary dark:bg-surface-glass-bg/50 dark:text-text font-medium" : ""}
821
+ ${option.disabled ? "text-gray-400 cursor-not-allowed" : dark ? "text-text hover:bg-surface-glass-bg hover:text-text cursor-pointer" : "text-contrast hover:bg-secondary/10 hover:text-secondary cursor-pointer"}
822
+ ${value === option.value ? dark ? "bg-surface-glass-bg/50 text-text font-medium" : "bg-secondary/20 text-secondary font-medium" : ""}
817
823
  first:rounded-t-xl last:rounded-b-xl
818
824
  `,
819
825
  children: option.label
@@ -824,7 +830,7 @@ function DropdownMenu({
824
830
  ),
825
831
  document.body
826
832
  ),
827
- error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mt-1 text-sm text-red-600", children: error })
833
+ error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: dark ? "mt-1 text-sm text-red-400" : "mt-1 text-sm text-red-600", children: error })
828
834
  ] });
829
835
  }
830
836
 
@@ -879,6 +885,7 @@ var DropdownPopup = ({
879
885
  setMenuOffset({ top: `${menuTop}px` });
880
886
  }
881
887
  }, [isOpen, alignToTrigger, triggerRef, position]);
888
+ const dark = config.ENABLE_DARK_MODE;
882
889
  if (!isOpen) return null;
883
890
  const positionClasses = {
884
891
  top: "bottom-[calc(100%+12px)]",
@@ -896,29 +903,29 @@ var DropdownPopup = ({
896
903
  top: {
897
904
  borderLeft: "12px solid transparent",
898
905
  borderRight: "12px solid transparent",
899
- borderTop: "12px solid white"
906
+ borderTop: dark ? "12px solid #1f2937" : "12px solid white"
900
907
  },
901
908
  bottom: {
902
909
  borderLeft: "12px solid transparent",
903
910
  borderRight: "12px solid transparent",
904
- borderBottom: "12px solid white"
911
+ borderBottom: dark ? "12px solid #1f2937" : "12px solid white"
905
912
  },
906
913
  left: {
907
914
  borderTop: "12px solid transparent",
908
915
  borderBottom: "12px solid transparent",
909
- borderLeft: "12px solid white"
916
+ borderLeft: dark ? "12px solid #1f2937" : "12px solid white"
910
917
  },
911
918
  right: {
912
919
  borderTop: "12px solid transparent",
913
920
  borderBottom: "12px solid transparent",
914
- borderRight: "12px solid white"
921
+ borderRight: dark ? "12px solid #1f2937" : "12px solid white"
915
922
  }
916
923
  };
917
924
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
918
925
  "div",
919
926
  {
920
927
  ref: menuRef,
921
- className: `absolute ${positionClasses[position]} ${width} bg-white shadow-xl rounded-lg border border-gray-200 z-50`,
928
+ className: `absolute ${positionClasses[position]} ${width} shadow-xl rounded-lg border z-50 ${dark ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200"}`,
922
929
  style: alignToTrigger ? menuOffset : { left: 0 },
923
930
  children: [
924
931
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -937,7 +944,10 @@ var DropdownPopup = ({
937
944
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
938
945
  "button",
939
946
  {
940
- className: `w-full cursor-pointer flex flex-row items-center px-4 py-2 gap-2 text-left text-sm hover:bg-gray-100 transition-colors ${!isLast ? "border-b border-gray-200" : ""}`,
947
+ className: `w-full cursor-pointer flex flex-row items-center px-4 py-2 gap-2 text-left text-sm transition-colors font-medium
948
+ ${dark ? "hover:bg-gray-800 text-gray-200" : "hover:bg-gray-100 text-gray-700"}
949
+ ${!isLast ? dark ? "border-b border-gray-700" : "border-b border-gray-200" : ""}
950
+ `,
941
951
  onClick: () => {
942
952
  if (item.onClick) {
943
953
  item.onClick();
@@ -947,7 +957,7 @@ var DropdownPopup = ({
947
957
  style: { color: item.iconColor },
948
958
  children: [
949
959
  Icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 16, color: item.iconColor }),
950
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${item.iconColor ? "" : "text-gray-700"} font-medium`, children: item.title })
960
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: item.iconColor ? "" : dark ? "text-gray-200" : "text-gray-700", children: item.title })
951
961
  ]
952
962
  },
953
963
  item.title
@@ -967,15 +977,16 @@ function ErrorScreen({
967
977
  message,
968
978
  showAdditionalInfo = true
969
979
  }) {
970
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-h-screen bg-background flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-[90%] sm:w-3/4 md:w-[45%] lg:w-[36%] xl:w-[30%] m-auto rounded-xl md:shadow-[0_0px_14px_rgba(0,0,0,0.2)] shadow-[0_0px_10px_rgba(0,0,0,0.2)] p-3 md:p-5 flex flex-col gap-4", children: [
980
+ const dark = config.ENABLE_DARK_MODE;
981
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `min-h-screen flex justify-center items-center ${dark ? "bg-gray-900" : "bg-background"}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `w-[90%] sm:w-3/4 md:w-[45%] lg:w-[36%] xl:w-[30%] m-auto rounded-xl md:shadow-[0_0px_14px_rgba(0,0,0,0.2)] shadow-[0_0px_10px_rgba(0,0,0,0.2)] p-3 md:p-5 flex flex-col gap-4 ${dark ? "bg-gray-800" : "bg-white"}`, children: [
971
982
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center py-10 pb-4 px-4", children: [
972
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-4 md:p-5 bg-red-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaExclamationTriangle, { className: "text-error size-9 md:size-10 lg:size-11" }) }) }),
973
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "text-[26px] md:text-[29px] lg:text-[32px] font-bold text-error mb-3 text-center", children: title }),
974
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-[14px] md:text-[15px] lg:text-[16px] text-center max-w-md font-medium", children: message })
983
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: dark ? "p-4 md:p-5 bg-red-900/30 rounded-full flex items-center justify-center" : "p-4 md:p-5 bg-red-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaExclamationTriangle, { className: "text-error size-9 md:size-10 lg:size-11" }) }) }),
984
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: `text-[26px] md:text-[29px] lg:text-[32px] font-bold mb-3 text-center ${dark ? "text-red-400" : "text-error"}`, children: title }),
985
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: `text-[14px] md:text-[15px] lg:text-[16px] text-center max-w-md font-medium ${dark ? "text-gray-200" : ""}`, children: message })
975
986
  ] }),
976
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "bg-red-50 border border-red-200 rounded-xl p-4 mt-5", children: [
977
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "font-semibold text-red-800 mb-2", children: "Technical Details" }),
978
- showAdditionalInfo && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-red-700 text-sm space-y-1", children: [
987
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `rounded-xl p-4 mt-5 ${dark ? "bg-red-900/20 border border-red-700" : "bg-red-50 border border-red-200"}`, children: [
988
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: `font-semibold mb-2 ${dark ? "text-red-300" : "text-red-800"}`, children: "Technical Details" }),
989
+ showAdditionalInfo && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `text-sm space-y-1 ${dark ? "text-red-400" : "text-red-700"}`, children: [
979
990
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "\u2022 Check your internet connection" }),
980
991
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "\u2022 The page may be temporarily unavailable" }),
981
992
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "\u2022 Contact support if the problem persists" })
@@ -1072,6 +1083,7 @@ function FullScreenViewer({ isOpen, items, index, setIndex, onClose }) {
1072
1083
  }
1073
1084
  onClose == null ? void 0 : onClose();
1074
1085
  };
1086
+ const dark = config.ENABLE_DARK_MODE;
1075
1087
  if (!isOpen) return null;
1076
1088
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1077
1089
  "div",
@@ -1081,7 +1093,7 @@ function FullScreenViewer({ isOpen, items, index, setIndex, onClose }) {
1081
1093
  "aria-modal": true,
1082
1094
  role: "dialog",
1083
1095
  "aria-label": "Media viewer",
1084
- className: "fixed inset-0 z-50 flex items-center justify-center bg-black/85 p-4",
1096
+ className: `fixed inset-0 z-50 flex items-center justify-center p-4 ${dark ? "bg-gray-900/95" : "bg-black/85"}`,
1085
1097
  onTouchStart,
1086
1098
  onTouchEnd,
1087
1099
  children: [
@@ -1102,7 +1114,7 @@ function FullScreenViewer({ isOpen, items, index, setIndex, onClose }) {
1102
1114
  {
1103
1115
  onClick: () => setZoom((z) => Math.min(z + 0.1, 3)),
1104
1116
  "aria-label": "Zoom in",
1105
- className: "rounded-full p-2 md:p-3 bg-secondary/50 hover:bg-secondary cursor-pointer transition-colors text-text",
1117
+ className: `rounded-full p-2 md:p-3 cursor-pointer transition-colors text-text ${dark ? "bg-secondary/30 hover:bg-secondary/60" : "bg-secondary/50 hover:bg-secondary"}`,
1106
1118
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fi.FiZoomIn, { className: "size-4" })
1107
1119
  }
1108
1120
  ),
@@ -1111,7 +1123,7 @@ function FullScreenViewer({ isOpen, items, index, setIndex, onClose }) {
1111
1123
  {
1112
1124
  onClick: () => setZoom((z) => Math.max(z - 0.1, 0.5)),
1113
1125
  "aria-label": "Zoom out",
1114
- className: "rounded-full p-2 md:p-3 bg-secondary/50 hover:bg-secondary cursor-pointer transition-colors text-text",
1126
+ className: `rounded-full p-2 md:p-3 cursor-pointer transition-colors text-text ${dark ? "bg-secondary/30 hover:bg-secondary/60" : "bg-secondary/50 hover:bg-secondary"}`,
1115
1127
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fi.FiZoomOut, { className: "size-4" })
1116
1128
  }
1117
1129
  ),
@@ -1120,12 +1132,12 @@ function FullScreenViewer({ isOpen, items, index, setIndex, onClose }) {
1120
1132
  {
1121
1133
  onClick: handleClose,
1122
1134
  "aria-label": "Close",
1123
- className: "rounded-full p-2 md:p-3 bg-primary/50 hover:bg-primary cursor-pointer transition-colors text-text",
1135
+ className: `rounded-full p-2 md:p-3 cursor-pointer transition-colors text-text ${dark ? "bg-primary/30 hover:bg-primary/60" : "bg-primary/50 hover:bg-primary"}`,
1124
1136
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa6.FaXmark, { className: "size-4" })
1125
1137
  }
1126
1138
  )
1127
1139
  ] }),
1128
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "absolute flex gap-2 items-center justify-center bottom-6 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-[14px] md:text-[16px] text-white", children: [
1140
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `absolute flex gap-2 items-center justify-center bottom-6 left-1/2 -translate-x-1/2 rounded-full px-3 py-1 text-[14px] md:text-[16px] ${dark ? "bg-gray-800/80 text-gray-100" : "bg-black/50 text-white"}`, children: [
1129
1141
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: prev, disabled: index <= 0, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa6.FaChevronLeft, { className: `size-4 md:size-5 ${index > 0 ? "text-text cursor-pointer" : "text-text/50 cursor-not-allowed"}` }) }),
1130
1142
  index + 1,
1131
1143
  " / ",
@@ -1177,10 +1189,11 @@ function InfoScreen({
1177
1189
  title,
1178
1190
  message
1179
1191
  }) {
1180
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "min-h-screen bg-background flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-[90%] md:w-[45%] lg:w-[33%] xl:w-[28%] m-auto rounded-xl md:shadow-[0_0px_20px_rgba(0,0,0,0.2)] p-3 md:p-5 flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center justify-center py-4 px-4", children: [
1181
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-4 md:p-5 bg-blue-200 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fa62.FaCircleInfo, { className: "text-secondary size-9 md:size-10 lg:size-11" }) }) }),
1182
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-[26px] md:text-[29px] lg:text-[32px] font-bold text-secondary mb-4 text-center", children: title }),
1183
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-[14px] md:text-[15px] lg:text-[16px] text-center max-w-md font-medium", children: message })
1192
+ const dark = config.ENABLE_DARK_MODE;
1193
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `min-h-screen flex justify-center items-center ${dark ? "bg-gray-900" : "bg-background"}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `w-[90%] md:w-[45%] lg:w-[33%] xl:w-[28%] m-auto rounded-xl md:shadow-[0_0px_20px_rgba(0,0,0,0.2)] p-3 md:p-5 flex flex-col gap-4 ${dark ? "bg-gray-800" : "bg-white"}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center justify-center py-4 px-4", children: [
1194
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: dark ? "p-4 md:p-5 bg-blue-900/30 rounded-full flex items-center justify-center" : "p-4 md:p-5 bg-blue-200 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fa62.FaCircleInfo, { className: `size-9 md:size-10 lg:size-11 ${dark ? "text-blue-300" : "text-secondary"}` }) }) }),
1195
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: `text-[26px] md:text-[29px] lg:text-[32px] font-bold mb-4 text-center ${dark ? "text-blue-300" : "text-secondary"}`, children: title }),
1196
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: `text-[14px] md:text-[15px] lg:text-[16px] text-center max-w-md font-medium ${dark ? "text-gray-200" : ""}`, children: message })
1184
1197
  ] }) }) });
1185
1198
  }
1186
1199
 
@@ -1205,14 +1218,15 @@ var LazyImageLoader = ({
1205
1218
  setImageError(true);
1206
1219
  setImageLoaded(true);
1207
1220
  };
1221
+ const dark = config.ENABLE_DARK_MODE;
1208
1222
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1209
1223
  "div",
1210
1224
  {
1211
1225
  className: `relative overflow-hidden ${className}`,
1212
1226
  style: { width, height },
1213
1227
  children: [
1214
- !imageLoaded && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-gray-200 animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 animate-shimmer" }) }),
1215
- imageError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center text-gray-400", children: [
1228
+ !imageLoaded && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: dark ? "absolute inset-0 bg-gray-700 animate-pulse" : "absolute inset-0 bg-gray-200 animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: dark ? "absolute inset-0 bg-gradient-to-r from-gray-700 via-gray-800 to-gray-700 animate-shimmer" : "absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 animate-shimmer" }) }),
1229
+ imageError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: dark ? "absolute inset-0 bg-gray-800 flex items-center justify-center" : "absolute inset-0 bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: dark ? "text-center text-gray-500" : "text-center text-gray-400", children: [
1216
1230
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_hi.HiOutlinePhotograph, { className: "w-12 h-12 mx-auto mb-2" }),
1217
1231
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm", children: "Failed to load" })
1218
1232
  ] }) }),
@@ -1516,40 +1530,46 @@ var Modal_default = Modal;
1516
1530
  // src/components/NumberField.tsx
1517
1531
  var import_react7 = require("react");
1518
1532
  var import_jsx_runtime14 = require("react/jsx-runtime");
1519
- function NumberField({
1533
+ var NumberField = ({
1520
1534
  label,
1521
1535
  value,
1522
- placeholder,
1523
1536
  onChange,
1524
- error,
1525
- maxLength,
1526
- id
1527
- }) {
1528
- const [lengthError, setLengthError] = (0, import_react7.useState)(null);
1529
- function handleChange(e) {
1530
- const inputValue = e.target.value;
1531
- if (maxLength && inputValue.length > maxLength) {
1532
- setLengthError(`Maximum length of ${maxLength} characters exceeded.`);
1533
- return;
1534
- }
1535
- lengthError && setLengthError(null);
1536
- onChange(e);
1537
- }
1538
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col w-full", children: [
1539
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
1537
+ min,
1538
+ max,
1539
+ step = 1,
1540
+ placeholder = "",
1541
+ disabled = false,
1542
+ error = "",
1543
+ className = "",
1544
+ inputClassName = ""
1545
+ }) => {
1546
+ const [internalValue, setInternalValue] = (0, import_react7.useState)(value);
1547
+ const isDark = config.ENABLE_DARK_MODE;
1548
+ const handleChange = (e) => {
1549
+ const val = e.target.value;
1550
+ setInternalValue(val);
1551
+ onChange(val === "" ? "" : Number(val));
1552
+ };
1553
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex flex-col ${className}`, children: [
1554
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: `mb-1 font-medium ${isDark ? "text-gray-200" : "text-gray-700"}`, children: label }),
1540
1555
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1541
1556
  "input",
1542
1557
  {
1543
- id,
1544
- value,
1545
1558
  type: "number",
1546
- placeholder,
1559
+ value: internalValue,
1547
1560
  onChange: handleChange,
1548
- className: `border-gray-400 dark:border-gray-600 rounded-2xl px-2 py-1.5 md:px-3 md:py-2 border outline-none ${error || lengthError ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 dark:border-red-700 dark:focus:border-red-600" : "focus:border-primary dark:focus:border-primary"} transition-all duration-300 ease-in-out text-sm dark:bg-gray-900 dark:text-white dark:placeholder-gray-400`
1561
+ min,
1562
+ max,
1563
+ step,
1564
+ placeholder,
1565
+ disabled,
1566
+ className: `border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 ${error ? "border-red-500" : isDark ? "border-gray-700 bg-gray-900 text-white placeholder-gray-400" : "border-gray-300 bg-white text-gray-900 placeholder-gray-400"} ${inputClassName}`
1549
1567
  }
1550
- )
1568
+ ),
1569
+ error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "mt-1 text-sm text-red-500", children: error })
1551
1570
  ] });
1552
- }
1571
+ };
1572
+ var NumberField_default = NumberField;
1553
1573
 
1554
1574
  // src/components/PasswordField.tsx
1555
1575
  var import_react8 = require("react");
@@ -1563,8 +1583,9 @@ function PasswordField({
1563
1583
  error
1564
1584
  }) {
1565
1585
  const [show, setShow] = (0, import_react8.useState)(false);
1586
+ const isDark = config.ENABLE_DARK_MODE;
1566
1587
  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col w-full", children: [
1567
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
1588
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { className: `text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold ${isDark ? "text-gray-200" : ""}`, children: label }),
1568
1589
  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
1569
1590
  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1570
1591
  "input",
@@ -1574,14 +1595,17 @@ function PasswordField({
1574
1595
  placeholder: "Enter your Password",
1575
1596
  onChange: (e) => onChange(e),
1576
1597
  type: show ? "text" : "password",
1577
- className: `border-gray-400 dark:border-gray-600 rounded-2xl px-2 py-1.5 md:px-3 md:py-2 border outline-none ${error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 dark:border-red-700 dark:focus:border-red-600" : "focus:border-primary dark:focus:border-primary"} transition-all duration-300 ease-in-out text-sm w-full pr-10 dark:bg-gray-900 dark:text-white dark:placeholder-gray-400`
1598
+ className: `rounded-2xl px-2 py-1.5 md:px-3 md:py-2 border outline-none text-sm w-full pr-10 transition-all duration-300 ease-in-out
1599
+ ${isDark ? error ? "border-red-700 focus:border-red-600 focus:ring-red-500/30 bg-gray-900 text-white placeholder-gray-400" : "border-gray-600 focus:border-primary bg-gray-900 text-white placeholder-gray-400" : error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 bg-white text-gray-900 placeholder-gray-400" : "border-gray-400 focus:border-primary bg-white text-gray-900 placeholder-gray-400"}
1600
+ `
1578
1601
  }
1579
1602
  ),
1580
1603
  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1581
1604
  "button",
1582
1605
  {
1583
1606
  type: "button",
1584
- className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 cursor-pointer transition duration-300 ease-in-out hover:text-gray-700 dark:hover:text-gray-200",
1607
+ className: `absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer transition duration-300 ease-in-out
1608
+ ${isDark ? "text-gray-400 hover:text-gray-200" : "text-gray-500 hover:text-gray-700"}`,
1585
1609
  onClick: () => setShow(!show),
1586
1610
  tabIndex: -1,
1587
1611
  children: show ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu2.LuEyeOff, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu2.LuEye, { size: 20 })
@@ -1598,6 +1622,7 @@ function Radiobutton({
1598
1622
  checked,
1599
1623
  onChange
1600
1624
  }) {
1625
+ const isDark = config.ENABLE_DARK_MODE;
1601
1626
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "inline-flex items-center cursor-pointer relative pl-7 select-none", children: [
1602
1627
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1603
1628
  "input",
@@ -1611,7 +1636,8 @@ function Radiobutton({
1611
1636
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1612
1637
  "span",
1613
1638
  {
1614
- className: "\r\n absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 rounded-full\r\n border-2 border-gray-300 dark:border-gray-600 bg-background dark:bg-gray-900\r\n flex items-center justify-center\r\n transition-colors\r\n pointer-events-none\r\n ",
1639
+ className: `absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors pointer-events-none
1640
+ ${isDark ? "border-gray-600 bg-gray-900" : "border-gray-300 bg-background"}`,
1615
1641
  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1616
1642
  "span",
1617
1643
  {
@@ -1620,7 +1646,7 @@ function Radiobutton({
1620
1646
  )
1621
1647
  }
1622
1648
  ),
1623
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm dark:text-gray-200", children: label })
1649
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `text-sm ${isDark ? "text-gray-200" : ""}`, children: label })
1624
1650
  ] });
1625
1651
  }
1626
1652
 
@@ -1656,10 +1682,13 @@ function SuccessScreen({
1656
1682
  title,
1657
1683
  message
1658
1684
  }) {
1659
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "min-h-screen bg-background flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-[90%] sm:w-3/4 md:w-[45%] lg:w-[34%] xl:w-[27%] m-auto rounded-xl md:shadow-[0_0px_14px_rgba(0,0,0,0.2)] shadow-[0_0px_10px_rgba(0,0,0,0.2)] p-3 md:p-5 flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center justify-center py-4 px-4", children: [
1660
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-4 md:p-5 bg-green-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fa2.FaCheckCircle, { className: "text-success size-9 md:size-10 lg:size-11" }) }) }),
1685
+ const isDark = config.ENABLE_DARK_MODE;
1686
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `min-h-screen flex justify-center items-center ${isDark ? "bg-gray-900" : "bg-background"}`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `w-[90%] sm:w-3/4 md:w-[45%] lg:w-[34%] xl:w-[27%] m-auto rounded-xl p-3 md:p-5 flex flex-col gap-4
1687
+ ${isDark ? "bg-gray-800 text-white shadow-[0_0px_14px_rgba(0,0,0,0.4)]" : "md:shadow-[0_0px_14px_rgba(0,0,0,0.2)] shadow-[0_0px_10px_rgba(0,0,0,0.2)] bg-white text-gray-900"}
1688
+ `, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center justify-center py-4 px-4", children: [
1689
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `${isDark ? "bg-green-900" : "bg-green-100"} p-4 md:p-5 rounded-full flex items-center justify-center`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fa2.FaCheckCircle, { className: "text-success size-9 md:size-10 lg:size-11" }) }) }),
1661
1690
  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { className: "text-[26px] md:text-[29px] lg:text-[32px] font-bold text-success mb-4 text-center", children: title }),
1662
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[14px] md:text-[15px] lg:text-[16px] text-center max-w-md font-medium", children: message })
1691
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-[14px] md:text-[15px] lg:text-[16px] text-center max-w-md font-medium ${isDark ? "text-gray-200" : ""}`, children: message })
1663
1692
  ] }) }) });
1664
1693
  }
1665
1694
 
@@ -1677,6 +1706,7 @@ function TextAreaField({
1677
1706
  }) {
1678
1707
  const [lengthError, setLengthError] = (0, import_react9.useState)(null);
1679
1708
  const textareaRef = (0, import_react9.useRef)(null);
1709
+ const isDark = config.ENABLE_DARK_MODE;
1680
1710
  function handleChange(e) {
1681
1711
  const inputValue = e.target.value;
1682
1712
  if (maxLength && inputValue.length > maxLength) {
@@ -1691,7 +1721,7 @@ function TextAreaField({
1691
1721
  onChange(e);
1692
1722
  }
1693
1723
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col w-full", children: [
1694
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
1724
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: `text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold ${isDark ? "text-gray-200" : ""}`, children: label }),
1695
1725
  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1696
1726
  "textarea",
1697
1727
  {
@@ -1701,10 +1731,12 @@ function TextAreaField({
1701
1731
  value,
1702
1732
  placeholder,
1703
1733
  rows: 4,
1704
- className: `border-gray-400 dark:border-gray-600 rounded-2xl px-2 py-1.5 md:px-3 md:py-2 border outline-none ${error || lengthError ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 dark:border-red-700 dark:focus:border-red-600" : "focus:border-primary dark:focus:border-primary"} transition-all duration-300 ease-in-out text-sm dark:bg-gray-900 dark:text-white dark:placeholder-gray-400`
1734
+ className: `rounded-2xl px-2 py-1.5 md:px-3 md:py-2 border outline-none text-sm transition-all duration-300 ease-in-out
1735
+ ${isDark ? error || lengthError ? "border-red-700 focus:border-red-600 focus:ring-red-500/30 bg-gray-900 text-white placeholder-gray-400" : "border-gray-600 focus:border-primary bg-gray-900 text-white placeholder-gray-400" : error || lengthError ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 bg-white text-gray-900 placeholder-gray-400" : "border-gray-400 focus:border-primary bg-white text-gray-900 placeholder-gray-400"}
1736
+ `
1705
1737
  }
1706
1738
  ),
1707
- maxLength && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-[9px] md:text-[10px] lg:text-[11px] p-1 text-inactive-tab-text dark:text-gray-400", children: [
1739
+ maxLength && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: `text-[9px] md:text-[10px] lg:text-[11px] p-1 text-inactive-tab-text ${isDark ? "text-gray-400" : ""}`, children: [
1708
1740
  value.length,
1709
1741
  "/",
1710
1742
  maxLength
@@ -1720,12 +1752,23 @@ function TextDisplayEdit({ label, value, onChange, disabled = false, icon, place
1720
1752
  onChange(e.target.value);
1721
1753
  }
1722
1754
  };
1755
+ const isDark = config.ENABLE_DARK_MODE;
1723
1756
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-0.5 w-full", children: [
1724
1757
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-1.5 items-center", children: [
1725
1758
  icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-secondary", children: icon }),
1726
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[14px] md:text-[15px] lg:text-[16px] font-semibold text-contrast", children: label })
1759
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: `text-[14px] md:text-[15px] lg:text-[16px] font-semibold ${isDark ? "text-gray-200" : "text-contrast"}`, children: label })
1727
1760
  ] }),
1728
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { disabled, value, onChange: handleChange, className: "text-contrast text-[14px] md:text-[15px] lg:text-[16px] border-b-2 border-primary/50 focus:outline-none focus:border-primary transition-colors w-full", placeholder })
1761
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1762
+ "input",
1763
+ {
1764
+ disabled,
1765
+ value,
1766
+ onChange: handleChange,
1767
+ className: `text-[14px] md:text-[15px] lg:text-[16px] border-b-2 focus:outline-none transition-colors w-full
1768
+ ${isDark ? "text-white border-primary/70 bg-gray-900 placeholder-gray-400 focus:border-primary" : "text-contrast border-primary/50 bg-white placeholder-gray-400 focus:border-primary"}`,
1769
+ placeholder
1770
+ }
1771
+ )
1729
1772
  ] });
1730
1773
  }
1731
1774
 
@@ -2218,10 +2261,11 @@ function TimePicker({
2218
2261
  var import_hi22 = require("react-icons/hi2");
2219
2262
  var import_jsx_runtime22 = require("react/jsx-runtime");
2220
2263
  function UnauthorizedPage() {
2221
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-screen h-screen flex flex-col justify-center items-center bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "w-[92%] md:w-1/2 lg:w-[37%] rounded-2xl bg-background p-8 shadow-[0_0px_20px_rgba(0,0,0,0.2)] flex flex-col items-center", children: [
2222
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-full bg-muted-primary md:p-4 p-2 mb-4 md:mb-6 lg:mb-8 w-fit", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[52px] md:text-[56px] lg:text-[60px] text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_hi22.HiMiniXMark, {}) }) }),
2264
+ const isDark = config.ENABLE_DARK_MODE;
2265
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `w-screen h-screen flex flex-col justify-center items-center ${isDark ? "bg-gray-900" : "bg-background"}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `w-[92%] md:w-1/2 lg:w-[37%] rounded-2xl p-8 flex flex-col items-center shadow-[0_0px_20px_rgba(0,0,0,0.2)] ${isDark ? "bg-gray-800 text-white" : "bg-background text-gray-900"}`, children: [
2266
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `rounded-full md:p-4 p-2 mb-4 md:mb-6 lg:mb-8 w-fit ${isDark ? "bg-primary/20" : "bg-muted-primary"}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[52px] md:text-[56px] lg:text-[60px] text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_hi22.HiMiniXMark, {}) }) }),
2223
2267
  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[24px] md:text-[28px] lg:text-[32px] font-bold mb-2 md:mb-4", children: "Unauthorized Access" }),
2224
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[14px] md:text-[16px] text-center max-w-md text-inactive-tab-text font-medium", children: "Sorry, you do not have the necessary permissions to view this page ." })
2268
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: `text-[14px] md:text-[16px] text-center max-w-md font-medium ${isDark ? "text-gray-400" : "text-inactive-tab-text"}`, children: "Sorry, you do not have the necessary permissions to view this page ." })
2225
2269
  ] }) });
2226
2270
  }
2227
2271
  // Annotate the CommonJS export names for ESM import in node: