tccd-ui 0.0.93 → 0.0.95

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 +9 -5
  2. package/dist/index.d.ts +9 -5
  3. package/dist/index.js +93 -23
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +93 -23
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -75,6 +75,7 @@ declare function Checkbox({ label, checked, onChange, }: {
75
75
 
76
76
  interface DatePickerProps {
77
77
  label?: string;
78
+ labelClassName?: string;
78
79
  id?: string;
79
80
  value: string;
80
81
  onChange: (date: string) => void;
@@ -83,10 +84,11 @@ interface DatePickerProps {
83
84
  minDate?: string;
84
85
  maxDate?: string;
85
86
  }
86
- declare function DatePicker({ label, id, value, onChange, error, disabled, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
87
+ declare function DatePicker({ label, labelClassName, id, value, onChange, error, disabled, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
87
88
 
88
89
  interface DropdownMenuProps {
89
90
  label?: string;
91
+ labelClassName?: string;
90
92
  placeholder?: string;
91
93
  options: DropdownOption[];
92
94
  value?: string;
@@ -96,7 +98,7 @@ interface DropdownMenuProps {
96
98
  className?: string;
97
99
  id?: string;
98
100
  }
99
- declare function DropDownMenu({ label, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
101
+ declare function DropDownMenu({ label, labelClassName, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
100
102
 
101
103
  declare const DropdownPopup: ({ isOpen, onClose, items, position, width, triggerRef, alignToTrigger, }: DropdownMenuProps$1) => react_jsx_runtime.JSX.Element;
102
104
 
@@ -113,8 +115,9 @@ declare function FullScreenViewer({ isOpen, items, index, setIndex, onClose }: {
113
115
  onClose: () => void;
114
116
  }): react_jsx_runtime.JSX.Element;
115
117
 
116
- declare function InputField({ label, value, placeholder, onChange, error, id, }: {
118
+ declare function InputField({ label, labelClassName, value, placeholder, onChange, error, id, }: {
117
119
  label: string;
120
+ labelClassName?: string;
118
121
  id: string;
119
122
  value: string;
120
123
  placeholder: string;
@@ -145,6 +148,7 @@ declare const Modal: ({ title, isOpen, onClose, children, className, }: {
145
148
 
146
149
  interface NumberFieldProps {
147
150
  label: string;
151
+ labelClassName?: string;
148
152
  value: number | string;
149
153
  onChange: (value: number | string) => void;
150
154
  min?: number;
@@ -154,14 +158,14 @@ interface NumberFieldProps {
154
158
  disabled?: boolean;
155
159
  error?: string;
156
160
  className?: string;
157
- inputClassName?: string;
158
161
  }
159
162
  declare const NumberField: React$1.FC<NumberFieldProps>;
160
163
 
161
- declare function PasswordField({ id, value, label, onChange, error, }: {
164
+ declare function PasswordField({ id, value, label, labelClassName, onChange, error, }: {
162
165
  id: string;
163
166
  value: string;
164
167
  label: string;
168
+ labelClassName?: string;
165
169
  onChange: (newValue: React$1.ChangeEvent<HTMLInputElement>) => void;
166
170
  error?: string;
167
171
  }): react_jsx_runtime.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -75,6 +75,7 @@ declare function Checkbox({ label, checked, onChange, }: {
75
75
 
76
76
  interface DatePickerProps {
77
77
  label?: string;
78
+ labelClassName?: string;
78
79
  id?: string;
79
80
  value: string;
80
81
  onChange: (date: string) => void;
@@ -83,10 +84,11 @@ interface DatePickerProps {
83
84
  minDate?: string;
84
85
  maxDate?: string;
85
86
  }
86
- declare function DatePicker({ label, id, value, onChange, error, disabled, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
87
+ declare function DatePicker({ label, labelClassName, id, value, onChange, error, disabled, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
87
88
 
88
89
  interface DropdownMenuProps {
89
90
  label?: string;
91
+ labelClassName?: string;
90
92
  placeholder?: string;
91
93
  options: DropdownOption[];
92
94
  value?: string;
@@ -96,7 +98,7 @@ interface DropdownMenuProps {
96
98
  className?: string;
97
99
  id?: string;
98
100
  }
99
- declare function DropDownMenu({ label, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
101
+ declare function DropDownMenu({ label, labelClassName, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
100
102
 
101
103
  declare const DropdownPopup: ({ isOpen, onClose, items, position, width, triggerRef, alignToTrigger, }: DropdownMenuProps$1) => react_jsx_runtime.JSX.Element;
102
104
 
@@ -113,8 +115,9 @@ declare function FullScreenViewer({ isOpen, items, index, setIndex, onClose }: {
113
115
  onClose: () => void;
114
116
  }): react_jsx_runtime.JSX.Element;
115
117
 
116
- declare function InputField({ label, value, placeholder, onChange, error, id, }: {
118
+ declare function InputField({ label, labelClassName, value, placeholder, onChange, error, id, }: {
117
119
  label: string;
120
+ labelClassName?: string;
118
121
  id: string;
119
122
  value: string;
120
123
  placeholder: string;
@@ -145,6 +148,7 @@ declare const Modal: ({ title, isOpen, onClose, children, className, }: {
145
148
 
146
149
  interface NumberFieldProps {
147
150
  label: string;
151
+ labelClassName?: string;
148
152
  value: number | string;
149
153
  onChange: (value: number | string) => void;
150
154
  min?: number;
@@ -154,14 +158,14 @@ interface NumberFieldProps {
154
158
  disabled?: boolean;
155
159
  error?: string;
156
160
  className?: string;
157
- inputClassName?: string;
158
161
  }
159
162
  declare const NumberField: React$1.FC<NumberFieldProps>;
160
163
 
161
- declare function PasswordField({ id, value, label, onChange, error, }: {
164
+ declare function PasswordField({ id, value, label, labelClassName, onChange, error, }: {
162
165
  id: string;
163
166
  value: string;
164
167
  label: string;
168
+ labelClassName?: string;
165
169
  onChange: (newValue: React$1.ChangeEvent<HTMLInputElement>) => void;
166
170
  error?: string;
167
171
  }): react_jsx_runtime.JSX.Element;
package/dist/index.js CHANGED
@@ -82,8 +82,8 @@ var import_react = __toESM(require("react"));
82
82
  // src/config.ts
83
83
  var darkModeEnabled = false;
84
84
  var listeners = /* @__PURE__ */ new Set();
85
- var setDarkModeConfig = (config) => {
86
- darkModeEnabled = config.enableDarkMode;
85
+ var setDarkModeConfig = (config2) => {
86
+ darkModeEnabled = config2.enableDarkMode;
87
87
  listeners.forEach((listener) => listener(darkModeEnabled));
88
88
  };
89
89
  var getDarkModeEnabled = () => darkModeEnabled;
@@ -91,6 +91,11 @@ var onDarkModeChange = (listener) => {
91
91
  listeners.add(listener);
92
92
  return () => listeners.delete(listener);
93
93
  };
94
+ var config = {
95
+ get ENABLE_DARK_MODE() {
96
+ return darkModeEnabled;
97
+ }
98
+ };
94
99
 
95
100
  // src/components/Button.tsx
96
101
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -229,6 +234,7 @@ var import_react_dom = require("react-dom");
229
234
  var import_jsx_runtime3 = require("react/jsx-runtime");
230
235
  function DatePicker({
231
236
  label,
237
+ labelClassName,
232
238
  id,
233
239
  value,
234
240
  onChange,
@@ -240,10 +246,15 @@ function DatePicker({
240
246
  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
241
247
  const [currentMonth, setCurrentMonth] = (0, import_react3.useState)((/* @__PURE__ */ new Date()).getMonth());
242
248
  const [currentYear, setCurrentYear] = (0, import_react3.useState)((/* @__PURE__ */ new Date()).getFullYear());
243
- const [dropdownPosition, setDropdownPosition] = (0, import_react3.useState)({ top: 0, left: 0, width: 0 });
249
+ const [dropdownPosition, setDropdownPosition] = (0, import_react3.useState)({
250
+ top: 0,
251
+ left: 0,
252
+ width: 0
253
+ });
244
254
  const wrapperRef = (0, import_react3.useRef)(null);
245
255
  const buttonRef = (0, import_react3.useRef)(null);
246
256
  const dropdownRef = (0, import_react3.useRef)(null);
257
+ const dark = config.ENABLE_DARK_MODE;
247
258
  const months = [
248
259
  "January",
249
260
  "February",
@@ -258,7 +269,10 @@ function DatePicker({
258
269
  "November",
259
270
  "December"
260
271
  ];
261
- const years = Array.from({ length: 111 }, (_, i) => (/* @__PURE__ */ new Date()).getFullYear() - 100 + i);
272
+ const years = Array.from(
273
+ { length: 111 },
274
+ (_, i) => (/* @__PURE__ */ new Date()).getFullYear() - 100 + i
275
+ );
262
276
  const updateDropdownPosition = (0, import_react3.useCallback)(() => {
263
277
  if (buttonRef.current) {
264
278
  const rect = buttonRef.current.getBoundingClientRect();
@@ -387,7 +401,7 @@ function DatePicker({
387
401
  }
388
402
  return days;
389
403
  };
390
- const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
404
+ const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: dark ? "dark" : "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
391
405
  "div",
392
406
  {
393
407
  ref: dropdownRef,
@@ -401,7 +415,24 @@ function DatePicker({
401
415
  },
402
416
  children: [
403
417
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "datepicker-header", children: [
404
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: prevMonth, className: "nav-button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4 sm:w-5 sm:h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 19l-7-7 7-7" }) }) }),
418
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: prevMonth, className: "nav-button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
419
+ "svg",
420
+ {
421
+ className: "w-4 h-4 sm:w-5 sm:h-5",
422
+ fill: "none",
423
+ stroke: "currentColor",
424
+ viewBox: "0 0 24 24",
425
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
426
+ "path",
427
+ {
428
+ strokeLinecap: "round",
429
+ strokeLinejoin: "round",
430
+ strokeWidth: "2",
431
+ d: "M15 19l-7-7 7-7"
432
+ }
433
+ )
434
+ }
435
+ ) }),
405
436
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "selects-container", children: [
406
437
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
407
438
  "select",
@@ -422,7 +453,24 @@ function DatePicker({
422
453
  }
423
454
  )
424
455
  ] }),
425
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: nextMonth, className: "nav-button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4 sm:w-5 sm:h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 5l7 7-7 7" }) }) })
456
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: nextMonth, className: "nav-button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
457
+ "svg",
458
+ {
459
+ className: "w-4 h-4 sm:w-5 sm:h-5",
460
+ fill: "none",
461
+ stroke: "currentColor",
462
+ viewBox: "0 0 24 24",
463
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
464
+ "path",
465
+ {
466
+ strokeLinecap: "round",
467
+ strokeLinejoin: "round",
468
+ strokeWidth: "2",
469
+ d: "M9 5l7 7-7 7"
470
+ }
471
+ )
472
+ }
473
+ ) })
426
474
  ] }),
427
475
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "day-names", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "day-name", children: day }, day)) }),
428
476
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "calendar-grid", children: renderCalendarDays() }),
@@ -442,9 +490,15 @@ function DatePicker({
442
490
  )
443
491
  ]
444
492
  }
445
- );
493
+ ) });
446
494
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col w-full datepicker-wrapper", ref: wrapperRef, children: [
447
- label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-label dark:text-gray-200 text-[12px] sm:text-[13px] md:text-[14px] lg:text-[15px] xl:text-[16px] mb-1 sm:mb-2 font-semibold", children: label }),
495
+ label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
496
+ "label",
497
+ {
498
+ className: `text-label ${dark ? "text-gray-200" : ""} text-[12px] sm:text-[13px] md:text-[14px] lg:text-[15px] xl:text-[16px] mb-1 sm:mb-2 font-semibold ${labelClassName || ""}`,
499
+ children: label
500
+ }
501
+ ),
448
502
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
449
503
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
450
504
  "button",
@@ -454,14 +508,14 @@ function DatePicker({
454
508
  type: "button",
455
509
  onClick: () => !disabled && setIsOpen(!isOpen),
456
510
  disabled,
457
- className: `w-full border-contrast rounded-full px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 border outline-none text-left text-xs sm:text-sm ${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 cursor-pointer"} transition-all duration-300 ease-in-out pr-8 sm:pr-10 dark:text-white dark:border-gray-700`,
511
+ className: `w-full border-contrast rounded-full px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 border outline-none text-left text-xs sm:text-sm ${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 border-gray-700" : "focus:border-primary"} ${disabled ? dark ? "bg-gray-700 cursor-not-allowed opacity-60" : "bg-gray-100 cursor-not-allowed opacity-60" : dark ? "bg-gray-900 cursor-pointer text-white" : "bg-white cursor-pointer"} transition-all duration-300 ease-in-out pr-8 sm:pr-10`,
458
512
  children: getDisplayValue()
459
513
  }
460
514
  ),
461
515
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-2 sm:right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
462
516
  "svg",
463
517
  {
464
- className: `w-4 h-4 sm:w-5 sm:h-5 ${disabled ? "text-gray-400 dark:text-gray-600" : "text-secondary dark:text-blue-400"}`,
518
+ className: `w-4 h-4 sm:w-5 sm:h-5 ${disabled ? dark ? "text-gray-600" : "text-gray-400" : dark ? "text-blue-400" : "text-secondary"}`,
465
519
  "aria-hidden": "true",
466
520
  xmlns: "http://www.w3.org/2000/svg",
467
521
  fill: "none",
@@ -754,6 +808,7 @@ var import_io5 = require("react-icons/io5");
754
808
  var import_jsx_runtime4 = require("react/jsx-runtime");
755
809
  function DropDownMenu({
756
810
  label,
811
+ labelClassName,
757
812
  placeholder = "Select an option",
758
813
  options,
759
814
  value,
@@ -812,7 +867,7 @@ function DropDownMenu({
812
867
  "label",
813
868
  {
814
869
  htmlFor: id,
815
- 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",
870
+ className: dark ? `text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold align-center ${labelClassName || ""}` : `text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold align-center ${labelClassName || ""}`,
816
871
  children: label
817
872
  }
818
873
  ),
@@ -1218,6 +1273,7 @@ var import_react8 = require("react");
1218
1273
  var import_jsx_runtime8 = require("react/jsx-runtime");
1219
1274
  function InputField({
1220
1275
  label,
1276
+ labelClassName,
1221
1277
  value,
1222
1278
  placeholder,
1223
1279
  onChange,
@@ -1237,7 +1293,7 @@ function InputField({
1237
1293
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1238
1294
  "label",
1239
1295
  {
1240
- className: dark ? "text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold" : "text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold",
1296
+ className: dark ? `text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold ${labelClassName || ""}` : `text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold ${labelClassName || ""}`,
1241
1297
  children: label
1242
1298
  }
1243
1299
  ),
@@ -1623,6 +1679,7 @@ var import_react14 = require("react");
1623
1679
  var import_jsx_runtime14 = require("react/jsx-runtime");
1624
1680
  var NumberField = ({
1625
1681
  label,
1682
+ labelClassName,
1626
1683
  value,
1627
1684
  onChange,
1628
1685
  min,
@@ -1631,8 +1688,7 @@ var NumberField = ({
1631
1688
  placeholder = "",
1632
1689
  disabled = false,
1633
1690
  error = "",
1634
- className = "",
1635
- inputClassName = ""
1691
+ className = ""
1636
1692
  }) => {
1637
1693
  const [internalValue, setInternalValue] = (0, import_react13.useState)(value);
1638
1694
  const [dark, setDark] = (0, import_react13.useState)(getDarkModeEnabled());
@@ -1650,7 +1706,13 @@ var NumberField = ({
1650
1706
  onChange(val === "" ? "" : Number(val));
1651
1707
  };
1652
1708
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex flex-col ${className}`, children: [
1653
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: `mb-1 font-medium ${dark ? "text-gray-200" : "text-gray-700"}`, children: label }),
1709
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1710
+ "label",
1711
+ {
1712
+ className: dark ? `text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold ${labelClassName || ""}` : `text-label text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold ${labelClassName || ""}`,
1713
+ children: label
1714
+ }
1715
+ ),
1654
1716
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1655
1717
  "input",
1656
1718
  {
@@ -1662,7 +1724,7 @@ var NumberField = ({
1662
1724
  step,
1663
1725
  placeholder,
1664
1726
  disabled,
1665
- className: `border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 ${error ? "border-red-500" : dark ? "border-gray-700 bg-gray-900 text-white placeholder-gray-400" : "border-gray-300 bg-white text-gray-900 placeholder-gray-400"} ${inputClassName}`
1727
+ className: `border-gray-400 rounded-2xl px-2 py-1.5 md:px-3 md:py-2 border outline-none ${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"} transition-all duration-300 ease-in-out text-sm ${dark ? "bg-gray-900 text-white placeholder-gray-400 border-gray-600" : ""}`
1666
1728
  }
1667
1729
  ),
1668
1730
  error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "mt-1 text-sm text-red-500", children: error })
@@ -1679,6 +1741,7 @@ function PasswordField({
1679
1741
  id,
1680
1742
  value,
1681
1743
  label,
1744
+ labelClassName,
1682
1745
  onChange,
1683
1746
  error
1684
1747
  }) {
@@ -1693,7 +1756,7 @@ function PasswordField({
1693
1756
  };
1694
1757
  }, []);
1695
1758
  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col w-full", children: [
1696
- /* @__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 }),
1759
+ /* @__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" : ""} ${labelClassName || ""}`, children: label }),
1697
1760
  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
1698
1761
  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1699
1762
  "input",
@@ -1968,6 +2031,7 @@ function TimePicker({
1968
2031
  const wrapperRef = (0, import_react22.useRef)(null);
1969
2032
  const buttonRef = (0, import_react22.useRef)(null);
1970
2033
  const dropdownRef = (0, import_react22.useRef)(null);
2034
+ const dark = config.ENABLE_DARK_MODE;
1971
2035
  const updateDropdownPosition = (0, import_react22.useCallback)(() => {
1972
2036
  if (buttonRef.current) {
1973
2037
  const rect = buttonRef.current.getBoundingClientRect();
@@ -2041,7 +2105,7 @@ function TimePicker({
2041
2105
  };
2042
2106
  const hourOptions = use24Hour ? Array.from({ length: 24 }, (_, i) => i) : Array.from({ length: 12 }, (_, i) => i + 1);
2043
2107
  const minuteOptions = Array.from({ length: 60 }, (_, i) => i);
2044
- const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
2108
+ const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: dark ? "dark" : "", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
2045
2109
  "div",
2046
2110
  {
2047
2111
  ref: dropdownRef,
@@ -2135,9 +2199,15 @@ function TimePicker({
2135
2199
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", onClick: handleDone, className: "done-button", children: "Done" })
2136
2200
  ]
2137
2201
  }
2138
- );
2202
+ ) });
2139
2203
  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full timepicker-wrapper", ref: wrapperRef, children: [
2140
- label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "text-label dark:text-gray-200 text-[12px] sm:text-[13px] md:text-[14px] lg:text-[15px] xl:text-[16px] mb-1 sm:mb-2 font-semibold", children: label }),
2204
+ label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2205
+ "label",
2206
+ {
2207
+ className: `text-label ${dark ? "text-gray-200" : ""} text-[12px] sm:text-[13px] md:text-[14px] lg:text-[15px] xl:text-[16px] mb-1 sm:mb-2 font-semibold`,
2208
+ children: label
2209
+ }
2210
+ ),
2141
2211
  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
2142
2212
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2143
2213
  "button",
@@ -2147,14 +2217,14 @@ function TimePicker({
2147
2217
  type: "button",
2148
2218
  onClick: () => !disabled && setIsOpen(!isOpen),
2149
2219
  disabled,
2150
- className: `w-full border-contrast rounded-full px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 border outline-none text-left text-xs sm:text-sm ${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 cursor-pointer"} transition-all duration-300 ease-in-out pr-8 sm:pr-10 dark:text-white dark:border-gray-700`,
2220
+ className: `w-full border-contrast rounded-full px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 border outline-none text-left text-xs sm:text-sm ${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 border-gray-700" : "focus:border-primary"} ${disabled ? dark ? "bg-gray-700 cursor-not-allowed opacity-60" : "bg-gray-100 cursor-not-allowed opacity-60" : dark ? "bg-gray-900 cursor-pointer text-white" : "bg-white cursor-pointer"} transition-all duration-300 ease-in-out pr-8 sm:pr-10`,
2151
2221
  children: getDisplayTime()
2152
2222
  }
2153
2223
  ),
2154
2224
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute right-2 sm:right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2155
2225
  "svg",
2156
2226
  {
2157
- className: `w-4 h-4 sm:w-5 sm:h-5 ${disabled ? "text-gray-400 dark:text-gray-600" : "text-secondary dark:text-blue-400"}`,
2227
+ className: `w-4 h-4 sm:w-5 sm:h-5 ${disabled ? dark ? "text-gray-600" : "text-gray-400" : dark ? "text-blue-400" : "text-secondary"}`,
2158
2228
  "aria-hidden": "true",
2159
2229
  xmlns: "http://www.w3.org/2000/svg",
2160
2230
  fill: "none",