tccd-ui 0.0.66 → 0.0.69

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 +4 -4
  2. package/dist/index.d.ts +4 -4
  3. package/dist/index.js +104 -53
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +104 -53
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +44 -39
package/dist/index.d.mts CHANGED
@@ -65,9 +65,9 @@ interface ButtonProps {
65
65
  loading?: boolean;
66
66
  width?: ButtonWidths;
67
67
  }
68
- declare const Button: ({ buttonText, buttonIcon, onClick, type, disabled, loading, width }: ButtonProps) => react_jsx_runtime.JSX.Element;
68
+ declare const Button: ({ buttonText, buttonIcon, onClick, type, disabled, loading, width, }: ButtonProps) => react_jsx_runtime.JSX.Element;
69
69
 
70
- declare function Checkbox({ label, checked, onChange }: {
70
+ declare function Checkbox({ label, checked, onChange, }: {
71
71
  label: React$1.ReactNode | string;
72
72
  checked: boolean;
73
73
  onChange: () => void;
@@ -161,7 +161,7 @@ declare function PasswordField({ id, value, label, onChange, error, }: {
161
161
  error?: string;
162
162
  }): react_jsx_runtime.JSX.Element;
163
163
 
164
- declare function Radiobutton({ label, checked, onChange }: {
164
+ declare function Radiobutton({ label, checked, onChange, }: {
165
165
  label: string;
166
166
  checked: boolean;
167
167
  onChange: (newValue: boolean) => void;
@@ -173,7 +173,7 @@ interface SearchFieldProps {
173
173
  placeholder?: string;
174
174
  className?: string;
175
175
  }
176
- declare function SearchField({ value, onChange, placeholder, className }: SearchFieldProps): react_jsx_runtime.JSX.Element;
176
+ declare function SearchField({ value, onChange, placeholder, className, }: SearchFieldProps): react_jsx_runtime.JSX.Element;
177
177
 
178
178
  declare function SuccessScreen({ title, message }: InfoScreenProps): react_jsx_runtime.JSX.Element;
179
179
 
package/dist/index.d.ts CHANGED
@@ -65,9 +65,9 @@ interface ButtonProps {
65
65
  loading?: boolean;
66
66
  width?: ButtonWidths;
67
67
  }
68
- declare const Button: ({ buttonText, buttonIcon, onClick, type, disabled, loading, width }: ButtonProps) => react_jsx_runtime.JSX.Element;
68
+ declare const Button: ({ buttonText, buttonIcon, onClick, type, disabled, loading, width, }: ButtonProps) => react_jsx_runtime.JSX.Element;
69
69
 
70
- declare function Checkbox({ label, checked, onChange }: {
70
+ declare function Checkbox({ label, checked, onChange, }: {
71
71
  label: React$1.ReactNode | string;
72
72
  checked: boolean;
73
73
  onChange: () => void;
@@ -161,7 +161,7 @@ declare function PasswordField({ id, value, label, onChange, error, }: {
161
161
  error?: string;
162
162
  }): react_jsx_runtime.JSX.Element;
163
163
 
164
- declare function Radiobutton({ label, checked, onChange }: {
164
+ declare function Radiobutton({ label, checked, onChange, }: {
165
165
  label: string;
166
166
  checked: boolean;
167
167
  onChange: (newValue: boolean) => void;
@@ -173,7 +173,7 @@ interface SearchFieldProps {
173
173
  placeholder?: string;
174
174
  className?: string;
175
175
  }
176
- declare function SearchField({ value, onChange, placeholder, className }: SearchFieldProps): react_jsx_runtime.JSX.Element;
176
+ declare function SearchField({ value, onChange, placeholder, className, }: SearchFieldProps): react_jsx_runtime.JSX.Element;
177
177
 
178
178
  declare function SuccessScreen({ title, message }: InfoScreenProps): react_jsx_runtime.JSX.Element;
179
179
 
package/dist/index.js CHANGED
@@ -67,7 +67,15 @@ var ButtonWidths = {
67
67
  // src/components/Button.tsx
68
68
  var import_ai = require("react-icons/ai");
69
69
  var import_jsx_runtime = require("react/jsx-runtime");
70
- var Button = ({ buttonText, buttonIcon, onClick, type, disabled = false, loading = false, width = ButtonWidths.AUTO }) => {
70
+ var Button = ({
71
+ buttonText,
72
+ buttonIcon,
73
+ onClick,
74
+ type,
75
+ disabled = false,
76
+ loading = false,
77
+ width = ButtonWidths.AUTO
78
+ }) => {
71
79
  const isDisabled = disabled || loading;
72
80
  const stylePresets = {
73
81
  primary: "bg-primary text-text border-primary",
@@ -75,7 +83,7 @@ var Button = ({ buttonText, buttonIcon, onClick, type, disabled = false, loading
75
83
  tertiary: "bg-contrast dark:bg-background text-text border-contrast",
76
84
  danger: "border-primary text-primary",
77
85
  ghost: "text-secondary border-secondary",
78
- basic: "border-contrast"
86
+ basic: "border-contrast text-contrast dark:text-gray-200"
79
87
  };
80
88
  const hoverStyles = {
81
89
  primary: "hover:bg-background hover:border-primary hover:text-primary",
@@ -126,7 +134,11 @@ var Button_default = Button;
126
134
 
127
135
  // src/components/Checkbox.tsx
128
136
  var import_jsx_runtime2 = require("react/jsx-runtime");
129
- function Checkbox({ label, checked, onChange }) {
137
+ function Checkbox({
138
+ label,
139
+ checked,
140
+ onChange
141
+ }) {
130
142
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "inline-flex items-center cursor-pointer relative pl-7 select-none", children: [
131
143
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
132
144
  "input",
@@ -137,23 +149,35 @@ function Checkbox({ label, checked, onChange }) {
137
149
  className: "peer absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 opacity-0 cursor-pointer"
138
150
  }
139
151
  ),
140
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { 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 bg-white\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 ", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
141
- "svg",
152
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
153
+ "span",
142
154
  {
143
- className: "w-4 h-4 text-white",
144
- fill: "none",
145
- stroke: "currentColor",
146
- strokeWidth: "3",
147
- viewBox: "0 0 24 24",
148
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
155
+ className: "\n absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 rounded-md\n border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900\n peer-checked:bg-primary peer-checked:border-primary\n flex items-center justify-center\n transition-colors\n pointer-events-none\n ",
156
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
157
+ "svg",
158
+ {
159
+ className: "w-4 h-4 text-white",
160
+ fill: "none",
161
+ stroke: "currentColor",
162
+ strokeWidth: "3",
163
+ viewBox: "0 0 24 24",
164
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
165
+ "path",
166
+ {
167
+ strokeLinecap: "round",
168
+ strokeLinejoin: "round",
169
+ d: "M5 13l4 4L19 7"
170
+ }
171
+ )
172
+ }
173
+ )
149
174
  }
150
- ) }),
151
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm", children: label })
175
+ ),
176
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm dark:text-gray-200", children: label })
152
177
  ] });
153
178
  }
154
179
 
155
180
  // src/components/DatePicker.tsx
156
- var import_md = require("react-icons/md");
157
181
  var import_jsx_runtime3 = require("react/jsx-runtime");
158
182
  function DatePicker({
159
183
  label,
@@ -169,24 +193,25 @@ function DatePicker({
169
193
  onChange(e.target.value.toString());
170
194
  };
171
195
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col w-full", children: [
172
- label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
173
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
174
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
175
- "input",
176
- {
177
- id,
178
- type: "date",
179
- value,
180
- onChange: handleDateChange,
181
- disabled,
182
- min: minDate,
183
- max: maxDate,
184
- className: `w-full border-contrast rounded-full px-4 md:px-5 py-2 border outline-none ${error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30" : "focus:border-primary"} ${disabled ? "bg-gray-100 cursor-not-allowed opacity-60" : "bg-white"} transition-all duration-300 ease-in-out text-sm pr-10 [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-3 [&::-webkit-calendar-picker-indicator]:w-5 [&::-webkit-calendar-picker-indicator]:h-5 [&::-webkit-calendar-picker-indicator]:cursor-pointer`
196
+ label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
197
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
198
+ "input",
199
+ {
200
+ id,
201
+ type: "date",
202
+ value,
203
+ onChange: handleDateChange,
204
+ disabled,
205
+ min: minDate,
206
+ max: maxDate,
207
+ className: `w-full border-contrast rounded-full px-4 md:px-5 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"} ${disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed opacity-60" : "bg-white dark:bg-gray-900"} transition-all duration-300 ease-in-out text-sm pr-14 dark:text-white dark:border-gray-700 custom-date-picker-icon`,
208
+ style: {
209
+ WebkitTextFillColor: error ? "#ef4444" : void 0,
210
+ color: error ? "#ef4444" : void 0
185
211
  }
186
- ),
187
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `w-5 h-5 ${disabled ? "text-gray-400" : "text-secondary"}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdCalendarToday, {}) }) })
188
- ] }),
189
- error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-red-500 text-sm font-medium mt-1", children: error })
212
+ }
213
+ ) }),
214
+ error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-red-500 dark:text-red-400 text-sm font-medium mt-1", children: error })
190
215
  ] });
191
216
  }
192
217
 
@@ -228,7 +253,7 @@ function DropdownMenu({
228
253
  "label",
229
254
  {
230
255
  htmlFor: id,
231
- className: "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold",
256
+ className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold",
232
257
  children: label
233
258
  }
234
259
  ),
@@ -244,7 +269,12 @@ function DropdownMenu({
244
269
  width: ButtonWidths.FULL
245
270
  }
246
271
  ),
247
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_io5.IoChevronDown, { 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" : ""}` })
272
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
273
+ import_io5.IoChevronDown,
274
+ {
275
+ 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" : ""}`
276
+ }
277
+ )
248
278
  ] }),
249
279
  isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-background border border-secondary/30 rounded-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", 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)(
250
280
  "button",
@@ -588,7 +618,7 @@ function InputField({
588
618
  id
589
619
  }) {
590
620
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col w-full", children: [
591
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
621
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
592
622
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
593
623
  "input",
594
624
  {
@@ -596,7 +626,7 @@ function InputField({
596
626
  value,
597
627
  placeholder,
598
628
  onChange: (e) => onChange(e),
599
- className: `border-gray-400 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" : "focus:border-primary"} transition-all duration-300 ease-in-out text-sm`
629
+ 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 dark:bg-gray-900 dark:text-white dark:placeholder-gray-400`
600
630
  }
601
631
  )
602
632
  ] });
@@ -968,7 +998,7 @@ function NumberField({
968
998
  onChange(e);
969
999
  }
970
1000
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col w-full", children: [
971
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
1001
+ /* @__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 }),
972
1002
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
973
1003
  "input",
974
1004
  {
@@ -977,7 +1007,7 @@ function NumberField({
977
1007
  type: "number",
978
1008
  placeholder,
979
1009
  onChange: handleChange,
980
- className: `border-gray-400 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" : "focus:border-primary"} transition-all duration-300 ease-in-out text-sm`
1010
+ 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`
981
1011
  }
982
1012
  )
983
1013
  ] });
@@ -996,7 +1026,7 @@ function PasswordField({
996
1026
  }) {
997
1027
  const [show, setShow] = (0, import_react7.useState)(false);
998
1028
  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col w-full", children: [
999
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { className: "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
1029
+ /* @__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 }),
1000
1030
  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
1001
1031
  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1002
1032
  "input",
@@ -1006,14 +1036,14 @@ function PasswordField({
1006
1036
  placeholder: "Enter your Password",
1007
1037
  onChange: (e) => onChange(e),
1008
1038
  type: show ? "text" : "password",
1009
- className: `border-gray-400 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" : "focus:border-primary"} transition-all duration-300 ease-in-out text-sm w-full pr-10 `
1039
+ 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`
1010
1040
  }
1011
1041
  ),
1012
1042
  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1013
1043
  "button",
1014
1044
  {
1015
1045
  type: "button",
1016
- className: "absolute right-3 top-1/2 -translate-y-1/2 contrast-50 cursor-pointer transition duration-300 ease-in-out hover:contrast-100",
1046
+ 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",
1017
1047
  onClick: () => setShow(!show),
1018
1048
  tabIndex: -1,
1019
1049
  children: show ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu2.LuEyeOff, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu2.LuEye, { size: 20 })
@@ -1025,7 +1055,11 @@ function PasswordField({
1025
1055
 
1026
1056
  // src/components/RadioButton.tsx
1027
1057
  var import_jsx_runtime16 = require("react/jsx-runtime");
1028
- function Radiobutton({ label, checked, onChange }) {
1058
+ function Radiobutton({
1059
+ label,
1060
+ checked,
1061
+ onChange
1062
+ }) {
1029
1063
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "inline-flex items-center cursor-pointer relative pl-7 select-none", children: [
1030
1064
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1031
1065
  "input",
@@ -1036,8 +1070,19 @@ function Radiobutton({ label, checked, onChange }) {
1036
1070
  className: "peer absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 opacity-0 cursor-pointer"
1037
1071
  }
1038
1072
  ),
1039
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { 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 bg-background\r\n flex items-center justify-center\r\n transition-colors\r\n pointer-events-none\r\n ", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `w-3 h-3 ${checked ? "bg-primary" : "bg-transparent"} rounded-full transition-all` }) }),
1040
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm", children: label })
1073
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1074
+ "span",
1075
+ {
1076
+ className: "\n absolute left-0 top-1/2 -translate-y-1/2 w-5 h-5 rounded-full\n border-2 border-gray-300 dark:border-gray-600 bg-background dark:bg-gray-900\n flex items-center justify-center\n transition-colors\n pointer-events-none\n ",
1077
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1078
+ "span",
1079
+ {
1080
+ className: `w-3 h-3 ${checked ? "bg-primary" : "bg-transparent"} rounded-full transition-all`
1081
+ }
1082
+ )
1083
+ }
1084
+ ),
1085
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm dark:text-gray-200", children: label })
1041
1086
  ] });
1042
1087
  }
1043
1088
 
@@ -1051,7 +1096,7 @@ function SearchField({
1051
1096
  className = ""
1052
1097
  }) {
1053
1098
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `relative w-full lg:w-96 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
1054
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-secondary/60 text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_hi2.HiOutlineMagnifyingGlass, {}) }),
1099
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-secondary/60 dark:text-gray-400 text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_hi2.HiOutlineMagnifyingGlass, {}) }),
1055
1100
  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1056
1101
  "input",
1057
1102
  {
@@ -1059,7 +1104,7 @@ function SearchField({
1059
1104
  value,
1060
1105
  onChange: (e) => onChange(e.target.value),
1061
1106
  placeholder,
1062
- className: "w-full bg-background/50 rounded-2xl border-inactive-tab-text pl-12 pr-4 py-1.5 text-[14px] md:text-[15px] lg:text-[16px] border focus:border-primary focus:outline-none transition-all duration-300 ease-in-out placeholder:text-muted-secondary"
1107
+ className: "w-full bg-background/50 dark:bg-gray-900 rounded-2xl border-inactive-tab-text dark:border-gray-600 pl-12 pr-4 py-1.5 text-[14px] md:text-[15px] lg:text-[16px] border focus:border-primary focus:outline-none transition-all duration-300 ease-in-out placeholder:text-muted-secondary dark:placeholder:text-gray-400 dark:text-white"
1063
1108
  }
1064
1109
  )
1065
1110
  ] }) });
@@ -1107,7 +1152,7 @@ function TextAreaField({
1107
1152
  onChange(e);
1108
1153
  }
1109
1154
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col w-full", children: [
1110
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
1155
+ /* @__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 }),
1111
1156
  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1112
1157
  "textarea",
1113
1158
  {
@@ -1117,10 +1162,10 @@ function TextAreaField({
1117
1162
  value,
1118
1163
  placeholder,
1119
1164
  rows: 4,
1120
- className: `border-gray-400 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" : "focus:border-primary"} transition-all duration-300 ease-in-out text-sm`
1165
+ 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`
1121
1166
  }
1122
1167
  ),
1123
- maxLength && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-[9px] md:text-[10px] lg:text-[11px] p-1 text-inactive-tab-text", children: [
1168
+ 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: [
1124
1169
  value.length,
1125
1170
  "/",
1126
1171
  maxLength
@@ -1128,7 +1173,7 @@ function TextAreaField({
1128
1173
  ] });
1129
1174
  }
1130
1175
 
1131
- // src/components/textDisplayEdit.tsx
1176
+ // src/components/TextDisplayEdit.tsx
1132
1177
  var import_jsx_runtime20 = require("react/jsx-runtime");
1133
1178
  function TextDisplayEdit({ label, value, onChange, disabled = false, icon, placeholder }) {
1134
1179
  const handleChange = (e) => {
@@ -1160,7 +1205,7 @@ function TimePicker({
1160
1205
  onChange(e.target.value.toString());
1161
1206
  };
1162
1207
  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full", children: [
1163
- label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
1208
+ label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
1164
1209
  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
1165
1210
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1166
1211
  "input",
@@ -1170,12 +1215,18 @@ function TimePicker({
1170
1215
  value,
1171
1216
  onChange: handleTimeChange,
1172
1217
  disabled,
1173
- className: `w-full border-contrast rounded-full px-4 md:px-5 py-2 border outline-none ${error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30" : "focus:border-primary"} ${disabled ? "bg-gray-100 cursor-not-allowed opacity-60" : "bg-white"} transition-all duration-300 ease-in-out text-sm pr-10 [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-3 [&::-webkit-calendar-picker-indicator]:w-5 [&::-webkit-calendar-picker-indicator]:h-5 [&::-webkit-calendar-picker-indicator]:cursor-pointer`
1218
+ className: `w-full border-contrast rounded-full px-4 md:px-5 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"} ${disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed opacity-60" : "bg-white dark:bg-gray-900"} transition-all duration-300 ease-in-out text-sm pr-10 dark:text-white dark:border-gray-700 [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-3 [&::-webkit-calendar-picker-indicator]:w-5 [&::-webkit-calendar-picker-indicator]:h-5 [&::-webkit-calendar-picker-indicator]:cursor-pointer`
1174
1219
  }
1175
1220
  ),
1176
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `w-5 h-5 ${disabled ? "text-gray-400" : "text-secondary"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fa3.FaRegClock, {}) }) })
1221
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1222
+ "span",
1223
+ {
1224
+ className: `w-5 h-5 ${disabled ? "text-gray-400 dark:text-gray-600" : "text-secondary dark:text-blue-400"}`,
1225
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fa3.FaRegClock, {})
1226
+ }
1227
+ ) })
1177
1228
  ] }),
1178
- error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500 text-sm font-medium mt-1", children: error })
1229
+ error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500 dark:text-red-400 text-sm font-medium mt-1", children: error })
1179
1230
  ] });
1180
1231
  }
1181
1232